ul,li{list-style:none;margin:0;padding:0}
/* section calendar */
:root{
    --box-size:66%;
    --box-margin:calc((100% - var(--box-size)) / 2);
}

.milk-container {
    height:650px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:#fbf6f0;
    font-family: 'SUIT Variable', sans-serif;
    max-width: 460px;
    width:100%;
    margin: 0 auto;
    color:#000000;
}

.milk-content {position: relative;padding:30px 40px 0;}
.milk-content .milk-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.milk-content .cal_title{font-size:16px;font-weight:900}
.milk-content .milk-nav {display: flex;justify-content: center;align-items: center;font-weight: 900;font-size: 24px;line-height: 24px}
.milk-content .milk-nav .year-month {width: 140px;text-align: center}
.milk-content .milk-nav .nav {display: flex;border: 1px solid #333333;border-radius: 5px}

.milk-content .milk-nav .go-prev,
.milk-content .milk-nav .go-next {display: block;width: 24px;height: 24px;font-size: 0;display: flex;justify-content: center;align-items: center}
.milk-content .milk-nav .go-prev::before,
.milk-content .milk-nav .go-next::before {content: "";display: block;width:7px;height: 7px;border: 2px solid #000;border-width: 2px 2px 0 0;transition: border 0.1s}
.milk-content .milk-nav .go-prev:hover::before,
.milk-content .milk-nav .go-next:hover::before {border-color: #ed2a61}
.milk-content .milk-nav .go-prev::before {transform: rotate(-135deg)}
.milk-content .milk-nav .go-next::before {transform: rotate(45deg)}


.milk-content .days {display:grid;grid-template-columns:repeat(7,1fr);border-bottom: 1px solid #e4e0da;border-top: 1px solid #e4e0da;font-size:16px;font-weight:900}
.milk-content .days > li{aspect-ratio:100/75;}

.milk-content .dates {display:grid;grid-template-columns:repeat(7,1fr);font-size:14px;font-weight:600;}

/* 배경 */
.milk-content li {display:flex;align-items: center;justify-content: center;width:100%;aspect-ratio:100/97;color: #191919;text-align: center;position:relative}
.milk-content li.check::before{width:100%;height:var(--box-size);background:#f2e3d2;content:'';display:block}

/* 월요일 */
.milk-content li:nth-child(7n-6)::before {
    border-top-left-radius:50px;
    border-bottom-left-radius:50px;
    margin-left:var(--box-margin);
}
/* 일요일 */
.milk-content li:nth-child(7n)::before {
    border-top-right-radius:50px;
    border-bottom-right-radius:50px;
    margin-right:var(--box-margin);
}

.milk-content .dates > li.c1::before {
    border-top-left-radius:50px;
    border-bottom-left-radius:50px;
    margin-left:var(--box-margin);
}

.milk-content .dates > li.c5::before {
    border-top-right-radius:50px;
    border-bottom-right-radius:50px;
    margin-right:var(--box-margin);
}



/* 날짜 표시 */
.milk-content .dates > li > div{
    height:var(--box-size);
    width: var(--box-size);
    position:absolute;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-sizing:border-box;
    border-radius:50px;
    border:2px solid transparent;
    font-weight:900;
    transition:background .1s;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 선택 */
.milk-content .dates > li.check > div{height:90%;width:var(--box-size);border-radius:50px;position:absolute;display:flex;align-items: center;justify-content: center;flex-direction: column;transition:all .2s}
.milk-content .dates > li.c1 > div{background:#ff2400;border-color:#ff2400;color:#ffffff!important;font-weight:800}
.milk-content .dates > li.c2 > div{background:#ffffff;border-color:#009cff;color:#000000!important}
.milk-content .dates > li.c3 > div{background:#ffffff;border-color:#329712;color:#000000!important}
.milk-content .dates > li.c4 > div{background:#ffffff;border-color:#990c6c;color:#000000!important}
.milk-content .dates > li.c5 > div{background:#000000;border-color:#000000;color:#ffffff!important;font-weight:800}

.milk-content .dates > li.check > div::after{display:block;font-size:11px;font-weight:900}
.milk-content .dates > li.c1 > div::after{content:'도착';color:#ffffff;font-weight:800}
.milk-content .dates > li.c2 > div::after{content:'출고';color:#009cff}
.milk-content .dates > li.c3 > div::after{content:'통관';color:#329712}
.milk-content .dates > li.c4 > div::after{content:'입고';color:#990c6c}
.milk-content .dates > li.c5 > div::after{content:'출고';color:#ffffff;font-weight:800}

.milk-content .dates > li:not(.check):not(.disable) > div:hover{height:var(--box-size);width: var(--box-size);background:#f2e3d2}

/* 오늘 */
.current.today {background: rgb(242 242 242);}

/* 토요일 */
.milk-content li:nth-child(7n) {/* color: #3c6ffa; */}

/* 일요일 */
.milk-content li:nth-child(7n -6) {color: #ed2a61;}

/* 날짜 벗어남 */
.milk-content li.prev,
.milk-content li.next,
.milk-content li.disable {color: #cccccc;}

/* 공휴일 */
.milk-content li.holiday {color: #ed2a61;}


.milk-desc {padding:0 45px}
.milk-desc > div{font-size:13px;font-weight:700;padding:7px 0;display:flex;align-items:center;gap:10px}
.milk-desc > div:not(:first-child){border-top:1px solid #e4e0da}
.milk-desc > div > span{font-size:12px;display:inline-block;width:70px;border-radius:50px;color:#ffffff;font-weight:500;text-align:center;padding:2px}
.milk-desc > div > span.c1 {background:#ff2400;font-weight:700}
.milk-desc > div > span.c2 {background:#009cff}
.milk-desc > div > span.c3 {background:#329712}
.milk-desc > div > span.c4 {background:#990c6c}
.milk-desc > div > span.c5 {background:#000000;font-weight:800}
.milk-desc2 {font-size:12px;font-weight:800;text-align:center;padding:5px 10px 15px;word-break:keep-all;display:grid;gap:5px}
.milk-desc2 > div > br{display:none}





@media (max-width: 768px)
{
    .milk-container{height:auto}
    .milk-content{padding:30px 15px 0}
    .milk-desc{padding:0 15px}
    .milk-desc2{padding:5px 15px 15px;text-align:left}
    /* .milk-desc2 > div > br{display:unset} */
}