/**
 * ============================================================================
 * Calendar Component CSS
 * ============================================================================
 *
 * 파일: /assets/css/components/calendar.css
 * 설명: 학습캘린더 페이지 컴포넌트
 *
 * ============================================================================
 */

/* ==========================================================================
   캘린더 컨테이너
   ========================================================================== */

.calendar-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* ==========================================================================
   타이틀 영역 (Figma 디자인)
   ========================================================================== */

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}

.calendar-title-area {
    display: flex;
    align-items: center;
    gap: 4px;
}

.calendar-icon {
    flex-shrink: 0;
}

.calendar-title {
    font-family: 'Jua', sans-serif;
    font-size: 24px;
    color: #121212;
    margin: 0;
    font-weight: 400;
}

.guide-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: white;
    border: 1px solid #8105ed;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.guide-btn span {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #8105ed;
}

.guide-btn:hover {
    background: #8105ed;
}

.guide-btn:hover span {
    color: white;
}

.guide-btn:hover svg circle,
.guide-btn:hover svg path {
    stroke: white;
}

/* ==========================================================================
   가이드 박스 영역 (Figma 디자인)
   ========================================================================== */

.guide-boxes {
    display: flex;
    gap: 10px;
}

.guide-box {
    flex: 1 1 calc(50% - 5px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 20px;
}

.guide-box--purple {
    background: rgba(129, 5, 237, 0.05);
}

.guide-box--blue {
    background: rgba(4, 132, 255, 0.1);
}

.guide-box__content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.guide-box__title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.guide-box--purple .guide-box__title {
    color: #8105ed;
}

.guide-box--blue .guide-box__title {
    color: #0484ff;
}

.guide-box__title .highlight {
    color: inherit;
}

.guide-box__desc {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 400;
    margin: 0;
}

.guide-box--purple .guide-box__desc {
    color: #8105ed;
}

.guide-box--blue .guide-box__desc {
    color: #0484ff;
}

.guide-box__btn {
    padding: 8px 14px;
    border-radius: 50px;
    border: none;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.guide-box__btn--purple {
    background: #8105ed;
}

.guide-box__btn--purple:hover {
    background: #6a04c4;
}

.guide-box__btn--blue {
    background: #0484ff;
}

.guide-box__btn--blue:hover {
    background: #0370d9;
}

/* ==========================================================================
   교재 진행 표시 바 (Figma 디자인)
   ========================================================================== */

.book-progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef6250;
    border-radius: 50px;
    padding: 10px 16px;
    gap: 10px;
}

.book-progress-bar__content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.book-progress-bar__info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.book-progress-bar__progress {
    display: flex;
    align-items: center;
    gap: 4px;
}

.book-progress-bar__badge {
    background: white;
    color: #ef6250;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.book-progress-bar__label,
.book-progress-bar__text {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
}

.book-progress-bar__character {
    height: 44px;
    flex-shrink: 0;
}

.book-progress-bar__character img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* ==========================================================================
   캘린더 날짜 선택기 (Figma 디자인)
   ========================================================================== */

.calendar-date-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 0;
}

.calendar-date-selector__year {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #121212;
    text-align: center;
}

.calendar-date-selector__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.calendar-date-selector__arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.calendar-date-selector__arrow:hover {
    opacity: 0.6;
}

.calendar-date-selector__month {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 46px;
    font-weight: 700;
    color: #121212;
    line-height: 1;
}

.calendar-date-selector__today-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    background: white;
    border: 1px solid #ef6250;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calendar-date-selector__today-btn span {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #ef6250;
}

.calendar-date-selector__today-btn:hover {
    background: #ef6250;
}

.calendar-date-selector__today-btn:hover span {
    color: white;
}

.calendar-date-selector__today-btn:hover svg path,
.calendar-date-selector__today-btn:hover svg rect {
    stroke: white;
}

/* ==========================================================================
   일정 리스트
   ========================================================================== */

.calendar-container .schedule-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 날짜 그룹 */
.calendar-container .schedule-date-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 오늘 날짜 */
.calendar-container .schedule-date-group.today .schedule-items {
    border: 2px solid #ff5757;
}

/* 날짜 헤더 */
.calendar-container .date-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px;
}

.calendar-container .date-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.calendar-container .date-day {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #121212;
    white-space: nowrap;
}

.calendar-container .date-weekday {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #121212;
    white-space: nowrap;
}

.calendar-container .date-line {
    flex: 1;
    height: 1px;
    background: #b3b3b3;
}

.calendar-container .date-badge {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 50px;
    white-space: nowrap;
}

.calendar-container .date-badge.badge-holiday {
    background: white;
    border: 1px solid #ef6250;
    color: #ef6250;
}

/* 휴일인 경우 */
.calendar-container .schedule-date-group.holiday .date-day,
.calendar-container .schedule-date-group.holiday .date-weekday {
    color: #ef6250;
}

.calendar-container .schedule-date-group.holiday .date-line {
    background: #ef6250;
}

/* 수업 아이템 컨테이너 */
.calendar-container .schedule-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 수업 아이템 (Figma: Class Box) */
.calendar-container .schedule-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: white;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* 수업 카테고리 (Figma: Class Category - 70px) */
.calendar-container .schedule-type {
    width: 70px;
    flex-shrink: 0;
    font-family: 'Jua', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #808080;
    text-align: center;
    align-self: center;
}

/* 상태 텍스트 (완료/결석/출석/보강/빈칸) */
.calendar-container .status-text {
    font-family: 'Jua', sans-serif;
    font-size: 12px;
    font-weight: 400;
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.calendar-container .status-text.status-completed {
    color: #0484ff;
}

.calendar-container .status-text.status-absent {
    color: #ef6250;
}

.calendar-container .status-text.status-attended {
    color: #00c853;
}

.calendar-container .status-text.status-makeup {
    color: #8105ed;
}

/* 선생님 아바타 wrapper */
.calendar-container .teacher-avatar-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 선생님 아바타 (Figma: Teacher - 30x30) */
.calendar-container .teacher-avatar {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #b3b3b3;
    margin: 0;
}

/* 강사명 (Figma: 110px) */
.calendar-container .teacher-name {
    font-family: 'Jua', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #121212;
    width: 110px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: center;
}

/* 시간 영역 (Figma: Time - 주황점 + 시간) */
.calendar-container .schedule-time {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.calendar-container .schedule-time .time-dot {
    width: 6px;
    height: 6px;
    background: #ef6250;
    border-radius: 50%;
    flex-shrink: 0;
}

.calendar-container .schedule-time .time-text {
    font-family: 'Jua', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #121212;
    white-space: nowrap;
}

/* 버튼 영역 (Figma: Btn Box) - 오른쪽 정렬 */
.calendar-container .schedule-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex: 1;
    margin-left: auto;
}

/* 버튼 기본 스타일 (비활성 - 회색배경 검은글자) */
.calendar-container .status-btn {
    font-family: 'Jua', sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 6px 10px;
    border-radius: 50px;
    border: 1px solid #d9d9d9;
    background: #f3f3f3;
    color: #121212;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
}

/* 활성 버튼 (주황배경 흰글자) */
.calendar-container .status-btn.btn-active {
    background: #ef6250;
    border-color: #ef6250;
    color: white;
}

/* 상태별 버튼 색상 */
.calendar-container .status-btn.status-confirmed {
    background: #d9d9d9;
    color: #121212;
}

.calendar-container .status-btn.status-changeable {
    background: #8105ed;
    color: white;
}

.calendar-container .status-btn.status-completed {
    background: #d9d9d9;
    color: #121212;
}

.calendar-container .status-btn.status-select {
    background: white;
    border: 1px solid #d9d9d9;
    color: #121212;
}

.calendar-container .status-btn.status-enter {
    background: #ff5757;
    color: white;
}

.calendar-container .status-btn.status-makeup {
    background: #0484ff;
    color: white;
}

.calendar-container .status-btn.status-pending {
    background: #ffa500;
    color: white;
}

.calendar-container .status-btn.status-attendance {
    background: #d9d9d9;
    color: #121212;
}

.calendar-container .status-btn:hover {
    opacity: 0.8;
}

/* ==========================================================================
   반응형 디자인
   ========================================================================== */

/* 태블릿 */
@media (max-width: 1024px) {
    .calendar-title {
        font-size: 20px;
    }

    .guide-box {
        min-width: 300px;
    }

    .calendar-date-selector__month {
        font-size: 36px;
    }

    .calendar-container .schedule-item {
        flex-wrap: wrap;
        gap: 12px;
    }

    .calendar-container .schedule-type,
    .calendar-container .schedule-time {
        min-width: auto;
    }

    .calendar-container .schedule-status {
        width: 100%;
        justify-content: flex-end;
    }
}

/* 모바일 */
@media (max-width: 768px) {
    .calendar-header {
        flex-direction: row;
        align-items: center;
    }

    .calendar-title {
        font-size: 18px;
    }

    .guide-boxes {
        flex-direction: column;
    }

    .guide-box {
        min-width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .guide-box__btn {
        width: 100%;
        text-align: center;
    }

    .book-progress-bar {
        flex-direction: column;
        padding: 12px;
        border-radius: 20px;
        text-align: center;
    }

    .book-progress-bar__content {
        flex-direction: column;
        align-items: center;
    }

    .book-progress-bar__info,
    .book-progress-bar__progress {
        flex-wrap: wrap;
        justify-content: center;
    }

    .calendar-date-selector__month {
        font-size: 32px;
    }

    .calendar-container .schedule-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .calendar-container .schedule-teacher {
        width: 100%;
    }

    .calendar-container .schedule-time {
        width: 100%;
    }

    .calendar-container .schedule-status {
        width: 100%;
        justify-content: flex-start;
    }

    .calendar-container .status-btn {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ==========================================================================
   빈 일정 메시지
   ========================================================================== */

.empty-schedule {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-schedule__icon {
    width: 80px;
    height: 80px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.empty-schedule__icon i {
    font-size: 36px;
    color: #d9d9d9;
}

.empty-schedule__text {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #808080;
    margin: 0;
}