/* 💡 프리텐다드 폰트 웹에서 불러오기 (반드시 파일 맨 위에 위치!) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* 💡 시스템 전체 글꼴을 프리텐다드로 강제 지정 */
* {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif !important;
}

/* =========================================*/ 
/* 1. 학생 현황표 디자인 */
/*========================================= */
.container { padding: 20px; }
.table-header { text-align: center; position: relative; margin-bottom: 20px; }
.table-header h1 { font-size: 22px; margin: 0; border-bottom: none; }
.top-btns { position: absolute; right: 0; top: 0; display: flex; gap: 10px; }
.btn-top { background: var(--btn-blue); border: 1px solid #333; padding: 5px 20px; cursor: pointer; font-size: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
th, td { border: 1px solid #333; padding: 6px; text-align: center; }
th { background: #f9f9f9; font-weight: normal; }

/* 3. 학생 정보 등록 팝업 (모달) */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; justify-content: center; align-items: center; }
.modal-content { background: #fff; width: 850px; border-radius: 8px; border: 1px solid #333; padding: 0; overflow: hidden; }
.modal-header { padding: 15px; text-align: center; font-weight: bold; border-bottom: 1px solid #eee; position: relative; }
.modal-close { position: absolute; right: 15px; top: 15px; cursor: pointer; font-weight: bold; }

.form-section { padding: 20px; }
.info-box { border: 1px solid #ff9999; border-radius: 5px; padding: 15px; margin-bottom: 15px; }
.info-title { color: #333; font-weight: bold; font-size: 13px; margin-bottom: 10px; }

.grid-row { display: grid; grid-template-columns: 80px 1fr 80px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.grid-row label { background: #f4f4f4; padding: 8px; font-size: 12px; text-align: center; font-weight: bold; }
.grid-row input, .grid-row select { padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; }

.modal-footer { padding: 15px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #eee; }
.btn-reg { background: #7d8efd; color: #fff; border: none; padding: 8px 25px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-cancel { background: #fff; color: #7d8efd; border: 1px solid #7d8efd; padding: 8px 25px; border-radius: 4px; cursor: pointer; }


/* =========================================
   프린터 출력용 마법의 스타일 (완결판)
========================================= */
@page {
    size: A4;
    margin: 10mm; 
}

/* 새 코드: 다른 화면은 건드리지 않고 '학생 현황표(listView)'만 조준! */
@media print {
    .acrobat-menu,                   
    #listView > div:first-child,    
    .modal,                          
    #listView th:first-child,                  
    #listView td:first-child {
        display: none !important;
    }

    
    body, html { background: white !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
    
    .container {
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 💡 [수정] 아래의 테이블 인쇄 디자인이 '학생 현황표(#listView)'에만 적용되도록 수정! (시간표 파란색 증발 방지) */
    #listView table {
        width: auto !important; 
        margin: 0 auto !important; 
        border-collapse: collapse !important;
        font-size: 10px !important; 
        word-break: keep-all !important;
    }
    
    #listView th, #listView td {
        border: 1px solid #000 !important; 
        padding: 3px 2px !important; 
        color: #000 !important;
        white-space: normal !important; 
    }
    
    #listView th {
        background-color: #eee !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact; 
    }
}




/* ========================================== */
/* 💡 큰 학생 책상 (학년별 탭 기능 포함) 디자인 */
/* 1. 학년 목록 버튼 */
#deskView { display: none; margin-top: 10px; }

.grade-selector { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; margin-top: 10px; }
.grade-selector input[type="radio"] { display: none; }
.grade-selector label {
    padding: 10px 25px; border-radius: 25px; cursor: pointer; font-size: 16px; font-weight: bold;
    color: #7e8dfe; background: #fff; border: 2px solid #e1bcbf; transition: 0.2s; box-shadow: 0 5px 10px #e1bcbf;
}
.grade-selector label:hover { transform: translateY(-2px); }
.grade-selector input[type="radio"]:checked + label {
    background: #FFCC00; color: #000000; border-color: #E32533; box-shadow: 0 5px 10px #ffc800;
}

.grade-desk-area { display: none; }
.grade-desk-area.active { display: block; animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.grade-title { font-size: 20px; font-weight: bold; color: #000000; margin-bottom: 15px; border-left: 5px solid #AEC6CF; padding-left: 10px; }
.desk-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }






/* ========================================== */
/* 코닥 스타일 완벽 구현 책상 */
/* 2. 큰 책상 */
.desk-box {
    border-radius: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); height: 180px; display: flex; flex-direction: column; overflow: hidden; 
    border: 2px solid #E32533 !important; 
    transition: transform 0.2s; cursor: pointer; 
}
.desk-box:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(227, 37, 51, 0.3); }

.desk-header { height: 25%; background-color: rgba(255, 255, 255, 0.5); display: flex; justify-content: space-between; align-items: center; padding: 0 15px; border-bottom: 1px solid #E32533; }

/* 큰 책상 -  학생이름 */.desk-name { font-weight: normal; font-size: 16px; color: #000000; }
/* 큰 책상 -  학생상태 */.desk-status { font-size: 12px; font-weight: normal; padding: 4px 10px; border-radius: 12px; }
/* 큰 책상 -  상태배경 */
.status-in {  background: #FFCC00; color: #000000; }
.status-out { background: #777; color: #000000; }
.status-away { background: #ff9999; color: #000000; }
.status-none { background: #f5f5f5; color: #000000; }

.desk-body { height: 75%; display: flex; }
.desk-subject { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 5px; }
.desk-subject:not(:last-child) { border-right: 1px solid #E32533; }
.subj-title { font-size: 13px; font-weight: 400; color: #000000; margin-bottom: 8px; }
.subj-content { font-size: 12px; color: #000000; text-align: center; word-break: break-all; line-height: 1.4; }


/* ========================================== */
/* 3. 작은 미니 책상 전용 디자인 */
/* ========================================== */
.mini-desk-box {
    border: 1px solid #E32533 !important; 
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(227, 37, 51, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    aspect-ratio: 1.2 / 1; 
}
.mini-desk-box:hover {
    transform: scale(1.15); 
    box-shadow: 0 9px 14px rgba(227, 37, 51, 0.4);
    z-index: 10;
}

.mini-desk-header {
    background-color: rgba(255, 255, 255, 0.5); 
    padding: 2px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E32533; 
    height: 35%;
    box-sizing: border-box;
}

/* 미니 책상 학생이름 */
.mini-desk-name { font-size: 8px; font-weight: 600; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75%; }
.mini-desk-body { display: flex; height: 65%; }
.mini-subj { flex: 1; border-right: 1px solid #E32533; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 600; color: #000000; }
.mini-subj:last-child { border-right: none; }



/* 미니 책상 출결상태 */
.mini-status-dot { width: 5px; height: 5px; border-radius: 50%; }
.mini-status-in { background-color: #FFCC00; box-shadow: 0 0 3px #333; } 
.mini-status-away { background-color: #ff9999; box-shadow: 0 0 3px #FF9800; } 
.mini-status-out { background-color: #ff0000; box-shadow: 0 0 3px #F44336; } 
.mini-status-none { background-color: #ffffff; } 




/* ========================================== */
/* 출결 상태에 따른 책상 전체 배경색 (큰 책상, 미니 책상 공통) */
/* ========================================== */
.desk-bg-none { background-color: #ffffff !important; } /* 미등원 */
.desk-bg-in { background-color: #FFCC00 !important; } /* 학습중 */
.desk-bg-away { background-color: #f1abab !important; } /* 외출중 */
.desk-bg-out { background-color: #ffffff !important; } /* 하원 */




/* ========================================== */
/* 💡 주간 학습 계획표 전용 디자인 */
/* ========================================== */
.weekly-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.weekly-table th { background: #f4f8f9; color: #333; font-weight: 900; padding: 12px; border: 1px solid #ddd; font-size: 14px; text-align: center; }

/* 💡 칸 높이를 6줄에 알맞게 85px로 다이어트! */
.weekly-table td { border: 1px solid #ddd; padding: 0; vertical-align: top; height: 85px; }
.weekly-subj-cell { background: #fafafa; font-weight: 900; color: #555; text-align: center; vertical-align: middle !important; font-size: 15px; }

/* 💡 입력칸 높이도 똑같이 85px로 맞춤 */
.weekly-textarea { 
    width: 100%; height: 100%; min-height: 85px; border: none; padding: 8px; 
    box-sizing: border-box; resize: none; font-size: 12px; line-height: 1.4; 
    outline: none; background: transparent; color: #333;
}
.weekly-textarea:focus { background: #fffae6; }



/* ========================================== */
/* 💡 주간 학습 계획표 - 과목 직접 입력칸 전용 디자인 (완벽 맞춤!) */
/* ========================================== */
.weekly-subj-input {
    width: 100% !important;
    height: 100% !important;
    min-height: 85px;
    border: none !important;             /* 👈 테두리 선 완벽하게 제거 */
    background: transparent !important;  /* 👈 입력칸 배경을 투명하게 (표와 일체화) */
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    color: #555 !important;              /* 👈 평소엔 일반 글씨처럼 짙은 회색 */
    outline: none !important;
    box-sizing: border-box !important;
    padding: 0 !important;               /* 👈 뚱뚱하게 삐져나오는 여백 제거 */
    margin: 0 !important;
    cursor: text;
}

/* 칸을 클릭해서 글씨를 수정할 때의 효과 */
.weekly-subj-input:focus {
    background: #fffae6 !important;      /* 👈 수정 중일 때만 살짝 노란빛 */
    color: #2671bc !important;           /* 👈 수정 중일 땐 파란색으로 강조 */
}

/* 과목칸(td) 여백 강제 제거 */
.weekly-subj-cell { 
    padding: 0 !important; 
    vertical-align: middle !important;
}



/* ========================================== */
/* 💡 감성 다이어리 스타일 주간 계획표 디자인 (화면 맞춤형 다이어트!) */
/* ========================================== */
.diary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; /* 💡 상자 사이 간격 축소 (20px -> 15px) */
}

.diary-box {
    background: #fff;
    border-radius: 15px;
    padding: 15px; /* 💡 상자 안쪽 여백 축소 (20px -> 15px) */
    display: flex;
    flex-direction: column;
    border-top: 6px solid #f6d1cc; 
    transition: transform 0.2s;
}
.diary-box:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }

.diary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #f6d1cc; 
    padding-bottom: 5px; /* 💡 제목 아래 여백 축소 */
    margin-bottom: 10px; /* 💡 제목 아래 여백 축소 */
}

.diary-day-text {
    font-size: 24px; /* 💡 요일 글자 크기 살짝 축소 */
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    letter-spacing: 1px;
}

.diary-textarea {
    width: 100%;
    height: 312px; /* 💡 26px(1줄) * 9줄 = 234px로 전체 높이 대폭 축소! */
    border: none;
    resize: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    line-height: 26px; /* 💡 줄 간격 다이어트 (32px -> 26px) */
    
    /* 💡 줄 간격에 맞춰 점선 배경도 26px로 재설정 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='26'%3E%3Cline x1='0' y1='25' x2='100' y2='25' stroke='%23e0d8c3' stroke-dasharray='4,4' stroke-width='1.5'/%3E%3C/svg%3E");
    background-attachment: local; 
    
    color: #444;
    font-weight: 500;
}
.diary-textarea::placeholder { color: #ccc; }

/* 💡 첫 번째 칸 (달력 + 메모) 반반 나누기 전용 스타일 */
.memo-textarea {
    height: 104px !important; /* 💡 메모칸도 4줄 분량으로 축소 */
    margin-top: 5px;
}




/* 💡 미니 달력 완벽 감성 디자인 */
.mini-cal-wrapper { font-family: 'Times New Roman', 'Pretendard', serif; font-size: 13px; color: #8b7d6b; width: 100%; }
.mini-cal-header { text-align: center; font-weight: 900; font-size: 16px; margin-bottom: 12px; color: #b09987; letter-spacing: 1px; }
.mini-cal-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: center; table-layout: fixed; }

/* 💡 미니 달력의 모든 선(테두리) 완벽 제거 */
.mini-cal-table th, .mini-cal-table td {
    border: none !important; /* 👈 달력 안의 찌꺼기 선들을 모두 없앱니다 */
}



/* 💡 이번 주 파스텔 톤 7일 하이라이트 (색상 적용) */
.cal-highlight-day {
    background-color: #F5EBE1 !important; 
    font-weight: 900 !important; 
    color: #8b7d6b !important;
    border-radius: 0; /* 기본적으로 네모 반듯하게 이어지도록 설정 */
}

/* 💡 시작점(월요일) 둥글게 깎기 */
.highlight-start {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

/* 💡 끝점(일요일) 둥글게 깎기 */
.highlight-end {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}


/* 요일의 양 끝을 부드럽게 (토요일과 일요일 둥글게) */
td.cal-highlight-day:nth-child(2) { border-top-left-radius: 12px; border-bottom-left-radius: 12px; } /* 월요일 둥글게 */
td.cal-highlight-day:first-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } /* 일요일 둥글게 */
/* (만약 달력 구조상 줄이 바뀌면서 잘리는 부분은 자동으로 네모나게 이어져 보입니다) */

/* ========================================== */
/* 🖨️ 주간 학습 계획표 전용 인쇄(Print) 스타일 (완벽 흑백 모드!) */
/* ========================================== */
@media print {
    @page { 
        size: A4 landscape; 
        margin: 10mm; 
    }
    
    .print-page { page-break-after: always; padding: 0; }
    
    /* 1. 상단 메뉴바와 하단 안내사항 완벽 숨김 */
    .print-page > div > div:first-child { display: none !important; }
    .print-page > div > div:last-child { display: none !important; }
    
    /* 2. 8개 상자가 한 장에 쏙 들어가도록 여백 다이어트 */
    .print-page #weeklyPlanBody { padding: 10px !important; }
    .print-page .diary-grid { gap: 10px !important; }
    .print-page .diary-box { padding: 12px !important; }

    /* ========================================== */
    /* 💡 3. [핵심] 흑백(B&W) 고대비 최적화 */
    /* ========================================== */
    
    /* 도화지 전체에 흑백 필터를 씌워서 모든 색상을 무채색으로 만듭니다 */
    #printContainer { filter: grayscale(100%) !important; }
    
    /* 바탕 배경은 잉크 낭비가 전혀 없는 100% 하얀색으로 강제! */
    #weeklyPlanBody, .diary-box { 
        background-color: #ffffff !important; 
        box-shadow: none !important; 
    }
    
    /* 달력의 빨간색/파란색, 뱃지의 하얀색 등 모든 글자를 "진한 검은색"으로 강제! */
    #weeklyPlanBody * { 
        color: #000000 !important; 
    }
    
    /* 색깔이 들어갔던 상단 띠와 구분선은 깔끔한 회색으로 변경 */
    .diary-box { 
        border: 1px solid #cccccc !important; 
        border-top: 5px solid #aaaaaa !important; 
    }
    .diary-header { 
        border-bottom: 1px solid #cccccc !important; 
    }
    
    /* 달력의 주간 하이라이트 띠는 연한 회색으로 처리 */
    .cal-highlight-day { 
        background-color: #eeeeee !important; 
    }

    /* 브라우저가 임의로 색을 빼지 못하도록 강제 */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}



    /* ========================================== */
    /* 💡 4. 시간표 인쇄 최적화 (다이어트 & 컬러/흑백 분기) */
    /* ========================================== */
    
    /* 💡 브라우저의 잉크 절약 모드를 완전히 무력화! (표 안의 '모든' 요소에 강제 적용) */
    #printContainer, #printContainer * {
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important;
    }

    #printContainer .tt-wrapper {
        min-width: auto !important; 
        width: auto !important;
        margin: 0 30px !important;
        border: 2px solid #000 !important;
        margin-top: 0px !important; 
    }
    
    #printContainer .tt-table th, 
    #printContainer .tt-table td {
        border: 1px solid #000 !important;
        /* 💡 1px 이었던 상하 여백을 3px로 살짝 늘려 숨통을 틔워줍니다. */
        padding: 3px 1px !important; 
        height: auto !important;
    }


    /* 💡 [추가] 인쇄할 때 모든 선이 1px로 얇아지는 현상 방지! 요일 기둥은 3px 유지! */
    #printContainer .tt-table th.solid-right, 
    #printContainer .tt-table td.solid-right {
        border-right: 2px solid #000 !important;
    }



    /* 🎨 컬러 출력 모드: 흑백 필터를 해제하여 원래 파란색을 살립니다! */
    #printContainer.print-color { filter: none !important; }
    
    /* 🖨️ 흑백 출력 모드: 헤더의 색상을 싹 빼고 완전한 흰 바탕에 검은 글씨로 만듭니다! */
    #printContainer.print-bw .bg-blue,
    #printContainer.print-bw .sub-th,
    #printContainer.print-bw .time-col {
        background-color: #ffffff !important;
        color: #000000 !important;
    }






/* ========================================== */
/* 💡 [신규] 2026년 중간고사 대비 종합 시간표 스타일 */
/* ========================================== */
.tt-wrapper { border: 2px solid #000; background: #fff; width: 100%; box-sizing: border-box; min-width: 1100px; }
.tt-title-area { display: flex; justify-content: space-between; align-items: flex-end; padding: 15px 30px 10px; border-bottom: 2px solid #000; }
.tt-main-title { font-size: 34px; font-weight: 900; letter-spacing: 2px; margin: 0; color: #000; }
.tt-sub-title { text-align: right; }
.tt-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tt-table th, .tt-table td { border: 1px solid #000; text-align: center; vertical-align: middle; height: 35px; box-sizing: border-box; padding: 0; }
.tt-table th.bg-blue { background-color: #2F5597; color: #000; font-size: 18px; font-weight: 400; letter-spacing: 5px; }
.tt-table th.sub-th { background-color: #f8f9fa; color: #000; font-size: 13px; font-weight: bold; border-bottom: 1px solid #000; letter-spacing: 1px; }
.tt-table td.time-col { font-size: 13px; font-weight: 500; background: #fff; border-right: 2px solid #000; color: #333; }

/* 점선 및 실선 디테일 */
.tt-table td.dot-col { border-left: 1px dotted #999; border-right: 1px dotted #999; }

/* 💡 요일을 나누는 선을 3px로 더욱 진하고 굵게 변경! (4px로 하셔도 좋습니다) */
.tt-table th.solid-right, .tt-table td.solid-right { border-right: 2px solid #000 !important; }


/* 입력칸 디자인 */
.tt-input { 
    width: 100%; height: 100%; min-height: 35px; border: none; background: transparent; 
    text-align: center; font-size: 13px; font-family: inherit; outline: none; color: #111; font-weight: 600;
}
.tt-input:focus { background: #fffae6; color: #E32533; }



/* ========================================== */
/* 💡 시간표 열 너비 완벽 고정 (위아래 어긋남 방지) */
/* ========================================== */
.tt-table { table-layout: fixed !important; width: 100% !important; }

/* 1번째 칸(시간/종합반)은 무조건 120px로 고정 */
.tt-table th.bg-blue[rowspan="2"], .tt-table td.time-col { 
    width: 120px !important; 
    box-sizing: border-box !important;
}

/* 나머지 18개 칸은 남은 너비를 완벽하게 1/18씩 나눠 가짐 */
.tt-table th.sub-th { 
    width: calc((100% - 120px) / 18) !important; 
    box-sizing: border-box !important;
    overflow: hidden;
}

/* 인쇄용 텍스트 줄바꿈 방지 및 최적화 */
@media print {
    #printContainer .tt-wrapper { margin: 0 30px !important; width: auto !important; }
    #printContainer div { word-break: keep-all !important; } /* 단어 중간에 쪼개짐 방지 */
}


/* ========================================== */
/* 💡 5. 외곽선 및 1열(시간대) 2px 강제 고정 (화면/인쇄 공통) */
/* ========================================== */

/* ① 전체 바깥 둘레 선을 2px로 강제 고정 */
.tt-wrapper, #printContainer .tt-wrapper {
    border: 2px solid #000 !important;
}

/* ② '종합반(헤더)'과 '시간대(4:00~)' 기둥의 오른쪽 선을 2px로 강제 고정 */
.tt-table th.bg-blue[rowspan="2"], 
.tt-table td.time-col,
#printContainer .tt-table th.bg-blue[rowspan="2"], 
#printContainer .tt-table td.time-col {
    border-right: 2px solid #000 !important;
}



/* ========================================== */
/* 💡 신규: 학습진도표 (과제 총괄표) 전용 스타일 */
/* ========================================== */
.progress-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.progress-table th, .progress-table td { border: 1px solid #555; text-align: center; vertical-align: middle; padding: 0; height: 38px; }
/* .progress-table th { background: #fdfdfd; font-weight: bold; color: #111; letter-spacing: -0.5px; } */
.progress-table th {
    background: #ffffff; /* 완전히 하얀 배경 */
    font-weight: 900;
    color: #333; /* 폰트 색상 살짝 부드럽게 */
    height: 42px; /* 헤더 높이 살짝 키움 */
    border: 1px solid #ccc; /* 너무 진하지 않은 테두리 */
}
.progress-table td { color: #111; font-weight: 500; }

/* 💡 과제 및 비고 입력칸을 클릭했을 때 디자인 */
.progress-input { width: 100%; height: 100%; border: none; outline: none; text-align: center; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: #E32533; box-sizing: border-box; }
.progress-input:focus { background: #fffae6; }
.progress-input::placeholder { color: #ccc; font-weight: normal; }

/* 💡 더미 데이터(기존 완료 과제)는 연한 회색으로 표시 */
.progress-table td.dummy-data { color: #888; font-size: 12px; font-weight: normal; }

/* 진도표 인쇄 최적화 */
@media print {
    #progressView { padding: 0 !important; }
    #progressView > div { box-shadow: none !important; border-top: none !important; padding: 0 !important; }
    #progressView button { display: none !important; }
    .progress-input::placeholder { color: transparent; }
    #bookSettingArea { display: none !important; } /* 💡 교재 입력 패널 인쇄 시 숨김 */
}






/* ========================================== */
/* 💡 신규: 학생별과제표 전용 레이아웃 디자인 */
/* ========================================== */
.sp-layout { display: flex; gap: 15px; align-items: stretch; margin-top: 10px; }

/* 왼쪽 사이드바 (이름 및 차트) */
.sp-sidebar { width: 280px; border: 2px solid #333; display: flex; flex-direction: column; background: #fff; flex-shrink: 0; }
.sp-name-box { padding: 20px; text-align: center; font-size: 26px; font-weight: bold; border-bottom: 2px solid #333; color: #111; letter-spacing: -1px; }

/* 바 차트 구역 */
.sp-chart-area { position: relative; flex: 1; padding: 10px 0 20px 40px; display: flex; align-items: flex-end; justify-content: center; min-height: 350px; background: #fff; }
.sp-y-axis-labels { position: absolute; left: 45px; top: 10px; bottom: 20px; display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: #555; text-align: right; width: 25px; z-index: 2; }
.sp-y-axis-lines { position: absolute; left: 80px; right: 20px; top: 18px; bottom: 20px; display: flex; flex-direction: column; justify-content: space-between; z-index: 1; }
.sp-y-axis-lines div { border-bottom: 1px solid #999; height: 0; width: 100%; }

.sp-bars { position: relative; z-index: 3; display: flex; justify-content: center; gap: 40px; width: 100%; padding-left: 20px; height: 100%; align-items: flex-end; padding-bottom: 2px; }
.sp-bar-progress { width: 25px; background-color: #1a5cad; border: 1px solid #114280; border-bottom: none; box-shadow: 2px 0 5px rgba(0,0,0,0.1); }
.sp-bar-achieve { width: 25px; background-color: #e65100; border: 1px solid #b33e00; border-bottom: none; box-shadow: 2px 0 5px rgba(0,0,0,0.1); }

/* 오른쪽 요일별 6개 그리드 */
.sp-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 15px; }
.sp-box { border: 2px solid #333; display: flex; flex-direction: column; background: #fff; }
.sp-box-header { padding: 8px; text-align: center; font-weight: bold; font-size: 15px; border-bottom: 2px solid #333; color: #111; letter-spacing: -0.5px; }

/* 체크박스 한 줄 */
.sp-check-row { display: flex; border-bottom: 2px solid #333; background: #fafafa; }
.sp-check-row label { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid #333; padding: 6px 0; font-size: 13px; font-weight: 600; cursor: pointer; gap: 5px; }
.sp-check-row label:last-child { border-right: none; }
.sp-check-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: #E32533; }

/* 입력 텍스트 영역 */
.sp-textarea { flex: 1; border: none; padding: 10px; resize: none; outline: none; font-size: 14px; line-height: 1.6; color: #333; font-family: inherit; }
.sp-textarea::placeholder { color: #aaa; text-align: center; line-height: 200px; }

/* 인쇄용 최적화 (A4 꽉 차게) */
@media print {
    #studentProgressView { padding: 0 !important; }
    #studentProgressView > div { box-shadow: none !important; border-top: none !important; padding: 0 !important; }
    #studentProgressView button, #studentProgressView select { display: none !important; }
    .sp-layout { margin-top: 0; }
    .sp-sidebar { width: 220px; } /* 프린트 시 왼쪽 바 조금 축소 */
    .sp-textarea::placeholder { color: transparent; }
}


/* ==========================================
   💡 [신규] 과제총괄표 V4 (배경색 제거 & 3줄 선명한 선 구분)
   ========================================== */

.progress-table-v4 {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    min-width: 1000px;
    background-color: #fff;
}

.progress-table-v4 th, .progress-table-v4 td {
    border: 1px solid #ccc; /* 💡 모든 칸을 회색 선으로 선명하게 구분 */
    text-align: center;
    vertical-align: middle;
    padding: 0;
    background-color: #fff; /* 💡 파스텔 배경색 완전 제거 (흰색 통일) */
}

/* 헤더(가장 윗줄) 디자인 */
.progress-table-v4 th {
    background: #ffffff; 
    font-weight: 900;
    color: #333; 
    height: 42px; 
    border: 1px solid #ccc;
}

.progress-table-v4 td { height: 32px; }

/* 💡 [핵심] 1명(3줄)이 끝날 때마다 위아래로 진한 굵은 선(2px)을 그어 확실히 구분합니다! */
.progress-table-v4 tr.student-row-start td { border-top: 2px solid #333 !important; }
.progress-table-v4 tr.student-row-end td { border-bottom: 2px solid #333 !important; }

/* 💡 입력칸 배경 투명하게 & 꼴도 보기 싫은 테두리 완벽 제거! */
.prog-v4-in {
    width: 100%;
    height: 100%;
    min-height: 32px; /* 칸 높이에 딱 맞게 꽉 채우기 */
    border: none !important; /* 👈 테두리 선 강제 제거! */
    outline: none !important; /* 👈 파란 포커스 선 제거! */
    box-shadow: none !important; /* 👈 그림자 제거! */
    margin: 0;
    padding: 0;
    text-align: center;
    background: transparent !important; 
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    box-sizing: border-box;
}

.prog-v4-in:focus { background: #f4f8f9 !important; } /* 클릭 시 살짝 하늘색 */
.prog-v4-in::placeholder { color: #ccc; font-weight: normal; font-size: 12px; }



/* 🖨️ 인쇄 최적화 (V4 전용) */
@media print {
    #progressView > div { box-shadow: none !important; border-top: none !important; padding: 0 !important; }
    #progressView button, #commonHwPanel { display: none !important; }
    .prog-v4-in::placeholder { color: transparent; } 
    
    @page { size: A4 landscape; margin: 10mm; }
}


/* 💡 종합 과제표 인쇄 최적화 (A4 꽉 차게) */
@media print {
    #comprehensiveProgressView { padding: 0 !important; }
    #comprehensiveProgressView > div { box-shadow: none !important; border-top: none !important; padding: 0 !important; }
    #comprehensiveProgressView button, #comprehensiveProgressView select { display: none !important; }
    #comprehensiveProgressView .sp-textarea::placeholder { color: transparent; }
}