/* ============================================================
   법률가이드 (blog) — bg- prefix
   ============================================================ */

body.page-id-24377 {
  background-color: #050E24 !important;
}
/* Top-level containers only — do NOT affect loop grid internals */
.elementor-24377 > .elementor-element.e-con,
.elementor-24377 > .elementor-element.e-con > .e-con-inner {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 0 !important;
}
.elementor-24377 > .elementor-element.e-con > .e-con-inner > .elementor-widget-text-editor,
.elementor-24377 > .elementor-element.e-con > .e-con-inner > .elementor-widget-text-editor > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  max-width: 100vw !important;
}

/* HERO — unified with cs-hero / tm-hero pattern */
.bg-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #050E24;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-image: url('/wp-content/uploads/2025/blog-gen/hero-blog-pc.jpg');
  overflow: hidden;
  padding: 100px 24px 80px;
}
.bg-hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(170deg, rgba(5,14,36,0.92) 0%, rgba(10,26,58,0.88) 35%, rgba(5,14,36,0.93) 100%);
  z-index: 0;
}
.bg-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 600px 400px at 70% 20%, rgba(212,168,80,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 400px 300px at 20% 80%, rgba(212,168,80,0.04) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.bg-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,168,80,0.3) 50%, transparent 100%);
  z-index: 2;
}
.bg-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
}
.bg-hero-badge {
  display: inline-block;
  background: rgba(212,168,80,0.1);
  color: #D4A850;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 28px;
  border-radius: 2px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 24px;
  border: 1px solid rgba(212,168,80,0.2);
}
.bg-hero h1 {
  color: #fff;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 28px;
  letter-spacing: -0.04em;
}
.bg-hero h1 em {
  font-style: normal;
  color: #D4A850;
}
.bg-hero-sub {
  color: rgba(255,255,255,0.55);
  font-size: 18px;
  line-height: 1.75;
  margin: 0;
  font-weight: 300;
}

/* ============================================================
   FILTER TABS — override .snf_success
   ============================================================ */
.bg-filter-wrap {
  background: #050E24;
  padding: 0 24px 48px;
}
.snf_success label {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(212,168,80,0.2) !important;
  color: rgba(255,255,255,0.6) !important;
  border-radius: 24px !important;
  font-weight: 500 !important;
  transition: all 0.25s !important;
}
.snf_success label:hover {
  border-color: #D4A850 !important;
  color: #D4A850 !important;
  background: rgba(212,168,80,0.08) !important;
}
.snf_success input[type=radio]:checked + label {
  background: #D4A850 !important;
  color: #050E24 !important;
  border-color: #D4A850 !important;
  font-weight: 700 !important;
}
.snf_success input[type=radio] + label {
  background: rgba(255,255,255,0.06) !important;
}
.snf_success ul {
  gap: 10px !important;
}

/* ============================================================
   POST LIST AREA
   ============================================================ */
.bg-posts-wrap {
  background: #F7F7F4;
  padding: 48px 24px 0;
}

/* Loop grid container */
.elementor-widget-loop-grid .elementor-loop-container {
  max-width: 1040px;
  margin: 0 auto;
}

/* Post cards */
.elementor-24377 .e-loop-item .elementor-element-8da4564 {
  border-color: rgba(5,14,36,0.08) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(5,14,36,0.04) !important;
  transition: all 0.3s !important;
  margin-bottom: 20px !important;
}
.elementor-24377 .e-loop-item .elementor-element-8da4564:hover {
  box-shadow: 0 8px 32px rgba(5,14,36,0.08) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(212,168,80,0.25) !important;
}

/* Post title */
.elementor-24377 .e-loop-item .elementor-element-476f7b2 .elementor-heading-title {
  color: #050E24 !important;
  font-weight: 700 !important;
  transition: color 0.2s;
}
.elementor-24377 .e-loop-item .elementor-element-476f7b2 .elementor-heading-title a {
  color: #050E24 !important;
  text-decoration: none !important;
}
.elementor-24377 .e-loop-item .elementor-element-476f7b2 .elementor-heading-title a:hover {
  color: #D4A850 !important;
}

/* Post excerpt */
.elementor-24377 .e-loop-item .elementor-element-b9579c5 .elementor-widget-container {
  color: #666 !important;
}

/* Author info */
.elementor-24377 .e-loop-item .elementor-post-info .elementor-icon-list-text {
  color: #444 !important;
}

/* "자세히 보기" button */
.elementor-24377 .e-loop-item .elementor-element-fa0295a .elementor-button {
  background-color: #050E24 !important;
  color: #D4A850 !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: all 0.2s !important;
}
.elementor-24377 .e-loop-item .elementor-element-fa0295a .elementor-button:hover {
  background-color: #0d1b3e !important;
}

/* Views count */
.elementor-24377 .e-loop-item .post-views {
  color: #888 !important;
  font-size: 13px !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.elementor-24377 .elementor-widget-loop-grid .e-load-more-anchor,
.elementor-24377 .elementor-widget-loop-grid nav.elementor-pagination {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 0 80px;
  text-align: center;
}
.elementor-24377 nav.elementor-pagination {
  gap: 8px !important;
}
.elementor-24377 nav.elementor-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 12px !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  background: #fff !important;
  color: #050E24 !important;
  border: 1px solid rgba(5,14,36,0.1) !important;
}
.elementor-24377 nav.elementor-pagination .page-numbers:hover {
  border-color: #D4A850 !important;
  color: #D4A850 !important;
}
.elementor-24377 nav.elementor-pagination .page-numbers.current {
  background: #050E24 !important;
  color: #D4A850 !important;
  border-color: #050E24 !important;
}

/* ============================================================
   CTA
   ============================================================ */
.bg-cta {
  background: #050E24;
  padding: 80px 24px;
  text-align: center;
  position: relative;
}
.bg-cta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,80,0.2), transparent);
}
.bg-cta h2 {
  color: #fff; font-size: 28px; font-weight: 800;
  margin: 0 0 12px; line-height: 1.4;
}
.bg-cta h2 em { color: #D4A850; font-style: normal; }
.bg-cta p { color: rgba(255,255,255,0.5); font-size: 16px; margin: 0 0 32px; }
.bg-cta .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.bg-cta .btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #D4A850; color: #050E24;
  padding: 16px 32px; border-radius: 4px;
  font-weight: 800; font-size: 16px;
  text-decoration: none; transition: all 0.2s;
}
.bg-cta .btn-primary:hover { background: #c49a3c; }
.bg-cta .btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: #D4A850;
  border: 1px solid rgba(212,168,80,0.4);
  padding: 16px 32px; border-radius: 4px;
  font-weight: 700; font-size: 16px;
  text-decoration: none; transition: all 0.2s;
}
.bg-cta .btn-secondary:hover { background: rgba(212,168,80,0.08); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .bg-hero {
    padding: 72px 20px 56px;
    background-image: url('/wp-content/uploads/2025/blog-gen/hero-blog-mo.jpg');
  }
  .bg-hero h1 { font-size: 32px; margin-bottom: 20px; }
  .bg-hero-sub { font-size: 15px; }
  .bg-filter-wrap { padding: 0 16px 32px; }
  .snf_success label {
    padding: 8px 14px !important;
    font-size: 13px !important;
    height: auto !important;
  }
  .snf_success ul {
    gap: 6px !important;
    padding-left: 0 !important;
  }
  .bg-posts-wrap { padding: 32px 16px 0; }
  .elementor-24377 nav.elementor-pagination .page-numbers {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }
  .bg-cta { padding: 60px 20px; }
  .bg-cta h2 { font-size: 22px; }
  .bg-cta .cta-buttons { flex-direction: column; gap: 12px; }
  .bg-cta .btn-primary,
  .bg-cta .btn-secondary { width: 100%; justify-content: center; }
}