/* ==========================================================================
   매직러닝 (Magic Edu) - 모던 프리미엄 반응형 디자인 시스템
   FHD 대화면 와이드 UI & 스마트폰 모바일 UI 완벽 대응
   ========================================================================== */

:root {
  /* 테마 컬러 팔레트 */
  --primary: #4F46E5;         /* 신뢰감 있는 인디고 블루 */
  --primary-light: #EEF2FF;
  --primary-hover: #4338CA;
  
  --secondary: #EC4899;       /* 생동감 있는 핑크 */
  --secondary-light: #FDF2F8;

  --accent-yellow: #F59E0B;   /* 밝은 햇살 오렌지/옐로우 (EXP, 별점) */
  --accent-yellow-light: #FEF3C7;
  
  --accent-green: #10B981;    /* 성공/마스터 민트 그린 */
  --accent-green-light: #D1FAE5;
  
  --accent-purple: #8B5CF6;   /* 마법 같은 퍼플 */
  --accent-purple-light: #EDE9FE;
  
  --accent-red: #EF4444;      /* 오답/다시보기 레드 */
  --accent-red-light: #FEE2E2;

  /* 배경 및 중립 컬러 */
  --bg-app: #F8FAFC;          /* 은은하고 눈이 편안한 밝은 배경 */
  --bg-sidebar: #FFFFFF;
  --bg-card: #FFFFFF;
  
  --text-main: #1E293B;       /* 진한 흑갈색 (시인성 최상) */
  --text-sub: #64748B;
  --text-muted: #94A3B8;
  
  --border-light: #E2E8F0;
  --border-focus: #818CF8;

  /* 그림자 */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-pop: 0 20px 30px -10px rgba(79, 70, 229, 0.2);

  /* 라운딩 */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* 타이포그래피 */
  --font-family: 'Pretendard', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Fredoka', 'Pretendard', sans-serif;
}

/* 리셋 & 기본 설정 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  user-select: none;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ==========================================================================
   최상위 레이아웃: PC FHD 와이드 (기본 ≥ 1024px)
   ========================================================================== */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* 좌측 사이드바 (PC 모드) */
.app-sidebar {
  width: 280px;
  min-width: 280px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.02);
}

.sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  font-size: 1.6rem;
  animation: pulse-spin 6s infinite ease-in-out;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.device-tag {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

/* 사이드바 프로필 카드 */
.sidebar-profile-card {
  background: #F8FAFC;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 24px;
}

.sidebar-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FDE047, #F97316);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}

.sidebar-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.user-name {
  font-weight: 800;
  font-size: 1rem;
}

.level-tag {
  background: var(--primary);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

.sidebar-exp-wrap {
  margin-bottom: 10px;
}

.sidebar-exp-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 4px;
}

.exp-bar-wrap {
  width: 100%;
  height: 7px;
  background: #E2E8F0;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.exp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #10B981);
  border-radius: var(--radius-full);
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sidebar-streak {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-yellow-light);
  color: #B45309;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

/* 사이드바 메뉴 */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sidebar-nav .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--text-sub);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  position: relative;
}

.sidebar-nav .nav-item:hover {
  background: #F1F5F9;
  color: var(--text-main);
}

.sidebar-nav .nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 800;
}

.sidebar-nav .nav-icon {
  font-size: 1.3rem;
}

.sidebar-nav .nav-badge {
  margin-left: auto;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: #E2E8F0;
  color: var(--text-sub);
}

.sidebar-nav .nav-badge.ai-chip {
  background: var(--accent-purple-light);
  color: #6D28D9;
}

.sidebar-nav .nav-badge.warning-chip {
  background: var(--accent-red-light);
  color: #B91C1C;
}

/* 사이드바 하단 제어 영역 */
.sidebar-footer {
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 모바일 뷰 & 캡쳐 좌우 배치 (글자 길이 비율 맞춤) */
.sidebar-footer-row {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
}

.btn-mode-toggle {
  flex: 1.6;
  min-width: 0;
  background: #F1F5F9;
  border: 1px solid var(--border-light);
  padding: 9px 6px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-sub);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.2s;
  user-select: none;
}

.btn-mode-toggle:hover {
  background: #E2E8F0;
  color: var(--text-main);
  transform: translateY(-1px);
}

.btn-mode-toggle:active {
  transform: scale(0.97);
}

/* 좌하단 캡쳐 버튼 */
.btn-sidebar-capture {
  flex: 1;
  min-width: 0;
  background: #F8FAFC;
  border: 1px solid var(--border-light);
  padding: 9px 6px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-sub);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.2s;
  user-select: none;
}

.btn-sidebar-capture:hover {
  background: #EEF2FF;
  border-color: #C7D2FE;
  color: var(--primary);
  transform: translateY(-1px);
}

.btn-sidebar-capture:active {
  transform: scale(0.97);
}

.btn-sidebar-capture.active {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #059669;
}

/* ==========================================================================
   우측 메인 컨텐츠 영역
   ========================================================================== */
.app-main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--bg-app);
}

/* 모바일 전용 헤더 & 하단바 기본은 숨김 (PC 모드일 때) */
.app-mobile-header {
  display: none;
}

.mobile-bottom-nav {
  display: none;
}

.app-main {
  flex: 1;
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 36px;
}

@media (min-width: 1800px) {
  .app-main {
    max-width: 1620px;
    padding: 24px 40px;
  }
}

.tab-pane {
  display: none;
  animation: fadeIn 0.3s ease-out;
}

.tab-pane.active {
  display: block;
}

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

/* ==========================================================================
   1. 대시보드 (홈) - FHD 대화면 그리드
   ========================================================================== */
.hero-banner {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
  color: #FFFFFF;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  box-shadow: var(--shadow-pop);
}

.banner-text h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.banner-text p {
  font-size: 1.05rem;
  opacity: 0.95;
}



.banner-badge {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.badge-title {
  display: block;
  font-size: 0.8rem;
  opacity: 0.85;
}

.badge-progress-num {
  font-size: 1.25rem;
  font-weight: 800;
}

.badge-progress-num strong {
  font-size: 1.5rem;
  color: #FDE047;
}

/* FHD 4열 시원한 카드 그리드 */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.feature-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 220px;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-focus);
}

.card-icon-wrap {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.card-info h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--text-main);
}

.card-info p {
  font-size: 0.88rem;
  color: var(--text-sub);
  margin-bottom: 16px;
  line-height: 1.45;
}

.progress-container {
  width: 100%;
  height: 6px;
  background: #E2E8F0;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-bar {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
}

.tag-reward {
  display: inline-block;
  background: var(--accent-yellow-light);
  color: #B45309;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.tag-badge {
  display: inline-block;
  background: var(--accent-purple-light);
  color: #6D28D9;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.tag-warning {
  display: inline-block;
  background: var(--accent-red-light);
  color: #B91C1C;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.card-action-btn {
  border: none;
  background: #F1F5F9;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.card-action-btn:hover:not(:disabled),
.feature-card:hover .card-action-btn {
  background: var(--primary);
  color: #FFFFFF;
}

/* ==========================================================================
   홈 대시보드 하단: 주간 7일 학습 루틴 & 2,000단어 마일스톤 (신규)
   ========================================================================== */
.dashboard-progress-section {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  margin-top: 24px;
}

.progress-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.progress-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.card-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}

.card-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-head-title .head-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.card-head-title h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 4px;
}

.head-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

.head-subtitle .highlight-text {
  color: var(--primary);
  font-weight: 700;
}

/* 주간 연속 달성 뱃지 */
.weekly-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  padding: 5px 10px;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #B45309;
  white-space: nowrap;
}

/* 월~일 7일 칩 그리드 */
.weekly-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F8FAFC;
  border: 1.5px solid #F1F5F9;
  border-radius: var(--radius-sm);
  padding: 10px 4px;
  transition: all 0.2s ease;
  position: relative;
}

.day-chip .day-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-sub);
}

.day-chip .day-status-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.day-chip .day-count {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* 요일별 상태 */
.day-chip.status-done {
  background: #EEF2FF;
  border-color: #C7D2FE;
}

.day-chip.status-done .day-name {
  color: var(--primary);
}

.day-chip.status-done .day-count {
  color: #4338CA;
  font-weight: 700;
}

.day-chip.status-today {
  background: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
  transform: translateY(-2px);
}

.day-chip.status-today .day-name {
  color: var(--primary);
  font-weight: 800;
}

.day-chip.status-today::after {
  content: '오늘';
  position: absolute;
  top: -8px;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  letter-spacing: -0.2px;
}

.day-chip.status-waiting {
  opacity: 0.65;
}

/* 미완료(보충 대상) 평일 스타일 */
.day-chip.status-missed {
  background: #FFF7ED;
  border-color: #FED7AA;
}

.day-chip.status-missed .day-name {
  color: #EA580C;
  font-weight: 700;
}

.day-chip.status-missed .day-count {
  color: #C2410C;
  font-weight: 700;
}

/* 일요일 휴식 & 총점검 전용 스타일 */
.day-chip.status-sunday-rest {
  background: #ECFDF5;
  border-color: #A7F3D0;
}

.day-chip.status-sunday-rest .day-name {
  color: #059669;
  font-weight: 800;
}

.day-chip.status-sunday-rest .day-count {
  color: #047857;
  font-weight: 700;
}

.day-chip.status-sunday-check {
  background: #FFFBEB;
  border-color: #FDE68A;
}

.day-chip.status-sunday-check .day-name {
  color: #D97706;
  font-weight: 800;
}

.day-chip.status-sunday-check .day-count {
  color: #B45309;
  font-weight: 800;
}

.day-chip .sunday-tag {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--text-muted);
}

/* 페이스 뱃지 */
.pace-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.pace-badge.pace-ahead {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.pace-badge.pace-on-track {
  background: #EFF6FF;
  color: #2563EB;
  border: 1px solid #BFDBFE;
}

.pace-badge.pace-behind {
  background: #FFFBEB;
  color: #D97706;
  border: 1px solid #FDE68A;
}

/* 듀얼 수치 비교 박스 */
.milestone-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 14px;
}

.m-stat-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m-stat-box.current-stat strong {
  color: var(--primary);
}

.m-stat-box.target-stat strong {
  color: #059669;
}

.m-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.m-stat-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.m-stat-val .unit {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}

.m-stat-pct {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-sub);
}

.m-stat-divider {
  font-size: 0.72rem;
  font-weight: 800;
  color: #CBD5E1;
  background: #FFFFFF;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
}

/* 듀얼 프로그레스 바 */
.dual-progress-container {
  position: relative;
  margin-top: 28px;
  margin-bottom: 12px;
  padding-top: 14px;
}

.target-marker {
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  transition: left 0.4s ease;
  pointer-events: none;
}

.marker-flag {
  font-size: 0.65rem;
  font-weight: 800;
  background: #059669;
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}

.marker-line {
  width: 2px;
  height: 20px;
  background: #059669;
  margin-top: 1px;
}

.dual-progress-track {
  width: 100%;
  height: 12px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.dual-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4F46E5 0%, #8B5CF6 100%);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.milestone-footer-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  color: var(--text-sub);
  margin-top: 6px;
}

.milestone-footer-note strong {
  color: var(--primary);
}

.eta-note {
  font-weight: 600;
  color: var(--text-muted);
}

/* 모바일 화면 대응 */
@media (max-width: 1023px) {
  .dashboard-progress-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

body.force-mobile-view .dashboard-progress-section {
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ==========================================================================
   2. 영단어 학습 탭 - 올인원 카드 & 5지선다 퀴즈 (Phase 4)
   ========================================================================== */
.words-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 10px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.set-selector-chips {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap; /* 월~금 5개 칩이 모바일에서도 1줄로 유지 */
  align-items: center;
}

.set-chip {
  border: 1.5px solid var(--border-light);
  background: #F8FAFC;
  color: var(--text-sub);
  font-weight: 800;
  font-size: 0.88rem;
  padding: 6px 14px;
  min-width: 38px;
  text-align: center;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.set-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #EEF2FF;
}

.set-chip.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}

.words-top-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.weekly-goal-header-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #EEF2FF;
  border: 1.5px solid #C7D2FE;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.84rem;
  font-weight: 800;
  color: #4338CA;
  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.06);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .words-top-bar {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .set-selector-chips {
    gap: 5px;
  }

  .set-chip {
    padding: 5px 10px;
    font-size: 0.82rem;
    min-width: 32px;
  }

  .weekly-goal-header-badge {
    padding: 5px 10px;
    font-size: 0.76rem;
  }
}

.weekly-goal-header-badge .badge-icon {
  font-size: 0.95rem;
}

.milestone-summary-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 800;
  color: #065F46;
}



/* PC 1920x1080 와이드 풀-너비 레이아웃 (우측 20개 단어리스트 숨김 및 단어카드 좌우 풀-확장) */
.words-split-layout {
  display: block;
  width: 100%;
}

.words-main-column {
  width: 100%;
  min-width: 0;
}

.word-view-container {
  display: none;
}

.word-view-container.active {
  display: block;
}

/* ==========================================================================
   올인원 단어 카드 (REQ-02, REQ-04, REQ-06)
   ========================================================================== */
.allinone-card {
  background: #FFFFFF;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  box-shadow: var(--shadow-md);
  margin-bottom: 16px;
  width: 100%;
  transition: border-color 0.2s;
}

.allinone-card:hover {
  border-color: #C7D2FE;
}

.aio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F1F5F9;
}

.aio-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-pos-badge {
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.word-status-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: #F1F5F9;
  color: var(--text-muted);
}

.word-status-badge.mastered {
  background: #D1FAE5;
  color: #065F46;
}

.word-status-badge.mistake {
  background: #FEE2E2;
  color: #991B1B;
}

.word-status-badge.learning {
  background: #FEF3C7;
  color: #92400E;
}

.aio-audio-ctrl {
  display: flex;
  gap: 8px;
}

.btn-tts-pill {
  border: 1px solid var(--border-light);
  background: #F8FAFC;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-tts-pill:hover {
  background: #EEF2FF;
  border-color: var(--primary);
}

.btn-tts-speed {
  background: #F1F5F9;
  border-color: #E2E8F0;
  color: #334155;
  font-weight: 800;
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
  font-feature-settings: "tnum";
}

.btn-tts-speed:hover {
  background: #E0E7FF;
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.btn-tts-speed:active {
  transform: translateY(0);
}

.btn-tts-all {
  background: #EEF2FF;
  border-color: #C7D2FE;
  color: var(--primary);
}

.btn-tts-all.playing {
  background: #4F46E5;
  color: #FFFFFF;
  animation: pulse-border 1.5s infinite;
}

@keyframes pulse-border {
  0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

/* 표제어 및 뜻 로우 (좌우 분리 해소: 단어-발음-뜻을 한눈에 바로 연결) */
.aio-word-row {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 18px;
  padding: 6px 16px 14px;
  border-radius: var(--radius-md);
  border-bottom: 1.5px dashed #E2E8F0;
  min-height: 64px;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

.aio-word-row.highlight {
  background: #EEF2FF;
  border-bottom: 2px solid var(--primary);
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.18);
  transform: translateY(-2px);
}

.aio-word-main {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  flex: 0 0 auto;
}

.aio-english {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.5px;
  margin: 0;
}

.aio-phonetic {
  font-size: 1.25rem;
  color: var(--text-muted);
  font-weight: 600;
}

.aio-meaning {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0F172A;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex: 0 0 auto;
}

.aio-meaning::before {
  content: "•";
  color: #818CF8;
  font-size: 1.6rem;
  display: inline-block;
  line-height: 1;
}

/* 본문 분할 컨테이너: PC에서는 좌우 2분할, 모바일에서는 상하 1열 */
.aio-body-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* PC 와이드 모드 (≥ 961px): 파생단어 존재 시 좌우 2분할 (예문 65% : 파생어 35%) */
@media (min-width: 961px) {
  .aio-body-split.has-derivatives {
    grid-template-columns: 1.3fr 0.7fr;
    gap: 24px;
    align-items: stretch;
    min-height: 436px; /* 5개 파생단어 여유 수납 및 큼직한 예문 박스 기준 높이 */
  }

  /* 예문 박스 사이 간격을 휑하게 띄우지 않고, 예문 박스 각각(한개씩)의 크기를 늘려서 꽉 채움 */
  .aio-body-split.has-derivatives .aio-examples-list {
    min-height: 436px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px; /* 단정한 기본 간격 유지 */
  }

  .aio-body-split.has-derivatives .aio-example-item {
    flex: 1; /* 예문 박스 한개씩의 크기를 늘려 세로를 꽉 채움 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 내부 텍스트를 위아래 여유있게 수직 중앙 배치 */
    padding: 14px 20px;
  }
}

/* 파생단어가 없는 경우: 3개 예문이 가로 3열로 시원하게 배치되어 세로 높이 절약 */
@media (min-width: 1024px) {
  .aio-body-split:not(.has-derivatives) .aio-examples-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* 모바일 뷰 및 수동 모바일 모드 강제 적용 시: 상하 1열 스택 */
body.force-mobile-view .aio-body-split {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* 함께 외우는 파생단어 (Word Family) 카드: 5개 기준 세로 크기 완벽 고정 (4개 이하 시에도 100% 동일) */
.aio-derivatives-card {
  background: #F8FAFC;
  border: 1.5px solid #E0E7FF;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.04);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 436px;                /* 5개 온전한 수납 높이 엄격 고정 */
  min-height: 436px !important; /* 4개 이하일 때도 절대 줄어들지 않음 */
  box-sizing: border-box;
}

.aio-body-split.has-derivatives .aio-derivatives-card {
  margin-bottom: 0;
  height: 436px;
}

/* 5개 초과로 펼쳤을 때에만 확장 허용 */
.aio-derivatives-card.expanded,
.aio-body-split.has-derivatives .aio-derivatives-card.expanded {
  height: auto !important;
  min-height: 436px;
}

@media (max-width: 960px) {
  .aio-derivatives-card,
  .aio-body-split.has-derivatives .aio-derivatives-card {
    min-height: auto !important;
    height: auto !important;
  }
}

body.force-mobile-view .aio-derivatives-card,
body.force-mobile-view .aio-body-split.has-derivatives .aio-derivatives-card {
  min-height: auto !important;
  height: auto !important;
}

.deriv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1.5px solid #EEF2F6;
}

.deriv-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deriv-icon {
  font-size: 0.95rem;
}

.deriv-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: -0.2px;
}

.deriv-count-badge {
  font-size: 0.72rem;
  font-weight: 700;
  background: #EEF2FF;
  color: #4F46E5;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #C7D2FE;
}

.btn-deriv-more {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-deriv-more:hover {
  background: #4F46E5;
  color: #FFFFFF;
  border-color: #4F46E5;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.2);
}

.deriv-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
  justify-content: flex-start;
}

.deriv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  transition: all 0.15s ease;
}

.deriv-item:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateX(3px);
}

.split-deriv-word-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.d-btn-tts {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.15s;
  padding: 4px;
}

.d-btn-tts:hover {
  opacity: 1;
  transform: scale(1.15);
}

.deriv-rank {
  font-size: 0.74rem;
  font-weight: 500;
  color: #94A3B8;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.deriv-word {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #0F172A;
  min-width: 135px;
  letter-spacing: 0.25px;
  flex-shrink: 0;
}

.deriv-pos {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: #F1F5F9;
  color: #475569;
  flex-shrink: 0;
}

.deriv-pos.pos-noun {
  background: #EFF6FF;
  color: #1D4ED8;
}

.deriv-pos.pos-verb {
  background: #FEF3C7;
  color: #B45309;
}

.deriv-pos.pos-adj {
  background: #ECFDF5;
  color: #047857;
}

.deriv-pos.pos-adv {
  background: #F5F3FF;
  color: #6D28D9;
}

.deriv-meaning {
  font-size: 0.86rem;
  font-weight: 400;
  color: #475569;
  flex: 1;
}

/* 5개 초과 숨김 및 펼침 제어 */
.deriv-item.more-item {
  display: none;
}

.aio-derivatives-card.expanded .deriv-item.more-item {
  display: flex;
  animation: fadeInDown 0.25s ease;
}

/* 모바일 뷰 전용: 한 화면에 스크롤 없이 수납되도록 기본 2개만 노출 */
@media (max-width: 960px) {
  .deriv-list .deriv-item:nth-child(n+3) {
    display: none;
  }
  .aio-derivatives-card.expanded .deriv-list .deriv-item:nth-child(n+3) {
    display: flex;
    animation: fadeInDown 0.25s ease;
  }
}

body.force-mobile-view .deriv-list .deriv-item:nth-child(n+3),
body.is-mobile-device .deriv-list .deriv-item:nth-child(n+3) {
  display: none;
}

body.force-mobile-view .aio-derivatives-card.expanded .deriv-list .deriv-item:nth-child(n+3),
body.is-mobile-device .aio-derivatives-card.expanded .deriv-list .deriv-item:nth-child(n+3) {
  display: flex;
  animation: fadeInDown 0.25s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 3개 예문 리스트 */
.aio-examples-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
}

.aio-example-item {
  background: #F8FAFC;
  border: 1.5px solid #F1F5F9;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  transition: all 0.25s;
}

.aio-example-item.highlight {
  background: #FEF3C7;
  border-color: #F59E0B;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
  transform: translateX(4px);
}

.ex-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.ex-tag {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-mini-speaker {
  border: none;
  background: #FFFFFF;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, background 0.15s;
}

.btn-mini-speaker:hover {
  background: #EEF2FF;
  transform: scale(1.15);
}

.ex-en {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.45;
  margin-bottom: 4px;
}

.ex-ko {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.4;
  margin: 0;
}

/* 자동 TTS 카운트다운 알림바 (사라지지 않고 높이 고정) */
.auto-tts-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  min-height: 42px; /* 내용 변경/완료 시에도 다음 버튼 위치 고정 */
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.auto-tts-indicator.status-waiting,
.auto-tts-indicator.status-counting {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #B45309;
}

.auto-tts-indicator.status-playing {
  background: #EEF2FF;
  border-color: #C7D2FE;
  color: #4338CA;
}

.auto-tts-indicator.status-completed {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #047857;
}

.timer-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94A3B8;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.timer-dot.dot-counting,
.timer-dot.counting {
  background: #F59E0B;
  animation: pulse-dot 1s infinite;
}

.timer-dot.dot-playing {
  background: #6366F1;
  animation: pulse-dot 0.8s infinite;
}

.timer-dot.dot-completed {
  background: #10B981;
}

@keyframes pulse-dot {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* 하단 내비게이션 바 (1줄 대칭 컨트롤러) */
.card-navigation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.nav-progress-indicator {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: var(--radius-full);
  padding: 11px 22px;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  user-select: none;
}

.nav-progress-indicator .nav-slash {
  color: #94A3B8;
  font-weight: 600;
  margin: 0 4px;
}

.nav-progress-indicator .nav-unit {
  font-size: 0.85rem;
  color: var(--text-sub);
  font-weight: 600;
  margin-left: 3px;
}

.card-nav-btn {
  flex: 1;
  border: none;
  background: #F1F5F9;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.card-nav-btn:hover:not(:disabled) {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.card-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.4);
}

.card-nav-btn.ready-next {
  background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.btn-next-word.ready-quiz {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

/* 우측 사이드 패널: 오늘의 단어 리스트 (사용자 요청: 단어리스트 20을 없애고 단어카드를 좌우 풀 확장) */
.words-side-panel {
  display: none !important;
}

.panel-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.panel-header h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
}

.panel-sub {
  font-size: 0.75rem;
  color: var(--text-sub);
}

.words-quick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 480px;
  overflow-y: auto;
}

.word-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.2s;
  background: #FAFAFA;
}

.word-list-item:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.word-list-item.current {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: var(--shadow-sm);
}

.w-item-left {
  display: flex;
  flex-direction: column;
}

.w-item-en {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--primary);
}

.w-item-ko {
  font-size: 0.78rem;
  color: var(--text-sub);
}

.w-item-status {
  font-size: 0.8rem;
}

/* ==========================================================================
   5지선다 퀴즈 뷰 (REQ-03, REQ-05)
   ========================================================================== */
.quiz-status-header {
  margin-bottom: 18px;
}

.quiz-top-actions {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
}

.btn-quiz-back {
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: var(--text-sub);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-quiz-back:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: #C7D2FE;
  transform: translateX(-2px);
}

.q-progress-wrap {
  width: 100%;
  height: 8px;
  background: #E2E8F0;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 10px;
}

.q-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, #10B981 100%);
  border-radius: var(--radius-full);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.q-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 700;
}

.q-badge {
  background: var(--primary-light);
  color: var(--primary);
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.q-score-preview {
  color: var(--text-sub);
}

.quiz-question-card {
  background: #FFFFFF;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-align: center;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.q-card-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.quiz-pos {
  background: #F1F5F9;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.quiz-target-word {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--primary);
  font-weight: 700;
  margin: 4px 0;
}

.quiz-phonetic {
  font-size: 1.15rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 12px;
}

.quiz-hint-sentence {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 0.95rem;
  color: var(--text-sub);
  margin-bottom: 12px;
}

.quiz-instruction {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* 6지선다 선택지 목록 (좌우 완벽 대칭 2열 3행 그리드) */
.quiz-6choices-grid,
.quiz-5choices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  .quiz-6choices-grid,
  .quiz-5choices-grid {
    grid-template-columns: 1fr;
  }

  .card-navigation-bar {
    gap: 8px;
  }

  .card-nav-btn {
    padding: 12px 10px;
    font-size: 0.86rem;
  }

  .nav-progress-indicator {
    padding: 8px 12px;
    font-size: 0.88rem;
  }
}

.quiz-choice-btn,
.quiz-opt-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.quiz-choice-btn:hover:not(:disabled),
.quiz-opt-btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: #EEF2FF;
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12);
}

.quiz-choice-btn:active:not(:disabled),
.quiz-opt-btn:active:not(:disabled) {
  transform: translateY(0);
}

.choice-num,
.opt-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E2E8F0;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: background-color 0.2s, color 0.2s;
}

.quiz-choice-btn:hover:not(:disabled) .choice-num,
.quiz-opt-btn:hover:not(:disabled) .opt-num {
  background: var(--primary);
  color: #FFFFFF;
}

.quiz-choice-btn.correct,
.quiz-opt-btn.correct {
  background: #ECFDF5 !important;
  border-color: #10B981 !important;
  color: #065F46 !important;
  pointer-events: none;
}

.quiz-choice-btn.correct .choice-num,
.quiz-opt-btn.correct .opt-num {
  background: #10B981 !important;
  color: #FFFFFF !important;
}

.quiz-choice-btn.wrong,
.quiz-opt-btn.wrong {
  background: #FEF2F2 !important;
  border-color: #EF4444 !important;
  color: #991B1B !important;
  pointer-events: none;
}

.quiz-choice-btn.wrong .choice-num,
.quiz-opt-btn.wrong .opt-num {
  background: #EF4444 !important;
  color: #FFFFFF !important;
}

/* 퀴즈 피드백 박스 */
.quiz-feedback-box {
  background: #F8FAFC;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
  margin-bottom: 14px;
  animation: fadeIn 0.2s;
}

.feedback-msg {
  font-weight: 800;
  font-size: 1.1rem;
}

/* ==========================================================================
   퀴즈 최종 결과 리포트 (중앙 정렬 및 여유로운 간격 디자인)
   ========================================================================== */
.quiz-final-result {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 30px 16px 50px;
  box-sizing: border-box;
  animation: fadeIn 0.3s ease-out;
}

.result-report-card {
  width: 100%;
  max-width: 580px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: 24px;
  padding: 40px 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  margin: 0 auto;
}

/* 1. 최상단 아이콘 */
.result-top-icon {
  font-size: 3.8rem;
  line-height: 1;
  margin-bottom: 16px;
  animation: bounce-trophy 1.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.25));
}

@keyframes bounce-trophy {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-8px) scale(1.06); }
}

/* 2. 점수 영역 */
.result-score-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.result-score-title {
  font-family: var(--font-display, 'Pretendard', sans-serif);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--primary, #4F46E5);
  line-height: 1.1;
  letter-spacing: -1px;
}

.result-score-title .score-slash {
  font-size: 2.2rem;
  font-weight: 400;
  color: #94A3B8;
  margin: 0 4px;
}

.result-percentage-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 700;
}

.result-percentage-chip.pass {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.result-percentage-chip.fail {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

/* 3. 축하 / 피드백 배너 박스 (문장간 넉넉한 간격 및 시인성) */
.quiz-pass-banner,
.quiz-fail-banner {
  width: 100%;
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 28px;
  box-sizing: border-box;
  text-align: center;
}

.quiz-pass-banner {
  background: #F0FDF4;
  border: 1.5px solid #BBF7D0;
}

.quiz-fail-banner {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
}

.quiz-pass-banner .banner-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #15803D;
  margin: 0 0 12px 0;
  letter-spacing: -0.3px;
}

.quiz-fail-banner .banner-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #B91C1C;
  margin: 0 0 12px 0;
  letter-spacing: -0.3px;
}

.quiz-pass-banner .banner-desc {
  font-size: 1rem;
  font-weight: 600;
  color: #166534;
  line-height: 1.65;
  margin: 0;
}

.quiz-fail-banner .banner-desc {
  font-size: 1rem;
  font-weight: 600;
  color: #991B1B;
  line-height: 1.65;
  margin: 0;
}

.banner-desc strong {
  font-weight: 800;
  color: #0F172A;
}

.exp-highlight {
  display: inline-block;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #FFFFFF;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 8px;
  margin-left: 4px;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
}

/* 4. 액션 버튼 영역 (깔끔한 정렬 및 프로젝트 디자인 토큰 적용) */
.result-actions-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.result-btn {
  border: none;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  padding: 13px 22px;
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.result-btn.btn-retry-mistakes {
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.28);
}

.result-btn.btn-retry-mistakes:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.38);
}

.result-btn.btn-retry {
  background: var(--primary, #4F46E5);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.result-btn.btn-retry:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
}

.result-btn.btn-review {
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #E2E8F0;
}

.result-btn.btn-review:hover {
  background: #E2E8F0;
  color: #0F172A;
  transform: translateY(-2px);
}

.result-btn.btn-next-set {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.25);
}

.result-btn.btn-next-set:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(109, 40, 217, 0.35);
}

@media (max-width: 480px) {
  .result-report-card {
    padding: 30px 18px;
  }
  .result-actions-row {
    flex-direction: column;
    width: 100%;
  }
  .result-btn {
    width: 100%;
  }
}

/* 우측 패널 블라인드 가림막 (단어리스트 숨김 대응) */
.words-side-panel {
  display: none !important;
}

.quicklist-blind-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 24px;
  text-align: center;
  animation: fadeIn 0.25s;
}

.blind-content .blind-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;
}

.blind-content h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 8px;
}

.blind-content p {
  font-size: 0.85rem;
  color: var(--text-sub);
  line-height: 1.5;
}

/* ==========================================================================
   3. 독서록 & AI 첨삭 - FHD 좌우 나란히 대조 2분할 (Split Layout)
   ========================================================================== */
.writing-intro-banner {
  background: linear-gradient(135deg, #3B82F6 0%, #2DD4BF 100%);
  color: #FFFFFF;
  padding: 24px 32px;
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.intro-left h2 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.intro-left p {
  font-size: 0.95rem;
  opacity: 0.92;
}

.intro-ai-avatar {
  font-size: 2.6rem;
  animation: float-bot 3s infinite ease-in-out;
}

@keyframes float-bot {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* PC 좌우 2분할 그리드 */
.writing-split-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  align-items: start;
}

.writing-form-column, .writing-result-column {
  min-width: 0;
}

.writing-view-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.form-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font-family);
  background: #FAFAFA;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  background: #FFFFFF;
}

.grade-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  border: 1.5px solid var(--border-light);
  background: #F8FAFC;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.2s;
}

.chip.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.textarea-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.char-count {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.notebook-paper {
  border: 1.5px solid #CBD5E1;
  border-radius: var(--radius-md);
  background-color: #FFFDF9;
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    #E2E8F0 31px,
    #E2E8F0 32px
  );
  padding: 10px 14px;
}

.notebook-textarea {
  width: 100%;
  background: transparent;
  border: none;
  font-family: var(--font-family);
  font-size: 1.1rem;
  line-height: 32px;
  color: #334155;
  resize: vertical;
  outline: none;
}

.submit-action-row {
  margin-top: 20px;
}

.btn-ai-submit {
  width: 100%;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  color: #FFFFFF;
  border: none;
  padding: 16px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-pop);
  transition: all 0.2s;
}

.btn-ai-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* 대기 안내 카드 */
.writing-placeholder-card {
  background: #FFFFFF;
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-lg);
  padding: 60px 30px;
  text-align: center;
}

.empty-icon {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 16px;
}

.writing-placeholder-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text-main);
}

.writing-placeholder-card p {
  font-size: 0.95rem;
  color: var(--text-sub);
  line-height: 1.6;
}

/* 로딩 화면 */
.writing-loading-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 60px 30px;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.loading-robot-wrap {
  position: relative;
  display: inline-block;
  font-size: 3.8rem;
  margin-bottom: 20px;
}

.bouncing-bot {
  display: inline-block;
  animation: bot-bounce 1s infinite alternate ease-in-out;
}

.pencil-draw {
  position: absolute;
  right: -15px;
  top: 0;
  font-size: 2.2rem;
  animation: pencil-wiggle 0.6s infinite alternate ease-in-out;
}

@keyframes bot-bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

@keyframes pencil-wiggle {
  from { transform: rotate(-10deg); }
  to { transform: rotate(20deg); }
}

.writing-loading-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}

.writing-loading-card p {
  font-size: 0.95rem;
  color: var(--text-sub);
  margin-bottom: 24px;
}

.loading-bar {
  width: 240px;
  height: 8px;
  background: #E2E8F0;
  border-radius: var(--radius-full);
  margin: 0 auto;
  overflow: hidden;
}

.loading-bar-inner {
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: var(--radius-full);
  animation: loading-slide 1.5s infinite ease-in-out;
}

@keyframes loading-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* 첨삭 결과 리포트 패널 */
.writing-result-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

.result-header-box {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--border-light);
}

.result-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.badge-success {
  background: var(--accent-green-light);
  color: #047857;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.report-date {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.result-book-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
}

.feedback-card {
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 18px;
}

.card-badge-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.praise-card {
  background: #FEF3C7;
  border-left: 5px solid #F59E0B;
}

.praise-card .card-badge-header {
  color: #B45309;
}

.feedback-content {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #78350F;
}

.correction-card {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
}

.correction-card .card-badge-header {
  color: var(--primary);
}

.diff-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diff-item {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.diff-before, .diff-after {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.92rem;
}

.tag-err {
  background: var(--accent-red-light);
  color: #B91C1C;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.highlight-err {
  color: #DC2626;
  text-decoration: line-through;
  font-weight: 700;
}

.diff-arrow {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 2px 0 2px 8px;
}

.tag-fix {
  background: var(--accent-green-light);
  color: #047857;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.highlight-fix {
  color: #059669;
  font-weight: 800;
}

.diff-tip {
  font-size: 0.82rem;
  color: var(--text-sub);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-light);
}

.vocabulary-card {
  background: var(--accent-purple-light);
  border-left: 5px solid var(--accent-purple);
}

.vocabulary-card .card-badge-header {
  color: #6D28D9;
}

.vocab-lead {
  font-size: 0.88rem;
  color: #5B21B6;
  margin-bottom: 8px;
  font-weight: 600;
}

.vocab-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.92rem;
  color: #4C1D95;
}

.highlight-word {
  background: #FFFFFF;
  color: var(--primary);
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #DDD6FE;
}

.result-action-bar {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.btn-secondary {
  flex: 1;
  background: #F1F5F9;
  border: 1px solid var(--border-light);
  padding: 14px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.btn-primary {
  flex: 1.5;
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  padding: 14px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
}

/* ==========================================================================
   4. 오답노트 - FHD 3열 그리드
   ========================================================================== */
.review-header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.review-title-info h2 {
  font-size: 1.35rem;
  font-weight: 800;
}

.review-title-info p {
  font-size: 0.92rem;
  color: var(--text-sub);
}

.btn-start-review-quiz {
  background: linear-gradient(135deg, #EF4444 0%, #F59E0B 100%);
  color: #FFFFFF;
  border: none;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.mistake-words-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.mistake-item-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
}

.mistake-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.m-word {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--primary);
}

.m-phonetic {
  font-size: 0.95rem;
  color: var(--text-sub);
}

.tts-mini-btn {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

.m-meaning {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
}

.m-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
}

.badge-wrong-count {
  font-size: 0.78rem;
  color: #DC2626;
  font-weight: 700;
  background: var(--accent-red-light);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.btn-re-memorize {
  background: var(--accent-green-light);
  color: #047857;
  border: 1px solid #A7F3D0;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}

/* ==========================================================================
   토스트 팝업
   ========================================================================== */
.toast-popup {
  position: fixed;
  bottom: 40px;
  right: 40px;
  background: #1E293B;
  color: #FFFFFF;
  padding: 14px 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2000;
}

.toast-popup.show {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   공통 모바일 헤더 및 헤더 컴포넌트 (실제 모바일 + 강제 모바일 뷰 공용)
   ========================================================================== */
.app-mobile-header {
  display: none; /* PC 기본에서는 숨김 */
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 모던 웹 네이티브 알약(Pill)형 PC 복귀 버튼 */
.btn-pc-return {
  display: none;
  align-items: center;
  gap: 5px;
  background: #EEF2FF;
  color: #4F46E5;
  border: 1.5px solid #C7D2FE;
  padding: 6px 12px;
  border-radius: 9999px;
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  user-select: none;
}

.btn-pc-return:hover {
  background: #4F46E5;
  color: #FFFFFF;
  border-color: #4F46E5;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
  transform: translateY(-1px);
}

.btn-pc-return:active {
  transform: scale(0.96);
}

.btn-pc-return .pc-btn-icon {
  font-size: 0.88rem;
  line-height: 1;
}

.btn-pc-return .pc-btn-text {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* force-mobile-view 상태에서만 PC 복귀 버튼 노출 */
body.force-mobile-view .btn-pc-return {
  display: inline-flex !important;
}

/* 모바일 헤더 아이콘 및 배지 컴포넌트 */
.btn-icon-head {
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-sub);
}

.btn-icon-head:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
  transform: scale(1.06);
}

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #B45309;
  white-space: nowrap;
}

.user-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 3px 8px 3px 4px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s;
}

.user-profile-badge:hover {
  background: #EEF2FF;
  border-color: #C7D2FE;
}

.user-profile-badge .avatar-ring {
  width: 24px;
  height: 24px;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.user-profile-badge .profile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-profile-badge .meta-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1;
}

.user-profile-badge .level-tag {
  font-size: 0.62rem;
  background: var(--primary);
  color: #FFFFFF;
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 800;
}

.user-profile-badge .exp-bar-wrap {
  width: 32px;
  height: 3px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
}

.user-profile-badge .exp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #10B981);
  border-radius: 999px;
}

.user-profile-badge .profile-badge-arrow {
  font-size: 0.62rem;
  color: var(--text-muted);
}

/* ==========================================================================
   실제 스마트폰 모바일 화면 (< 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
  .app-sidebar {
    display: none;
  }

  .app-main-wrapper {
    padding-bottom: 80px; /* 하단 네비게이션 공간 */
  }

  .app-mobile-header {
    display: flex;
  }

  .app-main {
    max-width: 680px;
    padding: 20px;
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* 단어 학습: 1열로 변경, 사이드 패널 숨김 */
  .words-split-layout {
    grid-template-columns: 1fr;
  }

  .words-side-panel {
    display: none;
  }

  /* 독서록: 1열로 변경 */
  .writing-split-layout {
    grid-template-columns: 1fr;
  }

  .writing-placeholder-card {
    display: none;
  }

  .quiz-options-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   모바일 하단 네비게이션 (공통 글로벌 스타일)
   ========================================================================== */
.mobile-bottom-nav {
  display: none; /* 기본 PC 모드에서는 숨김 */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-light);
  justify-content: space-around;
  align-items: center;
  padding: 8px 0 14px 0;
  z-index: 1000;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
}

.mobile-nav-btn {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 16px;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
}

.mobile-nav-btn .m-icon {
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mobile-nav-btn .m-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: color 0.2s;
  white-space: nowrap;
}

.mobile-nav-btn.active .m-icon {
  transform: scale(1.18) translateY(-2px);
}

.mobile-nav-btn.active .m-label {
  color: var(--primary);
  font-weight: 800;
}

/* 모바일 토스트 팝업 위치 */
@media (max-width: 1023px) {
  .toast-popup {
    bottom: 85px;
    right: 50%;
    transform: translateX(50%) translateY(20px);
  }

  .toast-popup.show {
    transform: translateX(50%) translateY(0);
  }
}

@media (max-width: 520px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .hero-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .card-main-word {
    font-size: 2.4rem;
  }

  .card-meaning {
    font-size: 1.8rem;
  }

  .form-row-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PC 화면에서 '모바일 뷰로 전환' 시 (시원한 680px 카드형 모바일 뷰)
   ========================================================================== */
body.force-mobile-view {
  background-color: #F1F5F9;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

body.force-mobile-view .app-layout {
  width: 680px;
  max-width: 100%;
  min-height: 100vh;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.08);
  background: #FFFFFF;
  position: relative;
  display: flex;
  flex-direction: column;
}

body.force-mobile-view .app-sidebar {
  display: none !important;
}

body.force-mobile-view .app-mobile-header {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 100;
}

body.force-mobile-view .app-main-wrapper {
  flex: 1;
  padding-bottom: 85px;
  position: relative;
  background: #FFFFFF;
}

body.force-mobile-view .app-main {
  max-width: 100%;
  padding: 20px;
}

body.force-mobile-view .dashboard-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

body.force-mobile-view .words-split-layout,
body.force-mobile-view .writing-split-layout {
  grid-template-columns: 1fr;
}

body.force-mobile-view .words-side-panel,
body.force-mobile-view .writing-placeholder-card {
  display: none;
}

body.force-mobile-view .quiz-options-grid {
  grid-template-columns: 1fr;
}

body.force-mobile-view .mistake-words-grid {
  grid-template-columns: 1fr;
}

body.force-mobile-view .mobile-bottom-nav {
  display: flex !important;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 680px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

/* ==========================================================================
   설정 버튼 스타일 (사이드바 & 헤더)
   ========================================================================== */
.btn-settings-toggle {
  margin-top: 8px;
  width: 100%;
  background: #F8FAFC;
  border: 1px solid var(--border-light);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-sub);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-settings-toggle:hover {
  background: #EEF2F6;
  color: var(--primary);
  border-color: #CBD5E1;
}

.btn-icon-head {
  background: #F1F5F9;
  border: 1px solid var(--border-light);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   스펠링 쓰기 퀴즈 스타일
   ========================================================================== */
.spelling-card-box {
  background: var(--bg-card);
  border: 2px solid var(--primary-light);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.spelling-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.spell-tag {
  background: var(--accent-purple-light);
  color: #6D28D9;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.spelling-meaning {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 6px;
}

.spelling-prompt {
  font-size: 0.92rem;
  color: var(--text-sub);
  margin-bottom: 24px;
}

/* 스펠링 빈칸 슬롯 */
.spelling-slots-wrap {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  min-height: 64px;
}

.spell-slot {
  width: 52px;
  height: 60px;
  border-bottom: 4px solid var(--primary);
  background: #F8FAFC;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.2s;
}

.spell-slot.filled {
  background: var(--primary-light);
  box-shadow: var(--shadow-sm);
  animation: slot-bounce 0.25s ease-out;
}

@keyframes slot-bounce {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* 셔플된 글자 타일 */
.spelling-tiles-grid {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.spell-tile {
  width: 50px;
  height: 52px;
  background: #FFFFFF;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--border-light);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spell-tile:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--border-focus);
}

.spell-tile:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--border-focus);
}

.spell-tile.used {
  opacity: 0.25;
  pointer-events: none;
  border-style: dashed;
  box-shadow: none;
  transform: translateY(2px);
}

/* 스펠링 하단 액션 버튼 */
.spelling-action-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.btn-spell-clear {
  background: #F1F5F9;
  border: 1px solid var(--border-light);
  color: var(--text-sub);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.btn-spell-check {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
  border: none;
  font-weight: 800;
  font-size: 1rem;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

/* ==========================================================================
   독서록 서브 탭 & 보관함 아카이브 스타일
   ========================================================================== */
.writing-sub-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.w-sub-btn {
  border: 1.5px solid var(--border-light);
  background: #FFFFFF;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.w-sub-btn.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.badge-count {
  background: rgba(255, 255, 255, 0.3);
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.w-sub-btn:not(.active) .badge-count {
  background: #E2E8F0;
  color: var(--text-sub);
}

.writing-sub-container {
  display: none;
}

.writing-sub-container.active {
  display: block;
}

/* 보관함 책 카드 그리드 */
.archive-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.archive-header-bar h3 {
  font-size: 1.2rem;
  font-weight: 800;
}

.archive-meta {
  font-size: 0.85rem;
  color: var(--text-sub);
  font-weight: 700;
}

.archive-books-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.book-archive-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}

.book-archive-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-focus);
}

.book-card-spine {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
}

.book-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.book-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.book-stars {
  color: #F59E0B;
  font-size: 0.85rem;
}

.book-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.book-author {
  font-size: 0.85rem;
  color: var(--text-sub);
  margin-bottom: 16px;
}

.book-praise-snippet {
  background: #FEF3C7;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.82rem;
  color: #92400E;
  line-height: 1.45;
  margin-bottom: 16px;
}

.btn-view-report {
  border: none;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}

.book-archive-card:hover .btn-view-report {
  background: var(--primary);
  color: #FFFFFF;
}

/* ==========================================================================
   모달 팝업 공통 스타일 (부모 설정 & 상세 보기)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

.modal-dialog {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  animation: modal-up 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-dialog.modal-lg {
  max-width: 680px;
}

@keyframes modal-up {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light);
}

.m-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-head-title h3 {
  font-size: 1.2rem;
  font-weight: 800;
}

.btn-modal-close {
  background: #F1F5F9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-sub);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-light);
  background: #F8FAFC;
}

/* 설정 폼 요소 */
.settings-group {
  margin-bottom: 22px;
}

.s-label {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: var(--text-main);
}

.s-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.s-sub-note {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.profile-edit-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 10px;
}

.form-select {
  padding: 12px 14px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: 0.95rem;
  background: #FAFAFA;
  outline: none;
}

.goal-chips {
  display: flex;
  gap: 10px;
}

.g-chip {
  flex: 1;
  padding: 10px;
  border: 1.5px solid var(--border-light);
  background: #F8FAFC;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.2s;
}

.g-chip.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.api-key-input-wrap {
  position: relative;
  margin-bottom: 8px;
}

.btn-key-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
}

.api-test-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-test-api {
  background: #F1F5F9;
  border: 1px solid var(--border-light);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.btn-test-api:hover {
  background: #E2E8F0;
}

.api-test-status {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 700;
}

@media (max-width: 768px) {
  .archive-books-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   자녀 프로필 전환 & PIN 키패드 모달 스타일 (Phase 3)
   ========================================================================== */
.sidebar-switch-btn {
  width: 100%;
  margin-top: 14px;
}

.sidebar-profile-card:hover .sidebar-switch-btn {
  background: var(--primary);
  color: #FFFFFF;
}

.profile-badge-arrow {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 4px;
}

/* 프로필 모달 다이얼로그 (중앙 정렬 및 여백) */
.modal-profile-dialog {
  max-width: 660px;
  width: 100%;
  margin: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}

.profile-select-desc {
  font-size: 0.95rem;
  color: var(--text-sub);
  margin-bottom: 20px;
  font-weight: 600;
}

/* 프로필 박스 카드 그리드 */
.profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

/* 대시보드 feature-card 와 통일된 깔끔한 카드 박스 */
.profile-box-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  position: relative;
}

.profile-box-card:hover {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.profile-box-card.is-active {
  border-color: var(--primary);
  background: #F8FAFC;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
}

.p-box-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.p-box-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FDE047, #F97316);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.p-box-user-info {
  flex: 1;
  min-width: 0;
}

.p-box-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.p-box-name {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-main);
}

.p-box-grade-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

.p-box-active-chip {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.p-box-stats {
  background: #F8FAFC;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid #F1F5F9;
}

.p-box-exp-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 4px;
}

.p-box-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-top: 8px;
}

/* 하단 액션 버튼 영역 (대시보드와 동일한 card-action-btn) */
.p-box-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
}

.p-box-action {
  flex: 1;
  font-size: 0.88rem;
  padding: 9px 12px;
}

.profile-box-card:hover .p-box-action:not(:disabled) {
  background: var(--primary);
  color: #FFFFFF;
}

.p-box-action.is-current {
  background: #E2E8F0;
  color: #475569;
  cursor: default;
}

.btn-cancel-account {
  border: none;
  background: transparent;
  color: #94A3B8;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.btn-cancel-account:hover {
  color: #EF4444;
  background: #FEE2E2;
  text-decoration: none;
}

/* 신규 자녀 추가 섹션 */
.new-profile-section {
  border-top: 1px dashed var(--border-light);
  padding-top: 16px;
}

.btn-new-child-action {
  width: 100%;
  padding: 12px;
  background: #F8FAFC;
  border: 1.5px dashed #CBD5E1;
  color: var(--text-sub);
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: var(--radius-md);
  transition: all 0.2s;
}

.btn-new-child-action:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.new-profile-form {
  margin-top: 14px;
  padding: 16px;
  background: #F8FAFC;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  animation: fadeIn 0.2s ease-out;
}

.new-profile-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--text-main);
}

.form-row {
  margin-bottom: 14px;
}

.form-row label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}

.field-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.avatar-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.avatar-opt {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: #FFFFFF;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.avatar-opt:hover {
  transform: scale(1.1);
}

.avatar-opt.active {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.btn-sm {
  padding: 8px 16px !important;
  font-size: 0.85rem !important;
}

/* ==========================================================================
   4자리 PIN 키패드 모달 스타일
   ========================================================================== */
.modal-pin-dialog {
  max-width: 360px;
  border-radius: 24px;
}

.pin-modal-header {
  border-bottom: none;
  padding: 16px 20px 8px;
}

.pin-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 24px 20px;
}

.pin-target-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.pin-target-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #EEF2FF;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  margin-bottom: 10px;
  animation: bounceSoft 1s infinite alternate ease-in-out;
}

@keyframes bounceSoft {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}

.pin-target-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.pin-target-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* PIN 도트 */
.pin-dots-container {
  display: flex;
  gap: 16px;
  margin: 14px 0 10px;
}

.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  background: #FFFFFF;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pin-dot.filled {
  background: var(--primary);
  border-color: var(--primary);
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

.pin-error-msg {
  color: #EF4444;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}

/* 흔들림 애니메이션 (오류 시) */
.shake-dots {
  animation: shakeAnimation 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shakeAnimation {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* 숫자 키패드 그리드 */
.pin-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 260px;
  margin-top: 6px;
}

.pin-key {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: #F8FAFC;
  font-family: var(--font-family);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pin-key:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
  transform: scale(1.04);
}

.pin-key:active {
  background: var(--primary-light);
  color: var(--primary);
  transform: scale(0.95);
}

.pin-key-fn {
  font-size: 1.15rem;
  color: var(--text-sub);
  background: #F1F5F9;
}

.pin-modal-footer {
  justify-content: center;
  border-top: none;
  padding: 8px 20px 18px;
  background: transparent;
}

/* ==========================================================================
   넷플릭스 스타일 "누가 공부하나요?" 프로필 게이트웨이 화면 (Phase 4)
   ========================================================================== */
.profile-gateway-view {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(ellipse at 50% 20%, #1E1B4B 0%, #0F172A 70%, #020617 100%);
  color: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 32px 20px;
  animation: gatewayFadeIn 0.35s ease-out;
}

/* PIN 인증 키패드 및 토스트 알림은 게이트웨이 화면(9999)보다 위에 떠야 함 */
#pinKeypadModal {
  z-index: 10005 !important;
}

#toastPopup {
  z-index: 10010 !important;
}

@keyframes gatewayFadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

.gateway-container {
  max-width: 920px;
  width: 100%;
  text-align: center;
  margin: auto;
}

.gateway-header {
  margin-bottom: 44px;
}

.gateway-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.gateway-logo .logo-icon {
  font-size: 1.35rem;
}

.gateway-logo .logo-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  background: linear-gradient(135deg, #A5B4FC 0%, #E0E7FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gateway-title {
  font-family: var(--font-family);
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0 0 10px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.gateway-subtitle {
  font-size: 1.05rem;
  color: #94A3B8;
  margin: 0;
  font-weight: 500;
}

/* 프로필 카드 그리드 */
.gateway-profiles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 24px;
}

.gateway-profile-card {
  background: rgba(30, 41, 59, 0.5);
  border: 1.5px solid rgba(148, 163, 184, 0.15);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 24px 20px 20px;
  width: 175px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.gateway-profile-card:hover {
  transform: translateY(-8px) scale(1.04);
  background: rgba(51, 65, 85, 0.7);
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 16px 32px -8px rgba(99, 102, 241, 0.35),
              0 0 0 1px rgba(129, 140, 248, 0.4);
}

.gateway-profile-card:active {
  transform: translateY(-3px) scale(0.99);
}

/* 아바타 원형 */
.gateway-avatar-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.25));
  border: 3px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

.gateway-profile-card:hover .gateway-avatar-wrap {
  border-color: #818CF8;
  box-shadow: 0 0 20px rgba(129, 140, 248, 0.5);
  transform: scale(1.08);
}

.gateway-avatar-emoji {
  font-size: 3rem;
  line-height: 1;
}

/* 프로필 이름 */
.gateway-profile-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

/* 역할/레벨 뱃지 */
.gateway-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.2);
  color: #CBD5E1;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.gateway-badge.badge-admin {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #FFFFFF;
  border: none;
}

.gateway-badge.badge-guest {
  background: linear-gradient(135deg, #06B6D4, #0284C7);
  color: #FFFFFF;
  border: none;
}

.gateway-badge.badge-student {
  background: rgba(99, 102, 241, 0.25);
  color: #C7D2FE;
  border-color: rgba(99, 102, 241, 0.4);
}

/* 손님 전용 프리패스 안내 힌트 */
.gateway-card-guest {
  border-color: rgba(6, 182, 212, 0.3);
}

.gateway-card-guest:hover {
  border-color: rgba(6, 182, 212, 0.8);
  box-shadow: 0 16px 32px -8px rgba(6, 182, 212, 0.4);
}

.gateway-card-guest .gateway-avatar-wrap {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(14, 165, 233, 0.25));
}

.gateway-hint-text {
  font-size: 0.72rem;
  color: #38BDF8;
  margin-top: 6px;
  font-weight: 600;
}

/* 6자리 PIN 도트 컨테이너 */
.pin-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 14px auto 12px;
}

.pin-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  background: #FFFFFF;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pin-dot.filled {
  background: var(--primary);
  border-color: var(--primary);
  transform: scale(1.18);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.45);
}

/* 반응형 미디어 쿼리 */
@media (max-width: 640px) {
  .gateway-title {
    font-size: 1.85rem;
  }
  .gateway-subtitle {
    font-size: 0.92rem;
  }
  .gateway-profiles-grid {
    gap: 16px;
  }
  .gateway-profile-card {
    width: 140px;
    padding: 18px 14px 16px;
  }
  .gateway-avatar-wrap {
    width: 78px;
    height: 78px;
  }
  .gateway-avatar-emoji {
    font-size: 2.35rem;
  }
  .gateway-profile-name {
    font-size: 1.05rem;
  }
}

/* 사이드바 프로필 박스 상단 헤더 및 우측 상단 로그아웃 버튼 */
.sidebar-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.sidebar-card-top-row .sidebar-avatar {
  margin-bottom: 0;
}

.sidebar-logout-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #64748B;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.sidebar-logout-top-btn:hover {
  background: #FEE2E2;
  color: #EF4444;
  border-color: #FCA5A5;
  transform: translateY(-1px);
}

.sidebar-logout-top-btn:active {
  transform: translateY(0);
}