/* ========== color : 색 확인용, 추후 삭제 ========== */
:root {
    /* 버튼 컬러 */
    --mint: #109297;
    --lilac: #A59ACA;
    --violet: #8269DA;
    --black: #1C1C1E;
    --dark: #3A3A3C;
    --dark-gray: #7A7A7A;
    --gray: #C5C5C5;
    --gray02: #CECECE;
    --light-gray: #EBEBEB;
    --gradient: linear-gradient(90deg, #109297 0%, #A59ACA 100%);

    /* 기타 요소 컬러 */
    --red: #FF5659;

    --light-beige: #F4F1ED;
    --light-mint: #D2EBEC;
    --light-lilac: #E6E3F3;
    --light-sky: #DEEEFD;
    --sky: #3A9AF3;

    /* 만세력 컬러 */
    --color-green: #0CB962;
    --color-red: #F34029;
    --color-yellow: #FFEB15;
    --color-white: #FFFFFF;
    --color-black: #1C1C1E;

}


/* ========== 메인 ========== */
.today-info-section {
    display: flex;
    padding: 24px 0;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--gray02);
}

.today-info-section .info-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.today-info-section .datetime {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch;
}

.today-info-section .datetime p {
    color: var(--black);
    font-size: 24px;
    font-weight: 700;
    line-height: 38px;
}

.today-info-section .today-lunar {
    color: var(--dark-gray);
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}
.today-info-section .saju-group{
    width: 384px;
}
.saju-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.today-info-section .btn-gradient {
    width: 384px;
}

.today-info-section .txt-desc {
    color: var(--dark-gray);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.14px;
}


.main-cont-layout {
    padding: 40px 0;
    display: flex;
    align-items: flex-start;
    gap: 50px;
    width: 100%;
}

/* user-widget : 메인 메뉴 비주얼 버튼 */
.visual-menu-group{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: calc(100% - 400px);
}
.visual-menu-btn {
    position: relative;
    height: 200px;
    padding: 0px 24px 15px;
    align-items: flex-end;
    overflow: hidden;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
}
.visual-menu-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    z-index: 1;
}

.visual-menu-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    z-index: 2;
    opacity: 0;
}

/* 버튼 hover 배경색 변경 */
.visual-menu-btn:hover::after {
    opacity: 1;
}
.visual-menu-btn.visual01{
    background-image: url('../img/visual-menu01.png');
}
.visual-menu-btn.visual01::before{
    background: linear-gradient(180deg, rgba(245, 191, 42, 0.0) 50%, rgba(245, 97, 42, 0.60) 100%);
}
.visual-menu-btn.visual01::after{
    background: linear-gradient(180deg, rgba(245, 191, 42, 0.3) 0%, rgba(245, 97, 42, 0.70) 100%);
}
.visual-menu-btn.visual02{
    background-image: url('../img/visual-menu02.png');
}
.visual-menu-btn.visual02::before{
    background: linear-gradient(180deg, rgba(165, 154, 202, 0.00) 50%, rgba(111, 98, 230, 0.70) 100%);
}
.visual-menu-btn.visual02::after{
    background: linear-gradient(180deg, rgba(48, 255, 220, 0.2) 0%, rgba(111, 98, 230, 0.70) 100%);
}
.visual-menu-btn.visual03{
    background-image: url('../img/visual-menu03.png');
}
.visual-menu-btn.visual03::before{
    background: linear-gradient(180deg, rgba(140, 101, 22, 0.00) 50%, rgba(140, 101, 22, 0.70) 100%);
}
.visual-menu-btn.visual03::after{
    background: linear-gradient(180deg, rgba(255, 153, 0, 0.2) 0%, rgba(140, 101, 22, 0.70) 100%);
}
.visual-menu-btn.visual04{
    background-image: url('../img/visual-menu04.png');
}
.visual-menu-btn.visual04::before{
    background: linear-gradient(180deg, rgba(124, 94, 75, 0.00) 50%, rgba(107, 77, 58, 0.90) 100%);
}
.visual-menu-btn.visual04::after{
    background: linear-gradient(180deg, rgba(255, 237, 120, 0.3) 0%, rgba(107, 77, 58, 0.90) 100%);
}
.visual-menu-btn.visual05{
    background-image: url('../img/visual-menu05.png');
}
.visual-menu-btn.visual05::before{
    background: linear-gradient(180deg, rgba(57, 75, 109, 0.00) 50%, rgba(57, 75, 109, 0.90) 100%);
}
.visual-menu-btn.visual05::after{
    background: linear-gradient(180deg, rgba(109, 223, 255, 0.2) 0%, rgba(57, 75, 109, 0.90) 100%);
}
.visual-menu-btn.visual06{
    background-image: url('../img/visual-menu06.png');
}
.visual-menu-btn.visual06::before{
    background: linear-gradient(180deg, rgba(16, 146, 151, 0.00) 50%, rgba(16, 146, 151, 0.70) 100%);
}
.visual-menu-btn.visual06::after{
    background: linear-gradient(180deg, rgba(143, 255, 137, 0.2) 0%, rgba(16, 146, 151, 0.80) 100%);
}


/* 버튼 안 글자 animation */
.menu-desc {
    position: relative;
    width: 100%;
    height: 100%;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 10;
}
.menu-desc .title {
    font-size: 26px;
    font-weight: 400;
    line-height: 36px;
}

.menu-desc .subtitle {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    transition:
        opacity 0.3s ease-out,
        transform 0.3s ease-out,
        max-height 0.3s ease-out;
}
.visual-menu-btn:hover .subtitle {
    opacity: 1;
    max-height: 100px;
    transition:
        opacity 0.3s ease-in,
        transform 0.3s ease-in,
        max-height 0.3s ease-in;
}

/* 화살표 → 모양에서 + 모양으로 바뀌게 */
.visual-menu-btn .more {
    position: absolute;
    right: 0;
    bottom: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--color-white);
    cursor: pointer;
    transition: 0.2s ease-in-out;
}


/* 중심 선 공통 */
.visual-menu-btn .more .line01,
.visual-menu-btn .more .line02 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.2s ease-in-out;
}

/* 가로 선 - 기본 → 상태 유지 */
.visual-menu-btn .more .line01 {
    border-top: 2px solid var(--color-white);
    width: 50%;
}

/* 세로 선 - 오른쪽으로 밀어두고, 대각선 만들기 (→ 방향) */
.visual-menu-btn .more .line02 {
    height: 50%;
    transform: translate(135%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.visual-menu-btn .more .line02:before,
.visual-menu-btn .more .line02:after {
    content: "";
    display: block;
    height: 50%;
    border-right: 2px solid var(--color-white);
    transition: 0.2s ease-in-out;
    margin: -1px 0;
}

.visual-menu-btn .more .line02:before {
    transform: rotate(-45deg);
}

.visual-menu-btn .more .line02:after {
    transform: rotate(45deg);
}

/* 🔄 Hover 시 → 플러스로 바뀜 */
.visual-menu-btn:hover .line01 {
    width: 50%;
}

.visual-menu-btn:hover .line02 {
    transform: translate(-50%, -50%);
}
.visual-menu-btn:hover .line02:before,
.visual-menu-btn:hover .line02:after {
    transform: rotate(0deg);
}




/* user-widget : 공통 */
.user-widget{
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 350px;
    height: auto;
}


.user-widget .text-group{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.user-widget .text-group h4{
    color: var(--black);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px; 
}
.user-widget .text-group p{
    color: var(--dark-gray);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.user-widget .text-group span{
    font-weight: 700;
}


/* user-widget : 로그인 전 */
.user-before-btn-group{
    display: flex;
    align-items: center;
    gap: 8px;
}
.user-before-btn-group .btn-mint{
    width: calc(50% - 4px);
}

/* user-widget : 로그인 후 */
.user-widget .user-top{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.user-widget .user-top .my-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    color: var(--black);
    font-size: 18px;
    line-height: 32px;
}
.user-widget .user-top .my-info .name{
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-widget .user-top .my-info h3{
    font-size: 22px;
    font-weight: 700;
}
.user-widget .user-top .my-info span{
    width: 1px;
    height: 12px;
    background-color: var(--black);
}
.user-widget .user-top .btn-xs{
    min-width: 81px;
}
.user-widget .my-birth{
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--dark-gray);
}
.user-widget .today-saju-group{
    width: 100%;
}

.menu-link-group{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}


/* 나의 MBTI & 나의 라이프스타일 */
.my-progress-group{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding-bottom: 100px;
}
.my-progress-group .tit-head{
    display: flex;
    height: 60px;
    padding: 15px 12px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--black);
}
.my-progress-group .tit-head h3{
    color: var(--black);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}
.btn-more{
    display: flex;
    padding: 0px 15px;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    border: 1px solid var(--black);
    color: var(--black);
    background-color: var(--color-white);
}
.btn-more:hover{
    color: var(--color-white);
    background-color: var(--black);
}
.my-progress-group .my-mbti .result{
    color: var(--black);
    font-size: 20px;
    font-weight: 400;
    line-height: 52px;
    gap: 15px;
}
.my-progress-group .my-mbti .result span{
    font-size: 26px;
    font-weight: 700;
    line-height: 52px;
    color: var(--mint);
}
.my-progress-group .my-mbti,
.my-progress-group .my-life-style{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
}
.my-progress-group .my-mbti ul,
.my-progress-group .my-life-style ul{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 12px;
}
.my-progress-group .my-mbti ul li,
.my-progress-group .my-life-style ul li{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.my-progress-group .txt-label{
    color: var(--dark-gray);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px; 
    gap: 5px;
}
.my-progress-group .txt-label span{
    display: flex;
    width: 24px;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    color: var(--color-white);
    line-height: initial;
}
.my-mbti .txt-label .type-e{
    background-color: var(--mint);
}
.my-mbti .txt-label .type-i{
    background-color: var(--lilac);
}

.my-life-style .txt-label span{
    color: var(--dark-gray);
}

.progress {
    background-color: var(--light-gray);
    height: 20px;
    border-radius: 20px;
    overflow: hidden;
}

.gradient-bar {
    background: linear-gradient(to right, #109297, #a59aca);
    height: 100%;
}


/* 로그인 & 회원가입 */
.auth-layout{
    padding: 100px 0;
}
.auth-form-box{
    display: flex;
    flex-direction: column;
    gap: 70px;
}
.auth-form-box .form-head{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.auth-form-box .form-head h1{
    color: var(--black);
    font-size: 34px;
    font-weight: 700;
    line-height: 46px;
}
.auth-form-box .form-head p{
    color: var(--dark-gray);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

.auth-form-box .form-body{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.auth-form-box form{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.auth-form-box form .form-group{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-form-box .auth-links{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.auth-form-box .auth-links a{
    color: var(--dark-gray);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}
.auth-form-box .auth-links span{
    width: 1px;
    height: 15px;
    background-color: var(--dark-gray);
}

/* 소셜 버튼 */
.social-btn{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.social-btn .btn-google,
.social-btn .btn-naver,
.social-btn .btn-kakao,
.social-btn .btn-facebook{
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    padding: 0px 12px;
    flex-shrink: 0;
    border-radius: 12px;
    height: 54px;
    min-width: 150px;
    font-size: 18px;
    font-weight: 500;
}

.btn-google{
    background-color: var(--color-white);
    border: 1px solid var(--dark-gray);
    color: var(--black);
}
.btn-naver{
    background-color: #03C75A;
    color: var(--color-white);
}
.btn-kakao{
    background-color: #FAE300;
    color: #391B1B;
}
.btn-facebook{
    background-color: #0866FF;
    color: var(--color-white);
}

/* 비밀번호 찾기 */
.not-email-info-txt{
    color: var(--dark-gray);
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}


/* 포춘토리 이용 안내 */
.fortunetory-user-guide{
    display: flex;
    width: 100%;
    padding: 30px;
    flex-direction: column;
    gap: 40px;
    background-color: var(--light-beige);
    color: #7C5E4B;
}
.fortunetory-user-guide h2{
    padding-bottom: 10px;
    align-items: center;
    gap: 10px;
    
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    border-bottom: 1px solid #C8BBB2;
}
.fortunetory-user-guide .guide-list{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.fortunetory-user-guide .guide-list .list-tit{
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.36px;
    display: flex;
    padding: 3px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 40px;
    background: #E9E1DB;
}
.fortunetory-user-guide .guide-list ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.fortunetory-user-guide .guide-list li{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.36px;
}
.fortunetory-user-guide .guide-list li span{
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px; 
    letter-spacing: 0.32px;
    padding-top: 2px;
}
.fortunetory-user-guide .guide-list .red-txt{
    color: #FF5659;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; 
    letter-spacing: 0.32px;
}


/* 회원가입 */
.error-message{
    color: #FF5659;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.24px;
    padding-left: 12px;
}
.form-label-group{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.birthdate-selects{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.textarea-sm{
    min-height: 145px !important;
    flex: 1 0 0;
    color: #3a3a3a !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    padding: 12px;
}
.form-note{
    color: var(--dark-gray);
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
}




/* 나의 사주 운세 */

/* 나의 사주 운세 - 오늘의 운세 - 행운의 날 달력 */
.fortune-calendar-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    position: relative;
    width: 100%;
}
.fortune-calendar-group .icon-circle-prev,
.fortune-calendar-group .icon-circle-next{
    position: absolute;
    top: 15px;
    width: 24px;
    height: 24px;
}
.fortune-calendar-group .icon-circle-prev{
    left: 0;
}
.fortune-calendar-group .icon-circle-next{
    right: 0;
}

.fortune-calendar-box {
    background-color: var(--color-white);
    width: calc(50% - 10px);
}


.fortune-calendar-title{
    display: flex;
    padding: 15px 0px;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--dark);
}


.fortune-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--gray02);
}

.fortune-day-label {
    display: flex;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
}

.fortune-day-label.sun {
    color: #14C4BA;
}

.fortune-day-label.sat {
    color: #8269DA;
}

.fortune-calendar .day {
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    position: relative;
    display: flex;
    width: 100%;
    height: 70px;
    padding: 10px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.fortune-calendar .day.empty {
    background-color: #f3f3f3;
}

.fortune-day-icon {
    display: block;
    font-size: 13px;
    margin-top: 4px;
    line-height: 1;
}

/* 나의 사주 운세 - 신년운세 */
.acco-graph{
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}
.acco-graph img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 궁합 */

/* 궁합 - 궁합 */
.base-box{
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    gap: 12px;
    background-color: var(--light-beige);
    margin-bottom: 20px;
}
.base-box form{
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    flex: 1 1 auto;
}
.base-box form select{
    width: calc(100% - 130px);
}
.base-box form .btn-sm{
    min-width: 120px;
}
.tip-message{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.tip-message .title{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--dark);
}
.tip-message p{
    display: flex;
    padding-left: 22px;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #A3A3A3;
}

.name-gender-group{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.name-gender-group .form-label-group:nth-child(1) {
    grid-column: span 2;
}

.name-gender-group .form-label-group:nth-child(2) {
    grid-column: span 1;
}
.name-gender-group .radio-box-select{
    display: flex;
    height: 42px;
    align-items: center;
    gap: 20px;
}

.birthplace-selects{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 10px;
    align-self: stretch;
}


/* 궁합 - 궁합택일 */
/* 궁합 - 나 vs 너 누가 이길까 */
/* 궁합 - 상대방이 느끼는 나의매력 */





/* 사주로 질문하기 */
/* 사주로 질문하기 - 이날 어떨까? */
.base-box.select-date{
    flex-direction: row;
    align-items: center;
}
.form-datepicker{
    background-image: url('../img/svg/icon-calendar.svg');
    background-position: center right 12px;
    background-size: 16px;
    background-repeat: no-repeat;
    cursor: pointer;
    flex: 1 1 auto; /* 너비 자동 확장 */
    min-width: 0; /* 줄어들 때 깨지지 않게 */
}
.select-date button {
  flex-shrink: 0; /* 버튼은 줄어들지 않음 */
}

/* 사주로 질문하기 - 언제 될까요? */
.whenday-slide-wrap {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.slide-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* 스크롤바 숨기기 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.slide-btn-group::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.slide-btn-group button {
    display: flex;
    height: 42px;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 400;
    line-height: 42px;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 42px;
    transition: background-color 0.3s ease;
    background-color: var(--color-white);
    border: 1px solid var(--gray02);
}

.slide-btn-group button.active {
    background-color: var(--violet);
    color: var(--color-white);
}
.slide-btn-group button .icon{
    width: 20px;
    height: 20px;
    background-size: 100%;
}

.icon-circle-prev,
.icon-circle-next {
    cursor: pointer;
    display: flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* 사주로 질문하기 - 택일 */




/* 구인궁합 */


/* 사주입력 & 만세력 */
.bott-line{
    padding-bottom: 20px;
    border-bottom: 1px solid #DEDEDE;
}

.page-info-group{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.page-info-tit{
    display: flex;
    height: 60px;
    padding: 0px 12px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-bottom: 1px solid var(--gray02);
    color: var(--black);
    font-size: 20px;
    font-weight: 700;
    line-height: 60px;
    justify-content: space-between;
}

.base-box.my-saju{
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 0;
}
.base-box.my-saju .title{
    color: var(--dark);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    gap: 12px;
}
.base-box.my-saju .icon-twink{
    width: 18px;
    height: 18px;
}

/* 나의 대표 만세력 */
.my-saju-chart{
    display: grid;
    align-self: stretch;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
/* 내 만세력 대표 - 공통 */
.saju-column{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.saju-column .saju-block{
    align-self: stretch;
}
.saju-column .chart-info{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    align-self: stretch;
    color: var(--dark-gray);
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}
.saju-column .chart-info .label{
    display: flex;
    height: 28px;
    padding: 0px 8px;
    justify-content: center;
    align-items: center;
    background-color: var(--light-gray);
    color: var(--dark-gray);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    border-radius: 8px;
}

/* 대운 */
.my-saju-score{
    display: grid;
    align-self: stretch;
    align-items: center;
    grid-template-columns: 1fr 3fr;
    gap: 20px;
    
}

.my-saju-score ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.my-saju-score ul li{
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}
.my-saju-score ul li .tit{
    width: 80px;
    flex-shrink: 0;
    color: var(--black);
}
.my-saju-score ul li span{
    width: 1px;
    height: 14px;
    background-color: var(--gray02);
}
.my-saju-score ul li .txt{
    color: var(--dark);
}
.my-saju-score ul .gray-small .tit,
.my-saju-score ul .gray-small .txt{
    font-size: 14px;
    color: var(--dark-gray);
}
.my-saju-score ul .gray-small .tit{
    text-align: center;
}
.my-saju-score ul .gray-small .txt{
    padding-left: 10px;
}

/* 사주 슬라이드 */
.my-saju-slide{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    position: relative;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    gap: 10px;
}
.my-saju-slide .slide-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}
.my-saju-slide .slide-head h3{
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--dark);
}
.my-saju-slide .slide-group-inner {
    display: flex;
    transition: transform 0.3s ease;
    will-change: transform;
    width: max-content; /* 슬라이드 길이에 맞게 자동 */
}

.my-saju-slide .slide-group{
    overflow: hidden; 
    width: 100%;
    position: relative;
}
.my-saju-slide .slide-group .saju-column{
    padding: 5px; /* outline 잘리지 않게 유지 */
    box-sizing: border-box;
    border-radius: 10px;
    cursor: pointer;
    min-width: 0;
    /* width, margin-right은 JS에서 처리함 */
}

.my-saju-slide .slide-group .saju-column.active,
.my-saju-slide .slide-group .saju-column:hover{
    outline: 1px solid var(--mint);
    outline-offset: -1px;
}

.saju-column .age,
.saju-column .month{
    display: flex;
    height: 28px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 5px;
    background-color: var(--light-beige);
    color: var(--dark-gray);
    font-size: 16px;
    font-weight: 400;
}
.saju-column.active .age,
.saju-column.active .month,
.saju-column:hover .age,
.saju-column:hover .month{
    color: var(--mint);
}
.saju-column.active .chart-info,
.saju-column:hover .chart-info{
    color: var(--black);
}



/* 사주강의 */
.lecture-list{
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-top: 1px solid var(--gray02);
}
.lecture-list li{
    width: 100%;
}
.lecture-list li a{
    display: flex;
    padding: 20px 0px;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    border-bottom: 1px solid var(--gray02);
}
.lecture-list-thumb{
    height: 190px;
}
.lecture-list-thumb img{
    width: auto;
    height: 100%;
}
.lecture-list-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    flex: 1 0 0;
}
.lecture-list-info h2{
    color: var(--black);
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 5px;
}
.lecture-list-info .info-desc{
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.lecture-list-info .info-desc .tit,
.lecture-list-info .info-desc .txt{
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}
.lecture-list-info .info-desc .tit{
    display: flex;
    width: 50px;
    align-items: center;
    color: var(--black);
}
.lecture-list-info .info-desc .txt{
    color: var(--dark);
    padding: 0 10px;
}
.lecture-list-info .info-desc .bar{
    width: 1px;
    height: 14px;
    background-color: var(--gray02);
}
.lecture-list-info p{
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--dark-gray);
}

.lecture-detail-cont{
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.lecture-detail-cont .detail-title{
    display: flex;
    width: 100%;
    padding: 0px 12px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--gray02);
    color: var(--black);
    font-size: 24px;
    font-weight: 700;
    line-height: 60px;
}

.lecture-detail-top{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.lecture-detail-top .lecture-banner{
    width: 100%;
}
.lecture-detail-top .lecture-banner img{
    width: 100%;
    height: 100%;
    align-self: stretch;
    aspect-ratio: 2/1;
}
.lecture-detail-top .price-cont{
    display: flex;
    padding: 24px 0px 24px 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}
.lecture-detail-top .price-cont .price{
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: var(--black);
}
.lecture-detail-top .price-cont .price span{
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
}
.lecture-detail-top .price-cont .btn-md{
    width: 260px;
}
.lecture-detail-desc{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}
.lecture-detail-desc h3{
    display: flex;
    height: 60px;
    padding: 0px 12px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-bottom: 1px solid var(--gray02);
    color: var(--black);
    font-size: 20px;
    font-weight: 700;
    line-height: 60px;
    justify-content: space-between;
}
.lecture-detail-desc .desc{
    display: flex;
    padding: 30px 12px;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}
.lecture-detail-desc .instructor-img{
    width: 120px;
    height: 120px;
    border-radius: 100%;
    aspect-ratio: 1/1;
}
.lecture-detail-desc span{
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: var(--dark);
}
.lecture-detail-desc .btn-xs{
    min-width: 80px;
}




/* 마이페이지 */
.page-info-list{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.text-emphasis{
    color: var(--red);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
}

/* 마이페이지 > 프로필 */

/* 마이페이지 > 회원등급 & 결제 */
.membership-cont{
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.label-member{
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.member-label{
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: var(--violet);
    background-color: var(--light-lilac);
    display: flex;
    height: 26px;
    border-radius: 8px;
    padding: 0px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.form-pay-select{
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    flex: 1 1 auto;
}
.form-pay-select select{
    flex: 1 1 auto;
}

.page-info-tb{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
.page-info-tb .tit{
    font-size: 16px;
    font-weight: 700;
    line-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
}

.page-info-tb .tit .btn{
    display: inline-flex;
    width: auto;
    height: 30px;
    padding: 0px 15px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    color: var(--color-white);
}

/* 마이페이지 > 묻고 답하기 */
.page-info-tit .btn-xs{
    display: inline-flex;
    min-width: auto;
    padding: 0 15px;
}
.qna-box{
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 10px;
    border: 1px solid #dfdfdf;
}
.qna-box .name-top{
    display: flex;
    padding-bottom: 10px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    align-self: stretch;
    border-bottom: 1px solid #dfdfdf;
}
.qna-box .name-top .thumb-name{
    display: flex;
    align-items: center;
    gap: 10px;
}
.qna-box .name-top .thumb-name img{
    width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
}
.qna-box .name-top .thumb-name .name{
    color: var(--black);
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}
.qna-box .name-top .date{
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: var(--dark-gray);
    text-align: right;
}

.qna-text{
    display: flex;
    padding: 15px 0px;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--dark);
}

.qna-box .btn-bottom{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.qna-box .btn-bottom .btn-xs{
    display: inline-flex;
    min-width: auto;
    padding: 0 15px;
}

.qna-box .reply{
    background-color: var(--light-beige);
    display: flex;
    padding: 12px 15px;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    border-radius: 10px;
}

#submit-question p{
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 20px;
}

/* 마이페이지 > 비밀번호 변경 */


/* 결제 */
.payment-group{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}
.payment-box{
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid #dfdfdf;
    height: 320px;
    gap: 20px;
}

.payment-box .title{
    display: flex;
    padding-bottom: 10px;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-bottom: 1px solid #dfdfdf;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.payment-box ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    gap: 5px;
}
.payment-box ul li{
    display: flex;
    height: 24px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--dark);
}
.payment-box .price{
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    justify-content: flex-start;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--dark);
}
.payment-box .price span{
    width: 1px;
    height: 14px;
    background-color: var(--gray02);
}
.payment-box .btn-sm{
    width: 100%;
}


/* 전문가모드 */

/* 일정등록 달력 */
.calendar-schedule {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

.calendar-header-schedule {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 20px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.calendar-header-schedule .nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 1;
}
.calendar-header-schedule .nav .month-title{
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    color: var(--mint);
}
.calendar-header-schedule .btn-group{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.calendar-header-schedule .btn-xs{
    display: inline-flex;
    min-width: 70px !important;
    
}

.view-toggle{
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    outline: 1px solid var(--dark-gray);
    min-width: 210px;
    flex-shrink: 0;
}
.calendar-header-schedule .btn-tody{
    display: flex;
    flex-shrink: 0;
    width: 70px;
    height: 36px;
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 36px;
    background-color: var(--dark-gray);
    color: var(--color-white);
}
.view-toggle .btn-toggle{
    display: flex;
    width: 70px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 36px;
    background-color: var(--color-white);
    color: var(--dark-gray);
    outline: 1px solid var(--dark-gray);
}
.view-toggle .active {
    background-color: var(--dark-gray);
    color: var(--color-white);
}

.calendar-grid-schedule {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--gray02);
}

.calendar-grid-schedule .day-label{
    font-weight: 700;
    text-align: center;
    color: var(--black);
    line-height: 50px;
    border-bottom: 1px solid var(--gray02);
    font-size: 18px;
    display: flex;
    height: 50px;
    padding: 0px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.calendar-grid-schedule .day {
    display: flex;
    gap: 12px;
    padding: 12px 15px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--color-white);
    height: 150px;
    padding: 15px;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    cursor: pointer;
}
.calendar-grid-schedule .sun {
    color: var(--mint);
}
.calendar-grid-schedule .sat {
    color: var(--violet);
}


.calendar-grid-schedule .day:hover {
    background-color: var(--light-beige);
}

.calendar-grid-schedule .day.today {
    background-color: var(--light-beige);
    font-weight: bold;
}

.calendar-grid-schedule .day.empty {
    background-color: #f3f3f3;
}

#add-schedule .date{
    color: var(--dark);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 10px;
}



/* 기타 화면 - 포춘토리 소개 */
.page-description{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    width: 100%;
}
.page-description li,
.page-description p{
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: var(--black);
    width: 100%;
}

.page-description .list-style{
    margin-top: 10px;
}

.list-style{
    padding-left: 20px;
}
.list-style li{
    list-style: disc;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px; 
    color: var(--dark);
}


/* 기타 화면 - 공지사항 */
.accordion-header .text-truncate{
    font-weight: 400;
}
.accordion-header .right{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}
.accordion-header .date{
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    color: var(--dark-gray);
}


.accordion-body .list-style li{
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--dark);
    padding: 5px 0;
}


/* 기타 화면 - 개인정보 보호정책 */
/* 기타 화면 - 이용약관 */
.document-page{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    width: 100%;
}
.document-page h2{
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.document-page h3{
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: var(--mint);
}

.document-page ul{
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray02);
}
.document-page li{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
}

.document-page .page-description .list-style,
.document-page .page-description .list-style-sm{
    padding-bottom: 0;
    border-bottom: none;
    margin: 0;
}
.document-page .page-description .list-style li{
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: var(--black);
    list-style: decimal;
    display: list-item;
}
.document-page .page-description .list-style-sm{
    margin-top: 5px;
}
.document-page .page-description .list-style-sm li{
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: var(--dark);
    list-style: disc;
    display: list-item;
}




/* 기타 화면 - Contact Us */