#attendance-calendar-container {
    max-width: 700px;
    margin: 20px auto;
    font-family: sans-serif;
}

.attendance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.attendance-header h2 {
    margin: 0;
}

#mark-attendance-btn {
    padding: 8px 15px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#mark-attendance-btn:hover {
    background-color: #005177;
}

#attendance-response {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    display: none; /* 기본적으로 숨김 */
}

#attendance-response.success {
    background-color: #d4edda;
    color: #155724;
    display: block;
}

#attendance-response.error {
    background-color: #f8d7da;
    color: #721c24;
    display: block;
}

.attendance-calendar {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.attendance-calendar th, .attendance-calendar td {
    border: 1px solid var(--border-basic);
    padding: 30px 10px;
    height: 50px;
    vertical-align: middle;
    position: relative; /* 날짜 위치 조정을 위해 추가 */
}

.attendance-calendar th {
    background-color: var(--bg-basic);
}

.attendance-calendar td .day-number {
    position: absolute;
    top: 2px;
    left: 5px;
    z-index: 1; /* 스탬프 위에 표시 */
}

.attendance-calendar td.today {
    background-color: var(--bg-basic-sub);
    font-weight: bold;
}

/* 출석 스탬프 스타일 */
.attendance-calendar td.attended {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><filter id="ink" x="0" y="0" width="100%" height="100%"><feTurbulence baseFrequency="0.05" numOctaves="2" result="noise"/><feDisplacementMap in="SourceGraphic" in2="noise" scale="2"/></filter></defs><circle cx="50" cy="50" r="42" fill="none" stroke="%238B0000" stroke-width="4" opacity="0.9"/><text x="50" y="60" font-family="serif" font-size="22" font-weight="bold" text-anchor="middle" fill="%238B0000" opacity="0.9" transform="rotate(-8 50 60)">출석</text></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    color: #555; /* 날짜 숫자가 보이도록 */
}