:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#1d4ed8;
  --brand-soft:#dbeafe;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Pretendard",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.72;
  color:var(--text);
  background:var(--bg);
}

.wrap{max-width:980px;margin:0 auto;padding:0 20px}

.site-header{
  background:linear-gradient(180deg,#0f172a 0%,#111827 68%,#1f2937 100%);
  color:#fff;
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.header-inner{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand-badge{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.28);
  padding:4px 8px;
  border-radius:999px;
}

.top-nav a{
  color:#dbeafe;
  text-decoration:none;
  margin-left:16px;
  font-size:.95rem;
}
.top-nav a:hover{color:#fff}

.hero{padding:20px 20px 0}
.kicker{color:#93c5fd;font-size:.92rem;margin:0 0 8px}
.hero-title{
  margin:0;
  font-size:clamp(1.45rem,2.8vw,2.1rem);
  line-height:1.34;
  letter-spacing:-.02em;
}
.hero-title span{color:#bfdbfe}

.main-content{padding:34px 20px}

.section-head h2{margin:0 0 8px;font-size:1.35rem}
.section-head p{margin:0;color:var(--muted)}

.post-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}

.post-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}
.post-card h3{margin:6px 0 10px;line-height:1.4;font-size:1.06rem}
.post-card p{margin:0;color:#374151}
.card-meta{font-size:.84rem;color:var(--muted)}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.read-more{display:inline-block;margin-top:12px;font-weight:600}

.post-wrap{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.post-wrap h1{margin-top:0;line-height:1.35;letter-spacing:-.02em}
.meta{color:var(--muted);font-size:.93rem}
.tags{margin:8px 0 18px}
.tag{
  display:inline-block;
  font-size:.78rem;
  background:var(--brand-soft);
  color:#1e3a8a;
  border-radius:999px;
  padding:4px 10px;
  margin-right:6px;
}

.post-content h2,.post-content h3{margin-top:1.4em}
.post-content ul{padding-left:20px}

.disclaimer-box{
  margin-top:28px;
  background:#f9fafb;
  border:1px solid var(--line);
  border-left:4px solid #9ca3af;
  border-radius:10px;
  padding:14px;
  color:#374151;
  font-size:.94rem;
}

.footer{
  border-top:1px solid var(--line);
  padding:20px;
  margin:24px auto 10px;
  color:var(--muted);
}

@media (max-width:720px){
  .header-inner{display:block;padding-top:14px}
  .top-nav{margin-top:12px}
  .top-nav a{margin:0 14px 0 0}
}