.leave-simulator-title {
    text-align: center;
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: bold;
    color: #ffffff;
    padding: .5em 0 .2em 0;
    background-image: linear-gradient(45deg, rgb(22 157 122), rgb(0 153 40));
    border-radius: 20px 20px 0 0;
}
.calendar-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 350px;
    margin: 10px 0;
    font-size: 14px;
}
.calendar-table th, .calendar-table td {
    border: 1px solid #ccc;
    text-align: center;
    padding: 6px 0;
    background-color: #fff;
}
.calendar-table td.empty {
    background: #e8e8e8;
    border: none;
    color: #adadad;
}
.calendar-table td.weekend-sat {background-color: #cce5ff; color: #004085;}
.calendar-table td.weekend-sun {background-color: #ffcccc; color: #c00;}
.calendar-table td.holiday {background-color: #ffcccc; color: #c00;}
.calendar-table td.paidleave {background-color: #a0d468; color: #2b5000;}
.calendar-table td.today {border: 2px solid #0080ff;}
.legend {
    margin: 10px 0;
    font-size: 14px;
    text-align: center;
}
.legend-item {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: middle;
}
.green-box { background-color: #a0d468; border: 1px solid #2b5000;}
.red-box { background-color: #ffcccc; border: 1px solid #c00;}
.legend .red-box {margin-left: 10px;}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}
.calendar-wrapper {
    width: 100%;
    color: #585858;
    border: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 5px;
    flex: 1;
}
.calendar-wrapper h4 {
    text-align: center;
    margin: 0 0 8px 0;
    border-left: none !important;
}
#leave-simulator-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #e2f5e4;
    border: 1px solid #008928;
    padding: 2em;
    border-radius: 0 0 20px 20px;
}
.flex-break {flex-basis: 100%; height: 0;}
#simulate-btn {
    background-image: linear-gradient(45deg, rgba(8, 147, 235, 1), rgb(26 180 0));
    color: #fff;
    border-radius: 50px;
    padding: 0.2em 2em;
    font-size: 1.8rem;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .14);
}
#simulate-btn:hover {
    opacity: .8;
    transition: .1s;
}
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: flex-start;
    padding: 0 2em;
}
.form-item {
    display: flex;
    flex-direction: row;
    min-width: 100px;
    align-items: center;
    color: #585858;
}
.form-item select, .form-item input[type="number"] {
    height: 55px;
    padding: 5px 18px;
    font-size: 27px;
    box-sizing: border-box;
    margin: 0 !important;
}
.form-row .form-item select {
    background-color: #ffffff;
}
.form-row:nth-of-type(2) .form-item label {
    display: flex;
    font-size: 2rem;
}
.form-item label {
    font-size: 2.6rem;
}
.form-row:nth-of-type(2) {
    margin-bottom: 1em;
}
#exclude-gw, #exclude-nenmatsu {
    width: 35px;
    height: 35px;
    cursor: pointer;
    align-self: center;
    margin-right: 10px;
}
.monthly-summary {text-align: center;}
.calendar-table thead th {
    background-color: #fff;
    color: unset;
}
.calendar-table thead th:first-child {
    background-color: #ffcccc;
}
.calendar-table thead th:last-child {
    background-color: #cce5ff;
}
.calendar-table td.empty.prev-month,
.calendar-table td.empty.next-month {
    border: 1px solid #ccc;
}
#ls-results {
    background: #e2f5e4;
    border-radius: 10px;
    padding: 1em;
}
#ls-results h5 {
    text-align: center;
    font-size: 1.6rem;
}
.ls-result-item {
    margin-bottom: 2em !important;
    background: #fff;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .1);
}
.ls-result-item.sub {
    background: none;
    box-shadow: none;
    margin-bottom: 1em !important;
}
.result-top {
    text-align: center;
    background: linear-gradient(45deg, rgb(0 153 40), rgb(22 157 122));
    color: #fff;
}
.ls-period.sub {
    width: 42%;
    margin: auto !important;
}
.ls-period:not(.sub) {
    text-align: center;
}
.ls-period:not(.sub) span {
    display: block;
    width: 40%;
    margin: auto;
    border-radius: 50px;
    color: #fff;
    background: #129c6d;
}

@media screen and (max-width: 768px) {
    .leave-simulator-title {font-size: 1.6rem; padding: .7em 0 .5em 0;}
    #leave-simulator-form {padding: 1em;}
    .calendar-grid {gap: 5px !important;}
    .form-item {flex-direction: column;}
    .form-item label {font-size: 2rem;}
    .form-row:nth-of-type(2) .form-item label {font-size: 1.8rem;}
    .form-row:nth-of-type(2) {margin-bottom: 0;}
    label[for="year-select"], label[for="month-select"], label[for="paidleave-input"] {text-align: center;}
    /*label[for="year-select"] span, label[for="month-select"] span, label[for="paidleave-input"] span {display: none;}*/
    .form-row {gap: 0.5em 1em; padding: .5em;}
    #year-select, #month-select {margin-right: .5em;}
    .form-item select {height: 45px;font-size: 22px;}
    .cal-pair {flex-direction: column;}
    .ls-maxstreak {font-size: 2rem !important;}
    .ls-maxstreak span {font-size: 3rem !important;}
    .ls-tag {
        font-size: 1.5rem !important;
        margin-top: -1em !important;
        padding-bottom: .5em !important;
    }
    .ls-period {
        font-size: 1.2rem !important;
        line-height: 1.5em;
        margin-top: 10px !important;
    }
    .ls-period.sub {width: 100%; padding: 5px;}
    .ls-period:not(.sub) span {width: 80%; padding: 4px;}
}
@media screen and (min-width: 769px) {
    .single-month-wrapper {
        display: flex;
        flex-direction: row;
        gap: 15px; /* 달력 사이 간격 */
        justify-content: center;
        align-items: flex-start;
    }
}