/* now (나우체험단) 홈 전용 오버라이드
   public/css/home.css 뒤에 로드되므로 사이트별 커스텀은 여기에서만.
   views/index.ejs 에서만 로드 (홈페이지 전용).

   사이트 전역 스타일(헤더/메뉴/컬러/컨테이너 폭)은 /css/site-now.css 로 분리됨.
   이 파일은 홈페이지 전용 섹션(3카드 hero, 카테고리 row, 섹션 카드, 7-cols 그리드)만 담당.
*/

/* ============================================================
   1. 홈 컨테이너 폭 — 거의 풀폭
   ============================================================ */
.site-now .home-wrap {
  max-width:1600px !important;
  padding:20px 40px 80px !important;
  background:transparent !important;
}

/* ============================================================
   2. 3-카드 Hero (REVU 시그니처)
   ============================================================ */
.site-now .now-hero3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:22px;
}
.site-now .nh3-card {
  display:flex;
  align-items:center;
  min-height:180px;
  padding:28px 28px 28px 32px;
  border-radius:18px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  gap:12px;
}
.site-now .nh3-card:hover {
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(15,23,42,0.12);
}
/* 3-카드 모두 티얼 브랜드 계열 — primary/cyan/emerald 3톤으로 구분 */
.site-now .nh3-primary {
  background:linear-gradient(135deg,#0f766e 0%,#14b8a6 55%,#2dd4bf 100%);
}
.site-now .nh3-cyan {
  background:linear-gradient(135deg,#0e7490 0%,#0891b2 55%,#06b6d4 100%);
}
.site-now .nh3-emerald {
  background:linear-gradient(135deg,#065f46 0%,#059669 55%,#10b981 100%);
}
/* 레거시 클래스 호환 — 혹시 외부 링크가 참조할 경우 대비 */
.site-now .nh3-blue   { background:linear-gradient(135deg,#0f766e,#14b8a6,#2dd4bf); }
.site-now .nh3-green  { background:linear-gradient(135deg,#0e7490,#0891b2,#06b6d4); }
.site-now .nh3-orange { background:linear-gradient(135deg,#065f46,#059669,#10b981); }
.site-now .nh3-body {
  flex:1;
  min-width:0;
  color:#fff;
  position:relative;
  z-index:2;
}
.site-now .nh3-body strong {
  display:block;
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-0.05em;
  line-height:1.15;
  margin-bottom:10px;
}
.site-now .nh3-body p {
  margin:0;
  font-size:0.86rem;
  line-height:1.55;
  color:rgba(255,255,255,0.95);
}
.site-now .nh3-img {
  width:140px;
  height:140px;
  flex-shrink:0;
  object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,0.12));
  position:relative;
  z-index:2;
}

/* ============================================================
   3. 12 카테고리 아이콘 Row (REVU 시그니처)
   ============================================================ */
.site-now .now-cat-row {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:10px;
  padding:22px 18px;
  background:#fff;
  border-radius:18px;
  margin-bottom:22px;
  border:1px solid #f1f5f9;
  box-shadow:0 1px 3px rgba(15,23,42,0.03);
}
.site-now .nci {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  padding:6px 4px;
  border-radius:12px;
  transition:transform .15s ease;
}
.site-now .nci:hover { transform:translateY(-2px); }
.site-now .nci-emo {
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--ci-bg,#f1f5f9);
  color:var(--ci-fg,#0f172a);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.7rem;
  box-shadow:0 4px 12px rgba(15,23,42,0.05);
}
.site-now .nci-lbl {
  font-size:0.76rem;
  font-weight:800;
  color:#334155;
  letter-spacing:-0.015em;
}

/* ============================================================
   4. 섹션 카드 — 깔끔한 흰 카드
   ============================================================ */
.site-now .section {
  background:#fff !important;
  border-radius:18px !important;
  padding:22px 24px !important;
  margin-bottom:18px !important;
  border:1px solid #f1f5f9;
  box-shadow:0 1px 3px rgba(15,23,42,0.03);
}
.site-now .section-head { margin-bottom:18px !important; align-items:center !important; }
.site-now .section h2 {
  font-size:1.18rem !important;
  font-weight:900 !important;
  color:#0f172a !important;
  letter-spacing:-0.025em;
}
.site-now .section-head a {
  color:#14b8a6 !important;
  font-size:0.82rem !important;
  font-weight:800 !important;
  padding:6px 12px;
  border-radius:999px;
  background:#f0fdfa;
  transition:background .15s;
}
.site-now .section-head a:hover { background:#ccfbf1; }

/* 즉시 신청 가능 섹션 — 티얼 액센트 */
.site-now .now-instant-section {
  border:1px solid #99f6e4 !important;
  background:linear-gradient(180deg,#f0fdfa 0%,#fff 45%) !important;
  box-shadow:0 4px 20px rgba(20,184,166,0.08) !important;
}
.site-now .now-instant-section .section-head h2 {
  color:#0f766e !important;
}
.site-now .now-instant-caption {
  margin:-4px 0 14px;
  font-size:.84rem;
  color:#64748b;
}

/* ============================================================
   4-B. 지금 인기 지역 — Linear 스타일 클린 그리드
   (기존: 17개 무지개 그라디언트 + flex 좁아 텍스트 밀림 → 수직 카드)
   ============================================================ */
.site-now .nrg-caption {
  margin:-4px 0 14px;
  font-size:.84rem;
  color:#64748b;
}
.site-now .now-region-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
  gap:8px;
}
.site-now .nrg-chip {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:14px 10px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid #eef1f6;
  text-decoration:none;
  color:#0f172a;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
  min-height:86px;
  position:relative;
}
.site-now .nrg-chip:hover {
  border-color:#14b8a6;
  background:#f0fdfa;
  transform:translateY(-1px);
}
.site-now .nrg-emo {
  font-size:1.35rem;
  line-height:1;
}
.site-now .nrg-name {
  font-size:.9rem;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#0f172a;
}
.site-now .nrg-cnt {
  font-size:.72rem;
  font-weight:700;
  color:#64748b;
  background:#f1f5f9;
  padding:2px 8px;
  border-radius:999px;
}
.site-now .nrg-chip:hover .nrg-cnt {
  color:#0f766e;
  background:#ccfbf1;
}
@media(max-width:640px) {
  .site-now .now-region-grid {
    grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
    gap:6px;
  }
  .site-now .nrg-chip {
    padding:12px 8px 10px;
    min-height:78px;
  }
  .site-now .nrg-emo { font-size:1.2rem; }
  .site-now .nrg-name { font-size:.82rem; }
}

/* ============================================================
   5. 캠페인 카드 — 7 cols 그리드
   ============================================================ */
.site-now .cols-7 {
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  gap:14px !important;
}
.site-now .card-grid { gap:14px !important; }

.site-now .campaign-card {
  border:1px solid #eef1f6 !important;
  border-radius:12px !important;
  background:#fff !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.site-now .campaign-card:hover {
  transform:translateY(-4px) !important;
  box-shadow:0 12px 28px rgba(20,184,166,0.15) !important;
  border-color:#99f6e4 !important;
}
.site-now .campaign-card .thumb { aspect-ratio:1/1 !important; }
.site-now .campaign-card .body { padding:10px 11px 12px !important; }
.site-now .campaign-card .body h3 {
  font-size:0.82rem !important;
  font-weight:700 !important;
  color:#0f172a !important;
  line-height:1.4 !important;
  margin:0 0 5px !important;
}
.site-now .campaign-card .promo {
  font-size:0.72rem !important;
  color:#14b8a6 !important;
  font-weight:700 !important;
}
.site-now .campaign-card .meta { font-size:0.68rem !important; color:#94a3b8 !important; }
.site-now .campaign-card .badge.primary {
  background:rgba(20,184,166,0.92) !important;
  backdrop-filter:blur(4px);
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

/* AI 추천 섹션 (cols-4 유지) — 4 cols 단독 강조 */
.site-now .cols-4 {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

/* ============================================================
   6. 마감임박 리스트 — 레드 강조 유지
   ============================================================ */
.site-now .deadline-item {
  border:1px solid #fecaca !important;
  background:#fff !important;
  border-radius:12px !important;
  padding:12px !important;
  transition:transform .15s, box-shadow .15s;
}
.site-now .deadline-item:hover {
  transform:translateX(4px);
  box-shadow:0 6px 16px rgba(239,68,68,0.12);
}
.site-now .deadline-item img { width:56px !important; height:56px !important; border-radius:10px !important; }
.site-now .deadline-item .di-title { font-size:0.88rem !important; color:#0f172a !important; }
.site-now .deadline-item .di-badge {
  background:#fef2f2;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.7rem !important;
}

/* ============================================================
   7. mid-banner (CTA) — 파스텔 컬러 카드
   ============================================================ */
.site-now .mid-banner { gap:16px !important; margin-bottom:18px !important; }
.site-now .mid-link {
  border-radius:16px !important;
  padding:22px 24px !important;
  border:0 !important;
  min-height:130px;
  overflow:hidden;
  position:relative;
}
.site-now .mid-link.biz {
  background:linear-gradient(135deg,#f0fdfa 0%,#ccfbf1 100%) !important;
}
.site-now .mid-link.member {
  background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 100%) !important;
}
.site-now .mid-link .mid-top {
  font-size:0.68rem !important;
  font-weight:900 !important;
  letter-spacing:0.12em !important;
  color:#0f766e !important;
  margin-bottom:8px !important;
}
.site-now .mid-link.member .mid-top { color:#c2410c !important; }
.site-now .mid-link .mid-main {
  font-size:1.1rem !important;
  color:#0f172a !important;
  margin-bottom:8px !important;
}
.site-now .mid-link .mid-sub { color:#475569 !important; font-size:0.82rem !important; }
.site-now .mid-link .mid-btn {
  background:#fff !important;
  color:#0f766e !important;
  padding:8px 16px !important;
  font-size:0.78rem !important;
  border-radius:999px !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  margin-top:12px !important;
}
.site-now .mid-link .mid-icon { font-size:2.2rem !important; opacity:0.4 !important; }

/* ============================================================
   8. 반응형
   ============================================================ */
@media(max-width:1400px) {
  .site-now .home-wrap { padding:18px 28px 60px !important; }
  .site-now .cols-7 { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
  .site-now .now-cat-row { grid-template-columns:repeat(6,1fr); }
}
@media(max-width:1100px) {
  .site-now .cols-7 { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  .site-now .now-hero3 { grid-template-columns:1fr; gap:14px; }
  .site-now .nh3-card { min-height:150px; padding:24px 22px; }
  .site-now .nh3-body strong { font-size:1.2rem; }
  .site-now .nh3-img { width:110px; height:110px; }
}
@media(max-width:900px) {
  .site-now .home-wrap { padding:14px 16px 56px !important; }
  .site-now .cols-7 { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .site-now .now-cat-row { grid-template-columns:repeat(4,1fr); gap:8px; padding:16px 12px; }
  .site-now .nci-emo { width:52px; height:52px; font-size:1.5rem; }
  .site-now .nci-lbl { font-size:0.72rem; }
  .site-now .cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .site-now .section { padding:18px 14px !important; border-radius:14px !important; }
  .site-now .mid-banner { grid-template-columns:1fr !important; }
}
@media(max-width:640px) {
  .site-now .home-wrap { padding:12px 10px 50px !important; }
  .site-now .cols-7 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  .site-now .now-cat-row { grid-template-columns:repeat(4,1fr); padding:14px 10px; }
  .site-now .nci-emo { width:46px; height:46px; font-size:1.3rem; }
  .site-now .nci-lbl { font-size:0.66rem; }
  .site-now .nh3-card { padding:20px 18px; min-height:130px; }
  .site-now .nh3-body strong { font-size:1.05rem; }
  .site-now .nh3-body p { font-size:0.78rem; }
  .site-now .nh3-img { width:90px; height:90px; }
  .site-now .section h2 { font-size:1rem !important; }
  .site-now .campaign-card .body h3 { font-size:0.78rem !important; }
}

/* now-instant-section: 1열 → 3열 그리드, 카드 상하 간격 확대 (2026-04-23) */
.site-now .now-instant-section .deadline-list {
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:24px 16px !important;
}
@media (max-width:900px) {
  .site-now .now-instant-section .deadline-list {
    grid-template-columns:repeat(2, 1fr) !important;
    gap:20px 12px !important;
  }
}
@media (max-width:560px) {
  .site-now .now-instant-section .deadline-list {
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
}

/* 3열 그리드 셀 내부 overflow 방지 + 한글 줄바꿈 */
.site-now .now-instant-section .deadline-list .deadline-item {
  min-width:0;
  overflow:hidden;
}
.site-now .now-instant-section .deadline-list .deadline-item .di-body {
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
.site-now .now-instant-section .deadline-list .deadline-item .di-title,
.site-now .now-instant-section .deadline-list .deadline-item .di-meta {
  word-break:keep-all;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.site-now .now-instant-section .deadline-list .deadline-item .di-end {
  flex-shrink:0;
}
/* 3열 그리드 자체도 minmax(0,1fr)로 overflow 안전장치 */
.site-now .now-instant-section .deadline-list {
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width:900px) {
  .site-now .now-instant-section .deadline-list {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width:560px) {
  .site-now .now-instant-section .deadline-list {
    grid-template-columns:1fr !important;
  }
  .site-now .now-instant-section .deadline-list .deadline-item .di-title,
  .site-now .now-instant-section .deadline-list .deadline-item .di-meta {
    -webkit-line-clamp:unset;
  }
}