/* style.css */

:root {
    --primary: #2563eb;
    --primary-dark: #1e40af;
    --secondary: #10b981;
    --accent: #f97316;
    --dark: #1e293b;       /* 기본 텍스트/배경 (라이트 모드) */
    --light: #f8fafc;      /* 기본 배경/텍스트 (라이트 모드) */
    --gray: #64748b;
    --gray-light: #e2e8f0;
    --warning: #fbbf24;
    
    /* 배경/텍스트 색상 변수화 */
    --bg-color: var(--light);
    --text-color: var(--dark);
    --text-muted-color: var(--gray);
    --card-bg: white;
    --header-bg: linear-gradient(135deg, var(--primary), var(--primary-dark));
    --header-text: white;
    --button-bg: var(--accent);
    --button-text: white;
    --footer-bg: var(--dark);
    --footer-text: #cbd5e1;
    --footer-heading: white;
    --border-color: var(--gray-light);
}

body.dark-mode {
    --primary: #3b82f6;    /* 다크 모드에서 약간 밝게 */
    --primary-dark: #60a5fa;
    --secondary: #10b981;
    --accent: #fb923c;     /* 다크 모드에서 약간 밝게 */
    --dark: #f8fafc;       /* 다크 모드 텍스트 */
    --light: #1e293b;      /* 다크 모드 배경 */
    --gray: #94a3b8;
    --gray-light: #334155; /* 다크 모드 보더/카드 배경 */
    --warning: #fcd34d;

    /* 배경/텍스트 색상 변수화 (다크 모드) */
    --bg-color: var(--light);
    --text-color: var(--dark);
    --text-muted-color: var(--gray);
    --card-bg: var(--gray-light);
    --header-bg: #1e293b; /* 다크 모드 헤더 배경 */
    --header-text: var(--dark);
    --button-bg: var(--accent);
    --button-text: #1e293b;
    --footer-bg: #0f172a; /* 더 어두운 푸터 */
    --footer-text: var(--gray);
    --footer-heading: var(--dark);
    --border-color: #475569;
}

/* Utility Color Classes */
.text-success {
    color: #198754; /* 기본 초록색 (라이트 모드 기준) */
}

.text-danger {
    color: #dc3545; /* 기본 빨간색 (라이트 모드 기준) */
}

.text-warning {
    color: #ffc107; /* 기본 노란색/주황색 (라이트 모드 기준) */
}

.text-muted {
    color: #6c757d; /* 기본 회색 (라이트 모드 기준) */
}

body.dark-mode .text-success {
    color: #28a745; /* 다크 모드용 초록색 (약간 더 밝게) */
}

body.dark-mode .text-danger {
    color: #e34d59; /* 다크 모드용 빨간색 (약간 더 밝게) */
}

body.dark-mode .text-warning {
    color: #ffca2c; /* 다크 모드용 노란색/주황색 (약간 더 밝게) */
}

body.dark-mode .text-muted {
    color: #adb5bd; /* 다크 모드용 회색 (약간 더 밝게) */
}
/* End Utility Color Classes */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header Styles */
#header-placeholder {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* background: linear-gradient(135deg, #fcd34d, #fbbf24); */
    /* background: linear-gradient(135deg, var(--primary), var(--primary-dark)); */ /* Apply background here if needed */
}

header {
    /* background: linear-gradient(135deg, #fcd34d, #fbbf24); */
    background: var(--header-bg);
    /* color: var(--dark); */
    color: var(--header-text);
    padding: 1.5rem 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    /* position: sticky; */
    /* top: 0; */
    /* z-index: 1000; */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 1rem;
}

.logo a { /* 로고 링크 스타일 */
    /* color: var(--dark); */
    color: var(--header-text);
    text-decoration: none;
    display: flex;
    align-items: center;
}

.logo i {
    margin-right: 0.5rem;
    font-size: 1.8rem;
}

.logo img { /* 아이콘 대신 이미지 선택자 */
    width: 36px; /* 이미지 너비 조정 */
    height: 36px; /* 이미지 높이 조정 */
    margin-right: 0.5rem;
    /* font-size: 1.8rem; 제거 또는 주석 처리 */
}

.nav-container {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    margin-left: 1rem;
    list-style: none;
    align-items: center;
}

.nav-links a {
    /* color: var(--dark); */
    color: var(--header-text);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}

.nav-links a:hover {
    /* background-color: rgba(0, 0, 0, 0.05); */
    background-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .nav-links a:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* 언어 선택기 스타일 */
.language-selector {
    position: relative;
    display: inline-block;
}

.language-selector .dropdown-toggle {
    color: var(--header-text);
    padding: 8px;
    gap: 5px;
    font-size: 0.9rem;
}

.language-selector .dropdown-toggle i {
    transition: transform 0.3s;
}

.language-selector:hover .dropdown-toggle i {
    transform: rotate(180deg);
}

.language-selector .dropdown-menu {
    top: 100%;
    right: 0;
    min-width: 140px;
    margin-top: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    /* 기본 드롭다운 배경색 사용 */
    background-color: var(--card-bg);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 0; /* 내부 패딩 제거 */
    overflow: hidden; /* 내부 요소 넘침 숨기기 */
}

.language-selector:hover .dropdown-menu {
    opacity: 1;
    visibility: visible; 
    transform: translateY(0);
}

.language-selector .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem; /* 패딩 조정 */
    font-size: 0.9rem; /* 폰트 크기 통일 */
    font-weight: 500; /* 폰트 굵기 통일 */
}

/* 첫 번째 항목 위쪽 모서리 둥글게 */
.language-selector .dropdown-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* 마지막 항목 아래쪽 모서리 둥글게 */
.language-selector .dropdown-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.language-selector .dropdown-item:hover {
    background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
    color: var(--primary) !important;
}

/* 체크 아이콘 스타일 추가 */
.language-selector .language-check {
    color: var(--primary);
    display: inline-block;
    visibility: hidden;
    margin-left: 0.5rem;
    font-size: 1.25rem;
}

/* 다크모드 스타일 */
body.dark-mode .language-selector .dropdown-menu {
    /* 기본 다크모드 드롭다운 배경색 사용 */
    background-color: #2d3748;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

body.dark-mode .language-selector .dropdown-item {
    color: #f8f9fa;
}

body.dark-mode .language-selector .dropdown-item:hover {
    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
    color: var(--primary) !important;
}

/* 모바일 스타일 */
@media (max-width: 768px) {
    .language-selector {
        width: 100%;
        text-align: center;
}

    .language-selector .dropdown-toggle {
        width: 100%;
        justify-content: center;
    }
    
    .language-selector .dropdown-menu {
        position: static;
        width: 100%;
        margin-top: 0;
        box-shadow: none;
        background-color: transparent;
        max-height: 0;
        overflow: hidden;
}

    .language-selector:hover .dropdown-menu {
        max-height: 200px;
    }
    
    .language-selector .dropdown-item {
        color: var(--header-text) !important;
        justify-content: center;
    }
    
    .language-selector .dropdown-item:hover {
        background-color: rgba(255,255,255,0.1);
    }
}

/* 테마 토글과 언어 선택기를 묶은 컨테이너 */
.header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* 로그인 버튼 스타일 */
.login-button-container {
    margin-left: 1rem;
}

.login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
}

.login-button:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
}

.login-button i {
    font-size: 1.1rem;
}

/* 다크 모드에서의 로그인 버튼 스타일 */
body.dark-mode .login-button {
    background-color: #2d2d2d;
    color: #ffffff;
    border: 1px solid #3d3d3d;
}

body.dark-mode .login-button:hover {
    background-color: #3d3d3d;
    transform: translateY(-1px);
}

/* 모바일 화면에서의 로그인 버튼 스타일 */
@media (max-width: 768px) {
    .login-button-container {
        margin: 1rem 0;
        width: 100%;
    }

    .login-button {
        width: 100%;
        justify-content: center;
    }
}

/* 다크 모드 토글 아이콘 버튼 스타일 */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-right: 0; /* 기존 마진 제거, 이제 gap으로 간격 조절 */
}

.theme-toggle-button {
    background: none;
    border: none;
    color: var(--header-text);
    font-size: 1.2rem; 
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.theme-toggle-button:hover {
    opacity: 0.8;
}

.theme-toggle-button .icon.moon {
    display: none;
}

body.dark-mode .theme-toggle-button .icon.sun {
    display: none;
}

body.dark-mode .theme-toggle-button .icon.moon {
    display: inline-block;
}

/* Hero Section */
.hero {
    /* background: linear-gradient(135deg, var(--primary-dark), var(--primary)); */
    /* 라이트 모드에서 더 어두운 파란색 계열 사용 */
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
    color: white;
    padding: 5rem 2rem;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* 다크 모드에서는 기존 변수 유지 또는 다른 색상 지정 */
body.dark-mode .hero {
    background: linear-gradient(135deg, #374151, #1f2937); /* 다크 모드에 맞는 어두운 회색 계열 */
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-button {
    display: inline-block;
    background-color: var(--button-bg);
    color: var(--button-text);
    padding: 0.875rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none; /* 기본 버튼 테두리 제거 */
    cursor: pointer; /* 버튼 커서 */
}

.cta-button:hover {
    filter: brightness(90%);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Main Content */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem; /* 모든 방향 1.5rem 패딩 (데스크톱 기본) */
}

.section {
    margin-bottom: 3rem;
    scroll-margin-top: 8.25rem;
}

.section-header {
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.75rem;
}

.section-header h2 {
    font-size: 1.75rem;
    color: var(--primary-dark);
}
body.dark-mode .section-header h2 {
    color: var(--primary);
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: var(--primary);
    border-radius: 2px;
}

/* Cards Layout */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem; /* 카드 위쪽 간격 추가 */
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex; /* 내부 요소 정렬 위해 추가 */
    flex-direction: column; /* 세로 방향 정렬 */
}
body.dark-mode .card {
    box-shadow: none;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.card-img {
    height: 120px; /* 아이콘 영역 크기 조정 */
    background-color: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
body.dark-mode .card-img {
    background-color: #475569;
}

.card-img i {
    font-size: 3rem;
    color: var(--primary);
}

.card-content {
    padding: 1.5rem;
    flex-grow: 1; /* 카드의 남은 공간 채우도록 */
}

.card h3 {
    margin-bottom: 0.75rem;
    color: var(--primary-dark);
    font-size: 1.2rem;
}
body.dark-mode .card h3 {
    color: var(--primary);
}

/* Steps Section */
.step {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
body.dark-mode .step {
    box-shadow: none;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* 크기 고정 */
    width: 50px;
    height: 50px;
    background-color: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: bold;
}

.step-content {
    flex-grow: 1;
}

.step-content h3 {
    margin-bottom: 0.75rem;
    color: var(--primary-dark);
    font-size: 1.3rem;
}
body.dark-mode .step-content h3 {
    color: var(--primary);
}

.step-list {
    margin-top: 1rem;
    padding-left: 1.5rem; /* 들여쓰기 */
    list-style-position: outside; /* 번호/불릿 위치 */
}

.step-list li {
    margin-bottom: 0.75rem;
}

.step-list strong { /* 강조 텍스트 가독성 향상 */
    color: var(--primary-dark);
    font-weight: 600;
}
body.dark-mode .step-list strong {
    color: var(--primary);
}

/* Alert/Notice Box */
.alert {
    background-color: #fffbeb;
    border-left: 4px solid var(--warning);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 4px;
    color: #78350f; /* 텍스트 색상 명확히 */
}
body.dark-mode .alert {
    background-color: #422006; /* 어두운 경고 배경 */
    border-left-color: var(--warning);
    color: #fef3c7; /* 밝은 경고 텍스트 */
}
/* 안내 타입 alert 스타일 추가 */
.alert.info {
    background-color: #eff6ff;
    border-left-color: var(--primary);
    color: var(--primary-dark);
}
body.dark-mode .alert.info {
    background-color: #1e3a8a; /* 어두운 정보 배경 */
    border-left-color: var(--primary);
    color: #dbeafe; /* 밝은 정보 텍스트 */
}

.alert.info .alert-title {
    color: var(--primary-dark);
}
body.dark-mode .alert.info .alert-title {
    color: #93c5fd; /* 다크모드 정보 제목 */
}

.alert-title {
    display: flex;
    align-items: center;
    color: #92400e;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
body.dark-mode .alert-title {
    color: #fcd34d; /* 다크모드 경고 제목 */
}

.alert-title i {
    margin-right: 0.5rem;
    font-size: 1.1rem; /* 아이콘 크기 조정 */
}

/* Footer */
footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 3rem 2rem;
    margin-top: 3rem; /* 푸터 위쪽 간격 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.footer-section h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
    color: var(--footer-heading);
}

.footer-section h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--accent);
}

.footer-section ul {
    list-style: none;
    padding: 0; /* 기본 패딩 제거 */
}

.footer-section ul li {
    margin-bottom: 0.75rem; /* 간격 조정 */
}

.footer-section a {
    color: var(--footer-text);
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-flex; /* 아이콘과 텍스트 정렬 */
    align-items: center;
}
.footer-section a i {
    margin-right: 0.5rem; /* 아이콘 오른쪽 간격 */
}

.footer-section a:hover {
    color: white;
    text-decoration: underline;
}
body.dark-mode .footer-section a:hover {
    color: var(--primary-dark);
}

.footer-bottom {
    text-align: center;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: #94a3b8;
}
body.dark-mode .footer-bottom {
    color: var(--gray);
    border-top-color: var(--border-color);
}

/* --- 스크롤 애니메이션 효과 --- */
.fade-in {
    opacity: 0; /* 기본적으로 투명하게 */
    transform: translateY(20px); /* 약간 아래에서 시작 */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* 부드러운 전환 효과 */
}

.fade-in.visible {
    opacity: 1; /* 보이게 */
    transform: translateY(0); /* 제자리로 이동 */
}

/* --- 활성 링크 스타일 --- */
.nav-links a.active {
    /* background-color: rgba(255, 255, 255, 0.2); */ /* JS가 관리하므로 제거 가능 */
    font-weight: bold; /* 활성 링크를 조금 더 강조 */
    /* border-bottom: 2px solid var(--accent); 밑줄 스타일 */
    color: var(--accent); /* 활성 링크 색상 변경 */
}

/* 드롭다운 메뉴에서 활성화된 항목 스타일 */
.nav-dropdown-menu a.active {
    color: var(--accent) !important; /* 항상 주황색으로 표시 */
}
body.dark-mode .nav-dropdown-menu a.active {
    color: var(--accent) !important;
}

@media (max-width: 768px) {
    .nav-dropdown-menu a.active {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* 모바일 반응형 스타일 */
@media (max-width: 768px) {
    header {
        padding: 1rem 0;
        position: static; /* 작은 화면에서는 고정 해제 */
    }
    
    .navbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 1rem;
        position: relative;
    }
    
    .logo {
        margin-bottom: 0;
    }
    
    .navbar-left, .navbar-right {
        display: none; /* 모바일에서는 숨김 */
    }
    
    .mobile-menu-toggle {
        display: block !important; /* 모바일에서 반드시 표시되도록 !important 추가 */
        position: absolute; /* 절대 위치로 설정 */
        right: 1rem; /* 오른쪽 여백 */
        top: 50%; /* 세로 중앙 */
        transform: translateY(-50%); /* 정확한 중앙 정렬 */
        z-index: 1001; /* 다른 요소보다 위에 표시 */
    }
    
    .nav-container {
        display: none !important; /* 기본적으로 숨김 */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background-color: var(--primary-dark); /* 라이트 모드에서 기본 배경색 */
        color: white;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }
    
    /* 다크모드에서 모바일 메뉴 배경색 설정 */
    body.dark-mode .nav-container {
        background-color: #0f172a; /* 다크 모드에서는 어두운 배경색 사용 */
        color: #f8fafc; /* 다크 모드에서는 밝은 텍스트 색상 */
    }
    
    .nav-container.show {
        display: flex !important; /* .show 클래스가 있을 때만 표시 */
    }
    
    .nav-links {
        flex-direction: column;
        width: 100%;
        margin: 0 0 1rem 0;
        padding: 0;
        text-align: center;
        gap: 0; /* 갭 제거하고 개별 아이템 마진으로 통일 */
    }
    
    .nav-links li {
        width: 100%;
        margin: 0.5rem 0; /* 모든 항목에 동일한 상하 마진 적용 */
    }
    
    .nav-links a, 
    .nav-dropdown-toggle {
        display: block;
        padding: 0.75rem; /* 모든 링크에 동일한 패딩 적용 */
        width: 100%;
        color: white !important; /* 라이트 모드에서 흰색 텍스트 */
    }
    
    /* 모바일 화면에서의 활성 링크 스타일 */
    .nav-links a.active {
        font-weight: bold; /* PC 화면과 동일하게 굵게 표시 */
        color: var(--accent) !important; /* PC 화면과 동일한 강조 색상 사용 */
        background-color: rgba(255, 255, 255, 0.1); /* 약간의 배경색 추가 */
    }
    
    body.dark-mode .nav-links a,
    body.dark-mode .nav-dropdown-toggle {
        color: #f8fafc !important; /* 다크 모드에서 밝은 텍스트 */
    }
    
    body.dark-mode .nav-links a.active {
        color: var(--accent) !important; /* 다크 모드에서도 PC 화면과 동일한 강조 색상 */
        background-color: rgba(255, 255, 255, 0.05); /* 다크 모드에서는 좀 더 어두운 배경색 */
    }
    
    /* 헤더 컨트롤(테마 토글, 언어 선택기) 간격 통일 */
    .header-controls {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 0.5rem; /* 상단 여백 추가 */
        gap: 0.75rem; /* 일정한 간격 */
    }
    
    .theme-switch-wrapper {
        margin: 0; /* 기존 마진 제거 */
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .language-selector {
        width: 100%;
        justify-content: center;
        margin: 0; /* 기존 마진 제거 */
    }
    
    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .container {
        padding: 1.5rem 1rem; /* 모바일에서 상하 1.5rem, 좌우 1rem 패딩 적용 */
    }

    .section {
        /* padding-top: 2rem; */ /* 전역 .section > *:first-child 규칙으로 대체하므로 제거 */
        margin-top: 0; /* 마진 제거 */
    }

    .step {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .step-number {
        margin: 0 auto 1rem auto; /* 위쪽은 0, 아래쪽 간격, 좌우 자동 */
    }

    .cards {
        grid-template-columns: 1fr; /* 작은 화면에서는 1열로 */
    }
    
    /* 다운로드 옵션 반응형 개선 */
    .download-options {
        flex-direction: column; /* 세로 배치로 변경 */
        align-items: center;
    }
    
    .download-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-bottom: 1.5rem;
    }
    
    .download-info .os-description {
        min-height: auto; /* 고정 높이 제거하여 컨텐츠에 맞게 조정 */
    }
    
    .download-button {
        width: 100%; /* 버튼 너비 조정 */
        max-width: 300px; /* 최대 너비 제한 */
    }

    footer {
        padding: 2rem 1rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr; /* 푸터 섹션도 1열로 */
        text-align: center; /* 가운데 정렬 */
        gap: 2rem; /* 섹션 간 간격 증가 */
    }
    
    .footer-section h3::after {
        left: 50%; /* 밑줄 가운데 정렬 */
        transform: translateX(-50%);
    }
    
    .footer-section ul {
        padding: 0; /* 기본 패딩 제거 */
    }
    
    .footer-section a {
        justify-content: center; /* 링크 내용 가운데 정렬 */
    }
    
    /* 시스템 요구사항 및 설치 가이드 */
    .system-requirements,
    .installation-guide {
        padding: 1.5rem 1rem; /* 패딩 감소 */
    }
}

/* 태블릿 크기 화면을 위한 추가 미디어 쿼리 */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding: 1.5rem; /* 상하 패딩 0으로 수정, 기존 padding: 1.5rem; */
    }
    
    /* 다운로드 카드 조정 */
    .download-options {
        flex-wrap: wrap; /* 필요시 줄바꿈 */
        justify-content: center;
    }
    
    .download-card {
        flex: 0 0 calc(50% - 1rem); /* 2개씩 표시 */
        margin-bottom: 1.5rem;
    }
    
    /* 푸터 조정 */
    .footer-content {
        grid-template-columns: repeat(2, 1fr); /* 2열 레이아웃 */
        gap: 2rem;
    }
}

/* 모바일 가로 및 작은 태블릿 */
@media (min-width: 481px) and (max-width: 767px) {
    .navbar {
        padding: 0 1rem; /* 기존 padding: 1rem; 에서 상하 패딩 제거 */
    }
    
    .download-options {
        flex-direction: column;
    }
    
    .download-card {
        width: 100%;
        max-width: 450px;
        margin: 0 auto 1.5rem auto;
    }
}

/* 모바일 세로 화면 */
@media (max-width: 480px) {
    .hero {
        padding: 3rem 1rem;
    }
    
    .hero h1 {
        font-size: 1.75rem;
    }
    
    .hero p {
        font-size: 0.9rem;
    }
    
    .cta-button {
        width: 100%;
        max-width: 250px;
        font-size: 0.95rem;
    }
    
    .download-card {
        padding: 1.5rem 1rem;
    }
    
    .download-icon {
        font-size: 3rem;
    }
    
    .download-info .os-name {
        font-size: 1.3rem;
    }
    
    .system-requirements h3,
    .installation-guide h3 {
        font-size: 1.3rem;
    }
}

/* 다운로드 페이지 스타일 */
.download-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.download-info {
    margin-bottom: 3rem;
    text-align: center;
}

.system-requirements {
    background-color: var(--background-light);
    padding: 2rem;
    border-radius: 8px;
    margin-top: 2rem;
}

.system-requirements h3 {
    color: var(--primary);
    margin-bottom: 1rem;
}

.system-requirements ul {
    list-style-type: none;
    padding: 0;
}

.system-requirements li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.system-requirements li:before {
    content: "•";
    color: var(--primary);
    position: absolute;
    left: 0;
}

.download-options {
    display: flex; /* Flexbox 사용으로 변경 */
    /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */ /* 기존 Grid 설정 주석 처리 또는 삭제 */
    gap: 2rem;
    margin-bottom: 3rem;
    /* overflow-x: auto; */ /* 내용이 넘칠 경우 가로 스크롤 (필요시 활성화) */
}

.download-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px; /* 부드러운 모서리 */
    padding: 2rem; /* 내부 여백 증가 */
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 은은한 그림자 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center; /* 컨텐츠 중앙 정렬 */
    justify-content: space-between; /* 내부 요소 간 간격 확보 */
    flex: 1; /* 모든 카드가 동일한 너비를 가지도록 설정 */
    min-width: 260px; /* 카드의 최소 너비 설정 (내용 깨짐 방지) */
}

.download-card:hover {
    transform: translateY(-5px); /* 호버 시 약간 위로 이동 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* 호버 시 그림자 강조 */
}

.download-icon {
    font-size: 3.5rem; /* 아이콘 크기는 유지 또는 약간 조정 */
    color: var(--primary); /* 아이콘 색상 유지 */
    margin-bottom: 1rem; /* 아이콘과 OS 이름 사이 간격 유지 */
    display: flex; /* 아이콘 중앙 정렬을 위해 추가 (필요시) */
    justify-content: center; /* 아이콘 중앙 정렬을 위해 추가 (필요시) */
    align-items: center; /* 아이콘 중앙 정렬을 위해 추가 (필요시) */
}

.download-info {
    margin-bottom: 1.5rem; /* 정보와 버튼 사이 간격 */
}

.download-info .os-name {
    font-size: 1.5rem; /* OS 이름 폰트 크기 */
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.download-info .os-description {
    font-size: 0.9rem;
    color: var(--text-muted-color);
    min-height: 2.7em; /* 설명 텍스트 높이 고정 (2-3줄 분량) */
}

.download-button {
    display: inline-block;
    background-color: var(--accent);
    color: var(--button-text);
    padding: 0.75rem 1.5rem; /* 상하 패딩 유지, 좌우 패딩은 필요시 조정 */
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

.download-button:hover {
    background-color: var(--accent-dark, #c2410c); /* 다크 모드 호버 색상 추가 필요 */
    transform: scale(1.03);
}

body.dark-mode .download-button {
    color: var(--dark); /* 다크모드 버튼 텍스트 색상 명시 */
}

body.dark-mode .download-button:hover {
    background-color: var(--accent-light, #fbbf24); /* 다크모드 호버시 밝은 색상 */
}

/* 시스템 요구사항 및 설치 가이드 */
.system-requirements,
.installation-guide {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.system-requirements h3,
.installation-guide h3 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-light, #e0e7ff); /* primary 색상의 밝은 버전 */
}

body.dark-mode .system-requirements h3,
body.dark-mode .installation-guide h3 {
    color: var(--primary-dark); /* 다크모드에서는 primary-dark 사용 */
    border-bottom: 2px solid var(--gray-light); /* 다크모드 보더 */
}

.system-requirements p,
.installation-guide li {
    margin-bottom: 0.75rem;
    color: var(--text-muted-color);
    line-height: 1.7;
}

.installation-guide ol {
    padding-left: 1.5rem;
}

/* 햄버거 메뉴 버튼 스타일 */
.mobile-menu-toggle {
    display: none; /* 기본적으로 숨김 (모바일에서만 보임) */
    background: none;
    border: none;
    color: var(--header-text);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: all 0.3s ease;
    z-index: 1001; /* 항상 위에 표시 */
}

.mobile-menu-toggle:hover {
    opacity: 0.8;
}

/* 햄버거 버튼 활성화 상태 */
.mobile-menu-toggle.active {
    color: var(--secondary); /* 활성화된 상태에서는 강조 색상 사용 */
}

/* 활성화된 버튼의 아이콘 애니메이션 */
.mobile-menu-toggle.active i.bi-x-lg {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.mobile-menu-toggle i {
    transition: transform 0.3s ease;
}

/* 다크 모드에서의 활성화된 햄버거 버튼 색상 */
body.dark-mode .mobile-menu-toggle.active {
    color: var(--secondary); /* 다크 모드에서도 동일한 강조 색상 */
}

/* 네비게이션 컨테이너 수정 */
.nav-container {
    display: flex;
    align-items: center;
    width: 100%; /* 전체 너비 사용 */
    justify-content: space-between; /* 좌우 요소 분리 */
}

/* 언어 드롭다운 스타일 */
.dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.dropdown-menu {
    position: absolute;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    padding: 0.5rem 0;
}

.dropdown-item {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

body.dark-mode .dropdown-menu {
    background-color: #2d3748;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

body.dark-mode .dropdown-item {
    color: #f8f9fa;
}

body.dark-mode .dropdown-item:hover {
    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
    color: var(--primary) !important;
}

/* Q&A 페이지 스타일 */
.qna-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.qna-category {
    background-color: var(--background-light);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.qna-category h3 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    border-bottom: 2px solid var(--accent-light);
    padding-bottom: 0.5rem;
}

.qna-item {
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--card-bg);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
}

.qna-question {
    display: flex;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    position: relative;
}

.qna-question i.bi-question-circle {
    color: var(--primary);
    font-size: 1.2rem;
    margin-right: 1rem;
}

.qna-question h4 {
    flex-grow: 1;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-dark);
}

.qna-toggle {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.qna-toggle:hover {
    color: var(--primary);
}

.qna-answer {
    background-color: var(--card-bg);
    padding: 0 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.qna-answer p {
    margin-top: 0;
    padding: 0.5rem 0;
    color: var(--text);
}

.qna-answer ul, .qna-answer ol {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.qna-answer li {
    margin-bottom: 0.5rem;
    color: var(--text);
}

.contact-section {
    margin-top: 3rem;
    text-align: center;
    padding: 2rem;
    background-color: var(--background-light);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.contact-section h3 {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.contact-options {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.contact-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text);
    padding: 1rem;
    min-width: 180px;
    border-radius: 8px;
    background-color: var(--card-bg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-option:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: var(--primary);
}

.contact-option i {
    font-size: 2rem;
    margin-bottom: 0.8rem;
    color: var(--primary);
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .contact-options {
        flex-direction: column;
        align-items: center;
    }
    
    .contact-option {
        width: 100%;
        max-width: 300px;
    }
}

/* 다크 모드 스타일 */
[data-theme="dark"] .qna-category {
    background-color: var(--card-bg-dark);
}

[data-theme="dark"] .qna-item {
    background-color: var(--background-dark);
}

[data-theme="dark"] .qna-answer {
    background-color: var(--background-dark);
}

[data-theme="dark"] .contact-section {
    background-color: var(--card-bg-dark);
}

[data-theme="dark"] .contact-option {
    background-color: var(--background-dark);
}

/* ============= 문의 양식 페이지 스타일 ============= */
.contact-form-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.contact-info {
    flex: 1;
    min-width: 300px;
    background-color: var(--background-secondary);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.contact-form-container {
    flex: 2;
    min-width: 350px;
    background-color: var(--background-secondary);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.contact-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.contact-icon i {
    color: white;
    font-size: 24px;
}

.contact-text h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: var(--text-primary);
}

.contact-text p {
    margin: 0;
    color: var(--text-secondary);
}

.form-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.form-header i {
    font-size: 24px;
    color: var(--primary);
    margin-right: 10px;
}

.form-header h3 {
    margin: 0;
    font-size: 20px;
    color: var(--text-primary);
}

.input-with-icon {
    position: relative;
    margin-top: 5px;
}

.input-with-icon i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 18px;
    transition: all 0.3s ease;
}

.textarea-container i {
    top: 20px;
    transform: none;
}

.input-with-icon input,
.input-with-icon textarea {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-primary);
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 15px;
    resize: none; /* 사용자가 크기를 조정할 수 없도록 변경 */
}

.input-with-icon.focused i {
    color: var(--primary);
}

.input-with-icon.focused input,
.input-with-icon.focused textarea {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), 0.15);
    background-color: var(--background-primary);
    outline: none;
}

.form-footer {
    margin-top: 25px;
    display: flex;
    justify-content: flex-end;
}

.form-footer .button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
}

.form-footer .button i {
    font-size: 16px;
}

/* FAQ 바로가기 카드 스타일 */
.faq-shortcut-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.faq-card {
    flex: 1;
    min-width: 250px;
    background-color: var(--background-secondary);
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    transform: translateY(0);
}

.faq-card:hover,
.faq-card.hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.faq-card i {
    font-size: 36px;
    color: var(--primary);
    margin-bottom: 15px;
    display: block;
}

.faq-card h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: var(--text-primary);
}

.faq-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* 다크 모드 대응 */
body.dark-mode .contact-info,
body.dark-mode .contact-form-container,
body.dark-mode .faq-card {
    background-color: var(--background-secondary-dark);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .input-with-icon input,
body.dark-mode .input-with-icon textarea {
    background-color: var(--background-primary-dark);
    color: var(--text-primary-dark);
    border-color: var(--border-color-dark);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-mode .form-header {
    border-color: var(--border-color-dark);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .contact-form-wrapper {
        flex-direction: column;
    }
    
    .contact-info,
    .contact-form-container {
        min-width: 100%;
    }
    
    .faq-shortcut-container {
        flex-direction: column;
    }
    
    .faq-card {
        min-width: 100%;
    }
}

/* 응답 시간 정보 스타일 */
.centered-form {
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--background-secondary);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.response-time-info {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding: 12px 15px;
    background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
    border-left: 3px solid var(--primary);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 14px;
}

.response-time-info i {
    color: var(--primary);
    font-size: 18px;
    margin-right: 10px;
}

body.dark-mode .response-time-info {
    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.15);
    color: var(--text-primary-dark);
}

@media (max-width: 768px) {
    .centered-form {
        padding: 20px;
    }
}

/* 입력 필드 및 텍스트 영역 스타일 개선 */
.input-with-icon input,
.input-with-icon textarea {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-primary);
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 15px;
    resize: none; /* 사용자가 크기를 조정할 수 없도록 변경 */
}

/* 호버 효과 */
.input-with-icon input:hover,
.input-with-icon textarea:hover {
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.5);
    background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.02);
}

/* 포커스 효과 */
.input-with-icon.focused input,
.input-with-icon.focused textarea {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), 0.15);
    background-color: var(--background-primary);
    outline: none;
}

/* 특별히 textarea를 위한 추가 스타일 */
.textarea-container {
    margin-bottom: 5px;
}

.textarea-container textarea {
    min-height: 150px;
    line-height: 1.6;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    padding-top: 15px;
    padding-bottom: 15px;
}

/* 다크 모드 대응 */
body.dark-mode .input-with-icon input,
body.dark-mode .input-with-icon textarea {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--text-primary-dark);
    border-color: var(--border-color-dark);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-mode .input-with-icon input:hover,
body.dark-mode .input-with-icon textarea:hover {
    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
    border-color: rgba(var(--primary-rgb, 59, 130, 246), 0.4);
}

body.dark-mode .input-with-icon.focused input,
body.dark-mode .input-with-icon.focused textarea {
    border-color: var(--primary);
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.25);
}

/* textarea 글자 수 카운터 스타일 */
.text-counter {
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* 헤더 네비게이션 드롭다운 메뉴 스타일 */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--header-text); /* 명시적으로 헤더 텍스트 색상 지정 */
}

.nav-dropdown-toggle::after {
    content: "\F282";
    font-family: bootstrap-icons;
    font-size: 0.8em;
    margin-left: 0.4rem;
    transition: transform 0.3s ease;
}

.nav-dropdown:hover .nav-dropdown-toggle::after {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background-color: var(--card-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 0; /* 내부 패딩 제거 */
    list-style: none;
    margin: 0;
    overflow: hidden; /* 내부 요소 넘침 숨기기 */
}

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

.nav-dropdown-menu li {
    margin: 0;
    padding: 0;
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.75rem 1rem; /* 패딩 조정 */
    color: var(--text-color) !important; /* 드롭다운 메뉴 항목의 텍스트 색상을 강제로 설정 */
    text-decoration: none;
    transition: background-color 0.2s;
    white-space: nowrap;
    font-size: 0.9rem; /* 폰트 크기 통일 */
    font-weight: 500; /* 폰트 굵기 통일 */
}

/* 첫 번째 항목 위쪽 모서리 둥글게 */
.nav-dropdown-menu li:first-child a {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* 마지막 항목 아래쪽 모서리 둥글게 */
.nav-dropdown-menu li:last-child a {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.nav-dropdown-menu a:hover {
    background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
    color: var(--primary) !important;
}

/* 드롭다운 메뉴에서 활성화된 항목 스타일 */
.nav-dropdown-menu a.active {
    /* font-weight: bold; */ /* 폰트 굵기 제거 */
    color: var(--accent) !important; /* 항상 주황색으로 표시 */
    /* 활성화 시 배경색은 호버와 동일하게 또는 다르게 지정 가능 */
    /* background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.05); */ 
}

/* 다크 모드 스타일 */
body.dark-mode .nav-dropdown-menu {
    background-color: var(--background-secondary-dark, #1f2937);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .nav-dropdown-menu a {
    color: var(--text-primary-dark) !important;
}

body.dark-mode .nav-dropdown-menu a:hover {
    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
    color: var(--primary) !important;
}

body.dark-mode .nav-dropdown-menu a.active {
    color: var(--accent) !important;
    /* background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.1); */
}

/* 모바일 반응형 스타일 */
@media (max-width: 768px) {
    .nav-dropdown {
        width: 100%;
    }
    
    .nav-dropdown-toggle {
        justify-content: center;
    }
    
    .nav-dropdown-menu {
        position: static;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        width: 100%;
        padding: 0;
    }
    
    .nav-dropdown.open .nav-dropdown-menu {
        max-height: 500px;
        padding: 0.5rem 0;
    }
    
    .nav-dropdown-menu li {
        text-align: center;
    }
    
    .nav-dropdown-menu a {
        padding: 0.75rem 0;
        color: var(--header-text) !important;
    }
    
    .nav-dropdown-menu a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    body.dark-mode .nav-dropdown-menu {
        background-color: transparent;
    }
    
    .nav-dropdown-toggle::after {
        margin-left: 0.5rem;
    }
    
    .nav-dropdown.open .nav-dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

/* 화면 너비 769px ~ 828px 헤더 네비게이션 깨짐 방지 */
@media (min-width: 769px) and (max-width: 828px) {
    .nav-links {
        gap: 1.25rem; /* 기존 2.5rem에서 축소 */
        margin-left: 0.5rem; /* 기존 1rem에서 축소 */
    }

    .nav-links a,
    .nav-dropdown-toggle {
        padding: 0.5rem 0.5rem; /* 기존 0.5rem 0.75rem에서 좌우 패딩 축소 */
        /* font-size: 0.875rem; */ /* 폰트 크기 조정 제거 */
    }

    .header-controls {
        gap: 0.5rem; /* 헤더 컨트롤 간 간격 축소, 기존 2rem */
    }
}

/* ============= 게시판 목록 스타일 ============= */
/* 게시판 제목이 헤더에 가려지지 않도록 section-header에 추가 패딩 -- 이 규칙은 일반 .section > *:first-child 규칙으로 대체되었으므로 제거합니다. */
/* 
main.container.section > .section-header:first-child {
    padding-top: 2rem; 
}
*/

.board-list table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.95rem;
}

.board-list th, .board-list td {
    padding: 0.8rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.board-list th {
    background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.05);
    color: var(--primary-dark);
    font-weight: 600;
    white-space: nowrap;
    text-align: center; /* 헤더 내용 중간 정렬 추가 */
}

.board-list td:nth-child(1), /* 번호 */
.board-list td:nth-child(3), /* 작성자 */
.board-list td:nth-child(4) { /* 작성일 */
    text-align: center;
    color: var(--text-muted-color);
    white-space: nowrap;
}

.board-list td:nth-child(2) { /* 제목 */
    /* width: 60%; */ /* 제목 컬럼 너비 확보 - MCP 서버 목록에서는 제거하여 자동 조절 */
}

.board-list td a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s;
}

.board-list td a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* 다크 모드 */
body.dark-mode .board-list th {
    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.15);
    color: var(--primary);
}

body.dark-mode .board-list td a {
    color: var(--text-color);
}

body.dark-mode .board-list td a:hover {
    color: var(--primary-dark);
}

/* MCP Server Table Specific Adjustments */
#mcp-server-table td:nth-child(3) { /* 설명 컬럼 */
    text-align: left;
    white-space: normal; /* 텍스트 줄바꿈 허용 */
    color: var(--text-color); /* 기본 텍스트 색상 사용 */
}

/* Table Button Style (for .cta-button inside .board-list) */
.board-list .table-button {
    padding: 0.35rem 0.75rem; /* 패딩 축소 */
    font-size: 0.85rem;    /* 폰트 크기 축소 */
    line-height: 1.4;      /* 라인 높이 조절 */
    /* 필요시 추가 스타일 (예: margin, box-shadow 제거 등) */
}

/* 로딩 컨테이너 스타일 */
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--background);
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--background-secondary);
    border-top: 5px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.loading-container p {
    color: var(--text);
    font-size: 1.1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Pagination items - ensure horizontal display */
.pagination .page-item {
    display: inline-block; /* li 요소가 수평으로 나열되도록 강제합니다. */
    vertical-align: middle; /* 아이콘과 숫자 정렬을 위해 추가 */
}

/* Pagination Styles */
.pagination {
    display: flex; /* Ensures flexbox behavior for alignment */
    justify-content: center; /* Centers the pagination block */
    padding-left: 0; /* Removes default ul padding */
    list-style: none; /* Removes default list bullets */
    margin-top: 2rem; /* Adds some space above pagination */
    margin-bottom: 1rem; /* Adds some space below pagination */
}

.pagination .page-item {
    /* display: inline-block;  Replaced by flex alignment of parent */
    margin: 0 0.25rem; /* Adds horizontal spacing between page items (숫자 간격 조정) */
}

.pagination .page-item .page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem; /* Standard Bootstrap padding */
    line-height: 1.25;
    color: var(--primary); /* (색상 테마) 기본 링크 색상 (라이트/다크 모드 변수 활용) */
    background-color: var(--card-bg); /* (색상 테마) 기본 배경색 */
    border: 1px solid var(--border-color); /* (색상 테마) 기본 테두리색 */
    text-decoration: none; /* (숫자 밑줄 제거) */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    border-radius: 0.25rem; /* Slight rounding of corners */
}

/* Hover & Focus States */
.pagination .page-item:not(.disabled) .page-link:hover,
.pagination .page-item:not(.disabled) .page-link:focus {
    z-index: 2;
    color: var(--button-text); /* (색상 테마) 호버/포커스 시 텍스트 색상 */
    background-color: var(--primary); /* (색상 테마) 호버/포커스 시 배경색 */
    border-color: var(--primary-dark); /* (색상 테마) 호버/포커스 시 테두리색 */
}

/* Active State */
.pagination .page-item.active .page-link {
    z-index: 3;
    color: var(--button-text); /* (색상 테마) 활성 상태 텍스트 색상 */
    background-color: var(--primary); /* (색상 테마) 활성 상태 배경색 */
    border-color: var(--primary-dark); /* (색상 테마) 활성 상태 테두리색 */
}

/* Disabled State */
.pagination .page-item.disabled .page-link {
    color: var(--text-muted-color); /* (색상 테마) 비활성 상태 텍스트 색상 */
    pointer-events: none;
    background-color: var(--card-bg); /* (색상 테마) 비활성 상태 배경색 */
    border-color: var(--border-color); /* (색상 테마) 비활성 상태 테두리색 */
    opacity: 0.65; /* Slightly faded */
}

.pagination .page-item .page-link i {
    vertical-align: middle; /* 아이콘 수직 정렬 */
}

.text-center {
    text-align: center !important;
}

/* Server Detail Page Specific Styles */
.server-detail-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 각 상세 정보 카드 사이의 간격 */
}

.server-detail-container .detail-section.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px; /* contact.html 폼 컨테이너와 유사한 둥근 모서리 */
    padding: 2rem; /* 내부 패딩 증가 (contact.html의 30px과 유사하게) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* contact.html 폼 컨테이너와 유사한 그림자 */
    transition: box-shadow 0.3s ease; /* 부드러운 전환 효과 */
}

body.dark-mode .server-detail-container .detail-section.card {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); /* 다크 모드 그림자 */
}

/* 상세 정보 카드 내 제목 스타일 */
.server-detail-container .detail-section.card h3 {
    font-size: 1.4rem; /* 제목 폰트 크기 약간 증가 */
    color: var(--primary-dark);
    margin-bottom: 1.25rem; /* 제목과 내용 사이 간격 */
    padding-bottom: 0.6rem; /* 제목 아래 밑줄과의 간격 */
    border-bottom: 1px solid var(--border-color); /* 은은한 구분선 */
    font-weight: 600; /* 제목 굵기 */
}
body.dark-mode .server-detail-container .detail-section.card h3 {
    color: var(--primary);
    border-bottom-color: var(--gray-light);
}

/* 상세 정보 카드 내 일반 텍스트 및 정보 항목 스타일 */
.server-detail-container .detail-section.card p,
.server-detail-container .detail-section.card div > strong { /* div 바로 아래 strong (예: 인자, 환경변수 레이블) */
    margin-bottom: 0.8rem; /* 각 정보 항목 사이 간격 */
    line-height: 1.7;
    font-size: 0.95rem;
}

.server-detail-container .detail-section.card p strong,
.server-detail-container .detail-section.card div > strong { /* strong 태그 자체의 스타일 */
    color: var(--text-color);
    font-weight: 500; /* 레이블 굵기 조정 */
    margin-right: 0.5em;
}
body.dark-mode .server-detail-container .detail-section.card p strong,
body.dark-mode .server-detail-container .detail-section.card div > strong {
    color: var(--text-color);
}

/* 상세 정보 카드 내 아이콘 스타일 */
.server-detail-container .detail-section.card p i.bi {
    margin-right: 0.4em;
    font-size: 1.05em; /* 아이콘 크기 미세 조정 */
    vertical-align: middle; /* 아이콘과 텍스트 수직 정렬 개선 */
}

/* URL 링크 스타일 (길 경우 줄바꿈 처리) */
.server-detail-container .detail-section.card #server-url {
    word-break: break-all;
    color: var(--primary);
    text-decoration: underline;
}
body.dark-mode .server-detail-container .detail-section.card #server-url {
    color: var(--primary-dark);
}


/* 명령어(code) 스타일 */
.server-detail-container .detail-section.card code#server-command {
    display: inline-block; /* 배경색 적용 범위 */
    background-color: rgba(var(--dark-rgb, 30, 41, 59), 0.05);
    padding: 0.3em 0.6em;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.9em;
    color: var(--accent); /* 강조 색상 사용 */
    word-break: break-all;
}
body.dark-mode .server-detail-container .detail-section.card code#server-command {
    background-color: rgba(var(--light-rgb, 248, 250, 252), 0.1);
    color: var(--accent-light, #fcd34d); /* 다크모드용 강조 */
}

/* 인자(args) 및 환경변수(env) 리스트 스타일 */
.server-detail-container .detail-section.card ul {
    list-style-type: none;
    padding-left: 0; /* 기본 패딩 제거 */
    margin-top: 0.5rem; /* 제목과의 간격 */
}

.server-detail-container .detail-section.card ul li {
    background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.04); /* 매우 은은한 배경 */
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    margin-bottom: 0.4rem;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.9rem;
    color: var(--text-muted-color);
    border: 1px solid rgba(var(--primary-rgb, 37, 99, 235), 0.1);
}
.server-detail-container .detail-section.card ul li strong { /* 환경 변수 key */
    color: var(--primary-dark);
    font-weight: 500;
}

body.dark-mode .server-detail-container .detail-section.card ul li {
    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.08);
    color: var(--gray);
    border-color: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
}
body.dark-mode .server-detail-container .detail-section.card ul li strong {
    color: var(--primary);
}

/* ============= create-post.html 전용 스타일 (contact.html과 유사하게) ============= */

/* contact.html의 .centered-form 스타일이 create-post-container에도 적용되도록 함 */
/* .create-post-container .form-header 와 contact.html의 .form-header 스타일 공유 가능 */
/* create-post.html의 .form-footer 와 contact.html의 .form-footer 스타일 공유 가능 */

/* create-post.html의 입력 필드 스타일 (아이콘 없는 버전) */
.create-post-container #create-post-form .form-group input[type="text"],
.create-post-container #create-post-form .form-group textarea {
    width: 100%;
    padding: 12px; /* 아이콘이 없으므로 좌측 패딩 조정 */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-primary);
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 15px;
    resize: none; /* vertical에서 none으로 변경 */
}

.create-post-container #create-post-form .form-group input[type="text"]:hover,
.create-post-container #create-post-form .form-group textarea:hover {
    border-color: rgba(var(--primary-rgb, 37, 99, 235), 0.5);
    background-color: rgba(var(--primary-rgb, 37, 99, 235), 0.02);
}

.create-post-container #create-post-form .form-group input[type="text"]:focus,
.create-post-container #create-post-form .form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), 0.15);
    background-color: var(--background-primary);
    outline: none;
}

body.dark-mode .create-post-container #create-post-form .form-group input[type="text"],
body.dark-mode .create-post-container #create-post-form .form-group textarea {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--text-primary-dark);
    border-color: var(--border-color-dark);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-mode .create-post-container #create-post-form .form-group input[type="text"]:hover,
body.dark-mode .create-post-container #create-post-form .form-group textarea:hover {
    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
    border-color: rgba(var(--primary-rgb, 59, 130, 246), 0.4);
}

body.dark-mode .create-post-container #create-post-form .form-group input[type="text"]:focus,
body.dark-mode .create-post-container #create-post-form .form-group textarea:focus {
    border-color: var(--primary);
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.25);
}

/* create-post.html의 .form-footer 버튼 정렬 */
.create-post-container #create-post-form .form-footer {
    display: flex;
    justify-content: flex-end; /* 버튼들을 오른쪽으로 정렬 */
    gap: 1rem; /* 버튼 사이 간격 */
    margin-top: 1.5rem; /* 폼 요소들과의 간격 */
}

.create-post-container #create-post-form .form-footer .button,
.create-post-container #create-post-form .form-footer .cta-button {
    padding: 0.75rem 1.5rem; /* cta-button 기본 패딩과 유사하게 */
    font-size: 0.95rem;
}

/* 기존 .form-actions 클래스는 create-post.html에서 .form-footer로 변경되었으므로, */
/* 해당 클래스에 대한 특별한 스타일은 필요 없거나 .form-footer로 이전되어야 합니다. */
/* 예시: .create-post.html의 버튼 스타일이 cta-button 클래스로 이미 잘 정의되어 있다면 추가 스타일 불필요 */