:root{
  --bg:#0b0d10;
  --card:#111418;
  --muted:#8a94a7;
  --text:#e8edf5;
  --accent:#4da3ff;
  --accent-2:#78f3d3;
  --border:#20242b;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}

/* Layout */
.sg-container{max-width:1120px;margin:0 auto;padding:0 16px}
.sg-header{position:sticky;top:0;z-index:50;background:rgba(11,13,16,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.sg-header-inner{display:flex;align-items:center;gap:16px;height:64px}
.sg-logo a{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:var(--text);text-decoration:none}
.sg-logo img{height:28px;display:block}

.sg-nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:8px;cursor:pointer}
.sg-nav{display:flex;gap:16px;margin-left:auto}
.sg-nav a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:8px}
.sg-nav a:hover{background:var(--card);color:var(--accent)}

.sg-search{margin-left:8px}
.sg-search input{background:var(--card);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:8px;min-width:180px}
.sg-slogan{border-top:1px solid var(--border);background:linear-gradient(90deg,rgba(77,163,255,.08),rgba(120,243,211,.08))}
.sg-slogan .sg-container{padding:12px 16px}
.sg-slogan strong{font-weight:700}
.sg-slogan p{margin:.25rem 0 0;color:var(--muted)}

.sg-main{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 16px}

/* List */
.sg-list-title{display:flex;align-items:center;gap:10px;margin:8px 0 16px}
.sg-list-count{color:var(--muted);font-size:14px}
.sg-card{display:grid;grid-template-columns:160px 1fr;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;margin:12px 0}
.sg-card-thumb{display:block;overflow:hidden;border-radius:10px;border:1px solid var(--border);background:#000}
.sg-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.sg-card-thumb:hover img{transform:scale(1.03)}
.sg-card-title{display:block;font-size:18px;font-weight:700;color:var(--text);text-decoration:none;margin-bottom:6px}
.sg-card-title:hover{color:var(--accent)}
.sg-card-desc{color:var(--muted);margin:0 0 8px}
.sg-card-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.sg-meta-cat{color:var(--accent);text-decoration:none}
.sg-meta-reply{background:#18202a;padding:2px 6px;border-radius:6px}

/* Article */
.sg-article-header{margin:8px 0 16px;border-bottom:1px solid var(--border);padding-bottom:12px}
.sg-article-cat{color:var(--accent);margin:0 0 4px}
.sg-article-title{margin:0 0 6px;font-size:28px;line-height:1.3}
.sg-article-meta{color:var(--muted);font-size:14px;display:flex;gap:12px}
.sg-article-content{margin:16px 0}
.sg-article-content img{max-width:100%;height:auto;border-radius:10px}
.sg-article-content a{color:var(--accent)}
.sg-article-content a:hover{color:var(--accent-2)}
.sg-article-footer{margin-top:24px;border-top:1px solid var(--border);padding-top:16px}

.sg-article-tags h3{margin:0 0 10px}
.sg-tags a{display:inline-block;margin:0 6px 6px 0;padding:6px 10px;border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--text);background:#0f1318}
.sg-tags a:hover{border-color:var(--accent);color:var(--accent)}

.sg-article-pager{display:flex;justify-content:space-between;gap:8px;margin:18px 0}
.sg-article-pager a{color:var(--text);text-decoration:none}
.sg-article-pager a:hover{color:var(--accent)}

.sg-related{margin:18px 0}
.sg-related-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;list-style:none;padding:0;margin:12px 0 0}
.sg-related-list img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.sg-related-title{display:block;margin-top:6px;color:var(--text)}
.sg-related-date{display:block;color:var(--muted);font-size:13px}

/* Paging */
.sg-paging{display:flex;justify-content:center;gap:10px;margin:12px 0 32px}
.sg-paging .pg{display:inline-block;padding:8px 12px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text)}
.sg-paging .pg:hover{border-color:var(--accent);color:var(--accent)}
.pg-num a{margin:0 4px;text-decoration:none;color:var(--muted)}
.pg-num a:hover{color:var(--accent)}

/* Footer */
.sg-footer{border-top:1px solid var(--border);background:#0a0d11}
.sg-footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:18px 16px}
.sg-footer-links a{margin-right:12px;color:var(--muted);text-decoration:none}
.sg-footer-links a:hover{color:var(--accent)}
.copy,.addr{color:var(--muted);margin:0}

/* Utilities */
.sg-section-title{margin:18px 0 8px}
.sg-empty{color:var(--muted);padding:24px 12px;background:var(--card);border:1px solid var(--border);border-radius:12px;text-align:center}
.sg-sr-only{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(50%);clip:rect(0 0 0 0);overflow:hidden}

/* Responsive */
@media (max-width: 920px){
  .sg-nav-toggle{display:inline-block}
  .sg-nav{display:none;position:absolute;top:64px;left:0;right:0;background:#0c1015;border-bottom:1px solid var(--border);padding:10px 16px;flex-direction:column}
  .sg-nav.open{display:flex}
  .sg-search input{min-width:140px}
  .sg-card{grid-template-columns:1fr}
}
/* --- FIX: blog_menu 출력이 <ul><li>일 때 점 제거 + 가로정렬 --- */
.sg-nav ul,
.sg-nav li { margin:0; padding:0; list-style:none; }

.sg-nav ul {
  display:flex;
  flex-wrap:wrap;             /* 공간 부족 시 다음 줄로 줄바꿈 */
  gap:12px;
  align-items:center;
}

.sg-nav li a {
  display:inline-block;
  padding:8px 10px;
  border-radius:8px;
  color:var(--text);
  text-decoration:none;
}
.sg-nav li a:hover { background:var(--card); color:var(--accent); }

/* --- FIX: 헤더 공간 충돌 방지 (메뉴가 먼저 자리 차지, 검색은 남는 공간만) --- */
.sg-header-inner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sg-nav { margin-left:auto; flex:1 1 auto; min-width:240px; }  /* 메뉴가 더 넓게 */
.sg-search { flex:0 0 200px; }                                 /* 검색 폭 한정 */
.sg-search input { width:100%; max-width:200px; }

/* 화면이 좁아지면 검색 숨겨 메뉴 우선 */
@media (max-width: 1200px){
  .sg-search { display:none; }
}

/* 모바일 메뉴(햄버거) 열렸을 때 <ul>도 세로 정렬 */
@media (max-width: 920px){
  .sg-nav { display:none; position:absolute; top:64px; left:0; right:0; background:#0c1015;
            border-bottom:1px solid var(--border); padding:10px 16px; }
  .sg-nav.open { display:block; }
  .sg-nav ul { flex-direction:column; gap:8px; }
}
/* --- 모바일 전용 헤더/푸터 디자인 --- */

/* 기본 숨김 → PC에서 안 보임 */
.mobile-only { display: none; }

/* 모바일 화면 전용 */
@media (max-width: 768px) {
  .mobile-only { display: block; }

  .sg-footer {
    background: #f9f9f9;
    padding: 20px 10px;
    text-align: center;
    font-size: 14px;
    border-top: 1px solid #ddd;
    color: #333;
  }

  .sg-footer .footer-brand {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
  }

  .sg-footer .footer-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
  }

  .sg-footer .footer-links a {
    color: #0073e6;
    text-decoration: none;
    margin: 0 4px;
  }

  .sg-footer .footer-links a:hover {
    text-decoration: underline;
  }

  .sg-footer .footer-copy {
    margin-top: 10px;
    font-size: 12px;
    color: #999;
  }
}