/* site-now: 나우체험단 전역 스타일 (모든 페이지에 로드)
   views/partials/header.ejs 에서 로드되어 홈/서브페이지 공통 적용.
   홈 전용 섹션 스타일은 home-now.css 로 분리.

   아키텍처:
   1. CSS 변수(--brand/--brand-deep/--brand-light)를 티얼 팔레트로 오버라이드
      → var(--brand) 쓰는 모든 기존 요소 자동 전파
   2. site-theme.css 에 하드코딩된 블루(#1d4ed8/#2563eb) 규칙은 명시적으로 티얼 오버라이드
   3. 서브페이지 컨테이너 max-width 를 홈(1600px)과 동일하게 맞춤
   4. /campaigns 리스트 페이지 그리드/카드 스타일을 홈 REVU 느낌에 맞게 조정

   팔레트:
     --brand:       #14b8a6 (teal-500, 메인)
     --brand-deep:  #0f766e (teal-700, 강조)
     --brand-light: #f0fdfa (teal-50,  배경 틴트)
     surface:       #f5f7fa (body)
*/

/* ============================================================
   1. CSS 변수 오버라이드 — 티얼 팔레트
   body.site-now 가 header.ejs 의 :root 보다 specificity 높음
   ============================================================ */
body.site-now {
  --brand: #14b8a6 !important;
  --brand-deep: #0f766e !important;
  --brand-light: #f0fdfa !important;
  font-family: "Gmarket Sans", "Pretendard", "Noto Sans KR", sans-serif;
  background: #f5f7fa !important;
  color:#0f172a;
}

/* ============================================================
   2. site-theme.css 하드코딩 블루 → 티얼 오버라이드
   ============================================================ */
body.site-now .ms-topbar {
  background: linear-gradient(90deg, #0f766e, #14b8a6) !important;
}
body.site-now .ms-header {
  border-bottom: 1px solid rgba(20,184,166,0.18) !important;
}
body.site-now .ms-chip {
  background: #f0fdfa !important;
  color: #0f766e !important;
  border-color: rgba(20,184,166,0.25) !important;
}
body.site-now .ms-chip.hot {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
}
body.site-now .hero-badge.primary,
body.site-now .campaign-badge.primary {
  background: #14b8a6 !important;
  color:#fff !important;
}
body.site-now .hero-promo,
body.site-now .campaign-body .promo {
  background: #f0fdfa !important;
  color: #0f766e !important;
}
/* auth 페이지 브랜드 그라디언트 */
body.site-now.auth-login .auth-brand,
body.site-now.auth-join .join-shell {
  background: linear-gradient(140deg, #0f766e, #14b8a6) !important;
}
body.site-now.auth-reg-influencer .reg-card,
body.site-now.auth-reg-advertiser .adv-reg-card {
  border-top: 4px solid #14b8a6 !important;
}

/* ============================================================
   3. 헤더(now-header-wrap) 컨테이너 폭 — 거의 풀폭
   ============================================================ */
.site-now .now-head-inner {
  max-width:1600px !important;
  padding:18px 40px 14px !important;
}
.site-now .now-nav-inner {
  max-width:1600px !important;
  padding:0 40px !important;
}

/* ============================================================
   4. 헤더 비주얼 — REVU 흰 배경 + 티얼 액센트
   ============================================================ */
.site-now .now-header-wrap {
  background:#fff !important;
  border-bottom:1px solid #eef1f6 !important;
  box-shadow:0 1px 0 rgba(15,23,42,0.02);
}
.site-now .now-header-wrap .ms-brand-mark {
  background:linear-gradient(135deg,#14b8a6,#0891b2) !important;
  border:none !important;
  box-shadow:0 6px 18px rgba(20,184,166,0.32);
  color:#fff !important;
}
.site-now .now-header-wrap .ms-brand-text strong {
  color:#0f172a !important;
  font-size:22px;
  letter-spacing:-0.035em;
}
.site-now .now-header-wrap .ms-brand-text span {
  color:#64748b !important;
  font-weight:600;
}

.site-now .now-header-wrap .ms-search-box {
  border:1.5px solid #e2e8f0 !important;
  border-radius:10px !important;
  background:#f8fafc !important;
  height:44px;
  transition:border-color .15s, background .15s;
}
.site-now .now-header-wrap .ms-search-box:focus-within {
  border-color:#14b8a6 !important;
  background:#fff !important;
}
.site-now .now-header-wrap .ms-search-box input {
  color:#0f172a !important;
  font-size:14px;
}
.site-now .now-header-wrap .now-search-input::placeholder {
  color:#94a3b8 !important;
}
.site-now .now-header-wrap .ms-search-box button {
  background:transparent !important;
  border-left:1px solid #e2e8f0 !important;
  color:#475569 !important;
  font-weight:800;
  border-radius:0 8px 8px 0 !important;
  width:80px !important;
}

.site-now .now-header-wrap .ms-actions .ms-btn {
  background:#fff !important;
  border:1px solid #e2e8f0 !important;
  color:#334155 !important;
  border-radius:999px !important;
  font-weight:700;
  height:40px !important;
  min-height:40px !important;
  font-size:13px !important;
  padding:0 18px !important;
  transition:border-color .15s ease, background .15s ease;
}
.site-now .now-header-wrap .ms-actions .ms-btn:hover {
  border-color:#14b8a6 !important;
  background:#f0fdfa !important;
}
.site-now .now-header-wrap .ms-actions a[href="/auth/register"],
.site-now .now-header-wrap .ms-actions .ms-btn.primary {
  background:linear-gradient(135deg,#14b8a6,#0891b2) !important;
  border:none !important;
  color:#fff !important;
  font-weight:900;
  padding:0 22px !important;
  box-shadow:0 6px 18px rgba(20,184,166,0.32);
  transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.site-now .now-header-wrap .ms-actions a[href="/auth/register"]:hover,
.site-now .now-header-wrap .ms-actions .ms-btn.primary:hover {
  opacity:0.88;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(20,184,166,0.42);
}
.site-now .now-header-wrap .ms-ham span {
  background:#334155 !important;
}

/* ── 카테고리 메뉴 nav bar ── */
.site-now .now-nav-bar {
  background:#fff !important;
  border-top:1px solid #f1f5f9 !important;
}
.site-now .now-nav-inner a {
  color:#64748b !important;
  height:44px !important;
  font-weight:700 !important;
  font-size:13px !important;
  border-bottom:2px solid transparent !important;
  padding:0 16px !important;
  transition:color .15s, border-color .15s;
}
.site-now .now-nav-inner a:hover {
  color:#14b8a6 !important;
  border-bottom-color:#14b8a6 !important;
}

/* ============================================================
   5. 서브페이지 컨테이너 폭 — 홈과 동일 1600px
   ============================================================ */
.site-now .list-shell {
  max-width:1600px !important;
  padding:24px 40px 72px !important;
}
.site-now .detail-wrap {
  max-width:1600px !important;
  padding:0 40px !important;
}
.site-now .reco-page {
  max-width:1600px !important;
  padding:32px 40px !important;
}
.site-now .main-wrap {
  max-width:1600px !important;
}
.site-now .my-layout {
  max-width:1600px !important;
  padding:24px 40px !important;
}
/* 마이페이지 통계/추천 카드 — 나우 즉시성 톤 */
.site-now .my-layout .stat-card {
  border:none !important;
  box-shadow:
    rgba(0,0,0,0.05) 0px 0px 0px 1px,
    rgba(0,0,0,0.02) 0px 2px 4px -2px !important;
}
.site-now .my-layout .stat-card:hover {
  box-shadow:
    rgba(20,184,166,0.24) 0px 0px 0px 1px,
    rgba(20,184,166,0.1) 0px 12px 24px -8px !important;
}
.site-now .my-layout .mp-reco-panel {
  border-left:3px solid #14b8a6 !important;
  background:linear-gradient(90deg, rgba(20,184,166,0.04), transparent 50%) !important;
}
.site-now .my-layout .mp-grade-label,
.site-now .my-layout .stat-label {
  font-weight:600 !important;
  letter-spacing:-0.02em !important;
}
.site-now .footer-inner {
  max-width:1600px !important;
}
.site-now .header-inner,
.site-now .tab-bar-inner {
  max-width:1600px !important;
}

/* ============================================================
   6. 캠페인 리스트 페이지 (/campaigns) — 그리드 6 cols + 카드 스타일
   ============================================================ */
.site-now .list-shell .grid.cols-5,
.site-now .list-shell .grid.cols-4,
.site-now .list-shell .grid.cols-3 {
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:14px !important;
}
.site-now .list-shell .hero {
  border:none !important;
  border-radius:16px !important;
  background:linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%) !important;
  padding:28px 32px !important;
  box-shadow:
    rgba(20,184,166,0.12) 0px 0px 0px 1px,
    rgba(20,184,166,0.08) 0px 10px 24px -8px !important;
  position:relative;
  overflow:hidden;
}
.site-now .list-shell .hero::before {
  content:"";
  position:absolute;
  top:-20px; right:-20px;
  width:140px; height:140px;
  background:radial-gradient(circle, rgba(20,184,166,0.18) 0%, transparent 70%);
  pointer-events:none;
}
.site-now .list-shell .hero h1 {
  color:#0f766e !important;
  font-weight:700 !important;
  font-size:1.5rem !important;
  letter-spacing:-0.04em !important;
}
.site-now .list-shell .hero p {
  color:#0d9488 !important;
  font-weight:500;
}
.site-now .list-shell .filter {
  border:1px solid #eef1f6 !important;
  border-radius:14px !important;
  background:#fff !important;
}
.site-now .list-shell .sel,
.site-now .list-shell .inp {
  border:1px solid #e2e8f0 !important;
  border-radius:10px !important;
  background:#f8fafc !important;
}
.site-now .list-shell .sel:focus,
.site-now .list-shell .inp:focus {
  border-color:#14b8a6 !important;
  background:#fff !important;
  outline:none;
}
.site-now .list-shell .btn {
  background:linear-gradient(135deg,#14b8a6,#0891b2) !important;
  border:none !important;
  border-radius:10px !important;
  box-shadow:0 4px 12px rgba(20,184,166,0.22) !important;
}
.site-now .list-shell .card {
  border-radius:12px !important;
  border:none !important;
  background:#fff !important;
  box-shadow:
    rgba(0,0,0,0.05) 0px 0px 0px 1px,
    rgba(0,0,0,0.02) 0px 2px 4px -2px !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.site-now .list-shell .card:hover {
  transform:translateY(-2px) !important;
  box-shadow:
    rgba(20,184,166,0.24) 0px 0px 0px 1px,
    rgba(20,184,166,0.12) 0px 12px 24px -8px,
    rgba(20,184,166,0.06) 0px 4px 8px -2px !important;
}
/* 마감임박 배지 강조 — 나우 포지셔닝 (urgent pulse) */
.site-now .list-shell .deadline-badge.urgent {
  background:#14b8a6 !important;
  color:#fff !important;
  box-shadow:0 0 0 0 rgba(20,184,166,0.7);
  animation:now-urgent-pulse 2s ease-in-out infinite;
}
@keyframes now-urgent-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(20,184,166,0.55); }
  50%     { box-shadow:0 0 0 6px rgba(20,184,166,0); }
}
.site-now .list-shell .card .title { color:#0f172a !important; }
.site-now .list-shell .card .promo {
  background:#f0fdfa !important;
  color:#0f766e !important;
}
.site-now .list-shell .card .badge.primary {
  background:#14b8a6 !important;
  color:#fff !important;
}
.site-now .list-shell .pages a {
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
  color:#475569 !important;
}
.site-now .list-shell .pages a:hover {
  border-color:#14b8a6 !important;
  color:#14b8a6 !important;
}
.site-now .list-shell .pages a.active {
  background:#14b8a6 !important;
  border-color:#14b8a6 !important;
  color:#fff !important;
}

/* ============================================================
   7. 캠페인 디테일 페이지 (/campaigns/:id)
   detail-wrap 은 grid 1fr+320px — 1600px 에서 넉넉
   ============================================================ */
.site-now .detail-wrap {
  grid-template-columns:minmax(0,1fr) 360px !important;
  gap:40px !important;
}
.site-now .detail-card,
.site-now .detail-section {
  background:#fff !important;
  border:none !important;
  border-radius:14px !important;
  box-shadow:
    rgba(0,0,0,0.05) 0px 0px 0px 1px,
    rgba(0,0,0,0.02) 0px 2px 4px -2px !important;
}
.site-now .detail-card h1,
.site-now .detail-card h2,
.site-now .detail-section h2 {
  font-weight:700 !important;
  letter-spacing:-0.035em !important;
}
.site-now .apply-card {
  box-shadow:
    rgba(20,184,166,0.16) 0px 0px 0px 1px,
    rgba(20,184,166,0.08) 0px 12px 28px -8px !important;
}
.site-now .btn-apply {
  background:linear-gradient(135deg,#14b8a6,#0891b2) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:14px 28px !important;
  font-weight:700 !important;
  letter-spacing:-0.01em !important;
  box-shadow:0 6px 18px rgba(20,184,166,0.32) !important;
  transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease !important;
  position:relative;
  overflow:hidden;
}
.site-now .btn-apply::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(20,184,166,0.7);
  animation:now-apply-pulse 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes now-apply-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(20,184,166,0.5); }
  50%     { box-shadow:0 0 0 10px rgba(20,184,166,0); }
}
.site-now .btn-apply:hover {
  opacity:0.92;
  transform:translateY(-1px);
}

/* ============================================================
   8. AI 추천 페이지 (/campaigns/recommended)
   ============================================================ */
.site-now .reco-page .reco-card {
  border:1px solid #eef1f6 !important;
  border-radius:14px !important;
  background:#fff !important;
}

/* ============================================================
   9. 반응형
   ============================================================ */
@media(max-width:1400px) {
  .site-now .now-head-inner { padding:16px 28px 12px !important; }
  .site-now .now-nav-inner { padding:0 28px !important; }
  .site-now .list-shell { padding:20px 28px 60px !important; }
  .site-now .detail-wrap { padding:0 28px !important; }
  .site-now .reco-page { padding:28px !important; }
  .site-now .my-layout { padding:20px 28px !important; }
  .site-now .list-shell .grid.cols-5,
  .site-now .list-shell .grid.cols-4,
  .site-now .list-shell .grid.cols-3 {
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
}
@media(max-width:1100px) {
  .site-now .list-shell .grid.cols-5,
  .site-now .list-shell .grid.cols-4,
  .site-now .list-shell .grid.cols-3 {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  .site-now .detail-wrap { grid-template-columns:1fr !important; }
}
@media(max-width:900px) {
  .site-now .now-head-inner { padding:12px 16px !important; }
  .site-now .now-nav-inner { padding:0 16px !important; }
  .site-now .list-shell { padding:14px 16px 56px !important; }
  .site-now .detail-wrap { padding:0 16px !important; }
  .site-now .reco-page { padding:18px 16px !important; }
  .site-now .my-layout { padding:16px !important; }
  .site-now .list-shell .grid.cols-5,
  .site-now .list-shell .grid.cols-4,
  .site-now .list-shell .grid.cols-3 {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media(max-width:640px) {
  .site-now .list-shell { padding:12px 12px 56px !important; }
  .site-now .list-shell .grid.cols-5,
  .site-now .list-shell .grid.cols-4,
  .site-now .list-shell .grid.cols-3 {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
}

/* ============================================================
   포커스 인디케이터 — now 브랜드 컬러 (#14b8a6)
   ============================================================ */
body.site-now a:focus-visible,
body.site-now button:focus-visible,
body.site-now input:focus-visible,
body.site-now textarea:focus-visible,
body.site-now select:focus-visible,
body.site-now [tabindex]:focus-visible {
  outline: 2px solid #14b8a6 !important;
  outline-offset: 2px !important;
}
body.site-now .campaign-card:focus-visible,
body.site-now .cp-card:focus-visible,
body.site-now .card:focus-visible,
body.site-now .nh3-card:focus-visible,
body.site-now .op-hero5-card:focus-visible,
body.site-now .op-brand-card:focus-visible,
body.site-now .op-midban-card:focus-visible,
body.site-now .uh3-card:focus-visible,
body.site-now .lh2-card:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px #14b8a6, 0 8px 24px rgba(0,0,0,0.08) !important;
}

/* ============================================================
   푸터 — 티얼 에너지 톤 (Linear/Revolut 인스피레이션)
   다크 베이스 유지하되 상단 그라디언트 액센트 + 티얼 호버
   ============================================================ */
body.site-now .footer {
  background: #0f1f1e !important;
  border-top: 3px solid transparent !important;
  border-image: linear-gradient(90deg, #14b8a6, #0891b2, #14b8a6) 1 !important;
  position: relative !important;
}
body.site-now .footer-logo { color: #2dd4bf !important; }
body.site-now .footer-tagline { color: rgba(45,212,191,0.88) !important; }
body.site-now .footer-links li a:hover,
body.site-now .footer-bottom-right a:hover { color: #2dd4bf !important; }
body.site-now .footer-family-link:hover {
  background: rgba(20,184,166,0.12) !important;
  border-color: #14b8a6 !important;
}

/* ── 나우 전용 3-column 레이아웃 ── */
body.site-now .footer-top-now {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1.1fr !important;
  gap: 48px !important;
  padding-bottom: 28px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
body.site-now .footer-brand-wide {
  max-width: 420px;
}
body.site-now .footer-now-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(20,184,166,0.1);
  border: 1px solid rgba(20,184,166,0.22);
  color: #5eead4;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
body.site-now .fnl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 0 0 rgba(20,184,166,0.65);
  animation: fnl-pulse 1.8s ease-in-out infinite;
}
@keyframes fnl-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(20,184,166,0.65); }
  50%     { box-shadow: 0 0 0 6px rgba(20,184,166,0); }
}
body.site-now .footer-now-actions h4 {
  color: #2dd4bf !important;
  margin-bottom: 14px;
}
body.site-now .footer-now-actions ul li a {
  color: rgba(255,255,255,0.62) !important;
  font-weight: 600;
  font-size: 0.86rem !important;
  line-height: 1.5;
  transition: color 0.15s, transform 0.15s;
  display: inline-block;
}
body.site-now .footer-now-actions ul li a:hover {
  color: #2dd4bf !important;
  transform: translateX(3px);
}
body.site-now .footer-now-biz {
  padding: 22px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(20,184,166,0.08), rgba(8,145,178,0.12));
  border: 1px solid rgba(20,184,166,0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
}
body.site-now .footer-now-biz h4 {
  color: #fff !important;
  margin-bottom: 2px;
  font-size: 1rem !important;
  letter-spacing: -0.02em;
}
body.site-now .footer-now-biz-desc {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.62);
}
body.site-now .footer-now-biz-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #14b8a6, #0891b2);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  font-size: 0.86rem;
  transition: opacity 0.18s, transform 0.18s;
  margin-top: 4px;
}
body.site-now .footer-now-biz-cta:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
body.site-now .footer-now-biz-link {
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.78rem;
  text-decoration: none;
  text-align: center;
  transition: color 0.15s;
}
body.site-now .footer-now-biz-link:hover { color: #2dd4bf !important; }

@media (max-width: 900px) {
  body.site-now .footer-top-now {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  body.site-now .footer-brand-wide { max-width: 100%; }
}