:root{
  --brand:#0a49b6; --ink:#1d2433; --muted:#6b7280; --bg:#fff;
  --card:#f7faff; --line:#e2ecff; --accent:#1a73e8;
  --warn:#fff8d8; --warn-line:#ffe08a;
  --rad:16px; --shadow:0 10px 30px rgba(0,0,0,.06);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,'Noto Sans KR',Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* 헤더 & 네비 */
.topbar{background:var(--brand);color:#fff;position:sticky;top:0;z-index:20}
.wrap{max-width:1120px;margin:auto;padding:0 16px}
.header{display:flex;gap:28px;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.06)}
.brand img{height:24px}
.brand b{font-size:18px;color:#fff;white-space:nowrap}
.nav{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.nav a{font-size:15px;line-height:1;padding:10px 8px;color:#fff;opacity:.95;border-radius:8px}
.nav a:hover{opacity:1;text-decoration:underline}
.nav a.active{background:rgba(255,255,255,.14);font-weight:700;text-decoration:none}

/* 히어로(이미지+오버레이) */
.hero{
  background:linear-gradient(135deg,#ecf3ff,#e9f2ff);
  border-bottom:1px solid var(--line); position:relative; overflow:hidden;
}
.hero .media{
  position:absolute; inset:0; pointer-events:none; opacity:.22; /* 살짝 진하게 */
  mix-blend:normal;
  background: center/cover no-repeat var(--hero, none);
  transform:none;                  /* ← 스케일링 제거: 블러 방지 핵심 */
  image-rendering:auto;            /* (보정용, 배경에는 큰 차이 없지만 무해) */
  backface-visibility:hidden;      /* 일부 브라우저 렌더링 안정화 */
}
/* 데스크탑: 원본 대비 +20% (92/72 → 110/86) */
.hero>.wrap{
  padding:110px 16px 86px;
  text-align:center;
  position:relative;
}
.hero h1{margin:0 0 12px;font-size:36px;color:#0d3ea9;letter-spacing:-0.2px}
.hero p{margin:0 0 24px;color:#4b5563}
.cta{
  display:inline-block;background:linear-gradient(135deg,#0d3ea9,#0a49b6);
  color:#fff;padding:12px 22px;border-radius:10px;font-weight:700;
  box-shadow:var(--shadow);transform:translateZ(0);transition:.18s
}
.cta:hover{filter:brightness(1.05);text-decoration:none;transform:translateY(-1px)}

/* 본문 공통 */
main{padding:40px 16px}
h1{font-size:26px;margin:0 0 12px;color:#0d3ea9}
h2{font-size:20px;margin:22px 0 10px;color:#0d3ea9}

/* 카드/그리드 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{
  background:linear-gradient(#fff,#fff) padding-box,
             radial-gradient(120% 120% at 0% 0%,#dfe9ff,#ffffff) border-box;
  border:1px solid transparent;border-radius:var(--rad);padding:18px;box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,