/* 폼 요소 포커스 색상 통일 */
.form-select:focus {
    border-color: #0055fb;
    box-shadow: 0 0 0 0.25rem rgba(0, 85, 251, 0.25);
}

/* 로드맵 섹션 배경 및 레이아웃 */
.visa-roadmap-section { 
    background: linear-gradient(to bottom right, #f8f9fa, #f1f5f9); 
    border-radius: 1.5rem; 
    padding: 2.5rem 1rem; 
}

/* 커스텀 스크롤바 디자인 */
.roadmap-scroll-area {
    overflow-x: auto;
    padding-bottom: 1.5rem;
}
.roadmap-scroll-area::-webkit-scrollbar {
    height: 8px;
}
.roadmap-scroll-area::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 10px;
}
.roadmap-scroll-area::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}
.roadmap-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* 노드 카드 기본 스타일 */
.node-card { 
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
    min-width: 260px; 
    border: 1px solid #e2e8f0 !important; 
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

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

/* 활성화된 노드 카드 */
.node-card.active { 
    border: 2px solid #0055fb !important; 
    box-shadow: 0 0 0 4px rgba(0, 85, 251, 0.1), 0 15px 30px rgba(0, 85, 251, 0.15) !important; 
    transform: translateY(-5px); 
    background: #f8faff;
}

/* 비활성화된 노드 카드 (명확한 대비) */
.node-card.dimmed { 
    opacity: 0.4; 
    filter: grayscale(100%);
    pointer-events: none; 
    box-shadow: none;
    border-color: #cbd5e1 !important;
}

/* 연결 화살표 */
.connector { 
    font-size: 1.5rem; 
    color: #cbd5e1; 
    transition: all 0.4s ease; 
    font-weight: 900; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
}
.connector.active { 
    color: #0055fb; 
    transform: scale(1.2);
}

/* 버튼 디자인 다듬기 */
.btn-check-custom { 
    background-color: #fff1f2; 
    color: #e11d48; 
    border: 1px solid #fecdd3; 
    transition: all 0.2s;
}
.btn-check-custom:hover { 
    background-color: #e11d48; 
    color: #ffffff; 
}

.btn-consult-custom { 
    background-color: #f0f9ff; 
    color: #0284c7; 
    border: 1px solid #bae6fd; 
    transition: all 0.2s;
}
.btn-consult-custom:hover { 
    background-color: #0284c7; 
    color: #ffffff; 
}













/* =========================================
   1. 헤더 및 유틸리티 영역 스타일
   ========================================= */
.kmsia-container { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 15px; max-width: 1200px; margin: 0 auto; height: 80px;
}
.header-utils { display: flex; align-items: center; gap: 15px; }

/* 다국어 토글 버튼 */
.lang_toggle_btn {
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 20px;
    padding: 8px 16px; font-size: 14px; font-weight: 600; color: #334155;
    cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.lang_toggle_btn:hover { background: #e2e8f0; transform: translateY(-2px); }

/* 모바일 햄버거 버튼 (기본 숨김) */
.gnb_menu_btn { 
    display: none; background: transparent; border: none; 
    font-size: 26px; color: #333; cursor: pointer; padding: 5px; 
}

/* =========================================
   2. 모바일 전체 메뉴 오버레이 스타일
   ========================================= */
#gnb_all_bg, #lang_overlay_bg { 
    display: none; position: fixed; top: 0; left: 0; 
    width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9998; 
}
#gnb_all { 
    display: none; position: fixed; top: 0; right: 0; 
    width: 100%; max-width: 400px; height: 100vh; 
    background: #ffffff; z-index: 9999; overflow-y: auto; 
}
.gnb_all_inner { padding: 20px; }
.gnb_all_head { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; 
}
.gnb_all_head img { height: 30px; }
.gnb_close_btn { background: transparent; border: none; font-size: 28px; color: #333; cursor: pointer; }

/* 모바일 메뉴 리스트 */
.gnb_all_list { list-style: none; padding: 0; margin: 0; }
.gnb_all_list > li { border-bottom: 1px solid #f1f1f1; }
.gnb_all_list > li > a { 
    display: block; padding: 15px 5px; font-size: 18px; font-weight: 600; color: #333; text-decoration: none; 
}
.gnb_all_sub { list-style: none; padding: 0; margin: 0; background: #f8f9fa; display: none; }
.gnb_all_sub > li > a { 
    display: block; padding: 12px 20px; color: #555; text-decoration: none; font-size: 15px; border-bottom: 1px dashed #e9ecef;
}

/* =========================================
   3. 13개국 다국어 번역 UI 스타일
   ========================================= */
#lang_overlay {
    display: none; position: fixed; top: 50%; left: 50%; 
    transform: translate(-50%, -50%); width: 95%; max-width: 900px; 
    background: #ffffff; z-index: 9999; border-radius: 16px; 
    padding: 30px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    max-height: 90vh; overflow-y: auto;
}
.lang-overlay-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.lang-overlay-title { font-size: 24px; font-weight: 700; color: #1e293b; margin: 0; }
.lang_close_btn { background: transparent; border: none; font-size: 28px; color: #64748b; cursor: pointer; }

.lang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* 13개국 다국어 번역 UI 스타일 업데이트 */
.lang-btn {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    padding: 15px 10px; 
    border-radius: 16px; 
    background-color: #ffffff; /* 편안한 흰색 배경 */
	color: #1e293b; /* 가독성을 위해 어두운 남색/회색으로 변경 */
    border: 1px solid rgba(0,0,0,0.05); /* 은은한 테두리 추가 */
    text-decoration: none;
    cursor: pointer; 
    transition: all 0.3s ease; 
    min-height: 120px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.lang-btn .lang-ko {
    color: #475569;
}

.bg-ko { background-color: #fee2e2; } /* 연한 홍색 */
.bg-en { background-color: #ffedd5; } /* 연한 주황 */
.bg-zh { background-color: #fef08a; } /* 연한 노랑 */
.bg-vi { background-color: #dcfce7; } /* 연한 초록 */
.bg-ja { background-color: #e0e7ff; } /* 연한 남색 */
.bg-tl { background-color: #ccfbf1; } /* 연한 청록 */
.bg-km { background-color: #cffafe; } /* 연한 하늘 */
.bg-uz { background-color: #bae6fd; } /* 맑은 파랑 */
.bg-lo { background-color: #ddd6fe; } /* 연한 보라 */
.bg-ru { background-color: #e2e8f0; } /* 청회색 */
.bg-th { background-color: #f3e8ff; } /* 연한 자주 */
.bg-mn { background-color: #fae8ff; } /* 연한 핑크 */
.bg-ne { background-color: #fce7f3; } /* 벚꽃색 */

.lang-btn:hover {
    filter: brightness(0.95); /* 마우스 오버 시 살짝 톤다운 */
}

.kmsia-sub-menu {
    display: none; /* 기본적으로 서브메뉴를 숨김 처리합니다. */
    position: absolute;
    top: 100%; /* 부모 메뉴의 바로 아래에 위치시킵니다. */
    left: 0;
    background: #ffffff;
    min-width: 180px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    z-index: 1000;
}

.kmsia-sub-menu li {
    border-bottom: 1px solid #f8f9fa;
}

.kmsia-sub-menu li:last-child {
    border-bottom: none;
}

.kmsia-sub-menu li a {
    display: block;
    padding: 12px 20px;
    color: #334155;
    text-decoration: none;
    font-size: 15px;
    transition: background 0.2s;
}

.kmsia-sub-menu li a:hover {
    background: #f8faff;
    color: #0055fb; /* 시스템 포인트 컬러에 맞춤 */
}

/* 구글 번역기 숨김 처리 */
body { top: 0 !important; }
.skiptranslate { display: none !important; }


.custom_login_btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    color: #333;
    cursor: pointer;
    padding: 0 10px;
}
.custom_login_btn i {
    font-size: 20px; /* 아이콘 크기 고정 */
}
.custom_login_text {
    margin-left: 6px;
    font-size: 14px;
    font-weight: bold;
}

.logo-full-text {
    display: flex;
    flex-direction: column;
}

/* =========================================
   4. 반응형 처리 (모바일)
   ========================================= */
@media (max-width: 768px) {
    .kmsia-gnb { display: none; } /* 데스크탑 메뉴 숨김 */
    .gnb_menu_btn { display: block; } /* 햄버거 메뉴 표시 */
    .lang_toggle_btn span { display: none; } /* 모바일에서는 텍스트 숨기고 아이콘만 */
    .lang_toggle_btn::before { content: '🌐'; font-size: 20px; }
	.custom_login_text {
        display: none; /* 모바일에서는 글자만 숨김 처리 */
    }
	.logo-full-text {
        display: none !important; /* 긴 텍스트 숨김 */
    }
}