:root {
    --bg-dark: #222222;
    --text-light: #ffffff;
    --text-gray: #a0a0a0;
    --box-gray: #d9d9d9;
    --footer-bg: #1a1a1a;
    
    --glass-bg: rgba(34, 34, 34, 0.4); 
    --glass-blur: blur(12px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Pretendard', sans-serif; }

body { background-color: var(--bg-dark); color: var(--text-light); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* --- 상단 네비게이션 바 --- */
header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; 
    display: flex; justify-content: space-between; align-items: center; padding: 0 30px; height: 75px;
    background: rgba(34, 34, 34, 0.6); 
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}
.header-left { display: flex; align-items: center; gap: 40px; }
.logo { font-size: 30px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.menu { display: flex; gap: 20px; margin-top: 5px; }
.menu li a { font-size: 15px; color: var(--text-gray); transition: 0.2s; font-weight: 500; }
.menu li a:hover { color: var(--text-light); text-shadow: 0 0 8px rgba(255,255,255,0.3); }

.header-right { display: flex; align-items: center; gap: 20px; }
.search-box { position: relative; display: flex; align-items: center; }
.search-box input {
    background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 20px; color: white; padding: 10px 40px 10px 20px; font-size: 14px; width: 250px; outline: none; transition: 0.3s;
}
.search-box input:focus { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255,255,255,0.3); }
.search-box input::placeholder { color: rgba(255,255,255,0.4); }
.search-box i { position: absolute; right: 15px; color: rgba(255,255,255,0.4); cursor: pointer; }
.login-btn { background: none; border: none; color: white; font-size: 15px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; transition: 0.2s; }
.login-btn:hover { text-shadow: 0 0 10px rgba(255,255,255,0.5); }

/* --- 메인 컨텐츠 영역 --- */
main { flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }

.first-screen {
    width: 100%; max-width: 1400px;
    min-height: calc(100vh - 75px); height: auto;
    margin-top: 75px; padding: 25px 30px;
    display: flex; flex-direction: column; gap: 25px;
}

/* 1. 상단 시세 & 우측 광고 */
.top-section { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; min-height: 220px; flex: 0.4; }
.price-area { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: rgba(0,0,0,0.15); border-radius: 8px; padding: 20px; }
.price-area h1 { font-size: clamp(50px, 7vw, 100px); font-weight: 800; letter-spacing: 3px; line-height: 1; margin-bottom: 10px; text-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.price-area p { font-size: clamp(20px, 3.5vw, 40px); font-weight: 600; color: var(--text-light); transition: 0.3s; }
.ad-area { background-color: rgba(217, 217, 217, 0.1); color: #888; display: flex; justify-content: center; align-items: center; font-size: clamp(18px, 2.5vw, 30px); font-weight: 600; border-radius: 8px; border: 1px dashed rgba(255,255,255,0.2); min-height: 150px; }

/* 2. 그래프 영역 */
.bottom-section { 
    flex: 0.6; 
    background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border); box-shadow: var(--glass-shadow);
    border-radius: 12px; padding: 15px 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; transition: 0.3s;
}
.bottom-section:hover { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.15); }

.chart-header { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 15px; z-index: 10; }
.chart-header h2 { color: white; font-size: 26px; font-weight: 700; margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.time-range-select { position: absolute; right: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--text-light); padding: 6px 10px; border-radius: 6px; font-size: 13px; outline: none; cursor: pointer; transition: 0.2s; }
.time-range-select:hover { background: rgba(255, 255, 255, 0.1); }
.time-range-select option { background: var(--bg-dark); color: white; }

.chart-container { width: 100%; height: 100%; min-height: 250px; position: relative; }

/* 차트 토글(커스텀 범례) */
.custom-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; z-index: 10; }
.legend-btn { 
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); 
    color: var(--text-light); padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px;
}
.legend-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); }
.legend-btn.hidden-dataset { opacity: 0.4; text-decoration: line-through; filter: grayscale(100%); }
.legend-color-box { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* 스크롤 추가 콘텐츠 */
.scroll-content-wrapper { width: 100%; max-width: 1400px; padding: 0 30px 40px 30px; display: flex; flex-direction: column; gap: 30px; }

.shortcut-buttons { display: flex; gap: 20px; width: 100%; }
.glass-btn {
    flex: 1; display: flex; justify-content: center; align-items: center; gap: 12px; height: 90px;
    background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 12px;
    color: white; font-size: 22px; font-weight: 700; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.glass-btn:hover {
    background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.05); color: #deff9a;
}
.glass-btn:hover i { transform: scale(1.15) rotate(5deg); }

/* 시세 산출 안내 */
.info-section {
    background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border); box-shadow: var(--glass-shadow);
    border-radius: 12px; padding: 40px; display: flex; flex-direction: column; gap: 20px; transition: 0.3s;
}
.info-section:hover { background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.15); }
.info-section h2 { color: white; font-size: 26px; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 15px; margin-bottom: 10px; }
.info-list { display: flex; flex-direction: column; gap: 15px; }
.info-item { display: flex; gap: 15px; align-items: flex-start; }
.info-item i { color: #deff9a; font-size: 22px; margin-top: 2px; width: 30px; text-align: center; }
.info-text h3 { color: white; font-size: 17px; font-weight: 600; margin-bottom: 5px; }
.info-text p { color: #ccc; font-size: 14.5px; line-height: 1.6; }

/* --- 하단 푸터 영역 --- */
footer { width: 100%; background-color: var(--footer-bg); border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 40px 30px; }
.footer-content { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.footer-links { display: flex; gap: 25px; }
.footer-links a { color: var(--text-gray); font-size: 14px; font-weight: 500; transition: 0.2s; }
.footer-links a:hover { color: var(--text-light); text-decoration: underline; }
.footer-info { color: #777; font-size: 13px; line-height: 1.8; }
.footer-info .email-link { color: var(--text-gray); font-weight: 600; text-decoration: underline; transition: 0.2s; }
.footer-info .email-link:hover { color: var(--text-light); }

/* --- 애니메이션 --- */
@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-load-1 { animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; opacity: 0; }
.animate-load-2 { animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards; opacity: 0; }
.animate-load-3 { animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards; opacity: 0; }

.reveal-element {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-element.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- 반응형 미디어 쿼리 --- */
@media (max-width: 900px) {
    .first-screen { min-height: auto; margin-top: 130px; padding: 20px; }
    .top-section { grid-template-columns: 1fr; min-height: auto; }
    .price-area { padding: 40px 0; }
    .bottom-section { min-height: 400px; }
    .header-left { flex-direction: column; align-items: flex-start; gap: 10px; }
    header { padding: 15px; flex-direction: column; gap: 15px; align-items: flex-start; height: auto; }
    .search-box input { width: 100%; }
    .shortcut-buttons { flex-direction: column; gap: 15px; }
    .glass-btn { height: 70px; font-size: 18px; }
    .info-section { padding: 25px; }
}

@media (max-width: 600px) {
    .first-screen { margin-top: 90px; }
    header { padding: 15px; flex-direction: row; justify-content: space-between; align-items: center; }
    .header-left { flex-direction: row; align-items: center; gap: 15px; }
    .menu { display: none; }
    .header-right { gap: 10px; }
    .search-box { display: none; }
    .bottom-section { padding: 15px; }
    .chart-header h2 { font-size: 18px; }
    .time-range-select { position: static; margin-left: 10px; }
    .info-item { flex-direction: column; text-align: center; align-items: center; }
    .info-item i { margin-bottom: 5px; }
    .footer-links { flex-direction: column; gap: 15px; }
}
/* 큐브 모달 오버레이 (블러 배경) */
.cube-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    z-index: 10000; display: flex; justify-content: center; align-items: center;
}

/* 글래스모피즘 모달 창 */
.cube-modal-content {
    background: var(--glass-bg); border: var(--glass-border); box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    border-radius: 16px; width: 900px; max-width: 95%; max-height: 90vh; overflow-y: auto;
    display: flex; flex-direction: column; color: white;
}

.cube-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 30px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cube-header h2 { font-size: 22px; font-weight: 700; margin: 0; }
.close-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; transition: 0.2s; }
.close-btn:hover { color: #ff4c4c; }

.cube-body { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 30px; }

/* 큐브 선택 버튼 */
.cube-selectors { display: flex; gap: 15px; margin-bottom: 20px; }
.cube-select-btn {
    flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px; padding: 15px; display: flex; flex-direction: column; align-items: center;
    gap: 10px; color: white; cursor: pointer; transition: 0.3s;
}
.cube-select-btn img { width: 50px; height: 50px; object-fit: contain; }
.cube-select-btn:hover, .cube-select-btn.active { background: rgba(255,255,255,0.15); border-color: #deff9a; }

/* 결과창 */
.cube-display-area { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 20px; }
.cube-display-area img { width: 80px; height: 80px; filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); }
.cube-result-box {
    width: 100%; background: rgba(0,0,0,0.4); border: 1px inset rgba(255,255,255,0.1);
    border-radius: 8px; padding: 20px; text-align: center; font-size: 16px; font-weight: 600; line-height: 1.8;
}
.result-line { color: #deff9a; }

/* 비용 출력 */
.cost-display-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; }
.cost-item { display: flex; justify-content: space-between; margin-bottom: 8px; }
.cost-item:last-child { margin-bottom: 0; }
.cost-label { color: #aaa; font-size: 14px; }
.cost-value { font-weight: 700; font-size: 16px; }
.cost-value.meso { color: #ffd700; }
.cost-value.krw { color: #4c80ff; }

/* 우측 설정창 */
.settings-grid { display: grid; gap: 15px; margin-bottom: 25px; }
.setting-item label { display: block; font-size: 13px; color: #aaa; margin-bottom: 5px; }
.setting-item select, .setting-item input {
    width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2);
    color: white; padding: 10px; border-radius: 6px; outline: none;
}

.target-options-container { display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; }
.target-line { display: flex; gap: 10px; align-items: center; }
.target-line label { width: 60px; font-size: 13px; color: #aaa; }
.target-line input[type="text"] { flex: 2; }
.target-line input[type="number"] { flex: 1; }

.action-buttons { display: flex; gap: 15px; }
.action-btn {
    flex: 1; padding: 15px; border-radius: 8px; font-weight: bold; font-size: 16px;
    cursor: pointer; border: none; transition: 0.2s;
}
.action-btn.normal { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.3); }
.action-btn.normal:hover { background: rgba(255,255,255,0.2); }
.action-btn.auto { background: #deff9a; color: #222; }
.action-btn.auto:hover { background: #c5e67a; }
.autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: #222; border: 1px solid rgba(255,255,255,0.2); max-height: 150px; overflow-y: auto; z-index: 1000; list-style: none; padding: 0; margin: 0; border-radius: 4px; display: none; }
.autocomplete-list li { padding: 8px; font-size: 13px; color: #ddd; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); }
.autocomplete-list li:hover { background: rgba(255,255,255,0.1); }



/* --- 대시보드 상단 레이아웃 (MESPI + 계산기 1:1 배치) --- */
.top-section {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}
.top-section > div {
    flex: 2; 
    min-width: 300px; 
}

/* --- 실시간 환산 계산기 --- */
.meso-calc-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.calc-header { 
    font-weight: bold; font-size: 16px; margin-bottom: 15px; text-align: center; color: var(--text-light); 
}
.calc-input-group { 
    display: flex; align-items: center; background: rgba(0,0,0,0.4); 
    border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 10px; 
}
.calc-input-group input { 
    flex: 1; background: transparent; border: none; color: white; 
    text-align: right; font-size: 16px; outline: none; padding-right: 10px; 
}
.calc-input-group input:focus { border-bottom: 1px solid #deff9a; }
.calc-label { 
    width: 70px; text-align: center; color: var(--text-gray); 
    font-size: 14px; font-weight: bold; border-left: 1px solid rgba(255,255,255,0.2); padding-left: 10px;
}
.calc-swap { text-align: center; margin: 10px 0; }
.calc-swap button { 
    background: transparent; border: none; color: #deff9a; 
    font-size: 18px; cursor: pointer; transition: transform 0.2s; 
}
.calc-swap button:hover { transform: scale(1.2); }

/* --- 큐브 옵션 등급별 색상 부여 --- */
.cube-opt-rare { color: #4c80ff; font-weight: 600; }    /* 파란색 */
.cube-opt-epic { color: #df73ff; font-weight: 600; }    /* 보라색 */
.cube-opt-unique { color: #ffe600; font-weight: 600; }  /* 노란색 */

/* --- 공통 글래스모피즘 알림창(모달) 스타일 --- */
#mespiCommonAlertModal {
    backdrop-filter: blur(15px); /* 글래스모피즘 효과 */
    -webkit-backdrop-filter: blur(15px);
    background: rgba(34, 34, 34, 0.5); /* 더 투명한 배경 */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.alert-text {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 25px;
    font-weight: bold;
    letter-spacing: -0.5px;
}

.alert-confirm-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 8px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.alert-confirm-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

/* --- 공통 글래스모피즘 알림창 팝업 레이아웃 추가 --- */
.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 뒷배경을 어둡게 처리 */
    z-index: 10005; /* 큐브 모달보다 앞에 보이도록 설정 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 기존 작성해주신 스타일에 너비 규칙(width)만 보완합니다 */
#mespiCommonAlertModal {
    width: 360px; /* 알림창이 너무 퍼지지 않게 적정 너비 지정 */
    max-width: 90%;
    background: rgba(34, 34, 34, 0.5); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ==========================================
   큐브 목표 옵션 자동완성 드롭다운 스타일
   ========================================== */
.target-line {
    position: relative; /* 자식인 드롭다운 리스트가 이 라인을 기준으로 배치됨 */
}

.autocomplete-list {
    position: absolute;
    top: 100%;                  /* 입력창 바로 밑에 정렬 */
    left: 0;
    width: 100%;                /* 입력창과 완전히 동일한 너비 */
    background-color: #2c2c2c !important; /* 어두운 배경 */
    border: 1px solid #555 !important;
    border-radius: 4px;
    max-height: 160px;          /* 리스트가 길어지면 스크롤 생성 */
    overflow-y: auto;
    z-index: 999999 !important; /* 모달창 내부 레이어 싸움에서 무조건 승리 */
    padding: 0;
    margin: 0;
    list-style: none;
    display: none;              /* 평소에는 숨김 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.autocomplete-list li {
    padding: 8px 12px;
    cursor: pointer;
    color: #ffffff;
    font-size: 13px;
    border-bottom: 1px solid #444;
    text-align: left;           /* 글자 왼쪽 정렬 */
}

/* 마우스 올렸을 때 하이라이트 효과 */
.autocomplete-list li:hover {
    background-color: #444444 !important;
}