/* 엘스트링 바이올린 학원 - 커스텀 스타일 */

:root {
    --primary: #2c3e6b;
    --primary-light: #3d5a99;
    --accent: #c49a6c;
    --bg: #f5f3ef;
}

body {
    background-color: var(--bg);
    font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
}

/* 네비게이션 */
.navbar {
    background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.navbar-brand {
    font-weight: bold;
    font-size: 1.3rem;
    letter-spacing: 1px;
}

/* 로고 아이콘 */
.logo-icon {
    height: 40px;
    width: auto;
    margin-right: 8px;
    vertical-align: middle;
}

/* 카드 */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.card-header {
    border-radius: 12px 12px 0 0 !important;
}

/* 시간 슬롯 버튼 */
.slot-btn {
    min-width: 85px;
    margin: 3px;
    border-radius: 8px;
    font-size: 0.9rem;
    padding: 8px 4px;
    transition: all 0.2s;
}
.slot-available {
    background-color: #e8f5e9;
    border: 1.5px solid #66bb6a;
    color: #2e7d32;
}
.slot-available:hover {
    background-color: #66bb6a;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(102,187,106,0.4);
}
.slot-booked {
    background-color: #fce4ec;
    border: 1.5px solid #ef5350;
    color: #c62828;
}
.slot-mine {
    background-color: #e3f2fd;
    border: 1.5px solid #42a5f5;
    color: #1565c0;
}
.slot-past {
    background-color: #f0f0f0;
    border: 1.5px solid #bdbdbd;
    color: #9e9e9e;
    opacity: 0.6;
}

/* 날짜 카드 */
.date-card {
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 10px !important;
    border: 1.5px solid #dee2e6;
}
.date-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border-color: var(--primary);
}
.date-card.selected {
    border: 2px solid var(--primary) !important;
    background-color: #eef1f7;
}

/* 로그인 카드 */
.login-card {
    border-radius: 16px;
    overflow: hidden;
}
.login-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    padding: 2rem;
    text-align: center;
}
.btn-login {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    border: none;
    padding: 10px;
    font-size: 1.05rem;
}
.btn-login:hover {
    background: var(--primary);
    color: white;
}

/* 푸시 알림 버튼 */
.push-btn-off {
    background-color: #dc3545 !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 4px 10px !important;
    margin: 0 4px;
    font-weight: 600;
    box-shadow: 0 0 0 rgba(220, 53, 69, 0.5);
    animation: pulse-bell 2s infinite;
}
.push-btn-off:hover {
    background-color: #c82333 !important;
    color: #fff !important;
}
@keyframes pulse-bell {
    0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
.push-btn-on {
    background-color: #ffc107 !important;
    color: #212529 !important;
    border-radius: 6px;
    padding: 4px 10px !important;
    margin: 0 4px;
    font-weight: 600;
}
.push-btn-on:hover {
    background-color: #ffca2c !important;
    color: #212529 !important;
}

/* ============================================================
   반응형 - 태블릿 (iPad 등, 992px 이하)
   ============================================================ */
@media (max-width: 991.98px) {
    .navbar-brand {
        font-size: 1.1rem;
    }
    .logo-icon {
        height: 32px;
        width: auto;
    }
    /* 네비 아이템을 더 작게 */
    .navbar-text, .nav-link {
        font-size: 0.9rem;
    }
    /* 카드 헤더 패딩 축소 */
    .card-header h3, .card-header h4, .card-header h5 {
        font-size: 1.05rem;
    }
    /* 시간 슬롯 */
    .slot-btn {
        min-width: 70px;
        font-size: 0.8rem;
        padding: 6px 3px;
    }
    /* 달력 셀 */
    .table td, .table th {
        padding: 0.3rem !important;
    }
    /* 페이지 상단 여백 */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    /* h3 축소 */
    h3 {
        font-size: 1.4rem;
    }
    /* 쉬는시간 설정 슬롯 */
    .hour-half {
        width: 24px !important;
        height: 32px !important;
    }
    .hour-label {
        font-size: 0.7rem !important;
    }
}

/* ============================================================
   반응형 - 스마트폰 (767px 이하)
   ============================================================ */
@media (max-width: 767.98px) {
    body {
        font-size: 14px;
    }

    /* 네비게이션: 햄버거 느낌으로 세로 쌓기 */
    .navbar .container {
        flex-wrap: wrap;
    }
    .navbar-brand {
        font-size: 1rem;
    }
    .logo-icon {
        height: 26px;
        width: auto;
    }
    .navbar-nav {
        width: 100%;
        flex-direction: row;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 4px;
    }
    .navbar-text {
        font-size: 0.8rem;
    }
    .nav-link {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }

    /* 페이지 상단 타이틀 */
    h3 {
        font-size: 1.15rem;
    }
    .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* 카드 */
    .card {
        border-radius: 8px;
    }
    .card-body {
        padding: 0.75rem;
    }
    .card-header {
        padding: 0.5rem 0.75rem;
    }
    .card-header h5, .card-header h4 {
        font-size: 0.95rem;
    }

    /* 버튼 */
    .btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }
    .btn-sm {
        font-size: 0.75rem;
    }

    /* 상단 버튼 그룹은 세로 정렬 */
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 6px;
    }
    .d-flex.justify-content-between > div {
        width: 100%;
    }
    .d-flex.justify-content-between > div .btn {
        margin-bottom: 4px;
    }

    /* 시간 슬롯 */
    .slot-btn {
        min-width: 60px;
        font-size: 0.75rem;
        padding: 5px 2px;
        margin: 2px;
    }

    /* 달력 */
    .table td, .table th {
        padding: 0.15rem !important;
        font-size: 0.75rem;
    }
    /* 달력 셀 내 날짜 */
    .date-circle, td .rounded-circle {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.8rem;
    }

    /* 쉬는 시간/정기레슨 설정: 슬롯 작게 */
    .hour-half {
        width: 20px !important;
        height: 28px !important;
    }
    .hour-label {
        font-size: 0.65rem !important;
    }
    .hour-slots {
        border-width: 1px !important;
    }
    .day-slot {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.85rem;
    }

    /* 테이블 폰트 축소 */
    .table {
        font-size: 0.8rem;
    }

    /* 폼 입력 */
    .form-control, .form-select {
        font-size: 0.85rem;
    }
    .form-control-sm, .form-select-sm {
        font-size: 0.75rem;
    }

    /* 주간 예약현황 셀 */
    td strong {
        font-size: 0.75rem;
    }

    /* alert 여백 축소 */
    .alert {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    /* 로그인 카드 */
    .login-header {
        padding: 1.5rem 1rem;
    }
    .login-header h3 {
        font-size: 1.2rem;
    }
}

/* ============================================================
   초소형 기기 (480px 이하)
   ============================================================ */
@media (max-width: 480px) {
    /* 주간 예약현황 - 시간 열 최소화 */
    .table-responsive {
        font-size: 0.7rem;
    }
    /* 수강생 관리 테이블 스크롤 */
    .table-hover {
        font-size: 0.75rem;
    }
    /* 네비 이름 생략 */
    .navbar-text {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}