/* Responsive sidebar shell - 2026-05-01
   목적: 메뉴 수가 늘어나도 좌측 스크롤 압박을 줄이고, 모바일에서 본문이 잘리지 않게 공통 레이아웃을 보정합니다. */
:root {
  --shell-sidebar-width: 264px;
  --shell-sidebar-bg: #ffffff;
  --shell-border: #E7EAF2;
  --shell-text: #2D3442;
  --shell-muted: #7A8497;
  --shell-primary: var(--primary, #6C5CE7);
  --shell-primary-soft: #F1EEFF;
}

html, body { max-width: 100%; overflow-x: hidden; }
#app-wrapper { width: 100%; max-width: 100vw; }

.sidebar {
  width: var(--shell-sidebar-width) !important;
  min-width: var(--shell-sidebar-width) !important;
  max-width: var(--shell-sidebar-width) !important;
  height: 100vh !important;
  padding: 18px 14px !important;
  box-sizing: border-box !important;
  background: var(--shell-sidebar-bg) !important;
  border-right: 1px solid var(--shell-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: hidden !important;
  z-index: 2000;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}

.sidebar .logo {
  min-height: 34px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  letter-spacing: -0.03em;
}

.sidebar-close-btn {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--shell-border);
  border-radius: 10px;
  background: #fff;
  color: var(--shell-text);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

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

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

.nav-section {
  border: 1px solid #EDF0F6;
  border-radius: 16px;
  background: #FAFBFE;
  margin-bottom: 10px;
  overflow: hidden;
}

.nav-section-title {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  font-size: 0.84rem;
  font-weight: 900;
  color: #5B6475;
  letter-spacing: -0.02em;
  user-select: none;
}

.nav-section-title::-webkit-details-marker { display: none; }
.nav-section-arrow { transition: transform .2s ease; color: #9AA3B5; }
.nav-section[open] .nav-section-arrow { transform: rotate(180deg); }
.nav-section[open] .nav-section-title { color: var(--shell-primary); background: #fff; }

.nav-section-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 8px 9px;
}

.sidebar .nav-item {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 10px 11px !important;
  border-radius: 12px !important;
  color: #495266;
  font-size: 0.92rem;
  font-weight: 780;
  line-height: 1.2;
  text-decoration: none;
  letter-spacing: -0.02em;
  transform: none !important;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.sidebar .nav-item:hover {
  background: #F4F6FB !important;
  color: var(--shell-primary) !important;
}

.sidebar .nav-item.active {
  background: var(--shell-primary-soft) !important;
  color: var(--shell-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(108, 92, 231, .12);
}

.sidebar .nav-icon {
  width: 22px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.sidebar .nav-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 8px;
  border-top: 1px solid #EEF1F6;
}

.sidebar .profile-card {
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: #F7F8FC !important;
  border: 1px solid #EDF0F6;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

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

.profile-meta { min-width: 0; }
.profile-name { font-weight: 800; font-size: .9rem; color: var(--shell-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-action { font-size: .74rem; color: var(--shell-muted); margin-top: 2px; }

.sidebar .admin-trigger {
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid var(--shell-border);
  background: #fff;
  color: var(--shell-text);
  font-weight: 800;
  cursor: pointer;
}

.main-content {
  min-width: 0;
  max-width: calc(100vw - var(--shell-sidebar-width));
  box-sizing: border-box;
}

.main-content *,
.dashboard-card,
.stat-card,
.practice-card,
.result-card,
.panel,
.card,
.table-wrap,
.table-scroll,
.abbr-shell,
.abbr-card {
  max-width: 100%;
  box-sizing: border-box;
}

img, canvas, svg, video { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }

@media (max-width: 900px) {
  body { min-width: 0 !important; overflow-x: hidden !important; }
  #app-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow-x: hidden !important;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--shell-primary) !important;
    color: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 24px rgba(65, 54, 180, .22) !important;
    cursor: pointer;
    z-index: 3100 !important;
  }

  .sidebar-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(22, 28, 42, .45) !important;
    z-index: 2800 !important;
  }

  .sidebar-overlay.active { display: block !important; }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 320px) !important;
    min-width: 0 !important;
    max-width: 320px !important;
    height: 100dvh !important;
    padding: calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-108%) !important;
    transition: transform .24s ease !important;
    box-shadow: 18px 0 45px rgba(20, 24, 38, .18) !important;
    z-index: 3000 !important;
  }

  .sidebar.active { transform: translateX(0) !important; }
  body.sidebar-open { overflow: hidden !important; }
  .sidebar-close-btn { display: inline-flex; align-items: center; justify-content: center; }

  .main-content {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 76px 16px 22px !important;
    overflow-x: hidden !important;
  }

  .header,
  .stats-row,
  .mid-section,
  .dashboard-grid,
  .top-section,
  .content-grid,
  .tool-grid,
  .abbr-layout,
  .practice-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .stats-row,
  .mid-section,
  .dashboard-grid,
  .content-grid,
  .tool-grid,
  .abbr-layout,
  .practice-layout {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  .table-scroll,
  .table-wrap,
  .rank-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 520px) {
  .main-content { padding: 72px 12px 18px !important; }
  .sidebar { width: min(90vw, 318px) !important; }
  .sidebar .logo { font-size: 1rem !important; }
  .nav-section-title { padding: 10px 11px; }
  .sidebar .nav-item { min-height: 38px; padding: 9px 10px !important; font-size: .9rem; }
  h1 { font-size: clamp(1.35rem, 6vw, 2rem) !important; }
}

/* Study time tracker - 2026-05-01 */
.sidebar-study-time-card {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #E6EBF7;
  border-radius: 18px;
  background: linear-gradient(135deg, #F8FAFF 0%, #F1F5FF 100%);
  padding: 12px 13px;
  box-shadow: 0 8px 24px rgba(45, 64, 120, .06);
}
.study-time-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.study-time-card-head span {
  font-size: .78rem;
  font-weight: 900;
  color: #59657A;
  letter-spacing: -0.03em;
}
.study-time-card-head em {
  font-style: normal;
  font-size: .68rem;
  font-weight: 900;
  color: #7E8798;
  background: #fff;
  border: 1px solid #E7EAF2;
  border-radius: 999px;
  padding: 3px 7px;
}
.sidebar-study-time-card.is-active .study-time-card-head em {
  color: #0F8B55;
  background: #ECFFF6;
  border-color: #BFEFD6;
}
.sidebar-study-time-card strong {
  display: block;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #26314A;
}
.sidebar-study-time-card small {
  display: block;
  margin-top: 8px;
  font-size: .72rem;
  line-height: 1.35;
  color: #7C8799;
  letter-spacing: -0.03em;
}
.sidebar-study-time-card small b {
  color: #47506A;
}
.bg-study-time {
  background: #EEF4FF !important;
  color: #4777E6 !important;
}

@media (min-width: 901px) {
  .stats-row:has(.study-time-dashboard-card) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .sidebar-study-time-card {
    padding: 10px 11px;
    border-radius: 16px;
  }
  .sidebar-study-time-card strong { font-size: 1.35rem; }
}

/* Practice focus sidebar - 2026-05-06
   연습실에서는 좌측 메뉴가 기본 접힘 상태이고, 햄버거 버튼 hover/click 또는 메뉴 자체 hover 때만 펼쳐집니다. */
@media (min-width: 901px) {
  body.practice-focus-body #app-wrapper {
    display: flex;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  body.practice-focus-body .mobile-menu-btn {
    display: inline-flex !important;
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.94) !important;
    color: #111827 !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 32px rgba(15,23,42,.12) !important;
    cursor: pointer !important;
    z-index: 3600 !important;
    backdrop-filter: blur(10px);
  }
  body.practice-focus-body .sidebar-overlay {
    display: none !important;
  }
  body.practice-focus-body .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    transform: translateX(calc(-1 * var(--shell-sidebar-width) - 12px)) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
    box-shadow: 18px 0 45px rgba(15,23,42,.12) !important;
  }
  body.practice-focus-body .sidebar.active,
  body.practice-focus-body .sidebar:hover,
  body.practice-focus-body .mobile-menu-btn:hover ~ .sidebar {
    transform: translateX(0) !important;
  }
  body.practice-focus-body .main-content {
    width: 100vw !important;
    max-width: 100vw !important;
    flex: 1 1 auto !important;
    padding-left: 76px !important;
  }
  body.practice-focus-body.sidebar-open .main-content {
    padding-left: 76px !important;
  }
}

/* sidebar-intuitive-trim-20260529: 좌측 메뉴를 얇은 이동 목록처럼 정리 */
:root { --shell-sidebar-width: 236px; }
.sidebar {
  padding: 14px 11px !important;
  gap: 9px !important;
}
.sidebar .logo {
  min-height: 28px;
  font-size: .98rem;
  margin-bottom: 0 !important;
}
.nav-section {
  margin-bottom: 7px;
  border-radius: 12px;
  background: #FFFFFF;
}
.nav-section-title {
  padding: 8px 10px;
  font-size: .78rem;
}
.nav-section-list {
  gap: 3px;
  padding: 0 6px 7px;
}
.sidebar .nav-item {
  min-height: 35px;
  padding: 8px 9px !important;
  border-radius: 9px !important;
  font-size: .86rem;
  gap: 8px;
}
.sidebar .nav-icon {
  width: 19px;
  min-width: 19px;
  height: 19px;
  font-size: .92rem;
}
.sidebar-footer {
  gap: 6px;
  padding-top: 7px;
}
.sidebar .profile-card {
  padding: 8px !important;
  border-radius: 12px !important;
}
.sidebar .avatar,
.sidebar .profile-card > div:first-child:not(.profile-meta) {
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  border-radius: 10px !important;
}
.profile-name { font-size: .84rem; }
.profile-action { font-size: .7rem; }
.sidebar .admin-trigger {
  min-height: 34px;
  border-radius: 10px;
  font-size: .78rem;
}

/* premium-sidebar-20260529-v2: 카드 박스 느낌 제거, 현재 위치는 명확하게 */
:root{
  --shell-sidebar-width:236px;
  --shell-sidebar-bg:#FFFFFF;
  --shell-border:#D7DEE8;
  --shell-text:#263244;
  --shell-muted:#667085;
  --shell-primary:#4F46E5;
  --shell-primary-soft:#EEF1FF;
}
.sidebar{
  background:#FFFFFF!important;
  border-right:1px solid var(--shell-border)!important;
  box-shadow:8px 0 28px rgba(15,23,42,.055)!important;
}
.sidebar .logo{
  color:#4338CA!important;
  font-weight:950!important;
}
.sidebar-study-time-card{
  background:#F7F9FC!important;
  border:1px solid #D8E0EA!important;
  box-shadow:none!important;
  border-radius:16px!important;
}
.nav-section{
  border:0!important;
  border-top:1px solid #E5EAF2!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  margin-bottom:8px!important;
  overflow:visible!important;
}
.nav-section:first-of-type{border-top:0!important;}
.nav-section-title{
  padding:10px 8px!important;
  color:#5F6B7A!important;
  background:transparent!important;
  font-size:0.75rem!important;
  letter-spacing:-.01em!important;
}
.nav-section[open] .nav-section-title{
  background:transparent!important;
  color:#475569!important;
  border-bottom:0!important;
}
.nav-section-list{padding:0 0 8px!important;gap:5px!important;}
.sidebar .nav-item{
  position:relative;
  min-height:38px!important;
  padding:9px 11px!important;
  border-radius:12px!important;
  border:1px solid transparent!important;
  color:#334155!important;
  background:transparent!important;
  font-weight:850!important;
}
.sidebar .nav-item:hover{
  background:#F7F9FC!important;
  border-color:#E2E8F0!important;
  color:#1F2937!important;
}
.sidebar .nav-item.active{
  background:#111827!important;
  border-color:#111827!important;
  color:#FFFFFF!important;
  box-shadow:0 8px 18px rgba(17,24,39,.16)!important;
}
.sidebar .nav-item.active .nav-icon,
.sidebar .nav-item.active .nav-text{color:#FFFFFF!important;}
.sidebar .nav-icon{width:20px!important;min-width:20px!important;height:20px!important;opacity:.92;}
.sidebar .profile-card,
.sidebar .admin-trigger{
  background:#F8FAFC!important;
  border:1px solid #DDE4ED!important;
  box-shadow:none!important;
  border-radius:14px!important;
}
.sidebar .admin-trigger:hover{
  background:#FFFFFF!important;
  border-color:#AEB8C7!important;
  color:#111827!important;
}

/* hover-purple-20260529-v1
   메뉴 hover 시 보라색 피드백 복구. 진한 테두리/촌스러운 박스감은 피하고, 부드러운 보라색 배경 + 좌측 포인트 라인으로만 표시합니다. */
:root{
  --shell-primary:#5B4BE8;
  --shell-primary-strong:#4338CA;
  --shell-primary-soft:#F0EDFF;
  --shell-primary-line:#C9C2FF;
}
.sidebar .nav-item{
  position:relative!important;
  overflow:hidden!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important;
}
.sidebar .nav-item::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:0 999px 999px 0;
  background:transparent;
  transition:background .16s ease,opacity .16s ease;
  opacity:0;
}
.sidebar .nav-item:hover{
  background:var(--shell-primary-soft)!important;
  border-color:var(--shell-primary-line)!important;
  color:var(--shell-primary-strong)!important;
  box-shadow:0 6px 14px rgba(91,75,232,.08)!important;
}
.sidebar .nav-item:hover::before{
  background:var(--shell-primary)!important;
  opacity:1!important;
}
.sidebar .nav-item.active{
  background:linear-gradient(135deg,#5B4BE8 0%,#6D5DF2 100%)!important;
  border-color:#5B4BE8!important;
  color:#FFFFFF!important;
  box-shadow:0 10px 20px rgba(91,75,232,.20)!important;
}
.sidebar .nav-item.active::before{
  background:rgba(255,255,255,.9)!important;
  opacity:1!important;
}
.sidebar .nav-item.active:hover{
  background:linear-gradient(135deg,#4F46E5 0%,#6355EE 100%)!important;
  color:#FFFFFF!important;
}
.sidebar .admin-trigger:hover,
.sidebar .profile-card:hover{
  background:var(--shell-primary-soft)!important;
  border-color:var(--shell-primary-line)!important;
  color:var(--shell-primary-strong)!important;
}

/* dashboard-goals-20260529: 메뉴 아이콘 고급형 hover 모션 강화 */
.sidebar .nav-icon,
.sidebar .admin-trigger,
.sidebar .profile-card .avatar{transform-origin:center;will-change:transform;}
.sidebar .nav-item:hover .nav-icon,
.sidebar .nav-item:focus-visible .nav-icon{animation:soriMenuIconPop .58s cubic-bezier(.2,1.25,.32,1) both;}
.sidebar .profile-card:hover .avatar{animation:soriMenuIconPop .58s cubic-bezier(.2,1.25,.32,1) both;}
@keyframes soriMenuIconPop{
  0%{transform:translateY(0) scale(1) rotate(0deg);}
  36%{transform:translateY(-4px) scale(1.14) rotate(-5deg);}
  66%{transform:translateY(1px) scale(.98) rotate(3deg);}
  100%{transform:translateY(0) scale(1) rotate(0deg);}
}
@media (prefers-reduced-motion: reduce){
  .sidebar .nav-item:hover .nav-icon,
  .sidebar .nav-item:focus-visible .nav-icon,
  .sidebar .profile-card:hover .avatar{animation:none!important;}
}