:root{--bg:#f8fafc;--card:#ffffff;--ink:#334155;--ink-dim:#64748b;--line:#e2e8f0;--accent:#3b82f6;--good:#10b981}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;background:var(--bg);color:var(--ink);line-height:1.7}
.wrap{max-width:1100px;margin:0 auto;padding:28px 16px 80px}
.hero{padding:36px 18px;border-radius:24px;background:linear-gradient(180deg,rgba(148,163,184,.16),rgba(148,163,184,.06));box-shadow:0 10px 24px rgba(0,0,0,.35)}
.hero h1{margin:0 0 8px;font-size:clamp(22px,3.6vw,40px)}
.hero p{margin:0;color:var(--ink-dim)}
.grid{display:grid;grid-template-columns:1fr 280px;gap:22px;margin-top:22px}
@media (max-width:980px){.grid{grid-template-columns:1fr}}
.case{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 18px;box-shadow:0 4px 12px rgba(0,0,0,.08);margin-bottom:18px;transition:box-shadow 0.3s ease,transform 0.2s ease}.case:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px)}
.case h3{margin:0 0 12px;font-size:clamp(18px,2.4vw,26px)}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chip{font-size:13px;padding:6px 10px;border-radius:999px;background:#f1f5f9;border:1px solid var(--line);color:var(--accent);font-weight:500}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 18px}
@media (max-width:720px){.summary{grid-template-columns:1fr 1fr}}
.summary .box{background:rgba(59,130,246,.06);border:1px solid var(--line);border-radius:14px;padding:12px}
.summary .k{display:block;font-size:12px;color:var(--ink-dim)}
.summary .v{display:block;font-size:15px;margin-top:2px}
.divider{height:1px;background:var(--line);margin:14px 0}
.lead{display:inline-flex;align-items:center;gap:8px;font-size:19.5px;padding:6px 10px;border-radius:999px;border:1px dashed rgba(59,130,246,.35);color:var(--accent);background:rgba(59,130,246,.05);margin-bottom:40px}
.story p{margin:10px 0}
.story ul{margin:10px 0 4px 18px}
.success{color:var(--good);font-weight:700}
.toc{position:sticky;top:18px;align-self:start;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:18px;padding:16px 14px;backdrop-filter:blur(10px)}
.toc h2{margin:0 0 8px;font-size:15px;color:var(--accent)}
.toc a{display:block;padding:8px 10px;margin:6px 0;border-radius:12px;color:var(--ink);text-decoration:none;background:transparent;border:1px solid transparent}
.toc a:hover{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.18)}
.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.page-btn{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none}
.page-btn[aria-current="page"]{outline:2px solid var(--accent)}
.anchor{position:relative;scroll-margin-top:90px}

/* 사례 헤더 섹션 기본 스타일 */
.case-header-section {
  border-radius: 18px 18px 0 0 !important;
  padding: 30px !important;
  margin: -22px -18px 0 -18px !important;
}

/* 모든 사례에 배경 이미지 적용 - 최강 선택자 */
body .case .case-header-section.case-header-with-bg {
  position: relative !important;
  color: white !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 배경 이미지가 있는 헤더 섹션 내 텍스트를 흰색으로 */
.case-header-with-bg h3 {
  color: white !important;
  margin-top: 0 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.case-header-with-bg .chip {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(10px) !important;
}

.case-header-with-bg .summary .box {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  backdrop-filter: blur(10px) !important;
}

.case-header-with-bg .summary .box .k {
  color: rgba(255, 255, 255, 0.8) !important;
}

.case-header-with-bg .summary .box .v {
  color: white !important;
  font-weight: 600 !important;
}