@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/static/woff2/SUIT.css');

:root {

    /* [Main Accents] 에메랄드 기반의 핵심 포인트 */
    --emerald-main: #10b981;
    --emerald-dark: #059669;
    --emerald-deep: #064e3b;      /* 배경과 조화를 이룰 짙은 에메랄드 */
    --emerald-neon: #00ffaa;       /* 버튼 및 활성 요소 (형광느낌 한방울) */
    --emerald-soft: #10b981;       /* 메인 컬러 */
    --emerald-glow: rgba(0, 255, 170, 0.3);
        
    /* [Backgrounds] 네이비를 완전히 빼고 에메랄드 톤의 딥 그린으로 교체 */
    --bg-deep: #011a14;            /* 훨씬 어둡고 깊은 베이스 */
      --bg-card: rgba(6, 40, 32, 0.8); /* 카드에 투명도를 주어 뒤쪽 광채가 비치게 함 */
      --bg-input: #0a2f27;           /* 입력창은 조금 더 명확한 대비 */
    --bg-glass: rgba(6, 78, 59, 0.6); /* 투명한 에메랄드 유리 효과 */
    
    
    
    /* [Text Colors] 화이트에 민트/에메랄드 한 방울 */
    --text-emerald: #34d399;/* [Text Colors] 화이트에 민트/에메랄드 한 방울 */
    --text-primary: #f0fdfa;       /* 아주 깨끗한 민트 화이트 */
    --text-dim: #5eead4;           /* 청록색 느낌의 보조 텍스트 */
    /* 배경 딥그린과 화이트 사이의 가교 역할 */
    --text-mint-gray: #a3b8b0; 
    --text-emerald: #00ffcc;
    
    /* [UI Elements] */
    --border-line: rgba(52, 211, 153, 0.2);
    --btn-gradient: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    --lcd-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
    
    
    /* [Layout] */
    --sidebar-width: 250px;

    --sand-bg: #f4f1ea;       /* 따뜻하고 밝은 모래색 */
    --sand-card: #ffffff;      /* 순백색 카드 */
    --sand-text: #2c3e50;      /* 깊은 네이비 텍스트 (가독성) */
    --point-emerald: #10b981;  /* 서브페이지에서도 사용하는 에메랄드 포인트 */
    --sand-border: rgba(0, 0, 0, 0.05);

    /* Beach & Sky */
  --sand-light: #fef3c7;
  --sand-warm: #fde68a;
  --sky-blue: #7dd3fc;
  --ocean-teal: #2dd4bf;
  --foam-white: rgba(255, 255, 255, 0.8);
  /* [수정] 기본 상태의 은은한 골드 채도 낮춤 */
  --icon-gold-base: rgba(30, 41, 59, 0.9);  /*rgba(201, 168, 76, 0.85); */
  /* [수정] 호버 상태의 쨍한 골드 */
  --icon-gold-active: rgba(201, 168, 76, 1);
    --icon-bg: rgba(30, 41, 59, 0.03); /* 반투명 다크 블루그레이 */
    --icon-border: rgba(201, 168, 76, 0.15); /* 은은한 골드 테두리 */
    
}
/* --- 기본 배경 및 레이아웃 --- */
body {
    position: relative;
    color: var(--text-primary);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    background: radial-gradient(circle at 50% -20%, #065f46 0%, #011a14 80%);
    /* background: linear-gradient(180deg, #00BFA5 0%, #004D40 100%); */
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* 미세한 노이즈 SVG */
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04; /* 아주 미세하게 4% 정도만 노출 */
    pointer-events: none;
    z-index: 1;
}

body::-webkit-scrollbar {
    display: none; /* 크롬, 사파리 등 */
}

/* --- [1. 초기 상태 설정] --- */
/* 로그인 전에는 아예 보이지 않도록 부모 레벨에서 제어 */
#main-header {
    /* 1. 흐름에서 제외하고 하단에 강제 고정 */
    position: fixed !important;
    top: auto !important; /* 상단 고정 해제 */
    bottom: 0 !important;
    left: 0;
    right: 0;
    
    /* 2. 본문 영역을 밀어내지 않도록 높이를 0으로 설정 */
    height: 0; 
    margin: 0;
    padding: 0;
    
    /* 3. 내부 요소들이 삐져나와도 보이게 설정 */
    overflow: visible !important;
    z-index: 2000; /* 최상단 레이어 */
    
    /* 4. 헤더의 빈 공간이 클릭을 막지 않도록 설정 */
    pointer-events: none; 
}

#main-header, #sidebar, #overlay {
    display: none; 
}

/* 로그인 성공 시에만 보이도록 설정 */
body.is-authenticated {
    /* 상단 에메랄드에서 하단 샌드 베이지로 흐르는 고급스러운 그라데이션 */
    background: linear-gradient(
        180deg, 
        #24c6ad 0%,    /* 상단 에메랄드 */
        #26bc9f 20%,   /* 미세 전이 1 */
        #2db091 40%,   /* 미세 전이 2 (베이지로 넘어가는 길목) */
        #8bb899 60%,   /* 에메랄드와 베이지의 혼합색 (핵심) */
        #d9cf98 80%,   /* 모래톱 진입 */
        #f2e3a1 100%   /* 최종 모래톱 */
    ) no-repeat fixed !important;
    
    background-size: cover;
    min-height: 100vh;
    image-rendering: auto;
}



body.is-authenticated::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 아주 미세한 점 입자 노이즈 패턴 */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04; /* 눈에 거의 안 보일 정도로 아주 낮게 설정 */
    pointer-events: none;
    z-index: -1;
}
body.is-authenticated #main-header { display: flex; }
body.is-authenticated #sidebar { display: flex; }
body.is-authenticated #overlay { display: block; }

  
/* --- [2. 오버레이 (Overlay)] --- */
#overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px); /* 뒤쪽 살짝 흐리게 */
    z-index: 1040;
    /* 핵심: opacity로만 조절해야 애니메이션이 부드러움 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.btn-close-sidebar {
    position: absolute;
    top: 10px;      /* 위에서 15px */
    right: 10px;    /* 오른쪽에서 15px */
    
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5); /* 은은한 회색 */
    opacity: 0.4;
    font-size: 1.2rem; /* 아이콘 크기 키움 */
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    padding: 5px; /* 터치 영역 확보 */
}

/* --- [3. 사이드바 (Sidebar)] --- */
#sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    z-index: 2000;
    
    /* 에메랄드 글래스모피즘 디자인 */
    background: var(--bg-glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-right: 1px solid var(--border-line);
    
    display: flex;
    flex-direction: column;
    
    /* 왼쪽으로 완전히 숨김 */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* GPU 가속 활성화 */
    will-change: transform;
    
    /* 스크롤바 숨기기 */
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#sidebar.active {
    transform: translateX(0) !important;
}

#sidebar::-webkit-scrollbar { display: none; }

/* 사이드바 열릴 때 오버레이 활성화 */
body.sidebar-open #overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: pointer;
}

/* 사이드바 열림 상태 */
body.sidebar-open #sidebar {
    transform: translateX(0);
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
}

body.sidebar-open #top-menu-toggle {
    /* z-index: 1050 !important;  */
    opacity: 0.3; /* 혹은 살짝 투명하게 해서 "비활성" 느낌 주기 */
    pointer-events: none; /* 클릭 안 되게 방지 */
}

/* --- [4. 내부 요소 스타일 간단 정리] --- */
.sidenav-link {
    color: var(--text-dim);
    padding: 12px 25px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    text-decoration: none;
}

.sidenav-link:hover {
    color: var(--emerald-neon);
    background: rgba(16, 185, 129, 0.05);
}

.sidenav-link i {
    width: 25px;
    margin-right: 15px;
    text-align: center;
}

#sidebar .sidebar-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-card); /* 하단 고정 느낌 */
    padding: 20px;
    border-top: 1px solid var(--border-line);
}

/* [모바일: 992px 미만] - 사이드바 숨김, 하단 버튼 보임 */
@media (max-width: 991.98px) {
    
    /* 사이드바 숨김 (왼쪽으로 보냄) */
    #sidebar {
        transform: translateX(-100%);
    }


    /* 하단 버튼 보임 */
    #bottom-menu-toggle { display: flex !important;}
}
@media (min-width: 992px) {
        /* 1. 사이드바: 항상 보임 & 제자리 찾기 */
    #sidebar {
        transform: translateX(0) !important;
        left: 0 !important;
        /* 혹시나 width가 지정 안 되어 있을까봐 안전장치 */
        width: 250px !important; 
    }

    #overlay, 
    #bottom-menu-toggle { 
        display: none !important; 
    }
}

#app-view {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 자식들을 가로 중앙으로 보냄 */
    width: 100vw !important; /* 100% 대신 화면 뷰포트 너비 전체(vw)를 사용 */
    min-width: 100vw !important;
    padding: 0 0 40px 0 !important;
    min-height: 100vh;
    overflow-x: hidden;
    z-index: 1;
    left: 0;
    right: 0;
}

#main-top-nav {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between; /* 양쪽 끝으로 버튼 배치 */
    align-items: flex-end;
    padding: 20px; /* 화면 끝에서 띄움 */
    pointer-events: none;
}

.navbar-brand { 
    position: fixed; /* 또는 sticky */
    right: 0;        /* 우측 끝에 붙임 */
}


@media (max-width: 991px) {
    #main-top-nav {
    position: fixed;
    bottom: 0;
    top: auto;
    }
}

@media (min-width: 992px) {

    #main-top-nav {
    position: sticky;
    top: 0;
    bottom: auto;
    }

}

@media (max-width: 991px) {
    #main-top-nav .navbar-brand {
    margin-left: 0 !important;
    }
}

#main-top-nav.d-none {
    display: none !important;
}

.btn-back-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-back-circle:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.4);
    color: #d4af37;
    transform: translateX(-3px); /* 뒤로 가는 듯한 시각적 피드백 */
}

.auth-layout {
    /* width: 100%;
    max-width: 450px;
    padding: 20px;
    z-index: 1; */

    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 화면 전체 높이를 차지해야 정중앙에 옵니다 */
    min-height: 100vh; 
    min-height: 100dvh; /* 모바일 브라우저 대응 */
    
    width: 100%;
    padding: 20px; /* 모바일에서 좌우 여백 확보 */

}

.auth-layout a{
    color: var(--emerald-neon) !important;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(0, 255, 170, 0.3); /* 미세한 광채 */
    text-decoration: none;
}

/* 배경 광채 효과 (Glow) */
.glow-effect {
    position: fixed;
    top: -10%;
    left: -10%;
    width: 40%;
    height: 40%;
    background: var(--emerald-glow);
    filter: blur(150px);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

/* --- 카드 디자인 (Glassmorphism) --- */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border-radius: 30px;

    border: 1px solid rgba(0, 255, 170, 0.2); /* 얇고 밝은 테두리 */
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.15); /* 상단 하이라이트 레이어 */
    
}

/* --- 프로그레스 바 (Step Indicator) --- */
.progress-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 40px;
    padding: 0 10px;
}

.progress-line-bg {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 2px;
    width: 100%;
    background: var(--bg-input);
    z-index: -1;
}

.progress-step {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 2px solid var(--border-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--text-dim);
    transition: all 0.3s ease;
}

.progress-step.active {
    background: var(--emerald-main);
    color: var(--bg-deep);
    border-color: var(--emerald-main);
    box-shadow: 0 0 15px var(--emerald-glow);
}

/* --- 폼 요소 스타일 --- */
.signup-step {
    display: none; /* 기본적으로 숨김 */
}

.signup-step.active {
    display: block; /* 활성화된 스텝만 표시 */
}



/* --- 에메랄드 테마 전용 입력 필드 스타일 --- */
/* 1. 공통 컨테이너 질감 정의 */
.custom-input-group, 
.form-group input {
    background: rgba(10, 47, 39, 0.4) !important; 
    border: 1px solid rgba(0, 255, 204, 0.15) !important;
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. 로그인용 (아이콘형 컨테이너) */
.custom-input-group {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* 3. 회원가입용 (일반 input) */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
    color: var(--text-emerald) !important;
    font-weight: 500;
    margin-left: 4px;
    letter-spacing: -0.2px; /* 자간을 살짝 조여서 단단하게 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.form-group input {
    width: 100%;
    padding: 10px 16px; /* 라벨형은 아이콘이 없으므로 좌우 균등 패딩 */
    height: auto;
    color: #f0fdfa !important;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 4. 로그인용 내부 input (아이콘 공간 확보) */
.custom-input-group input {
    background: transparent !important;
    border: none !important;
    color: #f0fdfa !important;
    padding: 10px 16px 11px 48px !important; /* 아이콘 자리 48px */
    width: 100%;
    outline: none;
}

/* 5. 포커스 공통 효과 */
.custom-input-group:focus-within,
.form-group input:focus {
    border-color: rgba(0, 255, 204, 0.6) !important;
    background: rgba(10, 47, 39, 0.6) !important;
    box-shadow: 0 0 20px rgba(0, 255, 204, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-1px);
}

/* 6. 아이콘 스타일 (로그인용) */
.custom-input-group .form-control-icon {
    position: absolute;
    left: 18px;
    color: rgba(94, 234, 212, 0.5);
    font-size: 16px;
    transition: all 0.3s ease;
    z-index: 10;
}

.custom-input-group:focus-within .form-control-icon {
    color: #00ffcc;
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.5);
}

/* 7. 기타 공통 (플레이스홀더, 자동완성) */
::placeholder {
    color: rgba(94, 234, 212, 0.3) !important;
}

input:-webkit-autofill {
    -webkit-text-fill-color: #f0fdfa !important;
    -webkit-box-shadow: 0 0 0px 1000px #0a2f27 inset !important;
}


/* 플레이스홀더(안내문구) 스타일 */
.custom-input-group input::placeholder {
    color: rgba(94, 234, 212, 0.3);
}

/* 자동완성 시 배경색이 변하는 현상 방지 */
.custom-input-group input:-webkit-autofill,
.custom-input-group input:-webkit-autofill:hover, 
.custom-input-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f0fdfa !important;
    -webkit-box-shadow: 0 0 0px 1000px #0a2f27 inset !important;
    transition: background-color 5000s ease-in-out 0s;
}


/* --- 추가: 에메랄드 전용 에러 메시지 스타일 --- */
.common-error-box {
    color: #ff5f5f;           /* 에메랄드와 대비되는 붉은색 */
    font-size: 13px;
    text-align: center;
    min-height: 10px;         /* 메시지가 없어도 자리를 잡아 레이아웃 흔들림 방지 */
    margin: 0;
    padding: 0 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-weight: 500;
}

.common-error-box.active {
    opacity: 1;
}

.info-message{
    font-size: 13px; 
    margin-bottom: 5px; 
    color: rgba(255,255,255,0.6) !important;
}
/* --- 버튼 스타일 --- */
.btn-veve {
    position: relative;
    /* 1. 색상: 탁한 녹색을 빼고, 시원하고 투명한 '네온 민트' 그라데이션 */
    background: linear-gradient(135deg, #00ffcc 0%, #10b981 100%);
    
    /* 2. 테두리: 버튼 자체가 빛나는 느낌을 주기 위해 얇은 빛 테두리 추가 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    /* 3. 텍스트: 검정색(#000)보다는 아주 깊은 녹색을 써서 대비를 주되 고급스럽게 */
    color: #012a20; 
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    
    /* 4. 구조 및 간격 */
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px; /* 살짝 더 둥글게 해서 모던함 강조 */
    
    /* 5. 그림자: 버튼 아래로 겹치는 그림자가 아니라, 주변으로 퍼지는 '발광(Glow)' 효과 */
    box-shadow: 0 0 20px rgba(0, 255, 204, 0.25), 
                0 10px 20px rgba(0, 0, 0, 0.3);
    
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden; /* Shine 효과가 버튼 밖으로 나가지 않게 */
}

/* 슥 지나가는 빛 효과 */
.btn-veve::after {
    content: "";
    position: absolute;
    top: -50%; left: -60%;
    width: 20%; height: 200%;
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(30deg);
    transition: none;
}

.btn-veve:hover::after {
    left: 150%;
    transition: all 0.6s ease; /* 호버 시 빛이 빠르게 지나감 */
}

/* 살짝 작아졌다가 커지는 효과 */
.btn-veve:hover {
    transform: scale(1.02); /* 살짝 커짐 */
    box-shadow: 0 0 30px rgba(0, 255, 204, 0.5);
}

.btn-veve:active {
    transform: scale(0.97); /* 클릭 시 쏙 들어가는 느낌 */
}

/* 4. Progress Step: 생동감 있는 발광 효과 */
.progress-step.active {
    background: var(--emerald-neon);
    color: #011a14;
    box-shadow: 0 0 20px var(--emerald-neon);
    border: none;
}

.btn-secondary-veve {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 204, 0.3);
    color: #00ffcc;
    padding: 12px;
    border-radius: 12px;
    width: 100%;
    margin-top: 10px;
    transition: all 0.3s;
}

.btn-secondary-veve:hover {
    border-color: var(--emerald-main);
    color: var(--emerald-main);
}

/* --- 안내 박스 및 타이머 --- */
.info-box {
    background: rgba(16, 185, 129, 0.05);
    border-radius: 12px;
    padding: 15px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-dim);
}

.timer {
    text-align: right;
    font-size: 13px;
    color: #ff4d4d;
    margin-top: 5px;
}

.error-message {
    color: #ff4d4d;
    font-size: 12px;
    margin-top: 5px;
    min-height: 18px;
}

/* --- 모달 스타일 --- */
.modal {
    display: none; 
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--emerald-main);
    padding: 40px;
    border-radius: 30px;
    text-align: center;
    max-width: 400px;
    width: 90%;
}

/* 유틸리티 */
.text-emerald { color: var(--text-emerald); }

#top-menu-toggle {
    position: fixed;
    bottom: 10px;       /* 상단에서 약간 띄움 */
    left: 5px;     /* 우측에서 약간 띄움 */
    transform: none; /* 기존 중앙 정렬 해제 */
    z-index: 1060;
    
    /* 투명도 높임 (컨텐츠가 비쳐 보이도록) */
    background: rgba(15, 23, 42, 0.4); 
    backdrop-filter: blur(4px); /* 뒤에 글씨가 살짝 흐리게 비침 */
    -webkit-backdrop-filter: blur(4px);
    
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px; /* 알약 모양 */
    padding: 8px 20px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* 스크롤 유도를 위한 미세한 움직임 */
#top-menu-toggle:active {
    transform: translateX(-50%) scale(0.95);
    background: rgba(15, 23, 42, 0.6);
}

/* 텍스트 & 아이콘 스타일 */
.toggle-text {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.toggle-icon {
    color: var(--sand-text);
    font-size: 18px;
}

.preload * {
    transition: none !important;
}

.nav-control-pill {
    /* position: fixed;
    bottom: 20px;
    right: 20px; 
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 1060; */
    display: none !important;
}

.nav-control-pill, #top-menu-toggle {
    pointer-events: auto !important;
}

.nav-btn {
    background: none;
    border: none;
    color: rgba(201, 168, 76, 0.5);
    padding: 8px 15px;
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    color: rgba(201, 168, 76, 1);
    opacity: 1;
}

.nav-divider {
    width: 1px;
    height: 12px;
    /* 구분선도 아주 미세하게 */
    background: rgba(255, 255, 255, 0.2);
}

.luxury-title {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem; /* 대시보드 TSNG 글자 크기와 매칭 */
    line-height: 1.2;
}

.material-symbols-rounded {
    /* 폰트가 로드되기 전까지 글자가 보이지 않게 처리 */
    overflow: hidden; /* 영역 밖으로 나가는 텍스트 숨김 */
    white-space: nowrap;
    
    /* 폰트 로드 전 텍스트 색상을 투명하게 만들어 깜빡임 방지 */
    color: transparent; 
}

/* 애니메이션 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


/* [PC/태블릿] 화면이 넓을 때는 카드의 너비를 픽셀 단위로 '강제 고정' 합니다 */
@media (min-width: 768px) {
    .glass-card {
        /* 내용물이 적든 많든 무조건 460px로 고정 (원하는 크기로 조절 가능) */
        width: 460px !important; 
        
        /* 혹시 모를 레이아웃 꼬임 방지 */
        min-width: 460px !important;
        margin: 0 auto; /* 중앙 정렬 확실하게 */
    }
}

/* [모바일] 화면이 좁을 때는 꽉 차게 (기존 유지) */
@media (max-width: 767px) {
    .glass-card {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* --- Modal (Glass style) --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.7); 
    backdrop-filter: blur(8px); /* 배경 더 흐리게 */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: auto;
    padding: 40px 30px;
    width: 90%;
    max-width: 400px;
    border-radius: 24px;
    text-align: center;
    color: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

#pwa-install-menu .sidenav-link {
    border: 1px dashed rgba(212, 175, 55, 0.4); /* 골드 점선 테두리 */
    margin: 10px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

#pwa-install-menu .sidenav-link:hover {
    background: rgba(212, 175, 55, 0.2);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3); /* 은은한 골드 광채 */
}

.theme-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px;
    text-align: center;
}

.mode-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

/* 실제 스위치 크기 조절 */
.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 55px;
}

/* 기본 체크박스 숨기기 */
.theme-switch input {
    display: none;
}

/* 슬라이더 배경 (Off 상태) */
.slider {
    background-color: rgba(255, 255, 255, 0.1);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 동그란 버튼 (손잡이) */
.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 15px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* 체크되었을 때 (On 상태) 배경색 - 에메랄드 */
input:checked + .slider {
    background-color: #24c6ad; 
}

/* 체크되었을 때 버튼 이동 */
input:checked + .slider:before {
    transform: translateX(26px);
}

/* 모양을 둥글게 */
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}


/* [Referral Modal Styles] */

.btn-social {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
  }
  
  .btn-social:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    color: white;
  }
  
  /* 브랜드별 색상 */
  .telegram { background: #0088cc; } /* 텔레그램 파랑 */
  .twitter  { background: #1DA1F2; } /* 트위터 하늘 */
  .whatsapp { background: #25D366; } /* 왓츠앱 초록 */

.referral-popup input:focus {
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
    border-color: var(--primary-gold);
  }