/* Student journal styles are scoped away from the shared schedule. */
.sr-mode-switch { margin-bottom: 14px; width: fit-content; }
.sr-mode-switch .view-btn { padding: 9px 18px; }
.sr-setting { padding: 14px; margin: 12px 0; }
.sr-setting h3 { font-size: 14px; margin: 0 0 12px; }
.sr-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sr-checkbox input[type="checkbox"] { width: 17px; height: 17px; margin: 0; flex-shrink: 0; }
#student-records-content { --sr-accent: #486e61; }
.sr-welcome { padding: 34px; text-align: center; margin-bottom: 16px; }
.sr-welcome h2 { font-size: 24px; margin: 12px 0; }
.sr-welcome p { line-height: 1.7; }
.sr-welcome .btn-primary { margin: 12px 0; }
.sr-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #486e61; }
.sr-top { padding: 18px 22px; margin-bottom: 16px; }
.sr-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sr-account { font-size: 13px; color: var(--text-3); margin: 5px 0 12px; overflow-wrap: anywhere; }
.sr-select-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.sr-select-label select { width: auto; max-width: 320px; margin: 0; }
.sr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-filter { padding: 0 4px; margin-bottom: 14px; }
.sr-workspace { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(250px, 1fr); gap: 16px; align-items: stretch; }
/* PC: 오른쪽 명렬표는 달력 높이를 넘지 않고 안에서 스크롤 (absolute라 행 높이는 달력이 정한다) */
.sr-day-sidebar { position: relative; min-height: 320px; }
.sr-day-sidebar-inner { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.sr-day-sidebar-inner > .sr-day-summary { flex: 0 1 auto; max-height: 42%; overflow-y: auto; }
.sr-day-sidebar-inner > .sr-roster { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.sr-day-sidebar-inner .sr-student-list { flex: 1 1 0; min-height: 0; max-height: none; }
.sr-day-sidebar-inner .sr-summary-list { max-height: none; }
.sr-calendar-hint { margin: -8px 16px 10px; }
.sr-fold-btn { display: none; margin-left: auto; padding: 5px 10px; border: 1px solid var(--glass-border); border-radius: 8px; background: rgba(255,255,255,.6); color: #486e61; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
/* 날짜 → 이날의 기록 먼저 보기 */
.sr-day-records { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: min(60dvh, 520px); overflow-y: auto; padding: 2px; }
.sr-day-record { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px; border: 1px solid #d5dcd8; border-radius: 10px; background: white; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.sr-day-record:hover { border-color: #486e61; background: #f1f7f3; }
.sr-day-record-line { font-size: 13px; color: #815729; overflow-wrap: anywhere; }
.sr-day-record-note { font-size: 13px; line-height: 1.5; color: var(--text-2); background: #f1f7f3; border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 날짜 → 학생 고르기 */
.sr-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 7px; margin-top: 14px; max-height: min(60dvh, 520px); overflow-y: auto; padding: 2px; }
.sr-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-height: 58px; padding: 10px; border: 1px solid #d5dcd8; border-radius: 10px; background: white; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.sr-pick:hover { border-color: #486e61; background: #f1f7f3; }
.sr-pick.exception { border-color: #e7c8a5; background: #fdf6ee; }
.sr-pick-name { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.sr-pick-name .sr-student-number { min-width: 22px; font-weight: 400; }
.sr-pick-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.sr-pick-note { font-size: 11px; color: #355b4e; background: #dbeae3; border-radius: 6px; padding: 3px 6px; }
.sr-calendar { overflow: hidden; min-width: 0; }
.sr-month-nav { padding: 16px; justify-content: flex-start; }
.sr-month-nav h3 { font-size: 17px; margin: 0 auto 0 0; }
.sr-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--glass-border); }
.sr-weekday { text-align: center; font-size: 12px; padding: 12px 0; color: var(--text-3); }
.sr-weekday:first-child { color: #c15c5c; }
.sr-weekday:nth-child(7) { color: #587db2; }
.sr-day, .sr-blank { min-height: 102px; border: 0; border-top: 1px solid var(--glass-border); border-right: 1px solid var(--glass-border); }
.sr-day { display: flex; flex-direction: column; align-items: stretch; padding: 8px 5px; gap: 5px; cursor: pointer; background: rgba(255,255,255,.17); color: var(--text-1); font: inherit; text-align: left; min-width: 0; }
.sr-day:hover { background: rgba(255,255,255,.7); }
.sr-day.selected { background: #e0ede6; box-shadow: inset 0 0 0 2px #658c79; }
.sr-day-number { font-size: 12px; line-height: 23px; padding-left: 4px; }
.sr-day.is-today .sr-day-number { width: 23px; border-radius: 50%; background: #486e61; color: white; text-align: center; padding: 0; }
.sr-attendance-dot, .sr-note-dot { font-size: 11px; line-height: 1.5; border-radius: 4px; padding: 2px 4px; overflow-wrap: anywhere; }
.sr-attendance-dot { background: #f8e8d8; color: #815729; }
.sr-note-dot { background: #dbeae3; color: #355b4e; }
.sr-roster { padding: 18px; }
.sr-day-sidebar { min-width: 0; }
.sr-day-summary { padding: 18px; scroll-margin-top: 100px; scroll-margin-bottom: 85px; }
.sr-day-summary:focus { outline: 2px solid #7c9b8b; outline-offset: 3px; }
.sr-day-summary h3 { margin: 8px 0; font-size: 16px; }
.sr-summary-heading { display: flex; align-items: center; gap: 8px; }
.sr-summary-count { font-size: 12px; color: #486e61; line-height: 1.6; margin: 0 0 12px; }
.sr-summary-list { display: flex; flex-direction: column; gap: 8px; max-height: 330px; overflow-y: auto; }
.sr-summary-item { display: flex; flex-direction: column; gap: 7px; width: 100%; background: rgba(255,255,255,.65); border: 1px solid var(--glass-border); border-radius: 10px; padding: 12px; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.sr-summary-item:hover { border-color: #7c9b8b; background: white; }
.sr-summary-student { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.sr-summary-preview { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.sr-summary-more { color: #486e61; font-size: 11px; }
.sr-roster-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sr-roster-heading label { font-size: 14px; font-weight: 700; }
.sr-roster-heading input { width: auto; max-width: 100%; margin: 0; }
.sr-roster > p { line-height: 1.6; }
.sr-student-list { display: flex; flex-direction: column; gap: 7px; max-height: 560px; overflow-y: auto; }
.sr-student { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; width: 100%; padding: 12px 10px; border: 1px solid var(--glass-border); border-radius: 10px; background: rgba(255,255,255,.55); color: var(--text-1); cursor: pointer; font: inherit; }
.sr-student:hover { background: white; border-color: #7c9b8b; }
.sr-student > span:first-child { min-width: 0; }
.sr-student-number { display: inline-block; min-width: 27px; color: var(--text-3); font-size: 12px; }
.sr-student strong { font-size: 14px; }
.sr-student small { display: block; margin: 4px 0 0 27px; color: #486e61; font-size: 11px; }
.sr-status { font-size: 11px; white-space: nowrap; border-radius: 6px; padding: 4px 7px; }
.sr-status.present { color: #49675b; background: #e3ede7; }
.sr-status.exception { color: #875523; background: #f8e8d8; }
.sr-history { margin-top: 18px; padding: 22px; }
.sr-history h3 { margin: 0 0 8px; font-size: 16px; }
.sr-history-item { padding: 16px 0; border-top: 1px solid var(--glass-border); }
.sr-history-item strong { font-size: 13px; }
.sr-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: 14px; }
.sr-history-note { border-left: 3px solid #92b09d; padding-left: 12px; }
.sr-error { color: #ac3131; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.sr-error:empty { display: none; }
.sr-dialog { width: min(620px, calc(100% - 28px)); max-height: calc(100dvh - 40px); border: 1px solid white; border-radius: 20px; padding: 0; background: #f3f5f5; color: var(--text-1); box-shadow: 0 24px 90px #172a3840; }
.sr-dialog::backdrop { background: rgba(25,36,44,.4); backdrop-filter: blur(3px); }
.sr-dialog-form { padding: 24px; }
.sr-dialog h2 { font-size: 18px; margin: 0; }
.sr-dialog h3 { font-size: 15px; margin: 22px 0 8px; }
.sr-dialog p { line-height: 1.6; }
.sr-form-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; margin-top: 20px; }
.sr-dialog label, .sr-dialog legend { font-size: 13px; font-weight: 600; }
.sr-field { display: block; margin-top: 18px; }
.sr-dialog input:not([type="radio"]):not([type="checkbox"]), .sr-dialog textarea { display: block; width: 100%; margin-top: 7px; }
.sr-dialog textarea { resize: vertical; min-height: 80px; font: inherit; font-size: 14px; line-height: 1.6; }
.sr-roster-editor { max-height: 270px; overflow-y: auto; margin: 12px 0; }
.sr-roster-edit-row { display: grid; grid-template-columns: 65px minmax(0, 1fr) 65px; gap: 8px; align-items: center; }
.sr-attendance-picker { display: flex; gap: 8px; flex-wrap: wrap; border: 0; padding: 0; margin: 22px 0; }
.sr-attendance-picker legend { margin-bottom: 10px; }
.sr-attendance-picker label { position: relative; cursor: pointer; }
.sr-attendance-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sr-attendance-picker span { display: block; padding: 9px 15px; border: 1px solid #d5dcd8; border-radius: 8px; background: white; }
.sr-attendance-picker input:checked + span { border-color: #486e61; background: #e0ede6; color: #345548; }
.sr-attendance-picker input:focus-visible + span { outline: 2px solid #486e61; outline-offset: 2px; }
.sr-note-editor { background: #e7eeea; border-radius: 10px; padding: 12px; margin: 10px 0; }
.sr-note-editor button { margin-top: 4px; }
.sr-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 20px; position: sticky; bottom: -24px; background: #f3f5f5; padding-bottom: 12px; }
#student-records-content button:focus-visible, .sr-dialog button:focus-visible { outline: 2px solid #486e61; outline-offset: 2px; }
@media (max-width: 800px) {
  .sr-workspace { grid-template-columns: 1fr; }
  /* 모바일: 위아래로 쌓고, 달력·명렬표를 각각 접을 수 있다 */
  .sr-day-sidebar { position: static; min-height: 0; }
  .sr-day-sidebar-inner { position: static; }
  .sr-day-sidebar-inner > .sr-roster,
  .sr-day-sidebar-inner .sr-student-list { flex: 0 1 auto; }
  .sr-day-sidebar-inner > .sr-day-summary { max-height: none; }
  .sr-day-sidebar-inner .sr-summary-list { max-height: 330px; }
  .sr-day-sidebar-inner .sr-student-list { max-height: 400px; }
  .sr-fold-btn { display: inline-block; }
  .sr-calendar.sr-folded .sr-calendar-grid,
  .sr-calendar.sr-folded .sr-calendar-hint,
  .sr-roster.sr-folded .sr-student-list,
  .sr-roster.sr-folded .sr-roster-note,
  .sr-day-summary.sr-folded .sr-summary-list,
  .sr-day-summary.sr-folded .sr-summary-empty { display: none; }
  .sr-day-summary.sr-folded .sr-summary-count { margin-bottom: 0; }
  .sr-month-nav { gap: 6px; padding: 12px; }
  .sr-pick-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .sr-top, .sr-roster, .sr-history { padding: 16px; }
  .sr-welcome { padding: 25px 18px; }
  .sr-welcome h2 { font-size: 20px; }
  .sr-day, .sr-blank { min-height: 83px; }
  .sr-day { padding: 5px 3px; }
  .sr-attendance-dot, .sr-note-dot { font-size: 10px; padding: 1px 2px; }
  .sr-select-label { max-width: 100%; }
  .sr-select-label select { max-width: 230px; min-width: 0; }
  .sr-dialog-form { padding: 18px; }
  .sr-dialog-footer { bottom: -18px; }
  .sr-attendance-picker { gap: 5px; }
  .sr-attendance-picker span { padding: 8px 12px; }
}