/* ==================== textbook.css ==================== */
/* 교재제작 화면 전용 스타일 */

/* ========== 교재제작 레이아웃 (3열) ========== */
#textbookScreen .main-content {
    display: grid;
    grid-template-columns: 180px 1fr 280px;
    gap: 16px;
    padding: 20px;
    max-height: 100vh;
    overflow: hidden;
}

/* ========== 프리셋 카드 (1열) ========== */
.textbook-preset-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    overflow: hidden;
}

.textbook-preset-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* 프리셋 아이템을 세로 리스트로 */
.textbook-preset-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.textbook-preset-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.textbook-preset-item:hover {
    background: var(--surface-muted);
    border-color: var(--primary);
    transform: translateX(2px);
}

.textbook-preset-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.textbook-preset-item span {
    flex: 1;
    cursor: pointer;
    font-size: 13px;
}

.textbook-preset-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.textbook-preset-actions .btn-add-preset,
.textbook-preset-actions .btn-delete-preset {
    width: 100%;
    padding: 8px;
    font-size: 12px;
}

/* ========== 학습데이터 카드 (2열) ========== */
#textbookScreen .calendar-section {
    flex: none;
    width: auto;
}

/* ========== 상단 헤더 ========== */
.textbook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--subtle);
}

.textbook-title {
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
}

/* 북마클릿 버튼 */
#textbookBookmarkBtn {
    cursor: move !important;
    user-select: none;
}

#textbookBookmarkBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(106, 59, 255, 0.4);
}

#textbookBookmarkBtn:active {
    transform: translateY(0);
}

.textbook-student-info {
    font-size: 14px;
    color: var(--text);
    padding: 6px 12px;
    background: var(--surface-muted);
    border-radius: 6px;
}

/* ========== 메인 작업 영역 ========== */
.textbook-content {
    flex: 1;
    overflow-y: auto;
}

/* ========== 4단 그리드 레이아웃 ========== */
.textbook-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.textbook-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ========== 폼 그룹 ========== */
.textbook-form-group {
    margin-bottom: 0;
}

.textbook-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
}

/* ========== 유형 프리셋 버튼 (진도|시험|취약) ========== */
.type-preset-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.btn-type-preset {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease-out;
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--border);
    position: relative;
}

.btn-type-preset:hover {
    background: var(--surface-muted);
    border-color: var(--primary);
    transform: translateY(-1px);
    z-index: 1;
}

.btn-type-preset:active {
    transform: translateY(0);
    transition: all 0.05s;
}

.textbook-form-group input[type="text"],
.textbook-form-group input[type="number"],
.textbook-form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--surface);
    color: var(--text);
    transition: all 0.2s;
    font-family: inherit;
}

.textbook-form-group input:focus,
.textbook-form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(106, 59, 255, 0.1);
}

.textbook-form-group textarea {
    resize: vertical;
    min-height: 80px;
    font-size: 12px;
    font-weight: 500;
    font-family: '맑은 고딕', 'Malgun Gothic', 'Segoe UI', sans-serif;
    line-height: 1.7;
    color: #333;
}

/* ========== 라디오 그룹 ========== */
.textbook-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.textbook-radio-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.textbook-radio-item:hover {
    background: var(--surface-muted);
    border-color: var(--primary);
}

.textbook-radio-item input[type="radio"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--primary);
}

.textbook-radio-item label {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.textbook-radio-item input[type="radio"]:checked + label {
    color: var(--primary);
    font-weight: 600;
}

/* ========== 난이도 세부 입력 ========== */
.detail-inputs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.detail-input-wrapper {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 8px;
    align-items: center;
}

.detail-label {
    font-size: 12px;
    color: var(--text);
    font-weight: 600;
    text-align: left;
}

.detail-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    background: var(--surface);
    color: var(--text);
    transition: all 0.2s;
}

.detail-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(106, 59, 255, 0.1);
}

.detail-sum {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    background: var(--surface-muted);
    border-radius: 6px;
}

.detail-sum-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.detail-sum-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

/* ========== 하단 프리셋 영역 ========== */
.textbook-preset-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--subtle);
}

.textbook-preset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.textbook-preset-header h3 {
    font-size: 16px;
    color: var(--primary);
    font-weight: 600;
    margin: 0;
}

.textbook-preset-buttons {
    display: flex;
    gap: 8px;
}

.btn-add-preset {
    padding: 6px 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-preset:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.btn-edit-preset {
    padding: 6px 14px;
    background: #F3E8FF;
    color: #9333EA;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-edit-preset:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-edit-preset:not(:disabled):hover {
    background: #E9D5FF;
    transform: translateY(-1px);
}

.btn-delete-preset {
    padding: 6px 12px;
    background: #FFE8EA;
    color: #DC5F6F;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-preset:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-delete-preset:not(:disabled):hover {
    background: #FFD5D9;
    transform: translateY(-1px);
}

.textbook-preset-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.textbook-preset-item {
    padding: 8px 14px;
    background: #F5F5FF;
    color: var(--primary);
    border: 2px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.textbook-preset-item:hover {
    background: #ECECFF;
    transform: translateY(-1px);
}

.textbook-preset-item.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(106, 59, 255, 0.3);
}


/* ========== 우측 패널: 난이도 세부설정 목록 ========== */
.textbook-detail-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 12px;
}

.textbook-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.textbook-detail-item:hover {
    background: var(--surface-muted);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.textbook-detail-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.textbook-detail-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.textbook-detail-date {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.textbook-detail-values {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
    letter-spacing: 2px;
    margin-left: 24px;
}

.textbook-detail-source {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    background: var(--primary);
    color: white;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.textbook-detail-source.manual {
    background: #10B981;
}

/* ========== 삭제 버튼 ========== */
.btn-delete-detail {
    width: 100%;
    padding: 10px;
    background: #FFE8EA;
    color: #DC5F6F;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-detail:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-delete-detail:not(:disabled):hover {
    background: #FFD5D9;
    transform: translateY(-1px);
}

/* ========== 빈 상태 ========== */
.textbook-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.textbook-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.textbook-empty-text {
    font-size: 13px;
    line-height: 1.6;
}

/* ========== 저장 버튼 영역 ========== */
.textbook-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.btn-save-detail {
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save-detail:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* ========== 템플릿 추가 버튼 ========== */
.btn-add-template {
    margin-left: 10px;
    padding: 4px 10px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-template:hover {
    background: var(--primary-dark);
}

.btn-delete-template {
    margin-left: 6px;
    padding: 4px 10px;
    background: #FFE8EA;
    color: #DC5F6F;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-template:hover {
    background: #FFD5D9;
}

/* ========== 반응형 ========== */
@media (max-width: 1600px) {
    .textbook-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 1200px) {
    .textbook-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== 난이도 세부설정 리스트 활성화 스타일 ==================== */

/* 활성화된 항목 */
.textbook-detail-item.active {
    background: #E8F5FF !important;
    border-left: 3px solid #1E88E5 !important;
    padding-left: 9px !important; /* 3px border 보정 */
}

/* 라디오 버튼 */
.textbook-detail-radio {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* 체크박스 */
.textbook-detail-checkbox {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0 0 0 8px;
}

/* 헤더 레이아웃 조정 */
.textbook-detail-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 날짜 텍스트 */
.textbook-detail-date {
    flex: 1;
    font-size: 12px;
    color: var(--text-muted);
}

/* 소스 뱃지 */
.textbook-detail-source {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.textbook-detail-source.diagnosis {
    background: #E8F5E9;
    color: #2E7D32;
}

.textbook-detail-source.manual {
    background: #FFF3E0;
    color: #E65100;
}

/* 값 표시 영역 */
.textbook-detail-values {
    cursor: pointer;
    padding: 8px 0;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
    transition: color 0.2s;
}

.textbook-detail-values:hover {
    color: #1E88E5;
}

/* 항목 전체 *//* ==================== 아코디언 스타일 (진단/교재제작/수납/성적 공통) ==================== */

.student-accordion-group {
    margin-bottom: 8px;
}

.accordion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    font-size: 13px;
    user-select: none;
}

.accordion-header:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(106, 59, 255, 0.3);
}

.accordion-icon {
    font-size: 12px;
    transition: transform 0.2s;
    width: 14px;
    text-align: center;
}

.accordion-title {
    flex: 1;
}

.accordion-content {
    padding: 4px 0;
    display: block;
}

/* 체크박스 아이템 (아코디언 내부) */
.accordion-content .checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    margin: 4px 0;
}

.accordion-content .checkbox-item:hover {
    background: var(--surface-muted);
    border-color: var(--primary);
    transform: translateX(2px);
}

.accordion-content .checkbox-item.selected {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: white;
}

.accordion-content .checkbox-item.selected .item-label {
    color: white;
}

.accordion-content .checkbox-item.selected .item-label > div {
    color: white !important;
}

.accordion-content .item-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.accordion-content .item-label {
    flex: 1;
    cursor: pointer;
}

/* 진단 화면용 학생 목록 (아코디언 없는 단순 리스트도 지원) */
.diagnosis-student-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}