/* 상단 내비게이션 바 (전 페이지 공통)
   - 모든 페이지의 body가 padding:20px 이므로 음수 마진으로 화면 가로 전체를 채움
   - 색상은 각 페이지가 정의한 CSS 변수(--panel-bg 등)를 그대로 사용 (라이트/다크 자동 대응) */
.topnav {
    margin: -20px -20px 22px -20px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.topnav-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 9px 18px;
}
.topnav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--primary);
    font-weight: 800;
    font-size: 1.05rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.topnav-brand img {
    height: 28px;
    width: 28px;
    object-fit: contain;
}
.topnav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.topnav-links::-webkit-scrollbar { height: 0; }
.topnav-links a {
    display: inline-block;
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: 7px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.15s, background 0.15s;
}
.topnav-links a:hover {
    color: var(--text-main);
    background: var(--section-bg);
}
.topnav-links a.active {
    color: #fff;
    background: var(--primary);
}
@media (max-width: 640px) {
    .topnav-inner { gap: 10px; padding: 8px 12px; }
    .topnav-brand span { display: none; } /* 모바일에선 로고 아이콘만 노출 */
}