/* home-udan: 우리동네체험단 홈 전용 오버라이드
   views/index.ejs 에서만 로드 (홈페이지 전용).
   전역 스타일은 /css/site-udan.css 로 분리됨.

   컨셉: 파블로 스타일 — 3카드 일러스트 hero + 12 카테고리 아이콘 + 6-cols 그리드
*/

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

/* ============================================================
   2. 3-카드 Hero (파블로 일러스트 스타일)
   ============================================================ */
.site-udan .ud-hero3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:24px;
}
.site-udan .uh3-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:200px;
  padding:30px 32px;
  border-radius:20px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  gap:12px;
}
.site-udan .uh3-card:hover {
  transform:translateY(-2px);
  box-shadow:
    rgba(180,83,9,0.12) 0px 0px 0px 1px,
    rgba(217,119,6,0.08) 0px 10px 24px -8px,
    rgba(0,0,0,0.04) 0px 4px 8px -2px;
}
/* 앰버 브랜드 3톤 — 파랑·보라·분홍 혼종 제거 */
.site-udan .uh3-biz {
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 50%,#d97706 100%);
}
.site-udan .uh3-faq {
  background:linear-gradient(135deg,#fb923c 0%,#f97316 55%,#c2410c 100%);
}
.site-udan .uh3-guide {
  background:linear-gradient(135deg,#a16207 0%,#78350f 55%,#451a03 100%);
}
.site-udan .uh3-body {
  flex:1;
  min-width:0;
  position:relative;
  z-index:2;
  color:#fff;
}
.site-udan .uh3-body .uh3-eyebrow {
  display:inline-block;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.08em;
  background:rgba(15,23,42,0.22);
  backdrop-filter:blur(6px);
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:10px;
  color:#fff;
}
.site-udan .uh3-biz .uh3-eyebrow { background:rgba(180,83,9,0.35); }
.site-udan .uh3-faq .uh3-eyebrow { background:rgba(154,52,18,0.4); }
.site-udan .uh3-guide .uh3-eyebrow { background:rgba(251,191,36,0.2); color:#fff; }
.site-udan .uh3-body strong {
  display:block;
  font-family:"Pretendard","Noto Sans KR",sans-serif;
  font-size:1.9rem;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.045em;
  margin-bottom:8px;
}
.site-udan .uh3-body p {
  margin:0;
  font-size:0.88rem;
  line-height:1.55;
  color:rgba(255,255,255,0.96);
  font-weight:500;
}
.site-udan .uh3-img {
  width:160px;
  height:160px;
  flex-shrink:0;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,0.14));
  position:relative;
  z-index:2;
}

/* ============================================================
   3. 12 카테고리 아이콘 Row (파블로 스타일)
   ============================================================ */
.site-udan .ud-cat-row {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:10px;
  padding:24px 20px;
  background:#fff;
  border-radius:22px;
  margin-bottom:22px;
  border:1px solid rgba(245,158,11,0.15);
  box-shadow:0 2px 8px rgba(245,158,11,0.05);
}
.site-udan .uci {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  padding:6px 4px;
  border-radius:14px;
  transition:transform .15s ease;
}
.site-udan .uci:hover { transform:translateY(-3px); }
.site-udan .uci-emo {
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--ci-bg,#fef3c7);
  color:var(--ci-fg,#92400e);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.75rem;
  box-shadow:0 4px 12px rgba(245,158,11,0.08);
}
.site-udan .uci-lbl {
  font-size:0.78rem;
  font-weight:800;
  color:#44403c;
  letter-spacing:-0.015em;
}

/* ============================================================
   4. 섹션 카드 — 크림 + 앰버 보더
   ============================================================ */
.site-udan .section {
  background:#fff !important;
  border-radius:22px !important;
  padding:24px 26px !important;
  margin-bottom:18px !important;
  border:1px solid rgba(245,158,11,0.15);
  box-shadow:0 2px 8px rgba(245,158,11,0.05);
}
.site-udan .section-head { margin-bottom:18px !important; align-items:center !important; }
.site-udan .section h2 {
  font-size:1.14rem !important;
  font-weight:700 !important;
  color:#78350f !important;
  letter-spacing:-0.035em;
}
.site-udan .section-head a {
  color:#b45309 !important;
  font-size:0.82rem !important;
  font-weight:800 !important;
  padding:6px 14px;
  border-radius:999px;
  background:#fef3c7;
  transition:background .15s;
}
.site-udan .section-head a:hover { background:#fde68a; }

/* 마감임박 섹션 — 앰버 강조 */
.site-udan .section[style*="border:2px solid #f59e0b"] {
  border:1px solid #fcd34d !important;
  background:linear-gradient(180deg,#fffbeb 0%,#fff 40%) !important;
  box-shadow:0 6px 22px rgba(245,158,11,0.12) !important;
}

/* ============================================================
   5. 캠페인 카드 — 6 cols 그리드, 라운드 크게
   ============================================================ */
.site-udan .cols-6 {
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:14px !important;
}
.site-udan .cols-4 {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
}
.site-udan .cols-3 {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
}
.site-udan .card-grid { gap:14px !important; }

.site-udan .campaign-card {
  border:1px solid rgba(245,158,11,0.18) !important;
  border-radius:22px !important;
  background:#fff !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.site-udan .campaign-card:hover {
  transform:translateY(-4px) !important;
  box-shadow:0 14px 32px rgba(245,158,11,0.18) !important;
  border-color:#fcd34d !important;
}
.site-udan .campaign-card .thumb { aspect-ratio:1/1 !important; }
.site-udan .campaign-card .body { padding:12px 13px 14px !important; }
.site-udan .campaign-card .body h3 {
  font-size:0.86rem !important;
  font-weight:700 !important;
  color:#1c1917 !important;
  line-height:1.4 !important;
  margin:0 0 5px !important;
}
.site-udan .campaign-card .promo {
  font-size:0.74rem !important;
  color:#b45309 !important;
  font-weight:700 !important;
}
.site-udan .campaign-card .meta { font-size:0.7rem !important; color:#a8a29e !important; }
.site-udan .campaign-card .badge.primary {
  background:#f59e0b !important;
  color:#fff !important;
}

/* ============================================================
   6. 지역 섹션 — 기존 유지 (파스텔 칩 느낌)
   ============================================================ */
.site-udan .section .region-chips a {
  background:#fef3c7 !important;
  border:1px solid rgba(245,158,11,0.25) !important;
}

/* ============================================================
   7. mid-banner — 파스텔 카드
   ============================================================ */
.site-udan .mid-banner { gap:16px !important; margin-bottom:18px !important; }
.site-udan .mid-link {
  border-radius:22px !important;
  padding:24px 26px !important;
  border:0 !important;
  min-height:140px;
  overflow:hidden;
  position:relative;
}
.site-udan .mid-link.biz {
  background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%) !important;
}
.site-udan .mid-link.member {
  background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%) !important;
}
.site-udan .mid-link .mid-top {
  font-size:0.68rem !important;
  font-weight:700 !important;
  letter-spacing:0.1em !important;
  color:#b45309 !important;
  margin-bottom:8px !important;
}
.site-udan .mid-link.member .mid-top { color:#92400e !important; }
.site-udan .mid-link .mid-main {
  font-size:1.1rem !important;
  color:#1c1917 !important;
  margin-bottom:8px !important;
  font-weight:700 !important;
  letter-spacing:-0.035em !important;
}
.site-udan .mid-link .mid-sub { color:#57534e !important; font-size:0.82rem !important; }
.site-udan .mid-link .mid-btn {
  background:#fff !important;
  color:#92400e !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-udan .mid-link .mid-icon { font-size:2.4rem !important; opacity:0.45 !important; }

/* ============================================================
   8. 반응형
   ============================================================ */
@media(max-width:1400px) {
  .site-udan .home-wrap { padding:18px 28px 60px !important; }
  .site-udan .cols-6 { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
  .site-udan .ud-cat-row { grid-template-columns:repeat(6,1fr); }
}
@media(max-width:1100px) {
  .site-udan .cols-6 { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  .site-udan .cols-4 { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .site-udan .ud-hero3 { grid-template-columns:1fr; gap:14px; }
  .site-udan .uh3-card { min-height:170px; padding:26px 28px; }
  .site-udan .uh3-body strong { font-size:1.8rem; }
  .site-udan .uh3-img { width:130px; height:130px; }
}
@media(max-width:900px) {
  .site-udan .home-wrap { padding:14px 16px 56px !important; }
  .site-udan .cols-6 { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .site-udan .cols-4,
  .site-udan .cols-3 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .site-udan .ud-cat-row { grid-template-columns:repeat(4,1fr); gap:8px; padding:18px 14px; }
  .site-udan .uci-emo { width:54px; height:54px; font-size:1.55rem; }
  .site-udan .uci-lbl { font-size:0.74rem; }
  .site-udan .section { padding:18px 16px !important; border-radius:18px !important; }
  .site-udan .mid-banner { grid-template-columns:1fr !important; }
}
@media(max-width:640px) {
  .site-udan .home-wrap { padding:12px 10px 50px !important; }
  .site-udan .cols-6,
  .site-udan .cols-4,
  .site-udan .cols-3 {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .site-udan .ud-cat-row { grid-template-columns:repeat(4,1fr); padding:14px 10px; }
  .site-udan .uci-emo { width:48px; height:48px; font-size:1.35rem; }
  .site-udan .uci-lbl { font-size:0.68rem; }
  .site-udan .uh3-card { padding:22px 20px; min-height:150px; }
  .site-udan .uh3-body strong { font-size:1.5rem; }
  .site-udan .uh3-body p { font-size:0.8rem; }
  .site-udan .uh3-img { width:110px; height:110px; }
  .site-udan .section h2 { font-size:1.04rem !important; }
}