/*
 * Full-bleed application layout — 2026-07-02
 *
 * Purpose: remove the desktop-only centred canvas that left unused side space
 * around feature cards. Page content now uses every pixel available after the
 * navigation rail while retaining a small, fluid safety gutter for readability
 * and touch targets.
 */
:root {
  --app-page-gutter: clamp(16px, 1.8vw, 34px);
  --app-page-gutter-compact: clamp(12px, 3.6vw, 18px);
}

html,
body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

#app-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Shared page shell: preserve each feature's own sidebar offset/flex rules,
   but never allow a second centred max-width canvas inside it. */
body[data-auth="approved"] .main-content,
body[data-auth="approved"] .portal-main,
body.sparta-page .sparta-main,
body.measure-page .measure-main,
body[data-auth="approved"] .unlock-main,
body.admin-dashboard .admin-content {
  box-sizing: border-box;
  max-width: none !important;
}

body[data-auth="approved"] .main-content,
body[data-auth="approved"] .portal-main,
body.sparta-page .sparta-main,
body.measure-page .measure-main,
body[data-auth="approved"] .unlock-main {
  padding-inline: var(--app-page-gutter) !important;
}

body.admin-dashboard .admin-content {
  width: 100%;
  margin-inline: 0 !important;
  padding-inline: var(--app-page-gutter) !important;
}

/* Page-level canvases that previously stopped short of wide desktop screens. */
body[data-auth="approved"] .portal-page,
body[data-auth="approved"] .ai-teacher-room-page,
body[data-auth="approved"] .mypage-page,
body[data-auth="approved"] .study-first-dashboard,
body[data-auth="approved"] .toksori-page,
body[data-auth="approved"] .toksori-single-page,
body[data-auth="approved"] .unlock-page,
body.sparta-page .sparta-page-shell {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* Full-width working cards. Modal/dialog cards are intentionally excluded. */
body[data-auth="approved"] .exam-v18-card,
body[data-auth="approved"] .toksori-single-card,
body[data-auth="approved"] .toksori-single-page .result-card,
body[data-auth="approved"] .toksori-single-page .review-card,
body[data-auth="approved"] .toksori-single-page .history-panel,
body[data-auth="approved"] .card-box,
body[data-auth="approved"] .podium-card {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

/* Responsive grids remain multi-column where useful, then collapse before
   individual cards become too narrow. */
@media (max-width: 1180px) {
  body[data-auth="approved"] .portal-main,
  body[data-auth="approved"] .main-content,
  body.sparta-page .sparta-main,
  body.measure-page .measure-main,
  body[data-auth="approved"] .unlock-main {
    padding-inline: clamp(16px, 2.2vw, 26px) !important;
  }

  body[data-auth="approved"] .exam-v18-card,
  body[data-auth="approved"] .toksori-single-card {
    padding-inline: clamp(22px, 2.8vw, 34px);
  }
}

@media (max-width: 900px) {
  /* A closed/off-canvas sidebar must not keep a desktop-width content offset. */
  body[data-auth="approved"] #app-wrapper > .main-content,
  body[data-auth="approved"] #app-wrapper .portal-main,
  body[data-auth="approved"] .main-content.toksori-single-page,
  body.sparta-page .sparta-main,
  body.measure-page .measure-main,
  body[data-auth="approved"] .unlock-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-inline: var(--app-page-gutter-compact) !important;
  }

  body[data-auth="approved"] #app-wrapper > .main-content,
  body[data-auth="approved"] #app-wrapper .portal-main,
  body.sparta-page .sparta-main,
  body.measure-page .measure-main,
  body[data-auth="approved"] .unlock-main {
    padding-top: max(72px, calc(env(safe-area-inset-top) + 56px)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  body.admin-dashboard .admin-content {
    padding-inline: var(--app-page-gutter-compact) !important;
  }

  body[data-auth="approved"] .portal-topbar,
  body[data-auth="approved"] .ai-room-clean-header,
  body[data-auth="approved"] .mypage-page .my-clean-header,
  body[data-auth="approved"] .unlock-header,
  body.sparta-page .sparta-page-header,
  body[data-auth="approved"] .exam-v18-header,
  body[data-auth="approved"] .toksori-single-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-auth="approved"] .portal-topbar-actions,
  body[data-auth="approved"] .unlock-header-actions,
  body[data-auth="approved"] .exam-v18-actions,
  body[data-auth="approved"] .toksori-single-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  body[data-auth="approved"] .portal-main,
  body[data-auth="approved"] .main-content,
  body.sparta-page .sparta-main,
  body.measure-page .measure-main,
  body[data-auth="approved"] .unlock-main {
    padding-inline: 12px !important;
  }

  body[data-auth="approved"] .portal-page,
  body[data-auth="approved"] .ai-teacher-room-page,
  body[data-auth="approved"] .mypage-page,
  body[data-auth="approved"] .study-first-dashboard,
  body[data-auth="approved"] .toksori-page,
  body[data-auth="approved"] .unlock-page,
  body.sparta-page .sparta-page-shell {
    gap: 12px !important;
  }

  body[data-auth="approved"] .exam-v18-card,
  body[data-auth="approved"] .toksori-single-card,
  body[data-auth="approved"] .card-box,
  body[data-auth="approved"] .podium-card {
    border-radius: 20px;
    padding-inline: 16px;
  }
}

/* Narrow-screen controls that had fixed desktop minimums in their feature CSS. */
@media (max-width: 1180px) {
  body[data-auth="approved"] .mypage-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow-x: visible !important;
  }
}

@media (max-width: 760px) {
  body[data-auth="approved"] .mypage-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* 사설연습 음성 설정: 작은 화면에서도 툴바 밖으로 밀리지 않도록 한 줄씩 재배치 */
  body[data-auth="approved"] .source-toolbar > .btn-clean,
  body[data-auth="approved"] .source-toolbar .tts-group,
  body[data-auth="approved"] .typing-toolbar > .tip-label,
  body[data-auth="approved"] .typing-toolbar .typing-actions {
    flex: 0 0 auto !important;
  }

  body[data-auth="approved"] .source-toolbar .tts-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body[data-auth="approved"] .source-toolbar #voiceSelect,
  body[data-auth="approved"] .source-toolbar #ttsRate,
  body[data-auth="approved"] .source-toolbar .btn-tts {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* 약어사전 상단 조작 버튼은 모바일에서 한 줄씩 표시 */
  body[data-auth="approved"] .page-header .top-actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body[data-auth="approved"] .page-header .top-actions > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin-inline: 0 !important;
  }
}

@media (max-width: 700px) {
  /* 스파르타 기록 카드: 최종 고정 4열 규칙을 모바일 1열 규칙으로 재정의 */
  body.sparta-page .sparta-workspace .sparta-stats-row,
  body.sparta-page .sparta-workspace .stats-row.sparta-stats-row,
  body.sparta-page main.sparta-main .sparta-stats-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  body.sparta-page .sparta-workspace .sparta-stats-row > .stat-item,
  body.sparta-page .sparta-workspace .stats-row.sparta-stats-row > .stat-item,
  body.sparta-page main.sparta-main .sparta-stats-row > .stat-item {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    min-width: 0 !important;
  }
}

/* ================================================================
   Unified student sidebar — 2026-07-04
   학생 화면의 좌측 메뉴 구조·폭·접힘 기준·활성 상태를 공통 규격으로 고정합니다.
   관리자/로그인 화면에는 적용되지 않습니다.
   ================================================================ */
:root {
  --sorizava-sidebar-width: 236px;
  --shell-sidebar-width: var(--sorizava-sidebar-width);
  --sidebar-width: var(--sorizava-sidebar-width);
}

nav.sidebar {
  position: fixed !important;
  z-index: 2000 !important;
  inset: 0 auto 0 0 !important;
  width: var(--sorizava-sidebar-width) !important;
  min-width: var(--sorizava-sidebar-width) !important;
  max-width: var(--sorizava-sidebar-width) !important;
  height: 100vh !important;
  height: 100dvh !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 14px 11px !important;
  overflow: hidden !important;
  transform: translateX(0) !important;
  background: #FFFFFF !important;
  border-right: 1px solid #D7DEE8 !important;
  box-shadow: 8px 0 28px rgba(15, 23, 42, .055) !important;
  color: #263244 !important;
  font-family: "Apple SD Gothic Neo", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif !important;
}

nav.sidebar .sidebar-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 28px !important;
  gap: 10px !important;
  padding: 0 8px 1px !important;
  flex: 0 0 auto !important;
}

nav.sidebar .logo {
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  color: #4338CA !important;
  font-size: .98rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap !important;
}

nav.sidebar .sidebar-close-btn {
  display: none !important;
  width: 34px !important;
  height: 34px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #D7DEE8 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #263244 !important;
  font-size: 1.375rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

nav.sidebar .sidebar-study-time-card {
  display: grid !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
  margin: 0 1px 2px !important;
  padding: 11px 12px 12px !important;
  border: 1px solid #D8E0EA !important;
  border-radius: 14px !important;
  background: #F7F9FC !important;
  box-shadow: none !important;
}

nav.sidebar .study-time-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #667085 !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
}

nav.sidebar .study-time-card-head em {
  color: #5B4BE8 !important;
  font-size: .68rem !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

nav.sidebar .sidebar-study-time-card strong {
  color: #263244 !important;
  font-size: 1.34rem !important;
  line-height: 1.08 !important;
  letter-spacing: -.055em !important;
}

nav.sidebar .sidebar-study-time-card small {
  color: #7A8497 !important;
  font-size: .68rem !important;
  line-height: 1.45 !important;
}

nav.sidebar .sidebar-study-time-card small b { color: #485568 !important; font-weight: 900 !important; }
nav.sidebar .sidebar-study-time-card.is-active { border-color: #CFC8FF !important; background: #FCFBFF !important; }

nav.sidebar .nav-list.nav-groups {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 3px 4px 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

nav.sidebar .nav-list.nav-groups::-webkit-scrollbar { width: 7px !important; }
nav.sidebar .nav-list.nav-groups::-webkit-scrollbar-thumb { background: #CCD2DF !important; border-radius: 999px !important; }
nav.sidebar .nav-list.nav-groups::-webkit-scrollbar-track { background: transparent !important; }

nav.sidebar .nav-section {
  display: block !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-top: 1px solid #E5EAF2 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

nav.sidebar .nav-section:first-child { border-top: 0 !important; }
nav.sidebar .nav-section summary { list-style: none !important; }
nav.sidebar .nav-section summary::-webkit-details-marker { display: none !important; }

nav.sidebar .nav-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 10px 8px !important;
  cursor: pointer !important;
  user-select: none !important;
  background: transparent !important;
  color: #5F6B7A !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
}

nav.sidebar .nav-section[open] .nav-section-title { background: transparent !important; color: #475569 !important; }
nav.sidebar .nav-section-arrow { color: #98A2B3 !important; font-size: 0.875rem !important; line-height: 1 !important; transition: transform .18s ease !important; }
nav.sidebar .nav-section[open] .nav-section-arrow { transform: rotate(180deg) !important; }

nav.sidebar .nav-section-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 0 8px !important;
}

nav.sidebar .nav-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #334155 !important;
  font-size: .86rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  text-decoration: none !important;
  transform: none !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

nav.sidebar .nav-item::before {
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 3px !important;
  content: "" !important;
  border-radius: 0 999px 999px 0 !important;
  opacity: 0 !important;
  background: transparent !important;
  transition: background .16s ease, opacity .16s ease !important;
}

nav.sidebar .nav-item:hover,
nav.sidebar .nav-item:focus-visible {
  border-color: #C9C2FF !important;
  background: #F0EDFF !important;
  color: #4338CA !important;
  box-shadow: 0 6px 14px rgba(91, 75, 232, .08) !important;
}

nav.sidebar .nav-item:hover::before,
nav.sidebar .nav-item:focus-visible::before { background: #5B4BE8 !important; opacity: 1 !important; }

nav.sidebar .nav-item.active {
  border-color: #5B4BE8 !important;
  background: linear-gradient(135deg, #5B4BE8 0%, #6D5DF2 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 20px rgba(91, 75, 232, .20) !important;
}

nav.sidebar .nav-item.active::before { background: rgba(255, 255, 255, .92) !important; opacity: 1 !important; }
nav.sidebar .nav-item.active:hover { background: linear-gradient(135deg, #4F46E5 0%, #6355EE 100%) !important; color: #FFFFFF !important; }

nav.sidebar .nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  color: currentColor !important;
  font-size: .92rem !important;
  line-height: 1 !important;
  opacity: .95 !important;
}

nav.sidebar .nav-icon svg { width: 18px !important; height: 18px !important; max-width: none !important; }
nav.sidebar .nav-text { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: currentColor !important; }
nav.sidebar .nav-item.active .nav-icon,
nav.sidebar .nav-item.active .nav-text { color: #FFFFFF !important; }

nav.sidebar .sidebar-footer {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  margin-top: 0 !important;
  padding: 7px 0 0 !important;
  border-top: 1px solid #E5EAF2 !important;
}

nav.sidebar .profile-card,
nav.sidebar .admin-trigger {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #DDE4ED !important;
  border-radius: 14px !important;
  background: #F8FAFC !important;
  box-shadow: none !important;
}

nav.sidebar .profile-card {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 8px !important;
  cursor: pointer !important;
}

nav.sidebar .profile-card:hover,
nav.sidebar .admin-trigger:hover {
  border-color: #C9C2FF !important;
  background: #F0EDFF !important;
  color: #4338CA !important;
}

nav.sidebar .avatar,
nav.sidebar .profile-card > div:first-child:not(.profile-meta) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  border-radius: 10px !important;
  background: #D6A2E8 !important;
  color: #FFFFFF !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
}

nav.sidebar .profile-meta { min-width: 0 !important; flex: 1 1 auto !important; }
nav.sidebar .profile-name { overflow: hidden !important; color: #263244 !important; font-size: .84rem !important; font-weight: 850 !important; line-height: 1.2 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
nav.sidebar .profile-action { margin-top: 2px !important; color: #667085 !important; font-size: .7rem !important; line-height: 1.2 !important; }
nav.sidebar .profile-chevron { display: none !important; }

nav.sidebar .admin-trigger {
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  color: #334155 !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

.sidebar-overlay { display: none !important; }
.mobile-menu-btn { display: none !important; }

@media (max-width: 900px) {
  nav.sidebar {
    width: min(88vw, 318px) !important;
    min-width: min(88vw, 318px) !important;
    max-width: min(88vw, 318px) !important;
    transform: translateX(-105%) !important;
    transition: transform .24s ease !important;
    box-shadow: 10px 0 30px rgba(28, 25, 58, .16) !important;
  }
  nav.sidebar.active { transform: translateX(0) !important; }
  nav.sidebar .sidebar-close-btn { display: inline-flex !important; }
  .sidebar-overlay {
    position: fixed !important;
    z-index: 1900 !important;
    inset: 0 !important;
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: rgba(21, 22, 38, .34) !important;
    transition: opacity .2s ease, visibility .2s ease !important;
  }
  .sidebar-overlay.active { visibility: visible !important; opacity: 1 !important; }
  .mobile-menu-btn {
    position: fixed !important;
    z-index: 1850 !important;
    top: 14px !important;
    left: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #D7DEE8 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    color: #334155 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .10) !important;
    font-size: 1.18rem !important;
    line-height: 1 !important;
  }
}

@media (max-width: 520px) {
  nav.sidebar { width: min(90vw, 318px) !important; min-width: min(90vw, 318px) !important; max-width: min(90vw, 318px) !important; }
  nav.sidebar .nav-item { min-height: 38px !important; font-size: .9rem !important; }
}

/* Sidebar overlay compensation — 2026-07-04 sidebar repair
   The unified navigation rail is fixed on desktop. Reserve its exact width in
   the application shell so main content never renders beneath the rail. */
@media (min-width: 901px) {
  body[data-auth="approved"] > .main-content,
  body[data-auth="approved"] #app-wrapper > .main-content,
  body[data-auth="approved"] #app-wrapper > .unlock-main {
    width: calc(100vw - var(--sorizava-sidebar-width)) !important;
    max-width: calc(100vw - var(--sorizava-sidebar-width)) !important;
    min-width: 0 !important;
    margin-left: var(--sorizava-sidebar-width) !important;
  }
}