/* Student Portal — light theme, card-based, less dense than admin.
   챌린지200 토큰 그대로 사용 (teal accent, orange-500 긴급성).
   어드민과의 시각 차별화는 색이 아닌 구조 (sidebar bg + 카드 밀도). */

/* ========== Box model reset ==========
   어드민 shell.css 는 * { box-sizing: border-box } 선언. 학생 포털은 shell.css 를
   로드하지 않으므로 default 인 content-box 가 적용돼 .s-page padding 이 부모 폭에 더해져
   정확히 좌우 padding 합 만큼 overflow 를 유발했음. 어드민과 동일 규칙으로 통일. */
* { box-sizing: border-box; }

/* ========== Shell layout ========== */
/* 스크롤바 gutter 안정화 — 페이지 간 이동 시 사이드바 너비 shift 방지.
   Safari < 15.4 폴백 필요 시 아래 주석 해제:
   html { overflow-y: scroll; } */
html { scrollbar-gutter: stable; }

.s-shell {
  display: grid;
  /* minmax(0, 1fr): 기본 1fr = minmax(auto, 1fr) 은 자식 min-content 로 column 이 확장돼 viewport 바깥으로 밀림.
     min을 0으로 고정해 그리드 트랙이 절대 컨테이너를 넘지 못하게 한다. */
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg-surface);
}
.s-shell-main {
  min-width: 0;
  /* overflow-x: hidden 제거 — box-sizing: border-box 전역 적용으로 실제 overflow 가 0 이 됐음.
     어드민 .shell-main 도 overflow 를 걸지 않음. */
  display: flex;
  flex-direction: column;
}

/* ========== Student Sidebar ========== */
.s-sb {
  width: 240px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--color-border-default);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  /* overflow-y 제거: 콘텐츠가 100vh 안에 들어가므로 스크롤바 불필요.
     만일 장래에 넘치면 .s-sb-scroll 영역에만 overflow-y: auto 부여. */
}
.s-sb-scroll {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
}

.s-sb-section { display: flex; flex-direction: column; gap: 2px; }
.s-sb-section + .s-sb-section { margin-top: 16px; }

.s-sb-group {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 12px 6px;
}

.s-sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  text-align: left;
  width: 100%;
}
/* Phase D-1a: semantic 토큰 — 테마 전환 시 active 색상 자동 반영 */
.s-sb-item:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.s-sb-item.is-active {
  background: var(--color-brand-primary-subtle);
  color: var(--color-brand-primary-hover);
  font-weight: 600;
}
.s-sb-item.is-active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--color-brand-primary-hover);
  border-radius: 0 3px 3px 0;
}
.s-sb-item i { width: 18px; height: 18px; flex-shrink: 0; }
.s-sb-moon {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.7;
}
.s-sb-ext {
  margin-left: auto;
  width: 14px !important;
  height: 14px !important;
  color: var(--color-text-disabled);
}
.s-sb-chev {
  margin-left: auto;
  width: 14px !important;
  height: 14px !important;
  color: var(--color-text-disabled);
}
.s-sb-item.is-active .s-sb-chev { color: var(--color-brand-primary-hover); }

/* C-5a 게시판 새 공지 배지 */
.s-sb-counter-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-action-danger);
  color: var(--color-on-brand);
  font-size: 10.5px;
  font-weight: 700;
  margin-left: auto;
  font-family: var(--font-sans);
}

/* C-4a: 서브메뉴 (마이페이지 전용, 확장 가능) */
.s-sb-sub {
  display: flex;
  flex-direction: column;
  margin: 2px 0 6px 30px;
  padding-left: 12px;
  border-left: 1px solid var(--color-border-default);
  gap: 1px;
}
.s-sb-subitem {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate-600);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.s-sb-subitem:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.s-sb-subitem.is-active {
  color: var(--color-brand-primary-hover);
  font-weight: 600;
  background: var(--color-brand-primary-subtle);
}

.s-sb-divider {
  height: 1px;
  background: var(--color-border-default);
  margin: 16px 12px 12px;
}

.s-sb-foot {
  padding: 12px;
  border-top: 1px solid var(--color-border-default);
}
.s-sb-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--slate-600);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.s-sb-logout:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); }
.s-sb-logout i { width: 16px; height: 16px; }

/* ========== Student TopBar ========== */
.s-tb {
  height: 56px;
  background: #fff;
  border-bottom: 1px solid var(--color-border-default);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.s-tb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.s-tb-brand:hover .s-tb-sub { background: var(--color-border-default); }
.s-tb-logo-img {
  height: 40px;
  width: auto;
  margin-left: 6px;
  margin-right: 8px;
  display: block;
}
.s-tb-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--color-border-subtle);
  letter-spacing: -0.01em;
  transition: background var(--dur-base) var(--ease-out);
}
.s-tb-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.s-tb-greeting {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-right: 4px;
}
.s-tb-icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--slate-600);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.s-tb-icon-btn:hover { background: var(--color-border-subtle); color: var(--color-text-primary); }
.s-tb-icon-btn i { width: 18px; height: 18px; }
.s-tb-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange-500);
  border: 1.5px solid #fff;
}
.s-tb-logout-text {
  height: 32px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--slate-600);
  cursor: pointer;
}
.s-tb-logout-text:hover { background: var(--color-border-subtle); color: var(--color-text-primary); }

/* C-4b-fix2: 모바일 topbar 요소 축약 — 로고 32px, 인사말/서브 뱃지/로그아웃 텍스트 숨김 */
@media (max-width: 640px) {
  .s-tb { padding: 0 12px; gap: 8px; }
  .s-tb-logo-img { height: 32px; margin-left: 0; margin-right: 4px; }
  .s-tb-sub { display: none; }
  .s-tb-greeting { display: none; }
  .s-tb-logout-text { padding: 0 8px; font-size: 11.5px; }
}

/* ========== Page container — 3단 반응형 ==========
   1단 (≥ 1441px): max-width 1200 중앙정렬 → 남는 공간은 좌우 여백
   2단 (1025~1440): max-width 해제 → 메인 영역 전체 차지, 양쪽 패딩만 유지
   3단 (≤ 1024px): 사이드바 오프스크린 + 패딩 축소 (하단 1024 분기) */
.s-page {
  padding: 28px 32px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 1440px) {
  .s-page {
    max-width: none;
    margin: 0;
    padding: 28px 32px 60px;
  }
}

/* ========== Card base ========== */
/* Phase D-1a: semantic 토큰 */
.s-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

/* ========== Section header (common to sections 2/3/4/5) ========== */
.s-section-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.s-section-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.s-section-sub {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* ========== Section 1: Welcome + D-day ========== */
.s-welcome {
  display: flex;
  gap: 16px;
  align-items: stretch;
  background: linear-gradient(135deg, var(--color-brand-primary-subtle) 0%, #fff 100%);
  border: 1px solid var(--color-brand-primary-subtle);
  border-radius: 12px;
  padding: 24px 28px;
}
.s-welcome-msg { flex: 1; min-width: 0; }
.s-welcome-greet {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.s-welcome-date {
  font-size: 13px;
  color: var(--slate-600);
  font-variant-numeric: tabular-nums;
}

.s-dday {
  flex-shrink: 0;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--color-border-default);
}
.s-dday.urgent {
  background: var(--orange-50);
  border-color: var(--orange-500);
  animation: s-dday-pulse 2s ease-in-out infinite;
}
@keyframes s-dday-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.18); }
}
.s-dday-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.s-dday-value {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.s-dday.urgent .s-dday-value { color: var(--orange-600); }
.s-dday-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .s-welcome { flex-direction: column; }
  .s-dday { align-items: flex-start; min-width: 0; }
}

/* ========== Section 2: Video carousel ========== */
.s-videos-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scroll-behavior: auto;            /* JS가 제어하므로 smooth 끔 */
  -webkit-overflow-scrolling: touch;
  user-select: none;                /* 드래그 중 텍스트 선택 방지 */
}
.s-videos-scroll::-webkit-scrollbar { height: 8px; }
.s-videos-scroll::-webkit-scrollbar-track { background: var(--color-border-subtle); }
.s-videos-scroll::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 4px; }

.s-video-card {
  flex-shrink: 0;
  width: 240px;
  background: #fff;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.s-video-card:hover {
  border-color: var(--color-border-default);
  transform: translateY(-2px);
}
.s-video-thumb {
  aspect-ratio: 16 / 9;
  background: var(--color-border-subtle);
  background-size: cover;
  background-position: center;
}
.s-video-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.s-video-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.4;
}
.s-video-progress-bar {
  height: 4px;
  background: var(--color-border-subtle);
  border-radius: 999px;
  overflow: hidden;
}
.s-video-progress-fill {
  height: 100%;
  background: var(--color-brand-primary);
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-out);
}
.s-video-progress-text {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
/* Phase C-2.2-fix: 5 variant — start-next / start-future / resume / next-course / done
   색상 위계: start-next(teal-500 primary) > start-future(teal-700 deep) > resume(teal-500)
             > next-course(slate-800 dark) > done(white ghost) */
.s-video-action {
  margin-top: 4px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--color-brand-primary);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
/* start-next: 이전 회차 모두 완료 후 바로 학습해야 할 다음 0% 회차 — Primary CTA */
.s-video-action--start-next { background: var(--color-brand-primary); color: #fff; border-color: var(--color-brand-primary); }
.s-video-action--start-next:hover { background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); }
/* resume: 1~99% 진행 중 — Primary teal (start-next 와 동일 기본톤) */
.s-video-action--resume { background: var(--color-brand-primary); color: #fff; border-color: var(--color-brand-primary); }
.s-video-action--resume:hover { background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); }
/* start-future: 이전 미완료 있는 0% 회차 — 진한 teal (학습 순서 뒤임을 상기) */
.s-video-action--start-future { background: var(--color-text-link); color: #fff; border-color: var(--color-text-link); }
.s-video-action--start-future:hover { background: var(--color-brand-secondary); border-color: var(--color-brand-secondary); }
/* next-course: home 전용, 100% + 뒤에 미완료 — 다크 slate (CTA 전환) */
.s-video-action--next-course { background: var(--slate-800); color: #fff; border-color: var(--slate-800); }
.s-video-action--next-course:hover { background: var(--color-text-primary); border-color: var(--color-text-primary); }
/* done: 완료 + 더 볼 것 없음 — Ghost white (가장 약한 강조) */
.s-video-action--done { background: #fff; color: var(--color-text-primary); border-color: var(--color-border-default); }
.s-video-action--done:hover { background: var(--color-bg-sunken); }

/* 이전 버전(.s-video-action.next) 호환 — Phase 3 전까지 외부 참조 있을 수 있음. 같은 시각 */
.s-video-action.next { background: var(--slate-800); border-color: var(--slate-800); }
.s-video-action.next:hover { background: var(--color-text-primary); border-color: var(--color-text-primary); }

/* ========== Section 3: Weekly homework grid ========== */
.s-homework-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.s-hw-cell {
  background: #fff;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  padding: 12px 10px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.s-hw-cell:hover { border-color: var(--slate-300); background: var(--color-bg-sunken); }
.s-hw-cell.is-today {
  border: 2px solid var(--color-brand-primary);
  background: var(--color-brand-primary-subtle);
  padding: 11px 9px;
}
.s-hw-cell.is-today:hover { background: var(--color-brand-primary-subtle); border-color: var(--color-brand-primary-hover); }
.s-hw-cell.is-rest { background: var(--color-bg-sunken); cursor: default; }
.s-hw-cell.is-rest:hover { border-color: var(--color-border-default); background: var(--color-bg-sunken); }

.s-hw-day {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.s-hw-cell.is-today .s-hw-day { color: var(--color-text-link); }
.s-hw-date {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  line-height: 1;
}
.s-hw-items {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.s-hw-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--slate-600);
}
.s-hw-icon { font-size: 13px; }
.s-hw-progress { font-variant-numeric: tabular-nums; font-weight: 600; }
.s-hw-status-icon { margin-left: auto; font-size: 11px; font-weight: 700; }
.s-hw-empty {
  font-size: 11.5px;
  color: var(--color-text-disabled);
  margin-top: auto;
}

@media (max-width: 768px) {
  .s-homework-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========== Section 4 + 5: Bottom row ========== */
.s-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .s-bottom-grid { grid-template-columns: 1fr; }
}

/* Notices */
.s-notice-list {
  display: flex;
  flex-direction: column;
}
.s-notice-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
}
.s-notice-item:hover { background: var(--color-bg-sunken); }
.s-notice-item:hover .s-notice-title { color: var(--color-text-link); }
.s-notice-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: color var(--dur-base) var(--ease-out);
}
.s-notice-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.s-notice-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.s-notice-badge.hq     { background: var(--color-brand-secondary); color: #fff; }
.s-notice-badge.branch { background: var(--color-brand-primary-subtle); color: var(--color-text-link); }

/* Today's class */
.s-today-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin-top: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.s-today-card:hover { background: var(--color-bg-sunken); }
.s-today-card:hover .s-today-title { color: var(--color-text-link); }
.s-today-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-brand-primary-subtle);
  color: var(--color-text-link);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s-today-icon i { width: 22px; height: 22px; }
.s-today-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.s-today-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  transition: color var(--dur-base) var(--ease-out);
}
.s-today-meta {
  font-size: 12.5px;
  color: var(--slate-600);
}
.s-today-meta b {
  color: var(--color-text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.s-today-empty {
  text-align: center;
  padding: 32px 12px;
  color: var(--color-text-disabled);
  font-size: 13px;
}

/* ========== Section 1.5: Teacher message ========== */
.s-tmsg {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  cursor: pointer;
  transition: box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.s-tmsg:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--slate-300);
}
.s-tmsg-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-border-subtle);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.s-tmsg-avatar i { width: 24px; height: 24px; }
.s-tmsg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.s-tmsg-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.s-tmsg-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.s-tmsg-content {
  font-size: 15px;
  color: var(--slate-800);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s-tmsg-meta {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: flex-start;
  padding-top: 20px;
}

@media (max-width: 640px) {
  .s-tmsg { flex-direction: column; align-items: flex-start; }
  .s-tmsg-meta { padding-top: 0; align-self: flex-end; }
}

/* ========== Drag-scroll cursor + pointer-events (관성 있음) ========== */
.s-videos-scroll { cursor: grab; }
.s-videos-scroll.is-dragging { cursor: grabbing; }
.s-videos-scroll.is-dragging * {
  cursor: grabbing !important;
  pointer-events: none;             /* 드래그 중 카드 내부 hover/click 차단 */
}
/* 드래그 아닐 때 카드 내부 버튼 정상 동작 */
.s-videos-scroll:not(.is-dragging) .s-video-card button {
  pointer-events: auto;
}
.s-video-card { cursor: pointer; }

/* 햄버거: 1024↑ 에서는 숨김 (기본). 1024↓ 에서 아래 미디어 쿼리가 display:inline-flex 로 override */
.s-tb-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: 8px;
  cursor: pointer;
  margin-right: -4px;
}
.s-tb-hamburger:hover { background: var(--color-border-subtle); color: var(--color-text-primary); }
.s-tb-hamburger i { width: 20px; height: 20px; }

/* 백드롭: 기본 숨김, 1024↓ + is-open 시 아래 미디어 쿼리에서 visible */
.s-sb-backdrop { display: none; }

@keyframes s-sb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ========== Responsive: 1024px ↓ 사이드바 숨김 (모바일·태블릿) ========== */
@media (max-width: 1024px) {
  .s-shell { grid-template-columns: minmax(0, 1fr); }
  .s-page { padding: 24px 16px 48px; }
  .s-sb {
    position: fixed;
    left: -240px;
    top: 0;
    z-index: 100;
    transition: left var(--dur-slow) var(--ease-out);
  }
  .s-sb.is-open {
    left: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  }
  .s-tb-hamburger { display: inline-flex; }
  .s-sb-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 90;
    animation: s-sb-fade var(--dur-base) var(--ease-out);
  }
}

/* ========== Tweaks panel (Claude Design 호환, 학생 포털 공통) ========== */
.tweaks {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: #fff;
  border-left: 1px solid var(--color-border-default);
  box-shadow: -4px 0 20px rgba(15, 23, 42, 0.08);
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.tweaks-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border-default);
}
.tweaks-hd .t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.tweaks-hd .t i { width: 16px; height: 16px; color: var(--color-brand-primary-hover); }
.tweaks-hd button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tweaks-hd button:hover { background: var(--color-border-subtle); color: var(--color-text-primary); }
.tweaks-hd button i { width: 16px; height: 16px; }
.tweaks-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tweaks-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tweaks-row label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tweaks-row input[type="text"],
.tweaks-row input[type="number"] {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-primary);
  background: #fff;
}
.tweaks-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.tweaks-row .seg {
  display: flex;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  overflow: hidden;
}
.tweaks-row .seg button {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border: 0;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.tweaks-row .seg button + button { border-left: 1px solid var(--color-border-default); }
.tweaks-row .seg button:hover { background: var(--color-bg-sunken); }
.tweaks-row .seg button.on {
  background: var(--color-brand-primary-subtle);
  color: var(--color-text-link);
  font-weight: 600;
}