/* NuriBoard Default Theme */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --danger: #dc2626;
    --text: #1e293b;
    --text-light: #64748b;
    --bg: #f8fafc;
    --white: #fff;
    --border: #e2e8f0;
    --radius: 8px;
}

/* 다크모드 */
[data-theme="dark"] {
    --text: #e2e8f0;
    --text-light: #94a3b8;
    --bg: #0f172a;
    --white: #1e293b;
    --border: #334155;
}
[data-theme="dark"] body{background:#0f172a;color:#e2e8f0}
[data-theme="dark"] .site-header{background:#1e293b;border-color:#334155}
[data-theme="dark"] .util-bar{background:#1e293b;border-color:#334155}
[data-theme="dark"] .board-page,[data-theme="dark"] .post-view,[data-theme="dark"] .write-page,[data-theme="dark"] .auth-box{background:#1e293b;border-color:#334155}
[data-theme="dark"] .side-box{background:#1e293b;border-color:#334155}
[data-theme="dark"] .tab-box{background:#1e293b;border-color:#334155}
[data-theme="dark"] .board-card{background:#1e293b;border-color:#334155}
[data-theme="dark"] .post-row:hover{background:#334155}
[data-theme="dark"] .search-input{background:#334155;border-color:#475569;color:#e2e8f0}
[data-theme="dark"] .ticker-bar{border-color:#475569}
[data-theme="dark"] .nb-popup{background:#1e293b;border-color:#334155}
[data-theme="dark"] .notif-panel{background:#1e293b;border-color:#334155}
[data-theme="dark"] .dropdown-menu{background:#1e293b;border-color:#334155}
[data-theme="dark"] .dropdown-menu a{color:#e2e8f0}
[data-theme="dark"] .dropdown-menu a:hover{background:#334155}
[data-theme="dark"] .footer-links a,[data-theme="dark"] .site-footer{color:#94a3b8}
[data-theme="dark"] .site-footer{background:#0f172a;border-top:1px solid #334155}
[data-theme="dark"] .attend-card,[data-theme="dark"] .mypage-panel,[data-theme="dark"] .mypage-header,[data-theme="dark"] .pub-header,[data-theme="dark"] .pub-section,[data-theme="dark"] .pub-stat{background:#1e293b;border-color:#334155}
[data-theme="dark"] .cta-box{background:linear-gradient(135deg,#1e3a5f,#4c1d95)}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* 유틸바 */
.util-bar{background:#f1f5f9;border-bottom:1px solid var(--border);font-size:12px;color:var(--text-light)}
.util-bar .container{display:flex;justify-content:space-between;align-items:center;height:32px}
.util-right{display:flex;gap:12px}
.darkmode-btn{background:none;border:none;cursor:pointer;font-size:14px;padding:0 4px;opacity:.7}
.darkmode-btn:hover{opacity:1}
.util-right a{color:var(--text-light);text-decoration:none}
.util-right a:hover{color:var(--primary);text-decoration:none}

/* 헤더 */
.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    display: flex;
    align-items: center;
    height: 64px;
    gap: 20px;
}

.header-search{flex:1;max-width:500px}
.header-search form{display:flex;border:2px solid var(--primary);border-radius:8px;overflow:hidden}
.search-input{flex:1;padding:8px 14px;border:none;font-size:14px;outline:none}
.search-btn{padding:8px 14px;background:var(--primary);color:#fff;border:none;cursor:pointer;font-size:16px}

.logo {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo-img { height: 52px; max-width: 300px; vertical-align: middle; object-fit: contain; }

.main-nav {
    display: flex;
    gap: 4px;
    flex: 1;
}

.main-nav a {
    padding: 8px 14px;
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s;
}

.main-nav a:hover { background: #f1f5f9; text-decoration: none; }

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 10;
}

.user-name { font-size: 13px; color: var(--text-light); }

.btn-header {
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-light);
    transition: all 0.15s;
}

.btn-header:hover { background: #f1f5f9; text-decoration: none; color: var(--text); }
.btn-header.btn-primary { background: var(--primary); color: var(--white); }
.btn-header.btn-primary:hover { background: var(--primary-dark); }


/* 히어로 섹션 */
.hero-section{position:relative;overflow:hidden;max-width:1200px;margin:0 auto;padding:0 16px}
.hero-section a{display:block}
.hero-section-inner{border-radius:12px;overflow:hidden;position:relative;background:#000}
.hero-img{width:100%;height:auto;display:block;object-fit:cover;max-height:240px}
.hero-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.6));padding:24px;color:#fff}
.hero-overlay h2{font-size:22px;font-weight:800;margin-bottom:4px;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.hero-overlay p{font-size:14px;opacity:.9;text-shadow:0 1px 4px rgba(0,0,0,.3)}

/* NEW 뱃지 */
.icon-new{display:inline-block;background:#dc2626;color:#fff;font-size:9px;font-weight:800;padding:1px 4px;border-radius:3px;margin-left:4px;vertical-align:middle;line-height:1.2}

/* 알림 */
.notif-wrap{position:relative}
.notif-bell{background:none;border:none;font-size:20px;cursor:pointer;padding:6px;position:relative;line-height:1}
.notif-badge{position:absolute;top:0;right:0;background:#dc2626;color:#fff;border-radius:10px;min-width:16px;height:16px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px}
.notif-panel{display:none;position:absolute;top:100%;right:0;width:320px;max-height:400px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.12);z-index:999;overflow:hidden}
.notif-panel.open{display:block}
.notif-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #f1f5f9;font-size:14px}
.notif-list{max-height:340px;overflow-y:auto}
.notif-item{display:block;padding:10px 16px;border-bottom:1px solid #f8fafc;text-decoration:none;color:var(--text);font-size:13px;transition:background .1s}
.notif-item:hover{background:#f8fafc;text-decoration:none}
.notif-item.unread{background:#eff6ff}
.notif-item .ni-msg{display:block}
.notif-item .ni-time{display:block;font-size:11px;color:#94a3b8;margin-top:2px}
.notif-empty{padding:30px;text-align:center;color:#94a3b8;font-size:13px}

/* 팝업 */
.nb-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9990;background:rgba(0,0,0,.4)}
.nb-popup{position:fixed;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;max-width:90vw;max-height:85vh}
.nb-popup-body{padding:0;overflow-y:auto;max-height:70vh}
.nb-popup-body img{border-radius:14px 14px 0 0}
.nb-popup-footer{padding:10px 14px;display:flex;justify-content:space-between;align-items:center;background:#f8fafc;border-top:1px solid #e2e8f0}
.nb-popup-footer button{background:none;border:none;font-size:12px;color:#64748b;cursor:pointer;padding:6px 10px;border-radius:6px}
.nb-popup-footer button:hover{background:#e2e8f0;color:#1e293b}

/* 관리자 프론트 패널 */
.admin-float-btn{position:fixed;bottom:24px;left:24px;z-index:9998;width:44px;height:44px;border-radius:10px;background:#1e293b;color:#94a3b8;font-size:18px;border:none;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:all .15s;opacity:.7}
.admin-float-btn:hover{opacity:1;color:#fff}
.admin-panel{position:fixed;top:0;left:-320px;width:310px;height:100vh;background:#fff;z-index:9999;box-shadow:4px 0 24px rgba(0,0,0,.1);transition:left .25s ease;overflow-y:auto}
.admin-panel.open{left:0}
.ap-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0;font-size:16px}
.ap-section{padding:16px 20px;border-bottom:1px solid #f1f5f9}
.ap-title{font-size:12px;font-weight:700;color:#94a3b8;text-transform:uppercase;margin-bottom:10px}
.ap-links{display:flex;flex-direction:column;gap:4px}
.ap-links a{padding:8px 12px;font-size:13px;color:#475569;text-decoration:none;border-radius:6px;transition:background .1s}
.ap-links a:hover{background:#f1f5f9;color:#2563eb}
.ap-form{display:flex;flex-direction:column;gap:8px}
.ap-input{padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;outline:none}
.ap-input:focus{border-color:#2563eb}
.ap-menu-list{}
.ap-menu-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f8fafc;font-size:13px}
.ap-menu-item:last-child{border-bottom:none}
.ap-menu-item .ap-mi-name{flex:1;color:#1e293b}
.ap-menu-item .ap-mi-sub{color:#94a3b8;font-size:11px;margin-left:4px}
.ap-menu-item button{background:none;border:none;color:#dc2626;cursor:pointer;font-size:16px;padding:0 4px}

.side-social{display:flex;justify-content:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}

/* 랭킹 탭 */
.ranking-tabs{display:flex;border-bottom:2px solid var(--border);padding:0 14px}
.ranking-tab{padding:10px 16px;font-size:13px;font-weight:600;color:var(--text-light);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px}
.ranking-tab:hover{color:var(--text)}
.ranking-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.ranking-panel{display:none}
.ranking-panel.active{display:block}

/* 레벨 뱃지 */
.level-badge{display:inline-block;font-size:11px;font-weight:700;color:#64748b;background:#f1f5f9;padding:1px 6px;border-radius:4px;vertical-align:middle}

/* 공통 아바타 */
.nb-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0;vertical-align:middle}
.nb-avatar img{width:100%;height:100%;object-fit:cover}
.nb-avatar-text{background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;font-weight:700}

/* 메인 콘텐츠 */
.site-main { min-height: calc(100vh - 120px); padding: 8px 0 24px; }

/* 실시간 바 */
/* 띠공지 */
.ticker-bar{font-size:13px;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.15)}
.ticker-bar .container{display:flex;align-items:center;height:36px;gap:0}
.ticker-label{display:none}
.ticker-content{flex:1;overflow:hidden;white-space:nowrap}
.ticker-content span{display:inline-block}

/* 띠공지 효과: 왼쪽 흐르기 */
.ticker-scroll-left{overflow:hidden}
.ticker-scroll-left span{animation:tickerScrollLeft 60s linear infinite;display:inline-block;padding-left:100%;white-space:nowrap}
@keyframes tickerScrollLeft{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* 띠공지 효과: 오른쪽 흐르기 */
.ticker-scroll-right span{animation:tickerScrollRight 15s linear infinite}
@keyframes tickerScrollRight{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* 띠공지 효과: 깜빡이 */
.ticker-flash span{animation:tickerFlash 1.5s ease-in-out infinite}
@keyframes tickerFlash{0%,100%{opacity:1}50%{opacity:.15}}

/* 띠공지 효과: 물결 */
.ticker-wave span{display:inline-flex !important}
.ticker-wave .wave-char{display:inline-block;animation:tickerWave 2s ease-in-out infinite}
@keyframes tickerWave{0%,100%{transform:translateY(0)}25%{transform:translateY(-5px)}75%{transform:translateY(5px)}}

/* 대표 배너 */
.banner-wrap{padding:8px 16px 0;max-width:1200px;margin:0 auto}
.main-banner-slider{border-radius:12px;overflow:hidden;position:relative;background:#000}
.mbs-slide{display:none}
.mbs-slide.active{display:block}
.mbs-slide img{width:100%;max-height:240px;object-fit:cover;display:block}
.mbs-dots{position:absolute;bottom:10px;right:14px;display:flex;gap:6px}
.mbs-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:background .2s}
.mbs-dot.active{background:#fff}

/* 메인 2단 레이아웃 */
.main-layout{display:flex;gap:20px;margin:20px 0;align-items:flex-start}
.main-content{flex:1;min-width:0}
.main-sidebar{width:300px;flex-shrink:0}

/* 탭 박스 */
.tab-box{background:var(--white);border:1px solid var(--border);border-radius:10px;margin-bottom:20px;overflow:hidden}
.tab-header{display:flex;border-bottom:2px solid var(--border)}
.tab-btn{flex:1;padding:12px 8px;border:none;background:none;font-size:14px;font-weight:600;cursor:pointer;color:var(--text-light);transition:all .15s;border-bottom:3px solid transparent;margin-bottom:-2px}
.tab-btn:hover{color:var(--text);background:#f8fafc}
.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);background:#fff}
.tab-panel{display:none}
.tab-panel.active{display:block}
.empty-row{padding:24px;text-align:center;color:var(--text-light);font-size:13px}

/* 섹션 타이틀 */
.section-title{font-size:16px;font-weight:700;color:var(--text);margin:20px 0 10px;padding-left:10px;border-left:3px solid #1e293b}

/* 사이드 박스 */
.side-box{background:var(--white);border:1px solid var(--border);border-radius:10px;margin-bottom:12px;overflow:hidden}
.side-box-title{padding:10px 14px;font-size:13px;font-weight:700;border-bottom:1px solid var(--border);background:#f8fafc}
.side-box-body{padding:12px 14px}
.side-list{list-style:none;padding:0}
.side-list li{border-bottom:1px solid #f8fafc}
.side-list li a{display:block;padding:7px 14px;font-size:13px;color:var(--text);text-decoration:none}
.side-list li a:hover{background:#f8fafc;text-decoration:none}
.side-input{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;margin-bottom:6px;outline:none}
.side-input:focus{border-color:var(--primary)}
.side-login-links{text-align:center;margin-top:8px;font-size:12px}
.side-login-links a{color:var(--text-light)}
.side-banner{display:block;margin-bottom:12px}
.side-banner img{width:100%;border-radius:8px;display:block}

/* 내정보 박스 */
.myinfo-box{text-align:center;padding:4px 0}
.myinfo-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.myinfo-name{font-size:14px;margin-bottom:10px}
.myinfo-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.myinfo-stat-item{background:#f8fafc;border-radius:8px;padding:8px 4px;text-align:center}
.stat-val{display:block;font-size:15px;font-weight:700;color:var(--primary)}
.stat-lbl{display:block;font-size:11px;color:var(--text-light)}
.myinfo-links{display:flex;justify-content:center;gap:8px;font-size:12px}
.myinfo-links a{color:var(--text-light);padding:4px 8px;border-radius:4px;border:1px solid var(--border)}
.myinfo-links a:hover{color:var(--primary);border-color:var(--primary);text-decoration:none}

/* 메인 박스 */
.main-box{background:var(--white);border:1px solid var(--border);border-radius:10px;margin-bottom:16px;overflow:hidden}
.main-box-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.main-box-header h2{font-size:15px;font-weight:700}
.more{font-size:12px;color:var(--text-light);text-decoration:none}
.more:hover{color:var(--primary);text-decoration:none}

/* 인기글 리스트 */
.popular-list{list-style:none;padding:8px 0}
.popular-list li{display:flex;align-items:center;padding:9px 16px;border-bottom:1px solid #f8fafc;gap:10px}
.popular-list li:last-child{border-bottom:none}
.popular-list .rank{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:12px;font-weight:800;flex-shrink:0;background:#e2e8f0;color:var(--text-light)}
.popular-list .rank-1{background:#dc2626;color:#fff}
.popular-list .rank-2{background:#f59e0b;color:#fff}
.popular-list .rank-3{background:#10b981;color:#fff}
.popular-list .rank-4{background:#3b82f6;color:#fff}
.popular-list .rank-5{background:#8b5cf6;color:#fff}
.rank-board{font-size:11px;color:var(--text-light);flex-shrink:0;background:#f1f5f9;padding:2px 6px;border-radius:3px}
.pop-title{flex:1;font-size:14px;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-title:hover{color:var(--primary);text-decoration:none}
.pop-meta{display:flex;gap:8px;flex-shrink:0;align-items:center}
.pop-vote{font-size:12px;font-weight:700;color:var(--primary)}
.pop-hit{font-size:11px;color:var(--text-light)}

/* 최신글 테이블 */
.latest-table{padding:0}
.lt-row{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f8fafc;gap:8px;font-size:13px}
.lt-row:hover{background:#fafbfc}
.lt-board{color:var(--text-light);font-size:11px;flex-shrink:0;min-width:60px}
.lt-title{flex:1;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-title:hover{color:var(--primary);text-decoration:none}
.lt-cmt{color:var(--primary);font-size:11px;margin-left:3px}
.lt-writer{font-size:11px;color:var(--text-light);flex-shrink:0}
.lt-date{font-size:11px;color:var(--text-light);flex-shrink:0;min-width:35px;text-align:right}

/* 최신 댓글 위젯 */
.comment-list-widget{list-style:none;padding:8px 0}
.comment-list-widget li a{display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid #f8fafc;font-size:13px;color:var(--text);text-decoration:none}
.comment-list-widget li:last-child a{border-bottom:none}
.comment-list-widget li a:hover{background:#fafbfc;text-decoration:none}
.clw-writer{font-weight:700;flex-shrink:0;color:var(--primary);min-width:60px}
.clw-post{font-size:11px;color:var(--text-light);flex-shrink:0;background:#f1f5f9;padding:1px 5px;border-radius:3px}
.clw-text{color:var(--text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* 베스트 회원 */
.best-members{list-style:none;padding:4px 0}
.best-members li{padding:7px 14px;border-bottom:1px solid #f8fafc;font-size:13px;display:flex;align-items:center;gap:6px}
.best-members li:last-child{border-bottom:none}
.bm-rank{width:20px;height:20px;border-radius:4px;background:#e2e8f0;color:var(--text-light);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.best-members li:nth-child(1) .bm-rank{background:#dc2626;color:#fff}
.best-members li:nth-child(2) .bm-rank{background:#f59e0b;color:#fff}
.best-members li:nth-child(3) .bm-rank{background:#10b981;color:#fff}
.bm-point{margin-left:auto;font-size:11px;color:var(--primary);font-weight:600}

/* 이미지 갤러리 섹션 */
.gallery-section{margin-bottom:10px;margin-top:-4px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery-item{position:relative;display:block;border-radius:10px;overflow:hidden;aspect-ratio:1;background:#f1f5f9;text-decoration:none}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item:hover{text-decoration:none}
.gallery-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;background:#e2e8f0;color:#94a3b8}
.gallery-info{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.6));padding:10px;color:#fff}
.gallery-title{font-size:13px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.3)}

/* 최신글 목록 섹션 */
.latest-list-section{margin-bottom:20px}
.latest-list-box{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.ll-row{display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid #f8fafc;gap:8px;font-size:13px}
.ll-row:last-child{border-bottom:none}
.ll-row:hover{background:#f8fafc}
.ll-board{font-size:11px;color:var(--text-light);background:#f1f5f9;padding:2px 7px;border-radius:3px;flex-shrink:0}
.ll-title{flex:1;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ll-title:hover{color:var(--primary)}
.ll-cmt{color:var(--primary);font-size:12px;margin-left:3px}
.ll-writer{font-size:12px;color:var(--text-light);flex-shrink:0;width:60px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ll-date{font-size:11px;color:#94a3b8;flex-shrink:0;width:75px;text-align:right}

/* 사이드 최근 댓글 */
.side-comments{list-style:none;padding:0;margin:0}
.side-comments li{border-bottom:1px solid #f8fafc}
.side-comments li:last-child{border-bottom:none}
.side-comments a{display:block;padding:10px 14px;text-decoration:none;transition:background .1s}
.side-comments a:hover{background:#f8fafc;text-decoration:none}
.sc-writer{display:block;font-size:12px;font-weight:600;color:var(--primary);margin-bottom:2px}
.sc-text{display:block;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-post{display:block;font-size:11px;color:#94a3b8;margin-top:2px}
.sc-empty{padding:20px 14px;text-align:center;color:var(--text-light);font-size:13px}

/* 커뮤니티 현황 */
.stat-list{padding:0}
.stat-row{display:flex;align-items:center;padding:8px 14px;font-size:13px;border-bottom:1px solid #f8fafc}
.stat-row:last-child{border-bottom:none}
.stat-row.highlight{background:#f0f9ff}
.stat-row.highlight .stat-val-right{color:#dc2626;font-weight:700}
.stat-icon{width:22px;text-align:center;font-size:13px;flex-shrink:0}
.stat-name{flex:1;color:#475569}
.stat-val-right{font-weight:600;color:var(--text);white-space:nowrap}
.stat-divider{height:1px;background:#e2e8f0;margin:2px 14px}

/* 게시판 그리드 */
.board-grid-wrap{margin-top:8px}
.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0}
.board-card{background:var(--white);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.board-card-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:#f8fafc}
.board-card-title{font-size:14px;font-weight:700;color:var(--text)}
.board-card-title:hover{color:var(--primary);text-decoration:none}
.board-card-more{font-size:11px;color:var(--text-light)}

/* 하단 CTA */
.cta-box{background:#1e293b;color:#fff;border-radius:12px;padding:32px;text-align:center;margin:20px 0}
.cta-box p{font-size:17px;margin-bottom:16px;font-weight:500}
.cta-buttons{display:flex;justify-content:center;gap:10px}
.cta-buttons .btn{background:#fff;color:var(--primary);font-weight:700;border:none}
.cta-buttons .btn:hover{background:#f0f0ff;text-decoration:none}
.cta-buttons .btn:last-child{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4)}
.cta-buttons .btn:last-child:hover{background:rgba(255,255,255,.25)}

/* 메뉴 네비게이션 바 */
.site-nav{background:var(--nav-bg,#2d2d2d);border-bottom:2px solid rgba(0,0,0,.2);position:relative;z-index:90}
.site-nav .container{display:flex;align-items:center}
.nav-links{display:flex;align-items:center;gap:0;justify-content:center;flex:1}
.nav-dropdown{position:relative}
.nav-link{padding:12px 20px;color:var(--nav-color,#e0e0e0);font-size:14px;font-weight:500;transition:background .15s;text-decoration:none;display:inline-block}
.nav-link:hover{background:rgba(255,255,255,.1);text-decoration:none}
.nav-link.active{background:rgba(255,255,255,.1)}
.nav-link .arrow{font-size:10px;margin-left:4px;color:#999}
.dropdown-menu{display:none;position:absolute;top:100%;left:0;background:var(--white);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.08);min-width:160px;z-index:50;padding:4px 0}
.nav-dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:8px 16px;color:var(--text);font-size:13px;text-decoration:none;transition:background .1s}
.dropdown-menu a:hover{background:#f1f5f9;text-decoration:none;color:var(--primary)}
/* 햄버거 버튼 — 데스크탑에서 숨김 */
.mobile-member-nav{display:none}
.mobile-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.mobile-toggle:hover{background:#f1f5f9}
.mobile-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .25s}
.mobile-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-toggle.open span:nth-child(2){opacity:0}
.mobile-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 3컬럼 레이아웃 */
.site-body{display:flex;flex-direction:column}
.layout-3col{display:flex;max-width:1400px;margin:0 auto;gap:16px;padding:0 16px;align-items:flex-start}
.layout-3col .site-main{flex:1;min-width:0}
.side-left,.side-right{width:160px;flex-shrink:0;padding-top:8px}
.wing-sticky{position:sticky;top:20px}
.wing-banner{display:block;margin-bottom:8px}
.wing-banner img{width:100%;min-height:500px;border-radius:8px;display:block;object-fit:cover}
.side-banner{display:block;margin-bottom:12px}
.side-banner img{width:100%;border-radius:8px}

/* 메인 배너 */
.main-banners{display:flex;gap:12px;margin-bottom:24px;overflow-x:auto;padding-bottom:4px}
.main-banner-item{flex-shrink:0;border-radius:12px;overflow:hidden}
.main-banner-item img{display:block;max-height:200px;border-radius:12px}

/* 위젯 시스템 */
.widget{margin-bottom:20px}
.widget-title{font-size:16px;font-weight:700;padding:12px 16px;border-bottom:1px solid var(--border);margin-bottom:0}
.widget-banner img{width:100%;border-radius:12px;display:block}
.widget-banner a{display:block}
.widget-slider .slider-wrap{position:relative;overflow:hidden;border-radius:12px;background:#000}
.widget-slider .slider-slide{display:none;width:100%}
.widget-slider .slider-slide.active{display:block}
.widget-slider .slider-slide img{width:100%;display:block;object-fit:cover}
.widget-slider .slider-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.widget-slider .slider-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer}
.widget-slider .slider-dot.active{background:#fff}
.widget-post-list{list-style:none;padding:0;background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.widget-post-list li a{display:flex;align-items:center;padding:10px 16px;color:var(--text);font-size:14px;text-decoration:none;border-bottom:1px solid #f8fafc;gap:6px;transition:background .1s}
.widget-post-list li a:hover{background:#f8fafc;text-decoration:none}
.widget-post-list .wpl-empty{padding:20px;text-align:center;color:var(--text-light);font-size:13px}
.wpl-board{color:var(--text-light);font-size:12px;flex-shrink:0}
.wpl-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpl-comment{color:var(--primary);font-size:12px;flex-shrink:0}
.wpl-vote{color:var(--primary);font-size:12px;font-weight:600;flex-shrink:0}
.wpl-date{color:var(--text-light);font-size:12px;flex-shrink:0}
.widget-login{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px}
.login-user-info{text-align:center}
.login-user-name{font-size:15px;margin-bottom:8px}
.login-user-meta{font-size:12px;color:var(--text-light);margin-bottom:10px;display:flex;justify-content:center;gap:12px}
.login-user-links{display:flex;justify-content:center;gap:10px;font-size:13px}
.login-user-links a{color:var(--text-light)}
.login-widget-form input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;margin-bottom:8px;outline:none}
.login-widget-form input:focus{border-color:var(--primary)}
.login-widget-form button{width:100%;padding:10px;background:var(--primary);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer}
.login-widget-form button:hover{background:var(--primary-dark)}
.login-widget-links{text-align:center;margin-top:8px;font-size:12px}
.login-widget-links a{color:var(--text-light)}
.widget-html{margin-bottom:20px}

/* 메인 위젯 (최근글/인기글) */
.main-widget{background:var(--white);border:1px solid var(--border);border-radius:12px;margin-bottom:24px;overflow:hidden}
.widget-tabs{display:flex;border-bottom:1px solid var(--border)}
.widget-tab{flex:1;padding:12px;border:none;background:none;font-size:14px;font-weight:600;cursor:pointer;color:var(--text-light);transition:all .15s}
.widget-tab:hover{color:var(--text)}
.widget-tab.active{color:var(--primary);border-bottom:2px solid var(--primary);margin-bottom:-1px}
.widget-list{list-style:none;padding:0}
.widget-list li a{display:flex;align-items:center;padding:10px 18px;color:var(--text);font-size:14px;text-decoration:none;border-bottom:1px solid #f8fafc;gap:6px;transition:background .1s}
.widget-list li a:hover{background:#f8fafc;text-decoration:none}
.widget-list .empty{padding:20px;text-align:center;color:var(--text-light);font-size:13px}
.wl-board{color:var(--text-light);font-size:12px;flex-shrink:0}
.wl-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-info{color:var(--text-light);font-size:12px;flex-shrink:0}
.wl-vote{color:var(--primary);font-size:12px;font-weight:600;flex-shrink:0}

/* 메인 페이지 */
.main-hero {
    text-align: center;
    padding: 16px 0 12px;
}

.main-hero h1 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.main-hero p { color: var(--text-light); font-size: 15px; }

.main-boards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.board-preview {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.board-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.board-preview-header h2 { font-size: 16px; font-weight: 700; }
.board-preview-header h2 a { color: var(--text); }
.board-preview-header .more { font-size: 12px; color: var(--text-light); }

.post-list-mini {
    list-style: none;
    padding: 0;
}

.post-list-mini li a {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    color: var(--text);
    font-size: 14px;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.1s;
}

.post-list-mini li a:hover { background: #f8fafc; text-decoration: none; }
.post-list-mini .post-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-list-mini .comment-count { color: var(--primary); font-size: 12px; margin-left: 4px; }
.post-list-mini .post-date { color: var(--text-light); font-size: 12px; margin-left: 12px; }
.post-list-mini .empty { padding: 20px 18px; color: var(--text-light); text-align: center; font-size: 13px; }

/* 게시판 */
.board-wrap { max-width: 960px; margin: 0 auto; }
.board-page { background: var(--white); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
.board-header { padding: 24px; border-bottom: 1px solid var(--border); }
.board-header h1 { font-size: 22px; font-weight: 700; }
.board-desc { color: var(--text-light); font-size: 14px; margin-top: 4px; }

.board-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}

.board-search {
    display: flex;
    gap: 6px;
}

.board-search input {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    outline: none;
    width: 240px;
}

.board-search input:focus { border-color: var(--primary); }

/* 게시글 테이블 */
.post-table { width: 100%; }

.post-row {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}

.post-row:hover { background: #fafbfc; }
.post-row.post-header { background: #f8fafc; font-weight: 600; color: var(--text-light); font-size: 12px; }
.post-row.post-header:hover { background: #f8fafc; }
.post-row.notice { background: #eff6ff; }
.post-row.empty { justify-content: center; color: var(--text-light); padding: 40px; }

.col-num { width: 70px; text-align: center; flex-shrink: 0; }
.col-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-title a { color: var(--text); }
.col-title a:hover { color: var(--primary); text-decoration: none; }
.col-title .comment-count { color: var(--primary); font-size: 12px; margin-left: 4px; }
.col-writer { width: 100px; text-align: center; flex-shrink: 0; color: var(--text-light); }
.col-date { width: 70px; text-align: center; flex-shrink: 0; color: var(--text-light); font-size: 13px; }
.col-hit { width: 60px; text-align: center; flex-shrink: 0; color: var(--text-light); font-size: 13px; }

.badge-notice {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

/* 페이지네이션 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 20px;
}

.pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: var(--radius);
    color: var(--text-light);
    font-size: 14px;
}

.pagination a:hover { background: #f1f5f9; text-decoration: none; }
.pagination a.active { background: var(--primary); color: var(--white); }

/* 게시글 상세 */
.post-view { background: var(--white); border-radius: 12px; border: 1px solid var(--border); }
.post-view-header { padding: 24px; border-bottom: 1px solid var(--border); }
.post-view-header h1 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.post-meta { display: flex; gap: 16px; color: var(--text-light); font-size: 13px; flex-wrap: wrap; }

.post-content {
    padding: 24px;
    min-height: 200px;
    line-height: 1.8;
    word-break: break-word;
    direction: ltr;
    text-align: left;
}

.post-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.post-actions-right { display: flex; gap: 6px; }

/* 댓글 */
.comments { padding: 24px; }
.comments h2 { font-size: 17px; font-weight: 700; margin-bottom: 16px; }
.comments .count { color: var(--primary); }

.comment-item {
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.comment-writer { font-size: 14px; }
.comment-date { font-size: 12px; color: var(--text-light); }
.comment-body { font-size: 14px; line-height: 1.6; }

.btn-link {
    background: none;
    border: none;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-light);
}

.btn-link.delete:hover { color: var(--danger); }

.comment-form {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.comment-form textarea {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    resize: vertical;
    outline: none;
    font-family: inherit;
}

.comment-form textarea:focus { border-color: var(--primary); }

.login-notice {
    margin-top: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: var(--radius);
    text-align: center;
    color: var(--text-light);
    font-size: 14px;
}

/* 글쓰기 */
.write-page {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border);
    max-width: 860px;
    margin: 0 auto;
}

.write-form { padding: 20px 24px; }

.write-form .form-group { margin-bottom: 18px; }

.write-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.write-form input[type="text"],
.write-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    outline: none;
    font-family: inherit;
}

.write-form input:focus,
.write-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}

.write-form textarea { resize: vertical; line-height: 1.7; }

.form-actions {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
}

/* 인증 페이지 (로그인/가입) */
.auth-page {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.auth-box {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 32px;
    width: 100%;
    max-width: 420px;
}

.auth-box h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
}

.auth-box .form-group { margin-bottom: 16px; }

.auth-box label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.auth-box input[type="text"],
.auth-box input[type="email"],
.auth-box input[type="password"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    outline: none;
}

.auth-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }

.auth-link { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text-light); }

.profile-info {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-light);
}

.profile-info p { margin-bottom: 4px; }

/* 알림 */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13px;
}

.alert.error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.alert.success { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }

/* 버튼 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.btn:hover { background: #f8fafc; text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--white); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { color: var(--danger); border-color: #fecaca; }
.btn-danger:hover { background: #fef2f2; }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-full { width: 100%; }

/* 푸터 */
.site-footer {
    padding: 20px 0;
    text-align: center;
    color: var(--text-light);
    font-size: 13px;
    border-top: 1px solid var(--border);
    background: var(--white);
}

.site-footer a { color: var(--text-light); }
.footer-info{margin:8px 0;font-size:12px;color:#94a3b8;line-height:1.6}
.online-count { color: var(--primary); }
.online-count strong { font-weight: 700; }
.level-icon { font-size: 12px; cursor: default; }

/* 404 */
.error-page {
    text-align: center;
    padding: 80px 0;
}

.error-page h1 { font-size: 60px; font-weight: 800; color: var(--text-light); }
.error-page p { color: var(--text-light); margin: 12px 0 24px; }

/* 반응형 */
@media (max-width: 768px) {
    .side-left,.side-right{display:none}
    .layout-3col{padding:0}
    .util-bar{display:none}
    .header-search{display:none}
    .main-layout{flex-direction:column}
    .main-content{width:100%;min-width:0}
    .main-sidebar{width:100%}
    .main-sidebar .myinfo-box-wrap{display:none}
    .container{padding:0 16px;width:100%}
    .board-grid{grid-template-columns:1fr}
    .header-inner { gap: 12px; }

    /* 모바일: 햄버거 + 가로 스크롤 메뉴 (그누보드 스타일) */
    .mobile-toggle{display:flex;flex-shrink:0}
    .site-nav .container{gap:0;padding:0}
    .nav-links{display:flex!important;flex-direction:row;justify-content:flex-start!important;overflow-x:auto;overflow-y:visible;white-space:nowrap;padding:0;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:static;touch-action:pan-x}
    .nav-links::-webkit-scrollbar{display:none}
    .nav-links::-webkit-scrollbar{display:none}
    .nav-link{padding:10px 14px;font-size:13px;flex-shrink:0;width:auto;border-bottom:none}
    .nav-dropdown{width:auto;position:relative}
    .dropdown-menu{display:none;position:fixed;z-index:9999;min-width:160px;background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.18);padding:6px 0;max-height:60vh;overflow-y:auto}
    .nav-dropdown.open>.dropdown-menu{display:block}
    .dropdown-menu a{padding:11px 18px;font-size:14px;border-bottom:1px solid #f8fafc}
    .dropdown-menu a:last-child{border-bottom:none}

    /* 모바일: 햄버거 클릭 시 내정보 패널 */
    .mobile-member-nav{display:none;background:var(--nav-bg,#2d2d2d);border-bottom:1px solid rgba(255,255,255,.15);padding:8px 0;box-shadow:0 4px 12px rgba(0,0,0,.15)}
    .mobile-member-nav.open{display:block}
    .nav-badge{background:#dc2626;color:#fff;border-radius:8px;font-size:11px;padding:1px 6px;margin-left:4px;font-weight:700}
    .mobile-myinfo{background:#fff;border-radius:12px;margin:4px 12px 8px;padding:20px;text-align:center;color:var(--text)}
    .mobile-myinfo-avatar{width:60px;height:60px;border-radius:50%;background:var(--primary);color:#fff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
    .mobile-myinfo-name{font-size:15px;margin-bottom:14px;color:var(--text)}
    .mobile-myinfo-stats{display:flex;justify-content:center;gap:24px;margin-bottom:14px}
    .mobile-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
    .mobile-stat-val{font-size:15px;font-weight:700;color:var(--primary)}
    .mobile-stat-lbl{font-size:11px;color:var(--text-light)}
    .mobile-myinfo-links{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
    .mobile-myinfo-links a{display:inline-block;padding:6px 14px;border:1px solid var(--border);border-radius:6px;font-size:13px;color:var(--text);text-decoration:none;background:#f8fafc}
    .mobile-myinfo-links a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

    .header-write-btn { display: none; }
    .user-name { display: none; }

    .main-hero h1 { font-size: 22px; }
    .main-boards { grid-template-columns: 1fr; }

    .board-toolbar { flex-direction: column; gap: 10px; padding: 12px 16px; }
    .board-search { width: 100%; }
    .board-search input { flex: 1; width: auto; }

    .post-row { padding: 10px 16px; }
    .col-num, .col-hit { display: none; }
    .col-writer { width: 60px; font-size: 12px; }
    .col-date { width: 50px; font-size: 11px; }

    .post-view-header, .post-content, .post-actions, .comments { padding: 16px; }
    .post-view-header h1 { font-size: 18px; }

    .comment-form { flex-direction: column; }
    .comment-form textarea { width: 100%; min-height: 80px; }
    .comment-form .btn { width: 100%; }

    .write-form { padding: 16px; }
    .form-actions { flex-direction: column-reverse; gap: 8px; }
    .form-actions .btn { width: 100%; }

    .auth-box { margin: 0 12px; padding: 24px; }
    .gallery-grid{grid-template-columns:repeat(2,1fr);gap:8px}
    .gallery-title{font-size:11px}
    .hero-section{padding:0 16px;margin-top:12px}
    .hero-img{max-height:180px}
    .hero-overlay{padding:14px}
    .hero-overlay h2{font-size:16px}
    .hero-overlay p{font-size:12px}
}