:root {
    --saju-bg: #1a0533;
    --saju-gold: #f0c040;
    --saju-purple: #9b59b6;
    --saju-text: #e8d5f5;
}

body {
    background: linear-gradient(135deg, #0d0221 0%, #1a0533 50%, #0d0221 100%);
    min-height: 100vh;
}

body[data-theme="light"] {
    background: linear-gradient(135deg, #2d1b4e 0%, #4a2c7a 50%, #2d1b4e 100%);
}

.saju-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 16px 40px;
    min-height: 100vh;
    width: 100%;
}

.saju-container {
    background: rgba(30, 10, 60, 0.88) !important;
    border: 1px solid rgba(155, 89, 182, 0.4);
    box-shadow: 0 0 30px rgba(155, 89, 182, 0.3), 0 4px 20px rgba(0,0,0,0.5) !important;
    color: var(--saju-text) !important;
    max-width: 520px !important;
    width: 100%;
    backdrop-filter: blur(10px);
}

.saju-header { margin-bottom: 1.5rem; }
.saju-icon { font-size: 3rem; margin-bottom: 0.5rem; animation: float 3s ease-in-out infinite; }
.saju-container h1 { color: var(--saju-gold); font-size: 1.8rem; margin: 0.3rem 0; text-shadow: 0 0 20px rgba(240,192,64,0.5); }
.saju-container h2 { color: var(--saju-gold); text-shadow: 0 0 15px rgba(240,192,64,0.4); margin-bottom: 1rem; }
.saju-subtitle { color: #c9a8e8; font-style: italic; margin: 0.3rem 0 1rem; font-size: 0.9rem; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ===== 입력 필드 ===== */
.saju-inputs { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; text-align: left; }

.saju-field { display: flex; flex-direction: column; gap: 6px; }
.saju-field label { color: var(--saju-gold); font-size: 0.88rem; font-weight: 700; }

.saju-field input,
.saju-field select {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(155, 89, 182, 0.15);
    border: 1.5px solid rgba(155, 89, 182, 0.4);
    color: var(--saju-text);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.saju-field input:focus,
.saju-field select:focus {
    outline: none;
    border-color: var(--saju-gold);
    box-shadow: 0 0 10px rgba(240,192,64,0.3);
}

.saju-field select option { background: #2d1b4e; color: var(--saju-text); }

/* ===== 성별 버튼 ===== */
.gender-btns { display: flex; gap: 10px; }
.gender-btn {
    flex: 1;
    padding: 8px;
    border-radius: 20px;
    background: rgba(155, 89, 182, 0.15);
    border: 1.5px solid rgba(155, 89, 182, 0.4);
    color: #c9a8e8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s;
}
.gender-btn.active {
    background: rgba(240,192,64,0.2);
    border-color: var(--saju-gold);
    color: var(--saju-gold);
    box-shadow: 0 0 10px rgba(240,192,64,0.3);
}
.gender-btn:hover { border-color: var(--saju-gold); color: var(--saju-gold); }

/* ===== 버튼 ===== */
.saju-submit-btn {
    background: linear-gradient(135deg, #7b2d8b, #9b59b6);
    color: white;
    border: none;
    padding: 0.9rem 2.5rem;
    border-radius: 25px;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s;
    display: block;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(155,89,182,0.4);
}
.saju-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(155,89,182,0.6); }

.saju-back-btn {
    background: transparent;
    color: #c9a8e8;
    border: 1px solid rgba(155,89,182,0.5);
    padding: 0.6rem 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    display: block;
    margin: 10px auto 0;
    font-size: 0.9rem;
}
.saju-back-btn:hover { border-color: var(--saju-gold); color: var(--saju-gold); }

/* ===== 결과 영역 ===== */
.saju-result-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* ===== 만세력 SVG ===== */
.manseryeok-wrap { margin: 1rem 0; width: 100%; overflow-x: auto; }
.manseryeok-svg { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }

/* ===== 오행 차트 ===== */
.ohang-wrap { margin: 1rem 0; width: 100%; overflow-x: auto; }
.ohang-svg { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; border-radius: 10px; }

/* ===== 사주 풀이 ===== */
.saju-interpret { text-align: left; margin-top: 1rem; }

.interpret-section {
    background: rgba(155,89,182,0.12);
    border: 1px solid rgba(155,89,182,0.3);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 0.8rem;
    border-left: 3px solid rgba(240,192,64,0.6);
}

.interpret-title {
    color: var(--saju-gold);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    letter-spacing: 0.5px;
}

.interpret-section p {
    color: var(--saju-text);
    font-size: 0.85rem;
    line-height: 1.7;
    margin: 0.3rem 0;
}

.interpret-section strong { color: var(--saju-gold); }

.advice-section {
    border-left-color: #2ecc71;
    background: rgba(46,204,113,0.07);
}
.advice-section p { color: #a8e6cf; }

@media (max-width: 600px) {
    .saju-wrap { padding: 50px 10px 30px; }
    .saju-container { padding: 1.5rem 1rem !important; }
}