/* 🌌 우주 배경 */
.content{
    position:relative;
    overflow:hidden;

    background:linear-gradient(
        270deg,
        #001f5b,
        #000000,
        #8b0000,
        #001f5b
    );

    background-size:800% 800%;
    animation:galaxy-move 30s ease infinite;
	min-height:1300px;
}


.content::before{
    content:"";
    position:absolute;

    top:-50%;
    left:-50%;

    width:200%;
    height:200%;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,0.08),
            rgba(138,43,226,0.10),
            transparent 70%
        );

    filter:blur(4px);

    animation:galaxy-rotate 60s linear infinite;

    z-index:1;

    pointer-events:none;
}

.content > *{
    position:relative;
    z-index:2;
}

.content .stars{
    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;
}

.content .star{
    position:absolute;
    border-radius:50%;
    background:#fff;

    animation:star-twinkle infinite alternate;
}

@keyframes star-twinkle{
    0%{
        opacity:.1;
        transform:scale(.5);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

    100%{
        opacity:.1;
        transform:scale(.6);
    }
}
@keyframes galaxy-move{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}

@keyframes galaxy-rotate{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

.saju-wrap{
    max-width:1180px;
    margin:35px auto;
    padding:20px;
    color:#fff;
}

/* 상단 헤더 */
.saju-head{
    position:relative;
    overflow:hidden;
    background:rgba(10,12,35,.72);
    border:1px solid rgba(255,255,255,.16);
    border-radius:16px;
    padding:34px;
    margin-bottom:22px;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
    backdrop-filter:blur(14px);
}

.saju-head::after{
    position:absolute;
    right:32px;
    top:22px;
    font-size:64px;
    color:rgba(255,255,255,.25);
}

.saju-head h2{
    margin:0 0 10px;
    font-size:30px;
    letter-spacing:-1px;
    color:#fff;
}

.saju-head p{
    margin:0;
    color:#ddd9ff;
}

/* 입력 폼 */
.saju-form{
    display:flex;
    gap:12px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(14px);
    border-radius:16px;
    padding:18px;
    margin-bottom:26px;
    box-shadow:0 15px 45px rgba(0,0,0,.25);
}

.saju-form input,
.saju-form select{
    flex:1;
    height:48px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    padding:0 14px;
    background:rgba(255,255,255,.95);
    color:#222;
    font-size:14px;
}

.saju-form button{
    width:160px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,#8e7cff,#5f4be8);
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(108,92,231,.45);
}

.saju-form button:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 30px rgba(108,92,231,.6);
}

/* 전체 섹션 타이틀 */
.saju-result > h3{
    margin:30px 0 16px;
    padding:0 0 14px;
    font-size:22px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.14);
}

.saju-result > h3:nth-of-type(1)::before{
    content:"🔮 ";
}

.saju-result > h3:nth-of-type(2)::before{
    content:"🌿 ";
}

/* 그리드 */
.pillar-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:24px;
}

.element-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
    margin-bottom:24px;
}

/* 사주팔자 / 오행 카드 */
.pillar-card,
.element-card{
    position:relative;
    overflow:hidden;
    padding:22px;
    border-radius:20px;
    background:linear-gradient(
        145deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.04)
    );
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 14px 35px rgba(0,0,0,.28);
    backdrop-filter:blur(12px);
}

.pillar-card::before,
.element-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
        circle at top right,
        rgba(142,124,255,.25),
        transparent 45%
    );
    pointer-events:none;
}

.pillar-card > *,
.element-card > *{
    position:relative;
    z-index:2;
}

.pillar-card strong,
.element-card strong{
    display:inline-block;
    padding:6px 12px;
    border-radius:20px;
    background:rgba(255,255,255,.1);
    color:#ded9ff;
    font-size:13px;
}

.pillar-card div,
.element-card span{
    display:block;
    margin:14px 0 8px;
    font-size:34px;
    font-weight:800;
    color:#fff;
    text-shadow:0 0 18px rgba(142,124,255,.75);
}

.pillar-card span{
    display:block;
    color:#f1efff;
    font-size:13px;
    line-height:1.6;
}

.element-card{
    text-align:center;
}

.element-card span{
    font-size:22px;
}

/* 공통 큰 카드 */
.analysis-box,

.daewoon-box{
    position:relative;
    padding:26px;
    margin-top:24px;
    border-radius:20px;
    background:rgba(10,12,35,.72);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 45px rgba(0,0,0,.35);
    backdrop-filter:blur(14px);
}

/* 큰 카드 타이틀 */
.analysis-box h3,

.daewoon-box h3{
    margin:-6px 0 18px;
    padding:0 0 14px;
    font-size:22px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.14);
}

.analysis-box h3::before{
    content:"🧭 ";
}

.daewoon-box h3::before{
    content:"✨ ";
}

/* 본문 */
.analysis-box p,

.daewoon-box p{
    margin:8px 0;
    color:#e7e4ff;
    line-height:1.7;
}

.analysis-box strong,

.daewoon-box strong{
    color:#fff;
}

/* 용신 방향 */
.analysis-box p:nth-of-type(1),
.analysis-box p:nth-of-type(2){
    display:inline-block;
    margin:0 8px 12px 0;
    padding:10px 16px;
    border-radius:30px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.12);
}


/* =========================
   오늘의 내 운세
========================= */
.today-box{
    position:relative;
    padding:26px;
    margin-top:24px;
    border-radius:20px;
    background:rgba(10,12,35,.72);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 45px rgba(0,0,0,.35);
    backdrop-filter:blur(14px);
}

.today-box h3{
    margin:-6px 0 18px;
    padding:0 0 14px;
    font-size:22px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.14);
}

.today-box h3::before{
    content:"🌙 ";
}

/* 오늘 일진 정보 */
.today-pillar{
    display:inline-flex;
    align-items:center;
    gap:8px;

    min-width:130px;
    margin:0 0 16px;
    padding:10px 18px;

    border-radius:50px;

    background:linear-gradient(135deg,#00cec9,#0984e3);
    color:#fff;

    font-size:15px;
    font-weight:700;

    box-shadow:0 0 25px rgba(0,206,201,.35);
}

.today-pillar::before{
    content:"🌙";
}

.today-pillar strong{
    color:#fff;
    font-size:18px;
}

/* 태그 칩 */
.today-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 16px;
}

.today-tags span{
    padding:8px 14px;
    border-radius:50px;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.13);

    color:#9ffcff;
    font-size:13px;
    font-weight:700;
}

/* 오늘 요약 / 관계 설명 */
.today-summary,
.today-relation{
    position:relative;
    overflow:hidden;

    margin:0 0 12px;
    padding:16px 18px;

    border-radius:18px;

    background:linear-gradient(
        145deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.04)
    );

    border:1px solid rgba(255,255,255,.13);

    color:#f5f4ff;
    line-height:1.8;
    font-size:14px;

    box-shadow:0 10px 25px rgba(0,0,0,.22);
}

.today-summary::before,
.today-relation::before{
    position:absolute;
    right:18px;
    top:12px;

    font-size:28px;
    opacity:.18;
}

.today-summary::before{
    content:"✨";
}

.today-relation::before{
    content:"🔗";
}

.today-summary{
    margin-top:4px;
}

.today-relation{
    margin-bottom:20px;
}

/* 모바일 */
@media(max-width:768px){
    .today-pillar{
        width:100%;
        justify-content:center;
    }

    .today-tags span{
        flex:1;
        text-align:center;
    }

    .today-summary,
    .today-relation{
        padding:15px;
        font-size:13px;
    }
}
/* 상세 카드 */
.today-detail-list{
    list-style:none;
    padding:0;
    margin:20px 0 0;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.today-detail-list li{
    position:relative;
    overflow:hidden;

    padding:18px;
    border-radius:18px;

    background:linear-gradient(
        145deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.04)
    );

    border:1px solid rgba(255,255,255,.13);

    box-shadow:
        0 10px 25px rgba(0,0,0,.25);
}

.today-detail-list li::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(142,124,255,.22),
            transparent 45%
        );

    pointer-events:none;
}

.today-detail-list li strong{
    position:relative;
    z-index:2;
    display:block;
    margin-bottom:10px;
    color:#bcb4ff;
    font-size:15px;
    font-weight:700;
}

.today-detail-list li{
    color:#f5f4ff;
    line-height:1.7;
}

/* 모바일 */
@media(max-width:768px){

    .today-box{
        padding:22px;
    }

    .today-score{
        width:100%;
        margin-bottom:18px;
    }

    .today-detail-list{
        grid-template-columns:1fr;
    }
}


/* 대운 상단 */
.daewoon-box > p{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0 8px 18px 0;
    padding:10px 16px;
    border-radius:30px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.12);
}

/* 대운 카드 */
.daewoon-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:18px;
}

.daewoon-card{
    position:relative;
    overflow:hidden;
    min-height:170px;
    padding:18px;
    border-radius:20px;
    background:linear-gradient(
        145deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.04)
    );
    border:1px solid rgba(255,255,255,.13);
}

.daewoon-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
        circle at top right,
        rgba(142,124,255,.28),
        transparent 45%
    );
    pointer-events:none;
}

.daewoon-card > *{
    position:relative;
    z-index:2;
}

.daewoon-card strong{
    display:inline-block;
    padding:6px 12px;
    border-radius:20px;
    background:rgba(255,255,255,.1);
    color:#ded9ff;
    font-size:13px;
}

.daewoon-card .ganji{
    margin:14px 0 8px;
    font-size:34px;
    font-weight:800;
    color:#fff;
    text-shadow:0 0 18px rgba(142,124,255,.75);
}

.daewoon-card p{
    margin:0 0 10px;
    color:#cfc9ff;
    font-size:13px;
}

.daewoon-card span{
    display:block;
    color:#f1efff;
    font-size:13px;
    line-height:1.6;
}

/* 모바일 */
@media(max-width:768px){
    .saju-wrap{
        margin:20px auto;
        padding:14px;
    }

    .saju-head{
        padding:24px;
    }

   @media(max-width:768px){

    .saju-form{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        padding:14px;
        border-radius:14px;
    }

    .saju-form input[type="date"],
    .saju-form select{
        width:100%;
        height:50px;
        min-height:50px;
        font-size:15px;
        border-radius:12px;
        padding:0 14px;
        background:#fff;
        color:#222;
        box-sizing:border-box;
    }

    .saju-form select{
        appearance:auto;
        -webkit-appearance:auto;
    }

    .saju-form-btns{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        margin-top:4px;
    }

    .saju-form-btns button,
    .saju-form-btns a{
        width:100%;
        height:50px;
        font-size:15px;
        border-radius:12px;
    }
}

    .pillar-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .element-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .today-detail-list,
    .daewoon-grid{
        grid-template-columns:1fr;
    }

    .analysis-box,
    .today-box,
    .daewoon-box{
        padding:22px;
    }

    .analysis-box p:nth-of-type(1),
    .analysis-box p:nth-of-type(2),
    .daewoon-box > p{
        display:block;
    }
}

.saju-form-btns{
    display:flex;
    gap:10px;
}

.saju-form-btns button,
.saju-form-btns a{
    width:160px;
    height:48px;
    border:0;
    border-radius:12px;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
}

.view-btn{
    background:linear-gradient(135deg,#8e7cff,#5f4be8);
}

.save-btn{
    background:linear-gradient(135deg,#00b894,#00a382);
}

@media(max-width:768px){
    .saju-form-btns{
        flex-direction:column;
    }

    .saju-form-btns button,
    .saju-form-btns a{
        width:100%;
    }
}

.business-box{
    margin-top:20px;
    padding:20px;
    border-radius:18px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
}

.business-box h4{
    margin:0 0 12px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-size:18px;
}

.business-summary{
    margin:0 0 16px;
    color:#e7e4ff;
    line-height:1.7;
}

.business-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.business-card{
    padding:16px;
    border-radius:16px;
    background:linear-gradient(
        145deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.04)
    );
    border:1px solid rgba(255,255,255,.12);
}

.business-card strong{
    display:block;
    margin-bottom:8px;
    color:#bcb4ff;
    font-size:15px;
}

.business-card span{
    display:block;
    color:#fff;
    font-size:13px;
    line-height:1.6;
}

@media(max-width:768px){
    .business-grid{
        grid-template-columns:1fr;
    }
}
/* =========================
   올해 운세 (세운)
========================= */
.sewoon-box{
    position:relative;
    padding:26px;
    margin-top:24px;
    border-radius:20px;
    background:rgba(10,12,35,.72);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 45px rgba(0,0,0,.35);
    backdrop-filter:blur(14px);
}

.sewoon-box h3{
    margin:-6px 0 18px;
    padding:0 0 14px;
    font-size:22px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.14);
}

.sewoon-box h3 i{
    margin-right:8px;
    color:#ffd369;
}

/* 총운 점수 */
.year-score{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:120px;
    margin-bottom:16px;
    padding:10px 22px;
    border-radius:50px;

    background:linear-gradient(
        135deg,
        #ffb347,
        #ff7f50
    );

    color:#fff;
    font-size:18px;
    font-weight:700;

    box-shadow:
        0 0 25px rgba(255,179,71,.45);
}

/* 총평 */
.sewoon-box > p{
    margin:0 0 20px;
    color:#e7e4ff;
    line-height:1.8;
}

/* 카드 그리드 */
.sewoon-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

/* 카드 */
.sewoon-card{
    position:relative;
    overflow:hidden;

    padding:18px;
    border-radius:18px;

    background:linear-gradient(
        145deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.04)
    );

    border:1px solid rgba(255,255,255,.13);

    box-shadow:
        0 10px 25px rgba(0,0,0,.25);
}

.sewoon-card::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,211,105,.18),
            transparent 45%
        );

    pointer-events:none;
}

.sewoon-card > *{
    position:relative;
    z-index:2;
}

.sewoon-card strong{
    display:block;
    margin-bottom:10px;

    color:#ffd369;
    font-size:15px;
    font-weight:700;
}

.sewoon-card span{
    display:block;

    color:#f5f4ff;
    font-size:13px;
    line-height:1.8;
}

/* 모바일 */
@media(max-width:768px){

    .sewoon-box{
        padding:22px;
    }

    .year-score{
        width:100%;
        margin-bottom:18px;
    }

    .sewoon-grid{
        grid-template-columns:1fr;
    }

    .sewoon-card{
        padding:16px;
    }
}

.month-box{
    position:relative;
    padding:26px;
    margin-top:24px;
    border-radius:20px;
    background:rgba(10,12,35,.72);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 45px rgba(0,0,0,.35);
    backdrop-filter:blur(14px);
}

.month-box h3{
    margin:-6px 0 18px;
    padding:0 0 14px;
    font-size:22px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.14);
}

.month-score{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:130px;
    margin-bottom:16px;
    padding:10px 22px;
    border-radius:50px;
    background:linear-gradient(135deg,#00cec9,#0984e3);
    color:#fff;
    font-size:18px;
    font-weight:700;
    box-shadow:0 0 25px rgba(0,206,201,.45);
}

.month-summary{
    margin:0 0 20px;
    color:#e7e4ff;
    line-height:1.8;
}

.month-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.month-card{
    position:relative;
    overflow:hidden;
    padding:18px;
    border-radius:18px;
    background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.month-card strong{
    display:block;
    margin-bottom:10px;
    color:#9ffcff;
    font-size:15px;
}

.month-card span{
    display:block;
    color:#f5f4ff;
    font-size:13px;
    line-height:1.8;
}

.month-advice{
    grid-column:1 / -1;
}

@media(max-width:768px){
    .month-box{
        padding:22px;
    }

    .month-score{
        width:100%;
    }

    .month-grid{
        grid-template-columns:1fr;
    }

    .month-advice{
        grid-column:auto;
    }
}

.pillar-desc{
    margin-top:14px;
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#f5f4ff;
    font-size:13px;
    line-height:1.7;
    position:relative;
}

.pillar-desc::before{
    margin-right:6px;
}

.pillar-desc::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:14px;
    background:linear-gradient(
        145deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.01)
    );

    pointer-events:none;
}


.element-detail{
    position:relative;
    overflow:hidden;
    padding:14px 16px;
    border-radius:10px;
    background:linear-gradient(
        145deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.04)
    );

    border:1px solid rgba(255,255,255,.14);

    box-shadow:
        0 8px 20px rgba(0,0,0,.25);

    color:#f5f4ff;
    font-size:13px;

}

.element-detail::before{

    display:inline-block;
    margin-bottom:10px;
    padding:4px 10px;
    border-radius:10px;
    background:rgba(142,124,255,.22);
    color:#dcd7ff;
    font-size:11px;
    font-weight:700;
}

.element-detail::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:10px;
    background:radial-gradient(
        circle at top right,
        rgba(142,124,255,.18),
        transparent 45%
    );

    pointer-events:none;
}



.daewoon-detail{
    margin-top:12px;
}

.daewoon-summary{
    margin:0 0 12px;
    padding:12px;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#f5f4ff;
    font-size:13px;
    line-height:1.7;
}

.daewoon-detail ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:8px;
}

.daewoon-detail li{
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    color:#f5f4ff;
    font-size:12px;
    line-height:1.6;
}

.daewoon-detail li strong{
    display:block;
    margin-bottom:4px;
    color:#ffd369;
    font-size:12px;
}