/* === 기본 리셋 === */
* { margin:0; padding:0; box-sizing:border-box; }
img { max-width:100%; height:auto; }
body { font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color:#333; background:#f8f9fa; line-height:1.6; }
a { color:#e85d04; text-decoration:none; }
a:hover { color:#c84d03; }

/* === 헤더 === */
.header { background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:100; }
.header-inner { max-width:1200px; margin:0 auto; padding:0 20px; height:60px; display:flex; align-items:center; justify-content:space-between; }
.logo { font-size:22px; font-weight:800; color:#e85d04; }
.nav { display:flex; gap:20px; align-items:center; }
.nav a { color:#555; font-weight:500; font-size:14px; display:flex; align-items:center; }
.nav a:hover { color:#e85d04; }
.nav-auto { background:#e85d04; color:#fff !important; padding:2px 8px; border-radius:3px; font-size:12px; font-weight:500; white-space:nowrap; line-height:1.5; }
.nav-auto:hover { background:#c84d03; }
.auth { display:flex; align-items:center; gap:10px; }
.user-name { font-size:14px; color:#555; }
.btn-login { background:#e85d04; color:#fff; padding:6px 16px; border-radius:4px; font-size:14px; }
.btn-login:hover { background:#c84d03; color:#fff; }

/* === 메인 레이아웃 === */
.main-content { max-width:1200px; margin:0 auto; padding:20px; min-height:calc(100vh - 130px); }
.container { display:flex; gap:30px; }
.content-area { flex:1; }
.sidebar { width:280px; flex-shrink:0; }

/* === 글 카드 === */
.post-list { display:flex; flex-direction:column; gap:16px; }
.post-card { background:#fff; border-radius:12px; padding:20px; display:flex; gap:16px; border:1px solid #eee; transition:box-shadow .2s; }
.post-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.08); }
.post-thumb { width:180px; height:120px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.post-thumb img { width:100%; height:100%; object-fit:cover; }
.post-info { flex:1; }
.post-category { font-size:12px; color:#e85d04; font-weight:600; text-decoration:none; }
a.post-category:hover { text-decoration:underline; }
.nav-topic { background:#fff8f0; color:#c84d03 !important; border-radius:14px; padding:4px 10px !important; font-size:13px; font-weight:600; }
.nav-topic:hover { background:#ffe0b2; }
.nav-topic-count { display:inline-block; margin-left:5px; background:rgba(0,0,0,.08); color:#666; font-size:10px; font-weight:500; padding:1px 6px; border-radius:8px; }

/* === 카테고리 전용 보조 네비 (헤더 아래) === */
/* 토픽 카테고리는 헤더 nav 와 한 줄을 다투지 않고, 자체 줄에서 깔끔히 한 줄 표시. */
.topic-nav { background:#fff; border-bottom:1px solid #f0e8d8; }
.topic-nav-inner { max-width:1200px; margin:0 auto; padding:8px 20px; display:flex; gap:8px; align-items:center; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.topic-nav-inner::-webkit-scrollbar { display:none; }
.topic-chip { display:inline-flex; align-items:center; flex-shrink:0; background:#fff8f0; color:#c84d03; border:1px solid #ffe0b2; border-radius:14px; padding:5px 12px; font-size:13px; font-weight:600; text-decoration:none; transition:background .15s, border-color .15s; }
.topic-chip:hover { background:#ffe0b2; color:#c84d03; }
.topic-chip-active { background:#e85d04; color:#fff; border-color:#e85d04; }
.topic-chip-active:hover { background:#c84d03; color:#fff; }
.topic-chip-count { display:inline-block; margin-left:6px; background:rgba(0,0,0,.08); color:#666; font-size:10px; font-weight:500; padding:1px 6px; border-radius:8px; }
.topic-chip-active .topic-chip-count { background:rgba(255,255,255,.25); color:#fff; }
/* 데스크탑에선 모바일용 햄버거 안 카테고리는 숨김 */
.nav-topic-mobile-only { display:none; }
.post-title { font-size:18px; font-weight:700; margin:6px 0 8px; }
.post-title a { color:#222; }
.post-title a:hover { color:#e85d04; }
.post-excerpt { font-size:14px; color:#666; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-meta { font-size:12px; color:#999; margin-top:10px; display:flex; gap:12px; }
.post-tags { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.tag { font-size:12px; color:#e85d04; background:#fff3e6; padding:2px 8px; border-radius:10px; }

/* === 글 상세 === */
.post-detail { background:#fff; border-radius:12px; padding:40px; border:1px solid #eee; }
.post-header { margin-bottom:30px; border-bottom:1px solid #eee; padding-bottom:20px; }
.post-header h1 { font-size:28px; margin:10px 0 15px; }
.post-body { line-height:2; font-size:16px; }
.post-body h2 { font-size:22px; margin:30px 0 15px; padding-bottom:8px; border-bottom:2px solid #e85d04; }
.post-body h3 { font-size:18px; margin:20px 0 10px; }
.post-body p { margin-bottom:16px; }
.post-body blockquote { border-left:4px solid #e85d04; padding:12px 20px; background:#fff8f0; margin:16px 0; border-radius:0 8px 8px 0; }
.post-body ul, .post-body ol { margin:12px 0; padding-left:24px; }
.post-body li { margin:6px 0; }

/* === 사이드바 === */
.sidebar-widget { background:#fff; border-radius:12px; padding:20px; border:1px solid #eee; margin-bottom:16px; }
.sidebar-widget h3 { font-size:15px; font-weight:700; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid #e85d04; }
.sidebar-widget ul { list-style:none; }
.sidebar-widget li { padding:6px 0; border-bottom:1px solid #f5f5f5; font-size:14px; }
.sidebar-widget li:last-child { border:none; }
.sidebar-widget li a { color:#333; }
.sidebar-widget li small { color:#999; }

/* === 페이지네이션 === */
.pagination { display:flex; justify-content:center; gap:6px; margin-top:30px; }
.pagination a, .pagination .current { padding:8px 14px; border-radius:4px; font-size:14px; }
.pagination a { background:#fff; border:1px solid #ddd; color:#555; }
.pagination a:hover { background:#e85d04; color:#fff; border-color:#e85d04; }
.pagination .current { background:#e85d04; color:#fff; }

/* === 로그인 === */
.login-container { display:flex; justify-content:center; align-items:center; min-height:60vh; }
.login-box { background:#fff; padding:40px; border-radius:12px; border:1px solid #eee; width:400px; }
.login-box h2 { text-align:center; margin-bottom:24px; color:#e85d04; }

/* === 폼 === */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:14px; font-weight:600; margin-bottom:6px; color:#444; }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:6px; font-size:14px; }
.form-group input:focus, .form-group textarea:focus { border-color:#e85d04; outline:none; }
.hint { font-size:12px; color:#999; margin-top:4px; }

/* === 버튼 === */
.btn-primary { background:#e85d04; color:#fff; padding:8px 20px; border:none; border-radius:6px; cursor:pointer; font-size:14px; font-weight:600; }
.btn-primary:hover { background:#c84d03; }
.btn-full { width:100%; }
.btn-sm { padding:4px 12px; font-size:13px; border:1px solid #ddd; border-radius:4px; background:#fff; cursor:pointer; color:#555; }
.btn-sm:hover { background:#f0f0f0; }
.btn-danger { background:#dc3545; color:#fff; border-color:#dc3545; }
.btn-danger:hover { background:#c82333; }

/* === 알림 === */
.alert-error { background:#f8d7da; color:#721c24; padding:12px; border-radius:6px; margin-bottom:16px; }
.alert-success { background:#d4edda; color:#155724; padding:12px; border-radius:6px; margin-bottom:16px; }

/* === 빈 상태 === */
.empty-state { text-align:center; padding:60px 20px; }
.empty-state h2 { color:#888; margin-bottom:10px; }
.empty-state p { color:#aaa; margin-bottom:20px; }

/* === 관리자 === */
.admin-container { display:flex; gap:0; min-height:calc(100vh - 130px); }
.admin-sidebar { width:200px; background:#fff; border-right:1px solid #eee; padding:20px 0; }
.admin-sidebar h3 { padding:0 20px; font-size:14px; color:#888; margin-bottom:12px; }
.admin-sidebar nav a { display:block; padding:10px 20px; color:#555; font-size:14px; border-left:3px solid transparent; }
.admin-sidebar nav a:hover { background:#f8f9fa; color:#e85d04; }
.admin-sidebar nav a.active { color:#e85d04; border-left-color:#e85d04; font-weight:700; background:#fff8f0; }
.admin-main { flex:1; padding:24px; }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; }
.stat-card { background:#fff; border:1px solid #eee; border-radius:8px; padding:16px; text-align:center; }
.stat-number { font-size:28px; font-weight:800; color:#e85d04; }
.stat-label { font-size:13px; color:#888; }

.admin-table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; border:1px solid #eee; }
.admin-table th { background:#f8f9fa; padding:10px 14px; text-align:left; font-size:13px; color:#666; border-bottom:1px solid #eee; }
.admin-table td { padding:10px 14px; border-bottom:1px solid #f5f5f5; font-size:14px; }
.badge-published { background:#d4edda; color:#155724; padding:2px 8px; border-radius:10px; font-size:12px; }
.badge-draft { background:#fff3cd; color:#856404; padding:2px 8px; border-radius:10px; font-size:12px; }
.badge-private { background:#e2e3e5; color:#383d41; padding:2px 8px; border-radius:10px; font-size:12px; }

.settings-card { background:#fff; border:1px solid #eee; border-radius:12px; padding:24px; }
.settings-card h2 { font-size:18px; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid #e85d04; }

/* === 댓글 === */
.comments-section { margin-top:30px; }

/* 댓글 목록 */
.comments-list { display:flex; flex-direction:column; }
.comment { display:flex; gap:14px; padding:20px 0; border-bottom:1px solid #f0f0f0; }
.comment:last-child { border-bottom:none; }
.comment-avatar { width:40px; height:40px; background:#f5f5f5; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#ccc; flex-shrink:0; }
.comment-body { flex:1; min-width:0; }
.comment-author { font-size:14px; font-weight:700; color:#333; display:block; margin-bottom:6px; }
.comment-text { font-size:14px; color:#555; line-height:1.7; margin:0; white-space:pre-wrap; word-break:break-word; }
.comment-meta { display:flex; align-items:center; gap:12px; margin-top:10px; }
.comment-date { font-size:12px; color:#bbb; }
.comment-reply-btn { font-size:12px; color:#bbb; cursor:pointer; }
.comment-reply-btn:hover { color:#888; }
.comments-empty { text-align:center; padding:40px 0; color:#ccc; font-size:14px; }

/* 댓글 작성 폼 */
.comment-form { border-top:1px solid #f0f0f0; padding-top:24px; margin-top:4px; }
.comment-form-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.comment-form-avatar { width:44px; height:44px; background:#f5f5f5; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#ccc; flex-shrink:0; }
.comment-form-inputs { display:flex; gap:10px; flex:1; }
.comment-form-inputs input { flex:1; padding:12px 16px; border:1px solid #e0e0e0; border-radius:4px; font-size:14px; background:#fff; outline:none; transition:border-color .2s; }
.comment-form-inputs input:focus { border-color:#999; }
.comment-form textarea { width:100%; padding:16px; border:1px solid #e0e0e0; border-radius:4px; font-size:14px; background:#fff; resize:none; min-height:120px; line-height:1.7; outline:none; font-family:inherit; transition:border-color .2s; }
.comment-form textarea:focus { border-color:#999; }
.comment-form-actions { display:flex; justify-content:flex-end; margin-top:12px; }
.comment-form button { padding:11px 36px; background:#333; color:#fff; border:none; border-radius:4px; font-size:14px; font-weight:600; cursor:pointer; transition:background .15s; }
.comment-form button:hover { background:#555; }

/* === 푸터 === */
.footer { text-align:center; padding:20px; color:#999; font-size:13px; border-top:1px solid #eee; background:#fff; }

/* === 햄버거 메뉴 === */
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; justify-content:center; gap:5px; }
.hamburger span { display:block; width:22px; height:2px; background:#555; border-radius:2px; transition:transform .2s, opacity .2s; }
.hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* === 반응형 (태블릿) === */
@media (max-width: 768px) {
    .container { flex-direction:column; }
    .sidebar { width:100%; }
    .post-card { flex-direction:column; }
    .post-thumb { width:100%; height:180px; }
    .admin-container { flex-direction:column; }
    .admin-sidebar { width:100%; }
    .hamburger { display:flex; }
    .mobile-parent-btn { display:inline-flex !important; }
    .mobile-parent-btn:active { background:#ffe9cc !important; }
    .nav { display:none; position:absolute; top:60px; left:0; right:0; background:#fff; border-bottom:1px solid #eee; padding:12px 20px; box-shadow:0 4px 12px rgba(0,0,0,.08); z-index:99; }
    .nav.active { display:flex; flex-direction:column; gap:0; }
    .nav.active a { padding:12px 0; border-bottom:1px solid #f5f5f5; font-size:15px; }
    .nav.active a:last-child { border-bottom:none; }
    .nav-auto { display:inline-block; margin-top:4px; text-align:center; }
    /* 모바일에선 보조 카테고리 줄을 숨기고 햄버거 메뉴 안에서 노출 */
    .topic-nav { display:none; }
    .nav-topic-mobile-only { display:flex; flex-wrap:wrap; gap:6px; padding:6px 0; }
    .nav.active .nav-topic-mobile-only { display:flex; }
    .nav-topic-mobile-only .nav-topic { padding:6px 10px !important; font-size:13px; }
    /* auth 축소 */
    .auth { font-size:12px; }
    .auth .user-name { display:none; }
    .auth .btn-login { padding:6px 12px; font-size:12px; }
    .auth .btn-sm { font-size:11px; padding:4px 8px; }
}

/* === 반응형 (모바일 375px-667px) === */
@media (max-width: 667px) {
    /* 헤더 */
    .header-inner { padding:0 12px; height:56px; }
    .logo { font-size:18px; }

    /* 터치 타겟 최소 44px */
    .nav.active a { min-height:44px; display:flex; align-items:center; font-size:15px; }
    .hamburger { min-width:44px; min-height:44px; }
    .auth a, .auth .btn-sm, .auth .btn-login { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
    .pagination a, .pagination .current { min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; }

    /* 메인 콘텐츠 */
    .main-content { padding:12px; }

    /* 글 카드 */
    .post-card { padding:14px; gap:12px; }
    .post-thumb { height:160px; border-radius:6px; }
    .post-title { font-size:16px; }
    .post-excerpt { font-size:13px; -webkit-line-clamp:2; }
    .post-meta { font-size:11px; flex-wrap:wrap; }
    .post-tags { gap:4px; }
    .tag { font-size:11px; padding:2px 6px; }

    /* 글 상세 */
    .post-detail { padding:20px 14px; border-radius:8px; }
    .post-header h1 { font-size:22px; }
    .post-body { font-size:15px; line-height:1.8; }
    .post-body h2 { font-size:19px; margin:24px 0 12px; }
    .post-body h3 { font-size:16px; }

    /* 사이드바 */
    .sidebar-widget { padding:16px; }

    /* 로그인 */
    .login-box { width:100%; padding:24px 16px; }

    /* 폼 */
    .form-group input, .form-group textarea, .form-group select { padding:12px; font-size:15px; min-height:44px; }

    /* 버튼 */
    .btn-primary { padding:12px 20px; font-size:15px; min-height:44px; }
    .btn-sm { padding:8px 14px; font-size:13px; min-height:44px; }

    /* 관리자 */
    .admin-sidebar { padding:12px 0; }
    .admin-sidebar nav a { padding:12px 16px; min-height:44px; display:flex; align-items:center; }
    .admin-main { padding:16px 12px; }
    .stats-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
    .stat-card { padding:12px; }
    .stat-number { font-size:22px; }
    .admin-table { font-size:13px; display:block; overflow-x:auto; }
    .admin-table th, .admin-table td { padding:8px 10px; white-space:nowrap; }

    /* 댓글 */
    .comment { gap:10px; padding:16px 0; }
    .comment-avatar { width:36px; height:36px; }
    .comment-form-inputs { flex-direction:column; }
    .comment-form-inputs input { min-height:44px; }
    .comment-form textarea { min-height:100px; font-size:15px; }
    .comment-form button { min-height:44px; width:100%; }

    /* AdSense 바 */
    .adsense-bar { gap:12px !important; padding:6px 12px !important; font-size:11px !important; }
    .adsense-bar strong { font-size:13px !important; }

    /* 검색 */
    .header-inner form[action="/search"] input { font-size:14px; padding:8px 12px; }

    /* 푸터 */
    .footer { padding:16px 12px; font-size:12px; }
}