/* OZero Security 블로그 전용 스타일 — tailwind purge에 의존하지 않는 독립 CSS */
:root{
  --bg:#0b1628; --panel:#0f1b30; --panel2:#13203a;
  --text:#cbd5e1; --text-strong:#f1f5f9; --muted:#94a3b8; --faint:#64748b;
  --sky:#38bdf8; --sky-strong:#0ea5e9; --border:#1e293b; --border2:#334155;
  --code-bg:#0a1220;
}
body{ background:var(--bg); }

/* ---------- 글 상세 ---------- */
.post-breadcrumb{ font-size:.8rem; color:var(--faint); margin-bottom:1rem; }
.post-breadcrumb a{ color:var(--muted); text-decoration:none; }
.post-breadcrumb a:hover{ color:var(--sky); }
.post-breadcrumb span{ margin:0 .35rem; }

.post-cluster{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.03em;
  color:var(--sky); background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.3);
  padding:.2rem .6rem; border-radius:999px; margin-bottom:.9rem;
}
.post-title{
  font-size:2rem; line-height:1.25; font-weight:800; color:var(--text-strong);
  letter-spacing:-.01em; margin:0 0 .9rem;
}
@media(min-width:640px){ .post-title{ font-size:2.4rem; } }
.post-meta{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  font-size:.85rem; color:var(--muted); padding-bottom:1.4rem; margin-bottom:2rem;
  border-bottom:1px solid var(--border); }

/* ---------- 본문 타이포 ---------- */
.post-body{ font-size:1.06rem; line-height:1.85; color:var(--text); }
.post-body h2{
  font-size:1.5rem; font-weight:700; color:var(--text-strong); line-height:1.35;
  margin:2.6rem 0 1rem; padding-top:.4rem;
}
.post-body h3{ font-size:1.2rem; font-weight:700; color:var(--text-strong); margin:1.8rem 0 .7rem; }
.post-body p{ margin:1rem 0; }
.post-body strong{ color:var(--text-strong); font-weight:700; }
.post-body a{ color:var(--sky); text-decoration:underline; text-underline-offset:2px; }
.post-body a:hover{ color:#7dd3fc; }
.post-body ul,.post-body ol{ margin:1rem 0; padding-left:1.4rem; }
.post-body li{ margin:.45rem 0; }
.post-body ul li{ list-style:disc; }
.post-body ol li{ list-style:decimal; }
.post-body hr{ border:0; border-top:1px solid var(--border); margin:2.4rem 0; }
.post-body blockquote{
  margin:1.4rem 0; padding:.9rem 1.2rem; border-left:3px solid var(--sky-strong);
  background:var(--panel); border-radius:0 8px 8px 0; color:var(--muted);
}
.post-body blockquote strong{ color:var(--sky); }

/* 인라인 코드 */
.post-body :not(pre) > code{
  background:var(--code-bg); color:#7dd3fc; font-size:.9em;
  padding:.12em .4em; border-radius:5px; border:1px solid var(--border);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* 코드블록 / 다이어그램 */
.post-body pre{
  background:var(--code-bg); border:1px solid var(--border); border-radius:10px;
  padding:1rem 1.1rem; overflow-x:auto; margin:1.4rem 0; line-height:1.6;
}
.post-body pre code{
  background:none; border:0; padding:0; color:#cbd5e1; font-size:.86rem; white-space:pre;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.post-body table{ width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.95rem; }
.post-body th,.post-body td{ border:1px solid var(--border2); padding:.55rem .7rem; text-align:left; }
.post-body th{ background:var(--panel2); color:var(--text-strong); }
.post-body img{ max-width:100%; height:auto; border-radius:10px; margin:1.4rem 0; }

/* ---------- 숏코드: 유튜브 ---------- */
.post-video{ margin:1.6rem 0; }
.post-video .yt-frame{
  position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden;
  border:1px solid var(--border2); background:#000;
}
.post-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.post-video figcaption{ font-size:.82rem; color:var(--faint); margin-top:.5rem; text-align:center; }

/* ---------- 숏코드: CTA 박스 ---------- */
.post-cta{
  margin:2.6rem 0 1rem; padding:1.6rem 1.5rem; border-radius:16px;
  background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(56,189,248,.05));
  border:1px solid rgba(56,189,248,.3);
}
.post-cta h3{ margin:0 0 1rem; font-size:1.15rem; font-weight:800; color:var(--text-strong); }
.post-cta .cta-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.post-cta a{
  display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1rem; border-radius:10px;
  font-size:.9rem; font-weight:700; text-decoration:none; transition:all .15s;
}
.post-cta a.primary{ background:var(--sky-strong); color:#fff; box-shadow:0 8px 20px rgba(14,165,233,.3); }
.post-cta a.primary:hover{ background:var(--sky); }
.post-cta a.ghost{ background:rgba(148,163,184,.1); color:var(--text-strong); border:1px solid var(--border2); }
.post-cta a.ghost:hover{ background:rgba(148,163,184,.18); }

/* ---------- 숏코드: 관련글 ---------- */
.post-related{ margin:2.4rem 0 0; padding-top:1.6rem; border-top:1px solid var(--border); }
.post-related h3{ font-size:1.05rem; color:var(--text-strong); margin:0 0 .9rem; }
.post-related ul{ list-style:none; padding:0; margin:0; }
.post-related li{ margin:.5rem 0; }
.post-related a{ color:var(--sky); text-decoration:none; }
.post-related a:hover{ text-decoration:underline; }

/* ---------- 목록 페이지 ---------- */
.blog-hero{ text-align:center; margin:1rem 0 2.6rem; }
.blog-hero h1{ font-size:2.2rem; font-weight:800; color:var(--text-strong); margin:0 0 .6rem; }
.blog-hero p{ color:var(--muted); font-size:1.05rem; }
.blog-grid{ display:grid; grid-template-columns:1fr; gap:1.2rem; }
@media(min-width:768px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
.blog-card{
  display:block; padding:1.4rem; border-radius:14px; background:var(--panel);
  border:1px solid var(--border); text-decoration:none; transition:all .15s;
}
.blog-card:hover{ border-color:rgba(56,189,248,.45); transform:translateY(-2px); }
.blog-card .card-cluster{ font-size:.7rem; font-weight:700; color:var(--sky); letter-spacing:.03em; }
.blog-card h2{ font-size:1.15rem; font-weight:700; color:var(--text-strong); margin:.5rem 0 .55rem; line-height:1.4; }
.blog-card p{ font-size:.92rem; color:var(--muted); line-height:1.6; margin:0 0 .8rem; }
.blog-card .card-meta{ font-size:.78rem; color:var(--faint); }

/* ===== 레이아웃 / nav / footer (self-contained, tailwind 비의존) ===== */
*{ box-sizing:border-box; }
body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Apple SD Gothic Neo","Malgun Gothic",sans-serif; -webkit-font-smoothing:antialiased; }
img{ display:block; }

.blog-nav{ position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(15,23,42,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid rgba(30,41,59,.6); }
.blog-nav-inner{ max-width:64rem; margin:0 auto; padding:0 1.25rem; height:4rem; display:flex; align-items:center; justify-content:space-between; }
.blog-nav .logo img{ height:2.1rem; width:auto; }
.blog-nav .nav-links{ display:flex; align-items:center; gap:.35rem; }
.blog-nav .nav-links a{ padding:.5rem .75rem; font-size:.875rem; font-weight:600; text-decoration:none; color:var(--muted); border-radius:8px; }
.blog-nav .nav-links a:hover{ color:var(--sky); }
.blog-nav .nav-links a.active{ color:var(--sky); }
.blog-nav .nav-links a.buy{ background:var(--sky-strong); color:#fff; padding:.45rem 1rem; box-shadow:0 8px 20px rgba(14,165,233,.3); }
.blog-nav .nav-links a.buy:hover{ background:var(--sky); }

.post-main{ max-width:48rem; margin:0 auto; padding:6rem 1.25rem 4rem; }
.list-main{ max-width:56rem; margin:0 auto; padding:6rem 1.25rem 4rem; }

.blog-footer{ background:#060c18; border-top:1px solid var(--border); padding:3rem 1.25rem; margin-top:3rem; }
.blog-footer .foot-inner{ max-width:64rem; margin:0 auto; display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:768px){ .blog-footer .foot-inner{ grid-template-columns:1.3fr 1fr 1fr; } }
.blog-footer img{ height:2.3rem; width:auto; margin-bottom:1rem; }
.blog-footer h4{ color:var(--text-strong); font-size:.95rem; margin:0 0 .8rem; }
.blog-footer ul{ list-style:none; padding:0; margin:0; }
.blog-footer li{ margin:.42rem 0; }
.blog-footer a{ color:var(--muted); text-decoration:none; font-size:.9rem; }
.blog-footer a:hover{ color:var(--sky); }
.blog-footer .copy{ color:var(--faint); font-size:.85rem; margin:0; }
.blog-footer.center{ text-align:center; }
.blog-footer.center img{ margin:0 auto 1rem; }

/* ===== 언어 전환기 (nav) ===== */
.blog-nav .lang-switch{ display:inline-flex; align-items:center; gap:.15rem; margin:0 .25rem; padding:.15rem; border:1px solid var(--border2); border-radius:8px; }
.blog-nav .lang-switch a, .blog-nav .lang-switch .cur{ font-size:.78rem; font-weight:700; padding:.2rem .45rem; border-radius:6px; text-decoration:none; line-height:1; }
.blog-nav .lang-switch a{ color:var(--muted); }
.blog-nav .lang-switch a:hover{ color:var(--sky); background:rgba(56,189,248,.1); }
.blog-nav .lang-switch .cur{ color:#fff; background:var(--sky-strong); }
@media(max-width:520px){ .blog-nav .nav-links a:not(.buy):not(.active){ display:none; } .blog-nav .lang-switch{ margin-left:.1rem; } }