/*
Theme Name: ROKVF
Theme URI: http://rokvf.or.kr
Description: 대한민국유권자총연맹 반응형 테마. 현재 디자인(네이비) 기반, 모바일 대응.
Author: rokvf
Version: 0.2
*/

:root{ --navy:#36508c; --navy-d:#28406f; --gray:#f4f4f4; --line:#e2e2e2; --txt:#222; }
*{box-sizing:border-box;}
body{margin:0;font-family:"Malgun Gothic","맑은 고딕",-apple-system,"Apple SD Gothic Neo",sans-serif;color:var(--txt);line-height:1.6;background:#fff;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;}        /* 반응형 이미지 핵심 */
.container{max-width:1100px;margin:0 auto;padding:0 16px;}

/* ===== 상단 유틸바 ===== */
.util-bar{background:var(--navy-d);color:#cdd6ea;font-size:12px;}
.util-inner{display:flex;justify-content:space-between;align-items:center;height:32px;}
.util-links a{margin-left:14px;color:#cdd6ea;}
.util-links a:hover{color:#fff;}

/* ===== 헤더 ===== */
.site-header{border-bottom:3px solid var(--navy);position:sticky;top:0;background:#fff;z-index:50;}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:84px;}
.site-logo img{max-height:52px;vertical-align:middle;}

/* ===== 메인 비주얼 ===== */
.main-visual{text-align:center;background:#f7f7fa;}
.main-visual img{width:100%;max-width:1100px;display:block;margin:0 auto;}
.nav-toggle{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--navy);}
.main-nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;}
.main-nav a{display:block;padding:10px 16px;font-weight:600;border-radius:4px;}
.main-nav a:hover{background:var(--gray);color:var(--navy);}

/* ===== 본문 ===== */
.page-title{background:var(--navy);color:#fff;padding:28px 0;margin:0 0 24px;}
.page-title h1{margin:0;font-size:24px;}
.content{padding:10px 0 50px;}
.post-list{list-style:none;margin:0;padding:0;}
.post-list li{border-bottom:1px solid var(--line);}
.post-list a{display:flex;justify-content:space-between;gap:12px;padding:16px 4px;}
.post-list a:hover{background:var(--gray);}
.post-list .t{font-weight:600;}
.post-list .d{color:#888;font-size:13px;white-space:nowrap;}
.single-post h1{font-size:26px;border-bottom:2px solid var(--navy);padding-bottom:14px;}
.post-meta{color:#888;font-size:14px;margin:-6px 0 20px;}
.post-body{font-size:16px;}
.post-body img{margin:8px 0;}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:24px 0;}
.cat-card{border:1px solid var(--line);border-radius:8px;padding:20px;transition:.15s;}
.cat-card:hover{border-color:var(--navy);box-shadow:0 4px 16px rgba(54,80,140,.12);}
.cat-card h3{color:var(--navy);margin:0 0 12px;}

/* ===== 푸터 ===== */
.site-footer{background:var(--navy-d);color:#cdd6ea;padding:26px 0;font-size:14px;margin-top:40px;}
.footer-inner{display:flex;align-items:center;gap:24px;}
.footer-logo{max-height:50px;background:#fff;padding:6px 10px;border-radius:4px;}
.site-footer strong{color:#fff;}
.copyright{color:#9aa8c8;font-size:12px;}
@media (max-width:820px){ .footer-inner{flex-direction:column;align-items:flex-start;gap:14px;} }

/* ===== 모바일 ===== */
@media (max-width:820px){
  .nav-toggle{display:block;}
  .main-nav{position:absolute;left:0;right:0;top:70px;background:#fff;border-bottom:2px solid var(--navy);max-height:0;overflow:hidden;transition:max-height .25s;}
  .main-nav.open{max-height:80vh;}
  .main-nav ul{flex-direction:column;gap:0;}
  .main-nav a{padding:14px 20px;border-top:1px solid var(--line);border-radius:0;}
  .page-title h1{font-size:20px;}
  .post-list a{flex-direction:column;gap:4px;}
}