/* Sub Subject Page Styles */
.btn-outline-primary {
    color: #096e33;
    border-color: #096e33;
    max-height: 35px;
    line-height: 35px !important;
    padding-top: 0 !important;
}
.btn-outline-primary:hover{
    background-color: #096e33 !important;
    color: white !important;
    border-color: #096e33 !important;
}

.btn-outline-primary:active {
    background-color: #0c9e49 !important;
    border-color: #0c9e49 !important;
    color: white !important;
}

/* Hero Banner */
.hero-banner {
    position: relative;
    height: 330px;
    /*background: linear-gradient(135deg, #0e2175 0%, #1a3db3 100%);*/
    background-image: url('http://choongang.kbsn.or.kr/upload/promo1.jpg');
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  /*  background: url('http://127.0.0.1:5500/images/hero-pattern.png') repeat;*/
    opacity: 0.1;
    z-index: 1;
}

.hero-banner .container {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-align: center;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
    text-align: center;
    margin-top: 1rem;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.sub-text {
    color: #fff;
    margin-top: -20px;
}


/* Notice Section */
.notice-section {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
}

.notice-text {
    color: #856404;
    font-weight: 500;
}

/* Month Tabs */
.month-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.month-tab {
    padding: 1rem 2rem;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    font-weight: 600;
    color: #495057;
    transition: all 0.3s ease;
    cursor: pointer;
}

.month-tab:hover {
    background: #e9ecef;
    border-color: #12861c;
}

.month-tab.active {
    background: #0c9e49;
    border-color: #0eac50;
    color: white;
}

/* Schedule Table */
.schedule-table-container {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    background: white;
}

.schedule-table {
    margin-bottom: 0;
    font-size: 0.8rem;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.schedule-table thead th {
    background: #343a40;
    color: white;
    border: 1px solid #495057;
    padding: 1rem 0.5rem;
    text-align: center;
    font-weight: 400;
    vertical-align: middle;
}

.schedule-table .sub-header th {
    background: #495057;
    font-size: 0.8rem;
    padding: 0.5rem;
}

.schedule-table tbody td {
    border: 1px solid #dee2e6;
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
}

.schedule-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Subject Rows */
.subject-row {
    background-color: #e9ecef;
}

.subject-cell {
    background: #088538 !important;
    color: white !important;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    /* writing-mode: vertical-rl; */
    text-orientation: mixed;
    min-width: 60px;
}

/* Table Columns */
.subject-col {
    width: 10%;
}

.course-col {
    width: 25%;
}

.schedule-col {
    width: 30%;
}

.hours-col {
    width: 8%;
}

.fee-col {
    width: 12%;
}

.remarks-col {
    width: 15%;
}


/* Footer Info */
.footer-info {
    background: rgb(244, 255, 244);
    padding: 2rem;
    border-radius: 8px;
    margin-top: 2rem;
}

.footer-title {
    color: rgb(0, 128, 128);
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-text {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 0;
}
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 3rem;
    position: relative;
    transition: all 0.6s ease;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 150px;
    height: 3px;
    background: linear-gradient(45deg, #007bff, #0056b3);
    border-radius: 2px;
}

/* 스크롤 애니메이션 */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.scroll-animate.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .section-title {
        font-size: 2rem;
    }

    .container {
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .schedule-table {
        font-size: 0.75rem;
    }
    
    .schedule-table thead th,
    .schedule-table tbody td {
        padding: 0.5rem 0.25rem;
    }
}

@media (max-width: 992px) {
    .schedule-table {
        font-size: 0.7rem;
    }
    
    .schedule-table thead th,
    .schedule-table tbody td {
        padding: 0.4rem 0.2rem;
    }
    
    .subject-cell {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        min-width: auto;
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 1.75rem;
    }

    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .month-tabs {
        flex-direction: column;
        align-items: center;
    }
    
    .month-tab {
        width: 100%;
        max-width: 300px;
    }
    
    .schedule-table {
        font-size: 0.65rem;
    }
    
    .schedule-table thead th,
    .schedule-table tbody td {
        padding: 0.3rem 0.15rem;
    }
    
    .subject-cell {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        min-width: auto;
        font-size: 0.65rem;
    }
    
    /* 테이블 가로 스크롤 최적화 */
    .schedule-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 2px solid #e9ecef;
        border-radius: 8px;
    }
    
    .schedule-table {
        min-width: 900px;
        margin-bottom: 0;
    }
    
    /* 모바일에서 테이블 스크롤 인디케이터 */
    .schedule-table-container::after {
        content: "← 좌우로 스크롤하여 전체 내용을 확인하세요 →";
        display: block;
        text-align: center;
        padding: 0.75rem;
        color: #6c757d;
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-top: 1px solid #dee2e6;
        font-weight: 500;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 1.75rem;
    }

    .hero-banner {
        padding: 2rem 0;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .schedule-table {
        font-size: 0.55rem;
        min-width: 550px;
    }
    
    .schedule-table thead th,
    .schedule-table tbody td {
        padding: 0.2rem 0.1rem;
    }
    
    .subject-cell {
        font-size: 0.55rem;
        padding: 0.15rem;
        min-width: 45px;
        max-width: 45px;
    }
    
    .footer-info {
        padding: 1rem;
    }
    
    /* 모바일에서 더 작은 폰트 */
    .schedule-table-container::after {
        font-size: 0.7rem;
        padding: 0.4rem;
        content: "← 좌우 스크롤 →";
    }
    
    /* 교육과정 셀 너비 더 줄이기 */
    .schedule-table tbody td:nth-child(2) {
        min-width: 80px;
        max-width: 100px;
    }
    
    /* 교육일정 셀 너비 조정 */
    .schedule-table tbody td:nth-child(3) {
        min-width: 70px;
        max-width: 90px;
    }
}

@media (max-width: 480px) {
    .schedule-table {
        font-size: 0.5rem;
        min-width: 500px;
    }
    
    .schedule-table thead th,
    .schedule-table tbody td {
        padding: 0.15rem 0.05rem;
    }
    
    .subject-cell {
        font-size: 0.5rem;
        min-width: 40px;
        max-width: 40px;
    }
    
    /* 매우 작은 화면에서 테이블 스크롤 힌트 강화 */
    .schedule-table-container::after {
        content: "← 스크롤 →";
        font-size: 0.65rem;
        padding: 0.3rem;
        background: #007bff;
        color: white;
        font-weight: 600;
    }
    
    /* 교육과정 셀 너비 더 줄이기 */
    .schedule-table tbody td:nth-child(2) {
        min-width: 70px;
        max-width: 90px;
    }
    
    /* 교육일정 셀 너비 조정 */
    .schedule-table tbody td:nth-child(3) {
        min-width: 60px;
        max-width: 80px;
    }
    
    /* 나머지 셀들 너비 조정 */
    .schedule-table tbody td:nth-child(4),
    .schedule-table tbody td:nth-child(5),
    .schedule-table tbody td:nth-child(6) {
        min-width: 40px;
        max-width: 60px;
    }
}

@media (max-width: 360px) {
    .schedule-table {
        font-size: 0.45rem;
        min-width: 450px;
    }
    
    .schedule-table thead th,
    .schedule-table tbody td {
        padding: 0.1rem 0.03rem;
    }
    
    .subject-cell {
        font-size: 0.45rem;
        min-width: 35px;
        max-width: 35px;
    }
    
    /* 교육과정 셀 너비 더 줄이기 */
    .schedule-table tbody td:nth-child(2) {
        min-width: 60px;
        max-width: 80px;
    }
    
    /* 교육일정 셀 너비 조정 */
    .schedule-table tbody td:nth-child(3) {
        min-width: 50px;
        max-width: 70px;
    }
    
    /* 나머지 셀들 너비 조정 */
    .schedule-table tbody td:nth-child(4),
    .schedule-table tbody td:nth-child(5),
    .schedule-table tbody td:nth-child(6) {
        min-width: 35px;
        max-width: 50px;
    }
    
    /* 스크롤 힌트 더 간단하게 */
    .schedule-table-container::after {
        content: "← →";
        font-size: 0.6rem;
        padding: 0.25rem;
    }
}

/* Animation for tab switching */
.schedule-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Table responsive improvements */
@media (max-width: 992px) {
    .schedule-table-container {
        font-size: 0.8rem;
    }
    
    .schedule-table thead th,
    .schedule-table tbody td {
        padding: 0.5rem 0.25rem;
    }
    
    /* 테이블 셀 텍스트 줄바꿈 방지 */
    .schedule-table tbody td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 교육과목 셀은 줄바꿈 허용 */
    .subject-cell {
        white-space: normal;
    }
}

/* 모바일 전용 레이아웃 */
@media (max-width: 768px) {
    /* 기존 테이블 숨기기 */
    .schedule-table-container {
        display: none !important;
    }
    
    /* 모바일 전용 카드 레이아웃 */
    .mobile-schedule-cards {
        display: block !important;
    }
    
    .mobile-schedule-cards .schedule-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        margin-bottom: 1rem;
        overflow: hidden;
        border: 1px solid #e9ecef;
    }
    
    .mobile-schedule-cards .card-header {
        background: linear-gradient(135deg, #088538 0%, #0a9d3f 100%);
        color: white;
        padding: 0.75rem 1rem;
        font-weight: 600;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .mobile-schedule-cards .card-body {
        padding: 1rem;
    }
    
    .mobile-schedule-cards .course-title {
        font-size: 1rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.75rem;
        line-height: 1.3;
    }
    
    .mobile-schedule-cards .schedule-info {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .mobile-schedule-cards .schedule-item {
        display: flex;
        align-items: center;
        padding: 0.5rem;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .mobile-schedule-cards .schedule-item.live {
        background: #e8f5e8;
        color: #2e7d32;
        border-left: 4px solid #4caf50;
    }
    
    .mobile-schedule-cards .schedule-item.weekday {
        background: #e3f2fd;
        color: #1976d2;
        border-left: 4px solid #2196f3;
    }
    
    .mobile-schedule-cards .schedule-item.weekend {
        background: #fff3e0;
        color: #f57c00;
        border-left: 4px solid #ff9800;
    }
    
    .mobile-schedule-cards .schedule-item .icon {
        margin-right: 0.5rem;
        font-size: 1rem;
    }
    
    .mobile-schedule-cards .course-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e9ecef;
    }
    
    .mobile-schedule-cards .detail-item {
        text-align: center;
        padding: 0.5rem;
        background: #f8f9fa;
        border-radius: 6px;
    }
    
    .mobile-schedule-cards .detail-label {
        font-size: 0.7rem;
        color: #6c757d;
        font-weight: 500;
        margin-bottom: 0.25rem;
    }
    
    .mobile-schedule-cards .detail-value {
        font-size: 0.9rem;
        font-weight: 600;
        color: #2c3e50;
    }
    
    .mobile-schedule-cards .detail-value.fee {
        color: #e74c3c;
    }
    
    .mobile-schedule-cards .detail-value.remarks {
        color: #27ae60;
        font-size: 0.8rem;
    }
}

/* Print styles */
@media print {
    .month-tabs,
    .navbar,
    .footer {
        display: none !important;
    }
    
    .schedule-table {
        font-size: 0.7rem;
    }
    
    .schedule-table thead th,
    .schedule-table tbody td {
        padding: 0.25rem;
        border: 1px solid #000;
    }
    
    .hero-banner {
        background: none !important;
        color: #000 !important;
    }
    
    .hero-title,
    .hero-subtitle {
        color: #000 !important;
        text-shadow: none !important;
    }
}