/* Pretendard Font Import */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  /* Royal Blue & Minimal White theme tokens (Kumho High Official Emblem Palette) */
  --brand-primary: #1365C8;         /* Cobalt Royal Blue: main CTA & active points */
  --brand-primary-hover: #0E4EA1;   /* Dark Navy: hover state */
  --brand-primary-dark: #0A3B7D;    /* Deep Royal Navy */
  --brand-primary-soft: #EFF6FF;    /* Light royal ice blue tint */
  --brand-accent: #1365C8;
  --surface-bg: #F8FAFC;            /* Clean airy off-white page background */
  --text-main: #0F172A;             /* Deep navy charcoal body & headings text */
}

/* Light mode: unify body and headings text to deep navy charcoal (#0F172A) for crisp legibility */
html:not(.dark) body,
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) h5,
html:not(.dark) h6,
html:not(.dark) .text-slate-900,
html:not(.dark) .text-slate-800,
html:not(.dark) .text-slate-700 {
  color: var(--text-main);
}

html:not(.dark) body {
  background-color: var(--surface-bg);
}

/* Action element focus states */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

::selection {
  background-color: rgba(19, 101, 200, 0.18);
}

/* Primary CTA buttons: Cobalt Royal Blue with crisp white text, hover to dark navy */
.btn-primary,
button.bg-brand-600,
a.bg-brand-600 {
  background-color: #1365C8 !important;
  color: #FFFFFF !important;
  transition: all 0.15s ease-in-out;
}

.btn-primary:hover,
button.bg-brand-600:hover,
a.bg-brand-600:hover {
  background-color: #0E4EA1 !important;
}

/* Custom animations */
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-scaleUp {
  animation: scaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fadeIn {
  animation: fadeIn 0.25s ease-out forwards;
}

/* Desktop Tab styling */
.nav-tab-btn {
  color: #64748b;
  transition: all 0.2s ease;
}

.dark .nav-tab-btn {
  color: #94a3b8;
}

.nav-tab-btn:hover {
  color: #0E4EA1;
  background-color: #EFF6FF;
}

.dark .nav-tab-btn:hover {
  color: #f8fafc;
  background-color: #334155;
}

.nav-tab-btn.active {
  color: #ffffff !important;
  background-color: #1365C8 !important;
  box-shadow: 0 2px 6px rgba(19, 101, 200, 0.28);
}

.nav-tab-btn.active:hover {
  background-color: #0E4EA1 !important;
}

.dark .nav-tab-btn.active {
  color: #ffffff !important;
  background-color: #1365C8 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.dark .nav-tab-btn.active:hover {
  background-color: #0E4EA1 !important;
}

/* Navigation Icon Micro-Interactions */
.nav-tab-btn svg,
.nav-tab-btn i,
.mobile-nav-btn svg,
.mobile-nav-btn i {
  display: inline-block !important;
  transform-origin: center center !important;
  vertical-align: middle;
}

@keyframes nav-bounce {
  0% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-5px) scale(1.18); }
  50% { transform: translateY(0) scale(0.95); }
  75% { transform: translateY(-2px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes nav-tilt {
  0% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-22deg) scale(1.15); }
  45% { transform: rotate(18deg) scale(1.15); }
  70% { transform: rotate(-8deg) scale(1.06); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes nav-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.28); }
  55% { transform: scale(0.94); }
  75% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes nav-clock {
  0% { transform: rotate(0deg) scale(1); }
  35% { transform: rotate(65deg) scale(1.15); }
  65% { transform: rotate(-25deg) scale(1.1); }
  85% { transform: rotate(12deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Hover, active, and click animations on nav tabs (desktop & mobile) */
.nav-tab-btn[data-tab="home"]:hover svg,
.nav-tab-btn[data-tab="home"]:hover i,
.nav-tab-btn[data-tab="home"]:active svg,
.nav-tab-btn[data-tab="home"]:active i,
.nav-tab-btn[data-tab="home"].anim-trigger svg,
.nav-tab-btn[data-tab="home"].anim-trigger i,
.mobile-nav-btn[data-tab="home"]:hover svg,
.mobile-nav-btn[data-tab="home"]:hover i,
.mobile-nav-btn[data-tab="home"]:active svg,
.mobile-nav-btn[data-tab="home"]:active i,
.mobile-nav-btn[data-tab="home"].anim-trigger svg,
.mobile-nav-btn[data-tab="home"].anim-trigger i {
  animation: nav-bounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-tab-btn[data-tab="meal"]:hover svg,
.nav-tab-btn[data-tab="meal"]:hover i,
.nav-tab-btn[data-tab="meal"]:active svg,
.nav-tab-btn[data-tab="meal"]:active i,
.nav-tab-btn[data-tab="meal"].anim-trigger svg,
.nav-tab-btn[data-tab="meal"].anim-trigger i,
.mobile-nav-btn[data-tab="meal"]:hover svg,
.mobile-nav-btn[data-tab="meal"]:hover i,
.mobile-nav-btn[data-tab="meal"]:active svg,
.mobile-nav-btn[data-tab="meal"]:active i,
.mobile-nav-btn[data-tab="meal"].anim-trigger svg,
.mobile-nav-btn[data-tab="meal"].anim-trigger i {
  animation: nav-tilt 0.55s ease-in-out;
}

.nav-tab-btn[data-tab="schedule"]:hover svg,
.nav-tab-btn[data-tab="schedule"]:hover i,
.nav-tab-btn[data-tab="schedule"]:active svg,
.nav-tab-btn[data-tab="schedule"]:active i,
.nav-tab-btn[data-tab="schedule"].anim-trigger svg,
.nav-tab-btn[data-tab="schedule"].anim-trigger i,
.mobile-nav-btn[data-tab="schedule"]:hover svg,
.mobile-nav-btn[data-tab="schedule"]:hover i,
.mobile-nav-btn[data-tab="schedule"]:active svg,
.mobile-nav-btn[data-tab="schedule"]:active i,
.mobile-nav-btn[data-tab="schedule"].anim-trigger svg,
.mobile-nav-btn[data-tab="schedule"].anim-trigger i {
  animation: nav-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-tab-btn[data-tab="timetable"]:hover svg,
.nav-tab-btn[data-tab="timetable"]:hover i,
.nav-tab-btn[data-tab="timetable"]:active svg,
.nav-tab-btn[data-tab="timetable"]:active i,
.nav-tab-btn[data-tab="timetable"].anim-trigger svg,
.nav-tab-btn[data-tab="timetable"].anim-trigger i,
.mobile-nav-btn[data-tab="timetable"]:hover svg,
.mobile-nav-btn[data-tab="timetable"]:hover i,
.mobile-nav-btn[data-tab="timetable"]:active svg,
.mobile-nav-btn[data-tab="timetable"]:active i,
.mobile-nav-btn[data-tab="timetable"].anim-trigger svg,
.mobile-nav-btn[data-tab="timetable"].anim-trigger i {
  animation: nav-clock 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile Nav button active state */
.mobile-nav-btn.active {
  color: #1365C8;
}

.dark .mobile-nav-btn.active {
  color: #60A5FA;
}

/* Comprehensive Dark Mode Text Rules */
.dark body {
  color: #f8fafc;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: #ffffff !important;
}

/* Ensure no dark text remains on dark backgrounds */
.dark .text-slate-900:not(.bg-amber-400):not(.bg-amber-300),
.dark .text-slate-800,
.dark .text-slate-700 {
  color: #f1f5f9;
}

.dark .text-slate-600 {
  color: #cbd5e1;
}

/* Dropdown and input field support in dark mode */
.dark input,
.dark select,
.dark textarea {
  color: #f8fafc !important;
  background-color: #1e293b !important;
}

.dark select option {
  background-color: #1e293b;
  color: #f8fafc;
}

/* Grade filter chip styling */
.grade-chip {
  background-color: #F1F5F9;
  color: #334155;
  border: 1px solid #E2E8F0;
  transition: all 0.15s ease;
}

.grade-chip:hover:not(.active) {
  background-color: #E2E8F0;
  color: #0F172A;
}

.dark .grade-chip {
  background-color: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

.dark .grade-chip:hover:not(.active) {
  background-color: #334155;
  color: #f8fafc;
}

.grade-chip.active {
  background-color: #1365C8;
  color: #ffffff !important;
  border-color: #1365C8;
  box-shadow: 0 1px 4px rgba(19, 101, 200, 0.25);
}

.grade-chip.active:hover {
  background-color: #0E4EA1;
  border-color: #0E4EA1;
}

.dark .grade-chip.active {
  background-color: #1365C8;
  color: #ffffff !important;
  border-color: #2563EB;
}

.dark .grade-chip.active:hover {
  background-color: #0E4EA1;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.6);
}

/* iOS Safe Area bottom padding */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
  nav.md\:hidden {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Badge pulse */
.pulse-badge {
  animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

/* Hide scrollbar for clean chip slider */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Touch tap optimization for mobile & tablet */
button, a {
  -webkit-tap-highlight-color: transparent;
}

/* Monthly Calendar Styling */
.calendar-day-cell {
  position: relative;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 2px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  transition: all 0.15s ease;
  user-select: none;
}

@media (min-width: 640px) {
  .calendar-day-cell {
    min-height: 64px;
    padding: 6px 4px;
  }
}

.calendar-day-cell:hover:not(.empty-cell) {
  background-color: #F1F5F9;
  border-color: #CBD5E1;
}

.dark .calendar-day-cell:hover:not(.empty-cell) {
  background-color: #334155;
  border-color: #475569;
}

.calendar-day-cell.selected-day {
  background-color: #EFF6FF !important;
  border-color: #1365C8 !important;
  box-shadow: 0 0 0 2px rgba(19, 101, 200, 0.25);
}

.dark .calendar-day-cell.selected-day {
  background-color: rgba(19, 101, 200, 0.2) !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

/* Timetable Table Styles */
.timetable-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: center;
  font-size: 0.8125rem;
}

.timetable-table th,
.timetable-table td {
  border-right: 1px solid rgba(226, 232, 240, 0.8);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.dark .timetable-table th,
.dark .timetable-table td {
  border-right: 1px solid rgba(51, 65, 85, 0.7);
  border-bottom: 1px solid rgba(51, 65, 85, 0.7);
}

.timetable-table th:last-child,
.timetable-table td:last-child {
  border-right: none;
}

.timetable-table tbody tr:last-child td {
  border-bottom: none;
}

.timetable-today-col {
  background-color: rgba(239, 246, 255, 0.75) !important;
}

.dark .timetable-today-col {
  background-color: rgba(19, 101, 200, 0.15) !important;
}

/* Timetable interactive slot & schedule badge */
.timetable-slot-card {
  position: relative;
  cursor: pointer;
  transition: all 0.15s ease;
}

.timetable-slot-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.dark .timetable-slot-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Timetable Slot Badge Group (2개 이상 일정 지원: 우측 상단 flex 컨테이너) */
.timetable-badge-group {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  z-index: 10;
  pointer-events: none;
  max-width: 85%;
  flex-wrap: wrap;
}

.timetable-schedule-badge {
  position: relative;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background-color: #E11D48; /* Default: 수행평가 (Rose) */
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  letter-spacing: -0.5px;
}

.timetable-schedule-badge.badge-suhaeng {
  background-color: #E11D48;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.4);
}
.timetable-schedule-badge.badge-junbi {
  background-color: #D97706;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.4);
}
.timetable-schedule-badge.badge-sukje {
  background-color: #059669;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.4);
}
.timetable-schedule-badge.badge-etc {
  background-color: #7C3AED;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.4);
}

/* 이모티콘 배지일 때: 배경색 제거 및 이모티콘 크기 확대 */
.timetable-schedule-badge.is-emoji {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 1px !important;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.18));
}
@media (min-width: 1280px) {
  .timetable-schedule-badge.is-emoji {
    font-size: 20px;
  }
}

/* Slot Tag Buttons in Modal (4가지 태그별 고유 색상) */
.slot-tag-btn {
  user-select: none;
  cursor: pointer;
}
.slot-tag-btn.active-tag-suhaeng {
  background-color: #E11D48 !important;
  color: #FFFFFF !important;
  border-color: #BE123C !important;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.3) !important;
}
.slot-tag-btn.active-tag-junbi {
  background-color: #D97706 !important;
  color: #FFFFFF !important;
  border-color: #B45309 !important;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.3) !important;
}
.slot-tag-btn.active-tag-sukje {
  background-color: #059669 !important;
  color: #FFFFFF !important;
  border-color: #047857 !important;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.3) !important;
}
.slot-tag-btn.active-tag-etc {
  background-color: #7C3AED !important;
  color: #FFFFFF !important;
  border-color: #6D28D9 !important;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.3) !important;
}

/* ========================================================
   2단계 & 3단계: 전자칠판 대화면 전용 풀스크린 및 1-Page Widescreen 최적화
   ======================================================== */

/* Fullscreen / Kiosk Mode Layout Scaling (모든 탭 100% 무스크롤 Zero-Scroll 최적화) */
html:fullscreen,
html:-webkit-full-screen,
body.kiosk-mode,
body.kiosk-mode html {
  overflow: hidden !important;
  height: 100vh !important;
  width: 100vw !important;
}

body.kiosk-mode {
  letter-spacing: -0.015em;
  overflow: hidden !important;
}

/* Kiosk Header: Slightly more compact to maximize space for cards */
body.kiosk-mode header {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
body.kiosk-mode header > div {
  max-width: 1720px !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Kiosk Desktop Navigation Tabs */
body.kiosk-mode #desktop-nav-tabs {
  margin-bottom: 0.4rem !important;
  padding: 0.2rem !important;
  flex-shrink: 0 !important;
}
body.kiosk-mode .nav-tab-btn {
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}

/* Kiosk Main Container: Exactly fills the remaining viewport height without vertical scrolling */
body.kiosk-mode main {
  max-width: 1720px !important;
  height: calc(100vh - 54px) !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.35rem !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Kiosk Active Tab: Takes 100% of the remaining height with zero overflow */
body.kiosk-mode .tab-content:not(.hidden) {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* All 4 Tab Board Containers: Fully stretch to 100% height with zero scroll */
body.kiosk-mode #home-board,
body.kiosk-mode #meal-board,
body.kiosk-mode #sched-board,
body.kiosk-mode #timetable-board {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 0 !important;
}

/* Ensure flex children flex down smoothly on any display height without scrollbars */
body.kiosk-mode .home-period-card {
  min-height: 0 !important;
}
body.kiosk-mode .meal-dish-row {
  min-height: 0 !important;
}
body.kiosk-mode .calendar-day-cell {
  min-height: 0 !important;
}

/* Hide mobile bottom navigation in kiosk / fullscreen mode */
body.kiosk-mode .mobile-nav-bar,
body.kiosk-mode [data-mobile-nav="true"] {
  display: none !important;
}

/* Real-time active period card highlight on Home Timetable */
.period-now-active {
  position: relative;
  background-color: rgba(19, 101, 200, 0.08) !important;
  border-color: #1365C8 !important;
  box-shadow: 0 0 0 2px #1365C8, 0 4px 12px rgba(19, 101, 200, 0.15) !important;
  font-weight: 700 !important;
  transform: translateY(-1px);
}

.dark .period-now-active {
  background-color: rgba(19, 101, 200, 0.22) !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 2px #3B82F6, 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}

/* Live period badge pulse */
.live-pulse-dot {
  animation: liveDotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes liveDotPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

/* Custom Slim Scrollbars for Widescreen 1-Page containers */
#schedule-selected-day-list::-webkit-scrollbar,
#schedule-list-container::-webkit-scrollbar,
#slot-schedule-list::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar {
  width: 5px;
}

#schedule-selected-day-list::-webkit-scrollbar-track,
#schedule-list-container::-webkit-scrollbar-track,
#slot-schedule-list::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

#schedule-selected-day-list::-webkit-scrollbar-thumb,
#schedule-list-container::-webkit-scrollbar-thumb,
#slot-schedule-list::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.4);
  border-radius: 9999px;
}

.dark #schedule-selected-day-list::-webkit-scrollbar-thumb,
.dark #schedule-list-container::-webkit-scrollbar-thumb,
.dark #slot-schedule-list::-webkit-scrollbar-thumb,
.dark .overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.5);
}

/* Large screen table layout optimization: full-width distribution */
@media (min-width: 1024px) {
  .timetable-table {
    table-layout: fixed;
    width: 100%;
  }

  .calendar-day-cell {
    min-height: 56px;
    padding: 4px 3px;
  }
}


/* ========================================================
   홈 전자칠판 보드 (Board Layout) - 영역을 가득 채우는 대화면 컴포넌트
   ======================================================== */

/* 실시간 교시 배지 (주황 영역) */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  padding: 0.65rem 1rem;
  border-radius: 0.9rem;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
@media (min-width: 1280px) {
  .live-badge { font-size: 1.22rem; padding: 0.72rem 1.2rem; }
}
.live-badge-class   { background: linear-gradient(135deg, #1365C8, #0A3B7D); }
.live-badge-break   { background: linear-gradient(135deg, #10B981, #047857); }
.live-badge-lunch   { background: linear-gradient(135deg, #F59E0B, #D97706); }
.live-badge-idle    { background: linear-gradient(135deg, #64748B, #334155); }

/* 홈 시간표 교시 카드: 카드 높이를 7등분하여 가득 채움 (시간 표시 제거 후 과목명 여유 공간 확보 & 우측 선생님 성함 + 일정 배지 배치) */
.home-period-card {
  flex: 1 1 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.65rem;
  padding: 0 0.85rem;
  border-radius: 0.9rem;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
}
.dark .home-period-card { border-color: #334155; background: rgba(30, 41, 59, 0.6); }
.home-period-card .hp-num {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.65rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.02rem;
  flex-shrink: 0;
}
.home-period-card .hp-subject {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.home-period-card .hp-teacher {
  font-size: 0.88rem;
  color: #64748B;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.dark .home-period-card .hp-teacher {
  color: #94A3B8;
}
@media (min-width: 1280px) {
  .home-period-card .hp-num { width: 2.5rem; height: 2.5rem; font-size: 1.15rem; }
  .home-period-card .hp-subject { font-size: 1.2rem; }
  .home-period-card .hp-teacher { font-size: 0.96rem; }
}
@media (min-width: 1600px) {
  .home-period-card .hp-subject { font-size: 1.32rem; }
  .home-period-card .hp-teacher { font-size: 1.04rem; }
}

/* 홈 급식 메뉴 목록: 2열 그리드로 영역을 가득 채움 (줄바꿈/잘림 방지 적정 폰트 크기) */
.home-dish-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.15rem;
  align-items: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1E293B;
  overflow: hidden;
}
.dark .home-dish-list { color: #E2E8F0; }
.home-dish-list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1280px) { .home-dish-list { font-size: 1.0rem; } }
@media (min-width: 1600px) { .home-dish-list { font-size: 1.08rem; } }

/* 홈 실시간 시간별 날씨 위젯 (두번째 레퍼런스 이미지 디자인 반영 + 각 시간 날씨 열 정중앙 아래 점 정렬) */
.home-weather-card {
  background: linear-gradient(180deg, #87A8E2 0%, #7699D8 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(100, 135, 205, 0.22);
}
.dark .home-weather-card {
  background: linear-gradient(180deg, #4B6FA8 0%, #38588E 100%);
  border-color: rgba(255, 255, 255, 0.15);
}
.hw-grid-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  text-align: center;
  width: 100%;
}
.hw-time {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.hw-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  margin: 2px 0;
}
.hw-temp {
  font-size: 1.12rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.hw-curve-box {
  position: relative;
  width: 100%;
  height: 20px;
  margin: 2px 0;
}
.hw-curve-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.hw-dots-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hw-dot-col {
  position: relative;
  width: 100%;
  height: 100%;
}
.hw-curve-dot {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}
.hw-precip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
@media (min-width: 1280px) {
  .hw-time { font-size: 0.85rem; }
  .hw-icon-wrap { height: 32px; }
  .hw-temp { font-size: 1.28rem; }
  .hw-curve-box { height: 22px; }
  .hw-curve-dot { width: 7.5px; height: 7.5px; }
  .hw-precip { font-size: 0.78rem; }
}

/* 홈 학사일정 항목 */
.home-sched-item {
  flex: 1 1 0;
  min-height: 38px;
  max-height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem;
  padding: 0 0.85rem;
  border-radius: 0.8rem;
  background: #F8FAFC;
  border: 1px solid #EEF2F7;
}
.dark .home-sched-item { background: rgba(51, 65, 85, 0.4); border-color: #334155; }

/* 작은 바로가기 버튼 */
.portal-mini-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 0.4rem 0.25rem;
  border-radius: 0.6rem;
  font-size: 0.7rem; font-weight: 700;
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.portal-mini-btn:hover { color: #1365C8; border-color: #93C5FD; background: #EFF6FF; }
.dark .portal-mini-btn { color: #CBD5E1; background: #1E293B; border-color: #334155; }
.dark .portal-mini-btn:hover { color: #93C5FD; border-color: #1365C8; }

/* ========================================================
   급식 탭 대화면 보드 (Tab 2: Meal Board Layout)
   ======================================================== */
.meal-dish-row {
  flex: 1 1 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 1rem;
  border-radius: 0.9rem;
  background: #F8FAFC;
  border: 1px solid #EEF2F7;
  transition: all 0.15s ease;
}
.dark .meal-dish-row {
  background: rgba(30, 41, 59, 0.6);
  border-color: #334155;
}
.meal-dish-row .mdr-num {
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
  flex-shrink: 0;
  background: #EFF6FF;
  color: #1365C8;
}
.dark .meal-dish-row .mdr-num {
  background: rgba(19, 101, 200, 0.25);
  color: #93C5FD;
}
.meal-dish-row .mdr-name {
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dark .meal-dish-row .mdr-name {
  color: #F1F5F9;
}
.meal-dish-row.has-allergen-alert {
  background: #FFFBEB;
  border-color: #FCD34D;
}
.dark .meal-dish-row.has-allergen-alert {
  background: rgba(120, 53, 15, 0.25);
  border-color: #B45309;
}
@media (min-width: 1280px) {
  .meal-dish-row {
    min-height: 48px;
    padding: 0 1.25rem;
  }
  .meal-dish-row .mdr-num {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1rem;
  }
  .meal-dish-row .mdr-name {
    font-size: 1.15rem;
  }
}
@media (min-width: 1600px) {
  .meal-dish-row {
    min-height: 52px;
  }
  .meal-dish-row .mdr-name {
    font-size: 1.25rem;
  }
}

/* 급식 영양 성분 정보 바 */
.meal-ntr-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: 0.85rem;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  flex-shrink: 0;
}
.dark .meal-ntr-bar {
  background: #1E293B;
  border-color: #334155;
  color: #94A3B8;
}

/* ========================================================
   학사일정 탭 대화면 보드 (Tab 3: Schedule Board Layout)
   ======================================================== */
@media (min-width: 1024px) {
  #schedule-calendar-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #schedule-calendar-grid {
    flex: 1 1 0;
    min-height: 0;
    grid-auto-rows: minmax(0, 1fr);
  }
  .calendar-day-cell {
    height: 100%;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 4px 6px !important;
  }
}

.cal-event-badge {
  display: block;
  width: 100%;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  margin-top: 2px;
}
@media (min-width: 1280px) {
  .cal-event-badge {
    font-size: 0.82rem;
    padding: 3px 6px;
    border-radius: 6px;
  }
}
@media (min-width: 1600px) {
  .cal-event-badge {
    font-size: 0.92rem;
  }
}

/* 학사일정 상단 D-Day 카드 대화면 스타일 */
.sched-dday-kiosk-card {
  padding: 0.75rem 0.9rem;
  border-radius: 1rem;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.15s ease;
}
.dark .sched-dday-kiosk-card {
  background: #1E293B;
  border-color: #334155;
}
.sched-dday-kiosk-card.is-exam {
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(254, 243, 199, 0.6));
  border-color: rgba(19, 101, 200, 0.25);
}
.dark .sched-dday-kiosk-card.is-exam {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(120, 53, 15, 0.25));
  border-color: rgba(59, 130, 246, 0.4);
}

/* ========================================================
   시간표 탭 대화면 보드 (Tab 4: Timetable Board Layout)
   ======================================================== */
#timetable-board {
  height: 100%;
}
#timetable-board .overflow-x-auto {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#timetable-board #timetable-week-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}
#timetable-board .timetable-table {
  height: 100%;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
#timetable-board .timetable-table thead tr {
  height: 46px;
}
#timetable-board .timetable-table tbody {
  height: calc(100% - 46px);
}
#timetable-board .timetable-table tbody tr {
  height: 12.5%;
}
#timetable-board .timetable-table td,
#timetable-board .timetable-table th {
  padding: 0.25rem 0.4rem;
}
#timetable-board .timetable-slot-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
}

/* 데스크톱/전자칠판 기본 상태에서는 모바일 전용 보조 요소 숨김 (전자칠판 레이아웃 100% 보존) */
.tt-subj-mobile,
.tt-th-mobile,
.tt-day-short,
.tt-time-short,
.hp-mobile-sub,
.hp-mobile-type-tag {
  display: none;
}

/* ========================================================
   스마트폰(모바일) 접속 인식 전용 최적화 (html.is-smartphone / body.is-smartphone)
   - 데스크톱/전자칠판 레이아웃은 100% 보존하며,
     스마트폰으로 접속했을 때만 활성화되어 실용적이고 안정적인 모바일 UI를 제공
   ======================================================== */
html.is-smartphone,
body.is-smartphone {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100dvh !important;
  -webkit-text-size-adjust: 100%;
}

html.is-smartphone body,
body.is-smartphone {
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* 스마트폰에서는 전자칠판 전용 전체화면(키오스크) 버튼 숨김 */
html.is-smartphone #btn-fullscreen,
html.is-smartphone #btn-kiosk-toggle {
  display: none !important;
}

/* 스마트폰 헤더: 한 줄 정렬 및 터치 영역 최적화 */
html.is-smartphone header > div {
  padding: 0.5rem 0.75rem !important;
}
html.is-smartphone header h1 {
  font-size: 0.92rem !important;
}
html.is-smartphone #header-student-badge {
  font-size: 0.68rem !important;
  padding: 0.15rem 0.5rem !important;
}

/* 스마트폰 메인 컨테이너 및 각 탭 보드: 고정 높이 해제 후 자연스러운 카드 스택 */
html.is-smartphone main {
  padding: 0.55rem 0.65rem 1.25rem !important;
  height: auto !important;
  overflow: visible !important;
}
html.is-smartphone #home-board,
html.is-smartphone #meal-board,
html.is-smartphone #sched-board,
html.is-smartphone #timetable-board {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
}

/* 스마트폰 홈: 실시간 교시 상황판 가독성 및 정돈 */
html.is-smartphone #classroom-live-bar {
  padding: 0.75rem 0.85rem !important;
  gap: 0.55rem !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
html.is-smartphone .live-badge {
  font-size: 0.8rem !important;
  padding: 0.38rem 0.7rem !important;
  border-radius: 0.65rem !important;
}
html.is-smartphone #live-period-headline {
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-break: keep-all !important;
}
html.is-smartphone #live-period-desc {
  font-size: 0.73rem !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

/* 스마트폰 홈: 오늘 우리반 시간표 (교시 시간 제거 + 좌측 과목명 여유 공간 확보 + 우측 배지·선생님 성함 1줄 배치로 줄바꿈 원천 차단) */
html.is-smartphone #home-timetable-list {
  gap: 0.4rem !important;
}
html.is-smartphone .home-period-card {
  min-height: 46px !important;
  padding: 0.45rem 0.7rem !important;
  flex: none !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
}
html.is-smartphone .home-period-card .hp-num {
  width: 1.95rem !important;
  height: 1.95rem !important;
  font-size: 0.88rem !important;
  border-radius: 0.55rem !important;
}
html.is-smartphone .home-period-card .hp-subject {
  font-size: 0.94rem !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html.is-smartphone .home-period-card .hp-teacher {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* 스마트폰 홈: 오늘의 급식 2열 메뉴 가독성 확보 */
html.is-smartphone #home-meal-preview-grid > div {
  min-height: 140px !important;
  padding: 0.75rem 0.85rem !important;
}
html.is-smartphone .home-dish-list {
  font-size: 0.82rem !important;
  row-gap: 0.3rem !important;
  column-gap: 0.5rem !important;
  grid-auto-rows: minmax(20px, auto) !important;
}
html.is-smartphone .home-dish-list li {
  white-space: normal !important;
  line-height: 1.25 !important;
  word-break: keep-all !important;
}

/* 스마트폰 홈: 우측 영역 (D-Day / 실시간 날씨 / 다가오는 학사일정) */
html.is-smartphone #top-dday-banner {
  padding: 0.9rem 1rem !important;
}
html.is-smartphone #banner-dday-count {
  font-size: 2.5rem !important;
}
html.is-smartphone #banner-dday-sub {
  font-size: 0.9rem !important;
}
html.is-smartphone #home-weather-widget {
  padding: 0.8rem 0.95rem !important;
  min-height: 160px !important;
}
html.is-smartphone .home-sched-item {
  min-height: 46px !important;
  padding: 0.45rem 0.7rem !important;
  flex: none !important;
}
html.is-smartphone .portal-mini-btn {
  padding: 0.55rem 0.25rem !important;
  font-size: 0.72rem !important;
}

/* 스마트폰 급식 탭 (Tab 2) 최적화 */
html.is-smartphone #meal-header-bar {
  padding: 0.8rem 0.9rem !important;
}
html.is-smartphone #meal-header-bar > div:last-child {
  width: 100% !important;
}
html.is-smartphone #meal-header-bar > div:last-child > div:last-child {
  width: 100% !important;
  justify-content: space-between !important;
}
html.is-smartphone .meal-dish-row {
  min-height: 42px !important;
  padding: 0.4rem 0.75rem !important;
  flex: none !important;
}
html.is-smartphone .meal-dish-row .mdr-name {
  font-size: 0.9rem !important;
  white-space: normal !important;
  word-break: keep-all !important;
  line-height: 1.25 !important;
}

/* 스마트폰 학사일정 탭 (Tab 3) 최적화 */
html.is-smartphone #sched-top-bar > div:first-child {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.55rem !important;
}
html.is-smartphone #sched-top-bar > div:first-child > div:first-child {
  justify-content: space-between !important;
}
html.is-smartphone #sched-top-bar > div:first-child > div:last-child {
  justify-content: space-between !important;
}
html.is-smartphone .grade-chip {
  flex: 1 1 0 !important;
  text-align: center !important;
  padding: 0.4rem 0.25rem !important;
}
html.is-smartphone .calendar-day-cell {
  min-height: 54px !important;
  padding: 2px 1.5px !important;
  border-radius: 8px !important;
}
html.is-smartphone .cal-event-badge {
  font-size: 0.58rem !important;
  padding: 1px 2px !important;
  text-align: center !important;
  border-radius: 3px !important;
}
html.is-smartphone #schedule-day-detail-card {
  max-height: none !important;
}
html.is-smartphone #schedule-selected-day-list,
html.is-smartphone #schedule-list-container {
  max-height: 260px !important;
}

/* ========================================================
   스마트폰 우리반 시간표 탭 (Tab 4):
   - 월~금 5일 주간 시간표가 스마트폰 한 화면에 깨짐/겹침/잘림 없이 완벽하게 표시
   - 하단 요일별 상세 & 과제 브리핑 카드와 유기적 연동
   ======================================================== */
html.is-smartphone #timetable-board .overflow-x-auto,
html.is-smartphone #timetable-board #timetable-week-container {
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  flex: none !important;
  overflow-x: hidden !important;
}
html.is-smartphone #timetable-board .timetable-table {
  table-layout: fixed !important;
  width: 100% !important;
  height: auto !important;
}
html.is-smartphone #timetable-board .timetable-table thead tr,
html.is-smartphone #timetable-board .timetable-table tbody,
html.is-smartphone #timetable-board .timetable-table tbody tr {
  height: auto !important;
}

/* 스마트폰 주간 시간표: 데스크톱용 긴 텍스트 숨기고 모바일용 컴팩트 텍스트 표시 */
html.is-smartphone .tt-subj-desktop,
html.is-smartphone .tt-th-desktop,
html.is-smartphone .tt-day-full,
html.is-smartphone .tt-time-full,
html.is-smartphone .tt-perio-unit,
html.is-smartphone .tt-lunch-suffix {
  display: none !important;
}
html.is-smartphone .tt-subj-mobile,
html.is-smartphone .tt-th-mobile,
html.is-smartphone .tt-day-short,
html.is-smartphone .tt-time-short {
  display: inline !important;
}

/* 좌측 '교시' 열 폭을 34px로 슬림화하여 월~금 5개 요일 컬럼 폭 확보 */
html.is-smartphone #timetable-board .timetable-table th:first-child,
html.is-smartphone #timetable-board .timetable-table td:first-child {
  width: 34px !important;
  padding: 0.25rem 0.1rem !important;
}
html.is-smartphone #timetable-board .timetable-table th:first-child {
  font-size: 0.68rem !important;
}
html.is-smartphone #timetable-board .timetable-table td:first-child .tt-perio-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
html.is-smartphone #timetable-board .timetable-table td:first-child .tt-perio-time {
  font-size: 0.56rem !important;
  letter-spacing: -0.04em !important;
  margin-top: 1px !important;
}

/* 요일 헤더(월~금) 컴팩트 스타일 */
html.is-smartphone #timetable-board .timetable-table th[data-mobile-day-offset] {
  padding: 0.35rem 0.1rem !important;
  cursor: pointer;
}
html.is-smartphone #timetable-board .timetable-table th .tt-th-badge {
  font-size: 0.55rem !important;
  padding: 0 3px !important;
  line-height: 1.3 !important;
}
html.is-smartphone #timetable-board .timetable-table th .tt-day-date {
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
}

/* 각 교시 셀 및 슬롯 카드: 과목명 절대 잘림 방지 & 배지 하단 배치(글자 겹침 원천 차단) */
html.is-smartphone #timetable-board .timetable-table td {
  padding: 2px 1.5px !important;
}
html.is-smartphone #timetable-board .timetable-table .timetable-slot-card {
  min-height: 52px !important;
  height: auto !important;
  padding: 4px 1.5px !important;
  border-radius: 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
html.is-smartphone #timetable-board .timetable-table .timetable-slot-card .tt-slot-subject {
  order: 1 !important;
  font-size: 0.69rem !important;
  line-height: 1.18 !important;
  letter-spacing: -0.04em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  text-align: center !important;
  width: 100% !important;
}
html.is-smartphone #timetable-board .timetable-table .timetable-slot-card .tt-slot-teacher {
  order: 2 !important;
  font-size: 0.58rem !important;
  line-height: 1.1 !important;
  margin-top: 1px !important;
  max-width: 100% !important;
}
/* 스마트폰 주간 표에서는 배지가 과목명을 가리지 않도록 과목명 아래에 정렬 */
html.is-smartphone #timetable-board .timetable-table .timetable-badge-group {
  order: 3 !important;
  position: static !important;
  margin-top: 2px !important;
  justify-content: center !important;
  gap: 1.5px !important;
  max-width: 100% !important;
}
html.is-smartphone #timetable-board .timetable-table .timetable-schedule-badge {
  min-width: 13px !important;
  height: 13px !important;
  font-size: 8px !important;
  line-height: 13px !important;
  padding: 0 2px !important;
  border-radius: 3px !important;
}
html.is-smartphone #timetable-board .timetable-table .timetable-schedule-badge.is-emoji {
  font-size: 12px !important;
  height: auto !important;
  line-height: 1 !important;
}
/* 셀 배경색으로 창체/공강이 구분되므로 주간 표 내부의 중복 작은 라벨은 숨겨 공간 확보 */
html.is-smartphone #timetable-board .timetable-table .tt-slot-subtag {
  display: none !important;
}

/* 점심시간 행 슬림화 */
html.is-smartphone #timetable-board .timetable-table .tt-lunch-cell {
  font-size: 0.62rem !important;
  padding: 0.25rem 0.1rem !important;
  white-space: nowrap !important;
}

/* 공휴일 / 전일행사 / 시험 rowspan 셀 모바일 폭 최적화 */
html.is-smartphone #timetable-board .timetable-table .tt-rowspan-cell {
  padding: 0.25rem 0.15rem !important;
}
html.is-smartphone #timetable-board .timetable-table .tt-rowspan-inner {
  padding: 0.5rem 0 !important;
  gap: 0.25rem !important;
}
html.is-smartphone #timetable-board .timetable-table .tt-rowspan-emoji {
  font-size: 1.35rem !important;
  line-height: 1 !important;
}
html.is-smartphone #timetable-board .timetable-table .tt-rowspan-title {
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
  word-break: keep-all !important;
}
html.is-smartphone #timetable-board .timetable-table .tt-rowspan-badge {
  font-size: 0.56rem !important;
  padding: 1px 4px !important;
}
html.is-smartphone #timetable-board .timetable-table .tt-rowspan-desc {
  display: none !important;
}

/* 스마트폰 하단 내비게이션 바 Safe-Area 대응 */
html.is-smartphone nav.md\:hidden {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* 스마트폰 모달 창 최적화 (하단 여백 및 스크롤 보장) */
html.is-smartphone #modal-settings > div,
html.is-smartphone #modal-allergen > div,
html.is-smartphone #modal-school-info > div,
html.is-smartphone #modal-dday-setting > div,
html.is-smartphone #modal-timetable-detail > div {
  max-height: 86dvh !important;
  border-radius: 1.35rem !important;
}