:root {
    --primary-color: #0b1c3d;
    --accent-color: #0056b3;
    --point-color: #ff3b30;
    --bg-light: #f8f9fa;
}

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    word-break: keep-all;
}

/* ==========================================
   0. Layout Container (1400px 레이아웃 설정)
   ========================================== */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 1400px !important;
}

/* ==========================================
   1. Header & Navigation (PC 메뉴 짤림 및 반응형 수정)
   ========================================== */
.navbar {
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    padding: 12px 0;
    transition: all 0.3s ease;
}

/* 로고 이미지 크기 및 비율 설정 */
.navbar-logo {
    height: 40px; /* 네비게이션바 높이에 맞춘 적절한 높이 */
    width: auto;  /* 원본 비율 유지 */
    object-fit: contain;
}

/* 모바일 화면에서 로고 크기 살짝 조정 */
@media (max-width: 576px) {
    .navbar-logo {
        height: 32px;
    }
}

.navbar-brand {
    font-weight: 900;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    color: var(--primary-color);
    letter-spacing: -0.5px;
    white-space: nowrap;
}
.navbar-brand span { color: var(--accent-color); }

@media (min-width: 992px) {
    .navbar-nav {
        display: flex;
        align-items: center;
        gap: clamp(2px, 0.6vw, 10px);
    }
    .navbar-nav .nav-item { position: relative; }

    .navbar-nav .nav-link i {
        color: var(--accent-color);
        font-size: 0.9em;
    }
    .navbar-nav .nav-link:hover { color: var(--accent-color) !important; }

    .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.2s ease-in-out;
        border: 1px solid rgba(0, 86, 179, 0.12);
        border-top: 3px solid var(--accent-color);
        box-shadow: 0 12px 30px rgba(11, 28, 61, 0.12);
        border-radius: 0 0 10px 10px;
        padding: 8px 4px;
        min-width: 180px;
        background: #ffffff;
    }
    .dropdown-item {
        font-size: 0.85rem;
        font-weight: 500;
        padding: 8px 12px;
        color: #4a5568;
        border-radius: 6px;
    }
    .dropdown-item:hover {
        background-color: #f0f6ff;
        color: var(--accent-color);
        font-weight: 700;
    }
}

/* 1. 메뉴 아이콘 & 텍스트 수직 중앙 정렬 및 호버 스타일 */
.navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* 아이콘과 텍스트 간격 */
}
.dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 0.9rem;
}

/* 2. 모바일 햄버거 버튼 클릭 시 아웃라인/파란 테두리 제거 */
.navbar-toggler {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
}

/* 3. 우측 회원가입/로그인 아이콘+텍스트 링크 스타일 */
.nav-auth-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #4a5568;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 6px 10px;
    transition: color 0.2s ease;
}
.nav-auth-link:hover {
    color: var(--accent-color, #0056b3);
}

/* 모바일 햄버거 버튼 포커스/클릭 박스 완전 제거 */
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

/* 웹킷 기반 브라우저(사파리/크롬 모바일) 하이라이트 박스 제거 */
.navbar-toggler {
    -webkit-tap-highlight-color: transparent;
}

/* 모바일 아코디언 버튼 열림/클릭 시 연푸른색 배경 및 박스 효과 제거 */
#mobileMenuAccordion .accordion-button:not(.collapsed) {
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}

#mobileMenuAccordion .accordion-button,
#mobileMenuAccordion .accordion-button:focus,
#mobileMenuAccordion .accordion-button:active,
#mobileMenuAccordion .accordion-button:focus-visible {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.offcanvas-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.footer-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

footer {
    background: #0b1528;
    color: #8a99ad;
    padding: 50px 0 30px;
    font-size: 0.88rem;
}
footer a { color: #a0aec0; text-decoration: none; }
footer a:hover { color: #fff; }

.sound_only { display: none; }


/* ==========================================================================
   페이징 (Pagination) 스타일
   ========================================================================== */
.pg_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 50px 0 30px;
}

/* 기본 버튼 공통 (숫자 및 화살표) */
.pg_wrap .pg_page,
.pg_wrap .pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* 일반 숫자 페이지 버튼 */
.pg_wrap .pg_page {
    color: #475569;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
}

.pg_wrap .pg_page:hover {
    color: #2563eb;
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

/* 현재 활성화된 페이지 */
.pg_wrap .pg_current {
    color: #ffffff;
    background-color: #2563eb;
    border: 1px solid #2563eb;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* 이전/다음/처음/맨끝 아이콘 버튼 */
.pg_wrap .pg_start,
.pg_wrap .pg_prev,
.pg_wrap .pg_next,
.pg_wrap .pg_end {
    color: #64748b;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
}

.pg_wrap .pg_start:hover,
.pg_wrap .pg_prev:hover,
.pg_wrap .pg_next:hover,
.pg_wrap .pg_end:hover {
    color: #0f172a;
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

/* FontAwesome 아이콘 크기 조절 */
.pg_wrap .pg_page i {
    font-size: 0.9rem;
}

/* 모바일 반응형 */
@media (max-width: 640px) {
    .pg_wrap {
        gap: 4px;
        margin: 30px 0 20px;
    }

    .pg_wrap .pg_page,
    .pg_wrap .pg_current {
        min-width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }
}