/* =================================================================
[gilra.kr] 통합 디자인 시스템 v2.0 (Cosmic Theme)
public/assets/css/front.css
================================================================= */

/* ----------------------------------
1. 핵심 변수 및 글로벌 설정
---------------------------------- */
:root {
    /* 1-1. Cosmic Theme Color Palette */
    --gilra-dark: #1b263b;
    --gilra-mid-dark: #2a3b57;
    --gilra-light-gray: #e0e1dd;
    --gilra-gold: #ffd700;
    --gilra-pastel-lavender: #c8a2c8;
    --gilra-pastel-coral: #f88379;
    --gilra-pastel-mint: #98ff98;
    --gilra-pastel-sky: #87ceeb;
    --gilra-pastel-apricot: #fbceb1;
    --gilra-gradient: linear-gradient(
        45deg,
        var(--gilra-pastel-sky),
        var(--gilra-pastel-lavender),
        var(--gilra-gold)
    );
    --gilra-deep-space: #0f172a;
    --gilra-nebula: #2a2a4a;

    /* 네온 파스텔 포인트 (가독성 확보) */
    --neon-mint: #69f0ae; /* 연동됨, 성공 */
    --neon-rose: #ff4081; /* 경고, 삭제 */
    --neon-gold: #ffd700; /* 강조, 별 */
    --neon-violet: #e0b0ff; /* 기본 텍스트, 아이콘 */

    /* 1-2. [통합] 기능성 색상 (Bootstrap 변수명 재정의) */
    --bs-body-bg: var(--gilra-dark);
    --bs-body-color: var(--gilra-light-gray);
    --bs-secondary-color: rgba(224, 225, 221, 0.75);
    --bs-tertiary-bg: var(--gilra-mid-dark); /* 카드 등 보조 배경색 */
    --bs-border-color: var(--gilra-mid-dark);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-primary: var(--gilra-pastel-lavender);
    --bs-secondary: #8898aa;
    --bs-success: var(--gilra-pastel-mint);
    --bs-info: var(--gilra-pastel-sky);
    --bs-warning: #fb6340;
    --bs-danger: var(--gilra-pastel-coral);

    /* 1-3. UI 요소 */
    --app-border-radius: 16px;
    --app-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ----------------------------------
2. 글로벌 스타일 (폰트, 배경 등)
---------------------------------- */
body {
    /* 3. 배경 이미지 위치 */
    background-position: center center;

    /* 4. 배경 이미지 크기 */
    background-size: cover;

    /* 5. 배경 이미지 고정 여부 */
    background-attachment: fixed;

    /* 6. 배경 로딩 전 기본 배경색 (선택 사항) */
    background-color: var(--gilra-dark);

    /* 7. 폰트 및 텍스트 관련 스타일 */
    color: var(--bs-body-color);
    font-family: "Noto Sans KR", sans-serif;
    letter-spacing: -0.025em;
    line-height: 1.7;
    margin: 0;
    background: radial-gradient(
        circle at 50% 0%,
        #2d3452 0%,
        var(--gilra-deep-space) 80%
    );
    background-attachment: fixed;
    color: #e2e8f0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.fw-bolder {
    font-family: "Playfair Display", serif;
    font-weight: 700;
}

/* ----------------------------------
   3. 기본 레이아웃 (헤더, 푸터, LNB)
   ---------------------------------- */
.navbar {
    background-color: rgba(27, 38, 59, 0.8) !important;
    backdrop-filter: blur(10px);
}
.navbar-brand {
    color: #fff !important;
}

.main-header {
    position: relative;
    z-index: 1030; /* Bootstrap의 기본 navbar z-index와 유사한 값 */
}
.nav-pills {
    background-color: var(--gilra-mid-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}
.nav-pills .nav-link {
    color: var(--gilra-light-gray);
}
.nav-pills .nav-link.active {
    color: #fff;
    background-color: var(--bs-primary);
    box-shadow: 0 0 15px rgba(200, 162, 200, 0.4);
}

.btn-header-outline,
.btn-header-primary {
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* 1. 로그인 버튼 (테두리 스타일) */
.btn-header-outline {
    background-color: transparent;
    border-color: rgba(
        224,
        225,
        221,
        0.4
    ); /* --gilra-light-gray 에 투명도 적용 */
    color: var(--gilra-light-gray);
}

.btn-header-outline:hover {
    background-color: rgba(224, 225, 221, 0.1);
    border-color: var(--gilra-light-gray);
    color: #fff;
}

/* 2. 회원가입 버튼 (솔리드 스타일) */
.btn-header-primary {
    /* 이미지의 파란색은 사주 오행의 '水' 색상과 동일하여 통일성을 줍니다. */
    background-color: #3b71ca;
    border-color: #3b71ca;
    color: #fff;
}

.btn-header-primary:hover {
    background-color: #4a81d4; /* 호버 시 약간 더 밝은 파란색 */
    border-color: #4a81d4;
    color: #fff;
    box-shadow: 0 0 10px rgba(59, 113, 202, 0.5);
}

/* ----------------------------------
   4. LNB (사이드바 & 모바일 메뉴)
   ---------------------------------- */
/* (A) 데스크탑 (992px 이상) */
@media (min-width: 992px) {
    .desktop-lnb-container {
        overflow: visible !important;
        z-index: 1000;
    }

    .desktop-lnb-container .nav-pills {
        width: 80px; /* 평소엔 아이콘만 (좁은 너비) */
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        white-space: nowrap;
        background: rgba(42, 59, 87, 0.6) !important;
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        position: sticky;
        top: 20px;

        /* 스크롤바 제거 */
        scrollbar-width: none;
        -ms-overflow-style: none;

        padding: 15px 10px;
    }
    .desktop-lnb-container .nav-pills::-webkit-scrollbar {
        display: none;
    }

    /* [Hover] 마우스 올리면 확장 */
    .desktop-lnb-container:hover .nav-pills {
        width: 260px; /* 확장 너비 */
        background: rgba(27, 38, 59, 0.95) !important;
        box-shadow: 5px 0 30px rgba(0, 0, 0, 0.5);
        padding-right: 15px;
    }

    /* -------------------------------------------------------
       [요소별 표시/숨김 처리]
       ------------------------------------------------------- */

    /* 1. 메뉴 텍스트, 뱃지, 섹션 제목 -> 평소엔 숨김 */
    .desktop-lnb-container .nav-text,
    .desktop-lnb-container .badge,
    .desktop-lnb-container .nav-section-title {
        display: none;
        opacity: 0;
        margin-left: 10px;
    }

    /* 2. 구분선 (hr)  */
    .desktop-lnb-container hr {
        display: block;
        opacity: 0.5; /* 평소엔 은은하게 */
        margin: 8px 5px; /* 좁은 간격 */
        border-color: rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
    }

    /* --- Hover 시 등장 효과 --- */

    .desktop-lnb-container:hover .nav-text,
    .desktop-lnb-container:hover .badge {
        display: inline-block;
        opacity: 1;
        animation: fadeIn 0.3s forwards;
    }

    .desktop-lnb-container:hover .nav-section-title {
        display: block;
        opacity: 1;
        margin-top: 15px;
        margin-bottom: 8px;
        padding-left: 12px;
        animation: fadeIn 0.4s forwards;
    }

    .desktop-lnb-container:hover hr {
        opacity: 1;
        margin: 15px 0; /* 간격 넓어짐 */
        border-color: rgba(255, 255, 255, 0.15);
    }

    /* 링크 스타일 */
    .desktop-lnb-container .nav-link {
        justify-content: flex-start;
        padding-left: 18px;
        height: 48px;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 4px;
        border-radius: 12px;
    }
    .desktop-lnb-container .nav-icon {
        font-size: 1.3rem;
        min-width: 30px;
        text-align: center;
        display: inline-block;
    }
    .desktop-lnb-container .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
        transform: translateX(5px);
    }
    .desktop-lnb-container .nav-link.active {
        background: var(--gilra-gradient);
        color: var(--gilra-dark);
        font-weight: bold;
        box-shadow: 0 0 15px rgba(135, 206, 235, 0.4);
    }
    .desktop-lnb-container .nav-link.active .nav-icon {
        color: var(--gilra-dark) !important;
    }
}

/* (B) 모바일 (991px 이하) */
@media (max-width: 991px) {
    .desktop-lnb-container {
        display: block !important;
        width: 100%;
        margin-bottom: 1.5rem;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .desktop-lnb-container::-webkit-scrollbar {
        display: none;
    }

    .desktop-lnb-container .nav-pills {
        display: flex;
        flex-direction: row !important;
        background: transparent !important;
        padding: 0 5px;
        border: none;
        gap: 8px;
        box-shadow: none;
    }
    .desktop-lnb-container ul {
        display: flex;
        flex-direction: row !important;
        padding: 0;
        margin: 0;
    }
    .nav-section-title,
    hr {
        display: none !important;
    }

    .desktop-lnb-container .nav-link {
        display: flex;
        align-items: center;
        background: rgba(42, 59, 87, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 50px;
        padding: 8px 16px;
        color: var(--gilra-light-gray);
        font-size: 0.9rem;
        margin-bottom: 0;
    }
    .desktop-lnb-container .nav-link.active {
        background: var(--gilra-gradient);
        color: var(--gilra-dark);
        font-weight: 700;
        border-color: transparent;
    }
    .desktop-lnb-container .nav-icon {
        font-size: 1rem;
        margin-right: 6px;
        color: inherit;
    }
    .desktop-lnb-container .nav-text {
        opacity: 1;
        display: inline-block;
    }
    .desktop-lnb-container .badge {
        font-size: 0.6rem;
        margin-left: 5px;
    }
}
/*
.nav-tabs {
    border-bottom: 2px solid var(--gilra-mid-dark);
}
*.
/* 2. 탭 링크 (버튼) 공통 스타일 
.nav-tabs .nav-link {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--bs-secondary-color); 
    font-weight: 500;
    padding: 0.8rem 1.2rem;
    transition: all 0.2s ease-in-out;
    margin-bottom: -2px; 
}
*/
/* 3. 비활성 탭에 마우스를 올렸을 때
.nav-tabs .nav-link:hover {
    color: var(--gilra-light-gray);
    border-bottom-color: var(--gilra-mid-dark); 
}
 */
/* 4. 활성(active) 탭 스타일 - 가장 중요! 
.nav-tabs .nav-link.active {
    background: none;
    color: var(--bs-primary); 
    font-weight: 700; 
    border-bottom: 2px solid var(--bs-primary);
}
*/
.nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: transparent !important; /* 컨테이너 배경 투명 */
}

/* 2. 탭 링크 (기본 상태) */
.nav-tabs .nav-link {
    margin-bottom: -1px;
    background-color: transparent !important; /* ★ 핵심: 배경 투명화 ★ */
    border: 1px solid transparent !important; /* 테두리 제거 */
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;

    color: rgba(255, 255, 255, 0.6) !important; /* 글자색: 연한 회색 */
    font-weight: 500;
    transition: all 0.3s ease;
}

/* 3. 탭 링크 (마우스 올렸을 때) */
.nav-tabs .nav-link:hover {
    border-color: transparent !important; /* 테두리 생김 방지 */
    color: #fff !important; /* 글자색: 흰색 */
    background-color: rgba(255, 255, 255, 0.05) !important; /* 아주 연한 빛 */
}

/* 4. 탭 링크 (선택된 Active 상태) - 여기가 문제였음 */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--gilra-gold) !important; /* 글자색: 골드 */
    background-color: transparent !important; /* ★ 흰색 배경 제거 ★ */
    border-color: transparent !important; /* 회색 테두리 제거 */
    border-bottom: 3px solid var(--gilra-gold) !important; /* 하단 골드 바 */
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); /* 골드 글로우 효과 */
}

/* 5. (혹시 모를) 탭 내부의 아이콘 색상도 따라가게 설정 */
.nav-tabs .nav-link.active i {
    color: var(--gilra-gold) !important;
}

.tab-content {
    font-size: 1.05rem;
    line-height: 1.8;
}
.tab-content p:last-child {
    margin-bottom: 0; /* 탭 콘텐츠 내부 마지막 문단의 불필요한 여백 제거 */
}

.btn-profile-manage {
    background-color: var(--gilra-mid-dark); /* 카드 배경색과 통일 */
    color: var(--gilra-light-gray);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-profile-manage:hover,
.btn-profile-manage:focus {
    background-color: var(--bs-primary); /* 호버 시 테마 색상으로 변경 */
    color: #fff;
    border-color: var(--bs-primary);
    box-shadow: 0 0 15px rgba(200, 162, 200, 0.4); /* 글로우 효과 추가 */
}

.btn-icon-header {
    font-size: 1.5rem; /* 아이콘 크기 키움 */
    color: var(--gilra-light-gray);
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    position: relative; /* 뱃지 위치 기준점 */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.btn-icon-header:hover {
    opacity: 1;
    color: var(--bs-primary);
}

/* 1. LNB의 기본 상태 및 확장 효과를 '.icon-lnb' 클래스가 모두 제어 */
.icon-lnb {
    width: 80px; /* 기본 너비 */
    transition: width 0.3s ease-in-out;
    overflow: hidden; /* 텍스트가 삐져나오지 않도록 함 */

    /* .nav-pills의 스타일을 여기에 통합 */
    background-color: var(--gilra-mid-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.5rem 0; /* 아이콘 상하 간격을 위한 내부 패딩 */
}

/* 2. LNB 확장 */
.icon-lnb:hover {
    width: 250px;
}

/* 3. 각 메뉴 아이템 링크(<a>) 스타일 */
.icon-lnb .nav-link {
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: var(--gilra-light-gray);
    padding: 0.9rem 0;
    border-radius: 0;
}

/* 4. 활성화된 메뉴 스타일 */
.icon-lnb .nav-link.active {
    color: #fff;
    background-color: var(--bs-primary);
}

/* 5. 아이콘 스타일 */
.icon-lnb .nav-icon {
    font-size: 1.25rem;
    min-width: 80px; /* 아이콘이 항상 80px 공간을 차지하여 중앙 정렬 */
    text-align: center;
}

/* 6. 텍스트 스타일 */
.icon-lnb .nav-text {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* 7. LNB 확장 시 텍스트 표시 */
.icon-lnb:hover .nav-text {
    opacity: 1;
    transition-delay: 0.1s;
}

footer.bg-body-tertiary {
    background-color: var(--gilra-mid-dark) !important;
    border-top: 2px solid transparent;
    border-image: var(--gilra-gradient) 1;
}

footer .text-muted {
    color: var(--gilra-light-gray) !important;
    opacity: 0.6;
}
footer .nav-link {
    color: var(--gilra-light-gray) !important;
    opacity: 0.8;
    transition: color 0.3s ease;
}
footer .nav-link:hover {
    color: var(--gilra-pastel-lavender) !important;
    opacity: 1;
}
footer span {
    color: var(--gilra-light-gray) !important;
    opacity: 0.4;
}

.main-content-wrapper {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* 모바일 화면에서는 좌우 여백을 줄여서 공간을 확보합니다. */
@media (max-width: 768px) {
    .main-content-wrapper {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ----------------------------------
   4. 공통 컴포넌트 (카드, 버튼 등)
   ---------------------------------- */

/* [개선] 중복 제거 및 통합: 페이지 헤더 스타일 */
.page-header,
.page-header-custom {
    margin-bottom: 3rem;
}
.page-header h1,
.page-header-custom h1 {
    background: var(--gilra-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.page-header .lead,
.page-header-custom .lead {
    color: var(--gilra-light-gray);
    opacity: 0.8;
    font-size: 1.2rem;
}
.back-link-wrapper {
    margin-bottom: 1rem;
}
.back-link,
.btn-outline-secondary {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 20px;
    background-color: var(--gilra-mid-dark);
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 테두리 색상 명확화 */
    color: var(--gilra-light-gray) !important; /* 텍스트 색상 명확화 */
    transition: all 0.3s ease;
}

.back-link:hover,
.btn-outline-secondary:hover {
    background-color: var(--gilra-pastel-lavender);
    border-color: var(--gilra-pastel-lavender) !important;
    color: #fff !important;
}

.card {
    background-color: var(--gilra-mid-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gilra-light-gray);
    border-radius: var(--app-border-radius);
    box-shadow: none;
}
/* [통합] 서비스 카드 (선택/목록형 페이지) */
.service-card {
    display: flex;
    flex-direction: column;
    background-color: var(--gilra-mid-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gilra-light-gray);
    transition: all 0.3s ease;
    border-radius: var(--app-border-radius);
    padding: 30px;
    height: 100%;
    text-align: center;
    text-decoration: none;
}
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--app-box-shadow);
    background: linear-gradient(var(--gilra-mid-dark), var(--gilra-mid-dark))
            padding-box,
        var(--gilra-gradient) border-box;
    border: 2px solid transparent;
}
.service-card .icon {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
}
.service-card .card-title {
    color: #fff;
}
.service-card .card-text {
    flex-grow: 1;
    opacity: 0.8;
    font-size: 0.95rem;
}
.service-card .card-link {
    margin-top: 1.5rem;
    color: var(--bs-primary);
    font-weight: bold;
}

.stat-card {
    background-color: rgba(0, 0, 0, 0.2); /* 반투명한 어두운 배경 */
    border: 1px solid var(--gilra-mid-dark);
    padding: 2rem;
    border-radius: var(--app-border-radius);
    margin-top: 2rem;
}

.stat-card h5 {
    color: #fff; /* 제목 색상을 밝게 */
}

/* 2. 글래스 카드 (신비로운 유리 질감) */
.card-glass {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-glass:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.3);
}

/* 차트 크기 제어 */
.chart-container {
    max-width: 300px; /* 차트의 최대 너비를 제한하여 너무 커지는 것을 방지 */
    margin: 0 auto; /* 차트를 부모 요소의 중앙에 배치 */
}

.story-card {
    background-color: transparent; /* 배경을 투명하게 하여 페이지와 일체감 */
    border: none;
    border-left: 3px solid var(--gilra-mid-dark); /* 좌측에 타임라인 같은 구분선 */
    padding: 2rem;
    margin-bottom: 3rem;
}
.story-card .story-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.story-card .story-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
}
.story-card .story-title {
    color: #fff;
    margin-bottom: 0;
}
.story-card .story-subtitle {
    font-family: "Noto Sans KR", sans-serif;
    color: var(--gilra-light-gray);
    opacity: 0.7;
    font-size: 0.9rem;
}
.story-card .story-body {
    line-height: 1.8;
    font-size: 1.05rem;
}

/* 2. 카드 & 박스: 테두리를 줄이고 깊이감 추가 */
.story-card,
.card {
    background-color: rgba(30, 40, 60, 0.6) !important; /* 더 투명하고 어둡게 */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.highlight-card {
    background-color: var(--gilra-mid-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--app-border-radius);
    box-shadow: var(--app-box-shadow);
    overflow: hidden;
}

.highlight-header {
    padding: 1.5rem 2rem;
    text-align: center;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.highlight-header p {
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
    margin-bottom: 0;
}

.highlight-title {
    font-family: "Playfair Display", serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--bs-primary);
    margin: 0.25rem 0 0 0;
}

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: rgba(255, 255, 255, 0.1);
    --bs-accordion-btn-color: var(--gilra-light-gray);
    --bs-accordion-active-color: var(--bs-primary);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(200, 162, 200, 0.25);
}
.accordion-button {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    width: 100%;
}

/* 2. Bootstrap 기본 화살표 완전 제거 (변경 없음) */
.accordion-button::after {
    display: none !important;
}

/* 3. 오른쪽 화살표 아이콘 생성 */
.accordion-button::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078"; /* fa-chevron-down */
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    transition: transform 0.2s ease-in-out;
    flex-shrink: 0;
    margin-left: 1rem;

    order: 2;
}

/* 4. 열렸을 때 아이콘 회전 (변경 없음) */
.accordion-button:not(.collapsed)::before {
    transform: rotate(-180deg);
    color: var(--bs-primary);
}

/* 5. 텍스트와 왼쪽 아이콘을 담는 span */
.accordion-button > span {
    display: flex;
    align-items: center;
    order: 1;
}

.icon-pastel-lavender {
    color: var(--gilra-pastel-lavender);
} /* 보라 */
.icon-pastel-coral {
    color: var(--gilra-pastel-coral);
} /* 붉은 */
.icon-pastel-mint {
    color: var(--gilra-pastel-mint);
} /* 초록 */
.icon-pastel-sky {
    color: var(--gilra-pastel-sky);
} /* 파랑 */
.icon-pastel-apricot {
    color: var(--gilra-pastel-apricot);
} /* 주황 */
.icon-pastel-gold {
    color: var(--gilra-gold);
} /* 골드 (추가) */

.icon-pastel-1 {
    color: var(--gilra-pastel-lavender);
}
.icon-pastel-2 {
    color: var(--gilra-pastel-coral);
}
.icon-pastel-3 {
    color: var(--gilra-pastel-mint);
}
.icon-pastel-4 {
    color: var(--gilra-pastel-sky);
}
.icon-pastel-5 {
    color: var(--gilra-pastel-apricot);
}

/* [통합] 안내 박스 (alert) */
.alert.alert-info-subtle {
    background-color: rgba(27, 38, 59, 0.8);
    border: 1px solid var(--gilra-mid-dark);
    color: var(--gilra-light-gray);
    border-radius: var(--app-border-radius);
}
.alert.alert-info-subtle .alert-heading {
    color: var(--bs-info);
}

/* [추가] 폼 요소 다크 테마 적용 */
.form-control,
.form-select {
    background-color: var(--gilra-dark);
    border-color: var(--gilra-mid-dark);
    color: var(--gilra-light-gray);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--gilra-dark);
    border-color: var(--bs-primary);
    color: var(--gilra-light-gray);
    box-shadow: 0 0 0 0.25rem rgba(200, 162, 200, 0.25); /* 라벤더 포커스 링 */
}
.form-check-input {
    background-color: var(--gilra-mid-dark);
    border-color: rgba(255, 255, 255, 0.25);
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* =================================================================
   [신규 추가] 다크 테마용 뱃지(badge) 스타일
   ================================================================= */
.badge.bg-secondary-subtle {
    background-color: var(
        --gilra-mid-dark
    ) !important; /* 배경을 카드와 동일하게 */
    color: var(--gilra-light-gray) !important; /* 텍스트는 밝은 회색 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 은은한 테두리 추가 */
    font-weight: 500; /* 폰트 두께 조정 */
    transition: all 0.3s ease;
}

.badge.bg-secondary-subtle:hover {
    background-color: var(
        --bs-primary
    ) !important; /* 호버 시 라벤더 색상으로 변경 */
    color: #fff !important;
    border-color: var(--bs-primary);
}

/* 뱃지 안의 아이콘 색상도 함께 변경되도록 */
.badge.bg-secondary-subtle .fa-question-circle {
    color: var(--gilra-pastel-sky) !important;
    transition: color 0.3s ease;
}
.badge.bg-secondary-subtle:hover .fa-question-circle {
    color: #fff !important;
}

/* =================================================================
   [신규 추가] 다크 테마용 아코디언(Accordion) 스타일 개선
   ================================================================= */
.accordion-item {
    background-color: transparent; /* 배경 투명하게 */
    border-color: rgba(255, 255, 255, 0.1); /* 테두리 색상 조정 */
}

.accordion-button {
    background-color: transparent; /* 버튼 배경 투명하게 */
    color: var(--gilra-light-gray); /* 버튼 텍스트 색상 */
}

/* 펼쳐졌을 때의 버튼 스타일 */
.accordion-button:not(.collapsed) {
    color: var(--bs-primary); /* 활성화 시 텍스트 색상을 라벤더로 */
    background-color: rgba(200, 162, 200, 0.05); /* 아주 은은한 라벤더 배경 */
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1); /* 그림자 대신 하단 선 */
}

/* 포커스 시 테두리 색상 */
.accordion-button:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(200, 162, 200, 0.25);
}

/* 아코디언 본문 패딩 조정 */
.accordion-body {
    padding: 1.5rem;
    color: var(--bs-secondary-color);
    font-size: 1.05rem; /* ★ 글자 크기 추가 */
    line-height: 1.8; /* ★ 줄 간격 추가 */
}

/* 아코디언 버튼 내부 아이콘 색상 조정 */
.accordion-button .fa-question-circle {
    transition: color 0.3s ease;
}
.accordion-button:not(.collapsed) .fa-question-circle {
    color: var(--bs-primary) !important;
}

/* act-find (용어사전) 아이콘 스타일  */
.act-find .fa-question-circle {
    opacity: 1; /* 평소에는 50% 투명도 */
    transition: opacity 0.3s ease; /* 부드러운 전환 효과 */
}

.act-find:hover .fa-question-circle {
    opacity: 1; /* .act-find 영역에 마우스를 올리면 100% 불투명도 */
}

/* 사주명반표 (saju-table) 다크 테마 & 레이아웃 스타일 */
.saju-table-wrapper {
    /* [추가] 모바일 화면에서 테이블이 넘칠 경우 가로 스크롤 생성 */
    overflow-x: auto;
}
.saju-table {
    /* [추가] 테이블 레이아웃을 위한 핵심 속성들 */
    display: table;
    width: 100%;
    min-width: 600px; /* 모바일에서 최소 너비 확보 */
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.9rem;

    /* 다크 테마 디자인 */
    background-color: var(--gilra-mid-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gilra-light-gray);
    border-radius: var(--app-border-radius);
    overflow: hidden;
}

/* [추가] 테이블 행(Row) 스타일 */
.saju-table .saju-row {
    display: table-row;
}

/* [추가] 테이블 셀(Cell) 스타일 */
.saju-table .saju-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 0; /* pillar 내부 패딩으로 대체 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.saju-table .saju-row:last-child .saju-cell {
    border-bottom: 0;
}

/* 좌측 라벨 셀 스타일 */
.saju-table .saju-cell.label {
    padding: 0.75rem 0.25rem;
    width: 15%; /* 라벨 너비 고정 */
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* 테이블 헤더 행 스타일 */
.saju-table .saju-row.header .saju-cell {
    padding: 0.75rem 0.25rem;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--gilra-light-gray);
    opacity: 0.8;
}

/* [추가] 천간/지지 기둥 스타일 */
.saju-table .pillar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.25rem;
    min-height: 120px;
}

/* 하위 정보 행 스타일 */
.saju-table .saju-row.sub-info .saju-cell {
    padding: 0.75rem 0.25rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--gilra-light-gray);
    opacity: 0.9;
}
.saju-table .saju-cell.zizangan {
    font-size: 0.8rem;
    line-height: 1.4;
}
.saju-table .sinsal-list {
    font-size: 0.8rem;
    line-height: 1.6;
    padding: 1rem 0;
}

/* [추가] 오행 글자 원 스타일 */
.saju-table .rec {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 일주 강조 스타일 */
.saju-table .border-primary.border-3 {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 15px rgba(200, 162, 200, 0.3) inset;
}

/* 오행 색상 */
.color-guide {
    background-color: var(--gilra-mid-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--app-border-radius);
    color: var(--gilra-light-gray);
    padding: 1.5rem;
}

.color-guide h6 {
    color: #fff;
}

.color-guide .color-guide-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.color-guide .color-box {
    width: 18px; /* 크기 살짝 조정 */
    height: 18px;
    margin-right: 0.75rem; /* 간격 조정 */
    border-radius: 6px; /* 모서리 살짝 둥글게 */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rec.thu,
.color-box.thu {
    background-color: #3b71ca;
}
.rec.tue,
.color-box.tue {
    background-color: #dc4c64;
}
.rec.sat,
.color-box.sat {
    background-color: #e4a11b;
}
.rec.fri,
.color-box.fri {
    background-color: #bdbdbd;
    color: #000;
}
.rec.wed,
.color-box.wed {
    background-color: #424242;
}

/* 오행 색상 가이드 */
.color-guide {
    background-color: var(--gilra-mid-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--app-border-radius);
    color: var(--gilra-light-gray);
    padding: 1.5rem;
}
.color-guide h6 {
    color: #fff;
}
.color-guide .color-box {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    border-radius: 0.25rem;
}

/* =================================================================
   [신규 추가] 오버레이 활성화 시 배경 콘텐츠 스타일
   ================================================================= */
.content-blur {
    filter: blur(5px) brightness(0.7);
    transition: filter 0.3s ease-in-out;
    pointer-events: none; /* 블러 처리된 동안 클릭 안되도록 설정 */
    user-select: none; /* 블러 처리된 동안 텍스트 선택 안되도록 설정 */
}

.section-title,
.month-title {
    font-weight: bold;
    color: #fff; /* ★ 모든 제목의 기본 색상을 흰색으로 지정 */
    margin-bottom: 1rem;
}

.section-title {
    display: flex;
    align-items: center;
    margin-top: 3rem; /* 여백 통일 */
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gilra-mid-dark);
    font-size: 1.25rem;
}

.section-title i {
    margin-right: 0.75rem;
    color: var(--bs-primary); /* 아이콘 색상 */
    font-size: 1.1em; /* 아이콘 크기 살짝 조정 */
}

.month-title {
    margin-top: 2.5rem;
    font-size: 1.1rem;
    color: var(--gilra-light-gray); /* 월별 제목은 약간 더 부드러운 색상으로 */
}

/* =================================================================
   [추가] 토정비결 전용 스타일 (Tojeong Styles)
   ================================================================= */

/* '올해의 괘' 부분의 한자 스타일 */
.fortune-verse-ch {
    font-family: "KoPub Batang", serif;
    font-size: 1.3rem;
    line-height: 2;
    color: var(--gilra-light-gray);
}

/* 한자와 한글 풀이를 감싸는 컨테이너 */
.fortune-verse {
    background-color: var(--gilra-mid-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--app-border-radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 한자 원문 스타일 */
.verse-ch {
    font-family: "KoPub Batang", serif;
    font-size: 1.2rem;
    line-height: 2;
    color: var(--gilra-light-gray);
    opacity: 0.9;
    background-color: transparent;
    padding: 1.5rem;
    margin: 0;
    white-space: pre-wrap;
}

/* 한글 풀이 스타일 */
.verse-ko {
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* '풀이' 라벨 스타일 */
.verse-ko::before {
    content: "풀이";
    font-weight: bold;
    color: var(--bs-primary);
    font-size: 0.8rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* =================================================================
   [공통 추가] 결과 표시 박스 (Result Box)
   ================================================================= */
.result-box {
    background-color: var(--gilra-mid-dark);
    border-radius: var(--app-border-radius);
    padding: 2rem;
    min-height: 250px; /* 최소 높이를 확보하여 레이아웃이 흔들리는 것을 방지 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.2s ease-in-out;
}

/* 결과 박스의 초기 상태(placeholder) 스타일 */
.result-box.placeholder-content {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    background-color: transparent;
}

.section-subtitle {
    font-weight: bold;
    color: #fff;
    margin-bottom: 1rem;
}

.summary-text {
    font-style: italic;
    color: var(--gilra-light-gray);
    opacity: 0.9;
}

.description-text {
    /* white-space: pre-wrap;  <-- 이 줄을 삭제하거나 주석 처리! (범인) */
    white-space: normal; /* 일반적인 텍스트 줄바꿈 방식 사용 */
    word-break: keep-all; /* 단어 중간에 줄바꿈 되지 않도록 (한글 최적화) */
    color: rgba(255, 255, 255, 0.8); /* 가독성을 위해 색상 약간 조정 */
}

.star-sign-header {
    text-align: center;
    padding: 2rem;
    margin-bottom: 3rem;
    border-radius: var(--app-border-radius);
    color: #fff;
    background-color: var(--bs-primary); /* Fallback 배경색 */
    background-image: linear-gradient(
        135deg,
        var(--sign-color, var(--bs-primary)),
        /* style 속성으로 전달된 --sign-color 변수 사용 */ var(--gilra-dark) 70%
    );
}

.star-sign-header .sign-symbol {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 1rem;
    display: inline-block;
    padding: 0.75rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.star-sign-header .sign-title h1 {
    color: #fff;
    margin: 0.5rem 0;
    font-size: 2rem;
}

.star-sign-header .sign-title p {
    color: #fff;
    opacity: 0.8;
    margin: 0;
    font-family: "Noto Sans KR", sans-serif;
}

/* =================================================================
   [신규] 다크 테마용 기본 테이블 (Dark Theme Table)
   ================================================================= */
.table-dark-custom {
    color: var(--bs-body-color);
    border: 1px solid var(--gilra-mid-dark);
    vertical-align: middle;
}

.table-dark-custom thead {
    background-color: var(--gilra-dark);
    color: var(--bs-secondary-color);
}

.table-dark-custom thead th {
    font-size: 0.9rem;
    font-weight: 500;
}

/* 테이블의 모든 셀에 테두리를 강제로 다시 적용합니다. */
.table-dark-custom > :not(caption) > * > * {
    border: 1px solid var(--gilra-mid-dark) !important;
    color: inherit !important; /* 모든 자식 요소는 부모(.table-dark-custom)의 color를 강제로 상속 */
}

.table-dark-custom tbody th[scope="row"] {
    background-color: rgba(0, 0, 0, 0.2);
    font-weight: bold;
}

.table-dark-custom td span {
    color: inherit !important;
}

.action-hub-card {
    background-color: var(--gilra-mid-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--app-border-radius);
    padding: 2.5rem;
    margin-top: 4rem;
    text-align: center;
}
.action-hub-title {
    color: #fff;
}
.action-hub-text {
    color: var(--bs-secondary-color);
    margin-bottom: 2rem;
}
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.btn-action-hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--gilra-light-gray);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex: 1;
    max-width: 150px;
    padding: 1.25rem 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
}
.btn-action-hub i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.btn-action-hub:hover {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
    transform: translateY(-5px);
}

/* =================================================================
   [신규 공통] 질문-답변 컴포넌트 (Question & Answer Component)
   ================================================================= */
.question-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--app-border-radius);
}

.question-selector .question-btn {
    border-radius: 50px;
    /* 알약 모양을 위한 충분히 큰 값 */
}

.interpretation-card {
    background-color: var(--gilra-mid-dark);
    border: 1px solid var(--bs-primary);
    border-radius: var(--app-border-radius);
    box-shadow: 0 0 20px rgba(200, 162, 200, 0.2);
    animation: fadeIn 0.5s ease;
}

.interpretation-header {
    padding: 1rem 1.5rem;
    background-color: rgba(200, 162, 200, 0.1);
}

.interpretation-header h4 {
    color: var(--bs-primary);
    font-size: 1.2rem;
    margin: 0;
}

.interpretation-body {
    padding: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.9;
    /*  white-space: pre-wrap; */
}

.static-content h4,
.static-content h5 {
    color: #fff;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.static-content p,
.static-content li {
    color: var(--bs-secondary-color);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 우주 배경 & 별빛 애니메이션 */
.welcome-hero.glass-card {
    position: relative; /* 자식 요소 배치를 위한 기준 */
    /* 배경을 좀 더 어둡게 눌러서 별이 잘 보이게 조정 */
    background: linear-gradient(135deg, #1b263b 0%, #10101a 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 30px rgba(135, 206, 235, 0.1);
    overflow: hidden; /* 별이 튀어나가지 않게 */
}

.hero-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* [중요] 콘텐츠보다 뒤로 보냄 */
    pointer-events: none; /* [핵심] 마우스 이벤트를 통과시킴 (버튼 클릭 가능하게) */

    /* 별 패턴 선명도 조정 */
    background-image: radial-gradient(
            2px 2px at 20px 30px,
            #fff,
            rgba(0, 0, 0, 0)
        ),
        radial-gradient(2px 2px at 40px 70px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 50px 160px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 90px 40px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(2.5px 2.5px at 130px 80px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 160px 120px, #fff, rgba(0, 0, 0, 0));
    background-size: 200px 200px;
    background-repeat: repeat;
    animation: twinkle-move 60s linear infinite; /* 속도 약간 빠르게 */
    opacity: 0.6;
}

.hero-content {
    position: relative;
    z-index: 10; /* [중요] 별보다 무조건 위에 있어야 함 */
    padding-left: 3rem;
    padding-right: 3rem;
    text-align: left; /* 왼쪽 정렬 강제 */
}

@keyframes twinkle-move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -200px -200px;
    }
}

/* =========================================
   2. LNB (모바일 대응 포함)
   ========================================= */
/* 데스크탑: 기존 유지 (Hover 시 확장) */
@media (min-width: 992px) {
    .desktop-lnb-container .nav-pills {
        width: 90px; /* 평소엔 아이콘만 */
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        white-space: nowrap;
        /* 유리 질감 */
        background: rgba(42, 59, 87, 0.4) !important;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        position: sticky;
        top: 20px;
    }

    .desktop-lnb-container:hover .nav-pills {
        width: 260px; /* 호버 시 텍스트 보일 만큼 확장 */
    }

    .desktop-lnb-container .nav-text {
        opacity: 0;
        transition: opacity 0.2s ease;
        margin-left: 10px;
    }

    .desktop-lnb-container:hover .nav-text {
        opacity: 1;
        transition-delay: 0.1s;
    }

    /* 아이콘 가운데 정렬 */
    .desktop-lnb-container .nav-link {
        justify-content: flex-start;
        padding-left: 20px;
    }
}

/* [신규] 모바일: 가로 스크롤 & 항상 텍스트 보임 */
@media (max-width: 991px) {
    /* 컨테이너 설정 */
    .desktop-lnb-container {
        display: block !important;
        width: 100%;
        margin-bottom: 1.5rem;
        /* 가로 스크롤 필수 설정 */
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* 부드러운 스크롤 */

        /* 스크롤바 숨기기 (크롬/사파리) */
        &::-webkit-scrollbar {
            display: none;
        }
        /* 스크롤바 숨기기 (파이어폭스/IE) */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* 네비게이션 바 조정 */
    .desktop-lnb-container .nav-pills {
        display: flex;
        flex-direction: row !important; /* 가로 배치 강제 */
        flex-wrap: nowrap !important; /* 줄바꿈 금지 */
        background: transparent !important; /* 배경 투명하게 */
        box-shadow: none;
        padding: 0;
        margin: 0;
        border: none;
        gap: 8px; /* 버튼 사이 간격 */
    }

    /* ul 태그 초기화 */
    .desktop-lnb-container ul {
        display: flex;
        flex-direction: row !important;
        padding: 0;
        margin: 0;
    }

    /* 개별 버튼 (알약 모양) 스타일 */
    .desktop-lnb-container .nav-item {
        flex: 0 0 auto; /* 내용물 크기만큼만 차지하게 */
    }

    .desktop-lnb-container .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;

        /* 반투명 유리 알약 디자인 */
        background: rgba(42, 59, 87, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 50px; /* 완전 둥근 알약 */

        padding: 8px 16px; /* 내부 여백 */
        color: var(--gilra-light-gray);
        font-size: 0.9rem;
        margin-bottom: 0; /* 하단 여백 제거 */
    }

    /* 활성화된 버튼 스타일 */
    .desktop-lnb-container .nav-link.active {
        background: var(--gilra-gradient);
        color: var(--gilra-dark);
        font-weight: 700;
        border-color: transparent;
        box-shadow: 0 0 10px rgba(135, 206, 235, 0.4);
    }

    /* 아이콘 스타일 */
    .desktop-lnb-container .nav-icon {
        font-size: 1rem;
        margin-right: 6px;
        color: inherit; /* 부모 색상 상속 */
    }

    /* 텍스트 보이기 */
    .desktop-lnb-container .nav-text {
        opacity: 1;
        display: inline-block;
    }
}

/* =========================================
   3. [복구] 사라진 버튼 & 하이라이트 스타일
   ========================================= */

/* [핵심] 길라잡이 전용 코스믹 버튼 (그라데이션 + 글로우) */
.btn-cosmic {
    background: linear-gradient(
        135deg,
        var(--gilra-pastel-lavender),
        var(--gilra-pastel-sky)
    );
    border: none;
    color: #1a1a2e;
    font-weight: 700;
    border-radius: 50px;
    padding: 0.6rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(135, 206, 235, 0.3);
}

.btn-cosmic:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(200, 162, 200, 0.6);
    color: #000;
}

.btn-cosmic-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    padding: 0.5rem 1.2rem;
    transition: all 0.3s;
}
.btn-cosmic-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* [가독성] 텍스트 강조 하이라이트 (제목 뒤 은은한 배경) */
.text-highlight {
    background: linear-gradient(
        120deg,
        rgba(135, 206, 235, 0) 0%,
        rgba(135, 206, 235, 0.3) 100%
    );
    padding: 0 5px;
    border-radius: 4px;
    color: #fff;
}

/* 내 사주명반 확인 버튼 (흰색 테두리 버튼) 스타일 보정 */
.btn-outline-light {
    border-width: 1px;
    padding: 0.8rem 2rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* =========================================
   Breadcrumb (브레드크럼) 스타일
   ========================================= */
.cosmic-breadcrumb {
    margin-bottom: 1.5rem; /* 기존보다 여백을 좀 더 줌 (시원하게) */
    padding-left: 0.5rem;
    opacity: 0.7; /* 살짝 투명하게 해서 세련미 더하기 */
}
.cosmic-breadcrumb:hover {
    opacity: 1; /* 마우스 올리면 선명하게 */
}

.cosmic-breadcrumb .breadcrumb-item {
    font-size: 0.95rem; /* 글자 크기 살짝 키움 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 배경이 어두우니 그림자 추가 */
}

/* 링크 색상 (기본 회색 -> 호버 시 라벤더) */
.cosmic-breadcrumb .breadcrumb-item a {
    color: var(--gilra-light-gray);
    text-decoration: none;
    opacity: 0.7;
    transition: all 0.2s;
}

.cosmic-breadcrumb .breadcrumb-item a:hover {
    color: var(--gilra-pastel-lavender);
    opacity: 1;
}

/* 현재 페이지 (활성) */
.cosmic-breadcrumb .breadcrumb-item.active {
    color: var(--bs-primary); /* 라벤더 색상 */
    font-weight: 500;
}

/* 구분자 (/) 색상 변경 */
.cosmic-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.3);
    content: "›"; /* 슬래시 대신 화살표 */
    font-size: 1.1rem;
    line-height: 1;
    padding-top: 2px;
}

/* 홈 아이콘 미세 조정 */
.cosmic-breadcrumb .fa-home {
    font-size: 1rem;
    position: relative;
    top: -1px;
}

/* 헤더 텍스트 박스 (재사용성 위해 클래스화) */
.header-glass-box {
    background: rgba(27, 38, 59, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    max-width: 90%;
    width: auto;
    min-width: 300px;
}
.text-shadow {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* =========================================
   7. 메인 페이지 전용 스타일 (Shortcuts)
   ========================================= */

/* 숏컷 카드 (토정비결, MBTI 등) */
.shortcut-card {
    display: flex;
    align-items: center;
    background-color: rgba(42, 59, 87, 0.4); /* 유리 질감 배경 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1rem;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    height: 100%; /* 높이 꽉 채우기 */
}

.shortcut-card:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 아이콘 박스 스타일 */
.shortcut-card .icon-box {
    width: 48px; /* 크기 고정 */
    height: 48px;
    border-radius: 12px; /* 둥근 모서리 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 12px;
    flex-shrink: 0; /* 크기 줄어듬 방지 */
}

/* 텍스트 스타일 */
.shortcut-card .shortcut-title {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    word-break: keep-all; /* 단어 단위 줄바꿈 */
}

/* 모바일 대응: 2열로 나올 때 간격 조정 */
@media (max-width: 768px) {
    .shortcut-card {
        padding: 0.8rem;
    }
    .shortcut-card .icon-box {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-right: 10px;
    }
    .shortcut-card .shortcut-title {
        font-size: 0.9rem;
    }
}

/* 3. 진단 섹션 (Why?) 강조 박스 */
.diagnosis-box {
    background: linear-gradient(
        135deg,
        rgba(135, 206, 235, 0.1),
        rgba(200, 162, 200, 0.05)
    );
    border-left: 4px solid var(--gilra-pastel-sky);
    border-radius: 4px;
}

/* 4. 시그니처 처방 카드 (반안살/본명궁) */
.signature-card {
    background: radial-gradient(
        circle at top right,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    transition: transform 0.3s ease;
}
.signature-card:hover {
    transform: translateY(-5px);
    border-color: var(--gilra-pastel-lavender) !important;
}

/* 5. 아이콘 색상 강제 조정 (부트스트랩 원색 덮어쓰기) */
.text-primary {
    color: var(--gilra-pastel-lavender) !important;
}
.text-success {
    color: var(--gilra-pastel-mint) !important;
}
.text-info {
    color: var(--gilra-pastel-sky) !important;
}
.text-warning {
    color: var(--gilra-gold) !important;
}
.text-danger {
    color: var(--gilra-pastel-coral) !important;
}

/* 배경 아이콘 원형 */
.bg-primary.bg-opacity-10 {
    background-color: rgba(200, 162, 200, 0.15) !important;
}
.bg-success.bg-opacity-10 {
    background-color: rgba(152, 255, 152, 0.15) !important;
}
.bg-info.bg-opacity-10 {
    background-color: rgba(135, 206, 235, 0.15) !important;
}

/* 6. 리스트 그룹 투명화 */
.list-group-item {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* 4. 상태 뱃지 (가독성 개선) */
.badge-neon-success {
    background-color: rgba(105, 240, 174, 0.15);
    color: var(--neon-mint);
    border: 1px solid rgba(105, 240, 174, 0.3);
    font-weight: 500;
    padding: 0.4em 0.8em;
}
.badge-neon-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 5. 탭 메뉴 개선 */
.cosmic-tabs .nav-link {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    margin: 0 4px;
}
.cosmic-tabs .nav-link.active {
    background: rgba(200, 162, 200, 0.15);
    color: #fff;
    border-color: var(--gilra-pastel-lavender);
    box-shadow: 0 0 15px rgba(200, 162, 200, 0.2);
}

/* 1. 배경(Backdrop) 스타일: 아주 어두운 네이비 + 블러 */
.auth-overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: rgba(10, 15, 30, 0.1);
    /* 더 어둡게 변경 */
    backdrop-filter: blur(8px);
    /* 블러 강도 증가 */
    animation: fadeIn 0.5s ease-out;
}

/* 2. 내용(Content Wrapper) 스타일 */
.auth-overlay-content-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    pointer-events: none;
    /* 내용물 외 클릭 통과 */
}

/* 데스크톱 LNB 대응 */
@media (min-width: 992px) {
    .auth-overlay-content-wrapper {
        left: calc(100% / 12 * 2);
    }
}

/* 3. 실제 내용물 카드 (Glassmorphism 적용) */
.auth-overlay-content-wrapper .auth-overlay-content {
    pointer-events: auto;
    position: relative;
    max-width: 420px;
    width: 100%;
    padding: 2.5rem 2rem;
    border-radius: 24px;

    /* 유리 질감 & 그라데이션 테두리 효과 */
    background: rgba(42, 59, 87, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 배경 장식용 글로우 */
.glow-effect {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(135, 206, 235, 0.15),
        transparent 60%
    );
    z-index: -1;
    pointer-events: none;
}

/* 아이콘 래퍼 */
.auth-overlay-content .icon-wrapper {
    width: 80px;
    height: 80px;
    line-height: 80px;
    margin: 0 auto 1.5rem auto;
    border-radius: 50%;
    font-size: 2.5rem;

    /* 아이콘 스타일 */
    background: linear-gradient(
        135deg,
        var(--gilra-mid-dark),
        var(--gilra-dark)
    );
    color: var(--gilra-pastel-lavender);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(200, 162, 200, 0.3);
}

/* 텍스트 스타일 */
.overlay-title {
    font-family: "Playfair Display", serif;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1.3;
}

.text-highlight {
    color: var(--gilra-pastel-sky);
    font-weight: 700;
}

.overlay-desc {
    color: var(--gilra-light-gray);
    opacity: 0.9;
    font-size: 1.05rem;
    line-height: 1.6;
}

.overlay-desc strong {
    color: var(--gilra-pastel-mint);
    /* 강조색 */
}

/* 버튼 스타일 (Cosmic Theme) */
.btn-cosmic-overlay {
    background: var(--gilra-gradient);
    border: none;
    color: var(--gilra-dark);
    font-weight: 700;
    padding: 1rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(135, 206, 235, 0.3);
    font-size: 1.1rem;
}

.btn-cosmic-overlay:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(200, 162, 200, 0.6);
    color: var(--gilra-dark);
}

/* 닫기 버튼 (링크 스타일) */
.btn-link-overlay {
    background: transparent;
    border: none;
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-link-overlay:hover {
    color: #fff;
    transform: translateX(3px);
}

/* 애니메이션 정의 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}