/* ============================================================
   ShortFactory Platform v10.3 — Frontend CSS
   Design: storyn.kr style (clean white, red accent #E8003D, card-based)
   ============================================================ */

/* ── WP 블록/테마 CSS 변수 오버라이드 (TT3 등) ──────────── */
body.sfp-page,
body.sfp-standalone {
  --wp-style__root--padding-top: 0 !important;
  --wp-style__root--padding-right: 0 !important;
  --wp-style__root--padding-bottom: 0 !important;
  --wp-style__root--padding-left: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.sfp-page .wp-site-blocks { padding: 0 !important; }
body.sfp-page .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: none; margin-left: 0; margin-right: 0; }
body.sfp-page .has-global-padding { padding: 0 !important; }

/* ── Google Font loaded via wp_enqueue_style ────────────── */

:root {
  /* Brand — storyn.kr 스타일 레드 포인트 */
  --sfp-primary:     #E8003D;
  --sfp-primary-dk:  #C50034;
  --sfp-primary-lt:  #FFF0F3;
  --sfp-accent:      #FF6B35;
  /* Semantic */
  --sfp-success:     #10B981;
  --sfp-warn:        #F59E0B;
  --sfp-danger:      #EF4444;
  --sfp-info:        #3B82F6;
  --sfp-gray:        #6B7280;
  /* Surface — 밝고 깔끔한 라이트모드 */
  --sfp-bg:          #F8F9FA;
  --sfp-surface:     #FFFFFF;
  --sfp-border:      #EEEEEE;
  /* Typography */
  --sfp-text:        #333333;
  --sfp-text-sub:    #666666;
  --sfp-muted:       #999999;
  --sfp-font:        'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Layout */
  --sfp-radius:      12px;
  --sfp-radius-sm:   8px;
  --sfp-shadow:      0 2px 8px rgba(0,0,0,.08);
  --sfp-shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --sfp-shadow-lg:   0 8px 30px rgba(0,0,0,.12);
  --sfp-nav-h:       64px;
  --sfp-mobile-tab:  56px;
}

/* ── 라이트모드 강제 (v10.3) ─────────────────────────── */
html body.sfp-page,
body.sfp-page,
.sfp-page { background: #F8F9FA !important; color: #333333 !important; }

/* ── Reset & Typography ─────────────────────────────────── */
.sfp-wrap *, .sfp-nav *, .sfp-mobile-tab * { box-sizing: border-box; margin: 0; }
.sfp-wrap {
  font-family: var(--sfp-font); color: #333333;
  max-width: 1080px; margin: 0 auto;
  padding: 32px 28px 60px;
  background: #F8F9FA; min-height: 100vh;
  line-height: 1.6; font-weight: 400;
}
.sfp-wrap h1, .sfp-wrap h2, .sfp-wrap h3 { font-weight: 700; color: #333333; }
.sfp-wrap strong, .sfp-wrap b { font-weight: 600; }

/* ── Top Navigation (PC) ───────────────────────────────── */
.sfp-nav {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: var(--sfp-nav-h);
  background: #FFFFFF;
  border-bottom: 1px solid #EEEEEE;
  font-family: var(--sfp-font);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
/* WP admin bar — 일반 인플루언서: 숨김 / 관리자: 유지+보정 */
body.sfp-page:not(.sfp-is-admin) #wpadminbar { display: none !important; }
body.sfp-page:not(.sfp-is-admin).admin-bar { margin-top: 0 !important; }
body.sfp-page.admin-bar .sfp-mobile-tab { display: none !important; }

/* 관리자 안내바 */
.sfp-admin-preview-bar {
  background: #1E293B; color: #fff; text-align: center;
  padding: 8px 16px; font-size: .78rem; font-weight: 500;
  position: sticky; top: 0; z-index: 10001;
}
.sfp-admin-preview-bar a { color: #FF6B8A; font-weight: 700; text-decoration: none; }
.sfp-admin-preview-bar a:hover { text-decoration: underline; }
body.sfp-page.admin-bar .sfp-admin-preview-bar { top: 32px; }

/* ── Admin Preview Profile Card ───────────────────────── */
.sfp-preview-profile {
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
  border-radius: var(--sfp-radius); padding: 20px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 18px; color: #fff;
  box-shadow: 0 4px 20px rgba(30,41,59,.3); position: relative; overflow: hidden;
}
.sfp-preview-profile::before {
  content: '👁️ 미리보기'; position: absolute; top: 8px; right: 12px;
  font-size: .65rem; font-weight: 700; background: rgba(239,68,68,.9);
  padding: 2px 8px; border-radius: 4px; letter-spacing: .3px;
}
.sfp-preview-profile::after {
  content: ''; position: absolute; top: -40%; right: -15%; width: 200px; height: 200px;
  border-radius: 50%; background: rgba(255,255,255,.04);
}
.sfp-preview-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: rgba(232,0,61,.5); border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; color: #fff; position: relative; z-index: 1;
}
.sfp-preview-info { flex: 1; position: relative; z-index: 1; }
.sfp-preview-name {
  font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.sfp-preview-name .sfp-level-badge { font-size: .75rem; }
.sfp-preview-joined { font-size: .72rem; color: rgba(255,255,255,.55); margin-top: 2px; }
.sfp-preview-stats {
  display: flex; gap: 16px; margin-top: 10px;
}
.sfp-preview-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: rgba(255,255,255,.08); border-radius: 8px; padding: 8px 14px; min-width: 72px;
}
.sfp-preview-stat strong { font-size: .95rem; font-weight: 800; }
.sfp-preview-stat small { font-size: .65rem; color: rgba(255,255,255,.6); }
@media (max-width: 480px) {
  .sfp-preview-profile { flex-direction: column; text-align: center; padding: 16px; }
  .sfp-preview-stats { justify-content: center; flex-wrap: wrap; }
  .sfp-preview-name { justify-content: center; }
}
@media (max-width: 782px) {
  body.sfp-page.admin-bar .sfp-admin-preview-bar { top: 46px; }
}
body.sfp-page.admin-bar .sfp-nav { top: calc(32px + 36px) !important; }
@media (max-width: 782px) {
  body.sfp-page.admin-bar .sfp-nav { top: calc(46px + 36px) !important; }
}
.sfp-nav-brand {
  font-size: 1.2rem; font-weight: 800; color: var(--sfp-primary);
  text-decoration: none; letter-spacing: -.5px; display: flex; align-items: center;
}
.sfp-nav-logo { height: 64px; width: auto; display: block; }
.sfp-nav-links { display: flex; align-items: center; gap: 2px; }
.sfp-nav-links a {
  color: var(--sfp-text-sub); text-decoration: none; font-size: .9rem;
  padding: 8px 14px; border-radius: var(--sfp-radius-sm); transition: all .15s;
  font-weight: 500;
}
.sfp-nav-links a:hover { color: var(--sfp-primary); background: var(--sfp-primary-lt); }
.sfp-nav-points {
  background: var(--sfp-primary) !important;
  color: #fff !important; border-radius: 20px !important;
  padding: 6px 16px !important; font-size: .82rem !important; font-weight: 700 !important;
}
.sfp-nav-notif-wrap { position: relative; display: inline-block; overflow: visible; }
.sfp-nav-notif { position: relative; font-size: 1.15rem; padding: 8px 10px !important; background: none; border: none; cursor: pointer; }
.sfp-notif-dot {
  position: absolute; top: 4px; right: 2px;
  background: var(--sfp-danger); color: #fff;
  font-size: .6rem; font-weight: 700; border-radius: 50%;
  min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.sfp-nav-badge { font-size: .78rem; color: var(--sfp-muted); padding: 4px 10px; }

/* ── Mobile Bottom Tab Bar ─────────────────────────────── */
.sfp-mobile-tab {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: #FFFFFF;
  border-top: 1px solid #EEEEEE;
  font-family: var(--sfp-font);
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sfp-mobile-tab-inner {
  display: flex; align-items: center; justify-content: space-around;
  height: var(--sfp-mobile-tab); max-width: 500px; margin: 0 auto; padding: 0 4px;
}
.sfp-tab-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--sfp-muted); font-size: .68rem; font-weight: 600;
  padding: 6px 0; flex: 1; transition: color .15s;
  -webkit-tap-highlight-color: transparent; position: relative;
}
.sfp-tab-item .sfp-tab-icon { font-size: 1.3rem; line-height: 1; }
.sfp-tab-item:hover,
.sfp-tab-item.active { color: var(--sfp-primary); }
.sfp-tab-item.active::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2.5px; border-radius: 2px; background: var(--sfp-primary);
}
.sfp-tab-item .sfp-tab-dot {
  position: absolute; top: 2px; right: -4px;
  width: 6px; height: 6px; background: var(--sfp-danger); border-radius: 50%;
}
.sfp-tab-icon-wrap { position: relative; }

/* ── Page Header ────────────────────────────────────────── */
.sfp-page-header { margin-bottom: 24px; }
.sfp-page-header h1 {
  font-size: 1.5rem; font-weight: 800; margin: 0 0 4px;
  color: var(--sfp-text); letter-spacing: -.3px;
}
.sfp-subtitle { color: var(--sfp-muted); font-size: .88rem; margin: 0; }

/* ── Buttons ────────────────────────────────────────────── */
.sfp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 22px; border-radius: var(--sfp-radius-sm);
  border: 1.5px solid var(--sfp-border); background: var(--sfp-surface);
  color: var(--sfp-text); font-size: .88rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all .2s ease;
  white-space: nowrap; font-family: var(--sfp-font); line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.sfp-btn:hover { border-color: var(--sfp-primary); color: var(--sfp-primary); }
.sfp-btn-primary {
  background: var(--sfp-primary); border-color: var(--sfp-primary); color: #fff;
  box-shadow: 0 2px 8px rgba(232,0,61,.25);
}
.sfp-btn-primary:hover { background: var(--sfp-primary-dk); border-color: var(--sfp-primary-dk); color: #fff; box-shadow: 0 4px 14px rgba(232,0,61,.35); }
.sfp-btn-outline { border-color: var(--sfp-primary); color: var(--sfp-primary); background: transparent; }
.sfp-btn-outline:hover { background: var(--sfp-primary); color: #fff; }
.sfp-btn-danger { border-color: var(--sfp-danger); color: var(--sfp-danger); }
.sfp-btn-danger:hover { background: var(--sfp-danger); color: #fff; }
.sfp-btn-sm { padding: 6px 14px; font-size: .8rem; }
.sfp-btn-lg { padding: 14px 32px; font-size: .95rem; font-weight: 700; }
.sfp-btn-block { width: 100%; justify-content: center; margin-top: 12px; }
.sfp-btn-ghost { border-color: transparent; background: transparent; color: var(--sfp-text-sub); box-shadow: none; }
.sfp-btn-ghost:hover { background: var(--sfp-bg); color: var(--sfp-primary); border-color: transparent; }
.sfp-btn-success { border-color: var(--sfp-success); color: var(--sfp-success); }
.sfp-btn-success:hover { background: var(--sfp-success); color: #fff; }
.sfp-btn:disabled, .sfp-btn[disabled] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* ── Badges ─────────────────────────────────────────────── */
.sfp-badge {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: .72rem; font-weight: 700; background: var(--sfp-primary-lt); color: var(--sfp-primary);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sfp-badge-type { background: #FFF3ED; color: var(--sfp-accent); }
.sfp-badge-sm { padding: 2px 7px; font-size: .68rem; }
.sfp-stars { color: #F59E0B; font-size: .85rem; }

/* Condition badges (campaign cards) */
.sfp-badge-cond {
  font-size: .68rem; padding: 2px 8px; border-radius: 4px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 3px;
}
.sfp-badge-subs { background: #FEF3C7; color: #92400E; }
.sfp-badge-level { background: #FFF0F3; color: #E8003D; border: 1px solid #FFCCD5; }
.sfp-badge-plat { background: #DBEAFE; color: #1E40AF; }
.sfp-badge-plat .sfp-plat-icon { font-size: .75rem; line-height: 1; }

/* Eligible ribbon badge */
.sfp-badge-eligible {
  font-size: .72rem; padding: 4px 12px; border-radius: 6px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  width: fit-content;
}
.sfp-badge-eligible-yes {
  background: linear-gradient(135deg, #059669, #10B981); color: #fff;
  box-shadow: 0 2px 8px rgba(5,150,105,.3);
  animation: sfp-pulse-green 2s ease-in-out infinite;
}
@keyframes sfp-pulse-green { 0%,100% { box-shadow: 0 2px 8px rgba(5,150,105,.3); } 50% { box-shadow: 0 2px 16px rgba(5,150,105,.5); } }
.sfp-badge-eligible-no {
  background: var(--sfp-bg); color: var(--sfp-muted); border: 1px solid var(--sfp-border);
}

/* Ineligible card dim */
.sfp-camp-card.sfp-camp-ineligible {
  opacity: .55; filter: grayscale(.3);
  position: relative;
}
.sfp-camp-card.sfp-camp-ineligible:hover { opacity: .75; transform: none; }
.sfp-camp-card.sfp-camp-ineligible .sfp-camp-lock {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
}

/* Category color badges */
.sfp-badge-cat-beauty  { background: #FDF2F8; color: #BE185D; }
.sfp-badge-cat-food    { background: #FFF7ED; color: #C2410C; }
.sfp-badge-cat-game    { background: #EFF6FF; color: #1D4ED8; }
.sfp-badge-cat-health  { background: #ECFDF5; color: var(--sfp-success); }
.sfp-badge-cat-tech    { background: #F0F9FF; color: #0369A1; }
.sfp-badge-cat-daily   { background: #FEFCE8; color: #A16207; }

/* Status badges */
.sfp-status-badge {
  display: inline-block; padding: 4px 12px; border-radius: 6px;
  font-size: .72rem; font-weight: 700;
}
.sfp-status-pending  { background: #FEF3C7; color: #92400E; }
.sfp-status-approved { background: #D1FAE5; color: #065F46; }
.sfp-status-rejected { background: #FEE2E2; color: #991B1B; }
.sfp-status-active   { background: #DBEAFE; color: #1E40AF; }
.sfp-status-ended    { background: #F3F4F6; color: #6B7280; }
.sfp-status-draft    { background: #F3F4F6; color: #6B7280; }
.sfp-status-confirmed{ background: #D1FAE5; color: #065F46; }

/* ── Cards (storyn.kr 스타일) ───────────────────────────── */
.sfp-card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 24px;
}
.sfp-card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sfp-card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sfp-card-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sfp-card-grid-5 { grid-template-columns: repeat(5, 1fr); }

.sfp-camp-card {
  background: #FFFFFF; border: 1px solid transparent;
  border-radius: 12px; text-decoration: none !important; color: #333333;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); position: relative;
  padding: 10px; overflow: visible;
}
.sfp-camp-card * { text-decoration: none !important; }
.sfp-camp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); border-color: #E8003D; }
.sfp-camp-card-sm { box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 8px; }
.sfp-camp-card-sm::after { display: none; }

/* Thumbnail — 정사각형 비율 + 내부 라운딩 */
.sfp-camp-thumb-wrap {
  position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden;
  background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
  border-radius: 8px;
}
.sfp-num-red { color: #E8003D; font-weight: 700; }
.sfp-camp-thumb { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.sfp-camp-thumb-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: rgba(0,0,0,.15);
}
/* Category color backgrounds */
.sfp-camp-thumb-가전 { background: linear-gradient(135deg, #3B82F6, #60A5FA); }
.sfp-camp-thumb-뷰티 { background: linear-gradient(135deg, #EC4899, #F472B6); }
.sfp-camp-thumb-음식 { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.sfp-camp-thumb-게임 { background: linear-gradient(135deg, #FF3366, #FF6B8A); }
.sfp-camp-thumb-건강 { background: linear-gradient(135deg, #10B981, #34D399); }
.sfp-camp-thumb-기타 { background: linear-gradient(135deg, #6B7280, #9CA3AF); }
.sfp-camp-thumb-정보 { background: linear-gradient(135deg, #06B6D4, #22D3EE); }
.sfp-camp-thumb-소상공인 { background: linear-gradient(135deg, #F97316, #FB923C); }
.sfp-camp-thumb-B2B { background: linear-gradient(135deg, #1E293B, #334155); }

/* Video type badge — 좌상단 */
.sfp-camp-vt-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 8px; border-radius: 4px; font-size: .68rem; font-weight: 700;
}
.sfp-vt-self     { background: #F3F4F6; color: #555555; }
.sfp-vt-provided { background: #DBEAFE; color: #1D4ED8; }
.sfp-vt-template { background: #FFF0F3; color: #E8003D; }

/* Favorite — 우상단 */
/* 하트 버튼 완전 제거 (v10.23) */
.sfp-fav-btn { display: none !important; }

/* Urgent ribbon */
.sfp-camp-urgent-ribbon {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  background: #DC2626; color: #fff; font-size: .65rem; font-weight: 800;
  padding: 3px 8px; border-radius: 4px;
  animation: sfp-urgent-pulse 1.5s ease-in-out infinite;
}
.sfp-camp-urgent-ribbon + .sfp-camp-vt-badge { left: auto; right: 44px; }
@keyframes sfp-urgent-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.7; } }

/* Card body */
.sfp-camp-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.sfp-camp-plats { display: flex; gap: 4px; margin-bottom: 6px; }
.sfp-camp-plat-icon { font-size: .85rem; }
.sfp-camp-body h3 {
  font-size: .85rem; font-weight: 700; margin: 0 0 4px; color: #333333;
  line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.sfp-camp-body h4 {
  font-size: .82rem; font-weight: 700; margin: 0 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sfp-camp-cat { font-size: .72rem; color: #999999; margin-bottom: 8px; }
.sfp-camp-price {
  font-size: .82rem; font-weight: 800; color: #E8003D; margin-bottom: 8px;
}
.sfp-camp-body p { font-size: .78rem; color: #666666; margin: 0 0 8px; flex: 1; }

/* Card footer — D-Day + 신청수 */
.sfp-camp-footer {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .72rem; color: #999999; margin-top: auto; padding-top: 8px;
  border-top: 1px solid #F3F4F6;
}
.sfp-camp-footer strong { color: #E8003D; font-weight: 800; font-size: .82rem; }
.sfp-camp-dday-text { font-weight: 700; }
.sfp-dday-red    { color: #E8003D; font-weight: 800; }
.sfp-dday-orange { color: #FF6B00; font-weight: 700; }
.sfp-dday-gray   { color: #999999; }
.sfp-camp-recruit-text { margin-left: auto; }
.sfp-camp-card-sm .sfp-camp-body { padding: 10px 12px; }

/* ── Responsive grid ──────────────────────────────────── */
@media (max-width: 1200px) {
  .sfp-card-grid-5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) {
  .sfp-card-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .sfp-card-grid-5 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sfp-camp-body h3 { font-size: .8rem; }
  .sfp-camp-price { font-size: .78rem; }
}
@media (max-width: 380px) {
  .sfp-card-grid-5 { grid-template-columns: 1fr; }
}

/* ── Alerts ─────────────────────────────────────────────── */
.sfp-alert {
  padding: 14px 18px; border-radius: var(--sfp-radius-sm); margin-bottom: 20px;
  font-size: .88rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sfp-alert-warn    { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.sfp-alert-success { background: #F0FDF4; border: 1px solid #BBF7D0; color: #065F46; }
.sfp-alert-error   { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.sfp-alert-info    { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; }

/* ── Dashboard Hero ─────────────────────────────────────── */
.sfp-dashboard-hero {
  background: linear-gradient(135deg, #E8003D 0%, #E8003D 40%, #FF4D6A 100%);
  border: none; border-radius: 12px; padding: 28px 32px;
  display: flex; align-items: center; gap: 22px; margin-bottom: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); color: #fff;
  position: relative; overflow: hidden;
}
/* 라이트 변형 — 모던 플랫 */
.sfp-dashboard-hero-light {
  background: #FFFFFF; border: 1px solid #E5E7EB; color: #333333;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.sfp-dashboard-hero-light::before,
.sfp-dashboard-hero-light::after { display: none; }
.sfp-dashboard-hero-light .sfp-hero-info h2 { color: #333333; }
.sfp-dashboard-hero-light .sfp-hero-info p { color: #666666; }
.sfp-dashboard-hero-light .sfp-hero-info p strong { color: #E8003D; }
.sfp-dashboard-hero::before {
  content: ''; position: absolute; top: -50%; right: -20%; width: 300px; height: 300px;
  border-radius: 50%; background: rgba(255,255,255,.06);
}
.sfp-dashboard-hero::after {
  content: ''; position: absolute; bottom: -40%; left: -10%; width: 200px; height: 200px;
  border-radius: 50%; background: rgba(255,255,255,.04);
}
.sfp-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; overflow: hidden; flex-shrink: 0;
  color: #fff; position: relative; z-index: 1;
}
.sfp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sfp-avatar-accent { background: #E8003D; border-color: #FFF0F3; color: #fff; }
.sfp-hero-info { flex: 1; }
.sfp-hero-info h2 { font-size: 1.2rem; font-weight: 700; color: #fff; margin: 0 0 4px; }
.sfp-hero-info p  { margin: 0; font-size: .88rem; color: rgba(255,255,255,.85); }
.sfp-hero-info p strong { color: #fff; }

/* ── Stat Cards ─────────────────────────────────────────── */
.sfp-stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-bottom: 28px;
}
.sfp-stat-card {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); padding: 20px 16px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--sfp-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: default;
}
.sfp-stat-card:hover {
  transform: translateY(-2px); box-shadow: var(--sfp-shadow-md);
  border-color: var(--sfp-primary-lt);
}
.sfp-stat-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.sfp-stat-icon-campaign { background: #FFE0E6; }
.sfp-stat-icon-verified { background: #D1FAE5; }
.sfp-stat-icon-views    { background: #DBEAFE; }
.sfp-stat-icon-points   { background: #FFF3ED; }
.sfp-stat-text { flex: 1; }
.sfp-stat-card strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--sfp-text); line-height: 1.2; }
.sfp-stat-card small  { font-size: .78rem; color: var(--sfp-muted); font-weight: 500; }
.sfp-stat-card-point strong { color: var(--sfp-accent); }

/* ── Section ────────────────────────────────────────────── */
.sfp-section { margin-bottom: 32px; }
.sfp-section-title {
  font-size: 1.1rem; font-weight: 800; margin: 0 0 18px;
  display: flex; align-items: center; gap: 8px; color: var(--sfp-text);
  letter-spacing: -.2px;
}

/* ── Filter bar ─────────────────────────────────────────── */
.sfp-filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 10px 0;
}
.sfp-filter-btn {
  padding: 8px 20px; border-radius: 20px; border: 1.5px solid var(--sfp-border);
  background: var(--sfp-surface); font-size: .82rem; font-weight: 600;
  cursor: pointer; text-decoration: none; color: var(--sfp-text-sub); transition: all .2s;
}
.sfp-filter-btn:hover { background: var(--sfp-primary-lt); color: var(--sfp-primary); border-color: var(--sfp-primary); transform: translateY(-1px); }
.sfp-filter-btn.active { background: var(--sfp-primary); color: #fff; border-color: var(--sfp-primary); box-shadow: 0 2px 10px rgba(232,0,61,.3); font-weight: 700; }
.sfp-filter-diff {
  padding: 6px 12px; border-radius: 20px; border: 1.5px solid var(--sfp-border);
  font-size: .82rem; cursor: pointer; font-family: var(--sfp-font); color: var(--sfp-muted);
}

/* ── Template grid ──────────────────────────────────────── */
.sfp-template-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.sfp-template-card {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); overflow: hidden; box-shadow: var(--sfp-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sfp-tpl-clickable { cursor: pointer; }
.sfp-template-card:hover { transform: translateY(-4px); box-shadow: var(--sfp-shadow-md); }
.sfp-tpl-thumb { height: 130px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sfp-tpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sfp-tpl-thumb-placeholder { font-size: 3rem; }
.sfp-tpl-font-preview { font-size: 2.5rem; font-weight: 900; }
.sfp-tpl-body { padding: 14px; }
.sfp-tpl-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sfp-tpl-title { font-size: .92rem; font-weight: 700; margin: 0 0 8px; }
.sfp-tpl-stats { display: flex; gap: 10px; font-size: .78rem; color: var(--sfp-muted); margin-bottom: 8px; }
.sfp-tpl-specs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sfp-tpl-specs span {
  font-size: .72rem; padding: 2px 8px; border-radius: 6px;
  background: var(--sfp-bg); color: var(--sfp-muted);
}
.sfp-tpl-detail-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sfp-tpl-detail-thumb { border-radius: var(--sfp-radius-sm); min-height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sfp-tpl-detail-thumb img { width: 100%; object-fit: cover; }
.sfp-tpl-detail-info h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 10px; }
.sfp-tpl-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-bottom: 14px; }
.sfp-tpl-table th { text-align: left; width: 100px; color: var(--sfp-muted); padding: 6px 0; }
.sfp-tpl-table td { padding: 6px 0; }
.sfp-tpl-tips { background: #FFFBEB; border-left: 3px solid var(--sfp-warn); padding: 12px 14px; border-radius: 0 8px 8px 0; font-size: .85rem; margin-bottom: 14px; }
.sfp-tpl-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.sfp-color-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); vertical-align: middle; margin-right: 4px; }

/* Template detail sections */
.sfp-tpl-section {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--sfp-border);
}
.sfp-tpl-section-title {
  font-size: .95rem; font-weight: 700; margin: 0 0 12px;
  color: var(--sfp-text);
}

/* Strategy recipe */
.sfp-tpl-recipe {
  background: var(--sfp-bg); border-radius: var(--sfp-radius-sm);
  padding: 14px; margin-bottom: 10px; font-size: .85rem; line-height: 1.6;
}
.sfp-tpl-recipe strong { display: block; font-size: .82rem; color: var(--sfp-primary); margin-bottom: 6px; }
.sfp-tpl-recipe p { margin: 0; }
.sfp-tpl-code {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: 6px; padding: 10px 12px; font-size: .82rem;
  font-family: 'Courier New', monospace; white-space: pre-wrap;
  margin: 6px 0 0; color: var(--sfp-text);
}
.sfp-tpl-overlay-table th { background: var(--sfp-bg); font-size: .78rem; padding: 6px 8px; }
.sfp-tpl-overlay-table td { padding: 6px 8px; font-size: .82rem; border-bottom: 1px solid var(--sfp-border); }

/* Asset download cards */
.sfp-tpl-assets { display: flex; flex-direction: column; gap: 8px; }
.sfp-tpl-asset-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius-sm); padding: 12px 14px;
  text-decoration: none; color: var(--sfp-text);
  transition: border-color .15s, box-shadow .15s;
}
.sfp-tpl-asset-card:hover { border-color: var(--sfp-primary); box-shadow: var(--sfp-shadow); }
.sfp-tpl-asset-icon { font-size: 1.4rem; flex-shrink: 0; }
.sfp-tpl-asset-info { flex: 1; min-width: 0; }
.sfp-tpl-asset-info strong { display: block; font-size: .88rem; font-weight: 600; }
.sfp-tpl-asset-info small { font-size: .75rem; color: var(--sfp-muted); }
.sfp-tpl-asset-dl {
  width: 28px; height: 28px; border-radius: 50%; background: var(--sfp-primary-lt);
  color: var(--sfp-primary); display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; flex-shrink: 0;
}

/* Bookmark button */
.sfp-tpl-bookmark-btn { border-color: var(--sfp-border); }
.sfp-tpl-bookmark-btn.sfp-bookmarked {
  background: var(--sfp-primary-lt); border-color: var(--sfp-primary);
  color: var(--sfp-primary);
}

/* Q&A section */
.sfp-tpl-qna-section { margin-top: 20px; }
.sfp-tpl-qna-list { margin-bottom: 14px; }
.sfp-tpl-qna-empty { font-size: .85rem; color: var(--sfp-muted); padding: 12px 0; }
.sfp-tpl-qna-item {
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--sfp-border);
}
.sfp-tpl-qna-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sfp-tpl-qna-q {
  font-size: .88rem; line-height: 1.5; padding: 10px 14px;
  background: var(--sfp-bg); border-radius: var(--sfp-radius-sm);
}
.sfp-tpl-qna-q strong { color: var(--sfp-primary); margin-right: 6px; }
.sfp-tpl-qna-meta { display: block; font-size: .72rem; color: var(--sfp-muted); margin-top: 4px; }
.sfp-tpl-qna-a {
  font-size: .85rem; line-height: 1.5; padding: 10px 14px; margin-top: 4px;
  background: #EFF6FF; border-radius: var(--sfp-radius-sm); margin-left: 16px;
}
.sfp-tpl-qna-a strong { color: var(--sfp-info); margin-right: 6px; }
.sfp-tpl-qna-form {
  display: flex; gap: 8px; align-items: flex-end;
}
.sfp-tpl-qna-form textarea {
  flex: 1; padding: 10px; border: 1.5px solid var(--sfp-border);
  border-radius: var(--sfp-radius-sm); font-family: var(--sfp-font);
  font-size: .85rem; resize: vertical;
}
.sfp-tpl-qna-form textarea:focus {
  border-color: var(--sfp-primary); outline: none;
  box-shadow: 0 0 0 3px rgba(232,0,61,.12);
}

/* ── Community ──────────────────────────────────────────── */
.sfp-community-top-bar {
  display: none; /* 모바일에서만 표시 */
  align-items: center; gap: 10px; margin-bottom: 16px;
}
.sfp-board-tabs {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  flex: 1; padding-bottom: 4px;
}
.sfp-board-tabs::-webkit-scrollbar { display: none; }
.sfp-board-tabs .sfp-board-link {
  white-space: nowrap; padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--sfp-border); font-size: .78rem;
  display: inline-block; flex-shrink: 0;
}
.sfp-board-tabs .sfp-board-link.active { background: var(--sfp-primary); color: #fff; border-color: var(--sfp-primary); }

.sfp-community-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
.sfp-community-sidebar { background: var(--sfp-surface); border: 1px solid var(--sfp-border); border-radius: var(--sfp-radius); padding: 16px; height: fit-content; }
.sfp-board-list { list-style: none; margin: 0 0 16px; padding: 0; }
.sfp-board-link {
  display: block; padding: 8px 12px; border-radius: var(--sfp-radius-sm); text-decoration: none;
  color: var(--sfp-text-sub); font-size: .88rem; font-weight: 600; transition: all .15s;
}
.sfp-board-link.active, .sfp-board-link:hover { background: var(--sfp-primary-lt); color: var(--sfp-primary); }
.sfp-community-main { background: var(--sfp-surface); border: 1px solid var(--sfp-border); border-radius: var(--sfp-radius); padding: 20px; }

/* 모바일 카드 리스트 */
.sfp-post-cards { display: flex; flex-direction: column; gap: 10px; }
.sfp-post-card {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius-sm); padding: 14px; cursor: pointer;
  transition: background .1s;
}
.sfp-post-card:hover { background: var(--sfp-bg); }
.sfp-post-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sfp-post-card-date { font-size: .72rem; color: var(--sfp-muted); }
.sfp-post-card-title {
  font-size: .9rem; font-weight: 600; margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sfp-post-card-meta { font-size: .75rem; color: var(--sfp-muted); }

/* PC/모바일 전환 */
/* PC: 테이블 보이고 카드 숨김 / 모바일: 반대 (768px media query에서 전환) */
.sfp-hide-mobile { /* PC에서 보임 — display는 요소 기본값 사용 */ }
.sfp-hide-pc { display: none; }

.sfp-post-table { width: 100%; border-collapse: collapse; }
.sfp-post-table thead th { padding: 10px 12px; background: var(--sfp-bg); font-size: .8rem; color: var(--sfp-muted); text-align: left; border-radius: 4px; }
.sfp-post-row { cursor: pointer; transition: background .1s; border-bottom: 1px solid var(--sfp-border); }
.sfp-post-row:hover { background: var(--sfp-bg); }
.sfp-post-row td { padding: 12px; font-size: .88rem; }
.sfp-post-title-cell { font-weight: 600; }
.sfp-comment-cnt { color: var(--sfp-primary); font-size: .8rem; }

.sfp-post-detail-wrap { }
.sfp-post-detail-title { font-size: 1.4rem; font-weight: 800; margin: 16px 0 8px; }
.sfp-post-meta { font-size: .82rem; color: var(--sfp-muted); margin-bottom: 16px; }
.sfp-post-img { max-width: 100%; border-radius: var(--sfp-radius-sm); margin-bottom: 16px; }
.sfp-post-content { font-size: .92rem; line-height: 1.75; margin-bottom: 20px; }
.sfp-post-actions { display: flex; gap: 10px; margin-bottom: 28px; }
.sfp-btn-like { border-color: #FCA5A5; color: var(--sfp-danger); }
.sfp-btn-like:hover { background: rgba(239,68,68,.06); }

.sfp-comments h3 { font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.sfp-comment { padding: 12px 0; border-bottom: 1px solid var(--sfp-border); }
.sfp-comment strong { font-size: .88rem; }
.sfp-comment-date { font-size: .78rem; color: var(--sfp-muted); margin-left: 8px; }
.sfp-comment p { margin: 6px 0 0; font-size: .88rem; line-height: 1.6; }
.sfp-comment-write { margin-top: 16px; }
.sfp-comment-write textarea { width: 100%; padding: 10px; border: 1.5px solid var(--sfp-border); border-radius: var(--sfp-radius-sm); font-family: var(--sfp-font); font-size: .88rem; margin-bottom: 8px; resize: vertical; }

.sfp-pagination { display: flex; gap: 6px; margin-top: 16px; justify-content: center; }
.sfp-page-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--sfp-border); background: var(--sfp-surface); cursor: pointer; font-size: .82rem; }
.sfp-page-btn.active { background: var(--sfp-primary); color: #fff; border-color: var(--sfp-primary); }

/* ── Modal ──────────────────────────────────────────────── */
.sfp-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 2000;
  align-items: center; justify-content: center; padding: 20px;
}
.sfp-modal.sfp-modal-open { display: flex; animation: sfp-modal-bg-in .2s ease; }
.sfp-modal.sfp-modal-open .sfp-modal-inner { animation: sfp-modal-in .25s ease; }
@keyframes sfp-modal-bg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfp-modal-in { from { opacity: 0; transform: scale(.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.sfp-modal-inner {
  background: var(--sfp-surface); border-radius: 16px;
  padding: 32px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto;
  position: relative; box-shadow: var(--sfp-shadow-lg);
}
.sfp-modal-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--sfp-muted);
}
.sfp-template-detail { max-width: 800px; }

/* ── Forms ──────────────────────────────────────────────── */
.sfp-form-group { margin-bottom: 18px; }
.sfp-form-group label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--sfp-text-sub); margin-bottom: 6px;
}
.sfp-form-group input,
.sfp-form-group select,
.sfp-form-group textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--sfp-border);
  border-radius: var(--sfp-radius-sm); font-family: var(--sfp-font);
  font-size: .88rem; color: var(--sfp-text); background: var(--sfp-surface);
  transition: border-color .2s, box-shadow .2s; outline: none;
}
.sfp-form-group input:focus,
.sfp-form-group select:focus,
.sfp-form-group textarea:focus {
  border-color: var(--sfp-primary);
  box-shadow: 0 0 0 3px rgba(232,0,61,.12);
}
.sfp-form-actions { display: flex; gap: 10px; margin-top: 8px; }
.sfp-form-card {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); padding: 28px; max-width: 600px;
  box-shadow: var(--sfp-shadow);
}

/* ── Mypage Points ─────────────────────────────────────── */
.sfp-mypage-points-hero {
  text-align: center; padding: 28px 20px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--sfp-surface) 0%, var(--sfp-primary-lt) 100%);
  border-radius: var(--sfp-radius); border: 1px solid var(--sfp-border);
}
.sfp-mypage-points-amount { font-size: 2.5rem; font-weight: 900; color: var(--sfp-primary); letter-spacing: -.5px; }
.sfp-mypage-points-amount span { font-size: 1.1rem; color: var(--sfp-muted); }
.sfp-mypage-points-hero small { display: block; color: var(--sfp-muted); font-size: .85rem; margin-top: 2px; }
.sfp-mypage-points-hero .sfp-btn { padding: 10px 28px; }

/* ── Tables ─────────────────────────────────────────────── */
.sfp-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sfp-table th { padding: 10px 12px; background: var(--sfp-bg); text-align: left; font-size: .8rem; color: var(--sfp-muted); white-space: nowrap; }
.sfp-table td { padding: 12px; border-bottom: 1px solid var(--sfp-border); }
.sfp-amount-plus { color: var(--sfp-success); font-weight: 700; }
.sfp-amount-minus { color: var(--sfp-danger); font-weight: 700; }

/* ── Points ─────────────────────────────────────────────── */
.sfp-points-hero {
  background: linear-gradient(135deg, var(--sfp-surface) 0%, var(--sfp-primary-lt) 100%);
  border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); padding: 40px 32px; text-align: center;
  margin-bottom: 28px; box-shadow: var(--sfp-shadow);
  position: relative; overflow: hidden;
}
.sfp-points-hero::before {
  content: ''; position: absolute; top: -30%; right: -15%; width: 200px; height: 200px;
  border-radius: 50%; background: rgba(232,0,61,.06);
}
.sfp-points-label {
  font-size: .82rem; font-weight: 600; color: var(--sfp-muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px;
}
.sfp-points-amount { font-size: 3.5rem; font-weight: 900; color: var(--sfp-primary); letter-spacing: -1px; }
.sfp-points-amount span { font-size: 1.5rem; color: var(--sfp-muted); margin-left: 2px; }
.sfp-points-summary {
  display: flex; gap: 0; justify-content: center;
  margin: 16px auto 0; max-width: 400px;
  border: 1px solid var(--sfp-border); border-radius: var(--sfp-radius-sm);
  overflow: hidden;
}
.sfp-points-summary-item {
  flex: 1; padding: 12px 8px; text-align: center;
  border-right: 1px solid var(--sfp-border);
}
.sfp-points-summary-item:last-child { border-right: none; }
.sfp-points-summary-item small { display: block; font-size: .72rem; color: var(--sfp-muted); font-weight: 500; margin-bottom: 2px; }
.sfp-points-summary-item strong { font-size: .9rem; font-weight: 800; color: var(--sfp-text); }
.sfp-points-earned strong { color: var(--sfp-success); }
.sfp-points-spent strong { color: var(--sfp-danger); }
.sfp-points-pending {
  margin-top: 10px; font-size: .78rem; color: #F59E0B; font-weight: 600;
  background: rgba(245,158,11,.08); padding: 6px 14px; border-radius: 20px;
  display: inline-block;
}
.sfp-points-actions { margin-top: 20px; display: flex; gap: 10px; justify-content: center; align-items: center; }
.sfp-points-hero .sfp-btn-withdraw {
  padding: 14px 36px; font-size: .95rem; font-weight: 700;
  box-shadow: 0 4px 16px rgba(232,0,61,.3);
}
.sfp-mission-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.sfp-mission-summary {
  font-size: .82rem; font-weight: 700; color: var(--sfp-primary);
  background: var(--sfp-primary-lt); padding: 4px 12px; border-radius: 12px;
}
.sfp-mission-progress-wrap { margin-bottom: 16px; }

/* ── Upload card ────────────────────────────────────────── */
.sfp-upload-card {
  background: var(--sfp-surface); border: 1.5px solid var(--sfp-border);
  border-radius: var(--sfp-radius); padding: 22px; margin-bottom: 16px;
  box-shadow: var(--sfp-shadow);
}
.sfp-upload-card-active { border-color: var(--sfp-primary); background: #FAFAFF; }
.sfp-upload-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }

/* ── Campaign detail ────────────────────────────────────── */
.sfp-camp-detail {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); overflow: hidden; box-shadow: var(--sfp-shadow);
}
.sfp-camp-detail-thumb { width: 100%; max-height: 300px; object-fit: cover; }
.sfp-camp-detail-body { padding: 28px; }
.sfp-camp-detail-body h1 { font-size: 1.5rem; font-weight: 800; margin: 12px 0 16px; letter-spacing: -.3px; }
.sfp-info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px;
  background: var(--sfp-bg); padding: 16px; border-radius: var(--sfp-radius-sm); margin-bottom: 20px;
}
.sfp-info-item { text-align: center; }
.sfp-info-label { display: block; font-size: .75rem; color: var(--sfp-muted); margin-bottom: 4px; font-weight: 500; }
.sfp-info-item strong { font-size: .95rem; font-weight: 700; }
.sfp-camp-section { margin-bottom: 20px; }
.sfp-camp-section h3 { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
.sfp-guide-box {
  background: var(--sfp-bg); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius-sm); padding: 18px;
  font-size: .88rem; line-height: 1.7; white-space: pre-wrap;
}
.sfp-camp-section h3::before {
  content: ''; display: inline-block; width: 3px; height: 16px;
  background: var(--sfp-primary); border-radius: 2px;
  margin-right: 8px; vertical-align: middle;
}
.sfp-camp-apply-area {
  margin-top: 24px; padding: 24px; border-top: none;
  background: linear-gradient(135deg, var(--sfp-primary-lt) 0%, #E0E7FF 100%);
  border-radius: var(--sfp-radius); text-align: center;
}
.sfp-camp-apply-area .sfp-btn-lg {
  padding: 16px 48px; font-size: 1rem; box-shadow: 0 4px 16px rgba(232,0,61,.3);
}
.sfp-back-link { display: inline-block; margin-bottom: 16px; color: var(--sfp-muted); font-size: .88rem; text-decoration: none; }
.sfp-back-link:hover { color: var(--sfp-primary); }

/* ── Video Type Cards ──────────────────────────────────── */
.sfp-vtype-card {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
  padding: 20px; border-radius: var(--sfp-radius); margin-bottom: 20px;
  border: 1px solid; position: relative;
}
.sfp-vtype-icon {
  width: 48px; height: 48px; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0;
}
.sfp-vtype-body { flex: 1; min-width: 200px; }
.sfp-vtype-body strong { font-size: 1rem; font-weight: 800; display: block; margin-bottom: 4px; }
.sfp-vtype-body p { font-size: .85rem; margin: 0; line-height: 1.6; opacity: .85; }
.sfp-vtype-btn { margin-top: 10px; }
.sfp-vtype-note { font-size: .82rem; display: block; margin-top: 8px; opacity: .8; }
.sfp-vtype-guide {
  width: 100%; padding: 14px; border-radius: 8px; margin-top: 4px;
  font-size: .85rem; line-height: 1.7; white-space: pre-wrap;
}
.sfp-vtype-guide strong { display: block; margin-bottom: 6px; font-size: .88rem; }
/* Provided: blue */
.sfp-vtype-provided { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A5F; }
.sfp-vtype-provided .sfp-vtype-icon { background: #3B82F6; color: #fff; }
.sfp-vtype-provided .sfp-vtype-guide { background: rgba(59,130,246,.08); }
.sfp-vtype-provided .sfp-vtype-btn { background: #3B82F6; border-color: #3B82F6; color: #fff; }
/* Template: purple */
.sfp-vtype-template { background: #FFF0F3; border-color: #FFCCD5; color: #9B0028; }
.sfp-vtype-template .sfp-vtype-icon { background: #E8003D; color: #fff; }
/* Self: gray */
.sfp-vtype-self { background: #F9FAFB; border-color: #E5E7EB; color: #374151; }
.sfp-vtype-self .sfp-vtype-icon { background: #6B7280; color: #fff; }

/* ── Channel Selection Cards ───────────────────────────── */
.sfp-apply-label { font-size: .88rem; font-weight: 700; margin-bottom: 12px; color: var(--sfp-text); }
.sfp-channel-select-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sfp-ch-card { cursor: pointer; display: block; }
.sfp-ch-card input { display: none; }
.sfp-ch-card-inner {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--sfp-surface); border: 2px solid var(--sfp-border);
  border-radius: var(--sfp-radius-sm); transition: all .2s;
}
.sfp-ch-card input:checked ~ .sfp-ch-card-inner {
  border-color: var(--sfp-primary); background: var(--sfp-primary-lt);
  box-shadow: 0 0 0 3px rgba(232,0,61,.12);
}
.sfp-ch-card-plat { font-size: 1.3rem; flex-shrink: 0; }
.sfp-ch-card-info { flex: 1; min-width: 0; }
.sfp-ch-card-info strong { font-size: .88rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfp-ch-card-info small { font-size: .75rem; color: var(--sfp-muted); }
.sfp-ch-card-check {
  width: 28px; height: 28px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: .82rem; font-weight: 700;
  background: var(--sfp-primary); color: #fff; flex-shrink: 0; opacity: 0; transition: opacity .2s;
}
.sfp-ch-card input:checked ~ .sfp-ch-card-inner .sfp-ch-card-check { opacity: 1; }
.sfp-ch-card-disabled { opacity: .5; cursor: not-allowed; }
.sfp-ch-card-disabled .sfp-ch-card-inner { background: #F9FAFB; }
.sfp-ch-card-disabled .sfp-ch-card-check { background: #D1D5DB; opacity: 1; }

/* ── Points Timeline ───────────────────────────────────── */
.sfp-pts-timeline { position: relative; padding-left: 24px; }
.sfp-pts-timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--sfp-border);
}
.sfp-pts-item { position: relative; padding: 0 0 20px; }
.sfp-pts-item:last-child { padding-bottom: 0; }
.sfp-pts-dot {
  position: absolute; left: -20px; top: 6px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid; background: var(--sfp-surface); z-index: 1;
}
.sfp-pts-plus .sfp-pts-dot { border-color: var(--sfp-success); }
.sfp-pts-minus .sfp-pts-dot { border-color: var(--sfp-danger); }
.sfp-pts-content { background: var(--sfp-surface); border: 1px solid var(--sfp-border); border-radius: var(--sfp-radius-sm); padding: 12px 16px; }
.sfp-pts-row { display: flex; justify-content: space-between; align-items: center; }
.sfp-pts-type { font-size: .82rem; font-weight: 600; color: var(--sfp-text-sub); }
.sfp-pts-desc { font-size: .82rem; color: var(--sfp-muted); margin: 4px 0 0; }
.sfp-pts-date { font-size: .72rem; color: var(--sfp-muted); }
.sfp-btn-withdraw {
  padding: 16px 40px; font-size: 1rem; font-weight: 800;
  box-shadow: 0 4px 20px rgba(232,0,61,.35); animation: sfp-pulse-btn 2s ease-in-out infinite;
}
@keyframes sfp-pulse-btn { 0%,100%{ box-shadow: 0 4px 20px rgba(232,0,61,.35); } 50%{ box-shadow: 0 6px 28px rgba(232,0,61,.5); } }

/* ── Withdraw List ─────────────────────────────────────── */
.sfp-withdraw-list { display: flex; flex-direction: column; gap: 10px; }
.sfp-withdraw-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; background: var(--sfp-surface);
  border: 1px solid var(--sfp-border); border-radius: var(--sfp-radius-sm);
}
.sfp-withdraw-info { display: flex; flex-direction: column; gap: 2px; }
.sfp-withdraw-info strong { font-size: .95rem; }
.sfp-withdraw-info small { font-size: .75rem; color: var(--sfp-muted); }

/* ── Settlement Page ───────────────────────────────────── */
.sfp-settle-hero {
  background: linear-gradient(135deg, var(--sfp-surface) 0%, #ECFDF5 100%);
  border: 1px solid #A7F3D0; border-radius: var(--sfp-radius);
  padding: 36px 32px; text-align: center; margin-bottom: 28px;
  position: relative; overflow: hidden;
}
.sfp-settle-hero::before {
  content: ''; position: absolute; top: -30%; right: -15%; width: 180px; height: 180px;
  border-radius: 50%; background: rgba(34,197,94,.06);
}
.sfp-settle-total-label { display: block; font-size: .85rem; color: var(--sfp-muted); font-weight: 500; margin-bottom: 4px; }
.sfp-settle-total strong { font-size: 2.8rem; font-weight: 900; color: var(--sfp-success); letter-spacing: -1px; }
.sfp-settle-total strong span { font-size: 1.2rem; color: var(--sfp-muted); margin-left: 2px; }
.sfp-settle-pending { margin-top: 8px; font-size: .85rem; color: #92400E; background: #FEF3C7; display: inline-block; padding: 4px 14px; border-radius: 20px; }
.sfp-settle-list { display: flex; flex-direction: column; gap: 12px; }
.sfp-settle-card {
  background: var(--sfp-surface); border-radius: var(--sfp-radius);
  padding: 18px 20px; border-left: 4px solid; box-shadow: var(--sfp-shadow);
  transition: transform .2s;
}
.sfp-settle-card:hover { transform: translateY(-2px); }
.sfp-settle-confirmed { border-left-color: var(--sfp-success); }
.sfp-settle-waiting { border-left-color: var(--sfp-warn); }
.sfp-settle-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sfp-settle-card-title { font-size: .88rem; font-weight: 700; }
.sfp-settle-card-amount { font-size: 1.3rem; font-weight: 900; color: var(--sfp-text); }
.sfp-settle-confirmed .sfp-settle-card-amount { color: var(--sfp-success); }
.sfp-settle-card-note { font-size: .82rem; color: var(--sfp-muted); margin: 6px 0 0; }
.sfp-settle-card-date { font-size: .75rem; color: var(--sfp-muted); }

/* Template chips in campaign detail */
.sfp-tpl-list { display: flex; flex-direction: column; gap: 10px; }
.sfp-tpl-chip { display: flex; align-items: center; gap: 12px; background: var(--sfp-bg); padding: 12px; border-radius: var(--sfp-radius-sm); }
.sfp-tpl-chip-thumb { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 900; flex-shrink: 0; }
.sfp-tpl-chip strong { display: block; font-size: .88rem; font-weight: 700; }
.sfp-tpl-chip small { font-size: .78rem; color: var(--sfp-muted); }

/* ── Login ──────────────────────────────────────────────── */
.sfp-login-wrap { display: flex; align-items: center; justify-content: center; min-height: 80vh; background: var(--sfp-bg); }
.sfp-login-box {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: 16px; padding: 48px 40px; text-align: center;
  max-width: 400px; width: 100%; box-shadow: var(--sfp-shadow-lg);
}
.sfp-login-logo { font-size: 3.5rem; margin-bottom: 12px; filter: drop-shadow(0 2px 8px rgba(232,0,61,.2)); }
.sfp-login-title { font-size: 1.7rem; font-weight: 900; margin: 0 0 4px; color: var(--sfp-text); letter-spacing: -.5px; }
.sfp-login-sub { color: var(--sfp-muted); font-size: .88rem; margin: 0 0 36px; }
.sfp-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 16px 20px; border-radius: 12px;
  border: 2px solid var(--sfp-border); background: #fff;
  font-size: .95rem; font-weight: 700; text-decoration: none; color: var(--sfp-text);
  transition: all .2s; cursor: pointer; font-family: var(--sfp-font);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.sfp-google-btn:hover { border-color: #4285F4; box-shadow: 0 4px 16px rgba(66,133,244,.2); transform: translateY(-1px); }
.sfp-kakao-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 16px 20px; border-radius: 12px;
  border: none; background: #FEE500; color: #191919;
  font-size: .95rem; font-weight: 700; text-decoration: none;
  transition: all .2s; cursor: pointer; font-family: var(--sfp-font);
  margin-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.sfp-kakao-btn svg path { fill: #191919; }
.sfp-kakao-btn:hover { background: #F5DC00; box-shadow: 0 4px 16px rgba(254,229,0,.4); transform: translateY(-1px); }
.sfp-login-notice { font-size: .75rem; color: var(--sfp-muted); margin-top: 28px; }
.sfp-login-required { padding: 40px; text-align: center; }

/* ── Notification Dropdown ──────────────────────────────── */
.sfp-notif-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 9999;
  width: 360px; max-height: 420px;
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); box-shadow: 0 8px 24px rgba(0,0,0,.15);
  overflow: visible;
}
.sfp-notif-dropdown-open { display: flex; flex-direction: column; animation: sfp-dd-in .15s ease; }
@keyframes sfp-dd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.sfp-notif-dropdown-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--sfp-border);
}
.sfp-notif-dropdown-header strong { font-size: .9rem; }
.sfp-notif-mark-all {
  background: none; border: none; color: var(--sfp-primary);
  font-size: .78rem; cursor: pointer; padding: 0;
}
.sfp-notif-mark-all:hover { text-decoration: underline; }
.sfp-notif-dropdown-body { overflow-y: auto; overflow-x: hidden; max-height: 300px; }
.sfp-notif-dropdown-empty { padding: 24px; text-align: center; color: var(--sfp-muted); font-size: .85rem; }
.sfp-notif-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--sfp-border); transition: background .15s;
}
.sfp-notif-dd-item:last-child { border-bottom: none; }
.sfp-notif-dd-item:hover { background: var(--sfp-bg); }
.sfp-notif-dd-item.sfp-notif-unread { background: #F3F0FF; }
.sfp-notif-dd-item.sfp-notif-unread:hover { background: #FFE0E6; }
.sfp-notif-dd-icon { font-size: 1.1rem; flex-shrink: 0; }
.sfp-notif-dd-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.sfp-notif-dd-text strong {
  font-size: .82rem; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sfp-notif-dd-time { font-size: .7rem; color: var(--sfp-muted); flex-shrink: 0; white-space: nowrap; }
.sfp-notif-dropdown-footer {
  display: block; text-align: center; padding: 10px;
  font-size: .82rem; color: var(--sfp-primary); text-decoration: none;
  border-top: 1px solid var(--sfp-border);
}
.sfp-notif-dropdown-footer:hover { background: var(--sfp-bg); }

/* ── Notifications Full Page ───────────────────────────── */
.sfp-notif-list { display: flex; flex-direction: column; gap: 10px; }
.sfp-notif-item {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius-sm); padding: 14px;
  text-decoration: none; color: inherit; transition: background .15s;
}
a.sfp-notif-item:hover { background: var(--sfp-bg); }
.sfp-notif-item.sfp-notif-unread {
  background: #F3F0FF; border-color: #FFCCD5;
}
.sfp-notif-item.sfp-notif-unread:hover { background: #FFE0E6; }
.sfp-notif-icon { font-size: 1.3rem; flex-shrink: 0; }
.sfp-notif-body { flex: 1; }
.sfp-notif-body strong { font-size: .9rem; display: block; margin-bottom: 2px; }
.sfp-notif-body p { font-size: .82rem; color: var(--sfp-text-sub); margin: 0; }
.sfp-notif-body small { font-size: .75rem; color: var(--sfp-muted); }

/* ── Level card ─────────────────────────────────────────── */
.sfp-level-card {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); padding: 24px; margin-top: 20px;
}
.sfp-level-card h3 { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; color: var(--sfp-text); }
.sfp-level-card ul { list-style: none; padding: 0; margin: 0; }
.sfp-level-card li { font-size: .85rem; padding: 4px 0; color: var(--sfp-text-sub); }

/* ── Onboarding ────────────────────────────────────────── */
.sfp-onboarding {
  background: var(--sfp-surface);
  border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: var(--sfp-shadow);
}
.sfp-onboarding-header h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; color: var(--sfp-text); }
.sfp-onboarding-header p  { color: var(--sfp-muted); font-size: .85rem; margin: 0 0 20px; }

/* Progress bar style onboarding */
.sfp-onboarding-steps {
  display: flex; gap: 0; position: relative;
}
.sfp-onboarding-steps::before {
  content: ''; position: absolute; top: 22px; left: 22px; right: 22px;
  height: 3px; background: var(--sfp-border); z-index: 0;
}
.sfp-onboarding-step {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; position: relative; z-index: 1;
  padding: 0 8px; text-decoration: none !important; color: inherit;
}
.sfp-onboarding-step * { text-decoration: none !important; }
.sfp-step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sfp-surface); border: 3px solid var(--sfp-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 800; color: var(--sfp-muted); flex-shrink: 0;
  transition: all .3s;
}
.sfp-step-active .sfp-step-num {
  border-color: var(--sfp-primary); color: var(--sfp-primary);
  background: var(--sfp-primary-lt);
  box-shadow: 0 0 0 4px rgba(232,0,61,.12);
}
.sfp-step-done .sfp-step-num {
  border-color: var(--sfp-success); background: var(--sfp-success);
  color: #fff; font-size: 1.2rem;
  box-shadow: 0 0 0 4px rgba(5,150,105,.15);
}
.sfp-step-done .sfp-step-info strong { color: var(--sfp-success); }
.sfp-step-info strong { display: block; font-size: .82rem; margin-bottom: 2px; font-weight: 600; }
.sfp-step-info small  { font-size: .72rem; color: var(--sfp-muted); line-height: 1.3; }
.sfp-step-active .sfp-step-info strong { color: var(--sfp-primary); }
.sfp-step-done .sfp-step-info strong { color: var(--sfp-primary); }

/* ── Guide Page ─────────────────────────────────────────── */
.sfp-guide-steps { display: flex; flex-direction: column; gap: 0; }
.sfp-guide-step {
  display: flex; gap: 20px; padding: 24px 0;
  border-bottom: 1px solid var(--sfp-border);
}
.sfp-guide-step:last-child { border-bottom: none; }
.sfp-guide-step-num {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--sfp-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 900;
}
.sfp-guide-step-body h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.sfp-guide-step-body ul { margin: 0; padding-left: 20px; }
.sfp-guide-step-body li { font-size: .88rem; color: var(--sfp-text-sub); line-height: 1.7; }

/* FAQ */
.sfp-faq-list { display: flex; flex-direction: column; gap: 0; }
.sfp-faq-item {
  border-bottom: 1px solid var(--sfp-border); padding: 0;
}
.sfp-faq-item summary {
  padding: 16px 0; font-size: .92rem; font-weight: 600;
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  color: var(--sfp-text);
}
.sfp-faq-item summary::before { content: 'Q.'; color: var(--sfp-primary); font-weight: 800; flex-shrink: 0; }
.sfp-faq-item summary::-webkit-details-marker { display: none; }
.sfp-faq-item[open] summary { color: var(--sfp-primary); }
.sfp-faq-item p {
  padding: 0 0 16px 28px; margin: 0;
  font-size: .88rem; color: var(--sfp-text-sub); line-height: 1.7;
}

/* Legal pages (Privacy, Terms) */
/* ── 법적 페이지 (이용약관/개인정보) ───────────────────── */
.sfp-legal-wrap { max-width: 740px; margin: 0 auto; }
.sfp-legal-hero {
  text-align: center; padding: 32px 20px 24px;
}
.sfp-legal-icon { font-size: 2.5rem; display: block; margin-bottom: 8px; }
.sfp-legal-hero h1 { font-size: 1.5rem; font-weight: 900; margin: 0 0 6px; }
.sfp-legal-hero p { font-size: .85rem; color: var(--sfp-muted); margin: 0; }
.sfp-legal-content { max-width: 700px; }
.sfp-legal-intro {
  padding: 16px 20px; background: var(--sfp-primary-lt); border-radius: var(--sfp-radius);
  margin-bottom: 24px; border-left: 4px solid var(--sfp-primary);
}
.sfp-legal-intro p { margin: 0; font-size: .88rem; line-height: 1.7; color: var(--sfp-text); }
.sfp-legal-section {
  padding: 20px; margin-bottom: 12px;
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius);
}
.sfp-legal-content h3 {
  font-size: 1rem; font-weight: 700; margin: 0 0 12px;
  color: var(--sfp-text); display: flex; align-items: center; gap: 10px;
}
.sfp-legal-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sfp-primary); color: #fff;
  font-size: .75rem; font-weight: 800; flex-shrink: 0;
}
.sfp-legal-content p { font-size: .88rem; line-height: 1.75; color: var(--sfp-text-sub); margin: 0 0 10px; }
.sfp-legal-content p:last-child { margin-bottom: 0; }
.sfp-legal-content ul { margin: 0; padding-left: 20px; }
.sfp-legal-content li { font-size: .88rem; line-height: 1.75; color: var(--sfp-text-sub); margin-bottom: 2px; }
.sfp-legal-content li::marker { color: var(--sfp-primary); }
.sfp-legal-content .sfp-table { max-width: 100%; margin-top: 4px; }
.sfp-legal-contact-card {
  padding: 14px 18px; background: var(--sfp-bg); border-radius: var(--sfp-radius-sm);
  border: 1px solid var(--sfp-border);
}
.sfp-legal-contact-card p { margin: 0 0 4px; font-size: .88rem; }
.sfp-legal-contact-card p:last-child { margin: 0; }
.sfp-legal-contact-card strong { display: inline-block; width: 50px; color: var(--sfp-muted); font-weight: 600; }
.sfp-legal-contact-card a { color: var(--sfp-primary); font-weight: 600; }
@media (max-width: 480px) {
  .sfp-legal-hero { padding: 24px 16px 16px; }
  .sfp-legal-hero h1 { font-size: 1.3rem; }
  .sfp-legal-section { padding: 16px; }
}

/* ── Empty State ────────────────────────────────────────── */
.sfp-empty {
  text-align: center; padding: 56px 24px; color: var(--sfp-text-sub); font-size: .9rem;
  background: var(--sfp-surface); border: 1px dashed var(--sfp-border);
  border-radius: var(--sfp-radius); line-height: 1.7;
}
.sfp-empty::before {
  content: '📭'; display: block; font-size: 3rem; margin-bottom: 14px;
  filter: grayscale(.3);
}
.sfp-empty strong { display: block; font-size: 1.05rem; font-weight: 800; color: var(--sfp-text); margin-bottom: 4px; }
.sfp-empty a:not(.sfp-btn) { color: var(--sfp-primary); font-weight: 600; text-decoration: none; }
.sfp-empty a:not(.sfp-btn):hover { text-decoration: underline; }
.sfp-empty .sfp-btn { margin-top: 16px; }

/* Empty state contextual icons */
.sfp-empty-campaigns::before { content: '🎯'; }
.sfp-empty-community::before { content: '💬'; }
.sfp-empty-notification::before { content: '🔔'; }
.sfp-empty-points::before    { content: '💰'; }
.sfp-empty-channel::before   { content: '📡'; }
.sfp-empty-template::before  { content: '📋'; }
.sfp-empty-settlement::before{ content: '📊'; }
.sfp-empty-upload::before    { content: '📤'; }
.sfp-empty-search::before    { content: '🔍'; }
.sfp-empty-error::before     { content: '⚠️'; }

/* B192: Empty State 이모지 중복 방지 —
   PHP에서 자체 이모지 div를 포함한 커스텀 empty(LV7 스타일)는
   CSS ::before 기본 이모지를 숨김 (inline text-align:center 감지) */
.sfp-empty[style*="text-align:center"]::before,
.sfp-empty[style*="text-align: center"]::before {
  content: none !important;
  display: none !important;
}

/* ── Loading Spinner ────────────────────────────────────── */
.sfp-loading {
  text-align: center; padding: 40px; color: var(--sfp-muted); font-size: .88rem;
}
.sfp-spinner {
  display: inline-block; width: 32px; height: 32px;
  border: 3px solid var(--sfp-border); border-top-color: var(--sfp-primary);
  border-radius: 50%; animation: sfp-spin .7s linear infinite;
  margin-bottom: 10px;
}
@keyframes sfp-spin { to { transform: rotate(360deg); } }

/* ── Skeleton Loading ──────────────────────────────────── */
.sfp-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%; animation: sfp-skeleton 1.5s ease-in-out infinite;
  border-radius: var(--sfp-radius-sm);
}
@keyframes sfp-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sfp-skeleton-card {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); overflow: hidden;
}
.sfp-skeleton-thumb { height: 170px; }
.sfp-skeleton-body { padding: 16px 18px; }
.sfp-skeleton-line { height: 12px; margin-bottom: 10px; border-radius: 6px; }
.sfp-skeleton-line-sm { height: 10px; width: 60%; margin-bottom: 8px; }
.sfp-skeleton-line-lg { height: 16px; width: 40%; margin-bottom: 12px; }
.sfp-skeleton-badge { height: 20px; width: 64px; border-radius: 10px; display: inline-block; margin-right: 6px; }

/* ── Button Loading State ──────────────────────────────── */
.sfp-btn-loading {
  position: relative; pointer-events: none; opacity: .75;
}
.sfp-btn-loading::after {
  content: ''; display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: sfp-spin .6s linear infinite;
  margin-left: 8px; vertical-align: middle;
}

/* ── Toast Messages ─────────────────────────────────────── */
.sfp-toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 10000;
  display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}
.sfp-toast {
  border-radius: var(--sfp-radius-sm);
  padding: 14px 20px; box-shadow: var(--sfp-shadow-lg);
  font-size: .88rem; font-weight: 600; font-family: var(--sfp-font);
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px; min-width: 280px; max-width: 420px;
  animation: sfp-toast-in .3s ease;
  /* 기본: 성공 (초록) */
  background: var(--sfp-success); color: #fff; border: none;
}
.sfp-toast-error { background: var(--sfp-danger); }
.sfp-toast-warn  { background: var(--sfp-warn); }
.sfp-toast-info  { background: var(--sfp-info); }
.sfp-toast.sfp-toast-out { animation: sfp-toast-out .3s ease forwards; }
@keyframes sfp-toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sfp-toast-out { to { opacity: 0; transform: translateY(16px); } }

/* ── Misc ───────────────────────────────────────────────── */
.sfp-link { color: var(--sfp-primary); text-decoration: none; font-size: .85rem; font-weight: 500; }
.sfp-link:hover { text-decoration: underline; }

/* ── Footer ────────────────────────────────────────────── */
.sfp-footer {
  margin-top: 40px; padding: 28px 0; border-top: 1px solid var(--sfp-border);
  text-align: center; font-size: .78rem; color: var(--sfp-muted);
}
.sfp-footer-inner { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.sfp-footer-copy { margin-bottom: 8px; font-weight: 500; }
.sfp-footer-links { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.sfp-footer-links a { color: var(--sfp-text-sub); text-decoration: none; font-weight: 500; }
.sfp-footer-links a:hover { color: var(--sfp-primary); }
.sfp-footer-contact { color: var(--sfp-muted); }
@media (max-width: 768px) {
  .sfp-footer { margin-bottom: calc(var(--sfp-mobile-tab) + env(safe-area-inset-bottom, 0px) + 8px); margin-top: 28px; padding: 20px 0; }
  .sfp-footer-links { gap: 12px; font-size: .72rem; }
}

/* ── Landing Page ───────────────────────────────────────── */
/* ── Landing Page ───────────────────────────────────────── */
.sfp-landing { font-family: var(--sfp-font); color: var(--sfp-text); }

/* Hero */
.sfp-landing-hero {
  background: linear-gradient(135deg, #C50034 0%, #E8003D 30%, #FF4D6A 70%, #FF6B35 100%);
  padding: 120px 24px 100px; text-align: center; color: #fff;
  position: relative; overflow: hidden;
}
.sfp-landing-hero::before {
  content: ''; position: absolute; top: -40%; right: -15%; width: 600px; height: 600px;
  border-radius: 50%; background: rgba(255,255,255,.06);
  animation: sfp-landing-float 8s ease-in-out infinite;
}
.sfp-landing-hero::after {
  content: ''; position: absolute; bottom: -30%; left: -10%; width: 400px; height: 400px;
  border-radius: 50%; background: rgba(255,255,255,.04);
  animation: sfp-landing-float 10s ease-in-out infinite reverse;
}
@keyframes sfp-landing-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -20px); }
}
.sfp-landing-hero-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.sfp-landing-label {
  display: inline-block; padding: 8px 22px; border-radius: 20px;
  background: rgba(255,255,255,.18); font-size: .82rem; font-weight: 700;
  margin-bottom: 24px; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15);
  animation: sfp-fade-in-up .6s ease .1s both;
}
.sfp-landing-hero h1 {
  font-size: 3.2rem; font-weight: 900; line-height: 1.2;
  margin: 0 0 20px; letter-spacing: -1.5px;
  text-shadow: 0 2px 20px rgba(0,0,0,.15);
  animation: sfp-fade-in-up .6s ease .2s both;
}
.sfp-landing-sub {
  font-size: 1.15rem; opacity: .92; margin: 0 0 36px; line-height: 1.7;
  animation: sfp-fade-in-up .6s ease .3s both;
}
.sfp-landing-buttons {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  animation: sfp-fade-in-up .6s ease .4s both;
}
.sfp-landing-btn-main {
  padding: 20px 52px; font-size: 1.15rem; border-radius: 14px;
  box-shadow: 0 8px 28px rgba(232,0,61,.45); font-weight: 800;
  transition: all .25s;
}
.sfp-landing-btn-main:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(232,0,61,.55); }
.sfp-landing-buttons .sfp-btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }
.sfp-landing-buttons .sfp-btn-outline:hover { background: rgba(255,255,255,.15); border-color: #fff; }
.sfp-landing-trust {
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  margin-top: 28px; animation: sfp-fade-in-up .6s ease .5s both;
}
.sfp-landing-trust span {
  font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.85);
  letter-spacing: -.2px;
}

/* Stats */
.sfp-landing-stats {
  display: flex; justify-content: center; gap: 0;
  padding: 0; background: var(--sfp-surface);
  border-bottom: 1px solid var(--sfp-border);
  max-width: 820px; margin: -44px auto 0; border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.12); position: relative; z-index: 2;
}
.sfp-landing-stat {
  text-align: center; flex: 1; padding: 32px 20px;
  border-right: 1px solid var(--sfp-border);
}
.sfp-landing-stat:last-child { border-right: none; }
.sfp-landing-stat strong {
  display: block; font-size: 2.4rem; font-weight: 900; color: var(--sfp-primary);
  line-height: 1.15; letter-spacing: -.5px;
}
.sfp-landing-stat span { font-size: .82rem; color: var(--sfp-muted); font-weight: 600; margin-top: 4px; display: block; }

/* Section */
.sfp-landing-section {
  max-width: 1000px; margin: 0 auto; padding: 72px 24px;
}
.sfp-landing-section-alt { background: var(--sfp-bg); max-width: 100%; }
.sfp-landing-section-alt > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
.sfp-landing-section-title {
  text-align: center; font-size: 1.6rem; font-weight: 900;
  margin: 0 0 40px; letter-spacing: -.3px;
}

/* Features */
.sfp-landing-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.sfp-landing-feature {
  text-align: center; padding: 32px 20px;
  background: var(--sfp-surface); border-radius: var(--sfp-radius);
  border: 1px solid var(--sfp-border); box-shadow: var(--sfp-shadow);
  transition: transform .2s, box-shadow .2s;
}
.sfp-landing-feature:hover { transform: translateY(-4px); box-shadow: var(--sfp-shadow-md); }
.sfp-landing-feature-icon {
  font-size: 2.5rem; margin-bottom: 16px;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--sfp-primary-lt); display: inline-flex;
  align-items: center; justify-content: center;
}
.sfp-landing-feature h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.sfp-landing-feature p { font-size: .88rem; color: var(--sfp-text-sub); line-height: 1.65; margin: 0; }

/* Campaign preview cards */
.sfp-landing-camps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.sfp-landing-camp-card {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); padding: 22px;
  box-shadow: var(--sfp-shadow); transition: transform .2s, box-shadow .2s;
}
.sfp-landing-camp-card:hover { transform: translateY(-3px); box-shadow: var(--sfp-shadow-md); }
.sfp-landing-camp-top { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.sfp-landing-camp-card h3 {
  font-size: .95rem; font-weight: 700; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sfp-landing-camp-info { display: flex; justify-content: space-between; align-items: center; }
.sfp-landing-camp-price { font-size: 1.05rem; font-weight: 800; color: var(--sfp-primary); }
.sfp-landing-camp-deadline { font-size: .78rem; color: var(--sfp-muted); }

/* Template preview cards */
.sfp-landing-tpls {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.sfp-landing-tpl-card {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); overflow: hidden;
  box-shadow: var(--sfp-shadow); transition: transform .2s, box-shadow .2s;
}
.sfp-landing-tpl-card:hover { transform: translateY(-3px); box-shadow: var(--sfp-shadow-md); }
.sfp-landing-tpl-thumb { height: 120px; overflow: hidden; }
.sfp-landing-tpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sfp-landing-tpl-body { padding: 14px; }
.sfp-landing-tpl-body h4 { font-size: .9rem; font-weight: 700; margin: 6px 0 4px; }
.sfp-landing-tpl-body p { font-size: .78rem; color: var(--sfp-muted); margin: 0; }

/* Steps */
.sfp-landing-steps {
  display: flex; align-items: center; justify-content: center; gap: 0;
  max-width: 800px; margin: 0 auto;
}
.sfp-landing-step {
  text-align: center; flex: 1; padding: 20px 12px;
}
.sfp-landing-step-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--sfp-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 900; margin-bottom: 12px;
}
.sfp-landing-step h3 { font-size: .95rem; font-weight: 700; margin: 0 0 4px; }
.sfp-landing-step p { font-size: .82rem; color: var(--sfp-muted); margin: 0; }
.sfp-landing-step-arrow {
  font-size: 1.4rem; color: var(--sfp-muted); flex-shrink: 0; padding: 0 4px;
}

/* CTA */
.sfp-landing-cta {
  text-align: center; padding: 100px 24px;
  background: linear-gradient(135deg, #C50034 0%, #E8003D 40%, #FF4D6A 100%); color: #fff;
  position: relative; overflow: hidden;
}
.sfp-landing-cta::before {
  content: ''; position: absolute; top: -30%; right: -10%; width: 400px; height: 400px;
  border-radius: 50%; background: rgba(255,255,255,.06);
  animation: sfp-landing-float 8s ease-in-out infinite;
}
.sfp-landing-cta::after {
  content: ''; position: absolute; bottom: -20%; left: -5%; width: 250px; height: 250px;
  border-radius: 50%; background: rgba(255,255,255,.04);
  animation: sfp-landing-float 10s ease-in-out infinite reverse;
}
.sfp-landing-cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.sfp-landing-cta-icon { font-size: 3rem; margin-bottom: 16px; }
.sfp-landing-cta h2 { font-size: 2.2rem; font-weight: 900; margin: 0 0 14px; color: #fff; }
.sfp-landing-cta p { color: rgba(255,255,255,.88); margin: 0 0 36px; font-size: 1.05rem; line-height: 1.7; }
.sfp-landing-cta-buttons {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.sfp-landing-cta .sfp-landing-btn-main {
  background: #fff; color: var(--sfp-primary); border-color: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.15);
}
.sfp-landing-cta .sfp-landing-btn-main:hover { background: #F0EAFF; transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.2); }

/* Landing responsive */
@media (max-width: 768px) {
  .sfp-landing-hero { padding: 80px 20px 70px; }
  .sfp-landing-hero h1 { font-size: 2.2rem; letter-spacing: -.5px; }
  .sfp-landing-sub { font-size: .95rem; }
  .sfp-landing-buttons { flex-direction: column; align-items: center; }
  .sfp-landing-buttons .sfp-btn { width: 100%; max-width: 320px; }
  .sfp-landing-trust { gap: 16px; margin-top: 24px; }
  .sfp-landing-trust span { font-size: .78rem; }
  .sfp-landing-stats { flex-wrap: wrap; margin-top: -28px; border-radius: 12px; gap: 0; }
  .sfp-landing-stat { flex: 1 1 50%; padding: 20px 12px; }
  .sfp-landing-stat strong { font-size: 1.6rem; }
  .sfp-landing-section { padding: 48px 20px; }
  .sfp-landing-section-title { font-size: 1.3rem; margin-bottom: 28px; }
  .sfp-landing-features { grid-template-columns: 1fr; gap: 16px; }
  .sfp-landing-feature { padding: 24px 16px; }
  /* B161: 캠페인 카드 모바일 횡스크롤 */
  .sfp-landing-camps {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 4px 16px 12px;
    margin: 0 -16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sfp-landing-camps::-webkit-scrollbar { display: none; }
  .sfp-landing-camps > .sfp-landing-camp-card {
    flex: 0 0 auto !important;
    width: 180px;
    scroll-snap-align: start;
    padding: 16px;
  }
  .sfp-landing-tpls { grid-template-columns: 1fr; }
  .sfp-landing-steps { flex-direction: column; gap: 8px; }
  .sfp-landing-step-arrow { transform: rotate(90deg); }
  .sfp-landing-cta { padding: 60px 20px; }
  .sfp-landing-cta h2 { font-size: 1.6rem; }
  .sfp-landing-cta-buttons { flex-direction: column; align-items: center; }
  .sfp-landing-cta-buttons .sfp-btn { width: 100%; max-width: 320px; }
}

/* ── Advertiser — Blue Theme (#0EA5E9) ─────────────────── */
.sfp-adv-nav { border-bottom: 2px solid #E0F2FE; }
.sfp-adv-hero {
  background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 50%, #38BDF8 100%) !important;
  box-shadow: 0 4px 20px rgba(14,165,233,.3);
}
.sfp-adv-hero::before { background: rgba(255,255,255,.06); }
.sfp-adv-hero::after { background: rgba(255,255,255,.04); }
.sfp-adv-hero .sfp-avatar {
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.3);
}
.sfp-adv-hero .sfp-hero-info h2 { color: #fff; }
.sfp-adv-hero .sfp-hero-info p { color: rgba(255,255,255,.8); }
.sfp-adv-hero .sfp-hero-info strong { color: #fff; }

/* Advertiser login tabs */
.sfp-adv-tabs {
  display: flex; gap: 0; margin-bottom: 24px;
  border: 1.5px solid var(--sfp-border); border-radius: var(--sfp-radius); overflow: hidden;
}
.sfp-adv-tab {
  flex: 1; padding: 12px; border: none; background: var(--sfp-bg);
  font-family: var(--sfp-font); font-size: .88rem; font-weight: 600;
  color: var(--sfp-muted); cursor: pointer; transition: all .2s;
}
.sfp-adv-tab:hover:not(.active) { background: #E0F2FE; color: #0EA5E9; }
.sfp-adv-tab.active { background: #0EA5E9; color: #fff; font-weight: 700; }

/* Advertiser stat cards — blue accent */
.sfp-adv-stat {
  border-left: 3px solid #0EA5E9;
}
.sfp-adv-stat strong { color: #0EA5E9 !important; }
.sfp-adv-icon {
  background: linear-gradient(135deg, #0EA5E9, #38BDF8) !important; color: #fff;
}
.sfp-page-advertiser .sfp-stat-card {
  border-left: 3px solid #0EA5E9;
}
.sfp-page-advertiser .sfp-stat-icon {
  background: linear-gradient(135deg, #0EA5E9, #38BDF8); color: #fff;
}

/* Campaign rows */
.sfp-adv-campaign-list { display: flex; flex-direction: column; gap: 12px; }
.sfp-adv-campaign-row {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); padding: 20px 22px;
  display: flex; align-items: center; gap: 16px; box-shadow: var(--sfp-shadow);
  transition: all .25s;
}
.sfp-adv-campaign-row:hover {
  box-shadow: var(--sfp-shadow-md); border-color: #CBD5E1; transform: translateY(-2px);
}
.sfp-adv-campaign-info { flex: 1; min-width: 0; }
.sfp-adv-campaign-info h4 {
  font-size: .95rem; font-weight: 700; margin: 0 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sfp-adv-campaign-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sfp-adv-campaign-stats {
  display: flex; gap: 16px; font-size: .82rem; color: var(--sfp-text-sub);
  flex-shrink: 0;
}
.sfp-adv-campaign-stats span { white-space: nowrap; }
.sfp-adv-campaign-stats strong { color: var(--sfp-text); font-weight: 800; }

/* Advertiser form */
.sfp-adv-form .sfp-form-group { margin-bottom: 16px; }
.sfp-adv-form label { font-size: .82rem; font-weight: 600; margin-bottom: 6px; display: block; color: var(--sfp-text); }
.sfp-adv-form input,
.sfp-adv-form select {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--sfp-border);
  border-radius: var(--sfp-radius); font-size: .88rem; font-family: var(--sfp-font);
  transition: all .2s; background: var(--sfp-bg);
}
.sfp-adv-form input:focus,
.sfp-adv-form select:focus {
  border-color: var(--sfp-primary); outline: none;
  box-shadow: 0 0 0 3px rgba(232,0,61,.12); background: var(--sfp-surface);
}

.sfp-login-divider {
  display: flex; align-items: center; gap: 16px; margin: 28px 0;
  color: var(--sfp-muted); font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .5px;
}
.sfp-login-divider::before,
.sfp-login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--sfp-border);
}

/* Advertiser login box — blue theme */
.sfp-page-advertiser .sfp-login-box .sfp-btn-primary,
.sfp-adv-form .sfp-btn-primary {
  background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 100%);
  border-color: #0EA5E9;
}
.sfp-page-advertiser .sfp-login-box .sfp-btn-primary:hover,
.sfp-adv-form .sfp-btn-primary:hover {
  background: linear-gradient(135deg, #075985 0%, #0369A1 100%);
  box-shadow: 0 4px 16px rgba(14,165,233,.35);
}
/* Advertiser campaign row accent */
.sfp-page-advertiser .sfp-adv-campaign-row:hover {
  border-color: #7DD3FC;
}
.sfp-page-advertiser .sfp-btn-primary {
  background: #0EA5E9; border-color: #0EA5E9;
}
.sfp-page-advertiser .sfp-btn-primary:hover {
  background: #0369A1; border-color: #0369A1;
  box-shadow: 0 4px 14px rgba(14,165,233,.35);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Navigation: hide desktop links, show mobile tab */
  .sfp-nav-links a:not(.sfp-nav-points):not(.sfp-nav-notif):not(.sfp-nav-badge) { display: none; }
  .sfp-mobile-tab { display: block; }

  /* Layout */
  .sfp-wrap { padding: 16px 16px calc(80px + env(safe-area-inset-bottom, 0px)); }
  .sfp-community-layout { grid-template-columns: 1fr; }
  .sfp-community-sidebar { display: none; }
  .sfp-community-top-bar { display: flex; }
  .sfp-community-main { border: none; padding: 0; }
  .sfp-hide-mobile { display: none !important; }
  .sfp-hide-pc { display: flex !important; }
  .sfp-tpl-detail-wrap { grid-template-columns: 1fr; }

  /* Community mobile */
  .sfp-community-top-bar { flex-wrap: wrap; gap: 8px; }
  .sfp-board-tabs { flex: 1 1 100%; order: 2; }
  #sfp-write-btn { order: 1; margin-left: auto; flex-shrink: 0; }
  .sfp-post-detail-title { font-size: 1.15rem; }
  .sfp-post-detail-wrap #sfp-back-btn { padding: 6px 10px; font-size: .78rem; }
  .sfp-post-content { font-size: .88rem; }
  .sfp-post-actions { flex-wrap: wrap; }
  .sfp-comment-write textarea { font-size: .85rem; }
  .sfp-comment-write { display: flex; flex-direction: column; }
  .sfp-comment-write #sfp-comment-submit { align-self: flex-end; }
  .sfp-pagination { flex-wrap: wrap; }

  /* Modal mobile */
  .sfp-modal { padding: 10px; }
  .sfp-modal-inner { padding: 20px 16px; border-radius: 12px; max-height: 95vh; }

  /* Hero */
  .sfp-dashboard-hero { padding: 20px 18px; gap: 14px; }
  .sfp-avatar { width: 48px; height: 48px; font-size: 1.2rem; }
  .sfp-hero-info h2 { font-size: 1.05rem; }

  /* Stat Cards: 2 columns */
  .sfp-stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sfp-stat-card { padding: 14px 12px; gap: 10px; }
  .sfp-stat-icon { width: 36px; height: 36px; font-size: 1rem; }
  .sfp-stat-card strong { font-size: 1.15rem; }
  .sfp-stat-card small { font-size: .72rem; }

  /* Campaign cards: 2 col on tablet, 1 col on smaller */
  .sfp-card-grid,
  .sfp-card-grid-2,
  .sfp-card-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sfp-camp-thumb { height: 140px; }

  /* Onboarding: compact */
  .sfp-onboarding { padding: 18px 16px; }
  .sfp-onboarding-steps::before { top: 20px; left: 20px; right: 20px; }
  .sfp-step-num { width: 40px; height: 40px; font-size: .85rem; }
  .sfp-step-info strong { font-size: .78rem; }
  .sfp-step-info small { font-size: .68rem; }

  /* Points */
  .sfp-points-amount { font-size: 2.2rem; }
  .sfp-points-hero { padding: 28px 20px; }

  /* Campaign detail */
  .sfp-camp-detail-thumb { max-height: 200px; }
  .sfp-camp-detail-body { padding: 20px 16px; }
  .sfp-camp-detail-body h1 { font-size: 1.25rem; margin: 8px 0 12px; }
  .sfp-info-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
  .sfp-camp-section h3 { font-size: .92rem; }
  .sfp-guide-box { padding: 12px; font-size: .84rem; }
  .sfp-camp-apply-area .sfp-btn-lg { width: 100%; }

  /* New components tablet */
  .sfp-vtype-card { padding: 16px; }
  .sfp-vtype-icon { width: 40px; height: 40px; }
  .sfp-settle-hero { padding: 28px 20px; }
  .sfp-settle-total strong { font-size: 2.2rem; }
  .sfp-points-hero .sfp-btn-withdraw { padding: 12px 28px; }

  /* Upload */
  .sfp-upload-card { padding: 16px; }
  .sfp-upload-card h3 { font-size: .95rem; }

  /* Notifications */
  .sfp-notif-item { padding: 12px; gap: 10px; }
  .sfp-notif-body strong { font-size: .85rem; }
  .sfp-notif-dropdown { width: calc(100vw - 20px); right: -60px; }

  /* No hover overlay on mobile */
  .sfp-camp-card::after { display: none; }

  /* Touch targets: min 44px */
  .sfp-filter-btn { min-height: 44px; }
  .sfp-page-btn { min-height: 44px; min-width: 44px; }
  .sfp-btn-sm { min-height: 44px; }
  .sfp-tab-item { min-height: 44px; }
  .sfp-board-link { min-height: 44px; display: flex; align-items: center; }
  .sfp-notif-dd-item { min-height: 48px; }
  .sfp-post-card { min-height: 48px; }

  /* Filter bar */
  .sfp-filter-bar { gap: 6px; padding: 8px 0; }
  .sfp-filter-btn { padding: 8px 14px; font-size: .78rem; }

  /* Tables — wrap in scrollable container on mobile */
  .sfp-table { font-size: .82rem; }
  .sfp-table th { padding: 8px 10px; font-size: .75rem; white-space: nowrap; }
  .sfp-table td { padding: 10px; }
  .sfp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Nav compact */
  .sfp-nav { padding: 0 16px; height: 52px; }
  .sfp-nav-brand { font-size: 1.05rem; }
  .sfp-nav-logo { height: 52px; }
  .sfp-nav-points { padding: 5px 12px !important; font-size: .78rem !important; }

  /* Toast: full width on mobile */
  .sfp-toast-container { bottom: calc(var(--sfp-mobile-tab) + 12px); right: 12px; left: 12px; }
  .sfp-toast { min-width: auto; max-width: none; }

  /* Advertiser */
  .sfp-adv-campaign-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .sfp-adv-campaign-stats { justify-content: space-between; }
  .sfp-adv-nav .sfp-nav-links a:not(.sfp-btn) { display: none; }
}

@media (max-width: 480px) {
  .sfp-page-header h1 { font-size: 1.2rem; }
  .sfp-camp-detail-body { padding: 16px; }
  .sfp-camp-detail-body h1 { font-size: 1.15rem; }

  /* Campaign cards: 1 col on phone */
  .sfp-card-grid,
  .sfp-card-grid-2,
  .sfp-card-grid-3 { grid-template-columns: 1fr; }
  .sfp-camp-thumb { height: 160px; }

  /* Community 480px */
  .sfp-board-tabs .sfp-board-link { padding: 5px 10px; font-size: .72rem; }
  .sfp-post-card { padding: 10px; }
  .sfp-post-card-title { font-size: .84rem; }
  .sfp-post-card-meta { font-size: .7rem; }
  .sfp-post-detail-title { font-size: 1.05rem; }
  .sfp-post-meta { font-size: .75rem; }
  .sfp-comment strong { font-size: .82rem; }
  .sfp-comment p { font-size: .82rem; }
  .sfp-page-btn { padding: 5px 9px; font-size: .75rem; }

  /* Stat cards: stack on small phone */
  .sfp-stat-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sfp-stat-card { padding: 12px 10px; gap: 8px; }
  .sfp-stat-icon { width: 32px; height: 32px; font-size: .9rem; }
  .sfp-stat-card strong { font-size: 1.05rem; }

  /* Dashboard hero compact */
  .sfp-dashboard-hero { padding: 16px 14px; gap: 12px; border-radius: 10px; }
  .sfp-avatar { width: 42px; height: 42px; font-size: 1rem; }
  .sfp-hero-info h2 { font-size: .95rem; }
  .sfp-hero-info p { font-size: .8rem; }

  /* Onboarding */
  .sfp-onboarding-steps { flex-direction: column; gap: 12px; align-items: flex-start; }
  .sfp-onboarding-steps::before { display: none; }
  .sfp-onboarding-step { flex-direction: row; text-align: left; gap: 12px; }
  .sfp-step-num { width: 36px; height: 36px; font-size: .8rem; }

  /* Info grid: 1 col */
  .sfp-info-grid { grid-template-columns: 1fr; }

  /* Filter scrollable */
  .sfp-filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sfp-filter-bar::-webkit-scrollbar { display: none; }
  .sfp-filter-btn { flex-shrink: 0; }
}

/* ============================================================
   Advertiser Report — .sfp-report-*
   ============================================================ */
.sfp-report {
  font-family: var(--sfp-font, 'Noto Sans KR', -apple-system, sans-serif);
  color: var(--sfp-text, #333333);
  max-width: 1100px; margin: 0 auto; padding: 40px 32px;
  background: #fff; line-height: 1.6;
  min-height: 100vh;
}

/* ── Header ────────────────────────────────────────────────── */
.sfp-report-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 20px; margin-bottom: 28px;
  border-bottom: 3px solid var(--sfp-primary);
}
.sfp-report-header-left {
  display: flex; align-items: center; gap: 12px;
}
.sfp-report-logo { font-size: 1.6rem; }
.sfp-report-brand {
  font-size: 1.3rem; font-weight: 800; color: var(--sfp-primary);
  letter-spacing: -.3px;
}
.sfp-report-brand small {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--sfp-text); letter-spacing: 0;
}
.sfp-report-header-right {
  text-align: right; font-size: .82rem; color: var(--sfp-muted);
}
.sfp-report-header-right strong {
  display: block; font-size: .95rem; color: var(--sfp-text); font-weight: 700;
}

/* ── Summary Cards (top 6) ─────────────────────────────────── */
.sfp-report-summary {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  margin-bottom: 32px;
}
.sfp-report-stat {
  background: #FAFBFD; border: 1px solid var(--sfp-border);
  border-radius: 10px; padding: 18px 14px; text-align: center;
}
.sfp-report-stat-label {
  font-size: .72rem; font-weight: 600; color: var(--sfp-muted);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px;
}
.sfp-report-stat-value {
  font-size: 1.4rem; font-weight: 800; color: var(--sfp-text);
  line-height: 1.2;
}
.sfp-report-stat-sub {
  font-size: .7rem; color: var(--sfp-muted); margin-top: 4px;
}
/* Color variants */
.sfp-report-stat-green .sfp-report-stat-value { color: var(--sfp-success); }
.sfp-report-stat-red .sfp-report-stat-value   { color: var(--sfp-danger); }
.sfp-report-stat-purple .sfp-report-stat-value { color: var(--sfp-primary); }
.sfp-report-stat-blue .sfp-report-stat-value   { color: #2563EB; }

/* ── Section title ─────────────────────────────────────────── */
.sfp-report-section {
  margin-bottom: 28px;
}
.sfp-report-section-title {
  font-size: 1.05rem; font-weight: 800; color: var(--sfp-text);
  margin: 0 0 16px; padding-bottom: 8px;
  border-bottom: 2px solid var(--sfp-border);
  display: flex; align-items: center; gap: 8px;
}

/* ── Campaign Card ─────────────────────────────────────────── */
.sfp-report-campaign {
  background: #fff; border: 1px solid var(--sfp-border);
  border-radius: 10px; padding: 22px 24px; margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.sfp-report-camp-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.sfp-report-camp-name {
  font-size: 1.05rem; font-weight: 700; color: var(--sfp-text);
  display: flex; align-items: center; gap: 8px;
}
.sfp-report-camp-period {
  font-size: .78rem; color: var(--sfp-muted);
}

/* Progress bar */
.sfp-report-progress-wrap {
  margin-bottom: 16px;
}
.sfp-report-progress-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .78rem; font-weight: 600; margin-bottom: 6px;
}
.sfp-report-progress-label span:first-child { color: var(--sfp-text-sub); }
.sfp-report-progress-pct { color: var(--sfp-primary); font-weight: 800; }
.sfp-report-progress-bar {
  width: 100%; height: 8px; background: #E5E7EB;
  border-radius: 4px; overflow: hidden;
}
.sfp-report-progress-fill {
  height: 100%; background: var(--sfp-primary);
  border-radius: 4px; transition: width .4s ease;
}

/* Campaign KPI row */
.sfp-report-kpi-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin-bottom: 14px;
}
.sfp-report-kpi {
  text-align: center; padding: 10px 6px;
  background: var(--sfp-bg); border-radius: 8px;
}
.sfp-report-kpi-value {
  font-size: 1.1rem; font-weight: 800; color: var(--sfp-text);
}
.sfp-report-kpi-label {
  font-size: .68rem; color: var(--sfp-muted); font-weight: 500;
}
.sfp-report-kpi-green .sfp-report-kpi-value { color: var(--sfp-success); }
.sfp-report-kpi-red .sfp-report-kpi-value   { color: var(--sfp-danger); }

/* Memo box */
.sfp-report-memo {
  background: #F9FAFB; border-left: 3px solid var(--sfp-border);
  padding: 10px 14px; border-radius: 0 8px 8px 0;
  font-size: .82rem; color: var(--sfp-text-sub); font-style: italic;
}

/* ── Channel Detail Table ──────────────────────────────────── */
.sfp-report-table {
  width: 100%; border-collapse: collapse; font-size: .82rem;
  margin-bottom: 8px;
}
.sfp-report-table thead th {
  padding: 10px 12px; background: #F8F9FA;
  font-weight: 600; color: var(--sfp-muted); font-size: .75rem;
  text-align: left; border-bottom: 2px solid var(--sfp-border);
  white-space: nowrap;
}
.sfp-report-table tbody tr:nth-child(even) { background: #FAFBFD; }
.sfp-report-table tbody tr:hover { background: #F0EAFF; }
.sfp-report-table td {
  padding: 10px 12px; border-bottom: 1px solid #F0F1F5;
  vertical-align: middle;
}
.sfp-report-table a { color: var(--sfp-primary); text-decoration: none; }
.sfp-report-table a:hover { text-decoration: underline; }

/* Platform icon badges */
.sfp-report-plat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 4px;
  font-size: .68rem; font-weight: 800; color: #fff;
}
.sfp-report-plat-yt { background: #FF0000; }
.sfp-report-plat-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.sfp-report-plat-tt { background: #010101; }

/* Status indicators in table */
.sfp-report-done { color: var(--sfp-success); }
.sfp-report-pending { color: var(--sfp-muted); }

/* ── Footer ────────────────────────────────────────────────── */
.sfp-report-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; margin-top: 32px;
  border-top: 1px solid var(--sfp-border);
}
.sfp-report-footer-text {
  font-size: .75rem; color: var(--sfp-muted);
}
.sfp-report-footer-actions {
  display: flex; gap: 8px;
}

/* ── Print Optimization ────────────────────────────────────── */
@media print {
  body { background: #fff !important; margin: 0; }
  .sfp-nav, .sfp-mobile-tab, .sfp-report-footer-actions,
  .sfp-toast-container, .sfp-notif-dropdown,
  .sfp-btn, button { display: none !important; }
  .sfp-report-footer-text { display: block !important; }
  .sfp-report {
    max-width: 100%; padding: 20px 0;
    box-shadow: none; border: none;
  }
  .sfp-report-header { border-bottom-color: #000; break-after: avoid; }
  .sfp-report-summary { break-inside: avoid; }
  .sfp-report-campaign { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .sfp-report-section { break-inside: avoid; }
  .sfp-report-table { font-size: .75rem; break-inside: auto; }
  .sfp-report-table thead { display: table-header-group; }
  .sfp-report-table tr { break-inside: avoid; }
  .sfp-report-table thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sfp-report-table tbody tr:nth-child(even) { background: #f5f5f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sfp-report-progress-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sfp-report-plat { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sfp-report-stat { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
  .sfp-report-kpi-row { break-inside: avoid; }
  .sfp-report-footer { break-before: avoid; }
  @page { margin: 15mm; }
}

/* ── Report Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .sfp-report { padding: 20px 16px; }
  .sfp-report-header { flex-direction: column; gap: 12px; }
  .sfp-report-header-right { text-align: left; }
  .sfp-report-summary { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .sfp-report-stat { padding: 14px 10px; }
  .sfp-report-stat-value { font-size: 1.15rem; }
  .sfp-report-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .sfp-report-campaign { padding: 16px; }
  .sfp-report-table { font-size: .78rem; }
  .sfp-report-table th, .sfp-report-table td { padding: 8px; }
}

@media (max-width: 480px) {
  .sfp-report-summary { grid-template-columns: repeat(2, 1fr); }
  .sfp-report-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .sfp-report-camp-header { flex-direction: column; align-items: flex-start; }
  .sfp-report-footer { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ── 공지사항 ───────────────────────────────────────────── */
.sfp-notices { margin-bottom: 16px; }
.sfp-notice-bar {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px solid #FDE68A; border-left: 4px solid #F59E0B;
  border-radius: 10px;
  padding: 16px 40px 16px 18px;
  margin-bottom: 10px;
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: box-shadow .2s;
}
.sfp-notice-bar:hover { box-shadow: 0 2px 12px rgba(245,158,11,.12); }
.sfp-notice-bar .sfp-notice-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  color: var(--sfp-warn);
  opacity: .5;
  padding: 2px 6px;
  border-radius: 4px;
  transition: opacity .15s, background .15s;
}
.sfp-notice-bar .sfp-notice-close:hover { opacity: 1; background: rgba(217,119,6,.1); }
.sfp-notice-bar strong {
  display: block;
  margin-bottom: 4px;
  color: #92400E;
  font-size: .88rem;
}
.sfp-notice-bar p {
  margin: 0;
  color: #78350F;
  font-size: .82rem;
  line-height: 1.5;
}

/* ── 375px Ultra-small (iPhone SE) ──────���──────────────── */
@media (max-width: 375px) {
  .sfp-wrap { padding: 12px 12px calc(76px + env(safe-area-inset-bottom, 0px)); }
  .sfp-page-header h1 { font-size: 1.08rem; }
  .sfp-notif-dropdown { width: calc(100vw - 16px); right: -80px; }

  /* Login: compact padding */
  .sfp-login-box { padding: 32px 20px; border-radius: 12px; }
  .sfp-login-logo { font-size: 2.8rem; margin-bottom: 8px; }
  .sfp-login-title { font-size: 1.4rem; }
  .sfp-login-sub { font-size: .82rem; margin-bottom: 28px; }
  .sfp-google-btn,
  .sfp-kakao-btn { padding: 14px 16px; font-size: .88rem; border-radius: 10px; }
  .sfp-login-divider { margin: 20px 0; }
  .sfp-login-notice { font-size: .7rem; margin-top: 20px; }

  /* Cards: single column */
  .sfp-card-grid,
  .sfp-card-grid-2,
  .sfp-card-grid-3 { grid-template-columns: 1fr; }

  /* Stats: single column */
  .sfp-stat-row { grid-template-columns: 1fr; gap: 6px; }
  .sfp-stat-card { padding: 10px 8px; gap: 6px; }
  .sfp-stat-icon { width: 28px; height: 28px; font-size: .8rem; }

  /* Dashboard hero */
  .sfp-dashboard-hero { padding: 12px 10px; gap: 10px; }
  .sfp-avatar { width: 36px; height: 36px; font-size: .9rem; }
  .sfp-hero-info h2 { font-size: .88rem; }

  /* Modal */
  .sfp-modal { padding: 8px; }
  .sfp-modal-inner { padding: 14px 12px; max-height: calc(100vh - 80px); }

  /* Toast */
  .sfp-toast { min-width: auto; font-size: .82rem; padding: 10px 14px; }

  /* Landing */
  .sfp-landing-hero { padding: 40px 16px 32px; }
  .sfp-landing-hero h1 { font-size: 1.4rem; }
  .sfp-landing-label { font-size: .72rem; padding: 4px 12px; }
  .sfp-landing-btn-main { padding: 14px 28px; font-size: .95rem; }
  .sfp-landing-stats { margin-top: -20px; }
  .sfp-landing-stat { flex: 1 1 50%; }
  .sfp-landing-stat strong { font-size: 1.3rem; }

  /* Filter */
  .sfp-filter-bar { gap: 4px; }
  .sfp-filter-btn { padding: 5px 10px; font-size: .72rem; }

  /* Platform badges — smaller on ultra-small */
  .sfp-platform-badge { font-size: .58rem; padding: 1px 5px; }

  /* Community tabs 375px — ensure scroll */
  .sfp-board-tabs .sfp-board-link { padding: 5px 8px; font-size: .68rem; min-height: 36px; }
  .sfp-community-top-bar { gap: 6px; }

  /* Table overflow — ensure scrollable */
  .sfp-table td { font-size: .75rem; padding: 8px 6px; }

  /* Channel preview card */
  .sfp-channel-preview { padding: 10px 12px; }
  .sfp-channel-preview-title { font-size: .82rem; }
  .sfp-channel-preview-row { font-size: .75rem; }

  /* Campaign card compact */
  .sfp-camp-body { padding: 12px 14px; }
  .sfp-camp-footer { font-size: .72rem; gap: 2px; }
  .sfp-camp-footer strong { font-size: .78rem; }
  .sfp-camp-meta { gap: 4px; }

  /* Campaign detail 375px */
  .sfp-camp-detail-thumb { max-height: 160px; }
  .sfp-camp-detail-body { padding: 14px 12px; }
  .sfp-camp-detail-body h1 { font-size: 1.05rem; }
  .sfp-camp-section h3 { font-size: .85rem; }
  .sfp-guide-box { padding: 10px; font-size: .8rem; }
  .sfp-camp-apply-area { padding: 12px; border-radius: 10px; }
  .sfp-camp-apply-area .sfp-btn-lg { padding: 14px 20px; font-size: .88rem; width: 100%; }
  .sfp-info-grid { padding: 10px; gap: 8px; }
  .sfp-info-item label { font-size: .7rem; }
  .sfp-info-item span { font-size: .82rem; }

  /* Notice bar compact */
  .sfp-notice-bar { padding: 12px 32px 12px 14px; font-size: .82rem; }
  .sfp-notice-bar .sfp-notice-close { top: 8px; right: 8px; font-size: 13px; }

  /* Video provision */
  .sfp-video-provision { padding: 14px; }
  .sfp-video-provision-icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 8px; }
  .sfp-btn-download { padding: 8px 16px; font-size: .82rem; }

  /* New components 375px */
  .sfp-vtype-card { padding: 14px; gap: 10px; }
  .sfp-vtype-icon { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 10px; }
  .sfp-vtype-body strong { font-size: .88rem; }
  .sfp-vtype-body p { font-size: .78rem; }
  .sfp-ch-card-inner { padding: 10px 12px; gap: 10px; }
  .sfp-ch-card-info strong { font-size: .82rem; }
  .sfp-pts-timeline { padding-left: 20px; }
  .sfp-pts-content { padding: 10px 12px; }
  .sfp-pts-type { font-size: .75rem; }
  .sfp-settle-hero { padding: 24px 16px; }
  .sfp-settle-total strong { font-size: 2rem; }
  .sfp-settle-card { padding: 14px 16px; }
  .sfp-settle-card-amount { font-size: 1.1rem; }
  .sfp-btn-withdraw { padding: 14px 28px; font-size: .9rem; }
}

/* ── Channel Preview Card ──────────────────────────────── */
.sfp-channel-preview {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-left: 4px solid var(--sfp-border);
  border-radius: 8px; padding: 14px 16px; margin-top: 10px;
  font-size: .85rem; line-height: 1.6;
  transition: border-color .2s, opacity .2s;
}
.sfp-channel-preview-title {
  font-weight: 700; margin-bottom: 6px; font-size: .88rem;
}
.sfp-channel-preview-row {
  display: flex; align-items: center; gap: 6px;
  color: var(--sfp-text-sub); font-size: .82rem;
}
.sfp-channel-preview-row strong {
  color: var(--sfp-text); font-weight: 700;
}

/* States */
.sfp-channel-preview-success {
  border-left-color: #10B981; background: #F0FDF4;
}
.sfp-channel-preview-success .sfp-channel-preview-title {
  color: #065F46;
}
.sfp-channel-preview-error {
  border-left-color: #EF4444; background: #FEF2F2;
}
.sfp-channel-preview-error .sfp-channel-preview-title {
  color: #991B1B;
}
.sfp-channel-preview-loading {
  border-left-color: #F59E0B; background: #FFFBEB;
}
.sfp-channel-preview-loading .sfp-channel-preview-title {
  color: #92400E;
}

/* Loading animation */
@keyframes sfp-ch-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.sfp-channel-preview-loading {
  animation: sfp-ch-pulse 1.5s ease-in-out infinite;
}

/* ── Campaign Type Badges ──────────────────────────────── */
.sfp-badge-provision {
  background: #DBEAFE; color: #1E40AF; font-size: .7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px;
}
.sfp-badge-template {
  background: var(--sfp-primary-lt); color: var(--sfp-primary); font-size: .7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px;
}
.sfp-badge-selfmade {
  background: #F0FDF4; color: #065F46; font-size: .7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px;
}

/* ── Video Provision Section (캠페인 상세) ─────────────── */
.sfp-video-provision {
  background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: var(--sfp-radius);
  padding: 24px; margin-bottom: 20px;
}
.sfp-video-provision-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.sfp-video-provision-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: #DBEAFE; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.sfp-video-provision-header h3 {
  font-size: 1rem; font-weight: 700; color: #1E3A5F; margin: 0;
}
.sfp-video-provision-header p {
  font-size: .82rem; color: #3B82F6; margin: 2px 0 0; font-weight: 500;
}
.sfp-video-provision-body {
  display: flex; flex-direction: column; gap: 10px;
}
.sfp-video-provision-row {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; color: #1E40AF;
}
.sfp-video-provision-row strong { font-weight: 700; }
.sfp-video-provision-guide {
  font-size: .8rem; color: #64748B; margin-top: 8px; padding-top: 12px;
  border-top: 1px solid #BFDBFE; line-height: 1.6;
}

/* Download button */
.sfp-btn-download {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border-radius: var(--sfp-radius-sm);
  background: #2563EB; color: #fff; font-weight: 700; font-size: .88rem;
  border: none; cursor: pointer; transition: background .15s;
  text-decoration: none; font-family: var(--sfp-font);
}
.sfp-btn-download:hover { background: #1D4ED8; color: #fff; }
.sfp-btn-download:disabled, .sfp-btn-download.sfp-btn-download-pending {
  background: #94A3B8; cursor: not-allowed; opacity: .7;
}

/* ── Upload Steps (영상제공 캠페인용) ──────────────────── */
.sfp-upload-steps {
  display: flex; gap: 0; margin: 20px 0; position: relative;
}
.sfp-upload-step {
  flex: 1; text-align: center; position: relative; padding: 16px 10px;
}
.sfp-upload-step::before {
  content: ''; position: absolute; top: 28px; left: 50%; right: -50%;
  height: 2px; background: var(--sfp-border); z-index: 0;
}
.sfp-upload-step:last-child::before { display: none; }
.sfp-upload-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sfp-bg); border: 2px solid var(--sfp-border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; color: var(--sfp-muted);
  position: relative; z-index: 1; margin-bottom: 8px;
}
.sfp-upload-step-label {
  font-size: .75rem; font-weight: 600; color: var(--sfp-muted);
  line-height: 1.3;
}
.sfp-upload-step-sub {
  font-size: .68rem; color: var(--sfp-muted); margin-top: 2px;
}

/* Step states */
.sfp-upload-step-active .sfp-upload-step-num {
  background: var(--sfp-primary); border-color: var(--sfp-primary); color: #fff;
}
.sfp-upload-step-active .sfp-upload-step-label { color: var(--sfp-primary); }
.sfp-upload-step-active::before { background: var(--sfp-primary); }
.sfp-upload-step-done .sfp-upload-step-num {
  background: #10B981; border-color: #10B981; color: #fff;
}
.sfp-upload-step-done .sfp-upload-step-label { color: #065F46; }
.sfp-upload-step-done::before { background: #10B981; }
.sfp-upload-step-waiting .sfp-upload-step-num {
  background: #FEF3C7; border-color: #F59E0B; color: #92400E;
}
.sfp-upload-step-waiting .sfp-upload-step-label { color: #92400E; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 480px) {
  .sfp-video-provision { padding: 16px; }
  .sfp-video-provision-icon { width: 40px; height: 40px; font-size: 1.2rem; }
  .sfp-video-provision-header h3 { font-size: .92rem; }
  .sfp-upload-steps { flex-direction: column; gap: 4px; }
  .sfp-upload-step { text-align: left; display: flex; align-items: center; gap: 10px; padding: 8px 0; }
  .sfp-upload-step::before { display: none; }
  .sfp-upload-step-num { margin-bottom: 0; flex-shrink: 0; }
}

/* ── Platform Badges ───────────────────────────────────── */
.sfp-platform-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px;
  vertical-align: middle; line-height: 1;
}
.sfp-platform-badge svg { display: block; }
.sfp-platform-yt    { color: #FF0000; }
.sfp-platform-insta  { color: #C13584; }
.sfp-platform-tic    { color: #111111; }
.sfp-platform-blog   { color: #03C75A; }
.sfp-platform-other  { color: #6B7280; }

/* ── Notice Slider (공지 배너) ─────────────────────────── */
.sfp-notice-slider {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #E8003D 0%, #FF3366 100%);
  border-radius: var(--sfp-radius); margin-bottom: 20px;
  color: #fff; min-height: 64px;
}
.sfp-notice-slider-track {
  display: flex; transition: transform .4s ease;
}
.sfp-notice-slide {
  min-width: 100%; padding: 18px 48px;
  display: flex; align-items: center; gap: 10px;
}
.sfp-notice-slide-icon { font-size: 1.2rem; flex-shrink: 0; }
.sfp-notice-slide-text { flex: 1; }
.sfp-notice-slide-text strong { font-size: .88rem; font-weight: 700; }
.sfp-notice-slide-text p { font-size: .78rem; opacity: .85; margin: 2px 0 0; }
.sfp-notice-slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none !important; border: none !important; box-shadow: none !important;
  color: #fff; width: auto; height: auto; cursor: pointer;
  font-size: 20px; display: flex; align-items: center; justify-content: center;
  transition: opacity .2s; z-index: 2; padding: 8px;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.sfp-notice-slider-btn:hover { opacity: .7; }
.sfp-notice-slider-prev { left: 10px; }
.sfp-notice-slider-next { right: 10px; }
.sfp-notice-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
}
.sfp-notice-dot {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35);
  border: none; padding: 0; cursor: pointer; transition: all .2s;
}
.sfp-notice-dot:hover { background: rgba(255,255,255,.6); }
.sfp-notice-dot.active { background: #fff; width: 18px; border-radius: 4px; }

/* ── Quick Menu (빠른 메뉴) ───────────────────────────── */
.sfp-quick-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.sfp-quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: #fff;
  border: 1px solid #EEEEEE;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  text-decoration: none;
  color: var(--sfp-text);
  text-align: center;
  transition: all .15s;
  cursor: pointer;
  height: auto;
}
.sfp-quick-item:hover {
  background: var(--sfp-primary-lt);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
.sfp-quick-icon {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: none;
}
.sfp-quick-label {
  font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap;
  color: var(--sfp-text);
}

@media (max-width: 375px) {
  .sfp-quick-menu { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
  .sfp-quick-item { padding: 14px 8px; gap: 6px; }
  .sfp-quick-icon { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 10px; }
  .sfp-quick-label { font-size: .72rem; }
  .sfp-notice-slide { padding: 14px 36px; }
  .sfp-notice-slide-text strong { font-size: .82rem; }
  .sfp-notice-slider-btn { width: 26px; height: 26px; font-size: .72rem; }
  /* Campaign thumb smaller on mobile */
  .sfp-camp-thumb-wrap { height: 130px; }
}

/* ── Mypage Tab Menu ───────────────────────────────────── */
.sfp-mypage-tabs {
  display: flex; gap: 0; margin-bottom: 24px;
  border: 1px solid var(--sfp-border); border-radius: var(--sfp-radius-sm);
  overflow: hidden; background: var(--sfp-bg);
}
.sfp-mypage-tabs .sfp-filter-btn {
  flex: 1; border-radius: 0; border: none; text-align: center;
  padding: 12px 8px; font-size: .82rem;
  border-right: 1px solid var(--sfp-border);
}
.sfp-mypage-tabs .sfp-filter-btn:last-child { border-right: none; }
.sfp-mypage-tabs .sfp-filter-btn.active {
  background: var(--sfp-primary); color: #fff; font-weight: 700;
}

/* ── Mission Cards ─────────────────────────────────────── */
.sfp-mission-list { display: flex; flex-direction: column; gap: 12px; }
.sfp-mission-card {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); padding: 16px;
  transition: border-color .15s;
}
.sfp-mission-card-done {
  border-color: var(--sfp-success); border-left: 4px solid var(--sfp-success);
}
.sfp-mission-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.sfp-mission-title { font-size: .95rem; font-weight: 700; }
.sfp-mission-reward { font-weight: 700; color: var(--sfp-primary); }
.sfp-mission-reward-done { color: var(--sfp-success); }
.sfp-mission-tag {
  background: #FEF3C7; color: #92400E; font-size: .7rem;
  padding: 2px 6px; border-radius: 4px; margin-left: 6px;
}
.sfp-progress-bar {
  background: #F3F4F6; border-radius: 4px; height: 6px;
  overflow: hidden; margin-bottom: 4px;
}
.sfp-progress-fill {
  height: 100%; background: var(--sfp-primary);
  border-radius: 4px; transition: width .3s ease;
}
.sfp-mission-status {
  font-size: .78rem; color: var(--sfp-muted);
}
.sfp-mission-status-done { color: var(--sfp-success); }

/* ── Template grid responsive ──────────────────────────── */
@media (max-width: 768px) {
  .sfp-template-grid { grid-template-columns: repeat(2, 1fr); }
  .sfp-mypage-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--sfp-radius-sm);
  }
  .sfp-mypage-tabs::-webkit-scrollbar { display: none; }
  .sfp-mypage-tabs .sfp-filter-btn { flex: 0 0 auto; min-width: max-content; padding: 12px 14px; }
}
@media (max-width: 480px) {
  .sfp-template-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sfp-mypage-tabs .sfp-filter-btn { font-size: .75rem; padding: 10px 12px; }
  .sfp-camp-apply-area { padding: 16px; }
  .sfp-camp-apply-area .sfp-btn-lg { padding: 14px 24px; font-size: .92rem; width: 100%; }
}
@media (max-width: 375px) {
  .sfp-template-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sfp-template-grid .sfp-tpl-card { border-radius: 8px; }
  .sfp-mypage-tabs .sfp-filter-btn { font-size: .7rem; padding: 8px 10px; }
}

/* ============================================================
   Fullscreen Onboarding Tutorial
   ============================================================ */
/* ── Onboarding Tutorial (Improved) ─────────────────────── */
.sfp-onboarding-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.sfp-onboarding-overlay *, .sfp-onboarding-overlay *::before, .sfp-onboarding-overlay *::after {
  box-sizing: border-box; margin: 0;
}
.sfp-onboarding-modal {
  background: #fff; border-radius: 20px;
  max-width: 480px; width: 90%; padding: 0;
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
  overflow: hidden; position: relative;
}
.sfp-ob-progress { height: 3px; background: #f0f0f0; }
.sfp-ob-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--sfp-primary), #FF6B8A);
  transition: width .4s cubic-bezier(.4,0,.2,1); border-radius: 0 2px 2px 0;
}
.sfp-ob-step-counter {
  text-align: center; padding: 16px 0 0;
  font-size: .75rem; font-weight: 700; color: var(--sfp-muted);
  letter-spacing: 1px;
}
.sfp-ob-track { position: relative; overflow: hidden; }
.sfp-ob-slide {
  display: none; flex-direction: column; align-items: center;
  text-align: center; padding: 24px 32px 8px;
  animation: sfp-ob-fade-in .35s ease;
}
.sfp-ob-slide.active { display: flex; }
@keyframes sfp-ob-fade-in {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sfp-ob-icon {
  font-size: 5rem; margin-bottom: 16px;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.1));
  animation: sfp-ob-bounce .6s ease .1s both;
}
@keyframes sfp-ob-bounce {
  0%   { transform: scale(.6); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.sfp-ob-slide h2 {
  font-size: 1.35rem; font-weight: 800; margin: 0 0 10px;
  color: var(--sfp-text); letter-spacing: -.3px;
}
.sfp-ob-slide p {
  font-size: .9rem; color: var(--sfp-text-sub); line-height: 1.7;
  margin: 0; max-width: 360px;
}
.sfp-ob-footer { padding: 20px 32px 28px; }
.sfp-ob-dots {
  display: flex; gap: 8px; justify-content: center; margin: 0 0 20px;
}
.sfp-ob-dot {
  display: block; width: 10px !important; height: 10px !important;
  border-radius: 50% !important;
  background: #e0e0e0;
  border: none !important; outline: none !important; cursor: pointer;
  padding: 0 !important; margin: 0; min-width: 0; min-height: 0;
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; font-size: 0 !important; line-height: 0 !important;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.sfp-ob-dot:focus { outline: none !important; }
.sfp-ob-dot:hover { background: #bbb; transform: scale(1.2); }
.sfp-ob-dot.active {
  background: var(--sfp-primary); width: 28px !important; border-radius: 5px !important;
  box-shadow: 0 2px 8px rgba(232,0,61,.3);
}
.sfp-ob-actions {
  display: flex; gap: 10px; width: 100%;
}
.sfp-ob-actions .sfp-btn { flex: 1; }
.sfp-ob-skip {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: var(--sfp-muted);
  font-size: .8rem; cursor: pointer; font-family: var(--sfp-font);
  padding: 4px 8px; z-index: 1; transition: color .2s;
}
.sfp-ob-skip:hover { color: var(--sfp-text); }
@media (max-width: 480px) {
  .sfp-onboarding-overlay { padding: 0 0 64px; align-items: flex-end; }
  .sfp-onboarding-modal {
    border-radius: 20px 20px 0 0; width: 100%; max-width: 100%;
    max-height: calc(100vh - 64px); overflow-y: auto;
    display: flex; flex-direction: column;
  }
  .sfp-ob-slide { padding: 20px 20px 8px; flex: 1; overflow-y: auto; }
  .sfp-ob-slide h2 { font-size: 1.15rem; }
  .sfp-ob-slide p { font-size: .85rem; }
  .sfp-ob-icon { font-size: 3.5rem; margin-bottom: 12px; }
  .sfp-ob-footer {
    padding: 16px 20px 24px; flex-shrink: 0;
    position: sticky; bottom: 0; background: #fff;
    border-top: 1px solid #F3F4F6;
  }
  .sfp-ob-actions { flex-direction: column; }
  .sfp-ob-actions .sfp-btn { width: 100%; }
}

/* ── Campaign Toolbar (Search + Filter) ─────────────────── */
.sfp-campaign-toolbar { margin-bottom: 20px; }
.sfp-toolbar-row {
  display: flex; gap: 10px; align-items: center;
}
.sfp-toolbar-search {
  flex: 1; position: relative;
}
.sfp-toolbar-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: .9rem; pointer-events: none;
}
.sfp-toolbar-search .sfp-search-input {
  width: 100%; max-width: none; padding-left: 38px;
}
.sfp-toolbar-filter-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--sfp-radius-sm);
  border: 1.5px solid var(--sfp-border); background: var(--sfp-surface);
  font-size: .85rem; font-weight: 600; cursor: pointer;
  color: var(--sfp-text-sub); font-family: var(--sfp-font);
  transition: all .2s; white-space: nowrap;
}
.sfp-toolbar-filter-toggle:hover,
.sfp-toolbar-filter-toggle.active {
  border-color: var(--sfp-primary); color: var(--sfp-primary);
  background: var(--sfp-primary-lt);
}
.sfp-toolbar-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--sfp-primary); color: #fff;
  font-size: .7rem; font-weight: 700;
}
.sfp-filter-panel {
  margin-top: 12px; padding: 16px 20px;
  background: var(--sfp-surface); border: 1.5px solid var(--sfp-border);
  border-radius: var(--sfp-radius); box-shadow: 0 4px 20px rgba(0,0,0,.08);
  animation: sfp-filter-panel-in .2s ease;
}
@keyframes sfp-filter-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sfp-filter-group { margin-bottom: 14px; }
.sfp-filter-group:last-child { margin-bottom: 0; }
.sfp-filter-group-label {
  font-size: .75rem; font-weight: 700; color: var(--sfp-muted);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 8px;
}
.sfp-filter-group-options { display: flex; gap: 8px; flex-wrap: wrap; }
.sfp-filter-tags {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 10px;
}
.sfp-filter-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 20px;
  background: var(--sfp-primary-lt); color: var(--sfp-primary);
  font-size: .78rem; font-weight: 600; text-decoration: none;
  border: 1px solid rgba(232,0,61,.2);
  transition: all .2s;
}
.sfp-filter-tag:hover {
  background: var(--sfp-primary); color: #fff;
  border-color: var(--sfp-primary);
}
.sfp-filter-reset {
  font-size: .78rem; color: var(--sfp-muted); text-decoration: none;
  font-weight: 600; padding: 5px 8px;
  transition: color .2s;
}
.sfp-filter-reset:hover { color: var(--sfp-danger); }
@media (max-width: 480px) {
  .sfp-toolbar-row { gap: 8px; }
  .sfp-toolbar-filter-toggle { padding: 10px 14px; font-size: .8rem; }
  .sfp-filter-panel { padding: 14px 16px; }
  .sfp-filter-group-options { gap: 6px; }
}

/* ============================================================
   Campaign Card — Deadline & Status Enhancements
   ============================================================ */
/* 마감 임박 (D-3 이하) 빨간 테두리 */
.sfp-camp-card.sfp-camp-deadline {
  border-color: var(--sfp-danger);
  box-shadow: 0 0 0 1px var(--sfp-danger), var(--sfp-shadow);
}
.sfp-camp-card.sfp-camp-deadline:hover {
  border-color: var(--sfp-danger);
  box-shadow: 0 0 0 1px var(--sfp-danger), 0 12px 36px rgba(239,68,68,.15);
}

/* 모집완료 오버레이 */
.sfp-camp-card.sfp-camp-full {
  opacity: .65; filter: grayscale(.25);
}
.sfp-camp-card.sfp-camp-full:hover { opacity: .8; transform: none; }
.sfp-camp-full-overlay {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--sfp-radius);
  pointer-events: none;
}
.sfp-camp-full-label {
  background: rgba(255,255,255,.95); color: #374151;
  padding: 8px 20px; border-radius: 20px;
  font-size: .85rem; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* 신청완료 뱃지 */
.sfp-camp-applied-badge {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  background: var(--sfp-success); color: #fff;
  padding: 4px 12px; border-radius: 20px;
  font-size: .72rem; font-weight: 800;
  box-shadow: 0 2px 8px rgba(5,150,105,.35);
  display: flex; align-items: center; gap: 4px;
}

/* ============================================================
   Notification Center — Enhanced
   ============================================================ */
.sfp-notif-tabs {
  display: flex; gap: 6px; margin-bottom: 20px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.sfp-notif-tabs::-webkit-scrollbar { display: none; }
.sfp-notif-tab {
  padding: 8px 18px; border-radius: 20px;
  border: 1.5px solid var(--sfp-border); background: var(--sfp-surface);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  color: var(--sfp-text-sub); transition: all .2s;
  white-space: nowrap; flex-shrink: 0; font-family: var(--sfp-font);
}
.sfp-notif-tab:hover { border-color: var(--sfp-primary); color: var(--sfp-primary); }
.sfp-notif-tab.active {
  background: var(--sfp-primary); color: #fff;
  border-color: var(--sfp-primary); font-weight: 700;
}
.sfp-notif-tab .sfp-notif-tab-count {
  display: inline-block; background: rgba(255,255,255,.25);
  padding: 1px 6px; border-radius: 10px; font-size: .68rem;
  margin-left: 4px;
}
.sfp-notif-tab.active .sfp-notif-tab-count { background: rgba(255,255,255,.3); }

.sfp-notif-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.sfp-notif-toolbar-left { font-size: .85rem; color: var(--sfp-muted); }
.sfp-notif-toolbar-left strong { color: var(--sfp-text); }

/* ============================================================
   Dark Mode — System preference
   ============================================================ */
/* 다크모드 비활성화 — 라이트모드 강제 (v10.3) */
/* @media (prefers-color-scheme: dark) — disabled */
@media (prefers-color-scheme: dark) {
  :root {
    /* 라이트모드 값 그대로 유지 (다크모드 오버라이드 비활성) */
    --sfp-bg:          #F8F9FA;
    --sfp-surface:     #FFFFFF;
    --sfp-text:        #333333;
    --sfp-text-sub:    #666666;
    --sfp-muted:       #999999;
    --sfp-border:      #EEEEEE;
    --sfp-primary-lt:  #FFF0F3;
    --sfp-shadow:      0 2px 8px rgba(0,0,0,.08);
    --sfp-shadow-md:   0 4px 16px rgba(0,0,0,.10);
    --sfp-shadow-lg:   0 8px 30px rgba(0,0,0,.12);
  }
  body.sfp-page { background: #F8F9FA; }

  /* Nav & Footer — 라이트 유지 */
  .sfp-nav { background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
  .sfp-mobile-tab { background: #FFFFFF; box-shadow: 0 -2px 12px rgba(0,0,0,.06); }
  .sfp-footer { border-top-color: var(--sfp-border); }

  /* Cards */
  .sfp-camp-card { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-camp-card:hover { border-color: rgba(232,0,61,.4); box-shadow: 0 12px 36px rgba(0,0,0,.4); }
  .sfp-stat-card { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-stat-card strong { color: var(--sfp-text); }
  .sfp-template-card { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-camp-detail { background: var(--sfp-surface); border-color: var(--sfp-border); }

  /* Forms */
  .sfp-form-group input,
  .sfp-form-group select,
  .sfp-form-group textarea {
    background: #F8F9FA; border-color: var(--sfp-border); color: var(--sfp-text);
  }
  .sfp-form-card { background: var(--sfp-surface); border-color: var(--sfp-border); }

  /* Modal */
  .sfp-modal { background: rgba(0,0,0,.65); }
  .sfp-modal-inner { background: var(--sfp-surface); }

  /* Login */
  .sfp-login-box { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-google-btn { background: #F8F9FA; border-color: var(--sfp-border); color: var(--sfp-text); }
  .sfp-google-btn:hover { border-color: #4285F4; }

  /* Notification dropdown */
  .sfp-notif-dropdown { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-notif-dd-item.sfp-notif-unread { background: rgba(232,0,61,.12); }
  .sfp-notif-dd-item:hover { background: rgba(255,255,255,.04); }

  /* Tables */
  .sfp-table th { background: #F8F9FA; }
  .sfp-post-table thead th { background: #F8F9FA; }

  /* Misc dark overrides */
  .sfp-info-grid { background: #F8F9FA; }
  .sfp-guide-box { background: #F8F9FA; border-color: var(--sfp-border); }
  .sfp-onboarding { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-level-card { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-empty { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-alert-warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
  .sfp-alert-success { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
  .sfp-alert-error { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
  .sfp-alert-info { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; }
  .sfp-community-sidebar { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-community-main { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-post-card { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-post-card:hover { background: #F8F9FA; }
  .sfp-post-row:hover { background: #F8F9FA; }
  .sfp-filter-btn { background: var(--sfp-surface); border-color: var(--sfp-border); color: var(--sfp-text-sub); }
  .sfp-filter-btn:hover { background: var(--sfp-primary-lt); }
  .sfp-upload-card { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-upload-card-active { background: #F0F1F3; }
  .sfp-settle-card { background: var(--sfp-surface); }
  .sfp-pts-content { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-withdraw-item { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-notice-bar { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.2); }
  .sfp-notice-bar strong { color: #92400E; }
  .sfp-notice-bar p { color: #A16207; }
  .sfp-quick-item { background: var(--sfp-surface); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
  .sfp-quick-icon { background: #F8F9FA; }
  .sfp-mission-card { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-progress-bar { background: #EEEEEE; }
  .sfp-skeleton { background: linear-gradient(90deg, #FFFFFF 25%, #EEEEEE 50%, #FFFFFF 75%); background-size: 200% 100%; }
  .sfp-skeleton-card { background: var(--sfp-surface); border-color: var(--sfp-border); }

  /* Onboarding & Notification dark */
  .sfp-onboarding-overlay { background: rgba(0,0,0,.7); }
  .sfp-onboarding-modal { background: var(--sfp-surface); color: var(--sfp-text); }
  .sfp-ob-dot { background: #DDDDDD; }
  .sfp-ob-dot.active { background: var(--sfp-primary); }
  .sfp-ob-progress { background: #EEEEEE; }
  .sfp-ob-step-counter { color: var(--sfp-muted); }
  /* Campaign toolbar dark */
  .sfp-toolbar-filter-toggle { background: var(--sfp-surface); border-color: var(--sfp-border); color: var(--sfp-text-sub); }
  .sfp-filter-panel { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-filter-tag { background: rgba(232,0,61,.15); border-color: rgba(232,0,61,.3); }
  .sfp-swipe-dot { background: #DDDDDD; }
  .sfp-swipe-dot.active { background: var(--sfp-primary); }
  .sfp-notif-tab { background: var(--sfp-surface); border-color: var(--sfp-border); color: var(--sfp-text-sub); }
  .sfp-camp-full-label { background: rgba(255,255,255,.92); color: #333333; }
  .sfp-search-input { background: #F8F9FA; border-color: var(--sfp-border); color: var(--sfp-text); }
  .sfp-tag-btn { background: var(--sfp-surface); border-color: var(--sfp-border); color: var(--sfp-text-sub); }
  .sfp-editor-toolbar { background: #F8F9FA; border-color: var(--sfp-border); }
  .sfp-editor-btn { background: var(--sfp-surface); border-color: var(--sfp-border); color: var(--sfp-text-sub); }
  .sfp-popular-rank { background: var(--sfp-border); }

  /* Landing page dark */
  .sfp-landing-stats { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-landing-feature { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-landing-camp-card { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-landing-tpl-card { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-landing-section-alt { background: #F8F9FA; }

  /* Points hero keep gradient but darken */
  .sfp-points-hero { background: linear-gradient(135deg, var(--sfp-surface) 0%, rgba(232,0,61,.12) 100%); }
  .sfp-settle-hero { background: linear-gradient(135deg, var(--sfp-surface) 0%, rgba(16,185,129,.1) 100%); border-color: rgba(16,185,129,.2); }
  .sfp-mypage-points-hero { background: linear-gradient(135deg, var(--sfp-surface) 0%, rgba(232,0,61,.12) 100%); border-color: var(--sfp-border); }

  /* Video provision */
  .sfp-video-provision { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.2); }
  .sfp-video-provision-icon { background: rgba(59,130,246,.15); }

  /* Advertiser */
  .sfp-adv-campaign-row { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-adv-campaign-row:hover { border-color: rgba(14,165,233,.4); }
  .sfp-adv-form input,
  .sfp-adv-form select { background: #F8F9FA; border-color: var(--sfp-border); color: var(--sfp-text); }
  .sfp-adv-hero { box-shadow: 0 4px 20px rgba(14,165,233,.2); }
  .sfp-adv-icon { background: linear-gradient(135deg, #0369A1, #0EA5E9) !important; }
  .sfp-adv-tab.active { background: #0EA5E9; }
  .sfp-adv-tab:hover:not(.active) { background: rgba(14,165,233,.15); color: #38BDF8; }
  .sfp-404-circle { border-color: var(--sfp-primary); background: rgba(232,0,61,.15); }

  /* Report */
  .sfp-report { background: #F8F9FA; color: var(--sfp-text); }
  .sfp-report-campaign { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-report-stat { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-report-table thead th { background: #F8F9FA; }
  .sfp-report-table tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
  .sfp-report-table tbody tr:hover { background: rgba(232,0,61,.08); }
  .sfp-report-kpi { background: #F8F9FA; }
  .sfp-report-memo { background: #F8F9FA; border-left-color: var(--sfp-border); }
}

/* ============================================================
   Card Stagger Fade-in Animation
   ============================================================ */
@keyframes sfp-fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sfp-card-grid .sfp-camp-card,
.sfp-stat-row .sfp-stat-card,
.sfp-landing-features .sfp-landing-feature,
.sfp-landing-camps .sfp-landing-camp-card,
.sfp-template-grid .sfp-template-card,
.sfp-mission-list .sfp-mission-card {
  opacity: 0;
  animation: sfp-fade-in-up .5s ease forwards;
}
.sfp-card-grid > :nth-child(1),
.sfp-stat-row > :nth-child(1),
.sfp-landing-features > :nth-child(1),
.sfp-landing-camps > :nth-child(1),
.sfp-template-grid > :nth-child(1),
.sfp-mission-list > :nth-child(1) { animation-delay: 0s; }

.sfp-card-grid > :nth-child(2),
.sfp-stat-row > :nth-child(2),
.sfp-landing-features > :nth-child(2),
.sfp-landing-camps > :nth-child(2),
.sfp-template-grid > :nth-child(2),
.sfp-mission-list > :nth-child(2) { animation-delay: .08s; }

.sfp-card-grid > :nth-child(3),
.sfp-stat-row > :nth-child(3),
.sfp-landing-features > :nth-child(3),
.sfp-landing-camps > :nth-child(3),
.sfp-template-grid > :nth-child(3),
.sfp-mission-list > :nth-child(3) { animation-delay: .16s; }

.sfp-card-grid > :nth-child(4),
.sfp-stat-row > :nth-child(4),
.sfp-template-grid > :nth-child(4),
.sfp-mission-list > :nth-child(4) { animation-delay: .24s; }

.sfp-card-grid > :nth-child(5),
.sfp-template-grid > :nth-child(5),
.sfp-mission-list > :nth-child(5) { animation-delay: .32s; }

.sfp-card-grid > :nth-child(6),
.sfp-template-grid > :nth-child(6),
.sfp-mission-list > :nth-child(6) { animation-delay: .4s; }

.sfp-card-grid > :nth-child(n+7),
.sfp-template-grid > :nth-child(n+7),
.sfp-mission-list > :nth-child(n+7) { animation-delay: .48s; }

/* Reduced motion: skip animations */
@media (prefers-reduced-motion: reduce) {
  .sfp-card-grid .sfp-camp-card,
  .sfp-stat-row .sfp-stat-card,
  .sfp-landing-features .sfp-landing-feature,
  .sfp-landing-camps .sfp-landing-camp-card,
  .sfp-template-grid .sfp-template-card,
  .sfp-mission-list .sfp-mission-card {
    opacity: 1; animation: none;
  }
}

/* ============================================================
   Progress Bar Fill Animation
   ============================================================ */
@keyframes sfp-progress-grow {
  from { width: 0; }
}
.sfp-progress-fill {
  animation: sfp-progress-grow .8s ease-out;
}
.sfp-report-progress-fill {
  animation: sfp-progress-grow .8s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .sfp-progress-fill,
  .sfp-report-progress-fill { animation: none; }
}

/* ============================================================
   Mobile Campaign Card Swipe
   ============================================================ */
.sfp-swipe-dots {
  display: none; justify-content: center; gap: 6px;
  padding: 12px 0 4px;
}
.sfp-swipe-dot {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: #ddd; border: none; outline: none; cursor: pointer;
  padding: 0; margin: 0; min-width: 0; min-height: 0;
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; font-size: 0; line-height: 0;
  transition: all .25s ease;
}
.sfp-swipe-dot:hover { background: #bbb; }
.sfp-swipe-dot.active {
  background: var(--sfp-primary); width: 22px; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(232,0,61,.25);
}
@media (max-width: 480px) {
  .sfp-card-grid.sfp-swipe-enabled {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 14px;
    padding-bottom: 4px; scrollbar-width: none;
  }
  .sfp-card-grid.sfp-swipe-enabled::-webkit-scrollbar { display: none; }
  .sfp-card-grid.sfp-swipe-enabled > .sfp-camp-card {
    flex: 0 0 85%; scroll-snap-align: center; min-width: 0;
    opacity: 1; animation: none;
  }
  .sfp-card-grid.sfp-swipe-enabled > .sfp-camp-card:first-child {
    flex: 0 0 92%;
  }
  .sfp-swipe-dots { display: flex; }
}

/* B178: 캠페인 목록(#sfp-camp-grid)은 페이지네이션(B170) 방식이므로 스와이프 도트 숨김 */
#sfp-swipe-dots,
#sfp-camp-grid ~ .sfp-swipe-dots,
.sfp-campaigns-wrap .sfp-swipe-dots {
  display: none !important;
}
@media (max-width: 768px) {
  #sfp-swipe-dots,
  #sfp-camp-grid ~ .sfp-swipe-dots,
  .sfp-campaigns-wrap .sfp-swipe-dots {
    display: none !important;
  }
}

/* ============================================================
   Breadcrumb Navigation
   ============================================================ */
.sfp-breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .82rem; color: var(--sfp-muted); margin-bottom: 12px;
  padding: 8px 0;
}
.sfp-breadcrumb a {
  color: var(--sfp-text-sub); text-decoration: none; font-weight: 500;
  transition: color .15s;
}
.sfp-breadcrumb a:hover { color: var(--sfp-primary); }
.sfp-breadcrumb-sep { color: var(--sfp-border); font-size: .9rem; }
.sfp-breadcrumb-current {
  color: var(--sfp-text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}

/* ============================================================
   Community Sidebar — Popular Posts & Tags
   ============================================================ */
.sfp-sidebar-section {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--sfp-border);
}
.sfp-sidebar-title {
  font-size: .85rem; font-weight: 700; margin: 0 0 12px;
  color: var(--sfp-text);
}
.sfp-popular-list {
  list-style: none; margin: 0; padding: 0;
  counter-reset: none;
}
.sfp-popular-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; cursor: pointer; transition: color .15s;
  border-bottom: 1px solid var(--sfp-border);
  font-size: .82rem;
}
.sfp-popular-item:last-child { border-bottom: none; }
.sfp-popular-item:hover { color: var(--sfp-primary); }
.sfp-popular-rank {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sfp-bg); display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; color: var(--sfp-muted); flex-shrink: 0;
}
.sfp-popular-item:nth-child(-n+3) .sfp-popular-rank {
  background: var(--sfp-primary); color: #fff;
}
.sfp-popular-title {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.sfp-popular-views {
  font-size: .72rem; color: var(--sfp-muted); flex-shrink: 0;
}

/* Tag cloud */
.sfp-tag-cloud {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sfp-tag-btn {
  padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--sfp-border); background: var(--sfp-surface);
  font-size: .75rem; font-weight: 600; color: var(--sfp-text-sub);
  cursor: pointer; transition: all .15s; font-family: var(--sfp-font);
}
.sfp-tag-btn:hover { border-color: var(--sfp-primary); color: var(--sfp-primary); }
.sfp-tag-btn.active {
  background: var(--sfp-primary); color: #fff;
  border-color: var(--sfp-primary);
}

/* ============================================================
   Editor Toolbar (Community Write)
   ============================================================ */
.sfp-editor-toolbar {
  display: flex; gap: 4px; padding: 6px 8px;
  background: var(--sfp-bg); border: 1.5px solid var(--sfp-border);
  border-bottom: none; border-radius: var(--sfp-radius-sm) var(--sfp-radius-sm) 0 0;
}
.sfp-editor-btn {
  width: 32px; height: 32px; border: 1px solid var(--sfp-border);
  border-radius: 6px; background: var(--sfp-surface);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: var(--sfp-text-sub); transition: all .15s;
  font-family: var(--sfp-font);
}
.sfp-editor-btn:hover { border-color: var(--sfp-primary); color: var(--sfp-primary); background: var(--sfp-primary-lt); }
.sfp-editor-toolbar + textarea {
  border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
}

/* ============================================================
   Accessibility
   ============================================================ */
/* Screen reader only */
.sfp-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Focus visible — keyboard navigation */
.sfp-btn:focus-visible,
.sfp-filter-btn:focus-visible,
.sfp-nav-links a:focus-visible,
.sfp-tab-item:focus-visible,
.sfp-camp-card:focus-visible,
.sfp-notif-tab:focus-visible,
.sfp-board-link:focus-visible,
.sfp-fav-btn:focus-visible,
.sfp-tag-btn:focus-visible {
  outline: 2px solid var(--sfp-primary);
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--sfp-primary);
  box-shadow: 0 0 0 3px rgba(232,0,61,.12);
  outline: none;
}

/* Skip to content (hidden, visible on focus) */
.sfp-skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--sfp-primary); color: #fff;
  padding: 10px 20px; z-index: 100000;
  font-size: .88rem; font-weight: 700;
  text-decoration: none; border-radius: 0 0 8px 0;
}
.sfp-skip-link:focus { top: 0; }

/* ============================================================
   Search Input (Campaign List)
   ============================================================ */
.sfp-search-input {
  width: 100%; max-width: 400px; padding: 10px 14px;
  border: 1.5px solid var(--sfp-border); border-radius: var(--sfp-radius-sm);
  font-family: var(--sfp-font); font-size: .88rem;
  color: var(--sfp-text); background: var(--sfp-surface);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.sfp-search-input:focus {
  border-color: var(--sfp-primary);
  box-shadow: 0 0 0 3px rgba(232,0,61,.12);
}

/* ============================================================
   404 Error Page
   ============================================================ */
.sfp-404-page {
  text-align: center; padding: 80px 24px;
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.sfp-404-visual {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 24px;
}
.sfp-404-num {
  font-size: 6rem; font-weight: 900; color: var(--sfp-primary);
  line-height: 1; letter-spacing: -3px;
  opacity: .85;
}
.sfp-404-circle {
  width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sfp-primary-lt), rgba(232,0,61,.15));
  border: 3px solid var(--sfp-primary);
  display: flex; align-items: center; justify-content: center;
  animation: sfp-404-pulse 2s ease-in-out infinite;
}
@keyframes sfp-404-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(232,0,61,.1); }
}
.sfp-404-emoji { font-size: 2.5rem; }
.sfp-404-title {
  font-size: 1.6rem; font-weight: 900; color: var(--sfp-text);
  margin: 0 0 10px; letter-spacing: -.5px;
}
.sfp-404-desc {
  font-size: .92rem; color: var(--sfp-text-sub);
  margin: 0 0 32px; max-width: 400px; line-height: 1.65;
}
.sfp-404-actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 20px;
}
.sfp-404-back {
  display: inline-block; font-size: .82rem; color: var(--sfp-muted);
  text-decoration: none; font-weight: 500; transition: color .2s;
}
.sfp-404-back:hover { color: var(--sfp-primary); }
@media (max-width: 480px) {
  .sfp-404-page { padding: 48px 16px; }
  .sfp-404-num { font-size: 4rem; }
  .sfp-404-circle { width: 65px; height: 65px; }
  .sfp-404-emoji { font-size: 1.8rem; }
  .sfp-404-title { font-size: 1.2rem; }
  .sfp-404-actions { flex-direction: column; width: 100%; max-width: 280px; }
  .sfp-404-actions .sfp-btn { width: 100%; }
}

/* ============================================================
   Consistency Fixes — Section Spacing
   ============================================================ */
.sfp-camp-section { margin-bottom: 24px; }

/* ============================================================
   Dashboard Widgets
   ============================================================ */
.sfp-dashboard-widgets {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 28px;
}
.sfp-dash-widget {
  background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  border-radius: var(--sfp-radius); padding: 16px 14px;
  display: flex; align-items: center; gap: 12px;
  transition: all .2s ease;
}
.sfp-dash-widget:hover {
  transform: translateY(-2px); box-shadow: var(--sfp-shadow-md);
}
.sfp-dash-widget-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.sfp-dash-widget-earning .sfp-dash-widget-icon { background: #FFF3ED; }
.sfp-dash-widget-deadline .sfp-dash-widget-icon { background: #FEF3C7; }
.sfp-dash-widget-mission .sfp-dash-widget-icon { background: #FFE0E6; }
.sfp-dash-widget-community .sfp-dash-widget-icon { background: #DBEAFE; }
.sfp-dash-widget-body { flex: 1; min-width: 0; }
.sfp-dash-widget-body small {
  display: block; font-size: .72rem; color: var(--sfp-muted);
  font-weight: 500; margin-bottom: 2px;
}
.sfp-dash-widget-body strong {
  display: block; font-size: 1.1rem; font-weight: 800; color: var(--sfp-text);
  line-height: 1.2;
}
.sfp-dash-widget-earning .sfp-dash-widget-body strong { color: var(--sfp-accent); }
.sfp-dash-widget-deadline .sfp-dash-widget-body strong { color: var(--sfp-danger); }
.sfp-dash-widget-sub {
  display: block; font-size: .7rem; color: var(--sfp-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 768px) {
  .sfp-dashboard-widgets { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
  .sfp-dashboard-widgets { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sfp-dash-widget { padding: 12px 10px; gap: 8px; }
  .sfp-dash-widget-icon { width: 34px; height: 34px; font-size: 1rem; }
  .sfp-dash-widget-body strong { font-size: .95rem; }
}
@media (prefers-color-scheme: dark) {
  .sfp-dash-widget { background: var(--sfp-surface); border-color: var(--sfp-border); }
  .sfp-dash-widget-earning .sfp-dash-widget-icon { background: rgba(255,107,53,.12); }
  .sfp-dash-widget-deadline .sfp-dash-widget-icon { background: rgba(245,158,11,.12); }
  .sfp-dash-widget-mission .sfp-dash-widget-icon { background: rgba(232,0,61,.12); }
  .sfp-dash-widget-community .sfp-dash-widget-icon { background: rgba(59,130,246,.12); }
}

/* ============================================================
   Level-Up Celebration Popup
   ============================================================ */
.sfp-levelup-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.sfp-levelup-modal {
  background: #fff; border-radius: 20px; padding: 40px 32px;
  max-width: 400px; width: 90%; text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
  position: relative; z-index: 2;
  animation: sfp-levelup-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sfp-levelup-in {
  from { opacity: 0; transform: scale(.6) translateY(40px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.sfp-levelup-badge {
  font-size: 3rem; margin-bottom: 12px;
  animation: sfp-ob-bounce .6s ease .2s both;
}
.sfp-levelup-badge .sfp-level-badge { font-size: 2rem; }
.sfp-levelup-modal h2 {
  font-size: 1.8rem; font-weight: 900; margin: 0 0 8px;
  background: linear-gradient(135deg, var(--sfp-primary), #FF4D6A);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sfp-levelup-msg {
  font-size: .95rem; color: var(--sfp-text-sub); margin: 0 0 6px; line-height: 1.6;
}
.sfp-levelup-sub {
  font-size: .85rem; color: var(--sfp-primary); font-weight: 700;
  margin: 0 0 24px;
}

/* Confetti */
.sfp-levelup-confetti {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1; overflow: hidden;
}
.sfp-confetti-piece {
  position: absolute; top: -10px;
  width: 8px; height: 14px; border-radius: 2px;
  animation: sfp-confetti-fall 3s ease-in forwards;
}
@keyframes sfp-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@media (prefers-color-scheme: dark) {
  .sfp-levelup-modal { background: var(--sfp-surface); }
  .sfp-points-summary { border-color: var(--sfp-border); }
  .sfp-points-summary-item { border-color: var(--sfp-border); }
  .sfp-points-summary-item strong { color: var(--sfp-text); }
}
@media (max-width: 480px) {
  .sfp-levelup-modal { padding: 32px 24px; border-radius: 20px 20px 0 0; }
  .sfp-levelup-overlay { align-items: flex-end; padding: 0; }
  .sfp-levelup-badge { font-size: 2.5rem; }
  .sfp-levelup-modal h2 { font-size: 1.4rem; }
  .sfp-points-summary { flex-direction: row; }
  .sfp-points-summary-item { padding: 10px 6px; }
  .sfp-points-summary-item strong { font-size: .82rem; }
}

/* ── 채널 인증 뱃지 ─────────────────────────────── */
.sfp-verified-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .7rem; font-weight: 700; color: #059669;
  background: #ECFDF5; border: 1px solid #A7F3D0;
  padding: 2px 8px; border-radius: 20px;
  white-space: nowrap;
}
.sfp-verified-badge-sm { font-size: .65rem; padding: 1px 5px; }
.sfp-verified-inline { font-size: .75em; vertical-align: middle; }

/* ── 포트폴리오 그리드 ──────────────────────────── */
.sfp-portfolio-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.sfp-portfolio-item {
  position: relative; display: block; border-radius: var(--sfp-radius-sm);
  overflow: hidden; background: var(--sfp-surface); border: 1px solid var(--sfp-border);
  aspect-ratio: 16/9; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.sfp-portfolio-item:hover {
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.sfp-portfolio-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sfp-portfolio-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--sfp-muted); background: var(--sfp-hover);
}
.sfp-portfolio-title {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 8px; font-size: .72rem; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .sfp-portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sfp-portfolio-title { font-size: .65rem; padding: 4px 6px; }
}

/* ── 초대 알림 ─────────────────────────────────────────── */
.sfp-notif-invite {
  background: linear-gradient(135deg, #FFF5F7, #FFE0E6) !important;
  border: 1.5px solid #C4B5FD !important;
  border-radius: var(--sfp-radius) !important;
  cursor: default;
  text-decoration: none; display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; margin-bottom: 8px;
  transition: box-shadow .2s;
}
.sfp-notif-invite:hover { box-shadow: 0 2px 12px rgba(124,47,242,.12); }
.sfp-notif-invite .sfp-notif-icon { font-size: 1.4rem; }
.sfp-notif-invite .sfp-notif-body strong { color: #6D28D9; }
.sfp-invite-actions {
  display: flex; gap: 8px; margin-top: 10px;
}
.sfp-invite-actions .sfp-btn { min-width: 64px; font-weight: 700; }
.sfp-invite-result {
  margin-top: 8px; font-size: .82rem; font-weight: 700; color: var(--sfp-muted);
}

/* ── 스크롤 탑 버튼 ───────────────────────────────────── */
.sfp-scroll-top {
  position: fixed; bottom: 80px; right: 20px; z-index: 900;
  width: 36px; height: 36px; border-radius: 8px;
  background: #333333; color: #fff;
  border: none; font-size: 1rem; font-weight: 900;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15);
  opacity: 0; transform: translateY(20px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.sfp-scroll-top-show {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.sfp-scroll-top:hover { background: #222; transform: translateY(-2px); }
.sfp-scroll-top:active { transform: scale(.92); }

/* Astra/WP 기본 스크롤탑 숨김 */
#scroll-to-top, .ast-scroll-top, [class*="ast-scroll-top"] { display: none !important; }
@media (max-width: 480px) {
  .sfp-scroll-top { bottom: 72px; right: 12px; width: 40px; height: 40px; font-size: 1rem; }
}

/* ── 부드러운 스크롤 ──────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── 휴면 경고 배너 ───────────────────────────────────── */
.sfp-dormant-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; margin-bottom: 20px;
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 1.5px solid #FBBF24; border-radius: var(--sfp-radius);
}
.sfp-dormant-banner-icon { font-size: 1.6rem; flex-shrink: 0; }
.sfp-dormant-banner-body { flex: 1; }
.sfp-dormant-banner-body strong { font-size: .92rem; color: #92400E; display: block; }
.sfp-dormant-banner-body p { font-size: .8rem; color: #A16207; margin: 2px 0 0; }

/* ── 포인트 만료 배너 ─────────────────────────────────── */
.sfp-expiry-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; margin-bottom: 20px;
  background: linear-gradient(135deg, #FEF2F2, #FECACA);
  border: 1.5px solid #F87171; border-radius: var(--sfp-radius);
}
.sfp-expiry-banner-icon { font-size: 1.6rem; flex-shrink: 0; }
.sfp-expiry-banner-body { flex: 1; }
.sfp-expiry-banner-body strong { font-size: .92rem; color: #991B1B; display: block; }
.sfp-expiry-banner-body p { font-size: .8rem; color: #DC2626; margin: 2px 0 0; }
@media (max-width: 480px) {
  .sfp-dormant-banner, .sfp-expiry-banner { flex-wrap: wrap; }
  .sfp-dormant-banner .sfp-btn, .sfp-expiry-banner .sfp-btn { width: 100%; text-align: center; }
}

/* ── 템플릿 전략 레시피 개선 ──────────────────────── */
.sfp-tpl-recipe-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.sfp-tpl-recipe-icon { font-size: 1.1rem; }
.sfp-tpl-recipe-comment { background: #F0FDF4; border-left: 3px solid #22C55E; }
.sfp-tpl-recipe-cta { background: #EFF6FF; border-left: 3px solid #3B82F6; }
.sfp-tpl-recipe .sfp-copy-btn {
  margin-top: 8px; font-size: .72rem; padding: 4px 10px;
}

/* ── 에셋 타입 뱃지 ──────────────────────────────── */
.sfp-tpl-asset-type-badge {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: .68rem; font-weight: 700; background: #F3F4F6; color: #6B7280;
}
.sfp-tpl-asset-font .sfp-tpl-asset-type-badge { background: #FFE0E6; color: #E8003D; }
.sfp-tpl-asset-bgm .sfp-tpl-asset-type-badge { background: #FEF3C7; color: #D97706; }
.sfp-tpl-asset-sfx .sfp-tpl-asset-type-badge { background: #DBEAFE; color: #2563EB; }

/* ── 내 보관함 개선 ──────────────────────────────── */
.sfp-mytpl-toolbar {
  display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap;
}
.sfp-mytpl-filters {
  display: flex; gap: 6px; flex: 1; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.sfp-mytpl-search { max-width: 200px; }
.sfp-mytpl-badges { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.sfp-mytpl-badge {
  display: inline-block; font-size: .68rem; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
}
.sfp-mytpl-badge-comment { background: #F0FDF4; color: #16A34A; }
.sfp-mytpl-badge-asset { background: #FFE0E6; color: #E8003D; }
@media (max-width: 480px) {
  .sfp-mytpl-toolbar { flex-direction: column; }
  .sfp-mytpl-search { max-width: 100%; width: 100%; }
}

/* ── 오버레이 가이드 비주얼 미리보기 ─────────────── */
.sfp-ov-preview {
  position: relative; width: 100%; aspect-ratio: 9/16; max-width: 180px;
  background: linear-gradient(135deg, #1F2937, #374151);
  border-radius: var(--sfp-radius-sm); margin: 0 auto 14px;
  overflow: hidden;
}
.sfp-ov-dot {
  position: absolute; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  z-index: 1;
}
.sfp-ov-dot-icon { font-size: 1rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.sfp-ov-dot-num {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--sfp-primary); color: #fff;
  font-size: .6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.sfp-tpl-recipe-overlay { background: #F8FAFC; border-left: 3px solid #E8003D; }
.sfp-tpl-overlay-table code {
  background: #F3F4F6; padding: 1px 5px; border-radius: 3px;
  font-size: .78rem; font-weight: 600; color: #1F2937;
}

/* ── Q&A 개선 ────────────────────────────────────── */
.sfp-tpl-qna-summary {
  font-size: .82rem; color: var(--sfp-muted); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--sfp-border);
}
.sfp-tpl-qna-item {
  padding: 12px 0; border-bottom: 1px solid var(--sfp-border);
}
.sfp-tpl-qna-item:last-child { border-bottom: none; }
.sfp-tpl-qna-q, .sfp-tpl-qna-a {
  display: flex; gap: 10px; align-items: flex-start;
}
.sfp-tpl-qna-a { margin-top: 8px; padding-left: 4px; }
.sfp-tpl-qna-badge-q, .sfp-tpl-qna-badge-a {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 900; color: #fff;
}
.sfp-tpl-qna-badge-q { background: var(--sfp-primary); }
.sfp-tpl-qna-badge-a { background: #059669; }
.sfp-tpl-qna-content { flex: 1; min-width: 0; }
.sfp-tpl-qna-content p { margin: 0; font-size: .85rem; line-height: 1.5; }
.sfp-tpl-qna-meta { font-size: .72rem; color: var(--sfp-muted); margin-top: 4px; display: block; }
.sfp-tpl-qna-answered { background: #F0FDF4; border-radius: var(--sfp-radius-sm); padding: 12px; margin: 0 -12px; }
.sfp-tpl-qna-empty {
  text-align: center; padding: 20px; color: var(--sfp-muted); font-size: .85rem;
}
.sfp-tpl-qna-form { margin-top: 14px; }
.sfp-tpl-qna-form textarea {
  width: 100%; border: 1.5px solid var(--sfp-border); border-radius: var(--sfp-radius-sm);
  padding: 10px 12px; font-size: .85rem; resize: vertical; min-height: 56px;
  transition: border-color .15s;
}
.sfp-tpl-qna-form textarea:focus { border-color: var(--sfp-primary); outline: none; }
.sfp-tpl-qna-form-footer {
  display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
}
.sfp-tpl-qna-charcount { font-size: .72rem; color: var(--sfp-muted); }
.sfp-tpl-qna-login {
  text-align: center; padding: 14px; font-size: .85rem; color: var(--sfp-muted);
  background: var(--sfp-hover); border-radius: var(--sfp-radius-sm); margin-top: 12px;
}
.sfp-tpl-qna-login a { color: var(--sfp-primary); font-weight: 600; }

/* ============================================================
   디자인 3-6단계: 캠페인상세 + 푸터 + 배너 + 폰트 (v10.3)
   ============================================================ */

/* ── 폰트 통일 ──────────────────���─────────────────────── */
.sfp-wrap, .sfp-nav, .sfp-mobile-tab, .sfp-footer { font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif; }
.sfp-wrap h1 { font-weight: 700; }
.sfp-wrap h2, .sfp-wrap h3 { font-weight: 700; }
.sfp-wrap p, .sfp-wrap li, .sfp-wrap span { font-weight: 400; }
.sfp-wrap small, .sfp-wrap .sfp-muted { font-weight: 300; }

/* ── 캠페인 상세 2컬럼 레이아웃 ───────────────────────── */
.sfp-detail-layout {
  display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start;
}
.sfp-detail-main { min-width: 0; }
.sfp-detail-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 12px; color: #333; line-height: 1.4; }
.sfp-detail-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.sfp-detail-hero-img { width: 100%; border-radius: 12px; margin-bottom: 20px; }

/* 아코디언 */
.sfp-accordion-item {
  border: 1px solid #EEEEEE; border-radius: 10px; margin-bottom: 10px;
  background: #FFFFFF; overflow: hidden;
}
.sfp-accordion-item summary {
  padding: 14px 18px; font-size: .92rem; font-weight: 700; cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: 8px;
  color: #333333; user-select: none;
}
.sfp-accordion-item summary::-webkit-details-marker { display: none; }
.sfp-accordion-item summary::after { content: '▸'; margin-left: auto; transition: transform .2s; color: #999; }
.sfp-accordion-item[open] summary::after { transform: rotate(90deg); }
.sfp-accordion-body { padding: 0 18px 16px; font-size: .88rem; line-height: 1.7; color: #555; }
.sfp-accordion-body h1,
.sfp-accordion-body h2,
.sfp-accordion-body h3,
.sfp-accordion-body h4 { font-weight:700; margin:12px 0 6px; line-height:1.4; }
.sfp-accordion-body p { line-height:1.75; margin:6px 0; }
.sfp-accordion-body ul,
.sfp-accordion-body ol { padding-left:20px; margin:6px 0; }
.sfp-accordion-body li { line-height:1.7; margin:2px 0; }
.sfp-accordion-body img { max-width:100%; border-radius:8px; }
.sfp-accordion-body a { color:var(--sfp-primary); text-decoration:underline; }
.sfp-accordion-body strong { font-weight:700; }
.sfp-accordion-body em { font-style:italic; }
.sfp-accordion-body table { width:100%; border-collapse:collapse; margin:8px 0; }
.sfp-accordion-body td,
.sfp-accordion-body th { border:1px solid #E5E7EB; padding:6px 10px; font-size:.85rem; }

/* 사이드바 */
.sfp-detail-sidebar { position: sticky; top: 80px; }
.sfp-detail-sidebar-inner {
  background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 12px;
  padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sfp-sidebar-price {
  font-size: 1.3rem; font-weight: 800; color: #E8003D; margin-bottom: 14px;
}
.sfp-sidebar-plats { display: flex; gap: 6px; margin-bottom: 14px; }
.sfp-sidebar-info { border-top: 1px solid #F3F4F6; padding-top: 12px; margin-bottom: 14px; }
.sfp-sidebar-info-row {
  display: flex; justify-content: space-between; font-size: .82rem;
  padding: 6px 0; color: #666;
}
.sfp-sidebar-info-row strong { color: #333; font-weight: 600; }
.sfp-sidebar-nav {
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid #F3F4F6; padding-top: 12px; margin-bottom: 14px;
}
.sfp-sidebar-nav a {
  font-size: .82rem; color: #666; text-decoration: none; padding: 8px 12px;
  border-radius: 6px; transition: background .15s;
  display: flex; justify-content: space-between; align-items: center;
}
.sfp-sidebar-nav a::after { content: '›'; color: #CCC; font-size: 1rem; }
.sfp-sidebar-nav a:hover { background: #FFF0F3; color: #E8003D; }
.sfp-sidebar-nav a:hover::after { color: #E8003D; }
@media (max-width: 860px) {
  .sfp-detail-layout { grid-template-columns: 1fr; }
  .sfp-detail-sidebar { position: static; }
}
@media (max-width: 640px) {
  .sfp-card-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── 푸터 리디자인 ────────────────────────────────────── */
.sfp-footer {
  background: #F8F9FA; border-top: 1px solid #EEEEEE;
  padding: 32px 20px 24px; margin-top: 40px; text-align: center;
}
.sfp-footer-inner { max-width: 800px; margin: 0 auto; }
.sfp-footer-links {
  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
.sfp-footer-links a {
  font-size: .82rem; color: #666; text-decoration: none; font-weight: 500;
}
.sfp-footer-links a:hover { color: #E8003D; }
.sfp-footer-biz {
  display: flex; gap: 12px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin-bottom: 12px; font-size: .82rem; color: #999;
}
.sfp-footer-brand { font-size: .92rem; font-weight: 700; color: #333; }
.sfp-footer-copy { font-size: .75rem; color: #BBB; }

/* ── 배너 슬라이더 ────────────────────────────────────── */
.sfp-banner-slider {
  position: relative; overflow: hidden; border-radius: 12px;
  margin-bottom: 20px; background: #F3F4F6;
}
.sfp-banner-track {
  display: flex; transition: transform .4s ease;
}
.sfp-banner-slide {
  min-width: 100%; display: block;
}
.sfp-banner-slide img { width: 100%; height: auto; display: block; max-height: 400px; object-fit: cover; }
.sfp-banner-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: auto; height: auto;
  background: none !important; border: none !important; box-shadow: none !important;
  cursor: pointer; font-size: 20px; color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s; padding: 8px;
}
.sfp-banner-arrow:hover { opacity: .7; }
.sfp-banner-prev { left: 10px; }
.sfp-banner-next { right: 10px; }
.sfp-banner-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
}
.sfp-banner-dot {
  width: 8px; height: 8px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.5); cursor: pointer; padding: 0;
  transition: background .15s;
}
.sfp-banner-dot.active { background: #fff; width: 20px; border-radius: 4px; }
@media (max-width: 640px) {
  .sfp-banner-slide img { max-height: 200px; }
  .sfp-banner-arrow { font-size: 16px; }
}

/* ============================================================
   모던 플랫 디자인 오버라이드 (v10.4)
   ============================================================ */

/* 전역 그림자 완화 */
.sfp-camp-card,
.sfp-template-card,
.sfp-stat-card,
.sfp-section,
.sfp-form-card,
.sfp-modal-inner,
.sfp-login-box,
.sfp-camp-detail,
.sfp-detail-sidebar-inner { box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; }

/* 카드 테두리 통일 */
.sfp-stat-card,
.sfp-form-card,
.sfp-camp-detail { border: 1px solid #E5E7EB; }

/* 여백 확보 */
.sfp-section { margin-bottom: 32px; }
.sfp-stat-card { padding: 24px; }
.sfp-camp-body { padding: 14px 16px 16px; }

/* 공지 배너 컴팩트 */
.sfp-notice-slide { padding: 12px 16px; }

/* 배경 통일 */
.sfp-wrap { background: #F9FAFB; }

/* ── 대시보드 사이드바 레이아웃 ───────────────────── */
.sfp-dashboard-wrap {
  display: flex !important; flex-direction: row !important;
  gap: 32px; align-items: flex-start; flex-wrap: nowrap;
}
.sfp-dashboard-wrap > *:not(.sfp-dashboard-sidebar):not(.sfp-dashboard-main) {
  display: none !important;
}
.sfp-dashboard-sidebar {
  width: 200px !important; flex-shrink: 0 !important;
  display: block !important; position: sticky; top: 80px;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 12px 0; overflow: hidden;
}
.sfp-dashboard-sidebar .sfp-menu-group {
  font-size: 11px; color: #999; font-weight: 700; text-transform: uppercase;
  margin: 16px 0 6px; padding: 0 16px; letter-spacing: .5px;
}
.sfp-dashboard-sidebar .sfp-menu-group:first-child { margin-top: 4px; }
.sfp-dashboard-sidebar a {
  display: block !important; padding: 8px 16px; color: #555; text-decoration: none;
  font-size: 14px; transition: all .12s; white-space: nowrap;
}
.sfp-dashboard-sidebar a:hover,
.sfp-dashboard-sidebar a.active {
  background: #FFF0F3; color: #E8003D; font-weight: 600;
}
.sfp-dashboard-main { flex: 1; min-width: 0; }
.sfp-dashboard-campaigns { margin-bottom: 0; }
.sfp-new-campaigns-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px;
}
@media (max-width: 960px) { .sfp-new-campaigns-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .sfp-new-campaigns-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .sfp-dashboard-wrap { flex-direction: column; gap: 16px; }
  .sfp-dashboard-sidebar {
    width: 100%; position: static; display: flex; overflow-x: auto;
    padding: 0; gap: 0; border-radius: 8px;
  }
  .sfp-dashboard-sidebar .sfp-menu-group { display: none; }
  .sfp-dashboard-sidebar a { white-space: nowrap; padding: 10px 14px; font-size: 13px; border-bottom: 2px solid transparent; }
  .sfp-dashboard-sidebar a.active { border-bottom-color: #E8003D; background: none; }
}

/* ── 대시보드 프로필 카드 (화이트) ─────────────────── */
.sfp-profile-card {
  background: #ffffff; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 24px; display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.sfp-profile-left { display: flex; align-items: center; gap: 16px; }
.sfp-avatar-circle,
.sfp-profile-card .sfp-avatar {
  width: 56px; height: 56px; background: #E8003D; color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; overflow: hidden; flex-shrink: 0;
}
.sfp-avatar-circle img,
.sfp-profile-card .sfp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sfp-profile-info h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; color: #333; }
.sfp-profile-info p { font-size: .85rem; color: #666; margin: 0; }
.sfp-profile-info p strong { color: #E8003D; }
.sfp-profile-right { display: flex; gap: 24px; }
.sfp-stat { text-align: center; }
.sfp-stat span { display: block; font-size: 20px; font-weight: 700; color: #E8003D; }
.sfp-stat p { font-size: 12px; color: #999; margin: 4px 0 0; }
@media (max-width: 640px) {
  .sfp-profile-card { flex-direction: column; gap: 16px; text-align: center; }
  .sfp-profile-left { flex-direction: column; }
  .sfp-profile-right { gap: 16px; }
}

/* ── 헤더 위 여백 제거 ────────────────────────────────── */
html { margin-top: 0 !important; }
body { margin-top: 0 !important; padding-top: 0 !important; }
body.admin-bar { margin-top: 0 !important; }
body.sfp-page { margin-top: 0 !important; padding-top: 0 !important; }
body.sfp-page.admin-bar { margin-top: 0 !important; }
#wpadminbar { display: none !important; }
#masthead { display: none !important; }
.ast-above-header-bar { display: none !important; }
.site-header { display: none !important; }

/* ============================================================
   마이페이지 사이드바 레이아웃 (revu.net 스타일)
   ============================================================ */
.sfp-mypage-layout,
.sfp-mypage-wrap {
  display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start;
}

/* 사이드바 */
.sfp-mypage-sidebar { position: sticky; top: 80px; }

/* 프로필 카드 */
.sfp-mypage-profile-card {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 24px; text-align: center; margin-bottom: 16px;
}
.sfp-mypage-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid #E8003D; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFF0F3; font-size: 1.4rem; font-weight: 800; color: #E8003D;
  margin-bottom: 10px;
}
.sfp-mypage-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sfp-mypage-name { font-size: 1rem; font-weight: 700; margin: 0 0 4px; color: #333; }
.sfp-mypage-level { font-size: .82rem; color: #666; margin: 0 0 14px; }
.sfp-mypage-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6;
  padding: 12px 0; margin-bottom: 14px;
}
.sfp-mypage-stats div { text-align: center; }
.sfp-mypage-stats strong { display: block; font-size: .95rem; font-weight: 700; color: #333; }
.sfp-mypage-stats small { font-size: .7rem; color: #999; }

/* 채널 연결 현황 */
.sfp-mypage-channels { margin-bottom: 14px; }
.sfp-mypage-ch-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: .8rem; color: #999;
}
.sfp-mypage-ch-row.sfp-ch-connected { color: #333; }
.sfp-mypage-ch-status { margin-left: auto; font-size: .72rem; }
.sfp-ch-connected .sfp-mypage-ch-status { color: #059669; font-weight: 600; }

/* 프로필 완성도 */
.sfp-mypage-progress { margin-top: 4px; }
.sfp-mypage-progress-label { font-size: .75rem; color: #666; display: flex; justify-content: space-between; margin-bottom: 6px; }
.sfp-mypage-progress-label strong { color: #E8003D; }
.sfp-mypage-progress-bar { height: 6px; background: #E5E7EB; border-radius: 3px; overflow: hidden; }
.sfp-mypage-progress-fill { height: 100%; background: #E8003D; border-radius: 3px; transition: width .3s; }

/* 사이드 네비 */
.sfp-mypage-nav {
  display: flex !important; flex-direction: column !important;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 6px 0 !important; overflow: hidden;
}
.sfp-mypage-nav > a {
  display: block !important; padding: 14px 16px !important;
  font-size: .92rem !important; color: #555 !important;
  text-decoration: none !important; border-left: 3px solid transparent;
  transition: all .12s;
}
.sfp-mypage-nav > a:hover { background: #F9FAFB !important; color: #333 !important; }
.sfp-mypage-nav > a.active {
  background: #FFF0F3 !important; color: #E8003D !important;
  font-weight: 700 !important; border-left-color: #E8003D !important;
}
.sfp-mypage-nav-group { padding: 8px 0; }
.sfp-mypage-nav-group + .sfp-mypage-nav-group { border-top: 1px solid #F3F4F6; }
.sfp-mypage-nav-group h4 {
  font-size: .7rem; font-weight: 700; color: #999; text-transform: uppercase;
  padding: 4px 18px 6px; margin: 0; letter-spacing: .5px;
}
.sfp-mypage-nav-group a {
  display: block; padding: 8px 18px; font-size: .85rem; color: #555;
  text-decoration: none; transition: all .12s;
}
.sfp-mypage-nav-group a:hover { background: #FFF0F3; color: #E8003D; }
.sfp-mypage-nav-group a.active { color: #E8003D; font-weight: 700; background: #FFF0F3; border-right: 3px solid #E8003D; }

/* 우측 메인 */
.sfp-mypage-main { min-width: 0; }

/* 모바일 */
@media (max-width: 768px) {
  .sfp-mypage-layout { grid-template-columns: 1fr; }
  .sfp-mypage-sidebar { position: static; }
  .sfp-mypage-profile-card { margin-bottom: 12px; }
  .sfp-mypage-nav { flex-direction: row !important; overflow-x: auto !important; padding: 0 !important; border-radius: 0 !important; border: none !important; border-bottom: 2px solid #eee !important; }
  .sfp-mypage-nav > a { white-space: nowrap !important; flex-shrink: 0 !important; padding: 12px 14px !important; font-size: .85rem !important; border-left: none !important; border-bottom: 2px solid transparent !important; margin-bottom: -2px !important; }
  .sfp-mypage-nav > a.active { border-left-color: transparent !important; border-bottom-color: #E8003D !important; background: none !important; }
  .sfp-mypage-nav-group { display: none; } /* 구 그룹 숨김 */
}

/* ============================================================
   기능 4건 (v10.5): PC필터노출+뱃지커스텀+동적태그+온보딩유도
   ============================================================ */

/* 기능1: PC 필터 항상 노출 */
.sfp-filter-panel-campaigns { display: block !important; }
@media (max-width: 768px) {
  .sfp-filter-panel-campaigns { display: none !important; }
  .sfp-filter-panel-campaigns.sfp-filter-open { display: block !important; }
}
.sfp-toolbar-filter-toggle { display: none; }
@media (max-width: 768px) {
  .sfp-toolbar-filter-toggle { display: inline-flex; }
}

/* 기능2: 캠페인 커스텀 뱃지 */
.sfp-camp-badge-custom {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 4px; font-size: .65rem; font-weight: 800;
  color: #fff; backdrop-filter: blur(4px);
}
.sfp-badge-hot     { background: #DC2626; }
.sfp-badge-popular { background: #F97316; }
.sfp-badge-closing { background: #F59E0B; color: #333; }
.sfp-badge-highapv { background: #059669; }
.sfp-badge-highpay { background: #7C3AED; }

/* 기능3: 동적 태그 */
.sfp-camp-auto-tag {
  display: inline-block; font-size: .62rem; font-weight: 700;
  padding: 1px 6px; border-radius: 3px; margin-right: 3px;
}
.sfp-tag-hot      { background: #FEE2E2; color: #DC2626; }
.sfp-tag-closing  { background: #FEF3C7; color: #92400E; }
.sfp-tag-highrate { background: #D1FAE5; color: #065F46; }
.sfp-tag-highpay  { background: #EDE9FE; color: #7C3AED; }

/* 기능4: 온보딩 단계 유도 */
.sfp-onboarding-step { cursor: pointer; transition: background .15s; }
.sfp-onboarding-step:hover { background: #FFF0F3; }
.sfp-step-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #E8003D;
  display: inline-block; margin-left: 6px; vertical-align: middle;
  animation: sfp-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes sfp-dot-pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.sfp-step-done .sfp-step-dot { display: none; }

/* ── 수정: 카카오 알림 동의 체크박스 ─────────────── */
.sfp-kakao-agree,
.sfp-consent-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-top: 1px solid #eee; margin-top: 12px;
}
.sfp-kakao-agree input[type=checkbox],
.sfp-consent-row input[type=checkbox] { order: 2; width: 18px; height: 18px; flex-shrink: 0; }
.sfp-kakao-agree label,
.sfp-consent-row label { font-size: 14px; color: #333; line-height: 1.5; order: 1; }

/* ── 수정: 상태 뱃지 한글 표시 ──────────────────── */
.sfp-status-badge { font-size: .75rem; }
.sfp-status-pending  { background: #FEF3C7; color: #92400E; }
.sfp-status-approved { background: #D1FAE5; color: #065F46; }
.sfp-status-rejected { background: #FEE2E2; color: #991B1B; }
.sfp-status-completed,.sfp-status-confirmed { background: #DBEAFE; color: #1E40AF; }
.sfp-status-draft    { background: #F3F4F6; color: #6B7280; }
.sfp-status-ended    { background: #F3F4F6; color: #9CA3AF; }

/* ── 사이드바 기본 텍스트 색상 (레드 제한) ─────────── */
.sfp-dashboard-sidebar a,
.sfp-mypage-nav-group a { color: #555 !important; }
.sfp-dashboard-sidebar a:hover,
.sfp-dashboard-sidebar a.active,
.sfp-mypage-nav-group a:hover,
.sfp-mypage-nav-group a.active { color: #E8003D !important; }
.sfp-dashboard-sidebar .sfp-menu-group,
.sfp-mypage-nav-group h4 { color: #999 !important; }

/* ── 캠페인 목록 중간 배너 (메인 배너 .sfp-banner-slider CSS 그대로 상속) ── */
/* HTML에 `class="sfp-mid-banner sfp-banner-slider"`로 두 클래스가 함께 붙어있어
   메인 배너 스타일(3851~3887)이 그대로 적용됨. 중간 배너에는 캠페인 그리드 안에
   위치하므로 grid 전체 너비를 차지하는 것만 추가. */
.sfp-mid-banner,
.sfp-mid-banner-wrap {
  grid-column: 1/-1;
}

/* ── 관리자 설정 탭 ──────────────────────────────── */
.sfp-settings-tabs {
  display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 2px solid #E5E7EB;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.sfp-settings-tab {
  padding: 10px 18px; font-size: .88rem; font-weight: 600; color: #666;
  cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent;
  white-space: nowrap; margin-bottom: -2px; transition: all .15s;
}
.sfp-settings-tab:hover { color: #333; }
.sfp-settings-tab.active { color: #6C2FF2; border-bottom-color: #6C2FF2; }
.sfp-settings-panel { display: none; }
.sfp-settings-panel.active { display: block; }

/* ── 정산정보 폼 UI ───────────────────────────────── */
.sfp-settle-form select,
.sfp-settle-form input[type=text],
.sfp-settle-form input[type=tel] {
  width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px;
  font-size: .9rem; transition: border-color .15s;
}
.sfp-settle-form select:focus,
.sfp-settle-form input:focus { border-color: #E8003D; outline: none; }
.sfp-settle-form .sfp-input-error { border-color: #E8003D !important; }
.sfp-settle-encrypt-notice {
  background: #FFF0F3; border: 1px solid #FFD0D8; border-radius: 8px;
  padding: 12px; color: #E8003D; font-size: 13px; margin-top: 12px;
  display: flex; align-items: center; gap: 8px;
}

/* ============================================================
   모바일 UI 전면 개선 (768px 이하)
   ============================================================ */
@media (max-width: 768px) {

  /* 전체 wrap */
  .sfp-wrap { padding: 0 16px 80px !important; overflow-x: hidden !important; }

  /* 네비게이션 */
  .sfp-nav { padding: 0 16px !important; height: 56px !important; }
  .sfp-nav-logo { height: 56px !important; }
  .sfp-nav-links { display: none !important; }

  /* 하단 탭바 강화 */
  .sfp-mobile-tab {
    display: flex !important; position: fixed !important;
    bottom: 0; left: 0; right: 0; height: 60px;
    background: #fff; border-top: 1px solid #eee;
    z-index: 9999; padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .sfp-tab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; font-size: 11px; color: #999;
    text-decoration: none; gap: 3px;
  }
  .sfp-tab-item.active { color: #E8003D; }
  .sfp-tab-icon { font-size: 20px; }

  /* 캠페인 목록 2열 */
  .sfp-card-grid-5,
  .sfp-card-grid-4,
  .sfp-card-grid-3,
  .sfp-card-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .sfp-camp-card { padding: 8px !important; border-radius: 10px !important; }
  .sfp-camp-thumb-wrap { aspect-ratio: 1/1 !important; border-radius: 8px !important; }
  .sfp-camp-body { padding: 8px 4px !important; }
  .sfp-camp-body h3 { font-size: 13px !important; line-height: 1.3 !important; }
  .sfp-camp-footer { font-size: 11px !important; }
  .sfp-camp-plats { margin-bottom: 4px !important; }
  .sfp-camp-plat-icon { font-size: .75rem !important; }
  .sfp-fav-btn { font-size: 22px !important; width: 28px !important; height: 28px !important; }

  /* 배너 */
  .sfp-banner-slider { border-radius: 8px !important; }
  .sfp-banner-slide img { max-height: 160px !important; }
  .sfp-banner-dot { width: 6px !important; height: 6px !important; }
  .sfp-banner-dot.active { width: 16px !important; }

  /* 캠페인 상세 1컬럼 */
  .sfp-detail-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
  .sfp-detail-sidebar { position: static !important; order: -1; margin-bottom: 16px !important; }
  .sfp-detail-sidebar-inner { padding: 16px !important; }
  .sfp-detail-title { font-size: 1.15rem !important; }
  .sfp-accordion-item summary { padding: 12px 14px !important; font-size: .88rem !important; }
  .sfp-accordion-body { padding: 0 14px 14px !important; font-size: .85rem !important; }

  /* 마이페이지 1컬럼 */
  .sfp-mypage-layout,
  .sfp-mypage-wrap { grid-template-columns: 1fr !important; gap: 0 !important; }
  .sfp-mypage-sidebar {
    position: static !important; width: 100% !important;
    display: flex !important; overflow-x: auto !important;
    border-radius: 0 !important; border: none !important;
    border-bottom: 1px solid #eee !important; padding: 0 !important;
  }
  .sfp-mypage-nav {
    flex-direction: row !important; overflow-x: auto !important;
    padding: 0 !important; border-radius: 0 !important; border: none !important;
    border-bottom: 2px solid #eee !important; background: #fff !important;
  }
  .sfp-mypage-nav > a { white-space: nowrap !important; flex-shrink: 0 !important; border-left: none !important; border-bottom: 2px solid transparent !important; margin-bottom: -2px !important; }
  .sfp-mypage-nav > a.active { border-left-color: transparent !important; border-bottom-color: #E8003D !important; background: none !important; }
  .sfp-mypage-nav-group { display: none !important; }
  .sfp-mypage-nav-group + .sfp-mypage-nav-group { border-top: none !important; border-left: 1px solid #F3F4F6 !important; }
  .sfp-mypage-nav-group h4 { display: none !important; }
  .sfp-mypage-nav-group a {
    white-space: nowrap !important; padding: 12px 14px !important;
    border-bottom: 2px solid transparent !important; border-right: none !important;
    border-radius: 0 !important; font-size: 13px !important;
  }
  .sfp-mypage-nav-group a.active { border-bottom-color: #E8003D !important; background: none !important; }
  .sfp-mypage-profile-card { margin-bottom: 12px !important; padding: 16px !important; }
  .sfp-profile-card { flex-direction: column !important; text-align: center !important; padding: 20px 16px !important; }
  .sfp-profile-left { flex-direction: column !important; }
  .sfp-profile-right { justify-content: center !important; gap: 16px !important; }

  /* 대시보드 1컬럼 */
  .sfp-dashboard-wrap {
    flex-direction: column !important; gap: 0 !important;
  }
  .sfp-dashboard-sidebar {
    width: 100% !important; position: static !important;
    display: flex !important; overflow-x: auto !important;
    border-radius: 0 !important; padding: 0 !important;
    border: none !important; border-bottom: 1px solid #eee !important;
  }
  .sfp-dashboard-sidebar .sfp-menu-group { display: none !important; }
  .sfp-dashboard-sidebar a {
    white-space: nowrap !important; padding: 12px 14px !important;
    border-bottom: 2px solid transparent !important; font-size: 13px !important;
    border-radius: 0 !important;
  }
  .sfp-dashboard-sidebar a.active { border-bottom-color: #E8003D !important; background: none !important; }
  .sfp-dashboard-main { width: 100% !important; }

  /* 통계 카드 2열 */
  .sfp-stat-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .sfp-stat-card { padding: 14px !important; }

  /* 필터 */
  .sfp-filter-panel-campaigns { display: none !important; }
  .sfp-filter-panel-campaigns.sfp-filter-open { display: block !important; }
  .sfp-toolbar-filter-toggle { display: inline-flex !important; }
  .sfp-campaign-toolbar { padding: 0 !important; }

  /* 폰트 축소 */
  .sfp-section-title { font-size: 1rem !important; }
  .sfp-page-header h1 { font-size: 1.2rem !important; }

  /* 정산 폼 */
  .sfp-settle-form select,
  .sfp-settle-form input { font-size: 16px !important; /* iOS zoom 방지 */ }

  /* 스크롤탑 위치 조정 */
  .sfp-scroll-top { bottom: 72px !important; right: 12px !important; }

  /* 햄버거 버튼 */
  .sfp-nav-hamburger { display: flex !important; }
}

/* ── 모바일 햄버거 + 슬라이드 메뉴 ───────────────── */
.sfp-nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 8px; background: none; border: none;
}
.sfp-nav-hamburger span {
  display: block; width: 22px; height: 2px; background: #333;
  border-radius: 2px; transition: all .3s;
}
.sfp-nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.sfp-nav-hamburger.active span:nth-child(2) { opacity: 0; }
.sfp-nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.sfp-mobile-menu {
  display: none; position: fixed;
  top: 56px; left: 0; right: 0; bottom: 0;
  background: #fff; z-index: 9998; overflow-y: auto; padding: 16px;
  transform: translateX(100%); transition: transform .3s ease;
}
.sfp-mobile-menu.active { display: block; transform: translateX(0); }
.sfp-mobile-menu a {
  display: block; padding: 16px 0; font-size: 16px; color: #333;
  text-decoration: none; border-bottom: 1px solid #f0f0f0; font-weight: 500;
}
.sfp-mobile-menu a:hover { color: #E8003D; }

/* ── 퀵메뉴 바 ───────────────────────────────────── */
.sfp-quick-menu-bar,
.sfp-quick-menu {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  padding: 16px; background: #fff; margin: 12px 0;
}
.sfp-quick-menu-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; color: #333;
}
.sfp-quick-icon {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  border: 1px solid #eee; background: #f8f8f8;
  display: flex; align-items: center; justify-content: center;
}
.sfp-quick-icon img { width: 100%; height: 100%; object-fit: cover; }
/* 기존 정사각 호환 */
.sfp-quick-menu-item > img {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; border: 1px solid #eee;
}
.sfp-quick-menu-item span {
  font-size: 11px; text-align: center; color: #555;
  line-height: 1.3; word-break: keep-all;
}
@media (max-width: 768px) {
  .sfp-quick-icon { width: 44px; height: 44px; }
  .sfp-quick-menu-item > img { width: 44px; height: 44px; }
  .sfp-quick-menu-item span { font-size: 10px; }
}
@media (max-width: 480px) {
  .sfp-quick-menu-bar, .sfp-quick-menu { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; }
}

/* ── 모바일 횡스크롤 메뉴 ─────────────────────────── */
/* ============================================================
   모바일 최종 정리 (storyn.kr 스타일)
   ============================================================ */

/* 횡스크롤 메뉴 (PC 숨김) */
.sfp-nav-scroll-menu { display: none; }

@media (max-width: 768px) {
  /* 횡스크롤 메뉴 */
  .sfp-nav-scroll-menu {
    display: flex !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; background: #fff; border-bottom: 1px solid #eee;
    padding: 0 4px; position: sticky; top: 56px; z-index: 998;
  }
  .sfp-nav-scroll-menu::-webkit-scrollbar { display: none; }
  .sfp-nav-scroll-menu a {
    white-space: nowrap; padding: 10px 12px; font-size: 13px; color: #555;
    text-decoration: none; border-bottom: 2px solid transparent; flex-shrink: 0; display: block;
  }
  .sfp-nav-scroll-menu a.active { color: #E8003D; border-bottom-color: #E8003D; font-weight: 600; }

  /* 햄버거 완전 제거 */
  .sfp-nav-hamburger, .sfp-mobile-menu { display: none !important; }

  /* 대시보드 사이드바 숨김 */
  .sfp-dashboard-sidebar { display: none !important; }
  .sfp-dashboard-main { width: 100% !important; min-width: 0 !important; }
  .sfp-dashboard-wrap { display: block !important; }

  /* 마이페이지 사이드바 숨김 */
  .sfp-mypage-sidebar { display: none !important; }
  .sfp-mypage-main { width: 100% !important; min-width: 0 !important; }
  .sfp-mypage-layout, .sfp-mypage-wrap { display: block !important; }

  /* 검색/필터 숨김 */
  .sfp-toolbar-search, .sfp-search-bar { display: none !important; }
  .sfp-filter-panel-campaigns { display: none !important; }

  /* 캠페인 2열 */
  .sfp-card-grid-5, .sfp-card-grid-4, .sfp-card-grid-3, .sfp-card-grid {
    grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important;
  }
  .sfp-camp-card { padding: 8px !important; border-radius: 10px !important; }
  .sfp-camp-thumb-wrap { aspect-ratio: 1/1 !important; }
  .sfp-camp-body h3 { font-size: 12px !important; line-height: 1.4 !important; }
  .sfp-camp-footer { font-size: 11px !important; }

  /* 하단 탭바 */
  .sfp-mobile-tab {
    display: flex !important; position: fixed !important;
    bottom: 0; left: 0; right: 0; height: 56px;
    background: #fff; border-top: 1px solid #eee; z-index: 9999;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  }
  .sfp-mobile-tab a, .sfp-tab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; font-size: 10px; color: #999;
    text-decoration: none; gap: 3px; padding: 4px 0; min-width: 0; overflow: hidden;
  }
  .sfp-mobile-tab a.active, .sfp-tab-item.active { color: #E8003D; }
  .sfp-mobile-tab a svg, .sfp-tab-icon { width: 20px; height: 20px; flex-shrink: 0; }
  .sfp-mobile-tab a span { white-space: nowrap; font-size: 9px; line-height: 1; }
  body.sfp-page { padding-bottom: 56px !important; }
}

@media (max-width: 480px) {
  .sfp-camp-body h3 { font-size: 11px !important; }
  .sfp-camp-footer { font-size: 10px !important; padding-top: 6px !important; }
  .sfp-camp-vt-badge { font-size: .6rem !important; padding: 2px 6px !important; }
}

/* ── 마이페이지 모바일 탭 ─────────────────────────── */
.sfp-mypage-mobile-nav { display: none; }
@media (max-width: 768px) {
  .sfp-mypage-mobile-nav {
    display: flex !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; border-bottom: 2px solid #eee; margin-bottom: 16px;
    background: #fff; padding: 0;
  }
  .sfp-mypage-mobile-nav::-webkit-scrollbar { display: none; }
  .sfp-mypage-mobile-nav a {
    white-space: nowrap; padding: 12px 14px; font-size: 13px; color: #555;
    text-decoration: none; border-bottom: 2px solid transparent;
    flex-shrink: 0; display: block; margin-bottom: -2px;
  }
  .sfp-mypage-mobile-nav a.active { color: #E8003D; border-bottom-color: #E8003D; font-weight: 600; }
}

/* ── 모바일 보강 (대시보드/캠페인) ─────────────────── */
@media (max-width: 768px) {
  /* 헤더 볼드 */
  .sfp-nav-brand { font-weight: 700 !important; }

  /* 공지 배너 1줄 */
  .sfp-notice-slide { padding: 10px 16px !important; }
  .sfp-notice-slide-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; display: inline-block; }

  /* 시작 가이드 스크롤 */
  .sfp-onboarding-steps { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sfp-onboarding-steps { display: flex; min-width: max-content; }

  /* 퀵메뉴 5열 유지 + 작게 */
  .sfp-quick-menu-bar, .sfp-quick-menu {
    grid-template-columns: repeat(5, 1fr) !important; gap: 8px !important; padding: 12px 8px !important;
  }
  .sfp-quick-icon { width: 40px !important; height: 40px !important; }
  .sfp-quick-menu-item > img { width: 40px !important; height: 40px !important; }
  .sfp-quick-menu-item span { font-size: 10px !important; }

  /* 필터 완전 숨김 */
  .sfp-filter-panel-campaigns, .sfp-filter-panel, [class*="sfp-filter-group"] { display: none !important; }
  .sfp-toolbar-filter-toggle { display: none !important; }

  /* 캠페인 2열 (횡스크롤 차단) */
  .sfp-card-grid, .sfp-card-grid-3, .sfp-card-grid-4, .sfp-card-grid-5 {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important; overflow-x: hidden !important; width: 100% !important;
  }
  .sfp-camp-card { width: 100% !important; min-width: 0 !important; }
}

/* ── 커스텀 플랫폼 드롭다운 ──────────────────────── */
.sfp-platform-select { position: relative; }
.sfp-platform-selected {
  padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  background: #fff; font-size: 14px; color: #333;
}
.sfp-platform-selected::after { content: '▾'; margin-left: auto; color: #999; }
.sfp-platform-options {
  display: none !important; position: absolute !important; top: 100% !important;
  left: 0 !important; right: 0 !important; z-index: 9999 !important;
  border: 1px solid #ddd !important; border-radius: 8px !important;
  background: #fff !important; list-style: none !important;
  margin: 4px 0 0 !important; padding: 4px 0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
}
.sfp-platform-options.open { display: block !important; }
.sfp-platform-options li {
  padding: 10px 14px; cursor: pointer; display: flex; align-items: center;
  gap: 8px; font-size: 14px; color: #333;
}
.sfp-platform-options li:hover { background: #f8f8f8; }
.sfp-platform-options li img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }

/* ── 모바일 추가 보강 ────────────────────────────── */
@media (max-width: 768px) {
  /* 헤더 폰트 진하게+크게 */
  .sfp-nav-scroll-menu a { font-size: 14px !important; font-weight: 600 !important; color: #111 !important; }
  .sfp-nav-scroll-menu a.active { color: #E8003D !important; font-weight: 700 !important; }
  .sfp-nav-brand { font-size: 18px !important; font-weight: 800 !important; color: #111 !important; }

  /* 마이페이지 모바일 탭 */
  .sfp-mypage-mobile-nav {
    display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; background: #fff !important;
    border-bottom: 2px solid #eee !important; margin: 0 -16px 16px !important;
    padding: 0 8px !important; width: calc(100% + 32px) !important;
  }
  .sfp-mypage-mobile-nav::-webkit-scrollbar { display: none !important; }
  .sfp-mypage-mobile-nav a {
    display: block !important; white-space: nowrap !important; padding: 12px 14px !important;
    font-size: 13px !important; font-weight: 500 !important; color: #555 !important;
    text-decoration: none !important; border-bottom: 2px solid transparent !important;
    flex-shrink: 0 !important; margin-bottom: -2px !important;
  }
  .sfp-mypage-mobile-nav a.active { color: #E8003D !important; border-bottom-color: #E8003D !important; font-weight: 700 !important; }

  /* 하단 탭바 전체 너비 */
  .sfp-mobile-tab {
    display: flex !important; position: fixed !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important; height: 56px !important;
    background: #fff !important; border-top: 1px solid #eee !important;
    z-index: 9999 !important; margin: 0 !important; padding: 0 !important;
    justify-content: stretch !important;
  }
  .sfp-mobile-tab a, .sfp-tab-item {
    flex: 1 1 0 !important; width: 0 !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 3px !important; padding: 4px 0 !important; font-size: 9px !important;
    color: #999 !important; text-decoration: none !important;
    min-width: 0 !important; overflow: hidden !important;
  }
  .sfp-mobile-tab a.active, .sfp-tab-item.active { color: #E8003D !important; }
  .sfp-mobile-tab a svg, .sfp-tab-icon { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; }
  .sfp-mobile-tab a span { font-size: 9px !important; white-space: nowrap !important; line-height: 1 !important; }
}

/* ── 모바일 스크롤+탭바+배너 최종 (v10.15) ────────── */
@media (max-width: 768px) {
  /* 수정1: 스크롤 안 되는 버그 */
  body.sfp-page { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; position: static !important; }
  .sfp-wrap { overflow: visible !important; height: auto !important; }

  /* 수정2: 하단 탭바 정렬 최종 */
  .sfp-mobile-tab {
    position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100vw !important; height: 56px !important;
    display: flex !important; flex-direction: row !important;
    background: #fff !important; border-top: 1px solid #eee !important;
    z-index: 99999 !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
  }
  .sfp-mobile-tab .sfp-mobile-tab-inner {
    display: flex !important; flex-direction: row !important; width: 100% !important; height: 100% !important;
  }
  .sfp-mobile-tab a, .sfp-mobile-tab .sfp-tab-item {
    flex: 1 !important; display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 2px !important; text-decoration: none !important; color: #999 !important;
    padding: 0 !important; margin: 0 !important; min-width: 0 !important; height: 100% !important;
  }
  .sfp-mobile-tab a.active, .sfp-mobile-tab .sfp-tab-item.active { color: #E8003D !important; }
  .sfp-mobile-tab a svg, .sfp-mobile-tab .sfp-tab-icon {
    width: 22px !important; height: 22px !important; display: block !important; flex-shrink: 0 !important;
  }
  .sfp-mobile-tab a span {
    display: block !important; font-size: 10px !important; line-height: 1 !important;
    white-space: nowrap !important; margin: 0 !important;
  }

  /* 수정3: 공지 배너 1줄 + 여백 */
  .sfp-banner-slider, .sfp-notice-slider { margin-top: 10px !important; }
  .sfp-notice-slide-text strong, .sfp-banner-slide {
    display: -webkit-box !important; -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
}

/* ============================================================
   마이페이지 탭 + 정산/채널 분리 + 등급 혜택 (v10.16)
   ============================================================ */

/* 탭 활성 상태 통일 (PC + 모바일) */
.sfp-mypage-nav-group a.active,
.sfp-mypage-mobile-nav a.active {
  color: #E8003D !important; font-weight: 700 !important;
}
.sfp-mypage-nav-group a.active {
  background: #FFF0F3 !important; border-right: 3px solid #E8003D !important;
}
.sfp-mypage-mobile-nav a.active {
  border-bottom-color: #E8003D !important;
}

/* 정산정보/채널연결 탭 콘텐츠 여백 */
.sfp-mypage-main .sfp-section { margin-bottom: 28px; }
.sfp-mypage-main .sfp-section:last-child { margin-bottom: 0; }
.sfp-mypage-main .sfp-section-title {
  font-size: 1rem; font-weight: 700; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1px solid #F3F4F6;
}

/* 정산 폼 카드 */
.sfp-mypage-main .sfp-form-card,
.sfp-mypage-main .sfp-settle-form {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 24px; margin-bottom: 20px;
}

/* 채널 카드 간격 */
.sfp-mypage-main .sfp-card-grid { gap: 12px; margin-bottom: 16px; }

/* 등급 혜택 표시 */
.sfp-level-benefit {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; color: #E8003D; font-weight: 600;
  background: #FFF0F3; padding: 3px 10px; border-radius: 12px;
  margin-left: 8px; vertical-align: middle;
}
.sfp-level-benefit-text {
  font-size: .72rem; color: #666; margin-top: 4px; line-height: 1.4;
}
.sfp-level-card-current {
  border: 2px solid #E8003D !important; background: #FFF0F3 !important;
}
.sfp-level-card-current .sfp-level-name { color: #E8003D !important; }
.sfp-level-next-info {
  font-size: .78rem; color: #666; margin-top: 12px;
  padding: 10px 14px; background: #F9FAFB; border-radius: 8px;
  border: 1px solid #E5E7EB;
}
.sfp-level-next-info strong { color: #E8003D; }

@media (max-width: 768px) {
  .sfp-mypage-main .sfp-form-card,
  .sfp-mypage-main .sfp-settle-form { padding: 16px; }
  .sfp-level-benefit { font-size: .68rem; padding: 2px 8px; }
}

/* ── B132: 모바일 스크롤 보장 (전 페이지) ─────────── */
@media (max-width: 768px) {
  html, body, body.sfp-page {
    overflow-y: auto !important; overflow-x: hidden !important;
    height: auto !important; min-height: 100vh !important;
    position: static !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .sfp-wrap {
    overflow: visible !important; height: auto !important;
    min-height: auto !important; padding-bottom: 72px !important;
  }
  .sfp-dashboard-wrap,
  .sfp-mypage-layout,
  .sfp-mypage-wrap {
    overflow: visible !important; height: auto !important;
    min-height: auto !important;
  }
  .sfp-dashboard-main,
  .sfp-mypage-main {
    overflow: visible !important; height: auto !important;
  }
}

/* ============================================================
   UI 컴포넌트: 출금게이지 + 바텀시트 + 매칭배너 (v10.17)
   ============================================================ */

/* ── UI1: 출금 게이지바 ──────────────────────────── */
.sfp-withdraw-gauge { margin-bottom: 20px; }
.sfp-withdraw-gauge-labels {
  display: flex; justify-content: space-between; font-size: .78rem;
  margin-bottom: 6px; color: #666;
}
.sfp-withdraw-gauge-labels strong { color: #333; font-weight: 700; }
.sfp-withdraw-gauge-bar {
  height: 8px; border-radius: 4px; background: #f0f0f0; overflow: hidden;
}
.sfp-withdraw-gauge-fill {
  height: 100%; border-radius: 4px; background: #E8003D;
  transition: width .4s ease;
}
.sfp-withdraw-gauge-fill.sfp-gauge-complete { background: #059669; }
.sfp-withdraw-gauge-cta {
  margin-top: 10px; text-align: center;
}
.sfp-withdraw-gauge-cta .sfp-btn {
  animation: sfp-gauge-pulse 2s ease-in-out infinite;
}
@keyframes sfp-gauge-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,0,61,.3); }
  50% { box-shadow: 0 0 0 8px rgba(232,0,61,0); }
}

/* ── UI2: 바텀시트 ───────────────────────────────── */
.sfp-bottomsheet-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.4); display: none;
  align-items: flex-end; justify-content: center;
}
.sfp-bottomsheet-overlay.open { display: flex; }
.sfp-bottomsheet {
  background: #fff; border-radius: 16px 16px 0 0;
  width: 100%; max-width: 480px; max-height: 80vh;
  overflow-y: auto; padding: 0;
  transform: translateY(100%); transition: transform .3s ease;
}
.sfp-bottomsheet-overlay.open .sfp-bottomsheet { transform: translateY(0); }
.sfp-bottomsheet-handle {
  width: 40px; height: 4px; border-radius: 2px; background: #DDD;
  margin: 10px auto 0; flex-shrink: 0;
}
.sfp-bottomsheet-header {
  padding: 16px 20px 12px; font-size: 1rem; font-weight: 700;
  border-bottom: 1px solid #F3F4F6;
}
.sfp-bottomsheet-body { padding: 16px 20px 24px; }
.sfp-bottomsheet-close {
  position: absolute; top: 14px; right: 16px; background: none;
  border: none; font-size: 1.2rem; color: #999; cursor: pointer;
}
@media (min-width: 769px) {
  .sfp-bottomsheet-overlay { align-items: center; }
  .sfp-bottomsheet { border-radius: 16px; max-height: 70vh; }
}

/* ── UI3: 캠페인 첫 매칭 배너 ────────────────────── */
.sfp-match-banner {
  background: #FFF0F3; border: 1px solid #FFCCD5; border-radius: 10px;
  padding: 14px 20px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
  color: #E8003D; font-size: .88rem; font-weight: 600;
  animation: sfp-match-fadein .4s ease;
}
.sfp-match-banner.sfp-fadeout {
  animation: sfp-match-fadeout .5s ease forwards;
}
.sfp-match-banner-close {
  background: none; border: none; color: #E8003D; font-size: 1.1rem;
  cursor: pointer; padding: 4px 8px; flex-shrink: 0;
}
@keyframes sfp-match-fadein { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sfp-match-fadeout { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

/* ============================================================
   UI 5건: 알림이동+EmptyState+온보딩체크+포인트애니+출금보강
   ============================================================ */

/* ── UI1: 모바일 알림 헤더 우측 ──────────────────── */
.sfp-nav-notif-mobile {
  display: none; position: relative; cursor: pointer;
  background: none; border: none; padding: 4px;
}
.sfp-nav-notif-mobile svg { width: 24px; height: 24px; color: #333; }
.sfp-nav-notif-mobile .sfp-notif-badge {
  position: absolute; top: -2px; right: -4px;
  background: #E8003D; color: #fff; font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
}
@media (max-width: 768px) {
  .sfp-nav-notif-mobile { display: flex !important; }
  /* 탭바에서 알림 탭 숨김 (4번째 이후) */
  .sfp-mobile-tab .sfp-tab-item:nth-child(n+4) { display: none !important; }
}

/* ── UI2: Empty State 공통 ───────────────────────── */
.sfp-empty-state {
  text-align: center; padding: 48px 20px;
}
.sfp-empty-state-icon {
  width: 64px; height: 64px; margin: 0 auto 16px; color: #D1D5DB;
}
.sfp-empty-state-icon svg { width: 100%; height: 100%; }
.sfp-empty-state h3 {
  font-size: 16px; font-weight: 700; color: #333; margin: 0 0 8px;
}
.sfp-empty-state p {
  font-size: 14px; color: #888; margin: 0 0 20px; line-height: 1.5;
}
.sfp-empty-state .sfp-btn {
  width: 100%; max-width: 280px;
}

/* ── UI3: 온보딩 체크리스트 ──────────────────────── */
.sfp-checklist { margin-bottom: 24px; }
.sfp-checklist-progress {
  height: 6px; border-radius: 3px; background: #f0f0f0;
  margin-bottom: 16px; overflow: hidden;
}
.sfp-checklist-progress-fill {
  height: 100%; border-radius: 3px; background: #E8003D;
  transition: width .4s ease;
}
.sfp-checklist-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid #E5E7EB; border-radius: 10px;
  margin-bottom: 8px; cursor: pointer; text-decoration: none;
  color: #999; transition: all .15s;
}
.sfp-checklist-item:hover { border-color: #E8003D; background: #FFF0F3; }
.sfp-checklist-item.sfp-check-done { color: #333; }
.sfp-checklist-check {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #D1D5DB; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: transparent;
}
.sfp-check-done .sfp-checklist-check {
  background: #E8003D; border-color: #E8003D; color: #fff;
}
.sfp-checklist-text { flex: 1; font-size: .88rem; }
.sfp-check-done .sfp-checklist-text { font-weight: 600; }
.sfp-checklist-arrow { color: #CCC; font-size: 1rem; }
.sfp-check-done .sfp-checklist-arrow { display: none; }

/* ── UI4: 포인트 적립 애니메이션 ─────────────────── */
.sfp-points-toast {
  position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%);
  z-index: 99999; pointer-events: none;
  font-size: 2rem; font-weight: 900; color: #E8003D;
  text-shadow: 0 2px 8px rgba(232,0,61,.25);
  animation: sfp-pts-float 1.5s ease forwards;
}
@keyframes sfp-pts-float {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.8); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  40% { transform: translate(-50%, -55%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%); }
}

/* ── UI5: 출금 게이지바 보강 ─────────────────────── */
.sfp-withdraw-gauge-msg {
  font-size: .82rem; color: #666; margin-bottom: 8px; text-align: center;
}
.sfp-withdraw-gauge-msg strong { color: #E8003D; font-weight: 700; }
.sfp-withdraw-gauge-bar.sfp-gauge-full { background: #D1FAE5; }
.sfp-withdraw-gauge-bar.sfp-gauge-full .sfp-withdraw-gauge-fill {
  background: #059669;
}

/* ============================================================
   UI: 폭죽 + 행동보상카드 + 추가정보폼 (v10.18)
   ============================================================ */

/* ── UI1: 폭죽 애니메이션 ────────────────────────── */
.sfp-confetti-canvas {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 100000;
}
.sfp-celebrate-msg {
  position: fixed; top: 35%; left: 50%; transform: translate(-50%, -50%);
  z-index: 100001; pointer-events: none; text-align: center;
  animation: sfp-celebrate-pop .6s ease forwards;
}
.sfp-celebrate-msg h2 {
  font-size: 1.6rem; font-weight: 900; color: #333; margin: 0 0 8px;
}
.sfp-celebrate-msg .sfp-celebrate-pts {
  font-size: 2.2rem; font-weight: 900; color: #E8003D;
  text-shadow: 0 2px 12px rgba(232,0,61,.3);
  animation: sfp-pts-float 2s ease .3s forwards;
}
@keyframes sfp-celebrate-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ── UI2: 행동 보상 현황 카드 ────────────────────── */
.sfp-reward-list { display: flex; flex-direction: column; gap: 8px; }
.sfp-reward-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #fff; border: 1px solid #E5E7EB;
  border-radius: 10px; transition: all .15s;
}
.sfp-reward-item:hover { border-color: #FFD0D8; background: #FFFBFC; }
.sfp-reward-check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #D1D5DB; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: transparent;
}
.sfp-reward-done .sfp-reward-check { background: #E8003D; border-color: #E8003D; color: #fff; }
.sfp-reward-text { flex: 1; font-size: .88rem; color: #999; }
.sfp-reward-done .sfp-reward-text { color: #333; font-weight: 600; }
.sfp-reward-pts { font-size: .82rem; font-weight: 700; color: #D1D5DB; white-space: nowrap; }
.sfp-reward-done .sfp-reward-pts { color: #E8003D; }

/* ── UI3: 추가정보 입력 폼 개선 ──────────────────── */
.sfp-extra-form-wrap {
  max-width: 420px; margin: 0 auto; padding: 32px 24px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.sfp-extra-form-header {
  text-align: center; margin-bottom: 24px;
}
.sfp-extra-form-header .sfp-extra-icon { font-size: 2.5rem; margin-bottom: 8px; }
.sfp-extra-form-header h2 { font-size: 24px; font-weight: 800; color: #333; margin: 0 0 6px; }
.sfp-extra-form-header p { font-size: 14px; color: #888; margin: 0; }
.sfp-extra-form .sfp-form-group input,
.sfp-extra-form .sfp-form-group select {
  border-radius: 12px !important; padding: 14px 16px !important;
  border: 1.5px solid #E5E7EB !important; font-size: 15px !important;
  transition: border-color .15s;
}
.sfp-extra-form .sfp-form-group input:focus,
.sfp-extra-form .sfp-form-group select:focus {
  border-color: #E8003D !important; outline: none;
}
.sfp-extra-form .sfp-btn-primary {
  width: 100%; border-radius: 12px; height: 50px; font-size: 16px; font-weight: 700;
}
@media (max-width: 480px) {
  .sfp-extra-form-wrap { padding: 24px 16px; border-radius: 0; box-shadow: none; }
  .sfp-extra-form-header h2 { font-size: 20px; }
}

/* ============================================================
   포인트/미션 UI 개선 (v10.19)
   ============================================================ */

/* ── UI1: 포인트 페이지 레이아웃 ─────────────────── */
.sfp-points-layout { display: flex; flex-direction: column; gap: 24px; }
.sfp-points-layout .sfp-points-hero { margin-bottom: 0; }
.sfp-points-layout .sfp-withdraw-gauge { margin-top: -8px; }

/* ── UI2: 미션 달성 디자인 개선 ──────────────────── */
.sfp-mission-section-title {
  font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: #333;
}
.sfp-mission-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: #fff; border: 1px solid #E5E7EB;
  border-radius: 10px; margin-bottom: 8px; transition: all .15s;
}
.sfp-mission-card:hover { border-color: #FFD0D8; }
.sfp-mission-icon {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.sfp-mission-card-done .sfp-mission-icon { background: #D1FAE5; color: #059669; }
.sfp-mission-card:not(.sfp-mission-card-done) .sfp-mission-icon { background: #F3F4F6; color: #9CA3AF; }
.sfp-mission-info { flex: 1; min-width: 0; }
.sfp-mission-title { font-size: .88rem; font-weight: 600; color: #333; margin: 0 0 2px; }
.sfp-mission-card:not(.sfp-mission-card-done) .sfp-mission-title { color: #999; }
.sfp-mission-status { font-size: .72rem; }
.sfp-mission-card-done .sfp-mission-status { color: #059669; font-weight: 600; }
.sfp-mission-card:not(.sfp-mission-card-done) .sfp-mission-status { color: #9CA3AF; }
.sfp-mission-reward {
  font-size: .85rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.sfp-mission-card-done .sfp-mission-reward { color: #E8003D; }
.sfp-mission-card:not(.sfp-mission-card-done) .sfp-mission-reward { color: #D1D5DB; }
.sfp-mission-badge-done {
  display: inline-block; font-size: .65rem; font-weight: 700; color: #059669;
  background: #D1FAE5; padding: 2px 8px; border-radius: 10px; margin-left: 6px;
}

/* ── UI3: 포인트 유형 뱃지 ───────────────────────── */
.sfp-pts-type-badge {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; margin-right: 6px;
}
.sfp-pts-type-earn, .sfp-pts-type-settlement { background: #D1FAE5; color: #065F46; }
.sfp-pts-type-deduct, .sfp-pts-type-withdraw { background: #FEE2E2; color: #991B1B; }
.sfp-pts-type-mission { background: #DBEAFE; color: #1E40AF; }
.sfp-pts-type-level, .sfp-pts-type-levelup { background: #FEF3C7; color: #92400E; }
.sfp-pts-type-admin, .sfp-pts-type-gift { background: #F3F4F6; color: #6B7280; }
.sfp-pts-type-campaign { background: #FFF0F3; color: #E8003D; }

/* ── UI4: 보상 현황 카드 (통일) ──────────────────── */
.sfp-reward-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 600; padding: 3px 10px;
  border-radius: 10px; flex-shrink: 0;
}
.sfp-reward-status-done { background: #D1FAE5; color: #059669; }
.sfp-reward-status-pending { background: #F3F4F6; color: #9CA3AF; }

@media (max-width: 768px) {
  .sfp-mission-card { padding: 12px 14px; gap: 10px; }
  .sfp-mission-icon { width: 32px; height: 32px; font-size: .88rem; }
  .sfp-mission-title { font-size: .82rem; }
  .sfp-mission-reward { font-size: .78rem; }
}

/* ============================================================
   정산정보 안심 UI (v10.20)
   ============================================================ */

/* 안심 배너 (섹션 상단) */
.sfp-settle-safe-banner {
  background: #f0faf0; border: 1px solid #BBF7D0; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 16px;
  font-size: 13px; color: #2d8a4e; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}

/* 주민번호 입력 안내문 */
.sfp-settle-hint {
  font-size: 12px; color: #999; line-height: 1.6; margin-top: 4px;
}

/* 암호화 뱃지 (입력창 상단) */
.sfp-encrypt-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: #059669;
  background: #D1FAE5; padding: 2px 8px; border-radius: 6px;
  margin-bottom: 6px;
}

/* 주민번호 입력창 자물쇠 아이콘 */
.sfp-input-lock-wrap { position: relative; }
.sfp-input-lock-wrap input { padding-right: 36px !important; }
.sfp-input-lock-icon {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: #059669; pointer-events: none;
}

/* 고유식별정보 동의 체크박스 */
.sfp-consent-check {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; padding: 12px 14px;
  background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 8px;
}
.sfp-consent-check input[type=checkbox] {
  margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px;
  accent-color: #E8003D;
}
.sfp-consent-check.sfp-consent-error { border-color: #E8003D; background: #FFF0F3; }
.sfp-consent-check.sfp-consent-error input[type=checkbox] {
  outline: 2px solid #E8003D; outline-offset: 1px;
}
.sfp-consent-check label {
  font-size: 13px; color: #555; line-height: 1.5; cursor: pointer;
}
.sfp-consent-check .sfp-required {
  color: #E8003D; font-weight: 700; font-size: 12px; margin-left: 2px;
}

/* ── 대시보드 위젯 심플화 (v10.21) ───────────────── */
.sfp-stat-icon {
  display: none !important; /* 이모지 배경 완전 제거 */
}
.sfp-stat-card {
  padding: 20px !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 4px !important;
}
.sfp-stat-card strong { font-size: 24px !important; font-weight: 800 !important; color: #333 !important; }
.sfp-stat-card small { font-size: 13px !important; color: #888 !important; font-weight: 500 !important; }
.sfp-stat-card:hover { transform: none !important; border-color: #E5E7EB !important; }

/* ============================================================
   마이페이지 5탭 UI 개편 (v10.22)
   ============================================================ */

/* ── UI1: 사이드바 5개 메뉴 ──────────────────────── */
.sfp-mypage-nav-group h4 { display: none !important; } /* 섹션 헤더 제거 */
.sfp-mypage-nav-group + .sfp-mypage-nav-group { border-top: none !important; } /* 구분선 제거 */
.sfp-mypage-nav-group a {
  padding: 14px 16px !important; font-size: .92rem !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  border-right: 3px solid transparent !important; color: #666 !important;
  transition: all .12s !important;
}
.sfp-mypage-nav-group a:hover { background: #FFF0F3 !important; color: #E8003D !important; }
.sfp-mypage-nav-group a.active {
  background: #FFF0F3 !important; color: #E8003D !important;
  font-weight: 700 !important; border-right-color: #E8003D !important;
}

/* ── UI2: 업로드 대기 캠페인 카드 강조 ───────────── */
.sfp-camp-card-upload-pending {
  border: 2px solid #E8003D !important; order: -1; /* 상단 정렬 */
}
.sfp-camp-upload-badge {
  display: inline-block; font-size: .68rem; font-weight: 700;
  background: #E8003D; color: #fff; padding: 2px 8px; border-radius: 4px;
  margin-bottom: 6px;
}
.sfp-camp-upload-btn {
  display: block; width: 100%; text-align: center; padding: 10px;
  background: #E8003D; color: #fff; border: none; border-radius: 8px;
  font-size: .85rem; font-weight: 700; cursor: pointer; margin-top: 8px;
  text-decoration: none;
}
.sfp-camp-upload-btn:hover { background: #C50034; }

/* ── UI3: 캠페인 서브탭 ─────────────────────────── */
.sfp-subtabs {
  display: flex; gap: 0; border-bottom: 2px solid #E5E7EB; margin-bottom: 20px;
}
.sfp-subtab {
  padding: 10px 18px; font-size: .88rem; font-weight: 600; color: #888;
  cursor: pointer; border: none; background: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all .15s; white-space: nowrap;
}
.sfp-subtab:hover { color: #333; }
.sfp-subtab.active { color: #E8003D; border-bottom-color: #E8003D; font-weight: 700; }
.sfp-subtab-panel { display: none; }
.sfp-subtab-panel.active { display: block; animation: sfp-subtab-fadein .2s ease; }
@keyframes sfp-subtab-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ── UI4: 정산/포인트 섹션 카드 ──────────────────── */
.sfp-section-card {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 20px; margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.sfp-section-card-title {
  font-size: 14px; font-weight: 700; color: #333; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid #F3F4F6;
}

/* ── UI5: 모바일 하단 탭바 5개 ───────────────────── */
@media (max-width: 768px) {
  .sfp-mobile-tab .sfp-mobile-tab-inner {
    display: flex !important; width: 100% !important;
  }
  /* 5탭 균등 */
  .sfp-mobile-tab a, .sfp-mobile-tab .sfp-tab-item {
    flex: 1 1 0 !important; width: 0 !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 2px !important; min-width: 0 !important;
  }
  .sfp-mobile-tab a svg, .sfp-tab-icon { width: 22px !important; height: 22px !important; }
  .sfp-mobile-tab a span { font-size: 10px !important; }

  /* 서브탭 모바일 */
  .sfp-subtabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sfp-subtab { padding: 10px 14px; font-size: .82rem; }

  /* 섹션 카드 모바일 */
  .sfp-section-card { padding: 16px; border-radius: 10px; }
}

/* ── 사이드바 5메뉴 긴급 수정 (새 HTML 구조 대응) ─── */
.sfp-mypage-nav {
  display: flex !important; flex-direction: column !important;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 6px 0 !important; overflow: hidden;
}
.sfp-mypage-nav > a {
  display: block !important; padding: 14px 16px !important;
  font-size: .92rem !important; color: #555 !important;
  text-decoration: none !important; border-left: 3px solid transparent;
  transition: all .12s;
}
.sfp-mypage-nav > a:hover { background: #F9FAFB !important; color: #333 !important; }
.sfp-mypage-nav > a.active {
  background: #FFF0F3 !important; color: #E8003D !important;
  font-weight: 700 !important; border-left-color: #E8003D !important;
}

/* 모바일: 가로 탭으로 전환 */
@media (max-width: 768px) {
  .sfp-mypage-nav {
    flex-direction: row !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 0 !important; border: none !important;
    border-bottom: 2px solid #eee !important; padding: 0 !important;
    background: #fff !important;
  }
  .sfp-mypage-nav > a {
    white-space: nowrap !important; flex-shrink: 0 !important;
    padding: 12px 14px !important; font-size: .85rem !important;
    border-left: none !important; border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
  }
  .sfp-mypage-nav > a.active {
    border-left-color: transparent !important;
    border-bottom-color: #E8003D !important; background: none !important;
  }
}

/* ══════════════════════════════════════════════════════
   마이페이지 사이드바 최종 (모든 충돌 규칙 오버라이드)
   ══════════════════════════════════════════════════════ */

/* PC: 세로 리스트 */
.sfp-mypage-nav {
  display: flex !important; flex-direction: column !important;
  list-style: none !important; padding: 6px 0 !important; margin: 0 !important; gap: 0 !important;
  background: #fff !important; border: 1px solid #E5E7EB !important;
  border-radius: 12px !important; overflow: hidden !important;
}
.sfp-mypage-nav > a {
  display: block !important; padding: 12px 16px !important;
  color: #555 !important; text-decoration: none !important;
  border-left: 3px solid transparent !important; font-size: 14px !important;
  white-space: nowrap !important; transition: all .12s !important;
}
.sfp-mypage-nav > a:hover {
  background: #F9FAFB !important; color: #333 !important;
}
.sfp-mypage-nav > a.active {
  border-left-color: #E8003D !important; background: #FFF0F3 !important;
  color: #E8003D !important; font-weight: 600 !important;
}

/* 모바일: 사이드바 완전 숨김 (모바일 탭 nav로 대체) */
@media (max-width: 768px) {
  .sfp-mypage-sidebar { display: none !important; }
  .sfp-mypage-nav { display: none !important; }
}

/* ============================================================
   참여캠페인 채널 표기 + 승인대기 카드 (v10.23)
   ============================================================ */

/* ── UI2: 참여캠페인 채널/플랫폼 행 ──────────────── */
.sfp-app-channels { border-top: 1px solid #F3F4F6; margin-top: 10px; padding-top: 8px; }
.sfp-app-channel-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  font-size: 13px; color: #555;
}
.sfp-app-channel-row .sfp-platform-badge { width: 16px; height: 16px; flex-shrink: 0; }
.sfp-app-channel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfp-app-channel-status {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
}
.sfp-ch-status-approved { background: #D1FAE5; color: #065F46; }
.sfp-ch-status-pending  { background: #FEF3C7; color: #92400E; }
.sfp-ch-status-review   { background: #DBEAFE; color: #1E40AF; }
.sfp-app-channel-row .sfp-camp-upload-btn {
  flex: none; width: auto; padding: 6px 14px; font-size: .78rem; margin-top: 0;
}

/* ── UI3: 승인대기 카드 ──────────────────────────── */
.sfp-camp-card-pending {
  border: 1px solid #F59E0B !important; position: relative;
}
.sfp-camp-card-pending .sfp-camp-thumb-wrap::after {
  content: '승인대기'; position: absolute; inset: 0; z-index: 2;
  background: rgba(245,158,11,.15); display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: #92400E;
  border-radius: inherit;
}

/* ── B166: 내 채널 카드 내용 영역 밖으로 넘침 수정 ────────── */
.sfp-mypage-main .sfp-card-grid .sfp-camp-card,
.sfp-section .sfp-card-grid .sfp-camp-card-sm {
  overflow: hidden !important;
  box-sizing: border-box !important;
  word-break: break-word;
  min-width: 0;
}
.sfp-mypage-main .sfp-camp-card .sfp-camp-body,
.sfp-section .sfp-camp-card-sm .sfp-camp-body {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.sfp-mypage-main .sfp-camp-card h3,
.sfp-mypage-main .sfp-camp-card h4,
.sfp-section .sfp-camp-card-sm h3,
.sfp-section .sfp-camp-card-sm h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sfp-mypage-main .sfp-camp-card p,
.sfp-mypage-main .sfp-camp-card .sfp-link,
.sfp-section .sfp-camp-card-sm p,
.sfp-section .sfp-camp-card-sm .sfp-link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: block;
}
.sfp-mypage-main .sfp-camp-card .sfp-camp-body > div[style*="display:flex"],
.sfp-section .sfp-camp-card-sm .sfp-camp-body > div[style*="display:flex"] {
  width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
  gap: 8px;
}
.sfp-mypage-main .sfp-camp-card .sfp-btn,
.sfp-section .sfp-camp-card-sm .sfp-btn {
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── B161 재강화: 메인/마이페이지 홈 캠페인 카드 모바일 횡스크롤 ────── */
@media (max-width: 768px) {
  .sfp-mypage-main .sfp-section > .sfp-card-grid,
  .sfp-mypage-main .sfp-section > .sfp-card-grid-4 {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;
    gap: 12px !important;
    padding: 4px 16px 8px;
    margin: 0 -16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sfp-mypage-main .sfp-section > .sfp-card-grid::-webkit-scrollbar,
  .sfp-mypage-main .sfp-section > .sfp-card-grid-4::-webkit-scrollbar {
    display: none;
  }
  .sfp-mypage-main .sfp-section > .sfp-card-grid > .sfp-camp-card,
  .sfp-mypage-main .sfp-section > .sfp-card-grid-4 > .sfp-camp-card {
    flex: 0 0 160px !important;
    width: 160px !important;
    max-width: 160px !important;
    scroll-snap-align: start;
  }
  /* 랜딩 페이지 캠페인 카드도 !important 재강화 */
  .sfp-landing-camps > .sfp-landing-camp-card {
    flex: 0 0 180px !important;
    width: 180px !important;
    max-width: 180px !important;
  }
}

/* B173: 모바일 캠페인 목록 하단 횡스크롤바 흔적 제거 */
@media (max-width: 768px) {
  .sfp-wrap,
  #sfp-camp-grid,
  .sfp-card-grid,
  .sfp-card-grid-5,
  .sfp-card-grid-4,
  .sfp-landing-camps {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .sfp-wrap::-webkit-scrollbar,
  #sfp-camp-grid::-webkit-scrollbar,
  .sfp-card-grid::-webkit-scrollbar,
  .sfp-card-grid-5::-webkit-scrollbar,
  .sfp-card-grid-4::-webkit-scrollbar,
  .sfp-landing-camps::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }
  body { overflow-x: hidden !important; }
}

/* ── B179: 비로그인 모바일 헤더 로그인/회원가입 버튼 ────────── */
.sfp-header-login {
  display: flex;
  gap: 6px;
  align-items: center;
}
.sfp-header-login .btn-login {
  padding: 6px 12px;
  font-size: 13px;
  border: 1.5px solid #e53935;
  color: #e53935;
  border-radius: 6px;
  background: transparent;
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
  font-weight: 600;
}
.sfp-header-login .btn-login:hover {
  background: #fff0f3;
}
.sfp-header-login .btn-register {
  padding: 6px 12px;
  font-size: 13px;
  background: #e53935;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
  font-weight: 600;
  border: 1.5px solid #e53935;
}
.sfp-header-login .btn-register:hover {
  background: #c62828;
  border-color: #c62828;
}

/* ═══════════════════════════════════════════════════════════
   B186: 광고/제휴문의 폼 — 재작성
   대상 컨테이너: .sfp-inquiry-wrap
   ═══════════════════════════════════════════════════════════ */
.sfp-inquiry-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #222;
  font-size: 14px;
  line-height: 1.5;
}
.sfp-inquiry-wrap h1,
.sfp-inquiry-wrap .sfp-inquiry-title {
  font-size: 22px;
  font-weight: 800;
  color: #222;
  margin: 0 0 8px;
}
.sfp-inquiry-wrap .sfp-inquiry-desc {
  font-size: 14px;
  color: #666;
  margin: 0 0 24px;
}

/* ── 섹션 ─────────────────────────────────────────── */
.sfp-inquiry-section {
  padding: 24px 0;
  border-bottom: 1px solid #eee;
  margin: 0;
}
.sfp-inquiry-section:last-of-type {
  border-bottom: none;
}
.sfp-inquiry-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  margin: 0 0 14px;
  display: block;
}
.sfp-inquiry-section-title .sfp-required {
  color: #e53935;
  margin-left: 4px;
  font-weight: 700;
}
.sfp-inquiry-section-desc {
  font-size: 13px;
  color: #888;
  margin: -6px 0 12px;
}

/* ── 체크박스/라디오 커스텀 ──────────────────────── */
.sfp-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sfp-check-group .sfp-check-item {
  flex: 0 0 calc((100% - 36px) / 4);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  background: #fff;
  font-size: 14px;
  color: #333;
  user-select: none;
  box-sizing: border-box;
}
.sfp-check-group .sfp-check-item:hover {
  border-color: #e53935;
}
.sfp-check-group .sfp-check-item input[type="checkbox"],
.sfp-check-group .sfp-check-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.sfp-check-group .sfp-check-item .sfp-check-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  position: relative;
}
.sfp-check-group .sfp-check-item .sfp-check-mark::after {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
  transition: opacity .12s;
}
.sfp-check-group .sfp-check-item input:checked ~ .sfp-check-mark {
  background: #e53935;
  border-color: #e53935;
}
.sfp-check-group .sfp-check-item input:checked ~ .sfp-check-mark::after {
  opacity: 1;
}
.sfp-check-group .sfp-check-item input:checked ~ .sfp-check-label {
  color: #e53935;
  font-weight: 600;
}
.sfp-check-group .sfp-check-item:has(input:checked) {
  border-color: #e53935;
  background: #fff5f5;
}

/* ── 입력/textarea 공통 ──────────────────────────── */
.sfp-inquiry-wrap input[type="text"],
.sfp-inquiry-wrap input[type="tel"],
.sfp-inquiry-wrap input[type="email"],
.sfp-inquiry-wrap input[type="url"],
.sfp-inquiry-wrap select,
.sfp-inquiry-wrap textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  color: #222;
  background: #fff;
  transition: border-color .15s;
  font-family: inherit;
}
.sfp-inquiry-wrap input:focus,
.sfp-inquiry-wrap select:focus,
.sfp-inquiry-wrap textarea:focus {
  outline: none;
  border-color: #e53935;
}
.sfp-inquiry-wrap label.sfp-field-label {
  display: block;
  font-size: 13px;
  color: #555;
  font-weight: 500;
  margin-bottom: 6px;
}

/* ── textarea + 글자수 카운터 ─────────────────────── */
.sfp-textarea-wrap {
  position: relative;
}
.sfp-textarea-wrap textarea {
  min-height: 120px;
  border-radius: 8px;
  resize: vertical;
  padding-top: 14px;
  padding-right: 14px;
}
.sfp-textarea-wrap .sfp-char-counter {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 12px;
  color: #e53935;
  font-weight: 600;
  background: #fff;
  padding: 0 4px;
  pointer-events: none;
  transition: color .15s;
}
.sfp-textarea-wrap .sfp-char-counter.sfp-char-ok {
  color: #16a34a;
}

/* ── 담당자 정보 2열 그리드 ───────────────────────── */
.sfp-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── 약관 영역 (슬라이드다운) ─────────────────────── */
.sfp-terms-box {
  background: #f9f9f9;
  padding: 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.8;
  color: #555;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease, opacity .2s ease, padding .3s ease, margin .3s ease;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}
.sfp-terms-box.sfp-open {
  max-height: 600px;
  opacity: 1;
  padding: 16px;
  margin-top: 10px;
}
.sfp-terms-box .sfp-terms-content {
  white-space: pre-line;
}
.sfp-terms-box .sfp-terms-close {
  display: block;
  margin: 12px 0 0 auto;
  padding: 4px 10px;
  font-size: 12px;
  color: #666;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.sfp-terms-box .sfp-terms-close:hover {
  background: #f0f0f0;
}

/* ── 개인정보 동의 행 ─────────────────────────────── */
.sfp-agree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  font-size: 14px;
  color: #333;
}
.sfp-agree-row .sfp-agree-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.sfp-agree-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sfp-agree-row .sfp-check-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  position: relative;
}
.sfp-agree-row .sfp-check-mark::after {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
  transition: opacity .12s;
}
.sfp-agree-row input:checked ~ .sfp-check-mark {
  background: #e53935;
  border-color: #e53935;
}
.sfp-agree-row input:checked ~ .sfp-check-mark::after {
  opacity: 1;
}
.sfp-agree-row .sfp-terms-toggle {
  background: none;
  border: none;
  color: #e53935;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
  text-decoration: none;
}
.sfp-agree-row .sfp-terms-toggle:hover {
  text-decoration: underline;
}

/* ── 문의하기 제출 버튼 ───────────────────────────── */
.sfp-inquiry-wrap .sfp-submit-btn {
  display: block;
  width: 100%;
  height: 52px;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  margin-top: 24px;
  cursor: pointer;
  transition: background .15s;
}
.sfp-inquiry-wrap .sfp-submit-btn:hover {
  background: #000;
}
.sfp-inquiry-wrap .sfp-submit-btn:disabled {
  background: #999;
  cursor: not-allowed;
}

/* ── 유효성 에러 ───────────────────────────────────── */
.sfp-inquiry-wrap .sfp-field-invalid,
.sfp-inquiry-wrap input.sfp-field-invalid,
.sfp-inquiry-wrap select.sfp-field-invalid,
.sfp-inquiry-wrap textarea.sfp-field-invalid {
  border: 1.5px solid #e53935 !important;
}
.sfp-inquiry-wrap .sfp-check-group.sfp-field-invalid .sfp-check-item {
  border-color: #e53935;
}
.sfp-inquiry-wrap .sfp-field-error {
  font-size: 12px;
  color: #e53935;
  margin-top: 4px;
  display: block;
}

/* ── 결과 메시지 ───────────────────────────────────── */
.sfp-inquiry-wrap #sfp-contact-result,
.sfp-inquiry-wrap .sfp-inquiry-result {
  font-size: 14px;
  text-align: center;
  margin-top: 16px;
  min-height: 20px;
}

/* ── 모바일 ────────────────────────────────────────── */
@media (max-width: 768px) {
  .sfp-inquiry-wrap {
    padding: 24px 16px;
  }
  .sfp-inquiry-wrap h1,
  .sfp-inquiry-wrap .sfp-inquiry-title {
    font-size: 20px;
  }
  .sfp-inquiry-section {
    padding: 20px 0;
  }
  .sfp-check-group .sfp-check-item {
    flex: 0 0 calc((100% - 12px) / 2);
  }
  .sfp-contact-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sfp-inquiry-wrap .sfp-submit-btn {
    height: 48px;
    font-size: 15px;
  }
}

/* B193: 포인트 뱃지 */
.sfp-point-badge {
  display: inline-flex;
  align-items: center;
  background: #fff3f3;
  color: #e53935;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #ffcdd2;
}

/* ═══════════════════════════════════════════════════════════
   B217: 캠페인 카드 뱃지 — 영상타입 CSS 완전 재작성
   ═══════════════════════════════════════════════════════════ */

/* 카드/썸네일 배경 초기화 — 최우선 */
.sfp-card,
.sfp-campaign-card,
.sfp-camp-card,
.sfp-card-thumb,
.sfp-camp-thumb-wrap,
.sfp-card-thumb img,
.sfp-camp-thumb-wrap img {
  background-color: transparent !important;
}
.sfp-camp-card,
.sfp-campaign-card,
.sfp-card {
  background: #fff !important;
}

/* 썸네일 컨테이너 (뱃지 absolute 기준) */
.sfp-card-thumb,
.sfp-camp-thumb-wrap {
  position: relative;
  overflow: hidden;
}

/* 기존 3번 리본/순위/신청완료 뱃지 완전 제거 */
.sfp-card-ribbon,
.sfp-ribbon-urgent,
.sfp-ribbon-popular,
.sfp-ribbon-closing,
.sfp-ribbon-highpay,
.sfp-ribbon-rank,
.sfp-card-applied {
  display: none !important;
}

/* B216 잔존 — 언스코프드 타입 클래스 background 차단 */
.sfp-type-self_shot,
.sfp-type-final_provided,
.sfp-type-source_provided,
.sfp-type-self,
.sfp-type-provided,
.sfp-type-template,
.sfp-type-thumb-self,
.sfp-type-thumb-final,
.sfp-type-thumb-source {
  background: transparent !important;
  border: none !important;
}

/* B218: 영상타입 뱃지 — 우하단 진한 배경 + 흰 텍스트 (가독성 개선) */
.sfp-card-type-thumb {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  z-index: 3;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: -.2px;
}
/* 직접촬영 — 진한 초록 */
.sfp-vtype-self_shot {
  background: rgba(27, 94, 32, .88) !important;
  color: #ffffff !important;
  border: none !important;
}
/* 완성본제공 — 진한 파랑 */
.sfp-vtype-final_provided {
  background: rgba(13, 71, 161, .88) !important;
  color: #ffffff !important;
  border: none !important;
}
/* 소스활용 — 진한 보라 */
.sfp-vtype-source_provided {
  background: rgba(74, 20, 140, .88) !important;
  color: #ffffff !important;
  border: none !important;
}

/* 신청상태 뱃지 — 좌상단 */
.sfp-card-status-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 3;
  line-height: 1.2;
  white-space: nowrap;
}
.sfp-status-applied {
  background: rgba(255, 248, 225, .92);
  color: #f57f17;
  border: 1px solid #ffe082;
}
.sfp-status-pending {
  background: rgba(227, 242, 253, .92);
  color: #1565c0;
  border: 1px solid #90caf9;
}

/* 카테고리 뱃지 카드에서 숨김 */
.sfp-card .sfp-category-badge,
.sfp-campaign-card .sfp-cat-badge,
.sfp-camp-card .sfp-category-badge,
.sfp-camp-card .sfp-cat-badge {
  display: none !important;
}

/* 카드 body 인라인 제작유형 뱃지 (레거시 지원) + 툴팁 */
.sfp-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  line-height: 1.3;
  white-space: nowrap;
  background: transparent;
}
.sfp-card-thumb .sfp-type-badge,
.sfp-camp-thumb-wrap .sfp-type-badge {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}
.sfp-type-badge .sfp-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 99;
  pointer-events: none;
  line-height: 1.5;
}
.sfp-type-badge .sfp-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, .8);
}
.sfp-type-badge:hover .sfp-tooltip,
.sfp-type-badge.active .sfp-tooltip {
  display: block;
}
@media (max-width: 768px) {
  .sfp-type-badge .sfp-tooltip {
    white-space: normal;
    width: 180px;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   B221: 업로드 인증 폼 UI
   ═══════════════════════════════════════════════════════════ */

/* 채널별 폼 블록 */
.sfp-upload-channel-block {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  background: #fafafa;
}
.sfp-upload-channel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

/* 분석 제출 섹션 */
.sfp-analysis-section {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px dashed #ddd;
}
.sfp-analysis-section.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* 포인트 리워드 표시 */
.sfp-analysis-reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff3e0;
  color: #e65100;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
}

/* 남은 시간 안내 */
.sfp-analysis-timer {
  font-size: 12px;
  color: #999;
  margin-top: 6px;
}

/* 플랫폼별 안내 */
.sfp-analysis-guide {
  font-size: 12px;
  color: #555;
  background: #fff;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  line-height: 1.6;
  border-left: 3px solid #e53935;
}

/* 업로드 방식 선택 */
.sfp-upload-method {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   B228: 분석 입력 폼 UI
   ═══════════════════════════════════════════════════════════ */

/* 전체 섹션 컨테이너 */
.sfp-analysis-wrap {
  margin-top: 20px;
  border: 1px solid #c8e6c9;
  border-radius: 12px;
  padding: 20px;
  background: #f9fbe7;
}
.sfp-analysis-wrap.disabled {
  background: #f5f5f5;
  border-color: #e0e0e0;
  opacity: 0.65;
  pointer-events: none;
}

/* 헤더 */
.sfp-analysis-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 700;
  color: #2e7d32;
}
.sfp-analysis-point-badge {
  background: #fff3e0;
  color: #e65100;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

/* 안내 문구 */
.sfp-analysis-wrap .sfp-analysis-guide {
  background: #fff;
  border-left: 3px solid #43a047;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: 12px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* 섹션 소제목 */
.sfp-analysis-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e8f5e9;
}

/* 입력 필드 */
.sfp-analysis-field {
  margin-bottom: 12px;
}
.sfp-analysis-field label {
  display: block;
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
  font-weight: 500;
}
.sfp-analysis-field input,
.sfp-analysis-field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  box-sizing: border-box;
  background: #fff;
  font-family: inherit;
}
.sfp-analysis-field input:focus,
.sfp-analysis-field select:focus {
  border-color: #43a047;
  outline: none;
  box-shadow: 0 0 0 2px rgba(67, 160, 71, .15);
}

/* % 단위 입력 */
.sfp-input-percent {
  position: relative;
  display: flex;
  align-items: center;
}
.sfp-input-percent input {
  padding-right: 32px;
}
.sfp-input-percent::after {
  content: '%';
  position: absolute;
  right: 12px;
  color: #999;
  font-size: 13px;
  pointer-events: none;
}

/* 2열 그리드 */
.sfp-analysis-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 768px) {
  .sfp-analysis-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* 타이머 */
.sfp-analysis-wrap .sfp-analysis-timer {
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: #888;
  margin-top: 0;
}
.sfp-analysis-wrap .sfp-analysis-timer strong {
  color: #e53935;
  font-size: 15px;
}

/* 제출 버튼 */
.sfp-analysis-submit-btn {
  width: 100%;
  padding: 12px;
  background: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 16px;
  transition: background .15s;
}
.sfp-analysis-submit-btn:hover {
  background: #1b5e20;
}
.sfp-analysis-submit-btn:disabled {
  background: #9e9e9e;
  cursor: not-allowed;
}

/* 제출 완료 상태 */
.sfp-analysis-submitted {
  text-align: center;
  padding: 16px;
  color: #2e7d32;
  font-size: 13px;
  font-weight: 600;
}

/* B239: B235 .sfp-header-inquiry 완전 숨김 (PC 중복/모바일 깨짐 → 별도 링크 제거 정책) */
.sfp-header-inquiry {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   B234: 비로그인 모바일 하단 탭바
   ═══════════════════════════════════════════════════════════ */
.sfp-mobile-guest-nav { display: none; }

@media (max-width: 768px) {
  .sfp-mobile-guest-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: space-around;
    height: 56px;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 100;
    padding: 0 8px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .04);
  }
  .sfp-mobile-guest-nav a {
    flex: 1;
    font-size: 11px;
    color: #555;
    text-decoration: none;
    text-align: center;
    padding: 8px 4px;
    line-height: 1.3;
    white-space: nowrap;
  }
  .sfp-mobile-guest-nav a.sfp-btn-login {
    color: #e53935 !important;
    font-weight: 600 !important;
  }
  .sfp-mobile-guest-nav a.sfp-btn-register {
    background: #e53935;
    color: #fff !important;
    border-radius: 6px;
    padding: 6px 10px !important;
    font-weight: 600 !important;
    flex: 0 0 auto;
  }
  /* 비로그인 시 하단 탭바 공간 확보 */
  body:not(.logged-in) .sfp-wrap,
  body:not(.logged-in) .sfp-landing {
    padding-bottom: 72px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   B254: 채널 등록 로딩 대기 + 수동 입력 UI
   ═══════════════════════════════════════════════════════════ */

/* 로딩 대기 화면 */
.sfp-channel-wait {
  text-align: center;
  padding: 32px 20px;
}
.sfp-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f0f0f0;
  border-top-color: #e53935;
  border-radius: 50%;
  animation: sfp-spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes sfp-spin {
  to { transform: rotate(360deg); }
}
.sfp-wait-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}
.sfp-wait-sub {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}
.sfp-wait-timer {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

/* 수동 입력 폼 */
.sfp-manual-wrap {
  border: 1px solid #ffe082;
  border-radius: 12px;
  padding: 20px;
  background: #fffde7;
  margin-top: 12px;
}
.sfp-manual-header {
  text-align: center;
  margin-bottom: 16px;
}
.sfp-manual-icon {
  font-size: 24px;
  display: block;
  margin-bottom: 8px;
}
.sfp-manual-title {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
}
.sfp-manual-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}
.sfp-manual-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.sfp-manual-fields input,
.sfp-manual-fields select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  font-family: inherit;
}
.sfp-manual-fields input:focus,
.sfp-manual-fields select:focus {
  outline: none;
  border-color: #e53935;
}
.sfp-manual-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sfp-manual-wrap .sfp-btn-outline {
  background: #fff;
  border: 1px solid #ddd;
  color: #555;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.sfp-manual-wrap .sfp-btn-outline:hover {
  background: #f9f9f9;
  border-color: #bbb;
}

/* ── B257: 즉시 승인 뱃지 ─────────────────────────── */
.sfp-instant-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fff8e1;
  color: #f57f17;
  border: 1px solid #ffe082;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.sfp-card-body .sfp-instant-badge,
.sfp-camp-body .sfp-instant-badge {
  display: inline-flex;
}
.sfp-card-thumb .sfp-instant-badge,
.sfp-camp-thumb-wrap .sfp-instant-badge {
  display: none !important;
}

/* ── B259 최종: FAQ 탭 (실제 클래스: .sfp-faq-tabs > .sfp-filter-btn) ── */
.sfp-faq-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 8px !important;
  padding: 4px 4px 12px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  align-items: center !important;
}
.sfp-faq-tabs::-webkit-scrollbar {
  display: none !important;
}
.sfp-faq-tabs .sfp-filter-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-width: max-content !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  border: 1.5px solid #ddd !important;
  background: #fff !important;
  color: #555 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  outline: none !important;
}
.sfp-faq-tabs .sfp-filter-btn.active,
.sfp-faq-tabs .sfp-filter-btn.active * {
  background: #e53935 !important;
  color: #ffffff !important;
  border-color: #e53935 !important;
  font-weight: 700 !important;
}
.sfp-faq-tabs .sfp-filter-btn:hover:not(.active) {
  border-color: #e53935 !important;
  color: #e53935 !important;
  background: #fff !important;
}

/* ── B265: 광고주 희망 플랫폼 SVG 아이콘 체크박스 ────────── */
.sfp-platform-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 16px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.sfp-platform-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.sfp-platform-check .sfp-platform-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.sfp-platform-check .sfp-platform-icon svg {
  display: block;
}
.sfp-platform-check:has(input:checked) {
  border-color: #e53935;
  background: #fff5f5;
}
.sfp-platform-check input:checked ~ span {
  font-weight: 600;
}
.sfp-platform-check:hover {
  border-color: #f5a5a8;
}

/* ── B268: 결제 페이지 심플 레이아웃 ─────────────────── */
.sfp-payment-page {
  background: #f5f5f5 !important;
  min-height: 100vh;
  margin: 0;
}
.sfp-payment-header {
  background: #fff;
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
  text-align: center;
}
.sfp-payment-header a {
  text-decoration: none;
  color: #333;
  font-weight: 700;
  font-size: 18px;
}
.sfp-payment-header img {
  height: 32px;
  width: auto;
  display: inline-block;
}
.sfp-payment-footer {
  text-align: center;
  padding: 24px;
  color: #999;
  font-size: 12px;
}