:root { --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --bg:#f8fafc; --card:#ffffff; --point:#f97316; --dark:#0f172a; }
* { box-sizing:border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif; background:var(--bg); color:var(--ink); }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px; }
.site-header { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.header-inner { height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo { font-weight:900; font-size:24px; letter-spacing:-.04em; }
.main-nav { display:flex; gap:16px; color:#374151; font-weight:700; font-size:14px; }
.main-wrap { padding-top:32px; padding-bottom:60px; }
.hero { background:linear-gradient(135deg,#111827,#1f2937); color:#fff; border-radius:28px; padding:42px; display:flex; align-items:end; justify-content:space-between; gap:30px; }
.eyebrow { color:#fed7aa; font-weight:800; }
.hero h1 { margin:10px 0; font-size:42px; letter-spacing:-.06em; }
.hero p { color:#d1d5db; margin:0; }
.search-box, .wide-search, .filter-bar { display:flex; gap:8px; }
.search-box input, .wide-search input, .filter-bar input, select { border:1px solid var(--line); padding:12px 14px; border-radius:12px; min-width:220px; }
button, .btn { border:0; background:var(--dark); color:#fff; padding:12px 16px; border-radius:12px; font-weight:800; cursor:pointer; display:inline-block; }
.btn.primary { background:var(--point); }
.section { margin-top:42px; }
.section-head, .admin-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:20px; }
.section-head h2, .admin-head h1 { margin:0; letter-spacing:-.04em; }
.section-head a { color:var(--point); font-weight:800; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(15,23,42,.04); }
.thumb { height:172px; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:24px; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.card-body { padding:18px; }
.badge, .status { background:#fff7ed; color:#c2410c; padding:5px 9px; border-radius:999px; font-size:12px; font-weight:900; }
.card h3 { font-size:19px; line-height:1.35; margin:12px 0 8px; letter-spacing:-.04em; }
.card p { color:var(--muted); font-size:14px; line-height:1.6; min-height:45px; }
time, .card em, .mini-card em { color:#9ca3af; font-style:normal; font-size:12px; }
.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mini-card { background:#fff; border:1px solid var(--line); padding:16px; border-radius:16px; display:flex; flex-direction:column; gap:8px; }
.mini-card span { color:var(--point); font-size:12px; font-weight:900; }
.mini-card strong { line-height:1.4; }
.page-head { margin-bottom:24px; }
.page-head h1 { font-size:38px; letter-spacing:-.06em; margin:0 0 10px; }
.article-view { background:#fff; border:1px solid var(--line); border-radius:24px; padding:42px; max-width:860px; margin:0 auto; }
.article-meta { display:flex; gap:12px; color:var(--point); font-weight:900; }
.article-view h1 { font-size:42px; line-height:1.2; letter-spacing:-.06em; margin:14px 0; }
.subtitle { color:var(--muted); font-size:18px; }
.byline { color:var(--muted); margin-bottom:26px; }
.main-image img { width:100%; border-radius:18px; }
.article-content { font-size:18px; line-height:1.85; }
.article-content img { max-width:100%; border-radius:16px; }
.source-box { margin-top:30px; padding-top:20px; border-top:1px solid var(--line); display:flex; gap:10px; }
.source-box a { color:var(--point); font-weight:800; }
.empty { background:#fff; border:1px solid var(--line); border-radius:24px; padding:40px; text-align:center; }
.site-footer { border-top:1px solid var(--line); background:#fff; padding:30px 0; }
.footer-grid { display:flex; justify-content:space-between; gap:20px; color:var(--muted); }
.footer-grid a { margin-right:12px; color:#374151; font-weight:700; }
.admin-layout { display:grid; grid-template-columns:220px 1fr; gap:22px; }
.admin-side { background:#111827; color:#fff; border-radius:20px; padding:18px; height:max-content; position:sticky; top:90px; }
.admin-side a { display:block; padding:12px; border-radius:12px; color:#e5e7eb; }
.admin-side a:hover { background:#1f2937; }
.admin-main { min-width:0; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:28px; }
.stat-card { background:#fff; border:1px solid var(--line); padding:18px; border-radius:16px; }
.stat-card span { color:var(--muted); font-size:13px; }
.stat-card strong { display:block; font-size:30px; margin:5px 0; }
.stat-card em { color:#9ca3af; font-style:normal; font-size:12px; }
.admin-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.admin-table th, .admin-table td { padding:13px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; vertical-align:top; }
.admin-table th { background:#f3f4f6; }
.actions { display:flex; gap:8px; align-items:center; }
.actions form { margin:0; }
.actions button { padding:6px 10px; background:#991b1b; }
.article-form { background:#fff; border:1px solid var(--line); border-radius:20px; padding:20px; }
.article-form label { display:flex; flex-direction:column; gap:6px; font-weight:800; font-size:13px; margin-bottom:14px; }
.article-form input, .article-form textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px; font-family:inherit; }
.form-row { display:grid; gap:12px; }
.form-row.two { grid-template-columns:1fr 1fr; }
.form-row.three { grid-template-columns:1fr 1fr 1fr; }
.notice { background:#ecfdf5; color:#047857; padding:12px; border-radius:12px; margin-bottom:14px; font-weight:800; }
.image-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.image-item { background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:6px; }
.image-item img { width:100%; aspect-ratio:1.3/1; object-fit:cover; border-radius:10px; background:#f3f4f6; }
.image-item small { color:var(--muted); word-break:break-all; }
.pager { margin-top:22px; display:flex; gap:10px; align-items:center; }
.pager a, .pager span { background:#fff; border:1px solid var(--line); padding:9px 13px; border-radius:10px; }
@media (max-width: 900px) { .hero { flex-direction:column; align-items:start; padding:28px; } .card-grid,.mini-grid,.stat-grid { grid-template-columns:1fr; } .admin-layout { grid-template-columns:1fr; } .admin-side { position:static; } .form-row.two,.form-row.three { grid-template-columns:1fr; } .image-grid { grid-template-columns:repeat(2,1fr); } .main-nav { overflow:auto; } .article-view { padding:24px; } .article-view h1 { font-size:30px; } }


/* Article Markdown Rendering */
.markdown-body {
  font-size: 18px;
  line-height: 1.9;
  color: #1f2937;
  word-break: keep-all;
}

.markdown-body h2 {
  margin: 48px 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid #111827;
  font-size: 28px;
  line-height: 1.35;
  color: #111827;
  letter-spacing: -0.04em;
}

.markdown-body h3 {
  margin: 34px 0 14px;
  font-size: 23px;
  line-height: 1.45;
  color: #111827;
  letter-spacing: -0.03em;
}

.markdown-body p {
  margin: 16px 0;
}

.markdown-body strong {
  font-weight: 800;
  color: #0f172a;
}

.markdown-body ul,
.markdown-body ol {
  margin: 18px 0 18px 24px;
  padding: 0;
}

.markdown-body li {
  margin: 8px 0;
}

.markdown-body blockquote {
  margin: 28px 0;
  padding: 18px 22px;
  border-left: 5px solid #111827;
  background: #f8fafc;
  color: #334155;
  border-radius: 12px;
}

.content-image {
  margin: 34px 0;
  text-align: center;
}

.content-image img {
  max-width: 100%;
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.14);
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 42px 0 16px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
}

.source-box {
  margin-top: 38px;
}

@media (max-width: 768px) {
  .markdown-body {
    font-size: 16px;
    line-height: 1.85;
  }

  .markdown-body h2 {
    font-size: 23px;
    margin-top: 38px;
  }

  .markdown-body h3 {
    font-size: 20px;
  }
}