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

   컨셉: 리뷰노트 스타일 — 2카드 hero (시안+옐로우) + 4-아이콘 메뉴 + 5-cols 그리드
*/

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

/* ============================================================
   2. 2-카드 Hero (시안 앱 + 옐로우 상담)
   ============================================================ */
.site-local .lc-hero2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:22px;
}
.site-local .lh2-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:180px;
  padding:30px 32px;
  border-radius:16px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  gap:16px;
}
.site-local .lh2-card:hover {
  transform:translateY(-2px);
  box-shadow:
    rgba(13,148,136,0.12) 0px 0px 0px 1px,
    rgba(13,148,136,0.08) 0px 10px 24px -8px;
}
.site-local .lh2-app {
  background:#f0fdfa;
  border:1px solid #a7f3d0;
}
.site-local .lh2-consult {
  background:#fffbeb;
  border:1px solid #fde68a;
}
.site-local .lh2-body {
  flex:1;
  min-width:0;
  position:relative;
  z-index:2;
}
.site-local .lh2-app .lh2-body { color:#115e59; }
.site-local .lh2-consult .lh2-body { color:#78350f; }
.site-local .lh2-eyebrow {
  display:inline-block;
  font-size:0.7rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  margin-bottom:10px;
  letter-spacing:-0.005em;
}
.site-local .lh2-app .lh2-eyebrow {
  background:rgba(13,148,136,0.1);
  color:#0f766e;
}
.site-local .lh2-consult .lh2-eyebrow {
  background:rgba(245,158,11,0.12);
  color:#92400e;
}
.site-local .lh2-body strong {
  display:block;
  font-size:1.5rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.04em;
  margin-bottom:8px;
}
.site-local .lh2-body p {
  margin:0;
  font-size:0.84rem;
  line-height:1.55;
  opacity:0.9;
}
.site-local .lh2-img {
  width:150px;
  height:150px;
  flex-shrink:0;
  object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.12));
  position:relative;
  z-index:2;
}

/* ============================================================
   3. 4-아이콘 메뉴 row (리뷰노트 스타일 4개)
   ============================================================ */
.site-local .lc-icon-menu {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:10px;
  padding:22px 20px;
  background:#fff;
  border-radius:14px;
  margin-bottom:24px;
  box-shadow:
    rgba(0,0,0,0.06) 0px 0px 0px 1px,
    rgba(0,0,0,0.03) 0px 2px 4px -1px,
    rgba(0,0,0,0.03) 0px 8px 20px -8px;
}
.site-local .lim {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:10px;
  border-radius:12px;
  transition:background .15s ease;
}
.site-local .lim:hover { background:#f0fdfa; }
.site-local .lim-emo {
  width:60px;
  height:60px;
  border-radius:14px;
  background:#f0fdfa;
  color:#0d9488;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  box-shadow:0 0 0 1px rgba(13,148,136,0.08);
  transition:box-shadow .15s ease, background .15s ease;
}
.site-local .lim:hover .lim-emo {
  background:#ccfbf1;
  box-shadow:0 0 0 1px rgba(13,148,136,0.2), 0 4px 12px rgba(13,148,136,0.12);
}
.site-local .lim-lbl {
  font-size:0.84rem;
  font-weight:700;
  color:#334155;
  letter-spacing:-0.01em;
}

/* AI 추천 섹션 — 왼쪽 border 제거, 상단 액센트 radius 통일 */
.site-local .ai-rec-section {
  border-left:none !important;
  border-radius:14px !important;
  border-top:2px solid #0d9488 !important;
  padding-top:22px !important;
}
.site-local .ai-rec-section h2 {
  color:#0f172a !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* ============================================================
   4. 섹션 카드 — Vercel 쉐도우-보더 (border 없이 1px 쉐도우)
   ============================================================ */
.site-local .section {
  background:#fff !important;
  border-radius:14px !important;
  padding:24px 26px !important;
  margin-bottom:24px !important;
  border:none !important;
  box-shadow:
    rgba(0,0,0,0.06) 0px 0px 0px 1px,
    rgba(0,0,0,0.03) 0px 2px 4px -1px,
    rgba(0,0,0,0.03) 0px 8px 20px -8px !important;
}
.site-local .section-head { margin-bottom:18px !important; align-items:center !important; }
.site-local .section h2 {
  font-size:1.12rem !important;
  font-weight:700 !important;
  color:#0f172a !important;
  letter-spacing:-0.03em;
}
.site-local .section-head a {
  color:#0f766e !important;
  font-size:0.8rem !important;
  font-weight:800 !important;
  padding:6px 12px;
  border-radius:8px;
  background:#f0fdfa;
  transition:background .15s;
}
.site-local .section-head a:hover { background:#ccfbf1; }

/* ============================================================
   5. 캠페인 카드 — 5 cols, 심플 플랫 카드
   ============================================================ */
.site-local .cols-5 {
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
}
.site-local .cols-4 {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
}
.site-local .cols-3 {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
}

.site-local .campaign-card {
  border:none !important;
  border-radius:12px !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-local .campaign-card:hover {
  transform:translateY(-2px) !important;
  box-shadow:
    rgba(13,148,136,0.22) 0px 0px 0px 1px,
    rgba(13,148,136,0.1) 0px 12px 24px -8px,
    rgba(13,148,136,0.06) 0px 4px 8px -2px !important;
}
.site-local .campaign-card .thumb { aspect-ratio:1/1 !important; }
.site-local .campaign-card .body { padding:11px 12px 13px !important; }
.site-local .campaign-card .body h3 {
  font-size:0.84rem !important;
  font-weight:700 !important;
  color:#0f172a !important;
  line-height:1.4 !important;
  margin:0 0 5px !important;
}
.site-local .campaign-card .promo {
  font-size:0.74rem !important;
  color:#0f766e !important;
  font-weight:700 !important;
}
.site-local .campaign-card .meta { font-size:0.7rem !important; color:#94a3b8 !important; }
.site-local .campaign-card .badge.primary {
  background:#0d9488 !important;
  color:#fff !important;
}

/* ============================================================
   6. mid-banner — 심플 파스텔
   ============================================================ */
.site-local .mid-banner { gap:16px !important; margin-bottom:18px !important; }
.site-local .mid-link {
  border-radius:14px !important;
  padding:22px 24px !important;
  border:1px solid #e2e8f0 !important;
  min-height:130px;
  overflow:hidden;
  position:relative;
}
.site-local .mid-link.biz {
  background:linear-gradient(135deg,#f0fdfa 0%,#ccfbf1 100%) !important;
}
.site-local .mid-link.member {
  background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%) !important;
}
.site-local .mid-link .mid-top {
  font-size:0.68rem !important;
  font-weight:700 !important;
  letter-spacing:0.1em !important;
  color:#0f766e !important;
  margin-bottom:8px !important;
}
.site-local .mid-link.member .mid-top { color:#92400e !important; }
.site-local .mid-link .mid-main {
  font-size:1.08rem !important;
  color:#0f172a !important;
  margin-bottom:8px !important;
  font-weight:700 !important;
  letter-spacing:-0.025em !important;
}
.site-local .mid-link .mid-sub { color:#475569 !important; font-size:0.82rem !important; }
.site-local .mid-link .mid-btn {
  background:#fff !important;
  color:#0f766e !important;
  padding:8px 16px !important;
  font-size:0.78rem !important;
  border-radius:8px !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
  margin-top:12px !important;
}
.site-local .mid-link .mid-icon { font-size:2rem !important; opacity:0.4 !important; }

/* ============================================================
   7. 기존 .local-hero-banner 숨김 (새 lc-hero2 로 교체)
   ============================================================ */
.site-local .local-hero-banner { display:none !important; }

/* ============================================================
   8. 반응형
   ============================================================ */
@media(max-width:1400px) {
  .site-local .home-wrap { padding:20px 28px 60px !important; }
  .site-local .cols-5 { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
@media(max-width:1100px) {
  .site-local .cols-5 { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .site-local .cols-4 { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .site-local .lc-hero2 { grid-template-columns:1fr; gap:14px; }
  .site-local .lh2-card { min-height:150px; padding:24px 26px; }
  .site-local .lh2-body strong { font-size:1.35rem; }
  .site-local .lh2-img { width:120px; height:120px; }
}
@media(max-width:900px) {
  .site-local .home-wrap { padding:14px 16px 56px !important; }
  .site-local .cols-5 { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .site-local .cols-4,
  .site-local .cols-3 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .site-local .lc-icon-menu { grid-template-columns:repeat(4,1fr); padding:20px 14px; gap:10px; }
  .site-local .lim-emo { width:54px; height:54px; font-size:1.55rem; }
  .site-local .lim-lbl { font-size:0.76rem; }
  .site-local .section { padding:18px 14px !important; border-radius:12px !important; }
  .site-local .mid-banner { grid-template-columns:1fr !important; }
}
@media(max-width:640px) {
  .site-local .home-wrap { padding:12px 10px 50px !important; }
  .site-local .cols-5,
  .site-local .cols-4,
  .site-local .cols-3 {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .site-local .lc-icon-menu { grid-template-columns:repeat(4,1fr); padding:16px 10px; gap:6px; }
  .site-local .lim { padding:6px; gap:6px; }
  .site-local .lim-emo { width:46px; height:46px; font-size:1.3rem; }
  .site-local .lim-lbl { font-size:0.7rem; }
  .site-local .lh2-card { padding:20px 18px; min-height:140px; }
  .site-local .lh2-body strong { font-size:1.1rem; }
  .site-local .lh2-body p { font-size:0.78rem; }
  .site-local .lh2-img { width:100px; height:100px; }
  .site-local .section h2 { font-size:1rem !important; }
}