/* =========================================
   관리자 페이지 2분할 레이아웃 스타일
   ========================================= */

/* ===== 회원 상세 2분할 레이아웃 ===== */
.member-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.member-detail-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.member-detail-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== 회차 추가/수정 모달 2분할 레이아웃 ===== */
.result-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.result-modal-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result-modal-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 8px;
}

.result-modal-right::-webkit-scrollbar {
  width: 6px;
}

.result-modal-right::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 3px;
}

.result-modal-right::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* ===== 학습자료 등록/수정 모달 2분할 레이아웃 ===== */
.learning-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.learning-modal-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.learning-modal-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 650px;
  overflow-y: auto;
  padding-right: 8px;
}

.learning-modal-right::-webkit-scrollbar {
  width: 6px;
}

.learning-modal-right::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 3px;
}

.learning-modal-right::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* 미리보기 영역 스타일 개선 */
.preview-section {
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 16px;
}

.preview-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-section {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 16px;
}

.settings-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-section {
  background: white;
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid var(--border-light);
}

.settings-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===== 학습자료 테이블 컬럼 폭 최적화 ===== */
.learning-table-optimized {
  width: 100%;
  table-layout: fixed;
}

.learning-table-optimized th:nth-child(1), /* 썸네일 */
.learning-table-optimized td:nth-child(1) {
  width: 180px;
}

.learning-table-optimized th:nth-child(2), /* 제목/설명 */
.learning-table-optimized td:nth-child(2) {
  width: 35%;
  max-width: 400px;
}

.learning-table-optimized th:nth-child(3), /* 카테고리 */
.learning-table-optimized td:nth-child(3) {
  width: 10%;
}

.learning-table-optimized th:nth-child(4), /* 공개 */
.learning-table-optimized td:nth-child(4) {
  width: 8%;
}

.learning-table-optimized th:nth-child(5), /* 등록일 */
.learning-table-optimized td:nth-child(5) {
  width: 12%;
}

.learning-table-optimized th:nth-child(6), /* 관리 */
.learning-table-optimized td:nth-child(6) {
  width: auto;
  min-width: 180px;
}

/* 제목/설명 컬럼 스타일 */
.learning-title-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.learning-title-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-desc-text {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 반응형 처리 ===== */

/* 태블릿 (1200px 미만) */
@media (max-width: 1199px) {
  .member-detail-grid,
  .result-modal-grid,
  .learning-modal-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .learning-table-optimized th:nth-child(2),
  .learning-table-optimized td:nth-child(2) {
    width: 30%;
  }
}

/* 모바일 (768px 미만) */
@media (max-width: 767px) {
  .member-detail-grid,
  .result-modal-grid,
  .learning-modal-grid {
    grid-template-columns: 1fr;
  }
  
  .learning-table-optimized {
    font-size: 12px;
  }
  
  .learning-table-optimized th:nth-child(1),
  .learning-table-optimized td:nth-child(1) {
    width: 120px;
  }
  
  .learning-table-optimized th:nth-child(2),
  .learning-table-optimized td:nth-child(2) {
    width: auto;
  }
}

/* ===== 회원별 활동 점수 & 시청 통계 2분할 레이아웃 ===== */
/* ===== 활동 로그 페이지: 회원별 점수 & 시청 통계 2분할 ===== */
.activity-score-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 16px;
}

/* ===== 활동 로그 & 시청 기록 세로 배치 (각 100% 폭) ===== */
.activity-logs-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 16px;
}

.activity-logs-left,
.activity-logs-right {
  width: 100%;
  min-height: auto;
}

/* 반응형: 태블릿 이하는 1단 */
@media (max-width: 1199px) {
  .activity-score-stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.info-card {
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  padding: 16px;
  transition: box-shadow 0.2s;
}

.info-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.info-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.info-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.info-row-label {
  font-size: 12px;
  color: var(--text-muted);
}

.info-row-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ===== 섹션 헤더 스타일 ===== */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-light);
}

.section-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header-badge {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}