@charset "utf-8"; /* 초기화 */
.page-content {
    width: 100%;
    margin-top: 20px;
}

.coupon-request {
    margin-top: 20px;
}

.btn-req-refill {
    padding: 6px 15px;
    background: red;
    color: white;
    border: none;
    margin-top: 10px;
    font-size: 14px;
    border: 1px solid rgb(0 0 0 / 30%);
}

.page-content .progress-items {
    margin-top: 20px;
    padding: 2px;
    /* background: #ededed; */
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /* border: 1px solid black; */
}

.page-content .progress-items.fin {
}

.page-content .progress-items .item {
    background: white;
    /* padding: 5px; */
    margin-bottom: 10px;
    display: inline-block;
    border: 1px solid #d7d7d7;
}

.page-content .progress-items .item .title {
    font-size: 15px;
    font-weight: bold;
    padding: 6px 15px;
    background: #ebebeb;
    margin-bottom: 10px;
}

.page-content .progress-items .item .status {
    font-size: 15px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.page-content .progress-items .item .status.success {
    text-decoration: line-through;
}

.page-content .progress-items .item .status .val {
}

.page-content .progress-items .item .status.success .val {
    /* color: red; */
}

.status-explain {
    padding: 2px;
    margin-top: 10px;
}

.status-explain .tools {
}

.status-explain .explain {
    color: red;
    font-size: 15px;
    margin-top: 5px;
}

.status-explain .btn-req-confirm {
    padding: 6px 15px;
    background: red;
    color: white;
    border: none;
    margin-top: 10px;
    font-size: 14px;
    border: 1px solid rgb(0 0 0 / 30%);
}

.date-last-coupon {
    /* display: none; */
    margin-top: 15px;
}

.date-last-coupon .val {
    color: red;
}


html.dark-mode .btn-req-refill {
    background: #c00;
    color: white;
    border: 1px solid rgb(255 255 255 / 30%);
}

html.dark-mode .page-content .progress-items .item {
    background: #2d2d2d;
    border: 1px solid #555;
}

html.dark-mode .page-content .progress-items .item .title {
    background: #444;
    color: #e0e0e0;
}

html.dark-mode .page-content .progress-items .item .status {
    color: #c7c7c7;
}

html.dark-mode .status-explain .explain {
    color: #ff6b6b;
}

html.dark-mode .status-explain .btn-req-confirm {
    background: hsl(0 71% 40% / 1);
    color: hsl(0 0% 83% / 1);
    border: 1px solid rgb(255 255 255 / 14%);
}

html.dark-mode .btn-req-refill {
    background: hsl(0 71% 40% / 1);
    color: hsl(0 0% 83% / 1);
    border: 1px solid rgb(255 255 255 / 14%);
}

html.dark-mode .date-last-coupon {
    color: #c7c7c7;
}

html.dark-mode .date-last-coupon .val {
    color: #ff6b6b;
}