.sub__visual__wr{
    background: #fff;
    padding-top: 60px;
}

.sub__contents__wr{
    display: flex;
    position: relative;
    flex-direction: column;
}

.sub__content{
    margin-top: 20px;
}
/* sub 공통 */

/* Intro start */
#sub__intro__visual__wr{
    position: relative;
    padding-top: 0;
    background: url('../assets/img/intro_bg.png') center center / cover no-repeat;
    overflow: hidden;
}

#sub__intro__visual__wr::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 170px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

#sub__intro__visual__wr .sub__contents__wr,
#sub__intro__visual__wr .inner__full__mobile{
    position: relative;
    z-index: 2;
}

#sub__intro__visual__wr .inner__full__mobile{
    display: flex;
    height: 100dvh;
    flex-direction: column;
    padding: 0;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

#sub__intro__visual__wr .sub__title__wr{
    padding: 0;
}

.sub__intro__logo{
    flex-shrink: 0;
    padding: 18px 20px;
}

.sub__intro__logo__text{
    display: block;
    color: #191919;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
}

.sub__intro__wr{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 80px;
    margin-bottom: 40px;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (max-width: 767px){
    .sub__intro__wr{
        margin-top: min(80px, 6dvh);
        margin-bottom: min(40px, 3dvh);
        gap: min(16px, 1dvh);
    }
}

.sub__intro__title{
    margin: 0;
    color: #136CED;
    text-align: center;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: -0.8px;
    font-weight: 700;
}

.sub__intro__text{
    margin: 0;
    color: #191919;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
}

.sub__intro__wr img{
    display: block;
    width: min(286px, 44dvh);
    max-width: 100%;
    height: auto;
    margin-top: min(20px, 1dvh);
}

.sub__intro__button{
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

#sub__intro__visual__wr .sub__intro__button .sub__button{
    width: 100%;
    height: 54px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

.sub__intro__login{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 0;
    color: #5A5F66;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.sub__intro__login a{
    color: #136CED;
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.sub__fixed__bottom.privacy{
    display: flex;
    justify-content: center;
    pointer-events: all;
    flex-direction: column;
    align-items: center;
}

.sub__privacy__link{
    margin: 0 auto;
    color: #999;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.3px;
    text-decoration: underline;
    text-underline-offset: 4px;
    pointer-events: auto;
}

.sub__fixed__bottom:has(.sub__privacy__link){
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
/* Intro end */

/* LOGIN start */
.sub__login__title__wr{ 
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.6px;
    margin-top : 40px;
    margin-bottom: 12px;
}

.sub__login__title__wr span{
    color: var(--color__main);
}

.sub__title__01{
    display: block;
    color: #505050;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.3px;
    line-height: 1.5;
    margin-bottom: 40px;
}
/* LOGIN end */

/* Staff point start */
#sub__staffpoint__visual__wr{
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 60px);
    box-sizing: border-box;
}

/* 로그인과 동일: 타이틀 아래 입력 필드 여백 */
#staffpoint__form .sub__login__title__wr{
    margin-bottom: 40px;
}

.staffpoint__step{
    display: none;
}

.staffpoint__step.is-active{
    display: block;
}

#staffpoint__code{
    font-size: 16px;
}

#staffpoint__success.is-active,
#staffpoint__already.is-active,
#staffpoint__invalid.is-active{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.staffpoint__already__text{
    margin: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.6px;
    color: #191919;
    word-break: keep-all;
}

.staffpoint__result__accent{
    color: #F32538;
}
/* Staff point end */

/* usagehistory start */
.sub__usagehistory{
    display: none;
}

.sub__usagehistory.is-active{
    display: block;
}

.sub__usagehistory__wr{
    display: flex;
    flex-direction: column;
    margin-top: 28px;
}

.sub__usagehistory__title__wr{
    display: flex;
    position: relative;
    flex-direction: column;
    color: #FFF;
    padding: 24px 24px 0 24px;
    border-radius: 10px;
    background: linear-gradient(121deg, #0068FE 8.7%, #4158DA 91.3%), linear-gradient(121deg, #322BF5 8.7%, #4232D0 91.3%);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
}

.sub__usagehistory__title__wr::after{
    content: '';
    position: absolute;
    top: -16px;
    right: -10px;
    width: 200px;
    height: 200px;
    background: url('../assets/img/sub_usagehistory_icon.svg') center center / cover no-repeat;
}


.sub__usagehistory__title{
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 4px;
}

.sub__usagehistory__point{
    position: relative;
    width: fit-content;
    font-size: 42px;
    font-weight: 900;
    line-height: 52px;
    letter-spacing: -2.1px;
    margin-bottom: 60px;
}

.sub__usagehistory__point b{
    position: absolute;
    right: -14px;
    bottom: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.sub__usagehistory__bottom{
    display: flex;
    border-top: 1px solid rgba(241, 241, 241, 0.13);
    padding: 12px 0;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: inherit;
    text-decoration: none;
}

.sub__usagehistory__bottom::after{
    content: '';
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: url('../assets/svg/chevron-left02.svg') center center / cover no-repeat;
}

.sub__mypoint__wr{
    margin-top: 8px;
    display: flex;
    gap: 18px;
    padding: 15px 16px;
    border-radius: 10px;
    opacity: 0.8;
    background: #FFF;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.sub__mypoint__wr img{
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.sub__mypoint__text__box{
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    color: var(--color__text02);
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: -0.35px;
}

.sub__mypoint__text{
    color: var(--color__basic);
    font-size: 12px;
    font-weight: 600;
}

.sub__mypoint__wr::after{
    content: '';
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: url('../assets/svg/chevron-left03.svg') center center / cover no-repeat;
}

.sub__pointlist__filter{
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding: 24px 0;
    border-bottom: 1px solid #f1f1f1;
}

.sub__pointlist__filter__button{
    display: flex;
    padding: 10px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    background: #F1F1F1;
    border: none;
    cursor: pointer;
    font: inherit;

    color: var(--color__text02);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
}

.sub__pointlist__filter__label{
    white-space: nowrap;
}

.sub__pointlist__filter__button div{
    width: 16px;
    height: 16px;
    background: url('../assets/svg/chevron-down02.svg') center center / cover no-repeat;
}

.sub__pointlist__wr{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.sub__pointlist__box{
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.sub__pointlist__right__wr{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sub__pointlist__right{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.sub__pointlist__box>span{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.21px;
}

.sub__pointlist__right>div{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.sub__point__01{
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

.sub__point__02{
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.3px;
}

.sub__point__time__box{
    color: #999;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.2px;
}

.sub__point__box.is-reward .sub__point__01{
    font-weight: 500;
}

.sub__point__box.is-reward .sub__point__02{
    color: var(--color__main);
}

.sub__pointempty__box{
    margin-top: 50px;
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.sub__pointempty__text{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    color: var(--color__text02);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.sub__pointempty__text span{
    color: var(--color__basic);
    font-size: 16px;
    letter-spacing: -0.4px;
    font-weight: 600;
}

.sub__pointempty__box a{
    display: flex;
    align-items: center;
    height: 54px;
    padding: 0 30px;
    border-radius: 10px;
    background: #E8F1FE;

    color: var(--color__main);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}
/* usagehistorye end */

/* TodayMission start */
#sub__todaymission__visual__wr{
    background: url('../assets/img/main_bg.png') center center / cover no-repeat;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 미션 「다음」: 전 타입 O/X와 동일 — 하단 fixed */
.mission__question .mission__next__btn.sub__fixed__btn{
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 40px) !important;
    margin: 0 !important;
    z-index: 30;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mission__question:not(.is-active) .mission__next__btn,
.mission__question .mission__next__btn:disabled{
    pointer-events: none !important;
}

.mission__question.is-active .mission__next__btn:not(:disabled){
    pointer-events: auto !important;
}

.mission__question.is-active .inner__full__mobile{
    padding-bottom: calc(54px + 80px + env(safe-area-inset-bottom, 0px));
}

#mission__feedback__next,
#mission__result__modal .mission__feedback__btn{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
}

.mission__progress{
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: 4px;
    background: #F1F1F1;
    z-index: 998;
}

.mission__progress__bar{
    height: 100%;
    width: 0;
    background: #136CED;
    transition: width 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}

.mission__progress.is-hidden{
    display: none;
}

#sub__todaymission__visual__wr .inner__full__mobile .sub__title__wr{
    margin-bottom: 10px;
}

.todaymission__content{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
    gap: 24px;
}

.sub__todaymission__number{
    padding: 4px 12px;
    border-radius: 30px;
    background: #DAE9FD;
    width: fit-content;

    color: var(--color__main);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.24px;
}

.sub__todaymission__contents__wr{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sub__todaymission__question{
    text-align: center;
    width: calc(100% - 44px);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.6px;
    text-transform: capitalize;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.sub__todaymission__btn__wr{
    margin-top: 110px;
    display: flex;
    gap: 27px;
    justify-content: center;
    width: 100%;
}

.sub__todaymission__btn__wr button{
    width: 116px;
    height: 116px;
    border-radius: 10px;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    border: 2px solid transparent;
    background-color: #F1F1F1;
    box-sizing: border-box;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;
}

.sub__todaymission__btn__wr button:active{
    transform: scale(0.96);
}

.sub__todaymission__btn__wr button img{
    width: 48px;
    height: 48px;
    object-fit: contain;
    pointer-events: none;
    opacity: 0.45;
    filter: grayscale(1);
    transform: scale(1);
    transition:
        opacity 0.25s ease,
        filter 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sub__todaymission__btn__01.is-selected{
    background-color: #FFF;
    border-color: var(--color__main);
    box-shadow: 0 4px 16px rgba(19, 108, 237, 0.14);
}

.sub__todaymission__btn__01.is-selected img{
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(36%) sepia(99%) saturate(1352%) hue-rotate(196deg) brightness(97%) contrast(101%);
    transform: scale(1.08);
}

.sub__todaymission__btn__02.is-selected{
    background-color: #FFF;
    border-color: #F32538;
    box-shadow: 0 4px 16px rgba(243, 37, 56, 0.14);
}

.sub__todaymission__btn__02.is-selected img{
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(24%) sepia(93%) saturate(7471%) hue-rotate(350deg) brightness(95%) contrast(95%);
    transform: scale(1.08);
}

.sub__todaymission__btn__01,
.sub__todaymission__btn__02{
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub__todaymission__next__btn:disabled{
    opacity: 0.35;
    cursor: not-allowed;
}

/* 선택형/주관식: 문제(뱃지+타이틀)는 O/X와 동일(중앙), 답 영역만 설문형 */
.mission__question[data-mission-type="choice"] .todaymission__content,
.mission__question[data-mission-type="multi"] .todaymission__content,
.mission__question[data-mission-type="subjective"] .todaymission__content{
    align-items: center;
}

.mission__question[data-mission-type="choice"] .sub__todaymission__number,
.mission__question[data-mission-type="multi"] .sub__todaymission__number,
.mission__question[data-mission-type="subjective"] .sub__todaymission__number{
    margin-left: auto;
    margin-right: auto;
}

.mission__question[data-mission-type="multi"] .duplicate__box{
    margin: 0 auto;
    justify-content: center;
    width: fit-content;
}

.todaymission__text{
    font-size: 48px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color__main);
    letter-spacing: -1.2px;
    margin-top: 24px;
    text-align: center;
}

.mission__select__list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 40px;
    align-self: stretch;
}

.mission__select__item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    background: #F1F1F1;
    border: 2px solid #F1F1F1;
    box-sizing: border-box;
    cursor: pointer;
}

.mission__select__item span{
    color: #505050;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.35px;
    text-align: left;
    word-break: keep-all;
}

.mission__select__item .check{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: url("../assets/svg/checked02.svg") no-repeat center / contain;
}

.mission__select__item.is-selected{
    border: 2px solid #136CED;
    background: #FFF;
}

.mission__select__item.is-selected .check{
    background: url("../assets/svg/checked03.svg") no-repeat center / contain;
}

.mission__subjective__wr{
    width: 100%;
    margin-top: 40px;
    align-self: stretch;
}

.mission__subjective__field{
    width: 100%;
    margin-bottom: 0;
}

/* 미션 정오답 바텀시트 — 모달이 실제로 열린 경우에만 뒤 화면 잠금 */
html.is-mission-feedback-open:has(#mission__result__modal.is-active),
body.is-mission-feedback-open:has(#mission__result__modal.is-active){
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.is-mission-feedback-open:has(#mission__result__modal.is-active) #sub__todaymission__visual__wr{
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.is-mission-feedback-open:has(#mission__result__modal.is-active) #sub__todaymission__visual__wr .mission__question,
body.is-mission-feedback-open:has(#mission__result__modal.is-active) #sub__todaymission__visual__wr .todaymission__content,
body.is-mission-feedback-open:has(#mission__result__modal.is-active) #sub__todaymission__visual__wr .inner__full__mobile{
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
    pointer-events: none !important;
}

body.is-mission-feedback-open:has(#mission__result__modal.is-active) #mission__dim,
body.is-mission-feedback-open:has(#mission__result__modal.is-active) #mission__result__modal{
    pointer-events: auto !important;
    touch-action: manipulation;
}

body.is-mission-feedback-open:has(#mission__result__modal.is-active) #mission__result__modal *{
    pointer-events: auto;
}

.mission__dim.is-active{
    background: rgba(0, 0, 0, 0.5);
}

#mission__result__modal{
    padding: 0 0 40px;
}

#mission__result__modal .modal__handle{
    margin-bottom: 36px;
    padding: 16px 0;
}

#mission__result__modal .modal__wr{
    padding: 0 20px;
}

.mission__feedback{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    width: 100%;
}

.mission__feedback__top{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.mission__feedback__head{
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.mission__feedback__icon{
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission__feedback__icon img{
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.mission__feedback__title__box{
    flex: 1;
    min-width: 0;
}

.mission__feedback__title{
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.4px;
    word-break: keep-all;
}

.mission__feedback.is-success .mission__feedback__title{
    color: #136CED;
}

.mission__feedback.is-fail .mission__feedback__title{
    color: #B42318;
}

.mission__feedback__subtitle{
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: #191919;
    word-break: keep-all;
}

.mission__feedback__choice{
    margin: 0;
    display: block;
    width:  fit-content;
    padding: 8px 12px;
    border-radius: 12px;
    background: #F6F7F9;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.18px;
    color: #5A5F66;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.mission__feedback__explain{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 127px;
    padding: 24px 16px 16px;
    border-radius: 10px;
    background: #F6F7F9;
    box-sizing: border-box;
}

.mission__feedback__explain__label{
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    font-family: 'Abel', 'pretendard', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.25px;
    color: rgba(90, 95, 102, 0.4);
}

.mission__feedback__explain__text{
    margin: 0;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.35px;
    color: #191919;
    word-break: keep-all;
}

#mission__result__modal .mission__feedback__btn{
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
}

/* 미션 결과 관련 스타일 */
.todaymission__result__content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    width: 100%;
    gap: 40px;
    margin-top: 0;
}

.sub__todaymission__result__hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.sub__todaymission__result__img{
    display: block;
    width: 215px;
    height: 190px;
    object-fit: contain;
}

#mission__result .inner__full__mobile,
#mission__complete .inner__full__mobile,
#survey__complete .inner__full__mobile,
#survey__already .inner__full__mobile,
#staffpoint__success .inner__full__mobile,
#staffpoint__already .inner__full__mobile,
#staffpoint__invalid .inner__full__mobile {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

#mission__result .sub__todaymission__contents__wr{
    gap: 8px;
}

.sub__todaymission__result01{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.6px;
    text-align: center;
}

.sub__todaymission__result02{
    color: #5A5F66;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -0.4px;
    text-align: center;
}

.sub__todaymission__result02 .result__accent{
    color: var(--color__main);
    font-weight: 600;
}

.sub__todaymission__result03{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 24px 16px;
    border-radius: 10px;
    background: #F6F7F9;
    margin-top: 0;
    box-sizing: border-box;

    color: #5A5F66;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.4px;
}

.points__earned{
    color: var(--color__main);
    font-size: 24px;
    letter-spacing: -0.6px;
}

/* 미션 완료 화면 관련 스타일 */
.sub__complete__content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    width: 100%;
    margin-top: 0;
}

.sub__complete__box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

.sub__complete__icon{
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 100px;
    border: 1px solid #D7DBE0;
    background: #FFF;
}

.sub__complete__check{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color__main) url(../assets/svg/checked01.svg) center center no-repeat;
    opacity: 0;
    will-change: transform, opacity;
}

.sub__complete__text01{
    color: var(--color__main);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.8px;
    margin: 22px 0 15px;
    text-align: center;
    width: 100%;
}

.sub__complete__text02{
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: #191919;
    width: 100%;
    max-width: 336px;
}

/* 미션 1 성공, 실패 */
#mission__01__success .todaymission__content,
#mission__01__fail .todaymission__content{
    gap: 0;
}

.todaymission__box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: #E8F1FE;
    margin-bottom: 24px;
}

#mission__01__fail .todaymission__box{
    background: #F1F1F1;
} 

.mission__succes__text01{
    color: var(--color__main); 
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1.2px;
}

.mission__succes__text02{
    color: var(--color__main); 
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.6px;
}

.mission__fail__text01{
    color: #A3A6A9;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1.2px;
}

.mission__fail__text02{
    color: #A3A6A9;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.6px;
}

.mission__explanation__box{
    border-radius: 10px;
    background: #F6F7F9;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 36px;
}

.mission__explanation__top,
.mission__explanation__bottom{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mission__explanation__box span{
    color: var(--color__main);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.4px;
}

.mission__explanation__bottom span{
    color: #5A5F66;
}

.mission__explanation__box .mission__explanation__text{
    color: var(--color__basic);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.35px;
}

.mission__explanation__line{
    border: 1px solid #EEE;
}

/* 오늘의미션 참여 완료 */
#mission__already {
    display: none;
    position: relative;
    width: 100%;
}

#mission__already.is-active {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    min-height: calc(100dvh - 60px);
}

#mission__already .inner__full__mobile {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}

#mission__already .sub__complete__content {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

#mission__already .sub__complete__text01{
    margin-bottom: 0;
}

/* 미션 순서 관련 */
.mission__question,
#mission__result,
#mission__complete,
#mission__already{
    display: none;
}

.mission__question.is-active{
    display: block;
}

/* 모바일 */
#sub__todaymission__visual__wr {
    height: 100dvh;
    overflow: hidden;
}

#sub__todaymission__visual__wr .mission__question.is-active {
    height: calc(100dvh - 60px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* PC Shell */
@media screen and (min-width: 768px) {
    body.is-pc-shell
    .index-pc-device
    #sub__todaymission__visual__wr {
        height: 100%;
    }

    body.is-pc-shell
    .index-pc-device
    #sub__todaymission__visual__wr
    .mission__question.is-active {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
    }
}

#mission__result.is-active,
#mission__complete.is-active,
#mission__already.is-active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    #mission__result.is-active,
    #mission__complete.is-active{
        min-height: calc(100dvh - 60px);
    }
}

/* 미션 내역 */
#sub__mymissoin__visual__wr .sub__content{
    display: none;
}

#sub__mymissoin__visual__wr .sub__content.is-active{
    display: block;
}

.sub__mymissoin__filter__button{
    display: flex;
    padding: 10px 12px;
    width: fit-content;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    background: #F1F1F1;
    margin-bottom: 12px;

    color: var(--color__text02);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
}

.sub__mymissoin__filter__button div{
    width: 16px;
    height: 16px;
    background: url('../assets/svg/chevron-down02.svg') center center / cover no-repeat;
}

.mymissoin__item{
    display: flex;
    flex-direction: column;
    padding: 12px 0 24px;
    border-bottom: 1px solid #EEE;
}

.mymissoin__item:first-of-type{
    border-top: 1px solid #EEE;
}

.mymissoin__item p{
    padding: 4px 8px;
    border-radius: 30px;
    background: #F1F1F1;
    width: fit-content;

    color: var(--color__text02);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.25px;
}

.mymissoin__item h2{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.4px;
    margin: 12px 0;
}

.mymissoin__item__top{
    display: flex;
    gap: 8px;
}

.mymissoin__item__top .mymissoin__item__point{
    color: #136CED;
    background: #E8F1FE;
}

.mymissoin__item__bottom{
    display: flex;
}

.mymissoin__item__bottom span{
color: #A3A6A9;
    font-size: 12px;
    line-height: 1.1; 
    letter-spacing: -0.18px;
}

.mymissoin__item time{
    color: #A3A6A9;
    font-size: 12px;
    line-height: 1.1; 
    letter-spacing: -0.18px;
}

/* TodayMission end */

/* Survey start */
.sub__survey__content{
    margin-top: 0;
}

.survey__progress{
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: 4px;
    background: #F1F1F1;
    z-index: 998;
}

.survey__progress__bar{
    height: 100%;
    width: 0;
    background: var(--color__main);
    transition: width 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}

.survey__progress.is-hidden{
    display: none;
}

.sub__survey__progress__bar{
    display: none;
}

.sub__survey__progress__fill{
    display: none;
}

.sub__survey__number{
    display: flex;
    width: fit-content;
    padding: 4px 12px;
    border-radius: 30px;
    background: #DAE9FD;

    color: var(--color__main);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.24px;
    margin: 40px 0 11px;
}

.sub__survey__question{
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.6px;
    text-transform: capitalize;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.survey__item__box{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 40px;
}

.survey__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    cursor: pointer;
    border-radius: 8px;
    background: #F1F1F1;
    border: 2px solid #F1F1F1;
}

.survey__item span{
    color: #505050;
    font-size: 14px;
    letter-spacing: -0.35px;
}

.survey__item input {
    position: absolute;
    opacity: 0;
}

.survey__item .check {
    width: 16px;
    height: 16px;
    background: url("../assets/svg/checked02.svg") no-repeat center / contain;
}

input:checked ~ .check {
   background: url("../assets/svg/checked03.svg") no-repeat center / contain;
}

.survey__item:has(input:checked) {
    border-radius: 8px;
    border: 2px solid #136CED;
    background: #FFF;
}

.sub__survey__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.survey__etc{
    display: none;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;

    color: rgba(80, 80, 80, 0.70);
    font-size: 14px;
    font-weight: 500;
    line-height: 130%; 
    letter-spacing: -0.35px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EEE;    
}

@media screen and (max-width: 767px) {
    #sub__survey__visual__wr input.survey__etc,
    #sub__survey__visual__wr textarea.survey__etc {
        font-size: 16px;
    }
}

#survey__06 .survey__etc{
    display: block;
}

.survey__item__col{
    display: flex;
    width: 90%;
    flex-direction: column;
    gap: 10px;
}

.survey__item input[type="radio"]:checked ~ .survey__item__col .survey__etc {
    display: block;
    position: static;
    opacity: 1;
}

.survey__item input[type="radio"]:checked ~ .survey__item__col span {
    color: var(--color__main);
    padding-top: 12px;
}

.survey__item input[type="checkbox"]:checked ~ .survey__item__col .survey__etc {
    display: block;
    position: static;
    opacity: 1;
}

.survey__item input[type="checkbox"]:checked ~ .survey__item__col span {
    color: var(--color__main);
    padding-top: 12px;
}

.duplicate__box{
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    margin: 40px 0 11px;
}

.duplicate__box .sub__survey__number{
    margin: 0;
}

.duplicate__badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 30px;
    background: #F1F1F1;
    color: #5A5F66;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.25px;
    white-space: nowrap;
}

.survey__free__item{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 52px;
}

.survey__free__item span{
    color: #999;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.35px;
}


/* 만족도 조사 완료: 미션 완료와 동일하게 세로 중앙정렬 */
#sub__survey__visual__wr{
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 60px);
    box-sizing: border-box;
}

#sub__survey__visual__wr:has(#survey__complete.is-active){
    overflow: hidden;
}

/* 만족도 조사: 모바일 */
#sub__survey__visual__wr {
    height: 100dvh;
    overflow: hidden;
}

#sub__survey__visual__wr .sub__contents__wr.is-active {
    height: calc(100dvh - 60px);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* 만족도 조사: PC Shell */
@media screen and (min-width: 768px) {
    body.is-pc-shell
    .index-pc-device
    #sub__survey__visual__wr {
        height: 100%;
    }

    body.is-pc-shell
    .index-pc-device
    #sub__survey__visual__wr
    .sub__contents__wr.is-active {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
    }
}

/* 만족도 조사 순서 */
#survey__01,
#survey__02,
#survey__03,
#survey__04,
#survey__05,
#survey__06,
#survey__complete,
#survey__already{
    display: none;
}

#survey__01.is-active,
#survey__02.is-active,
#survey__03.is-active,
#survey__04.is-active,
#survey__05.is-active,
#survey__06.is-active{
    display: block;
}

#survey__complete.is-active,
#survey__already.is-active {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

@media screen and (max-width: 767px) {
    #survey__complete.is-active,
    #survey__already.is-active {
        min-height: calc(100dvh - 60px);
    }
}

/* Survey end */

/* Raffle start */
#sub__raffle__visual__wr{
    padding-bottom: 80px;
}

#sub__raffle__visual__wr .sub__content{
    display: flex;
    flex-direction: column;
}

.sub__raffle__card{
    position: relative;
    border: none;
    width: 100%;
    height: 72px;
    border-radius: 10px;
    padding: 0;
    opacity: 0.8;
    background: #FFF;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    margin-bottom: 20px;
}

.sub__raffle__card__icon{
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    overflow: hidden;
    flex-shrink: 0;
}

.sub__raffle__card__icon img{
    position: absolute;
    width: 226.37%;
    height: 141.48%;
    left: -63.18%;
    top: -20.74%;
    max-width: none;
}

.sub__raffle__card__title__box{
    position: absolute;
    left: 72px;
    top: 15px;
    width: 207px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.sub__raffle__card__title{
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: #191919;
    white-space: nowrap;
}

.sub__raffle__card__text{
    margin: 0;
    color: #5A5F66;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.35px;
    white-space: nowrap;
}

.sub__raffle__card__text span{
    color: #136CED;
    font-weight: 600;
}

.sub__raffle__card__chevron{
    position: absolute;
    top: 25px;
    right: 16px;
    width: 24px;
    height: 24px;
    background: url('../assets/svg/chevron-right03.svg') center center / contain no-repeat;
}

.sub__raffle__popularity{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.sub__raffle__title{
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #191919;
}

.raffleSwiper{
    margin: 0 -20px 40px;
    padding: 0 20px 30px;
    overflow: visible;
}

.raffleSwiper .swiper-slide{
    width: 335px;
    height: auto;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: 0;
}

.swiper-pagination-bullet{
    width: 8px;
    height: 8px;
    background: #E8F1FE;
    opacity: 1;
}

.swiper-pagination-bullet-active{
    background: #136CED;
}

.sub__raffle__popularity__box{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    gap: 16px;
}

.sub__raffle__popularity__box>img{
    width: 136px;
    height: 142px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.sub__raffle__popularity__title__box{
    display: flex;
    flex: 1;
    min-width: 0;
    height: 142px;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 0;
    box-sizing: border-box;
}

.sub__raffle__popularity__title__top{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.popularity__text01{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    width: fit-content;
    border-radius: 30px;
    background: #E8F1FE;
    color: #136CED;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.25px;
}

.popularity__text02{
    margin-top: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #191919;
}

.popularity__text02.is-uppercase{
    text-transform: uppercase;
}

.popularity__text03{
    color: #5A5F66;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.sub__raffle__popularity__title__bottom{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sub__raffle__popularity__number{
    display: flex;
    align-items: center;
    gap: 4px;
    color: #5A5F66;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.25px;
}

.sub__raffle__popularity__number img{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sub__raffle__popularity__number b{
    font-weight: 600;
}

.sub__raffle__popularity__point{
    display: flex;
    align-items: center;
    gap: 8px;
}

.sub__raffle__popularity__point img{
    width: 60px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}

.sub__raffle__point-value{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #191919;
}

.sub__raffle__point-badge{
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.sub__raffle__point-badge__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #FFD54C;
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}

.sub__raffle__point-badge--lg .sub__raffle__point-badge__icon{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 12.5px;
}

.sub__raffle__point-badge--lg .sub__raffle__point-badge__label{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    height: 20px;
    margin-left: -20px;
    padding: 4px 8px 4px 24px;
    border-radius: 30px;
    background: #FFF7D9;
    color: #FFD54C;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.25px;
}

.sub__raffle__entire{
    margin-top: 40px;
    padding-bottom: 20px;
}

.sub__raffle__entire__title__box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub__raffle__entire__title__box a{
    color: #A3A6A9;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.3px;
    text-decoration: underline;
    text-underline-position: from-font;
}

.sub__raffle__product__wr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

/* 응모한 경품 없을때 화면처리 처리 */
#sub__myraffle__visual__wr .sub__content.empty{
    display: flex;
    flex-direction: column;
}

.sub__raffle__product{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.sub__raffle__product>img{
    display: block;
    width: 100%;
    aspect-ratio: 164 / 147;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.sub__raffle__product--voucher>img{
    aspect-ratio: 164 / 147;
    height: auto;
    padding: 16.5% 6%;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    background: #FFF;
}

.sub__raffle__product__text{
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.35px;
    color: #191919;
}

.sub__raffle__product__winner{
    color: #5A5F66;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}

.sub__raffle__product__point{
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #191919;
}

#sub__raffle02__visual__wr.is-complete
.sub__raffle02__hero,
#sub__raffle02__visual__wr.is-complete
#raffle__detail {
    display: none;
}

#sub__myraffle__visual__wr .sub__raffle__product{
    width: 100%;
    pointer-events: none;
}
#sub__raffle02__visual__wr{
    padding-top: 0;
    min-height: 680px;
    background: #FFF;
}

.sub__raffle02__hero{
    width: 100%;
    height: 340px;
    background: #EFEFEF;
    overflow: hidden;
}

.sub__raffle02__hero img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sub__raffle02__notice{
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 44px;
    padding: 16px;
    box-sizing: border-box;
    background: #E8F1FE;
}

.sub__raffle02__notice img{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sub__raffle02__notice__text{
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #5A5F66;
    line-height: 1.3;
    letter-spacing: -0.35px;
}

.sub__raffle02__notice__text b{
    font-weight: 600;
    color: inherit;
}

#sub__raffle02__visual__wr .inner__full__mobile{
    padding-top: 20px;
}

.sub__raffle02__detail{
    display: flex;
    flex-direction: column;
}

.sub__raffle02__detail .popularity__text01{
    width: fit-content;
}

.sub__raffle02__title{
    margin: 13px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.45px;
    color: #191919;
    text-transform: uppercase;
}

.sub__raffle02__winner{
    margin: 8px 0 0;
    color: #5A5F66;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.sub__raffle02__divider{
    margin: 20px 0 0;
    border: none;
    width: 100%;
    height: 1px;
    background: #EEE;
}

.sub__raffle02__point{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 21px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: #191919;
}

.sub__raffle__point-badge--detail .sub__raffle__point-badge__icon{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 12.5px;
}

#sub__raffle02__visual__wr .sub__raffle02__button{
    position: static;
    width: 100%;
    height: 54px;
    margin-top: 40px;
    padding: 6px 30px;
    border-radius: 10px;
    line-height: 24px;
    transform: none;
    left: auto;
    bottom: auto;
    box-sizing: border-box;
}

/* 경품 완료 관련 스타일 */
#raffle__complete {
    display: none;
    width: 100%;
}

#raffle__complete.is-active {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    min-height: calc(100dvh - 60px);
}

#raffle__complete .inner__full__mobile {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    padding-top: 0;
}

@media screen and (max-width: 767px) {
    #raffle__complete .inner__full__mobile {
        padding-bottom: 0;
    }  
}

#raffle__complete .sub__complete__content {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.popularity__box{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EEE;
}

.popularity__point{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.popularity__point img{
    width: 20px;
    height: 20px;
}

.sub__raffle__button{
    position: fixed;
    width: calc(100% - 40px);
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

#sub__myraffle__visual__wr{
    padding-bottom: calc(92px + 24px + env(safe-area-inset-bottom, 0px));
}

#sub__myraffle__visual__wr:has(.sub__content.empty){
    padding-bottom: 0;
}

/* Raffle 현황 모달 */
.modal__raffle__graph__wr{
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.modal__raffle__graph__box{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal__raffle__graph__box.popularity .popularity__tag{
    display: block;
}

.modal__raffle__graph__box.popularity b{
    font-weight: 700;
}

.modal__raffle__graph__box__top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal__raffle__graph__box__left{
    display: flex;
    gap: 8px;
    align-items: center;
}

.modal__raffle__graph__title{
    color: #5A5F66;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px; 
    text-transform: uppercase;
}

.popularity__tag{
    display: none;
    padding: 4px 8px;
    border-radius: 30px;
    background: #E8F1FE;

    color: var(--color__main);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.25px;
}

.modal__raffle__graph__text{
    color: #5A5F66;
    font-size: 14px;
    line-height: 20px;
}

.modal__raffle__graph__text b{
    font-weight: 400;
}

.modal__raffle__graph{
    position: relative;
    height: 9px;
    border-radius: 30px;
    background: #F1F1F1;
}
.modal__raffle__graph::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: linear-gradient(121deg, #2069DC 8.7%, #3D83EB 50%, #60A4FD 91.3%);
}
.prize01 .modal__raffle__graph::after{
    width: 88%;
    background: #F2C639;
}

.prize02 .modal__raffle__graph::after{
    width: 56%;
}

.prize03 .modal__raffle__graph::after{
    width: 42%;
}

.prize04 .modal__raffle__graph::after{
    width: 68%;
}

/* 동적으로 채워지는 그래프는 span.bar를 사용하므로 ::after를 숨깁니다. */
.modal__raffle__graph.is-dynamic{
    background: #F1F1F1;
}
.modal__raffle__graph.is-dynamic::after{
    display: none;
}

/* Raffle 신청 모달 */
.modal__title__wr{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

#raffle__modal .modal__content{
    display: none;
    gap: 24px;
}

#raffle__modal .modal__content.is-active{
    display: flex;
}

#raffle__modal .modal__content.lack.is-active{
    display: flex;
}

.modal__title__wr .modal__title{
    margin: 0;
}

.modal__point{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.6px;
}

.modal__my__point__wr,
.modal__insufficient__point__wr{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal__my__point__text{
    color: #5A5F66;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

.modal__point__right{
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal__insufficient__point__tag{
    padding: 4px 8px;
    border-radius: 30px;
    background: #FEEAEC;

    color: #F32538;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.25px;
}

.modal__my__point{
    color: #5A5F66;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

.modal__line{
    height: 1px;
    background: #F1F1F1;
}

.modal__insufficient__point__text,
.modal__insufficient__point{
    color: var(--color__main);
    font-size: 16px;
    line-height: 1.3; 
    letter-spacing: -0.4px;
}

.modal__content.lack .modal__insufficient__point__text,
.modal__content.lack .modal__insufficient__point{
    color: #F32538;
}

.raffle__modal__button{
    margin-top: 8px;
    background: #F1F1F1;
    color: #A3A6AA;
    pointer-events: none;
    cursor: default;
}

.raffle__modal__button.is-active{
    background: var(--color__main);
    color: #fff;
    pointer-events: auto;
    cursor: pointer;
}
/* Raffle end */

/* Participation start */
/* 모바일 */
@media screen and (max-width: 767px) {
    #sub__participation__visual__wr {
        height: 100dvh;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    #sub__participation__visual__wr > .sub__contents__wr,
    #sub__participation__visual__wr .inner__full__mobile {
        height: auto;
        overflow: visible;
    }

    body:has(#sub__participation__visual__wr .dim.is-active) #sub__participation__visual__wr {
        overflow: visible !important;
    }

    body:has(#sub__participation__visual__wr .dim.is-active) .dim {
        position: fixed;
        inset: 0;
        z-index: 1000;
    }

    body:has(#sub__participation__visual__wr .dim.is-active) .modal.is-active {
        z-index: 1001;
    }
}

#sub__participation__visual__wr .step01 {
    display: none;
}

#sub__participation__visual__wr .step01.is-active {
    display: flex;
}

#sub__participation__visual__wr .step-company {
    display: flex;
}

#sub__participation__visual__wr .step-workplace {
    display: none;
}

#sub__participation__visual__wr .step-workplace.is-active {
    display: flex;
}

#sub__participation__visual__wr .step-workplace-other {
    display: none;
    margin-top: -8px;
}

#sub__participation__visual__wr .step-workplace-other.is-active {
    display: flex;
}

#sub__participation__visual__wr .sub__fixed__bottom .sub__participation__btn {
    display: none;
}

#sub__participation__visual__wr .sub__fixed__bottom .sub__participation__btn.is-active {
    display: flex;
}

.sub__participation__btn[hidden] {
    display: none !important;
}

.sub__participation__btn:disabled {
    background: #D7D9DD;
    color: #fff;
    cursor: not-allowed;
    pointer-events: none;
}

.sub__participation__btn:not(:disabled) {
    background: var(--color__main);
    color: #fff;
    cursor: pointer;
}

.floating__label__select {
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 20px;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.5px;
    padding-top: 10px;
    margin-bottom: 20px;
}

.floating__label__select .select__trigger {
    width: 100%;
    border: none;
    padding: 10px 28px 16px 0;
    border-bottom: 1px solid #EEEEEE;
    background: none;
    text-align: left;
    font: inherit;
    color: var(--color__basic);
    cursor: pointer;
}

.floating__label__select .select__trigger:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.floating__label__select .select__value.is-placeholder {
    color: #858585;
    font-weight: 600;
}

.floating__label__select .select__chevron {
    position: absolute;
    right: 0;
    bottom: 18px;
    width: 16px;
    height: 16px;
    background: url('../assets/svg/chevron-down02.svg') center center / cover no-repeat;
    pointer-events: none;
}

.floating__label__select label {
    position: absolute;
    top: 50%;
    left: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -0.5px;
    color: #858585;
    transform: translateY(-50%);
    transition: .2s;
    pointer-events: none;
}

.floating__label__select.is-filled label,
.floating__label__select.is-active label {
    top: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -0.35px;
}

.floating__label__select.is-filled .select__value,
.floating__label__select.is-active .select__value {
    font-weight: 500;
    color: var(--color__basic);
}

.floating__label__select.completed label {
    color: #A3A6A9;
}

.floating__label__select.completed.is-active label {
    color: var(--color__main);
}

.select__option {
    display: flex;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    justify-content: space-between;
    align-items: center;
    color: var(--color__basic);
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.select__button__box .select__option img {
    display: none;
}

.select__button__box .select__option img.is-checked {
    display: block;
}

.sub__participation__notice{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #F6F7F9;
    box-sizing: border-box;
}

.sub__participation__notice img{
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.sub__participation__notice p{
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.35px;
    color: #5A5F66;
    word-break: break-word;
}

.sub__participation__wr{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 38px;
}

#sub__participation__visual__wr form{
    display: flex;
    width: 100% ;
    flex-direction: column;
    gap: 8px;
}

.input__text{
    border: none;
    padding: 10px 0 16px;
    border-bottom: 1px solid #EEEEEE;
    letter-spacing: -0.5px;
    width: 100%; 
}

.input__text:-webkit-autofill,
.input__text:-webkit-autofill:hover,
.input__text:-webkit-autofill:focus,
.input__text:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #000 !important;
    caret-color: #000;
}

.input__text:focus{
    border-bottom: 1px solid var(--color__main);
}

.floating__label__input {
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 20px;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.5px;
    padding-top: 10px;
    margin-bottom: 20px;
}

.input__text::placeholder {
    opacity: 0;
}

.floating__label__input label {
    position: absolute;
    top: 50%;
    left: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -0.5px;
    color: #858585;
    transform: translateY(-50%);
    transition: .2s;
    pointer-events: none;
}

.input__text:focus + label{
    color: var(--color__main);
}

.input__text:focus + label,
.input__text:not(:placeholder-shown) + label {
    top: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 110%; 
    letter-spacing: -0.35px;
}

.input__text:focus {
    outline: none;
}

.auth__timer {
    position: absolute;
    top: 29px;
    right: 0;
    bottom: auto;
    transform: translateY(-50%);
    color: var(--color__main);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.35px;
}

.auth__resend{
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    font-size: 12px;
    letter-spacing: -0.3px;
    line-height: 110%;
    color: #A3A6A9;
}

.auth__resend__btn{
    border: 0;
    background: none;
    padding: 0;
    font-size: 12px;
    letter-spacing: -0.3px;
    line-height: 110%;
    cursor: pointer;
    text-decoration-line: underline;
}

.auth__error{
    display: none;
    width: 100%;
    margin: 8px 0 0;
    color: #F04438;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.auth__error.is-active{
    display: block;
}

/* 스텝에 따른 상태 변화 */
.step02,
.step03,
.step04 {
    display: none;
}

.step02.is-active,
.step03.is-active,
.step04.is-active {
    display: flex;
}

/* 완료 상태 */
.floating__label__input.completed label{
    color: var(--color__main);
}

/* 완료 상태에서 다시 클릭하면 메인 컬러 */
.floating__label__input.completed .input__text:focus + label{
    color: var(--color__main);
}

.sub__agree__box input{
    display: none;
}

.sub__agree__box label::before{
    content: '';
    width: 20px;
    height: 20px;
    transition: .3s;
    background: #F1F1F1;
}

.sub__agree__box input:checked + label::before{
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--color__main);
}

/* 개인정보 동의 모달 */

.consent__modal__title{
    display:block;
    font-size: 20px;
    font-weight: 700;
    line-height: 110%;
    margin-bottom: 40px;
}

.consent__modal__scroll{
    display: flex;
    flex-direction: column;
    height: 155px;
    overflow-y: auto;
    padding: 16px;
    border-radius: 8px;
    background: #F1F1F1;
    word-break: keep-all;
    gap: 16px;
}

.consent__modal__scroll::-webkit-scrollbar{
    width: 4px;
}

.consent__modal__scroll::-webkit-scrollbar-track{
    border-radius: 30px;
    background: rgba(25, 25, 25, 0.10);
}

.consent__modal__scroll::-webkit-scrollbar-thumb{
    border-radius: 30px;
    background: #191919;
}

.consent__modal__scroll::-webkit-scrollbar-thumb:hover{
    background: #191919;
}

.consent__modal__scroll h3{
    font-size: 16px;
    color: #444;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.35px;
    margin: 0;
    margin-bottom: 2px;
}

.consent__modal__scroll b{
    font-size: 14px;
    color: #5A5F66;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.35px;
}

.consent__modal__scroll p{
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    letter-spacing: -0.35px;
    margin: 0;
}

.consent__modal__scroll .text{
    font-size: 13px;
    color: #666;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -0.35px;
    margin: 0;
}

.consent__modal__scroll .text b{
    font-size: 13px;
    color: #666;
}

.consent__agree{
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: -0.35px;
}

.consent__agree span{
    color: var(--color__main);
    font-weight: 600;
}

.consent__agree input{
    display: none;
}

.consent__agree label{
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.consent__agree label::before{
    content: "";
    width: 24px;
    height: 24px;
    border: 1px solid #DDDDDD;
    border-radius: 30px;
    box-sizing: border-box;
    transition: .3s;
}

.consent__agree input:checked + label::before{
    content: "✓";
    display: flex;
    align-items: center; 
    justify-content: center;
    background: var(--color__main);
    border-color: var(--color__main);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.sub__consent__btn__01{
    margin: 32px 0 16px;
}

.sub__consent__btn__02{
    background: none;
    width: 100% ;
    text-align: center;
    color: #A3A6A9;
    font-size: 14px;
    font-weight: 600;
    line-height: 130%; 
    letter-spacing: -0.35px;
}
/* Participation end */


/* Inquiry start */
#sub__inquiry02__visual__wr .sub__content,
#sub__inquiry__visual__wr .sub__content{
    display: none;
}

#sub__inquiry02__visual__wr .sub__content.is-active,
#sub__inquiry__visual__wr .sub__content.is-active{
    display: flex;
    flex-direction: column;
}

body:has(#sub__inquiry02__visual__wr) #sub-header {
    background-color: #f9f9f9;
}

.sub__inquiry__wr{
    display: flex;
    justify-content: center;
    align-items: center;
}

.sub__inquiry__filter__button{
    display: flex;
    padding: 10px 12px;
    width: fit-content;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    background: #F1F1F1;
    margin-bottom: 12px;

    color: var(--color__text02);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
}

.sub__inquiry__filter__button div{
    width: 16px;
    height: 16px;
    background: url('../assets/svg/chevron-down02.svg') center center / cover no-repeat;
}

.inquiry__item{
    display: flex;
    flex-direction: column;
    padding: 12px 0 24px;
    border-bottom: 1px solid #EEE;
}

.inquiry__item:first-of-type{
    border-top: 1px solid #EEE;
}

.inquiry__item p{
    padding: 4px 8px;
    border-radius: 30px;
    background: #F1F1F1;
    width: fit-content;

    color: var(--color__text02);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.25px;
}

.inquiry__item .complete{
    color: var(--color__main);
    background: #E8F1FE;
}

.inquiry__item h2{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.4px;
    margin: 12px 0;
}

.inquiry__item time{
    color: #A3A6A9;
    font-size: 12px;
    line-height: 1.1; 
    letter-spacing: -0.18px;
}

.inquiry__button.submit {
    display: flex;
    opacity: 0.4;
    pointer-events: none;
}

.inquiry__button.submit.is-active {
    opacity: 1;
    pointer-events: auto;
}

#sub__inquiry02__visual__wr{
    background: #F8F8F8;
    min-height: calc(100dvh - 60px);
}

#sub__inquiry02__visual__wr .sub__content.is-active.inquiry02{
    align-items: stretch;
    width: 100%;
    margin-top: 0;
}

.inquiry02{
    margin-top: 0;
}

.inquiry02__summary{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 0 24px;
    border-bottom: 1px solid #EEE;
}

.inquiry02__summary__top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.sub__fixed__bottom.inquiry02{
    display: flex;
    justify-content: center;
    pointer-events: all;
}

.inquiry02__delete__button{
    padding: 0;
    border: 0;
    background: transparent;
    color: #5A5F66;
    font-size: 12px;
    line-height: 1.3;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.inquiry02__title{
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.4px;
    color: #191919;
    margin: 0;
}

.inquiry02__date{
    width: 100%;
    color: #A3A6A9;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: -0.18px;
}

.inquiry02__card{
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    margin-top: 24px;
    padding: 24px 16px;
    border-radius: 10px;
    background: #FFF;
}

.inquiry02__block{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.inquiry02__block:first-child{
    padding-bottom: 24px;
}

.inquiry02__block--answer{
    padding-top: 24px;
    border-top: 1px solid #EEE;
}

.inquiry02__badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 30px;
    background: #F1F1F1;
    color: #5A5F66;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.25px;
}

.inquiry02__badge--status{
    background: #E8F1FE;
    color: #136CED;
}

.inquiry02__badge--answer{
    background: #136CED;
    color: #fff;
}

.inquiry02__text{
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.35px;
    color: #191919;
    margin: 0;
    word-break: break-word;
}

.inquiry02__text p{
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.35px;
    color: #191919;
}

.inquiry02 .inquiry__item{
    border-top: none;
}

.inquiry__item.contents{
    margin-top: 24px;
    display: flex;
    gap: 24px;
    border-bottom: none;
    padding: 16px 0;
    border-radius: 10px;
    background: #FFF;
}

.inquiry__item.contents h2{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 0;
}

.inquiry__answer{
    padding-top: 12px;
    border-top: 1px solid #EEE;
}

.inquiry__answer > p{
    background: var(--color__main);
    color: #fff;
}
/* Inquiry end */

/* Inquiry New start */
.sub__inquirynew__title{
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0;
}

.inquiry__form{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form__field{
    display: flex;
    margin-top: 12px;
    flex-direction: column;
    gap: 10px;
}

.form__field label{
    order: 1;
    color: #999;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: -0.35px;
}

.form__field input{
    order: 2;
    border: none;
    background: none;
    padding-bottom: 16px;
    border-bottom: 1px solid #EEE;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

#inquiry__content{
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
}

.form__field input:focus{
    border-color: var(--color__main);
}

.form__field input:focus{
    outline: none;
}

.form__field:focus-within label{
    color: var(--color__main);
}

.form__field:-webkit-autofill,
.form__field:-webkit-autofill:hover,
.form__field:-webkit-autofill:focus{
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #111;
    transition: background-color 9999s;
}

/* Inquiry New end */

/* Notice start */
#sub__notice__visual__wr .sub__content{
    display: none;
}

#sub__notice__visual__wr .sub__content.is-active{
    display: flex;
    flex-direction: column;
}

.sub__content.empty{
    flex: 1;
    min-height: 0;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* 모바일 빈 상태를 헤더와 하단 버튼을 포함한 한 화면 안에 배치 */
.sub__contents__wr:has(.sub__content.empty),
.sub__contents__wr:has(.sub__content.empty) > .inner__full__mobile{
    display: flex;
    min-height: calc(100dvh - 60px);
    flex-direction: column;
}

.sub__content.empty h2{
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    margin: 24px 0 8px;
}

.sub__content.empty span{
    color: #5A5F66;
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.sub__notice__wr{
    display: flex;
    justify-content: center;
    align-items: center;
}

.notice__item{
    padding: 24px 0;
    border-bottom: 1px solid #EEE;
}

.notice__item h2{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.4px;
    margin: 0;
    margin-bottom: 8px;
}

.notice__item time{
    color: #A3A6A9;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: -0.18px;
}

.notice02{
    margin-top: 2px;
}

.notice__text{
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: -0.21px;
}
/* Notice end */

/* Ranking start */
#sub__ranking__visual__wr{
    background: #fff;
    padding-top: 48px;
}

.sub__ranking__content{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 80px;
}

.sub__ranking__week{
    padding: 4px 8px;
    border-radius: 30px;
    background: #E8F1FE;

    color: var(--color__main);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.25px;
}

.sub__ranking__title{
    margin: 8px 0 16px;

    color: var(--color__main);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.8px;
}

.sub__ranking__text{
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
}

.sub__ranking__bg{
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    aspect-ratio: 65 / 87;
    background: url('../assets/img/sub_ranking_bg.png') center / contain no-repeat;
    z-index: 0;
}

.sub__ranking__content img {
    position: relative;
    z-index: 1;
    margin: 35px 0 26px;
}

.ranking__icon{
    animation: floating 2s ease-in-out infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.sub__ranking__wr{
    display: flex;
    position: relative;
    z-index: 5;
    width: 100%;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.sub__ranking__box{
    display: flex;
    height: 200px;
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.sub__ranking__box span{
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.35px;
}

.sub__ranking__box .ranking__score{
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 4px 0 16px;
}

.ranking__graph{
    padding: 18px 34px 0;
    text-align: center;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(141deg, #FFDD5E 0.17%, #FFA806 99.83%);
    width: 45px;
    height: 116px;

    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.rank__1{
    order: 2;
}

.rank__2{
    order: 1;
}

.rank__3{
    order: 3;
}

.rank__1 .ranking__score{
    color: #FFA806;
    font-size: 24px;
}

.rank__2 .ranking__score{
    color: #ACB2BE;
}

.rank__2 .ranking__graph{
    font-size: 24px;
    width: 27px;
    height: 71px;
    background: linear-gradient(135deg, #CFD5E0 0%, #ACB2BE 102.87%), #969DA9;
}

.rank__3 .ranking__score{
    color: #E2A087;
}

.rank__3 .ranking__graph{
    font-size: 24px;
    width: 27px;
    height: 49px;
    background: linear-gradient(116deg, #FBC2AC 0%, #DA967C 100%), #DA967C;
}

.sub__ranking__list__box{
    border-radius: 10px;
    background: #FFF;
    z-index: 10;
    padding: 16px;
    display: flex;
    width: calc(100% - 32px);
    align-items: center;
    justify-content: space-between;
}

.sub__ranking__list__box.my{
    background: #E8F1FE;
}

.sub__ranking__list__right{
    display: flex;
    align-items: center;
}

.sub__ranking__list__ranking{
    color: var(--color__main);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

.sub__ranking__list__right img{
    margin: 0 12px 0 16px;
    width: 40px;
    height: 40px;
    border-radius: 120px;
}

.sub__ranking__list__text__box{
    display: flex;
    flex-direction: column;
    gap: 4px;   
}

.sub__ranking__list__name{
    font-size: 14px;
    font-weight: 700;
    line-height: -0.35px;   
}

.sub__ranking__list__department{
    color: #A3A6A9;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: -0.3px;
}

.sub__ranking__list__point{
    color: var(--color__main);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.35px;
}

.sub__ranking__list__wr{
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #F1F1F1;
    background: #FFF;
    margin-top: 16px;
}

.sub__ranking__list__wr .sub__ranking__list__box{
    border-bottom: 1px solid #F1F1F1;
}

.sub__ranking__list__wr .sub__ranking__list__ranking,
.sub__ranking__list__wr .sub__ranking__list__point{
    color: var(--color__basic);
}
/* Ranking end */


/* Attendance start */
#sub__attendance__visual__wr{
    background: #FFF;
    min-height: calc(100dvh - 60px);
    padding-bottom: 92px;
}

@media screen and (max-width: 767px) {
    #sub__attendance__visual__wr {
        height: 100dvh;
        min-height: 0;
        padding-top: 60px;
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    #sub__attendance__visual__wr > .sub__contents__wr,
    #sub__attendance__visual__wr .inner__full__mobile {
        height: auto;
        overflow: visible;
    }
}

#sub__attendance__visual__wr .sub__attendance__content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.sub__attendance__notice{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    background: #F6F7F9;
    box-sizing: border-box;
}

.sub__attendance__notice img{
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.sub__attendance__notice p{
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.35px;
    color: #5A5F66;
}

.sub__attendance__title__box{
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 20px 20px 0;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.sub__attendance__title__box::after{
    content: '';
    position: absolute;
    top: 20px;
    right: 16px;
    width: 45px;
    height: 45px;
    background: url('../assets/img/sub_attendance_icon.png') center / contain no-repeat;
}

.sub__attendance__title{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.45px;
}

.sub__attendance__title span{
    color:var(--color__main);
    font-weight: 700;
}

.sub__attendance__text{
    color: #5A5F66;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.sub__attendance__button{
    border-top: 1px solid #D7DBE0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    color: #5A5F66;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: -0.3px;
    text-decoration: none;
}

.sub__attendance__button img{
    display: block;
    width: 16px;
    height: 16px;
}

.sub__attendance__title__box .main__attendance__box{
    margin: 16px 0;
}

.main__attendance__box{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.main__attendance__stamp,
.main__attendance__img{
    display: block;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.main__attendance__stamp img,
.main__attendance__img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sub__attendance__stamp__box{
    margin: 44px 0 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.sub__attendance__stamp__box .sub__attendance__title{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.45px;
    color: #191919;
}

.sub__attendance__stamp__box .sub__attendance__text{
    color: #5A5F66;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.sub__attendance__stamp__grid{
    display: grid;
    position: relative;
    gap: 24px;
    width: 100%;
    transition: max-height .5s ease;
}

.sub__attendance__stamp__row {
    display: flex;
    position: relative;
    justify-content: center;
    z-index: 10;
    gap: 16px;

    opacity: 1;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease;
}

.sub__attendance__stamp__row.reverse{
    flex-direction: row-reverse;
}

.sub__attendance__stamp__row.hidden{
    display: none;
}

.sub__attendance__stamp__row.show{
    display: flex;
    opacity: 0;
    transform: translateY(20px);
}

.sub__attendance__stamp__row.show.active{
    opacity: 1;
    transform: translateY(0);
}

.sub__attendance__stamp__item {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff url(../assets/svg/main_attendance_stamp_empty.svg) center / contain no-repeat;
}

.sub__attendance__stamp__item span{
    display: none;
}

.sub__attendance__stamp__item.attendance span{
    display: block;
}

.sub__attendance__stamp__item.attendance{
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #9DC1F8;
}

.attendance__point__icon{
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #FFD54C;

    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
}

.attendance__point{
    color: var(--color__main);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
}

.sub__attendance__stamp__item.absence{
    background: #D7D9DD url(../assets/svg/main_attendance_stamp_missed.svg) center / contain no-repeat;
}

.sub__attendance__stamp__grid::after{
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 311px;
    height: 100%;
    background-image: url(../assets/img/Union.png);
    background-repeat: no-repeat;
    background-position: center 26px;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 1;
}

.stamp__button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: none;
    align-self: stretch;
    box-sizing: border-box;
}

.stamp__button img{
    transition: transform .3s ease;
}

.stamp__button.is-expanded img{
    transform: rotate(180deg);
}
/* Attendance end */

/* 모달 모음 */
/* 포인트 적립/사용 내역 - 조회 범위 모달 */
.range__button{
    display: flex;
    padding: 16px 0;
    background: none;
    justify-content: space-between;
    color: var(--color__basic);

    font-size: 16px;
    line-height: 24px
}
.range__button__box img{
    display: none;
}

.range__button__box img.is-checked{
    display: block;
}

/* 포인트 적립/사용 내역 - 기간 선택 모달 */
#date__modal.is-wheel .modal__handle {
    margin-bottom: 40px;
}

.modal__wr.step02{
    display: none;
    flex-direction: column;
    padding: 0;
}

.modal__wr.step02 .modal__wheel__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.modal__wr.step02 .modal__title {
    padding: 0 24px;
    margin: 0;
}

.modal__wr.step02 .modal__content {
    padding: 0 20px;
    margin: 0;
}

.modal__wr.step02 .date__bottom__button {
    margin: 32px 0 0;
    padding: 0 20px;
    display: block;
    box-sizing: border-box;
}

.modal__wr.step02 .sub__button.selection {
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 600;
    line-height: 24px;
}

.date__button{
    display: flex;
    padding: 16px 0;
    background: none;
    justify-content: space-between;
    color: var(--color__basic);

    font-size: 16px;
    line-height: 24px
}
.date__button__box img{
    display: none;
}

.date__button__box img.is-checked{
    display: block;
}

.date__box{
    display: flex;
    gap: 4px;

    font-size: 16px;
    line-height: 1.1;
}

.date__box img{
    display: block;
    width: 16px;
    height: 16px;
}

.date__bottom__button{
    margin-top: 32px;
    display: flex;
    gap: 15px;
}

.modal__wr.step01 .date__bottom__button .sub__button{
    width: 50%;
}

.date__bottom__button .cancel{
    background: linear-gradient(0deg, #F1F1F1 0%, #F1F1F1 100%), rgba(255, 255, 255, 0.50);
    color: #A3A6A9;
}

.date__picker {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    width: 100%;
    height: 178px;
    margin: 0;
    padding: 0 26px;
    box-sizing: border-box;
    flex-shrink: 0;
}

@media screen and (min-width: 376px) {
    .date__picker {
        justify-content: space-between;
    }

    .date__col[data-type="month"],
    .date__col[data-type="day"] {
        margin-left: 0;
    }
}

.date__picker__mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 38px;
    border-radius: 8px;
    background: #F1F1F1;
    pointer-events: none;
    z-index: 0;
}

.date__col {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    height: 178px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0;
    box-sizing: border-box;
    overscroll-behavior: contain;
    cursor: grab;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
    user-select: none;
}

.date__col[data-type="year"] {
    width: 86px;
    flex: 0 0 86px;
}

.date__col[data-type="month"] {
    width: 48px;
    flex: 0 0 48px;
    margin-left: 32px;
}

.date__col[data-type="day"] {
    width: 52px;
    flex: 0 0 52px;
    margin-left: 24px;
}

.date__col.is-dragging {
    cursor: grabbing;
}

.date__col::-webkit-scrollbar {
    display: none;
}

.date__col ul {
    margin: 0;
    padding: 67px 0;
}

.date__col li {
    position: relative;
    list-style: none;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
    color: #F1F1F1;
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity, color;
    cursor: grab;
}

.date__col.is-dragging li {
    cursor: grabbing;
}

.date__col li.selected {
    color: #191919;
    opacity: 1;
    font-weight: 400;
}


/* 응모횟수 관련 스타일 */
.modal__entry__control__buttons{
    display: flex;
    gap: 6px;
    border-radius: 4px; 
}

.modal__entry__count__btn{
    display: flex;
    font-size: 20px;
    height: 24px;
    width: 24px;
    border: solid 1px #f0f0f0;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.modal__entry__count__input {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    color: var(--color__main);
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.modal__entry__count__input::-webkit-inner-spin-button,
.modal__entry__count__input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

/* 개인정보상세페이지 */
.privacy__content{
    margin-top: 20px;
}

.privacy__intro{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EEE;
}

.privacy__intro__header{
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    gap: 8px;
    border-bottom: 1px solid #EEE;
}

.privacy__intro__title{
    color: #191919;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.4px;
}

.privacy__intro__date{
    color: #A3A6A9;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: -0.18px;
}

.privacy__intro__description{
    color: #191919;
    font-size: 14px;
    line-height: 1.6; 
    letter-spacing: -0.21px;
}

/* 개인정보처리방침 아코디언 */
.privacy__accordion{
}

.privacy__accordion__item{
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    border-bottom: 1px solid #EEE;
}

.privacy__accordion__summary{
    display: flex;
    width: 100%;
    gap: 12px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
}

.privacy__accordion__summary::-webkit-details-marker{
    display: none;
}

.privacy__accordion__heading{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.privacy__accordion__badge{
    display: flex;
    padding: 4px 8px;
    width: fit-content;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 30px;
    background: #E8F1FE;

    color: #136CED;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.25px;
}

.privacy__accordion__title{
    color: #191919;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.35px;    
}

.privacy__accordion__toggle{
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: url('../assets/svg/privacy-down.svg') center / contain no-repeat;
}

.privacy__accordion__item[open] .privacy__accordion__toggle{
    background-image: url('../assets/svg/privacy-up.svg');
}

.privacy__accordion__panel{
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.privacy__accordion__detail{
    color: #191919;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: -0.21px;
}

.privacy__accordion__detail span{
    font-size: 13px;
    line-height: 1.2;
}

body:has(#sub__privacy__visual__wr),
body:has(#sub__privacy__visual__wr) *{
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body:has(#sub__privacy__visual__wr)::-webkit-scrollbar,
body:has(#sub__privacy__visual__wr) *::-webkit-scrollbar{
    display: none;
    width: 0;
    height: 0;
}

.privacy__table__wrap{
    width: 100%;
    overflow: hidden;
    border: 1px solid #EEE;
    border-radius: 8px;
    box-sizing: border-box;
}

.privacy__table{
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.privacy__table caption{
    display: none;
}

.privacy__table th{
    color: #191919;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.18px;
    word-break: keep-all;
}

.privacy__table td{
    color: #5A5F66;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.18px;
}

.privacy__table th,
.privacy__table td{
    width: 20%;
    padding: 10px;
    text-align: left;
    border-right: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
    box-sizing: border-box;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
}

.privacy__table th:last-child,
.privacy__table td:last-child{
    border-right: 0;
}

.privacy__table tbody tr:last-child td{
    border-bottom: 0;
}

.privacy__table th{
    background: #F6F7F9;
}

.privacy__table.number01 th:nth-child(1),
.privacy__table.number01 td:nth-child(1) {
    width: 16.4%;
}

.privacy__table.number01 th:nth-child(2),
.privacy__table.number01 td:nth-child(2),
.privacy__table.number01 th:nth-child(3),
.privacy__table.number01 td:nth-child(3),
.privacy__table.number01 th:nth-child(4),
.privacy__table.number01 td:nth-child(4) {
    width: 21.2%;
}

.privacy__table.number05 th:nth-child(1),
.privacy__table.number05 td:nth-child(1) {
    width: 20%;
}

.privacy__table.number05 th:nth-child(2),
.privacy__table.number05 td:nth-child(2) {
    width: 50%;
}

.privacy__table.number05 th:nth-child(3),
.privacy__table.number05 td:nth-child(3) {
    width: 30%;
}

.privacy__table.number08 th:nth-child(1),
.privacy__table.number08 td:nth-child(1),
.privacy__table.number08 th:nth-child(2),
.privacy__table.number08 td:nth-child(2) {
    width: 50%;
}

.privacy__table.number08 th[colspan="2"]{
    width: 100%;
    text-align: center;
}

/* 스페셜 퀴즈 */
#sub__specialquiz__visual__wr{
    min-height: 100dvh;
}

.specialquiz__guide[hidden],
.specialquiz__mission[hidden],
.specialquiz__complete[hidden],
.specialquiz__already[hidden],
.specialquiz__guide__bottom[hidden]{
    display: none !important;
}

.specialquiz__guide__content{
    width: 100%;
    margin-top: 0;
}

.specialquiz__guide__image{
    display: block;
    width: 100%;
    height: auto;
}

.specialquiz__guide__end{
    width: 100%;
    height: 1px;
}

.specialquiz__guide__bottom{
}

.specialquiz__start__button{
}

.specialquiz__mission.is-active{
    display: flex;
}

.specialquiz__mission__content{
}

.specialquiz__mission__title{
}

.specialquiz__mission__choices{
}

.specialquiz__mission__choices .mission__select__item.is-selected{
}

.specialquiz__mission__bottom{
}

.specialquiz__submit__button{
}

@media screen and (max-width: 767px){
    #sub__specialquiz__visual__wr:has(.specialquiz__mission.is-active){
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .specialquiz__mission.is-active{
        display: block;
        height: calc(100dvh - 60px);
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    .specialquiz__mission.is-active .inner__full__mobile{
        min-height: 100%;
        height: auto;
        padding-bottom: calc(54px + 110px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }
}

.specialquiz__submit__button:disabled{
    background: #D7D9DD;
    color: #fff;
    cursor: not-allowed;
    pointer-events: none;
}

.specialquiz__submit__button:not(:disabled){
    background: var(--color__main);
    color: #fff;
    cursor: pointer;
}

.specialquiz__complete.is-active,
.specialquiz__already.is-active{
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    min-height: calc(100dvh - 60px);
    overflow: hidden;
}

#sub__specialquiz__visual__wr:has(.specialquiz__complete.is-active),
#sub__specialquiz__visual__wr:has(.specialquiz__already.is-active){
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
}

.specialquiz__complete .inner__full__mobile,
.specialquiz__already .inner__full__mobile{
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

.specialquiz__complete .sub__complete__content,
.specialquiz__already .sub__complete__content{
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 767px){
    .specialquiz__complete .inner__full__mobile,
    .specialquiz__already .inner__full__mobile{
        padding-top: 0;
    }
}

.specialquiz__already__text{
    margin: 0;
    color: #191919;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.6px;
    text-align: center;
}

.specialquiz__result__accent{
    color: var(--color__main);
}

#specialquiz__result__modal{
    padding: 0 0 40px;
}

#specialquiz__result__modal .modal__wr{
    padding: 0 20px;
}

#specialquiz__result__modal .mission__feedback__btn{
    position: relative;
    z-index: 5;
    pointer-events: auto;
}
#sub__privacy__visual__wr,
#sub__privacy__visual__wr .inner__full__mobile{
    overflow-x: hidden;
    overflow-y: auto;
}