:root{
  --bg:#ffffff; --fg:#1a1f2e; --muted:#5b6472; --line:#e6e9ef;
  --brand:#1e4d8b; --brand-soft:#eaf1fa; --accent:#0f766e;
  --card:#f8fafc; --max:760px; --radius:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",Roboto,sans-serif;
  line-height:1.75; font-size:17px; word-break:keep-all;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; background:#fff; padding:8px; z-index:10}

/* 헤더 */
.site-header{border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); z-index:5}
.site-header .wrap{display:flex; align-items:center; gap:20px; min-height:60px; flex-wrap:wrap}
.brand{font-weight:800; font-size:20px; color:var(--fg)}
.nav{display:flex; gap:16px; flex-wrap:wrap; font-size:14px}
.nav a{color:var(--muted)}

/* 히어로 */
.hero{padding:40px 0 24px; border-bottom:1px solid var(--line); margin-bottom:28px}
.hero h1{font-size:30px; margin:0 0 8px}
.hero p{color:var(--muted); margin:0; font-size:18px}

/* 카테고리 그리드 */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin:0 0 40px}
.cat-card{display:block; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius)}
.cat-card:hover{border-color:var(--brand); text-decoration:none}
.cat-card strong{display:block; font-size:17px; color:var(--fg); margin-bottom:6px}
.cat-card span{color:var(--muted); font-size:14px; line-height:1.5}

/* 글 목록 */
h2{font-size:22px; margin:36px 0 16px}
.post-list{list-style:none; padding:0; margin:0}
.post-item{border-bottom:1px solid var(--line)}
.post-item a{display:block; padding:18px 0; color:var(--fg)}
.post-item a:hover{text-decoration:none}
.post-title{display:block; font-size:19px; font-weight:700; margin-bottom:4px}
.post-item a:hover .post-title{color:var(--brand)}
.post-desc{display:block; color:var(--muted); font-size:15px; margin-bottom:6px}
.post-item time{font-size:13px; color:var(--muted)}
.cat-tag{display:inline-block; font-size:12px; font-weight:700; color:var(--brand); background:var(--brand-soft); padding:2px 10px; border-radius:999px; margin-bottom:8px}

/* 빵부스러기 */
.breadcrumb{font-size:13px; color:var(--muted); padding:18px 0 4px}
.breadcrumb a{color:var(--muted)}

/* 글 본문 */
.article{padding:8px 0 20px}
.article-head h1{font-size:30px; line-height:1.35; margin:8px 0 12px}
.article-head .meta{color:var(--muted); font-size:14px; margin:0 0 8px}
.article-body{font-size:17.5px}
.article-body h2{font-size:23px; margin:38px 0 14px; padding-top:8px; border-top:2px solid var(--line)}
.article-body h3{font-size:19px; margin:28px 0 10px}
.article-body p{margin:16px 0}
.article-body ul,.article-body ol{padding-left:22px}
.article-body li{margin:8px 0}
.article-body strong{color:var(--fg)}
.article-body blockquote{margin:20px 0; padding:14px 18px; background:var(--brand-soft); border-left:4px solid var(--brand); border-radius:0 8px 8px 0; color:#2a3b52}
.article-body table{width:100%; border-collapse:collapse; margin:20px 0; font-size:15px}
.article-body th,.article-body td{border:1px solid var(--line); padding:10px 12px; text-align:left}
.article-body th{background:var(--card)}
.article-body code{background:var(--card); padding:2px 6px; border-radius:5px; font-size:.9em}

/* 목차 */
.toc{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin:24px 0; font-size:15px}
.toc strong{display:block; margin-bottom:8px}
.toc ul{margin:0; padding-left:18px}
.toc a{color:var(--muted)}

/* 태그 */
.tags{margin:28px 0; display:flex; flex-wrap:wrap; gap:8px}
.tag{font-size:13px; color:var(--muted); background:var(--card); padding:4px 10px; border-radius:999px}

/* 저자 박스 */
.author-box{margin:36px 0; padding:20px; background:var(--brand-soft); border-radius:var(--radius); border:1px solid #d3e2f4}
.author-box .author-meta strong{font-size:16px}
.author-box .author-meta span{display:block; font-size:13px; color:var(--muted)}
.author-box .cred{font-weight:600; color:var(--accent) !important}
.author-box p{margin:10px 0 0; font-size:14px; color:#33445c}

/* 관련 글 */
.related{margin:40px 0}
.card-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.card a{display:block; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); height:100%}
.card a:hover{border-color:var(--brand); text-decoration:none}
.card-title{display:block; font-weight:700; color:var(--fg); margin-top:6px; font-size:15px}

/* 광고 슬롯 */
.ad-slot{margin:28px 0; min-height:90px; text-align:center}

/* 카테고리 헤더 */
.cat-head{padding:24px 0; border-bottom:1px solid var(--line); margin-bottom:8px}
.cat-head h1{font-size:26px; margin:0 0 8px}
.cat-head p{color:var(--muted); margin:0}

.empty{color:var(--muted); padding:40px 0}

/* 푸터 */
.site-footer{border-top:1px solid var(--line); margin-top:60px; padding:32px 0; background:var(--card)}
.disclaimer{font-size:13px; color:var(--muted); background:#fff; border:1px solid var(--line); padding:14px 16px; border-radius:8px; line-height:1.6}
.footer-nav{display:flex; gap:16px; flex-wrap:wrap; margin:18px 0 10px; font-size:14px}
.footer-nav a{color:var(--muted)}
.copy{font-size:13px; color:var(--muted); margin:0}

@media (max-width:600px){
  body{font-size:16px}
  .hero h1{font-size:25px}
  .article-head h1{font-size:25px}
}

/* 다크 모드 */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#12151c; --fg:#e6e9ef; --muted:#9aa4b2; --line:#262b36;
    --brand:#6ea8fe; --brand-soft:#1a2333; --accent:#5eead4;
    --card:#1a1e27;
  }
  .site-header{background:rgba(18,21,28,.92)}
  .disclaimer{background:#1a1e27}
  .author-box{border-color:#2b3a52}
  .author-box p{color:#c3ccd8}
  .article-body blockquote{color:#c3ccd8}
}