:root {
    --primary-navy: #0F172A;       /* 신뢰감 주는 핵심 딥 네이비 */
    --trust-blue: #2563EB;         /* 세련된 트러스트 블루 */
    --accent-blue: #3B82F6;        /* 인포그래픽 포인트 블루 */
    --bg-light: #F8FAFC;           /* 밝고 깨끗한 배경색 */
    --text-dark: #1E293B;          /* 본문 텍스트용 다크 그레이 */
}

/* 전체 레이아웃 안정화 (모바일 틀어짐 및 스크롤 오류 예방) */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    font-family: 'Nanum Gothic', sans-serif !important;
    color: var(--text-dark);
    background-color: var(--bg-light);
    scroll-behavior: smooth;
}

/* 자동 줄바꿈 및 가독성 확보 */
h1, h2, h3, h4, h5, h6, p, li, span {
    word-break: keep-all;
    white-space: normal;
}

.mobileBR { display: none; }

/* 1. 상단 네비게이션: 검은색 로고가 돋보이도록 깔끔한 화이트 테마 적용 */
.navbar {
    background-color: #ffffff !important;
    padding: 15px 0;
    border-bottom: 1px solid #E2E8F0;
}
.navbar-brand img {
    max-height: 25px;
    width: auto;
}
.desktop-nav .nav-link {
    font-size: 0.95rem;
    font-weight: 700;
    color: #475569 !important;
    transition: color 0.2s;
}
.desktop-nav .nav-link:hover {
    color: var(--trust-blue) !important;
}

/* 2. 모바일 전용 하단 고정 탭 바 (센스 피드백 반영) */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background-color: #ffffff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    display: none; /* 기본 숨김 */
    z-index: 1050;
    border-top: 1px solid #E2E8F0;
}
.mobile-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748B;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
}
.mobile-bottom-nav-item i {
    font-size: 1.25rem;
    margin-bottom: 2px;
}
.mobile-bottom-nav-item:active,
.mobile-bottom-nav-item:focus {
    color: var(--trust-blue);
}

/* 미디어 쿼리: 모바일 및 데스크톱 UI 분기 조율 */
@media (max-width: 991.98px) {
    .desktop-nav {
        display: none !important; /* 모바일에서 상단 메뉴 완전 숨김 (햄버거 대용) */
    }
    .mobile-bottom-nav {
        display: flex; /* 모바일에서 하단 바 활성화 */
    }
    body {
        padding-bottom: 65px; /* 하단 탭 바가 콘텐츠 가리지 않도록 바닥 여백 추가 */
    }
}

/* 메인 캐러셀 슬라이드 컴포넌트 */
.carousel-item {
    height: 600px;
    background-size: cover;
    background-position: center;
    position: relative;
}
/* 어두운 그라데이션 오버레이로 고해상도 이미지 위 텍스트 시인성 확보 */
.carousel-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.9) 100%);
}
.carousel-caption {
    bottom: 25%;
    text-align: left;
    z-index: 2;
    padding-left: 15px;
    padding-right: 15px;
}
@media (max-width: 767.98px) {
    .carousel-item { height: 480px; }
    .carousel-caption { bottom: 15%; }
    .carousel-caption h1 { font-size: 1.8rem !important; }
    .carousel-caption p { font-size: 0.95rem !important; }
}

/* 섹션 레이아웃 타이틀 */
.section-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 15px;
}
@media (max-width: 767.98px) {
    .section-title { font-size: 1.75rem; }
}

/* 페인포인트 고충 박스 */
.pain-point-card {
    background-color: #ffffff;
    border: none;
    border-radius: 12px;
    border-top: 5px solid #EF4444;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    transition: transform 0.3s;
}
.pain-point-card:hover {
    transform: translateY(-5px);
}

/* 5단계 비주얼 프로세스 체인 */
.process-box {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.01);
    transition: all 0.3s;
}
.process-box:hover {
    border-color: var(--trust-blue);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.1);
}
.step-number {
    font-size: 2.8rem;
    font-weight: 800;
    color: rgba(37, 99, 235, 0.15);
    line-height: 1;
}

/* 베네핏 구조 */
.benefit-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}
.policy-card {
    border: none;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.03);
}

/* 앱 다운로드 스토어 링크 버트 */
.btn-download {
    background-color: #ffffff;
    color: var(--primary-navy);
    padding: 12px 28px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s;
    border: 2px solid transparent;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.btn-download:hover {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-3px);
}
.btn-download i {
    font-size: 2rem;
    margin-right: 14px;
}
.btn-text {
    text-align: left;
    line-height: 1.2;
}
.btn-text small {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
}
.btn-text span {
    font-size: 1.05rem;
    font-weight: 700;
}

@media (max-width: 459.98px) {
    .carousel-item { height: 480px; }
    .carousel-caption { bottom: 15%; }
    .carousel-caption h1 { font-size: 1.6rem !important; }
    .carousel-caption p { font-size: 0.95rem !important; }

    .section-title { font-size: 1.45rem; }

    .mobileBR { display: block; }
    h4 { font-size: 1.2rem !important; }

}