@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

.attendance-wrap {
    width: 1920px;
    background: #fbfafa;
    padding: 3rem 0;
    user-select: none;
    -webkit-user-drag: none;
    font-family: 'GmarketSans', sans-serif;
}
.attendance-title .title {
    color: #000;
    font-weight: 900;
    text-align: center;
}
.attendance-title .title.main {
    font-size: 45px;
    margin-top: 15px;
    margin-bottom: 0;
}
.attendance-title .title.sub {
    font-size: 24px;
    margin-bottom: 15px;
    margin: 0;
}
.attendance-calendar-wrap {
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    margin-top: 2rem;
    width: 800px;
    color: #4f4f4f;
}

.attendance-calendar-wrap .separator-line {
    height: .3rem;
    background: #CCED00;
}

.attendance-calendar-wrap .week-days {
    display: flex;
    /*justify-content: space-around;*/
    padding: 15px 0;
    font-size: 32px;
}

.attendance-calendar-wrap .week-days div {
    width: 100%;
    text-align: center;
    color: #575757;
}

.attendance-calendar-wrap .calendar-wrap .SUN {
    color: #E03E1A;
}
.attendance-calendar-wrap .calendar-wrap .SAT {
    color: #3047D7;
}

.attendance-calendar-wrap .calendar {
    display: flex;
    flex-direction: column;
}
.attendance-calendar-wrap .week-wrap {
    display: flex;
    justify-content: space-around;
}
.attendance-calendar-wrap .day-wrap {
    width: 100%;
    aspect-ratio: 1;
    padding: .9rem;
}
/*.attendance-calendar-wrap .day-circle {*/
/*    position: relative;*/
/*    height: 100%;*/
/*    border: solid 2px #CCED00;*/
/*    border-radius: 50%;*/
/*}*/
.attendance-calendar-wrap .day-umbrage {
    position: relative;
    height: 100%;
    background-repeat: no-repeat;     /* 반복 없음 */
    background-size: cover;           /* 영역 가득 채움 */
    background-position: center;      /* 중앙 정렬 */
    background-image: url("/img/attend/umbrage_daily.png");
}
.attendance-calendar-wrap .day-umbrage.fail {
    /*background-color: #D3D3D3;*/
}
.attendance-calendar-wrap .day-umbrage.success {
    /*background-color: #BAD800;*/
}
.attendance-calendar-wrap .day-umbrage.special {
    background-image: url("/img/attend/umbrage_special.png");
}
.attendance-calendar-wrap .day-umbrage.special.success {
    /*background-color: #FC585E;*/
}
.attendance-calendar-wrap .day {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    font-size: 24px;
    color: #575757;
}

.attendance-calendar-wrap .attendance-history-wrap {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: end;
}
.attendance-calendar-wrap .attendance-history-wrap .attendance-history-text {
    font-size: 26px;
}
.attendance-calendar-wrap .attendance-history-wrap .attendance-history-day {
    position: relative;
    font-size: 32px;
}
.attendance-calendar-wrap .attendance-history-wrap .under-bar {
    position: absolute;
    width: 100%;
    height: 0.2rem;
    background: #CCED00;
    bottom: 0.1rem;
}

.attendance-wrap .btn-attendance-wrap {
    margin-top: 2rem;
    text-align: center;
}

.attendance-wrap .btn-attendance-wrap .btn-attendance {
    font-size: 24px;
    display: inline-block;
    background: #CCED00;
    padding: 26px 0;
    width: 300px;
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
}