:root {
    /* 라이트 기본값 */
    --page-bg-color: #ffffff;
    --page-text-color: #1a1a1a;
    --card-bg-color: #ffffff;
    --card-border-color: rgba(0, 0, 0, .1);
    --card-text-color: #1a1a1a;
    --nav-bg-color: #ffffff;
    --nav-text-color: #1a1a1a;
    --nav-border-color: rgba(0, 0, 0, .1);
    /* 포인트 색상 변경 */
    --link-color: #3b82f6;
}

/* 다크 테마 오버라이드 */
[data-theme="dark"] {
    --page-bg-color: #0f1117;
    --page-text-color: #e5e7eb;
    --card-bg-color: #1f2937;
    --card-border-color: rgba(255, 255, 255, 0.2);
    --card-text-color: #f9fafb;
    --nav-bg-color: #1f2937;
    --nav-text-color: #f9fafb;
    --nav-border-color: rgba(255, 255, 255, .12);
    /* 다크 모드 포인트 색상 변경 */
    --link-color: #93c5fd;
}

/* 전역 적용 */
body {
    background-color: var(--page-bg-color);
    color: var(--page-text-color);
    font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: background-color .25s ease, color .25s ease;
}

a {
    color: var(--link-color);
    text-decoration: none; /* 기본 밑줄 제거 */
    transition: all 0.2s ease-in-out; /* 부드러운 전환 효과 */
}

a:hover {
    opacity: .8;
    text-decoration: none;
}

/* 버튼 공통 스타일 */
.btn {
    transition: all 0.2s ease-in-out; /* 부드러운 전환 효과 */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.btn:hover {
    transform: translateY(-2px); /* 마우스 올리면 살짝 위로 */
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
}


/* 상단 네비게이션 */
.km-navbar {
    background-color: var(--nav-bg-color);
    color: var(--nav-text-color);
    border-bottom: 1px solid var(--nav-border-color);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.km-navbar .navbar-brand,
.km-navbar .nav-link {
    color: var(--nav-text-color) !important;
}

.km-navbar .nav-link.active {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 카드 / 박스 공통 스타일 */
.km-card {
    background-color: var(--card-bg-color);
    color: var(--card-text-color);
    border: 1px solid var(--card-border-color);
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .2s ease, transform .2s ease;
}

.km-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.08), 0 2px 4px -1px rgb(0 0 0 / 0.08);
}

.km-card-header {
    border-bottom: 1px solid var(--card-border-color);
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: .95rem;
}

.km-card-body {
    padding: 1.25rem;
    font-size: .9rem;
}

/* 댓글 줄바꿈 스타일 추가 */
.comment-content {
    white-space: pre-wrap; /* 줄바꿈과 공백을 그대로 표시 */
    word-break: break-all; /* 긴 영어나 URL이 영역을 벗어나지 않도록 강제 줄바꿈 */
}

/* 테마 토글 버튼 */
.theme-toggle-btn {
    border: 1px solid var(--card-border-color);
    background-color: transparent;
    color: var(--nav-text-color);
    border-radius: .75rem;
    font-size: .9rem;
    line-height: 1;
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* 일관된 전환 효과 적용 */
}

.theme-toggle-btn:hover {
    background-color: rgba(0, 0, 0, .04);
    transform: translateY(-2px); /* 버튼 호버 효과와 통일 */
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, .08);
}

.theme-toggle-icon {
    font-size: 1rem;
}

/* 부드러운 페이드 느낌을 주는 용도 (선택) */
.fade-transition {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* 다크 테마일 때 전체 기본 글자색 */
[data-theme="dark"] {
    color: #f8f9fa !important;
}

/* 다크 테마에서도 회색으로 죽어버리는 텍스트 강제 살리기 */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-body-secondary {
    color: #adb5bd !important;
}

/* 카드/섹션처럼 bg-white 고정된 애들 */
[data-theme="dark"] .bg-white {
    background-color: #1e1e1e !important;
    color: #f8f9fa !important;
}

/* border가 너무 튀거나 완전 안보일 때 */
[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* 헤더(navbar) 영역 안에서 드롭다운이 잘리지 않도록 */
.km-header-navbar {
    overflow: visible;
}

/* 모바일에서 알림 드롭다운이 화면 왼쪽 아래로 밀리는 문제 fix */
@media (max-width: 576px) {
    #km-noti-bell-btn + .dropdown-menu {
        position: fixed;
        inset: auto 8px 70px 8px;
        max-width: calc(100vw - 16px);
        width: auto;
        transform: none !important;
        margin: 0;
        border-radius: 12px;
        z-index: 9999;
    }

    #km-noti-list {
        max-height: 60vh;
        overflow-y: auto;
    }
}