/* ═══════════════════════════════════════════════════════════════
   overrides.css
   뒤에 와야 이기는 규칙들 — 사이드바 하단 프로필, 당겨서 새로고침, 검색줄 스크림, 모바일 가로 넘침 방지.

   ⚠️ **이 파일은 반드시 마지막에 로드되어야 한다.** app.css의 #sidebar · #search-bar ·
   .popup-menu 등 같은 선택자를 의도적으로 덮어쓰기 때문에, 순서가 바뀌면 조용히 깨진다.

   ⚠️ 이 파일들은 index.html의 <style> 하나를 순서 그대로 자른 것이다.
      선택자가 파일을 넘나들며 겹치므로 <link> 순서를 바꾸면 화면이 깨진다.
      순서: tokens → base → app → landing → overrides
   ═══════════════════════════════════════════════════════════════ */
/* ── 사이드바 하단 프로필 ────────────────────────────────────────────
   접힌 레일에서는 아바타만 보이고, 펼치면 옆에 이름·이메일·학급이 따라 나온다. */
.sidebar-profile { display: flex; align-items: center; gap: 0.75rem; width: 100%; }
.sidebar-profile-info {
  display: none; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 0; flex: 1; text-align: left; padding-right: 0.5rem;
}
.sidebar-profile-info > span { max-width: 100%; }

/* ── 당겨서 새로고침 ─────────────────────────────────────────────────
   ⚠️ 브라우저 기본 당겨서 새로고침(Chrome Android 등)과 겹치면 두 개가 동시에 돌아 어지럽다.
      overscroll-behavior-y: contain 으로 기본 동작을 끄고 우리 인디케이터만 쓴다.
      (iOS Safari의 고무줄 효과도 이걸로 함께 잡힌다) */
/* ⚠️ body에는 걸지 말 것. 모바일에서 body는 overflow-y가 auto로 계산되는데(가로 숨김의
   부작용) 내용이 다 들어가 **스크롤은 불가능한** 상태다. 거기에 contain을 걸면 휠 이벤트가
   body에 잡힌 뒤 html로 넘어가지 못해, 마우스를 연결하면 아예 스크롤이 안 된다
   (터치는 되고 휠만 막혀서 찾기 어려웠다). 실제 스크롤 주체인 html에만 건다. */
html { overscroll-behavior-y: contain; }

#pull-refresh {
  position: fixed; top: 0; left: 50%; z-index: 58;
  transform: translate(-50%, -64px);
  pointer-events: none; opacity: 0;
}
/* 손가락을 따라 움직이는 동안에는 전환을 끄고(즉시 반응), 놓은 뒤에만 부드럽게 되돌린다. */
#pull-refresh.settling { transition: transform 0.3s cubic-bezier(0.2,0,0,1), opacity 0.2s ease-out; }
.pull-refresh-circle {
  width: 44px; height: 44px; border-radius: var(--m3-shape-full);
  background-color: rgb(var(--md-surface-container-high-rgb));
  color: rgb(var(--md-primary-rgb));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25), 0 4px 8px 3px rgb(0 0 0 / 0.10);
}
/* 새로고침이 도는 동안 아이콘이 계속 회전한다(당기는 중에는 JS가 각도를 직접 준다). */
#pull-refresh.refreshing .m3-icon { animation: pullSpin 0.9s linear infinite; }
@keyframes pullSpin { to { transform: rotate(360deg); } }

/* 섹션 헤더의 액션 버튼 줄(캘린더의 태그 관리·학사일정 가져오기·일정 추가 등).
   ⚠️ 좁은 화면에서 flex가 버튼을 압축하면 "학 사 일 정" 처럼 글자가 세로로 쪼개진다.
      줄바꿈을 허용하고(flex-wrap) 각 버튼은 자기 폭을 지키게(nowrap + shrink 0) 한다. */
.section-actions { flex-wrap: wrap; }
.section-actions > * { white-space: nowrap; flex-shrink: 0; }
/* 헤더에 버튼이 하나뿐인 섹션(급식·시간표·갤러리·자료실 업로드)도 같은 이유로 눌리지 않게. */
.content-section > .flex.justify-between > button { white-space: nowrap; flex-shrink: 0; }

/* ── [10] 검색줄 스크림 — 검색이 열리면 그 아래 화면을 어둡게 덮는다. ──
   상단바(z-40)와 검색줄(z-40)은 스크림(z-35) 위에 남아 그대로 조작할 수 있다. */
#search-scrim { opacity: 0; pointer-events: none; transition: opacity 0.25s ease-out; }
body.search-open #search-scrim { opacity: 1; pointer-events: auto; }
/* 상단 앱바는 평소 배경이 투명이라, 그대로 두면 뒤의 스크림이 비쳐 함께 어두워진다.
   어두워질 곳은 "검색줄 아래"이므로 검색 중에는 앱바에 검색줄과 같은 면을 깔아 준다. */
body.search-open #mobile-topbar { background-color: rgb(var(--md-surface-rgb)); }
#search-bar { position: relative; z-index: 40; }
/* 모바일에서는 상단바와 같은 면으로 이어 붙인다 — surface-container(한 톤 진함)를 쓰면
   상단바와 갈라져 투톤으로 보인다(사용자 지적). 데스크톱은 섬 사이에 떠 있어 구분이 필요하므로 그대로. */
@media (max-width: 767.98px) {
  #search-bar .search-bar-inner { background-color: rgb(var(--md-surface-rgb)); }
}

/* ── [5] 모바일에서 가로로 새는 것 막기 ──
   모달·팝업이 화면보다 넓어지면 페이지 전체에 가로 스크롤이 생기고 축소된 것처럼 보인다.
   ⚠️ 넓은 표(시간표·급식)는 자기 안에서 스크롤해야 하므로 overflow-x:auto를 유지한다. */
@media (max-width: 767.98px) {
  html { overflow-x: hidden; }
  .modal-overlay > * { max-width: calc(100vw - 2rem); }
  .popup-menu { max-width: calc(100vw - 2rem); }
  /* 사이드바 드로어 하단(설정)이 홈 인디케이터에 가려지지 않게 안전영역만큼 띄운다. */
  #sidebar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem); }

  /* 날짜 네비 헤더(캘린더·급식·시간표) — [◀] [제목 · 오늘] [▶] 가 한 줄에 들어가야 한다.
     ⚠️ 제목·버튼에 nowrap만 걸면 줄바꿈 대신 **가로로 넘쳐** 화면이 잘린다(실제로 겪음).
        좁은 화면에서는 제목을 한 단계 낮추고(22→16px = title-medium) 버튼 여백을 좁혀
        폭 자체를 확보한다. 둘 다 M3 타입 스케일 안의 값이다. */
  #cal-month-title, #cal-week-title, #meal-week-title, #timetable-week-title {
    font-size: 16px; line-height: 24px;
  }
  #cal-today, #cal-week-today, #meal-week-today, #timetable-week-today {
    padding-left: 0.5rem; padding-right: 0.625rem;
  }
}

#sidebar-scrim { opacity: 0; pointer-events: none; transition: opacity 0.3s ease-out; }
body.sidebar-open #sidebar-scrim { opacity: 1; pointer-events: auto; }
/* 사이드바 토글 버튼(모바일 FAB·데스크톱 ☰) 안의 3줄 아이콘 — 열림 상태(.sidebar-toggle-open)가
   되면 위/아래 줄이 회전하며 X자로, 가운데 줄은 페이드아웃되며 자연스럽게 모양이 바뀐다. */
/* 캘린더 범례 필터 칩 — 꺼진 종류는 색 점까지 흐려져서 "지금 안 보는 중"임이 드러난다. */
.cal-filter-chip[aria-pressed="false"] { opacity: 0.4; }
.cal-filter-chip[aria-pressed="false"] > span:first-child { filter: grayscale(1); }
.cal-filter-chip { -webkit-tap-highlight-color: transparent; }
.cal-filter-chip:active { transform: scale(0.96); }

/* 오픈채팅방은 화면 아래쪽에 큰 빈 공간이 남았었다(필기: "여백 채우기"). 섹션 자체에 최소 높이를
   주고(#section-board는 flex-col), 목록에 flex-1을 줘서 남는 세로를 목록이 전부 흡수하게 한다 —
   입력줄은 자연히 화면 맨 아래에 붙는다. 빼는 값은 각각 상단바/본문 패딩/모바일 하단 플로팅 바 높이. */
/* ⚠️ min-height가 아니라 **height**로 못 박는다. min-height였을 땐 아래의 푸터·여백이 더해져
   섹션이 화면보다 커졌고, 그 결과 처음 들어왔을 때 입력창이 화면 밖으로 잘렸다(사용자 지적).
   높이를 고정하면 메시지 목록(flex-1)만 안에서 스크롤하고 입력줄은 늘 바닥에 남는다.
   빼는 값 = 상단바(모바일만) + #main-content 세로 패딩 + 모바일 하단 툴바 자리. */
#section-board:not(.hidden) { height: calc(100dvh - 4rem - 2rem); min-height: 0; }
@media (min-width: 768px) {
  #section-board:not(.hidden) { height: calc(100dvh - 1.5rem - 1.5rem); }   /* #main-content의 md:p-6 상하 패딩 */
}
@media (max-width: 767.98px) {
  #section-board:not(.hidden) { height: calc(100dvh - 4rem - 2rem - 5rem - env(safe-area-inset-bottom, 0px)); }   /* 상단 앱바 + 본문 패딩 + Nav Bar */
}
/* 그래도 스크롤이 생기는 상황(주소창 접힘 등)에 대비해 입력줄을 바닥에 붙여 둔다 —
   화면을 위아래로 움직여도 언제나 바로 메시지를 보낼 수 있다. */
#section-board .relative:has(#chat-input-row) { position: sticky; bottom: 0; z-index: 5; }
/* 채팅 화면에서는 버전 푸터를 숨긴다. 안 숨기면 그만큼 페이지가 길어져 입력줄이 위로 밀린다. */
body.on-board #site-footer { display: none; }

/* 내부 스크롤 영역의 스크롤바를 얇고 눈에 덜 띄게 (필기: "스크롤 바 축소").
   Firefox는 scrollbar-width/color, WebKit은 ::-webkit-scrollbar로 각각 지정한다. */
.chat-scroll, .sidebar-nav-scroll, #search-panel, #notif-panel { scrollbar-width: thin; scrollbar-color: rgb(var(--md-outline-rgb) / 0.35) transparent; }
.chat-scroll::-webkit-scrollbar, .sidebar-nav-scroll::-webkit-scrollbar,
#search-panel::-webkit-scrollbar, #notif-panel::-webkit-scrollbar { width: 6px; height: 6px; }
.chat-scroll::-webkit-scrollbar-track, .sidebar-nav-scroll::-webkit-scrollbar-track,
#search-panel::-webkit-scrollbar-track, #notif-panel::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb, .sidebar-nav-scroll::-webkit-scrollbar-thumb,
#search-panel::-webkit-scrollbar-thumb, #notif-panel::-webkit-scrollbar-thumb {
  background: rgb(var(--md-outline-rgb) / 0.35); border-radius: 9999px;
}
.chat-scroll::-webkit-scrollbar-thumb:hover, .sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--md-outline-rgb) / 0.55);
}
.hamburger-icon { position: relative; width: 20px; height: 14px; display: inline-block; flex-shrink: 0; }
.hamburger-icon span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease, top 0.25s cubic-bezier(0.4,0,0.2,1);
}
.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 6px; }
.hamburger-icon span:nth-child(3) { top: 12px; }
.sidebar-toggle-open .hamburger-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.sidebar-toggle-open .hamburger-icon span:nth-child(2) { opacity: 0; }
.sidebar-toggle-open .hamburger-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media print {
  body > *:not(#modal-viewer) { display: none !important; }
  #modal-viewer { position: static !important; background: #fff !important; overflow: visible !important; padding: 0 !important; }
  #modal-viewer .no-print { display: none !important; }
  #viewer-zoom-wrap { transform: none !important; }
  #viewer-content, #viewer-content * { color: #000 !important; }
}

/* ── 모바일 홈 첫 화면 여백 줄이기 ────────────────────────────────────
   상단바에 이미 학급 이름("2학년 8반")이 나오므로 대시보드 안의 큰 로고는 중복이다.
   ⚠️ 이게 있으면 812px 화면에서 실제 정보(다가오는 일정)가 448px 아래에서 시작해
      첫 화면의 55%를 브랜드·인사가 차지한다. 데스크톱은 공간이 넉넉해 그대로 둔다. */
@media (max-width: 767.98px) {
  .cs-logo-lead { display: none; }
}