body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f6f9;
    line-height: 1.6;
}

header {
    background: #0a1f44;
    color: white;
    padding: 40px 20px;
    text-align: center;
}

nav {
    background: #142b5c;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

nav ul li {
    margin: 10px 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

section {
    padding: 40px 20px;
    max-width: 1000px;
    margin: auto;
    background: white;
    margin-top: 20px;
    border-radius: 8px;
}

section img {
    width: 100%;
    max-width: 600px;
    display: block;
    margin-top: 20px;
}

footer {
    background: #0a1f44;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}
.highlight {
    background: #ffcc00;
    color: black !important;
    padding: 6px 10px;
    border-radius: 4px;
}
/* �⺻ �޴� ��Ÿ�� */
.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    background: #142b5c;
}

.menu > li {
    position: relative;
}

.menu > li > a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.menu > li > a:hover {
    background: #1f3a86;
}

/* ��Ӵٿ� */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    background: white;
    min-width: 180px;
    padding: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.submenu li a {
    display: block;
    padding: 10px 15px;
    color: #142b5c;
    text-decoration: none;
}

.submenu li a:hover {
    background: #f4f6f9;
}

/* ���콺 �ø��� ǥ�� */
.dropdown:hover .submenu {
    display: block;
}
.news-filter {
    text-align: center;
    margin: 20px;
}

.news-filter a {
    margin: 10px;
    padding: 8px 15px;
    background: #142b5c;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.news-filter a:hover {
    background: #1f3a86;
}

.news-list {
    max-width: 900px;
    margin: auto;
    padding: 20px;
}

.news-list article {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* style.css �� �Ʒ��� �߰� */
#topBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    background-color: #333;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

#topBtn:hover {
    background-color: #555;
}
/* =====================================================
   모바일 반응형 (RobotBank v2)
   ===================================================== */

/* 홈 버튼 스타일 */
.home-btn {
    color: white;
    text-decoration: none;
}
.home-btn:hover { text-decoration: underline; }

/* 헤더 */
header h1 { font-size: clamp(20px, 4vw, 32px); margin: 0 0 6px; }
header p   { margin: 0; font-size: 14px; opacity: .85; }

/* ── 햄버거 메뉴 ── */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 14px 18px;
    background: none;
    border: none;
}
.hamburger span {
    width: 24px; height: 3px;
    background: white; border-radius: 2px;
    transition: all .3s;
}
.nav-mobile-toggle { display: none; }

/* ── 태블릿 ── */
@media (max-width: 900px) {
    .menu { flex-wrap: wrap; }
    .menu > li > a { padding: 12px 14px; font-size: 14px; }
    section { margin: 12px; padding: 28px 16px; }
}

/* ── 모바일 ── */
@media (max-width: 640px) {
    header { padding: 20px 16px; }

    /* 햄버거 버튼 표시 */
    .hamburger { display: flex; }

    /* 기본 nav 숨김 */
    nav > ul.menu { display: none; flex-direction: column; }
    nav > ul.menu.open { display: flex; }

    .menu > li { width: 100%; margin: 0; }
    .menu > li > a { padding: 13px 20px; display: block; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.1); }

    /* 드롭다운 → 항상 표시 */
    .submenu {
        display: block !important;
        position: static;
        box-shadow: none;
        background: rgba(255,255,255,.05);
        min-width: 0;
    }
    .submenu li a { color: #ccd; padding: 10px 32px; font-size: 14px; }
    .submenu li a:hover { background: rgba(255,255,255,.1); }

    /* 섹션 */
    section { margin: 10px 8px; padding: 20px 14px; border-radius: 8px; }
    section img { max-width: 100%; }
    h2 { font-size: 18px; }
    h3 { font-size: 16px; }

    /* 뉴스 카드 */
    .news-card { padding: 16px; }
    .news-actions { gap: 6px; }
    .btn-action { padding: 6px 12px; font-size: 12px; }
    .comment-form { flex-direction: column; }
    .btn-comment-submit { width: 100%; }

    /* 관리자 */
    .adm-tabs a { padding: 8px 14px; font-size: 13px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }

    /* 인증 폼 */
    .auth-wrap { margin: 20px 12px; padding: 28px 20px; }

    /* 마이페이지 */
    .my-profile { flex-direction: column; text-align: center; padding: 20px 16px; }
    .stat-row { justify-content: center; }
    .my-tabs { gap: 6px; }
    .my-tabs a { padding: 8px 14px; font-size: 13px; }
}

/* ── 아주 작은 화면 ── */
@media (max-width: 380px) {
    .stat-grid { grid-template-columns: 1fr; }
    .news-actions .btn-action { font-size: 11px; padding: 5px 9px; }
}

/* =====================================================
   다크모드 (RobotBank v3)
   ===================================================== */

/* 다크모드 토글 버튼 */
#darkToggle {
    position: fixed;
    bottom: 80px;
    right: 30px;
    z-index: 9999;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: #142b5c;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    transition: background .3s, transform .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#darkToggle:hover { transform: scale(1.1); background: #1f3a86; }

/* 다크모드 변수 */
body.dark-mode {
    --bg:        #0f1117;
    --bg2:       #1a1d2e;
    --bg3:       #22263a;
    --text:      #e2e8f0;
    --text2:     #a0aec0;
    --border:    #2d3650;
    --header-bg: #0a0f1e;
    --nav-bg:    #0d1530;
    --card-bg:   #1a1d2e;
    --input-bg:  #22263a;
    --link:      #7eb3ff;
    --accent:    #3b5bdb;
}

/* 다크모드 기본 요소 */
body.dark-mode {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}
body.dark-mode header       { background: var(--header-bg) !important; }
body.dark-mode nav,
body.dark-mode .news-filter { background: var(--nav-bg) !important; }
body.dark-mode footer       { background: var(--header-bg) !important; }

/* 카드·섹션·배경 */
body.dark-mode section,
body.dark-mode .news-card,
body.dark-mode .sidebar-box,
body.dark-mode .popular-box,
body.dark-mode .post-box,
body.dark-mode .comments-box,
body.dark-mode .write-box,
body.dark-mode .tab-content,
body.dark-mode .mypage-header,
body.dark-mode .card-block,
body.dark-mode .adm-table,
body.dark-mode .auth-wrap,
body.dark-mode .news-footer-links,
body.dark-mode .board-wrap table,
body.dark-mode .stat-card    { background: var(--card-bg) !important; color: var(--text) !important; }

body.dark-mode .news-card h2 a,
body.dark-mode .post-title,
body.dark-mode h1,h2,h3,
body.dark-mode .popular-title a,
body.dark-mode .list-item .ti a,
body.dark-mode tbody td a    { color: var(--link) !important; }

body.dark-mode .news-meta,
body.dark-mode .news-desc,
body.dark-mode .c-text,
body.dark-mode .bc-text,
body.dark-mode .post-meta,
body.dark-mode .post-content,
body.dark-mode .popular-views,
body.dark-mode .meta,
body.dark-mode tbody td      { color: var(--text2) !important; }

/* 버튼·인풋 */
body.dark-mode .btn-action   { background: var(--bg3) !important; color: var(--text) !important; }
body.dark-mode .btn-action:hover { background: var(--accent) !important; color: #fff !important; }
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select        { background: var(--input-bg) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* 구분선·테두리 */
body.dark-mode .comment-item,
body.dark-mode .list-item,
body.dark-mode .popular-item,
body.dark-mode .bc-item,
body.dark-mode .post-meta,
body.dark-mode .post-actions { border-color: var(--border) !important; }

/* 검색바 */
body.dark-mode .search-wrap  { background: #0d1530 !important; }

/* AI 요약박스 */
body.dark-mode .ai-summary-box { background: #1e2a4a !important; border-color: #3b5bdb !important; color: var(--text) !important; }

/* 관리자 테이블 */
body.dark-mode .adm-table th { background: #0d1530 !important; }
body.dark-mode .adm-table tr:hover td { background: var(--bg3) !important; }

/* 배지 */
body.dark-mode .badge        { background: #1e2a4a !important; color: #7eb3ff !important; }

/* 탭 */
body.dark-mode .mypage-tabs a,
body.dark-mode .adm-tabs a   { background: var(--bg3) !important; color: var(--text2) !important; }
body.dark-mode .mypage-tabs a.active,
body.dark-mode .adm-tabs a.active { background: var(--accent) !important; color: #fff !important; }

/* 게시판 */
body.dark-mode table         { background: var(--card-bg) !important; }
body.dark-mode thead         { background: #0d1530 !important; }
body.dark-mode tbody tr:hover { background: var(--bg3) !important; }
body.dark-mode tbody tr      { border-color: var(--border) !important; }

/* 사이드바 카테고리 링크 */
body.dark-mode .news-sidebar a { color: var(--text2) !important; }

/* 스크롤바 (크롬) */
body.dark-mode ::-webkit-scrollbar       { width: 8px; }
body.dark-mode ::-webkit-scrollbar-track { background: var(--bg2); }
body.dark-mode ::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 4px; }

/* 페이지 전환 부드럽게 */
body { transition: background-color .3s, color .3s; }

/* 공지사항 다크모드 */
body.dark-mode #announcements { background: var(--card-bg) !important; }
body.dark-mode #announcements h2 { color: var(--text) !important; }
body.dark-mode #announcements table thead tr { background: #0d1530 !important; }
body.dark-mode #announcements table tbody tr:hover { background: var(--bg3) !important; }
body.dark-mode #announcements table td,
body.dark-mode #announcements table th { color: var(--text) !important; }
body.dark-mode #annModal { background: var(--card-bg) !important; color: var(--text) !important; }
body.dark-mode #annModal input,
body.dark-mode #annModal textarea { background: var(--input-bg) !important; color: var(--text) !important; border-color: var(--border) !important; }