@import url("./normalize.css");
@import url("./theme.css");
@import url("./base.css");


/* 공통(데스크탑, 모바일) */

.notice-modal{
    position: absolute !important;
    top : 80px !important;
    right : 0px !important;
    left: initial !important;       /* common modal과 겹치는것 방지 */
    transform: initial !important;
   /* border: 1px solid #ededf0;*/
    width : 420px;
    max-height : 720px;
    margin: 6px 20px;
    padding : var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
    background-color: rgb(39, 40, 41) !important;
    color : white !important;
   /* border : 1px solid #ccc;*/
    border-radius: 12px;
    box-shadow : 0 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* 세로 스크롤이 필요한 경우만 스크롤이 나타나도록 설정 */
    z-index : 777; /*  */
}

.notify-title{
    font-size : var(--text-xl);
}

.notice-button-close{
    background : none !important;
    color: white !important;
    font-size : var(--text-lg);
    border : none;
    padding : var(--spacing-xs);
    position : absolute !important;
    right: 30px !important;
    top: 0 !important;
}

.notice-header{
    padding : var(--spacing-sm) var(--spacing-base) var(--spacing-sm) var(--spacing-base);
    border-bottom : 1px var(--secondary-color) solid;
    margin-bottom : var(--spacing-base);

}

.notification-card-wrap{
    margin-top : var(--spacing-lg);
    margin-bottom : var(--spacing-lg);
}


.notice-message-box{
    border : 1px solid var(--secondary-color);
    border-radius: 12px;
    background-color: #313233;
   /* background-color: var(--secondary-color);*/
    margin-top : var(--spacing-base);
    margin-bottom : var(--spacing-base);
    padding : var(--spacing-base) var(--spacing-base) var(--spacing-base) var(--spacing-base);
    white-space: normal; /*줄바꿈*/
}

/* 전체 읽음 버튼 상자*/
.notify-all-mark-read-box{
    display : flex;
    justify-content: end;

}

/* 전체 읽음 버튼 */
.notify-all-mark-read{
    padding: var(--spacing-sm) var(--spacing-base);
    background: var(--grey-background-color);
    border-radius: 1rem;
    cursor: pointer;
}


/* 알림 읽음 처리 */
.notify-read-button{
   /* position : absolute;*/
    /*top : 13px;*/
   /* right : 0;*/
    font-size: var(--text-sm);
    padding: var(--spacing-2xs) var(--spacing-xs);
    border-radius : 1rem;
    background : var(--grey-background-color);
}

/* 알림 Sender의 프로필 이미지 */
.thumb{
    width : 26px;
    height : 26px;
    margin-right : var(--spacing-sm);
    border-radius: 50%;
}

/* 읽음 처리된 알림이면 어둡게 */
.visited .thumb{
    filter: brightness(70%);
}


.thumb-img{
    border-radius: inherit;
}



.info-box{
    display: flex;
    align-items: center;
    margin-bottom : var(--spacing-xs);
    white-space: nowrap; /* 모든 텍스트를 한 줄로 유지 */
}


.notice-content{
    /*margin-top : var(--spacing-base);*/
}

.circle-divider{
    font-weight : 500;
    /*font-size: xx-large;
    vertical-align: sub;*/
    margin-left : var(--spacing-2xs);
    margin-right : var(--spacing-2xs);
}

.notice-time{
   /* margin-left : var(--spacing-sm);*/
    font-weight : 300;
    color : var(--light-grey-text-color);
    letter-spacing : -0.8px;  /* 문자 간격 줄이기 */
}

.notice-bottom-area{
    padding-top : var(--spacing-xl);
}

.more-text{
    text-align : center;
}

/*읽은 알람*/
.visited{
    color : #66666a;
}


/*데스크탑*/
@media (min-width: 768px) {

}

/*모바일 기기*/
@media (max-width: 767px){
    .notice-modal{
        position : fixed;
        width : 100%;
        height: -webkit-fill-available; /* WebKit-specific */
        height : calc(100vh - 180px);
        margin : 0;
        top : 0;
        right : 0;
    }

    .notice-bottom-area{
        padding-top : var(--spacing-xl);
    }

    /* 모바일 알림 Sender의 프로필 이미지 */
    .thumb{
        width : 22px;
        height : 22px;
        margin-right : var(--spacing-xs);
        border-radius: 50%;
    }

    /* 모바일 읽기 버튼 */
    .notify-read-button {
        padding: var(--spacing-2xs) var(--spacing-xs);
    }

    /* 모바일인경우 크기 줄이기 */
    .notice-time{
       font-size : var(--text-sm);
    }



}