@charset "utf-8";

ul, li {list-style:none outside;}
A {text-decoration:none;}


/* date */
#date_layer {text-align:left;;}

#date_layer #box {width:120px;}
#date_layer #box .top {width:20px; float:left;}
#date_layer #box .day {width:80px; float:left;}

#date_layer .w {font-weight:bold; line-height:20px; color:#fff; font-size:16px; }
#date_layer .title {color:#fff; font-size:12px;  padding:0 0 0 0; background:url(./img/bg_01.gif) repeat-x;}
#date_layer .title1 {color:#fff; font-size:12px;  padding:0 0 0 0; background:url(./img/bg_01.gif) repeat-x;}
#date_layer .title2 {color:#fff; font-size:12px;  padding:0 0 0 0; background:url(./img/bg_01.gif) repeat-x;}

#date_layer .sun1 {color:#FE7676; font-size:12px; float:left;}
#date_layer .sat1 {color:#82D4FF; font-size:12px; float:left;}
#date_layer .day1 {color:#fff; font-size:12px; float:left;}

#date_layer .sun2 {font-weight:bold; line-height:20px; color:#FE7676; font-size:12px; float:left;}
#date_layer .sat2 {font-weight:bold; line-height:20px; color:#82D4FF; font-size:12px; float:left;}
#date_layer .day2 {font-weight:bold; line-height:20px; color:#FF9933; font-size:12px; float:left;}

#date_layer td:nth-last-of-type(1) .day2 { color:#fff; }

#date_layer .sun3 {color:#ffbebe; font-size:11px; }
#date_layer .sat3 {color:#b8b8ff; font-size:11px; }
#date_layer .day3 {color:#999999; font-size:11px; }

#date_layer .dot {color:#000000; font-size:12px; }

#date_layer .check {color:#126420; font-size:11px; }
#date_layer .check2 {color:#999999; font-size:11px; }

#date_layer img, #list_layer img{ max-height:66px; }
#date_layer table { color:#fff; background:#131826; }

/* list */
#list_layer .input {width:600px; height:22px; background-color:#f3f3f3; border:0px; padding:5px 2px 2px 2px; font-weight:bold; color:#333333;  font-size:12px;}

#list_layer .msg {padding:6px 0 0 3px; float:left;}
#list_layer .sub {padding:5px 0 0 3px; float:left;}
#list_layer .submit {padding:3px 0 0 5px; float:left;}

#list_layer #info li {line-height:18px; color:#898989;  font-size:11px;}

#list_layer .title {font-weight:bold; color:#333333;  font-size:12px;}
#list_layer .list {line-height:20px; color:#898989;  font-size:11px;}

#list_layer .no {line-height:25px; font-size:12px; color:#898989;}

#list_layer .bgcolor0 {background-color:#ffffff;}
#list_layer .bgcolor1 {background-color:#f1f1f1;}
#list_layer .bgcolor2 {background-color:#ffffff;}

/* 전체 컨테이너 스타일 */
.attendance-container {
    display: inline-block;
    padding: 20px;
    background-color: #002f4b;
    border-radius: 10px;
	width:100%;
    max-width: 1000px;
    margin: 0 auto;
    color: #fff;
}

/* 출석 정보 박스 스타일 */
.attendance-info-box {
    background-color: #1b3a57;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    color: #fff;
}

.calendar-img {
    max-width: 60px;
    margin-right: 20px;
}

.attendance-info h2 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 10px;
    border-bottom: 2px solid #4a6073;
    padding-bottom: 5px;
}

.attendance-info { width:100%; }

.attendance-info ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.attendance-info li {
	font-size:14px;
    background-color: #1b3a57;
    border-radius: 8px;
    padding: 15px;
	font-weight:300;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.attendance-info li:hover {
    transform: translateY(-5px);
}

.attendance-info li strong {
    font-size: 14px;
    margin-right: 10px;
	color:#f2c459;
	font-weight:600;
}

.attendance-info li::before {
    content: "★";
    font-size: 16px;
    color: #f39c12;
    margin-right: 10px;
}

/* 출석 상태 박스 스타일 */
.attendance-status-box {
    background-color: #1b3a57;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.attendance-status-box h2 {
    font-size: 18px;
    margin-bottom: 10px;
    border-bottom: 2px solid #4a6073;
    padding-bottom: 5px;
}

.status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.status-box {
    text-align: center;
    padding: 10px;
    background-color: #233b5f;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.status-box img {
    max-width: 50px;
    margin-bottom: 8px;
}

.status-box p {
    font-size: 14px;
}

/* 개근 진행 정보 박스 */
.attendance-progress {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.progress-box {
    background-color: #233b5f;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.progress-box p {
    margin: 0;
    font-size: 14px;
}

.progress-box strong {
    font-size: 16px;
    color: #f39c12;
}

/* 반응형 디자인 */
@media screen and (max-width: 768px) {
    .attendance-container {
        grid-template-columns: 1fr;
    }

    .status {
        grid-template-columns: 1fr;
    }

    .attendance-progress {
        grid-template-columns: 1fr;
    }
}