/* ==============================
   고교학점플래너 CreditPlanner v3 - CSS
   학생 UI 집중 리뉴얼
   ============================== */

:root {
  --primary: #6C5CE7;
  --primary-light: #A29BFE;
  --primary-dark: #5A4BD1;
  --accent: #FF6B6B;
  --accent-warm: #FDCB6E;
  --success: #00B894;
  --warning: #F39C12;
  --danger: #E74C3C;
  --bg-dark: #0B0F18;
  --bg-card: #161B22;
  --bg-card-hover: #1C2333;
  --bg-input: #21262D;
  --bg-elevated: #1A1F2E;
  --text-primary: #F0F6FC;
  --text-secondary: #8B949E;
  --text-muted: #484F58;
  --border: #30363D;
  --border-light: #3D444D;
  --xp-gold: #FFD700;
  --streak-fire: #FF6347;
  --question-a: #74B9FF;
  --question-b: #A29BFE;
  --question-c: #FF6B6B;
  --teach-green: #00B894;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 50%;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 20px rgba(108,92,231,0.2);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif;
  background: var(--bg-dark);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
}

#prototype-wrapper { width: 100%; max-width: none; }

/* ==================== MODE SELECTOR ==================== */
/* ==================== LOGO STYLES ==================== */

/* Mode selector header logo */
#mode-header {
  display:flex; justify-content:center; margin-bottom:16px; padding-top:8px;
}
.mode-logo-row {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.95); padding:8px 20px; border-radius:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.mode-logo-img {
  height:32px; width:auto; object-fit:contain;
}
.mode-logo-text {
  display:flex; flex-direction:column;
}
.mode-logo-title {
  font-size:14px; font-weight:800; color:#1a1a2e;
  letter-spacing:-0.5px; line-height:1.2;
}
.mode-logo-sub {
  font-size:9px; color:#888; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
}

/* Onboarding logo - real image */
.onboarding-logo-img {
  width:200px; height:auto; object-fit:contain;
  margin:0 auto 20px; display:block;
  background:rgba(255,255,255,.95); padding:12px 24px; border-radius:16px;
  box-shadow:0 4px 24px rgba(0,0,0,.15);
  animation:logoFloat 3s ease-in-out infinite;
}

/* XP bar mini logo */
.xp-bar-logo {
  height:18px; width:auto; object-fit:contain;
  margin-right:6px; flex-shrink:0;
  background:rgba(255,255,255,.92); padding:2px 6px; border-radius:5px;
}

/* Profile academy badge */
.profile-academy-badge {
  display:flex; justify-content:center; margin-bottom:14px; padding-top:4px;
}
.profile-academy-logo {
  height:26px; width:auto; object-fit:contain;
  background:rgba(255,255,255,.92); padding:4px 14px; border-radius:8px;
  box-shadow:0 1px 6px rgba(0,0,0,.1);
}

/* Desk header logo (mentor/director) */
.desk-header-logo {
  height:38px; width:auto; object-fit:contain;
  flex-shrink:0;
  background:rgba(255,255,255,.95); padding:5px 12px; border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}

/* ==================== END LOGO STYLES ==================== */

#mode-selector { display:flex; gap:8px; margin-bottom:16px; justify-content:center; flex-wrap:wrap; }
.mode-btn {
  padding:10px 20px; border:2px solid var(--border); background:var(--bg-card);
  color:var(--text-secondary); border-radius:var(--radius-lg); cursor:pointer;
  font-size:14px; font-weight:600; transition:all 0.3s; font-family:inherit;
}
.mode-btn:hover { border-color:var(--primary-light); color:var(--text-primary); }
.mode-btn.active { border-color:var(--primary); background:var(--primary); color:white; box-shadow:0 4px 16px rgba(108,92,231,0.4); }

/* ==================== DEVICE PREVIEW SELECTOR ==================== */
#device-preview-selector {
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom:16px; flex-wrap:wrap;
}
.device-preview-label {
  font-size:12px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:1px;
}
.device-preview-btns {
  display:flex; gap:6px;
}
.device-preview-btn {
  display:flex; align-items:center; gap:6px;
  padding:7px 14px; border:1.5px solid var(--border); background:var(--bg-card);
  color:var(--text-secondary); border-radius:var(--radius-md); cursor:pointer;
  font-size:12px; font-weight:600; transition:all 0.25s; font-family:inherit;
}
.device-preview-btn i { font-size:14px; }
.device-preview-btn:hover { border-color:var(--primary-light); color:var(--text-primary); background:var(--bg-card-hover); }
.device-preview-btn.active {
  border-color:var(--accent); background:rgba(255,107,107,0.15); color:var(--accent);
  box-shadow:0 2px 12px rgba(255,107,107,0.2);
}

/* Device preview frame wrapper */
#device-preview-frame {
  display:flex; justify-content:center; align-items:flex-start;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Phone preview mode */
#device-preview-frame.preview-phone {
  padding:20px 0;
}
#device-preview-frame.preview-phone #tablet-container {
  width:390px !important; max-width:390px !important;
  height:844px !important; min-height:auto !important;
  border-radius:44px !important; border:3px solid #2D333B !important;
  box-shadow:var(--shadow-lg), 0 0 80px rgba(108,92,231,0.08) !important;
  overflow:hidden;
}
#device-preview-frame.preview-phone #tablet-status-bar {
  padding:14px 28px 8px !important;
}
#device-preview-frame.preview-phone .tablet-status-title { display:none !important; }
#device-preview-frame.preview-phone .tablet-status-logo { display:none !important; }
#device-preview-frame.preview-phone #tablet-content {
  height:calc(844px - 42px) !important;
  flex:none !important;
  padding-top:0 !important;
}
#device-preview-frame.preview-phone #tablet-content .tab-content { padding:0 12px 16px !important; }
#device-preview-frame.preview-phone #tablet-content .form-body { padding:12px 16px 32px !important; }
#device-preview-frame.preview-phone #tablet-content .screen-header { padding:14px 16px !important; }
#device-preview-frame.preview-phone #tablet-content .record-type-grid {
  grid-template-columns:repeat(2, 1fr) !important;
}
/* phone preview: 사이드바 숨김 */
#device-preview-frame.preview-phone #tablet-sidebar { display: none !important; }
#device-preview-frame.preview-phone #tablet-content .fab {
  position:absolute !important; right:16px !important; bottom:80px !important;
}
#device-preview-frame.preview-phone #tablet-content .onboarding-screen {
  max-width:100% !important; padding:24px 20px !important;
}
#device-preview-frame.preview-phone #tablet-content .home-cards-grid {
  display:block !important;
}
#device-preview-frame.preview-phone #tablet-content .home-cards-grid > .card {
  margin:0 16px 12px !important;
}
#device-preview-frame.preview-phone #tablet-content .act-add-type-grid {
  grid-template-columns:repeat(2, 1fr) !important;
}
#device-preview-frame.preview-phone #tablet-content .full-screen { max-width:100% !important; }
#device-preview-frame.preview-phone #tablet-content .xp-bar-container { padding:8px 16px !important; }
#device-preview-frame.preview-phone #tablet-content .planner-timeline { max-width:100% !important; }
#device-preview-frame.preview-phone #tablet-content .planner-two-col {
  grid-template-columns:1fr !important;
}
#device-preview-frame.preview-phone #tablet-content .planner-col-timeline {
  border-right:none !important;
  border-bottom:1px solid var(--border) !important;
}
#device-preview-frame.preview-phone #tablet-content .planner-col-todo {
  position:static !important;
  padding:12px !important;
}
#device-preview-frame.preview-phone #tablet-content .profile-card { max-width:100% !important; }

/* Tablet preview mode */
#device-preview-frame.preview-tablet {
  padding:20px 0;
}
#device-preview-frame.preview-tablet #tablet-container {
  width:768px !important; max-width:768px !important;
  height:1024px !important; min-height:auto !important;
  border-radius:24px !important; border:2px solid var(--border) !important;
  box-shadow:var(--shadow-lg) !important;
  overflow:hidden;
}
#device-preview-frame.preview-tablet #tablet-content {
  height:calc(1024px - 42px) !important;
  flex:none !important;
  padding-top:0 !important;
}
#device-preview-frame.preview-tablet #tablet-content .home-cards-grid {
  display:grid !important; grid-template-columns:repeat(2, 1fr) !important; gap:12px !important;
}
#device-preview-frame.preview-tablet #tablet-content .home-cards-grid > .card {
  margin:0 !important;
}
#device-preview-frame.preview-tablet #tablet-content .record-type-grid {
  grid-template-columns:repeat(3, 1fr) !important;
}
#device-preview-frame.preview-tablet #tablet-content .record-type-card {
  flex-direction:column !important; text-align:center !important; padding:20px 12px !important;
}
#device-preview-frame.preview-tablet #tablet-content .record-type-icon {
  width:56px !important; height:56px !important; font-size:24px !important; margin:0 auto 10px !important;
}
/* tablet portrait preview: 사이드바 축소 (아이콘만) */
#device-preview-frame.preview-tablet #tablet-sidebar {
  width: 56px !important; min-width: 56px !important; max-width: 56px !important;
}
#device-preview-frame.preview-tablet .sidebar-logo-text { display: none !important; }
#device-preview-frame.preview-tablet .sidebar-nav-label { display: none !important; }
#device-preview-frame.preview-tablet .sidebar-nav-item { flex-direction: column !important; padding: 10px 4px !important; gap: 3px !important; }
#device-preview-frame.preview-tablet .sidebar-nav-item i { font-size: 16px !important; }
#device-preview-frame.preview-tablet .sidebar-logo { padding: 0 !important; align-items: center !important; justify-content: center !important; }
#device-preview-frame.preview-tablet .sidebar-user-name { display: none !important; }
#device-preview-frame.preview-tablet .sidebar-streak { display: none !important; }
#device-preview-frame.preview-tablet .sidebar-logout span { display: none !important; }
#device-preview-frame.preview-tablet .sidebar-footer { padding: 8px 4px !important; }
#device-preview-frame.preview-tablet .sidebar-user { flex-direction: column !important; }
#device-preview-frame.preview-tablet #tablet-content .onboarding-screen {
  max-width:none !important; margin:0 !important; padding:40px 32px !important;
}
#device-preview-frame.preview-tablet #tablet-content .full-screen { max-width:none !important; margin:0 !important; }
#device-preview-frame.preview-tablet #tablet-content .profile-card { max-width:none !important; margin:0 !important; }
#device-preview-frame.preview-tablet #tablet-content .activity-type-grid,
#device-preview-frame.preview-tablet #tablet-content .act-add-type-grid { grid-template-columns:repeat(3, 1fr) !important; }
#device-preview-frame.preview-tablet #tablet-content .growth-summary-grid { grid-template-columns:repeat(4, 1fr) !important; }
#device-preview-frame.preview-tablet #tablet-content .portfolio-stats { grid-template-columns:repeat(4, 1fr) !important; }
#device-preview-frame.preview-tablet #tablet-content .fab {
  position:absolute !important; right:32px !important; bottom:90px !important;
}
#device-preview-frame.preview-tablet #tablet-content .planner-timeline { max-width:none !important; margin:0 !important; }

/* ==================== TABLET LANDSCAPE preview mode ==================== */
#device-preview-frame.preview-tablet-landscape {
  padding: 20px 0;
}
#device-preview-frame.preview-tablet-landscape #tablet-container {
  width: 1194px !important; max-width: 1194px !important;
  height: 834px !important; min-height: auto !important;
  border-radius: 20px !important; border: 2px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
  flex-direction: row !important;
}
#device-preview-frame.preview-tablet-landscape #tablet-status-bar {
  display: none !important;
}
/* tablet-landscape preview에서 사이드바 슬림 표시 */
#device-preview-frame.preview-tablet-landscape #tablet-sidebar {
  width: 120px !important; min-width: 120px !important;
  height: 834px !important;
}
#device-preview-frame.preview-tablet-landscape .sidebar-logo {
  padding: 0 8px !important; align-items: center !important; justify-content: flex-start !important;
  height: 52px !important; min-height: 52px !important; max-height: 52px !important;
}
#device-preview-frame.preview-tablet-landscape .sidebar-logo-img {
  height: 34px !important;
}
#device-preview-frame.preview-tablet-landscape .sidebar-nav-item { flex-direction: row !important; padding: 9px 8px !important; gap: 8px !important; justify-content: flex-start !important; }
#device-preview-frame.preview-tablet-landscape .sidebar-nav-label { display: block !important; font-size: 15px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#device-preview-frame.preview-tablet-landscape .sidebar-nav-item i { font-size: 22px !important; min-width: 22px !important; }
#device-preview-frame.preview-tablet-landscape .sidebar-user { flex-direction: row !important; gap: 6px !important; align-items: center !important; }
#device-preview-frame.preview-tablet-landscape .sidebar-user-name { display: block !important; font-size: 16px; font-weight: 900; color: #FFFFFF; max-width: none; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
#device-preview-frame.preview-tablet-landscape .sidebar-streak { display: block !important; }
#device-preview-frame.preview-tablet-landscape .sidebar-footer { align-items: stretch !important; padding: 0 !important; gap: 0 !important; background: linear-gradient(180deg, rgba(108,92,231,0.15) 0%, transparent 100%) !important; border-top: 2px solid rgba(108,92,231,0.35) !important; }
#device-preview-frame.preview-tablet-landscape .sidebar-logout span { display: inline !important; font-size: 13px; font-weight: 700; }
#device-preview-frame.preview-tablet-landscape .sidebar-xp-bar { height: 5px !important; }
#device-preview-frame.preview-tablet-landscape .sidebar-badge { position: static !important; margin-left: auto; }
#device-preview-frame.preview-tablet-landscape #tablet-main-area {
  flex: 1 !important;
  height: 834px !important;
}

/* 콘텐츠 레이아웃 */
#device-preview-frame.preview-tablet-landscape #tablet-content .tab-content {
  padding: 0 0 20px !important;
  max-width: 100% !important;
}
#device-preview-frame.preview-tablet-landscape #tablet-content .xp-bar-container {
  padding: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  align-items: center !important;
}

/* 홈 카드: 3컬럼 */
#device-preview-frame.preview-tablet-landscape #tablet-content .home-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
}
#device-preview-frame.preview-tablet-landscape #tablet-content .home-cards-grid > .card {
  margin: 0 !important;
  border-radius: 0 !important;
}
#device-preview-frame.preview-tablet-landscape #tablet-content .home-cards-grid > .card:nth-child(2) {
  grid-column: span 2 !important;
}

/* 기록 타입 3컬럼 */
#device-preview-frame.preview-tablet-landscape #tablet-content .record-type-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
}

/* 풀스크린 넓게 */
#device-preview-frame.preview-tablet-landscape #tablet-content .full-screen {
  max-width: none !important;
  margin: 0 !important;
}
#device-preview-frame.preview-tablet-landscape #tablet-content .screen-header {
  padding: 14px 0 !important;
}
#device-preview-frame.preview-tablet-landscape #tablet-content .form-body {
  padding: 16px 0 30px !important;
}

/* 성장/포트폴리오 4컬럼 */
#device-preview-frame.preview-tablet-landscape #tablet-content .growth-summary-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
#device-preview-frame.preview-tablet-landscape #tablet-content .portfolio-stats {
  grid-template-columns: repeat(4, 1fr) !important;
}
#device-preview-frame.preview-tablet-landscape #tablet-content .act-add-type-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* 플래너 넓게 */
#device-preview-frame.preview-tablet-landscape #tablet-content .planner-timeline {
  max-width: 100% !important;
  margin: 0 !important;
}

/* 프로필/온보딩 */
#device-preview-frame.preview-tablet-landscape #tablet-content .profile-card {
  max-width: none !important;
  margin: 0 !important;
}
#device-preview-frame.preview-tablet-landscape #tablet-content .onboarding-screen {
  max-width: none !important;
  margin: 0 !important;
  padding: 30px 40px !important;
}

/* FAB */
#device-preview-frame.preview-tablet-landscape #tablet-content .fab {
  position: absolute !important;
  right: 20px !important;
  bottom: 20px !important;
  left: auto !important;
  width: 48px !important;
  height: 48px !important;
  font-size: 18px !important;
  z-index: 201 !important;
}

/* 미기록 배너 */
#device-preview-frame.preview-tablet-landscape .unrecorded-warn-banner {
  margin: 0 0 14px !important;
}

/* PC preview mode - no frame wrapper needed, uses default behavior */
#device-preview-frame.preview-pc {
  /* PC: normal rendering */
}

/* ==================== TABLET CONTAINER + SIDEBAR LAYOUT ==================== */
#tablet-container {
  width:100%; max-width:100%; margin:0 auto;
  background:var(--bg-dark);
  overflow:hidden; min-height:80vh;
  display:flex; flex-direction:row;
  position: relative;
}
#tablet-main-area {
  background: var(--bg-dark);
}
#tablet-content {
  background: var(--bg-dark);
}

/* 모바일/태블릿에서 컨테이너 풀스크린 */
@media (max-width: 1279px) {
  body { padding:0; background:var(--bg-dark) !important; }
  #prototype-wrapper { max-width:100%; }
  #tablet-container {
    max-width:100%; border-radius:0; border:none;
    box-shadow:none; min-height:100vh; min-height:100dvh;
  }
}

/* ==================== SIDEBAR ==================== */
#tablet-sidebar {
  display: flex;
  flex-direction: column;
  width: 90px;
  min-width: 90px;
  max-width: 90px;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-dark);
  border-right: 1px solid rgba(48, 54, 61, 0.5);
  position: relative;
  flex-shrink: 0;
  z-index: 200;
  overflow-x: visible;
  overflow-y: auto;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 0;
  background: var(--bg-dark);
}

/* 사이드바 로고 */
.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-bottom: 1px solid rgba(48, 54, 61, 0.4);
  margin-bottom: 6px;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.sidebar-logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
  background: rgba(255,255,255,.95);
  padding: 2px 6px;
  border-radius: 5px;
}

/* 사이드바 메인 네비게이션 */
.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 6px;
  justify-content: center;
}

.sidebar-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  gap: 3px;
  padding: 10px 4px;
  border-radius: 12px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  font-family: inherit;
}

.sidebar-nav-item i {
  font-size: 32px;
  transition: all 0.15s ease;
}

.sidebar-nav-item:hover {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
}

.sidebar-nav-item.active {
  background: rgba(108, 92, 231, 0.15);
  color: var(--primary-light);
}

.sidebar-nav-item.active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 28px;
  background: var(--primary);
  border-radius: 0 4px 4px 0;
}

.sidebar-nav-item:active i {
  transform: scale(0.9);
}

.sidebar-nav-label {
  font-size: 16px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: visible;
}

/* 사이드바 뱃지 */
.sidebar-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ========== 사이드바 하단 프로필 카드 (FULL-WIDTH CARD DESIGN) ========== */
.sidebar-footer {
  padding: 0 0 24px;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: linear-gradient(180deg, rgba(108,92,231,0.18) 0%, rgba(108,92,231,0.06) 100%);
  border-top: 2px solid rgba(108,92,231,0.45);
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.sidebar-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 8px 10px;
  width: 100%;
  background: rgba(108,92,231,0.08);
  border-bottom: 1px solid rgba(108,92,231,0.15);
}
.sidebar-user-emoji { font-size: 44px; filter: drop-shadow(0 3px 8px rgba(108,92,231,0.4)); }
.sidebar-user-name {
  font-size: 22px;
  font-weight: 900;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
  text-align: center;
  letter-spacing: -0.3px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.sidebar-xp {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 10px 8px;
}
.sidebar-xp-level {
  font-size: 18px;
  font-weight: 900;
  color: var(--xp-gold);
  text-shadow: 0 0 12px rgba(255,215,0,0.5);
}
.sidebar-xp-bar {
  width: 100%;
  height: 8px;
  background: rgba(33,38,45,0.8);
  border-radius: 4px;
  overflow: hidden;
}
.sidebar-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--xp-gold), #FFA502);
  border-radius: 4px;
  transition: width 0.6s ease;
  box-shadow: 0 0 10px rgba(255,215,0,0.5);
}

.sidebar-streak {
  font-size: 16px;
  font-weight: 900;
  color: var(--streak-fire);
  text-align: center;
  padding: 4px 0;
}

.sidebar-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  border: none;
  background: rgba(231,76,60,0.08);
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
  border-top: 1px solid rgba(231,76,60,0.15);
  transition: all 0.2s;
  font-family: inherit;
  width: 100%;
  margin: 0;
}
.sidebar-logout span { display: none; }
.sidebar-logout:hover {
  background: rgba(231, 76, 60, 0.2);
  color: var(--danger);
}

/* ==================== TABLET MAIN AREA ==================== */
#tablet-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#tablet-status-bar {
  display:none; /* 사이드바에 로고가 있으므로 기본 숨김 */
}
.tablet-status-left {
  display:flex; align-items:center; gap:8px;
}
.tablet-status-logo {
  height:18px; width:auto; object-fit:contain;
  background:rgba(255,255,255,.92); padding:2px 6px; border-radius:5px;
}
.tablet-status-title {
  font-size:13px; font-weight:700; color:var(--text-secondary);
}
.tablet-status-right {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text-muted);
}
.tablet-status-time {
  font-weight:600; color:var(--text-secondary); margin-left:4px;
}
#tablet-content {
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
  scroll-behavior:smooth;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
#tablet-content::-webkit-scrollbar { width:6px; }
#tablet-content::-webkit-scrollbar-track { background:transparent; }
#tablet-content::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ==================== LANDSCAPE: 사이드바 확장 (아이콘+텍스트) ==================== */
@media (orientation: landscape) and (min-width: 768px) and (min-height: 480px) {
  #tablet-sidebar {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    overflow-x: visible !important;
  }
  .sidebar-logo {
    padding: 0 10px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .sidebar-logo-img {
    height: 36px;
  }
  .sidebar-nav { padding: 4px 6px; }
  .sidebar-nav-item {
    flex-direction: row !important;
    padding: 10px 10px;
    gap: 10px;
    justify-content: flex-start;
  }
  .sidebar-nav-item i { font-size: 26px; min-width: 26px; }
  .sidebar-nav-label {
    font-size: 18px;
    font-weight: 600;
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar-nav-item.active::before { left: -6px; height: 28px; width: 4px; }
  .sidebar-badge {
    top: auto;
    right: 4px;
    position: static;
    margin-left: auto;
    min-width: 14px;
    height: 14px;
    font-size: 8px;
    padding: 0 3px;
  }
  .sidebar-footer {
    padding: 0;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(180deg, rgba(108,92,231,0.15) 0%, transparent 100%);
    border-top: 2px solid rgba(108,92,231,0.35);
    width: 100%;
  }
  .sidebar-user {
    flex-direction: row !important;
    gap: 10px;
    align-items: center !important;
    padding: 14px 12px 10px;
    background: rgba(108,92,231,0.06);
    border-bottom: 1px solid rgba(108,92,231,0.12);
  }
  .sidebar-user-emoji { font-size: 30px; }
  .sidebar-user-name {
    font-size: 20px;
    font-weight: 900;
    max-width: none;
    display: block !important;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  }
  .sidebar-xp { align-items: stretch; padding: 8px 12px; }
  .sidebar-xp-level { font-size: 16px; font-weight: 900; }
  .sidebar-xp-bar { width: 100%; height: 6px; }
  .sidebar-streak { font-size: 15px; font-weight: 900; display: block !important; padding: 0 12px 6px; }
  .sidebar-logout {
    justify-content: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 0;
    border-top: 1px solid rgba(231,76,60,0.15);
    background: rgba(231,76,60,0.06);
    font-size: 16px;
    font-weight: 700;
  }
  .sidebar-logout span { display: inline !important; font-size: 16px; font-weight: 700; }
}

/* ==================== TABLET LAYOUT ENHANCEMENTS ==================== */

/* 태블릿에서 탭 콘텐츠 패딩 확대 */
#tablet-content .tab-content { padding:0 0 20px; }
#tablet-content .form-body { padding:16px 0 40px; }

/* 태블릿 XP 바 */
#tablet-content .xp-bar-container {
  padding:0 12px;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  align-items: center;
}

/* 태블릿 홈 인사 영역 확대 */
#tablet-content .home-greeting h2 { font-size:34px; font-weight:900; color:#FFFFFF; }
#tablet-content .home-greeting p { font-size:19px; font-weight:600; color:var(--text-secondary); }

/* 태블릿 카드 넓은 버전 */
#tablet-content .card { padding:18px; border-radius:0; }

/* 태블릿 기록 타입 그리드 → 3x2 */
#tablet-content .record-type-grid {
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:0;
}
#tablet-content .record-type-card {
  flex-direction:column; text-align:center;
  padding:20px 12px;
}
#tablet-content .record-type-icon {
  width:56px; height:56px; font-size:24px;
  margin:0 auto 10px;
}
.record-type-info h3 { font-size:16px; font-weight:900; color:#FFFFFF; }
#tablet-content .record-type-info p { font-size:14px; font-weight:600; }

/* 태블릿 온보딩 */
#tablet-content .onboarding-screen {
  max-width:none; margin:0; padding:40px 32px;
}
#tablet-content .onboarding-logo-img { width:240px; }

/* 태블릿 기록 화면 */
#tablet-content .full-screen { max-width:none; margin:0; }
#tablet-content .screen-header { padding:16px 0; }
#tablet-content .screen-header h1 { font-size:32px; font-weight:900; color:#FFFFFF; }

/* 태블릿 프로필 */
#tablet-content .profile-card { max-width:none; margin:0; }
#tablet-content .profile-avatar { width:88px; height:88px; font-size:42px; }
#tablet-content .profile-name { font-size:24px; }

/* 태블릿 그리드 확장 */
#tablet-content .activity-type-grid,
#tablet-content .act-add-type-grid { grid-template-columns:repeat(3, 1fr); }

/* 태블릿 활동 카드 */
#tablet-content .act-card { padding:16px; }
#tablet-content .act-card-title { font-size:23px; font-weight:900; color:#FFFFFF; }

/* 태블릿 필터 탭 */
#tablet-content .act-filter-tabs { padding:6px 0 14px; }
#tablet-content .act-filter-tab { padding:10px 18px; font-size:13px; }

/* 태블릿 요약 배너 */
#tablet-content .act-summary-banner { padding:16px 0; }
#tablet-content .act-summary-num { font-size:30px; font-weight:900; color:#FFFFFF; }

/* 태블릿 시험 카드 */
#tablet-content .exam-card { padding:16px; }

/* 태블릿 플래너 타임라인 */
#tablet-content .planner-timeline { max-width:none; margin:0; width:100%; }

/* 태블릿 과제 관련 */
#tablet-content .assignment-mini-row { padding:14px 0; }

/* 태블릿 FAB 위치 조정 */
#tablet-content .fab {
  position:fixed; right:24px; bottom:24px; width:54px; height:54px; font-size:20px;
}

/* 태블릿 탐구보고서 */
#tablet-content .rpt-header { padding:20px 0 14px; }
#tablet-content .rpt-title { font-size:26px; font-weight:900; color:#FFFFFF; }
#tablet-content .rpt-stats-row { gap:16px; }
#tablet-content .rpt-content { padding:16px 0; }

/* 태블릿 포트폴리오 */
#tablet-content .portfolio-stats { grid-template-columns:repeat(4, 1fr); }

/* 태블릿(768px+) 홈 카드 그리드 → 2컬럼 */
@media (min-width: 768px) {
  #tablet-content .home-cards-grid {
    display:grid; grid-template-columns:repeat(2, 1fr); gap:0;
    align-items: stretch;
  }
  #tablet-content .home-cards-grid > .card { margin:0 !important; display:flex; flex-direction:column; border-radius:0 !important; }
}

/* 태블릿 성장 탭 */
#tablet-content .growth-summary-grid { grid-template-columns:repeat(4, 1fr); }

/* 태블릿 질문 코칭 패널 확대 */
#tablet-content .qa-panel { max-width:none; width:100%; }

/* ==================== PHONE FRAME ==================== */
#phone-container { display:flex; justify-content:center; }
#phone-frame {
  width:390px; height:844px; background:var(--bg-dark); border-radius:44px;
  border:3px solid #2D333B; overflow:hidden; position:relative;
  box-shadow: var(--shadow-lg), 0 0 80px rgba(108,92,231,0.08);
}
#status-bar {
  display:flex; justify-content:space-between; padding:14px 28px 8px;
  font-size:13px; font-weight:600; background:var(--bg-dark);
  position:sticky; top:0; z-index:100;
}
#app-content {
  height:calc(100% - 42px); overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  scroll-behavior:smooth;
}
#app-content::-webkit-scrollbar { display:none; }

/* ==================== DESKTOP FRAME ==================== */
#desktop-container { width:100%; max-width:none; margin:0; }
#desktop-content {
  background:var(--bg-dark); border-radius:var(--radius-xl);
  border:2px solid var(--border); min-height:700px; overflow:hidden;
  box-shadow:var(--shadow-lg);
}

/* ==================== COMMON UI ==================== */
.tab-content { padding-bottom:100px; }
.full-screen { min-height:100%; }
.form-body { padding:0 0 40px; }
.form-label {
  display:block; font-size:17px; font-weight:800;
  color:var(--text-secondary); margin-bottom:6px; margin-top:12px;
}
.form-input {
  width:100%; padding:12px 14px; border-radius:10px;
  font-size:15px; color:var(--text-main);
  background:var(--bg-input, rgba(255,255,255,0.06));
  border:1px solid rgba(255,255,255,0.08);
  outline:none; transition:border-color 0.2s;
  box-sizing:border-box;
}
.form-input:focus {
  border-color:var(--primary);
  background:rgba(255,255,255,0.08);
}
.form-input::placeholder { color:var(--text-muted); opacity:0.5; }
/* date input 다크테마 */
.form-input[type="date"] {
  color-scheme:dark;
}

/* Screen Header */
.screen-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0 12px; background:var(--bg-dark); position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.screen-header h1 { font-size:32px; font-weight:900; color:#FFFFFF; }
.back-btn {
  background:none; border:none; color:var(--text-primary); font-size:18px; cursor:pointer;
  padding:6px 10px; border-radius:var(--radius-sm); transition:all var(--transition-fast);
}
.back-btn:hover { background:var(--bg-input); }
.back-btn:active { transform:scale(0.9); }
.header-badge { background:var(--primary); color:white; font-size:11px; padding:4px 10px; border-radius:20px; font-weight:600; }

/* Card */
.card {
  background:var(--bg-card); border-radius:0; padding:16px;
  margin:0; border:none; border-bottom:1px solid var(--border); transition:all var(--transition-normal);
}
.card:hover { border-bottom-color:var(--border-light); }
.card-gradient-purple {
  background:linear-gradient(135deg, rgba(108,92,231,0.12), rgba(162,155,254,0.05));
  border-color:rgba(108,92,231,0.25);
}
.card-gradient-green {
  background:linear-gradient(135deg, rgba(0,184,148,0.08), rgba(0,206,201,0.04));
  border-color:rgba(0,184,148,0.25);
}
.card-header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.card-title { font-size:21px; font-weight:900; color:#FFFFFF; display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.card-header-row .card-title { margin-bottom:0; }
.card-subtitle { font-size:16px; color:var(--text-secondary); font-weight:700; }
.card-link {
  background:none; border:none; color:var(--primary-light); font-size:15px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:all var(--transition-fast);
}
.card-link:hover { color:var(--primary); }

/* Buttons */
.btn-primary {
  width:100%; padding:14px; background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:white; border:none; border-radius:var(--radius-md); font-size:16px;
  font-weight:700; cursor:pointer; transition:all var(--transition-normal); font-family:inherit;
  position:relative; overflow:hidden;
}
.btn-primary::after {
  content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity:0; transition:opacity var(--transition-fast);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(108,92,231,0.4); }
.btn-primary:hover::after { opacity:1; }
.btn-primary:active { transform:scale(0.98); }
.btn-glow { box-shadow:0 0 20px rgba(108,92,231,0.3); animation:pulseGlow 2s ease-in-out infinite; }

.btn-secondary {
  padding:10px 16px; background:var(--bg-input); color:var(--text-primary);
  border:1px solid var(--border); border-radius:var(--radius-md); font-size:14px;
  font-weight:600; cursor:pointer; font-family:inherit; transition:all var(--transition-fast);
}
.btn-secondary:hover { border-color:var(--primary); background:rgba(108,92,231,0.1); }
.btn-secondary:active { transform:scale(0.97); }
.btn-ghost {
  padding:10px 16px; background:none; border:none; color:var(--text-secondary); font-size:14px;
  cursor:pointer; font-family:inherit; transition:all var(--transition-fast);
}
.btn-ghost:hover { color:var(--text-primary); }

/* Input */
.input-field {
  width:100%; padding:12px 16px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius-md); color:var(--text-primary); font-size:14px;
  font-family:inherit; outline:none; transition:all var(--transition-normal);
}
.input-field:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(108,92,231,0.15); }
.input-field::placeholder { color:var(--text-muted); }
textarea.input-field { resize:none; min-height:60px; line-height:1.6; }

.input-with-icon { position:relative; }
.input-with-icon i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:14px; }

.field-group { margin-bottom:20px; }
.field-label { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; display:block; }
.field-hint { color:var(--primary-light); font-weight:500; font-size:11px; }

/* Chips */
.chip {
  display:inline-flex; align-items:center; padding:7px 14px; border-radius:20px;
  font-size:13px; font-weight:600; cursor:pointer; transition:all var(--transition-fast);
  border:1.5px solid var(--border); background:var(--bg-card); color:var(--text-secondary);
  font-family:inherit;
}
.chip:hover { border-color:var(--primary-light); }
.chip.active { border-color:var(--primary); background:rgba(108,92,231,0.15); color:var(--primary-light); }
.chip:active { transform:scale(0.95); }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; }

/* Progress Bar */
.progress-bar { height:8px; background:var(--bg-input); border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; border-radius:4px; transition:width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.level-fill { background:linear-gradient(90deg, var(--xp-gold), #FFA502); }

/* XP Badge */
.xp-badge-sm {
  font-size:11px; color:var(--xp-gold); font-weight:700; padding:3px 8px;
  background:rgba(255,215,0,0.1); border-radius:12px;
  animation:subtleShine 3s ease-in-out infinite;
}

/* ==================== BOTTOM NAV (legacy - 사이드바로 대체됨) ==================== */
/* bottom-nav/nav-item은 더이상 렌더링되지 않음. sidebar 클래스 사용 */

/* FAB */
.fab {
  position:fixed; bottom:20px; right:20px; width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--accent)); color:white; border:none;
  font-size:22px; cursor:pointer; box-shadow:0 4px 20px rgba(108,92,231,0.5);
  z-index:90; display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-normal);
}
.fab:hover { transform:scale(1.1) rotate(90deg); }
.fab:active { transform:scale(0.95); }

/* ==================== XP BAR ==================== */
.xp-bar-container {
  display:flex; align-items:center; gap:8px; padding:0 12px;
  background:rgba(22, 27, 34, 0.6); border-bottom:1px solid rgba(48, 54, 61, 0.4);
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  box-sizing: border-box;
  flex-shrink: 0;
  line-height: 1;
}
.xp-level { font-size:17px; font-weight:900; color:var(--xp-gold); white-space:nowrap; text-shadow:0 0 8px rgba(255,215,0,0.3); }
.xp-bar { flex:1; height:5px; background:var(--bg-input); border-radius:3px; overflow:hidden; }
.xp-bar-fill { height:100%; background:linear-gradient(90deg, var(--xp-gold), #FFA502); border-radius:3px; transition:width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.xp-text { font-size:16px; color:var(--text-primary); white-space:nowrap; font-weight:700; }
.streak-badge {
  display:inline-flex; align-items:center; padding:2px 8px; background:rgba(255,99,71,0.15);
  border-radius:12px; font-size:13px; font-weight:700; color:var(--streak-fire);
}

/* ==================== XP POPUP ==================== */
.xp-popup-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:999; cursor:pointer;
  animation:overlayIn 0.2s ease;
}
.xp-popup {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
  background:var(--bg-card); border:2px solid var(--xp-gold); border-radius:var(--radius-2xl);
  padding:32px 40px; text-align:center; z-index:1000;
  box-shadow:0 0 60px rgba(255,215,0,0.3); animation:xpPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes xpPopIn { 0%{transform:translate(-50%,-50%) scale(0);opacity:0} 100%{transform:translate(-50%,-50%) scale(1);opacity:1} }
@keyframes overlayIn { from{opacity:0} to{opacity:1} }
.xp-popup-icon { font-size:40px; margin-bottom:4px; animation:popBounce 0.5s ease 0.3s both; }
.xp-popup-amount {
  font-size:36px; font-weight:900; color:var(--xp-gold);
  text-shadow:0 0 20px rgba(255,215,0,0.5);
  animation:countUp 0.4s ease 0.2s both;
}
.xp-popup-label { font-size:14px; color:var(--text-secondary); margin-top:4px; }

/* ==================== ONBOARDING ==================== */
.onboarding-screen { display:flex; flex-direction:column; min-height:100%; padding:20px 24px 30px; }
.onboarding-progress { height:4px; background:var(--bg-input); border-radius:2px; margin-bottom:20px; overflow:hidden; }
.onboarding-progress-fill { height:100%; background:linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius:2px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.onboarding-step { font-size:12px; color:var(--primary-light); font-weight:600; margin-bottom:8px; }
.onboarding-title { font-size:24px; font-weight:800; margin-bottom:8px; line-height:1.3; }
.onboarding-desc { font-size:14px; color:var(--text-secondary); margin-bottom:28px; line-height:1.6; }

.onboarding-logo { text-align:center; margin-bottom:32px; }
.logo-circle {
  width:80px; height:80px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  display:flex; align-items:center; justify-content:center; font-size:36px; color:white;
  box-shadow:0 8px 32px rgba(108,92,231,0.4);
  animation:logoFloat 3s ease-in-out infinite;
  /* Hidden by default - replaced by real logo image */
  display:none;
}
.onboarding-logo h2 {
  font-size:28px; font-weight:900;
  background:linear-gradient(135deg, var(--primary-light), var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.onboarding-logo p { color:var(--text-secondary); font-size:13px; margin-top:4px; }

/* Career Grid */
.career-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.career-btn {
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px;
  background:var(--bg-input); border:1.5px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-normal); font-family:inherit;
}
.career-btn:hover, .career-btn.active { border-color:var(--primary); background:rgba(108,92,231,0.15); transform:translateY(-2px); }
.career-btn.active .career-name { color:var(--primary-light); }
.career-btn:active { transform:scale(0.95); }
.career-icon { font-size:24px; }
.career-name { font-size:12px; font-weight:600; color:var(--text-secondary); }

.grid-select-btn {
  padding:12px 8px; background:var(--bg-input); border:1.5px solid var(--border);
  border-radius:var(--radius-md); color:var(--text-secondary); font-size:13px; font-weight:600;
  cursor:pointer; text-align:center; transition:all var(--transition-fast); font-family:inherit;
}
.grid-select-btn:hover, .grid-select-btn.active { border-color:var(--primary); background:rgba(108,92,231,0.15); color:var(--primary-light); }

/* Timetable Editor */
.tt-editor { display:grid; grid-template-columns:32px repeat(5, 1fr); gap:3px; font-size:10px; }
.tt-editor-header { font-weight:700; text-align:center; padding:6px 2px; color:var(--text-muted); font-size:11px; }
.tt-editor-period { font-weight:700; text-align:center; padding:6px 2px; color:var(--text-muted); display:flex; align-items:center; justify-content:center; }
.tt-editor-cell {
  padding:7px 2px; text-align:center; background:var(--bg-input); border-radius:6px;
  cursor:pointer; transition:all var(--transition-fast); font-weight:600; color:var(--text-secondary); border:1px solid transparent;
}
.tt-editor-cell:hover { border-color:var(--primary); transform:scale(1.05); }
.tt-editor-cell.filled { font-weight:700; }

/* Guide Cards */
.guide-card {
  display:flex; align-items:center; gap:14px; padding:14px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  margin-bottom:10px; transition:all var(--transition-normal);
}
.guide-card:hover { border-color:var(--primary-light); transform:translateX(4px); }
.guide-icon-circle { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.guide-content h3 { font-size:14px; font-weight:700; margin-bottom:2px; }
.guide-content p { font-size:12px; color:var(--text-secondary); }
.guide-bottom-hint {
  text-align:center; font-size:13px; color:var(--xp-gold); font-weight:600;
  margin-bottom:12px; display:flex; align-items:center; justify-content:center; gap:6px;
}

/* ==================== HOME TAB ==================== */
.home-greeting { display:flex; justify-content:space-between; align-items:center; }
.home-greeting h2 { font-size:34px; font-weight:900; color:#FFFFFF; }
.home-greeting p { font-size:19px; color:var(--text-secondary); margin-top:14px; font-weight:600; }
.home-date {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:64px; min-height:64px; padding:8px 12px;
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:16px; box-sizing:border-box;
}
.date-day { font-size:32px; font-weight:900; color:#FFFFFF; line-height:1.1; }
.date-month { font-size:12px; color:var(--text-secondary); font-weight:700; white-space:nowrap; margin-top:2px; }

/* Routine */
.routine-checklist { display:flex; gap:16px; margin-bottom:12px; }
.routine-item { display:flex; align-items:center; gap:6px; font-size:20px; font-weight:800; color:#E0E6ED; transition:all var(--transition-fast); }
.routine-item.done { color:var(--success); }
.routine-item i { font-size:16px; }

/* Mood */
.mood-selector { display:flex; gap:8px; justify-content:center; }
.mood-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 10px; background:none; border:2px solid transparent; border-radius:12px;
  cursor:pointer; transition:all var(--transition-normal); font-family:inherit;
}
.mood-btn:hover { border-color:rgba(108,92,231,0.3); background:rgba(108,92,231,0.05); }
.mood-btn.active { border-color:var(--primary); background:rgba(108,92,231,0.1); transform:scale(1.1); }
.mood-btn:active { transform:scale(0.9); }
.mood-emoji { font-size:26px; transition:transform var(--transition-normal); }
.mood-btn:hover .mood-emoji { transform:scale(1.15); }
.mood-label { font-size:10px; color:var(--text-muted); font-weight:600; }

/* ==================== HOME TOP ROW (Greeting + Quick Actions) ==================== */
.home-top-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 6px 20px;
  flex-wrap: wrap;
}

.home-greeting {
  flex-shrink: 1;
  min-width: 0;
}

.home-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.home-quick-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.home-qa-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  position: relative;
}
.home-qa-btn i {
  font-size: 16px;
  color: var(--text-muted);
  transition: color 0.2s;
}
.home-qa-btn:hover {
  border-color: var(--primary);
  color: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(108,92,231,0.15);
}
.home-qa-btn:hover i { color: var(--primary-light); }
.home-qa-btn:active { transform: scale(0.97); }

/* 활성 상태 (저녁시간, 미기록 수업 있을 때) */
.home-qa-btn.qa-active {
  background: linear-gradient(135deg, rgba(108,92,231,0.12), rgba(255,107,107,0.08));
  border-color: var(--primary);
  color: var(--primary-light);
  animation: qa-btn-pulse 2.5s ease-in-out infinite;
}
.home-qa-btn.qa-active i { color: var(--primary-light); }

@keyframes qa-btn-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(108,92,231,0.15); }
  50% { box-shadow: 0 0 12px rgba(108,92,231,0.3); }
}

/* NOW 표시 dot */
.qa-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: qa-dot-blink 1.5s ease-in-out infinite;
}
@keyframes qa-dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* 카운트 뱃지 */
.qa-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

/* ==================== HOME CARDS GRID (legacy - keep for previews) ==================== */
.home-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.home-cards-grid > .card {
  margin: 0 !important;
  background: var(--bg-card);
}
.home-cards-grid > .card-gradient-purple {
  background: linear-gradient(135deg, rgba(108,92,231,0.12), rgba(162,155,254,0.05));
}

/* ==================== HOME 2-ROW LAYOUT ==================== */
/* 1행: 좌(루틴+투두) / 우(시간표) */
.home-row-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  align-items: stretch;
}

.home-col-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-col-left > .card,
.home-row-top > .card {
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.home-col-left > .card-gradient-purple,
.home-row-top > .card-gradient-purple {
  background: linear-gradient(135deg, rgba(108,92,231,0.12), rgba(162,155,254,0.05));
}

/* 시간표 카드: 우측 전체 높이 */
.home-card-timetable {
  display: flex;
  flex-direction: column;
}

/* 투두 카드 배경색 명시 */
.home-card-todo {
  background: var(--bg-card) !important;
}

/* 2행: 미션 | 주간현황 | 과제 (3등분) */
.home-row-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
  align-items: stretch;
}

.home-row-bottom > .card {
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
}

/* 하단 Quick Actions 바 */
.home-bottom-actions {
  display: flex;
  gap: 0;
  padding: 0;
  justify-content: stretch;
}

.home-bottom-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  position: relative;
}
.home-bottom-btn i {
  font-size: 18px;
  color: var(--text-muted);
}
.home-bottom-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--primary);
}
.home-bottom-btn:hover i {
  color: var(--primary-light);
}
.home-bottom-btn.active {
  border-color: var(--primary);
  background: rgba(108,92,231,0.1);
  color: var(--primary-light);
}
.home-bottom-btn.active i {
  color: var(--primary-light);
}
.home-bottom-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
}

/* 모바일 (폭 < 600px): 1컬럼으로 변경 */
@media (max-width: 599px) {
  .home-row-top {
    grid-template-columns: 1fr !important;
  }
  .home-row-bottom {
    grid-template-columns: 1fr !important;
  }
  .home-bottom-actions {
    flex-wrap: wrap !important;
  }
}

/* ==================== QUICK TODO CARD ==================== */
.quick-todo-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.quick-todo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 0;
}
.quick-todo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.quick-todo-item:hover { background: var(--bg-card-hover); }
.quick-todo-item.done .quick-todo-text {
  text-decoration: line-through;
  color: var(--text-muted);
  opacity: 0.6;
}
.quick-todo-text {
  flex: 1;
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-todo-del {
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.quick-todo-item:hover .quick-todo-del { opacity: 1; }
.quick-todo-del:hover { color: var(--danger); background: rgba(231,76,60,0.1); }

.quick-todo-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.quick-todo-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-main);
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.quick-todo-input:focus { border-color: var(--primary); }
.quick-todo-input::placeholder { color: var(--text-muted); opacity: 0.5; }
.quick-todo-add-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.quick-todo-add-btn:hover { background: var(--primary-dark); transform: scale(1.05); }
.quick-todo-add-btn:active { transform: scale(0.95); }

/* Timetable List */
.timetable-progress { height:4px; background:var(--bg-input); border-radius:2px; margin-bottom:12px; overflow:hidden; }
.timetable-progress-fill { height:100%; background:linear-gradient(90deg, var(--success), var(--teach-green)); border-radius:2px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

/* .timetable-list base styles moved to TIMETABLE SCROLL section */
.tt-row {
  display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:var(--radius-sm);
  transition:all var(--transition-normal); cursor:pointer;
}
.tt-row:hover { background:rgba(108,92,231,0.05); }
.tt-row.current { background:rgba(108,92,231,0.08); border-left:3px solid var(--primary); }
.tt-row.done { opacity:0.85; }
.tt-period-badge {
  width:28px; height:28px; border-radius:8px; background:var(--bg-input);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;
  color:var(--text-muted); flex-shrink:0; transition:all var(--transition-fast);
}
.tt-period-badge.done { background:rgba(0,184,148,0.15); color:var(--success); }
.tt-period-badge.current { background:rgba(108,92,231,0.15); color:var(--primary-light); animation:pulseSmall 2s ease-in-out infinite; }
.tt-info { flex:1; min-width:0; }
.tt-subject-name { font-size:22px; font-weight:900; color:#FFFFFF; }
.tt-summary { font-size:16px; color:var(--text-secondary); display:block; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.tt-action { flex-shrink:0; }
.tt-done-badge { font-size:12px; color:var(--success); font-weight:600; }
.tt-q-badge { color:var(--question-b); font-size:10px; }
.tt-q-btn {
  width:26px; height:26px; border-radius:50%; border:1.5px solid rgba(108,92,231,0.3);
  background:rgba(108,92,231,0.08); cursor:pointer; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:all 0.2s;
  padding:0; font-family:inherit;
}
.tt-q-btn:hover { background:rgba(108,92,231,0.2); transform:scale(1.15); border-color:var(--primary); }
.tt-q-btn:active { transform:scale(0.9); }
.tt-record-btn {
  padding:5px 12px; background:rgba(108,92,231,0.15); border:1px solid rgba(108,92,231,0.3);
  border-radius:8px; color:var(--primary-light); font-size:12px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:all var(--transition-fast);
  animation:pulseBtn 2s ease-in-out infinite;
}
.tt-record-btn:hover { background:rgba(108,92,231,0.25); transform:scale(1.05); }
.tt-record-btn:active { transform:scale(0.95); }
.tt-locked { font-size:12px; color:var(--text-muted); }

/* Mission */
.mission-row {
  display:flex; align-items:center; gap:10px; padding:10px 0;
  transition:all var(--transition-fast);
}
.mission-row:active { transform:scale(0.98); }
.mission-icon { font-size:20px; flex-shrink:0; }
.mission-info { flex:1; }
.mission-text { font-size:20px; font-weight:900; color:#FFFFFF; display:block; margin-bottom:4px; }
.mission-bar { height:4px; background:var(--bg-input); border-radius:2px; overflow:hidden; }
.mission-bar-fill { height:100%; background:linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius:2px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.mission-count { font-size:18px; color:var(--text-secondary); font-weight:900; flex-shrink:0; }
.mission-row.done .mission-text { color:var(--success); text-decoration:line-through; opacity:0.7; }

/* Weekly Mini Stats */
.weekly-mini-stats { display:flex; align-items:center; justify-content:space-around; margin-bottom:16px; }
.mini-stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.mini-stat-value { font-size:32px; font-weight:900; color:#FFFFFF; }
.mini-stat-label { font-size:15px; color:var(--text-secondary); font-weight:700; }
.mini-stat-divider { width:1px; height:30px; background:var(--border); }

/* Weekly Bar Chart */
.weekly-bar-chart { display:flex; justify-content:space-around; align-items:flex-end; height:80px; margin-bottom:8px; }
.weekly-bar-col { display:flex; flex-direction:column; align-items:center; gap:4px; }
.weekly-bar-stack { display:flex; flex-direction:column-reverse; gap:2px; }
.weekly-bar-r { width:20px; background:linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius:3px 3px 0 0; min-height:4px; transition:height 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.weekly-bar-q { width:20px; background:linear-gradient(180deg, var(--accent), #e55555); border-radius:3px 3px 0 0; min-height:2px; transition:height 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.weekly-bar-label { font-size:10px; color:var(--text-muted); font-weight:600; }

.chart-legend { display:flex; gap:16px; justify-content:center; font-size:11px; color:var(--text-muted); }
.legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px; vertical-align:middle; }
.legend-line { width:16px; height:3px; border-radius:2px; display:inline-block; margin-right:4px; vertical-align:middle; }
.legend-line.dashed { background:repeating-linear-gradient(90deg, var(--text-muted) 0, var(--text-muted) 3px, transparent 3px, transparent 6px) !important; }

/* Quick Actions */
.quick-action-btn {
  flex:1; padding:10px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); color:var(--text-secondary); font-size:13px; font-weight:600;
  cursor:pointer; transition:all var(--transition-fast); font-family:inherit; text-align:center;
}
.quick-action-btn:hover { border-color:var(--primary); color:var(--primary-light); transform:translateY(-2px); }
.quick-action-btn:active { transform:scale(0.97); }
.quick-action-btn i { margin-right:6px; }

/* ==================== RECORD TAB ==================== */
.record-type-grid { display:flex; flex-direction:column; gap:0; padding:0; margin:0; }
.record-type-card {
  display:flex; align-items:center; gap:12px; padding:16px;
  background:var(--bg-card); border:none; border-bottom:1px solid var(--border); border-radius:0;
  cursor:pointer; transition:all var(--transition-normal); position:relative; overflow:hidden;
}
.record-type-card::before {
  content:''; position:absolute; inset:0; opacity:0;
  background:linear-gradient(135deg, rgba(108,92,231,0.05), transparent);
  transition:opacity var(--transition-fast);
}
.record-type-card:hover { border-color:var(--primary); transform:translateX(4px); }
.record-type-card:hover::before { opacity:1; }
.record-type-card:active { transform:scale(0.98); }
.record-type-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.record-type-info { flex:1; position:relative; z-index:1; }
.record-type-info h3 { font-size:20px; font-weight:900; color:#FFFFFF; }
.record-type-info p { font-size:15px; color:var(--text-secondary); margin-top:2px; }

/* Timeline */
.timeline { display:flex; flex-direction:column; gap:0; }
.timeline-item { display:flex; gap:12px; padding:12px 0; position:relative; }
.timeline-item:not(:last-child)::after {
  content:''; position:absolute; left:7px; top:32px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-dot {
  width:16px; height:16px; border-radius:50%; flex-shrink:0; margin-top:2px;
  box-shadow:0 0 0 3px var(--bg-card);
}
.timeline-content { flex:1; }
.timeline-header { display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:wrap; }
.timeline-time { font-size:11px; color:var(--text-muted); }
.timeline-subject { font-size:16px; font-weight:800; color:#FFFFFF; }
.timeline-text { font-size:16px; font-weight:600; color:#E0E6ED; line-height:1.5; }

/* ==================== CLASS END POPUP ==================== */
.popup-overlay { display:flex; align-items:center; justify-content:center; min-height:100%; padding:20px; }
.popup-card {
  background:var(--bg-card); border-radius:var(--radius-2xl); padding:24px; width:100%;
  border:1px solid var(--border); box-shadow:var(--shadow-lg);
}
.popup-header { text-align:center; margin-bottom:16px; }
.popup-bell {
  width:56px; height:56px; border-radius:50%; margin:0 auto 12px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  display:flex; align-items:center; justify-content:center; font-size:24px; color:white;
  animation:bellRing 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bellRing {
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(15deg)}
  30%{transform:rotate(-12deg)}
  45%{transform:rotate(8deg)}
  60%{transform:rotate(-5deg)}
  75%{transform:rotate(2deg)}
}
.popup-header h2 { font-size:18px; font-weight:800; }
.popup-header p { font-size:13px; color:var(--text-secondary); }
.popup-timer {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 16px; background:rgba(0,184,148,0.1); border-radius:20px;
  margin-bottom:16px; font-size:13px; color:var(--success); font-weight:600;
}
.popup-question-ask {
  background:var(--bg-input); padding:14px; border-radius:var(--radius-md); margin-bottom:16px;
  font-size:14px; font-weight:600;
}
.popup-skip {
  display:block; width:100%; text-align:center; padding:10px; background:none; border:none;
  color:var(--text-muted); font-size:13px; cursor:pointer; font-family:inherit; margin-top:4px;
  transition:all var(--transition-fast);
}
.popup-skip:hover { color:var(--text-secondary); }

/* Input Modes */
.input-modes { display:flex; gap:10px; justify-content:center; margin:12px 0 16px; }
.input-mode-btn {
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 20px;
  background:var(--bg-input); border:2px solid var(--border); border-radius:var(--radius-lg);
  color:var(--text-secondary); cursor:pointer; transition:all var(--transition-normal); font-family:inherit;
}
.input-mode-btn:hover { border-color:var(--primary-light); }
.input-mode-btn.active { border-color:var(--primary); background:rgba(108,92,231,0.1); color:var(--primary-light); }
.input-mode-btn:active { transform:scale(0.95); }
.input-mode-btn i { font-size:22px; }
.input-mode-btn span { font-size:11px; font-weight:600; }

/* Voice Recording Mode Visual */
.voice-recording-visual {
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px;
  background:rgba(108,92,231,0.08); border:1px dashed rgba(108,92,231,0.3);
  border-radius:var(--radius-lg); margin-bottom:16px; text-align:center;
}
.voice-wave {
  display:flex; align-items:center; gap:3px; height:40px;
}
.voice-wave-bar {
  width:4px; background:var(--primary); border-radius:2px;
  animation:waveAnim 1s ease-in-out infinite;
}
.voice-wave-bar:nth-child(1) { height:12px; animation-delay:0s; }
.voice-wave-bar:nth-child(2) { height:24px; animation-delay:0.1s; }
.voice-wave-bar:nth-child(3) { height:36px; animation-delay:0.2s; }
.voice-wave-bar:nth-child(4) { height:20px; animation-delay:0.3s; }
.voice-wave-bar:nth-child(5) { height:32px; animation-delay:0.4s; }
.voice-wave-bar:nth-child(6) { height:16px; animation-delay:0.5s; }
.voice-wave-bar:nth-child(7) { height:28px; animation-delay:0.6s; }

/* Photo Mode Visual */
.photo-capture-visual {
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px;
  background:rgba(108,92,231,0.05); border:2px dashed rgba(108,92,231,0.2);
  border-radius:var(--radius-lg); margin-bottom:16px; cursor:pointer;
  transition:all var(--transition-fast);
}
.photo-capture-visual:hover { border-color:var(--primary); background:rgba(108,92,231,0.1); }
.photo-capture-visual i { font-size:36px; color:var(--primary-light); }
.photo-capture-visual span { font-size:13px; color:var(--text-secondary); }

/* Record Details */
.subject-indicator {
  display:flex; align-items:center; gap:8px; justify-content:center;
  padding:10px 0 16px; font-size:14px; color:var(--text-secondary);
}
.subject-dot { width:10px; height:10px; border-radius:50%; }
.period-badge { font-size:11px; padding:3px 8px; background:var(--bg-input); border-radius:8px; color:var(--text-muted); }
.question-prompt { padding:16px; background:var(--bg-input); border-radius:var(--radius-md); margin-bottom:20px; }
.question-prompt p { font-size:14px; font-weight:600; margin-bottom:12px; }
.input-timer { text-align:center; font-size:12px; color:var(--text-muted); margin-top:8px; }

/* ==================== AI CLASSIFICATION ==================== */
.ai-classification {
  background:linear-gradient(135deg, rgba(108,92,231,0.1), rgba(0,184,148,0.05));
  border:1px solid rgba(108,92,231,0.25); border-radius:var(--radius-lg); padding:16px; margin-bottom:20px;
}
.ai-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ai-icon { font-size:16px; }
.ai-title { font-size:14px; font-weight:700; }
.ai-analyzing { font-size:11px; color:var(--success); margin-left:auto; }
.ai-result { font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
.ai-comment { font-size:13px; color:var(--text-primary); font-weight:500; line-height:1.5; margin-bottom:14px; }

/* Question Levels */
.q-level { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.q-level-a { background:rgba(116,185,255,0.15); color:var(--question-a); }
.q-level-b { background:rgba(162,155,254,0.15); color:var(--question-b); }
.q-level-c { background:rgba(255,107,107,0.15); color:var(--question-c); }

.q-level-selector { display:flex; flex-direction:column; gap:4px; }
.q-group-label { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--text-muted); margin:6px 0 2px; }
.q-group-dot { width:6px; height:6px; border-radius:50%; }
.q-level-row {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-fast); border:1.5px solid transparent;
}
.q-level-row:hover { background:var(--bg-input); }
.q-level-row.selected { border-color:var(--primary); background:rgba(108,92,231,0.1); }
.q-level-row:active { transform:scale(0.98); }
.q-cat { font-size:10px; font-weight:700; width:28px; color:var(--text-muted); }
.q-name { flex:1; font-size:13px; font-weight:600; }
.q-xp { font-size:12px; color:var(--xp-gold); font-weight:700; }
.ai-recommend { font-size:10px; color:var(--success); font-weight:600; }

/* Question Distribution */
.q-dist-row { display:flex; align-items:center; gap:8px; padding:4px 0; }
.q-dist-label { font-size:11px; width:72px; font-weight:600; color:var(--text-secondary); }
.q-dist-bar { flex:1; height:12px; background:var(--bg-input); border-radius:6px; overflow:hidden; }
.q-dist-fill { height:100%; border-radius:6px; transition:width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.q-dist-pct { font-size:11px; width:36px; text-align:right; color:var(--text-muted); }
.success-badge { margin-top:12px; padding:8px 12px; background:rgba(0,184,148,0.1); border-radius:8px; font-size:13px; color:var(--success); font-weight:600; text-align:center; }

/* ==================== TEACH LOG ==================== */
.teach-hero { text-align:center; margin-bottom:20px; }
.teach-hero-emoji { font-size:48px; }
.teach-hero h2 { font-size:18px; font-weight:700; margin-top:8px; }

.teach-student-list { max-height:180px; overflow-y:auto; margin-top:8px; }
.teach-student-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-fast);
}
.teach-student-item:hover { background:var(--bg-input); }
.teach-student-item.selected { background:rgba(0,184,148,0.1); border:1px solid rgba(0,184,148,0.3); }
.teach-avatar {
  width:32px; height:32px; border-radius:50%; background:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:white;
}
.teach-confirm-box {
  background:rgba(0,184,148,0.08); border:1px solid rgba(0,184,148,0.25);
  border-radius:var(--radius-md); padding:14px; margin-bottom:16px; font-size:13px; color:var(--teach-green);
}

/* ==================== ACTIVITY RECORD ==================== */
.activity-type-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.activity-type-btn {
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px;
  background:var(--bg-input); border:1.5px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-normal); font-family:inherit; font-size:11px; font-weight:600; color:var(--text-secondary);
}
.activity-type-btn span:first-child { font-size:24px; }
.activity-type-btn:hover, .activity-type-btn.active { border-color:var(--primary); background:rgba(108,92,231,0.15); color:var(--primary-light); transform:translateY(-2px); }
.activity-type-btn:active { transform:scale(0.95); }

/* ==================== EVENING ROUTINE ==================== */
.evening-summary-card {
  text-align:center; padding:24px 16px; margin-bottom:20px;
  background:linear-gradient(135deg, rgba(108,92,231,0.12), rgba(253,203,110,0.08));
  border:1px solid rgba(108,92,231,0.2); border-radius:var(--radius-xl);
}
.evening-summary-card h2 { font-size:20px; font-weight:800; margin-bottom:16px; }
.evening-stats { display:flex; justify-content:space-around; }
.evening-stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
.evening-stat-num { font-size:24px; font-weight:800; }
.evening-stat-label { font-size:11px; color:var(--text-muted); }

.missing-record-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-bottom:1px solid rgba(48,54,61,0.5); font-size:13px;
}
.missing-record-row:last-child { border-bottom:none; }

.evening-xp-preview {
  text-align:center; padding:16px; margin:16px 0;
  background:rgba(255,215,0,0.08); border:1px solid rgba(255,215,0,0.2); border-radius:var(--radius-lg);
}
.evening-xp-preview > div:first-child { font-size:12px; color:var(--text-muted); }
.evening-xp-total { font-size:28px; font-weight:900; color:var(--xp-gold); }
.evening-xp-breakdown { font-size:11px; color:var(--text-muted); margin-top:4px; }

/* ==================== WEEKLY REPORT ==================== */
.report-hero { text-align:center; margin-bottom:20px; }
.report-hero-avatar { font-size:48px; margin-bottom:8px; }
.report-hero h2 { font-size:18px; font-weight:800; }
.report-hero p { font-size:13px; color:var(--text-muted); }

.report-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.report-stat-item {
  text-align:center; padding:14px 8px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-md);
  transition:all var(--transition-fast);
}
.report-stat-item:hover { border-color:var(--primary-light); }
.report-stat-num { font-size:24px; font-weight:800; display:block; }
.report-stat-label { font-size:12px; color:var(--text-secondary); font-weight:600; display:block; margin-top:2px; }
.report-stat-sub { font-size:10px; color:var(--text-muted); display:block; margin-top:2px; }

.highlight-item { padding:10px 0; border-bottom:1px solid rgba(48,54,61,0.5); }
.highlight-item:last-child { border-bottom:none; }
.highlight-badge { font-size:11px; font-weight:600; padding:3px 8px; border-radius:8px; display:inline-block; margin-bottom:4px; }
.highlight-item p { font-size:13px; color:var(--text-secondary); line-height:1.5; }

.next-goal-item { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13px; }
.next-goal-icon { font-size:18px; }

/* ==================== RECORD HISTORY ==================== */
.history-date-header { font-size:12px; font-weight:700; color:var(--text-muted); padding:12px 0 6px; }
.history-card {
  display:flex; gap:10px; padding:12px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:8px;
  transition:all var(--transition-fast);
}
.history-card:hover { border-color:var(--border-light); }
.history-type-badge {
  writing-mode:vertical-lr; text-orientation:mixed; font-size:10px; font-weight:700;
  color:white; padding:4px 6px; border-radius:6px; text-align:center; flex-shrink:0;
}
.history-content { flex:1; }
.history-meta { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
.history-content p { font-size:13px; line-height:1.4; }
.history-tags { display:flex; gap:6px; align-items:center; margin-top:6px; }
.history-xp { font-size:11px; color:var(--xp-gold); font-weight:600; }

/* ==================== GROWTH TAB ==================== */
.chart-container { position:relative; height:200px; margin:8px 0; }

.combo-card {
  background:linear-gradient(135deg, rgba(108,92,231,0.08), rgba(255,107,107,0.05));
  border:1px solid rgba(108,92,231,0.2); border-radius:var(--radius-md); padding:12px;
  transition:all var(--transition-fast);
}
.combo-card:hover { border-color:rgba(108,92,231,0.4); }
.combo-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13px; font-weight:700; }
.combo-complete { color:var(--success); font-size:12px; animation:subtleShine 3s ease-in-out infinite; }
.combo-progress { color:var(--accent-warm); font-size:12px; }
.combo-flow { display:flex; align-items:center; gap:6px; font-size:12px; flex-wrap:wrap; }
.combo-arrow { color:var(--xp-gold); font-size:10px; }
.combo-bonus { font-size:12px; color:var(--xp-gold); font-weight:700; margin-left:4px; }
.combo-next { font-size:12px; color:var(--text-muted); }

.teach-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.teach-stat-item { text-align:center; padding:14px; background:var(--bg-input); border-radius:var(--radius-md); }
.teach-stat-num { font-size:28px; font-weight:800; display:block; }
.teach-stat-item span:last-child { font-size:11px; color:var(--text-muted); }

.subject-record-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid rgba(48,54,61,0.3); font-size:12px; }
.subject-record-row:last-child { border-bottom:none; }
.subject-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.subject-name { font-size:13px; font-weight:600; width:40px; }
.subject-stat { color:var(--text-muted); flex:1; }
.subject-bc { color:var(--question-b); font-weight:600; }

/* ==================== MY TAB ==================== */
.profile-card { text-align:center; }
.profile-avatar {
  width:76px; height:76px; border-radius:50%; margin:0 auto 12px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  display:flex; align-items:center; justify-content:center; font-size:36px;
  border:3px solid var(--xp-gold); position:relative;
  animation:avatarGlow 3s ease-in-out infinite;
}
.profile-name { font-size:20px; font-weight:800; }
.profile-title { font-size:13px; color:var(--primary-light); font-weight:600; margin-top:4px; }
.profile-school { font-size:12px; color:var(--text-muted); margin-top:4px; }
.profile-stats { display:flex; justify-content:center; gap:24px; margin-top:16px; }
.profile-stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.profile-stat-value { font-size:20px; font-weight:800; }
.profile-stat-label { font-size:10px; color:var(--text-muted); }

.level-progress-header { display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; }
.level-tier-row { display:flex; justify-content:space-between; margin-top:10px; }
.level-tier { font-size:10px; color:var(--text-muted); transition:all var(--transition-fast); }
.level-tier.active { color:var(--primary-light); font-weight:700; }

.badge-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.badge-item {
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 6px;
  background:var(--bg-input); border-radius:var(--radius-md); text-align:center;
  border:1px solid transparent; transition:all var(--transition-fast); cursor:pointer;
}
.badge-item:hover { transform:translateY(-2px); }
.badge-item.earned { background:rgba(108,92,231,0.12); border-color:rgba(108,92,231,0.3); }
.badge-item.earned:hover { box-shadow:0 4px 12px rgba(108,92,231,0.2); }
.badge-item.locked { opacity:0.35; }
.badge-icon { font-size:26px; transition:transform var(--transition-fast); }
.badge-item:hover .badge-icon { transform:scale(1.2); }
.badge-name { font-size:10px; font-weight:600; color:var(--text-secondary); }

.streak-display { text-align:center; margin:12px 0; }
.streak-number { font-size:42px; font-weight:900; color:var(--streak-fire); }
.streak-display p { font-size:13px; color:var(--text-secondary); margin-top:4px; }
.streak-milestones { display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.streak-milestone {
  padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600;
  background:var(--bg-input); color:var(--text-muted); transition:all var(--transition-fast);
}
.streak-milestone.reached { background:rgba(255,99,71,0.15); color:var(--streak-fire); border:1px solid rgba(255,99,71,0.3); }
.pause-card-info {
  margin-top:16px; padding:10px; background:rgba(108,92,231,0.08); border-radius:8px;
  text-align:center; font-size:12px; color:var(--primary-light);
}

/* Growth Card */
.growth-card-preview { display:flex; flex-direction:column; gap:10px; }
.gc-stat { display:flex; align-items:center; gap:10px; }
.gc-label { font-size:12px; font-weight:600; color:var(--text-secondary); width:48px; }
.gc-bar { flex:1; height:10px; background:var(--bg-input); border-radius:5px; overflow:hidden; }
.gc-fill { height:100%; border-radius:5px; transition:width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

/* ==================== SETTINGS / NOTIFICATIONS ==================== */
.notification-item {
  display:flex; align-items:center; gap:12px; padding:12px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  margin-bottom:8px; transition:all var(--transition-fast);
}
.notification-item:hover { border-color:var(--border-light); }
.notification-item.unread { border-left:3px solid var(--primary); }
.notif-icon {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.notif-content { flex:1; }
.notif-title { font-size:13px; font-weight:600; }
.notif-desc { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.notif-time { font-size:10px; color:var(--text-muted); flex-shrink:0; }

/* ==================== MENTOR DASHBOARD ==================== */
.desk-header { display:flex; justify-content:space-between; align-items:center; padding:20px 28px; border-bottom:1px solid var(--border); background:var(--bg-card); }
.desk-header h1 { font-size:22px; font-weight:800; }
.desk-header-right { display:flex; align-items:center; gap:16px; }
.desk-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); padding:0 28px; background:var(--bg-card); overflow-x:auto; }
.desk-tab {
  padding:14px 18px; font-size:13px; font-weight:600; color:var(--text-muted);
  border:none; background:none; cursor:pointer; border-bottom:2px solid transparent;
  transition:all var(--transition-fast); font-family:inherit; white-space:nowrap;
}
.desk-tab:hover { color:var(--text-secondary); }
.desk-tab.active { color:var(--primary-light); border-bottom-color:var(--primary); }
.desk-body { padding:24px 28px; }

.stats-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:24px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; transition:all var(--transition-fast); }
.stat-card:hover { border-color:var(--border-light); }
.stat-label { font-size:12px; color:var(--text-muted); margin-bottom:6px; }
.stat-value { font-size:26px; font-weight:800; }
.stat-change { font-size:12px; margin-top:4px; }
.stat-up { color:var(--success); }
.stat-down { color:var(--danger); }

.student-table { width:100%; border-collapse:collapse; font-size:13px; }
.student-table th { text-align:left; padding:12px 14px; font-weight:600; color:var(--text-muted); border-bottom:1px solid var(--border); font-size:12px; }
.student-table td { padding:12px 14px; border-bottom:1px solid rgba(48,54,61,0.5); }
.student-table tr:hover td { background:var(--bg-card-hover); }
.student-table tr { cursor:pointer; transition:all var(--transition-fast); }

.status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.status-green { background:var(--success); }
.status-yellow { background:var(--warning); }
.status-red { background:var(--danger); }

.alert-banner { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--radius-md); margin-bottom:8px; font-size:13px; }
.alert-red { background:rgba(231,76,60,0.08); border:1px solid rgba(231,76,60,0.25); color:#FF8A80; }
.alert-yellow { background:rgba(243,156,18,0.08); border:1px solid rgba(243,156,18,0.25); color:var(--accent-warm); }
.alert-green { background:rgba(0,184,148,0.08); border:1px solid rgba(0,184,148,0.25); color:var(--success); }

.report-preview { background:var(--bg-input); border-radius:var(--radius-lg); padding:24px; border:1px solid var(--border); font-size:14px; line-height:1.8; }
.report-section { margin-bottom:16px; }
.report-section-title { font-weight:700; font-size:13px; color:var(--primary-light); margin-bottom:6px; }
.report-section p { color:var(--text-secondary); }

.coaching-note { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-bottom:16px; }
.coaching-note-date { font-size:12px; color:var(--text-muted); margin-bottom:8px; }
.coaching-note-content { font-size:14px; line-height:1.7; color:var(--text-secondary); }
.coaching-note .action-list { margin-top:12px; }
.coaching-note .action-item { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13px; }

.mentor-rate { font-size:14px; font-weight:700; padding:4px 12px; border-radius:20px; }

/* ==================== DIRECTOR DASHBOARD ==================== */
.dir-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dir-full { grid-column:1/-1; }
.network-placeholder {
  height:280px; background:var(--bg-input); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; border:1px dashed var(--border);
}
.network-placeholder i { font-size:48px; color:var(--text-muted); }
.network-placeholder p { color:var(--text-muted); font-size:14px; }

.insight-box {
  background:linear-gradient(135deg, rgba(108,92,231,0.04), rgba(0,184,148,0.04));
  border:1px solid rgba(108,92,231,0.15); border-radius:var(--radius-lg); padding:20px;
}
.insight-item { display:flex; gap:8px; padding:5px 0; font-size:13px; color:var(--text-secondary); line-height:1.5; }

/* ==================== PLANNER TAB ==================== */
.planner-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 0 8px;
}
.planner-header h1 { font-size:20px; font-weight:800; }
.planner-view-toggle {
  display:flex; gap:0; background:var(--bg-input); border-radius:var(--radius-md);
  padding:3px; border:1px solid var(--border);
}
.pvt-btn {
  padding:6px 14px; font-size:12px; font-weight:600; border:none; border-radius:var(--radius-sm);
  background:none; color:var(--text-muted); cursor:pointer; transition:all var(--transition-fast);
  font-family:inherit;
}
.pvt-btn.active { background:var(--primary); color:white; box-shadow:0 2px 8px rgba(108,92,231,0.3); }
.pvt-btn:hover:not(.active) { color:var(--text-primary); }

/* Date Navigator */
.planner-date-nav {
  display:flex; align-items:center; gap:4px; padding:8px 0 12px; justify-content:center;
}
.pdn-arrow {
  background:none; border:none; color:var(--text-muted); font-size:14px;
  cursor:pointer; padding:8px; transition:all var(--transition-fast);
}
.pdn-arrow:hover { color:var(--text-primary); }
.pdn-dates { display:flex; gap:6px; flex:1; justify-content:center; }
.pdn-date {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 12px; border-radius:var(--radius-md); border:none;
  background:none; cursor:pointer; transition:all var(--transition-fast);
  font-family:inherit; position:relative;
}
.pdn-date:hover { background:var(--bg-input); }
.pdn-date.active {
  background:var(--primary); color:white; box-shadow:0 2px 12px rgba(108,92,231,0.4);
}
.pdn-dayname { font-size:10px; font-weight:600; color:var(--text-muted); }
.pdn-date.active .pdn-dayname { color:rgba(255,255,255,0.8); }
.pdn-day { font-size:18px; font-weight:800; color:var(--text-primary); }
.pdn-date.active .pdn-day { color:white; }
.pdn-dot {
  width:4px; height:4px; border-radius:50%; background:var(--primary-light);
  position:absolute; bottom:4px;
}
.pdn-date.active .pdn-dot { background:white; }

/* Daily Summary */
.planner-daily-summary {
  display:flex; align-items:center; justify-content:space-around;
  padding:14px 8px; margin:0; background:var(--bg-card);
  border:none; border-bottom:1px solid var(--border); border-radius:0;
}
.pds-item { display:flex; flex-direction:column; align-items:center; gap:2px; }
.pds-num {
  font-family: 'Roboto', 'Pretendard Variable', sans-serif;
  font-size: 34px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.pds-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.pds-divider { width: 1px; height: 32px; background: var(--border); }

/* 핵심 지표 강조 컬러 라인 (정율 배치) */
.pds-item.pds-highlight .pds-label {
  position: relative;
  padding-bottom: 4px;
}
.pds-item.pds-highlight .pds-label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  box-shadow: 0 0 6px rgba(108, 92, 231, 0.4);
}

/* Timeline */
.planner-timeline { padding:0; }
.pt-hour-row { display:flex; gap:10px; min-height:32px; align-items:flex-start; }
.pt-time {
  width: 36px;
  font-family: 'Roboto', 'Pretendard Variable', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: right;
  padding-top: 6px;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: -0.2px;
}
.pt-content {
  flex:1; border-left:1.5px solid var(--border); padding-left:12px;
  padding-bottom:4px; min-height:32px;
}
.pt-empty-slot {
  height:20px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; cursor:pointer; transition:all var(--transition-fast);
}
.pt-empty-slot:hover { background:var(--bg-input); }

.pt-item {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--bg-card); border:1.5px solid var(--border); border-radius:var(--radius-md);
  margin-bottom:4px; cursor:pointer; transition:all var(--transition-normal);
}
.pt-item:not(.done) {
  border-color: rgba(200, 169, 110, 0.35);
  box-shadow: 0 0 0 0.5px rgba(200, 169, 110, 0.08);
}
.pt-item:not(.done):hover {
  border-color: rgba(200, 169, 110, 0.6);
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(200, 169, 110, 0.12);
}
.pt-item:hover { border-color:var(--border-light); transform:translateX(3px); }
.pt-item:active { transform:scale(0.98); }
.pt-item.done {
  opacity: 0.7;
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 6px,
    rgba(255,255,255,0.03) 6px,
    rgba(255,255,255,0.03) 12px
  );
  background-color: var(--bg-card);
}
.pt-item.done .pt-item-title {
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.3);
}
.pt-item.cat-assignment { border-left:3px solid #FF9F43; }
.pt-item.cat-class { border-left:3px solid var(--primary); }
.pt-item.cat-explore { border-left:3px solid var(--accent); }
.pt-item.cat-study { border-left:3px solid #6C5CE7; }
.pt-item.cat-routine { border-left:3px solid #A29BFE; }
.pt-item.cat-activity { border-left:3px solid #00CEC9; }
.pt-item.cat-teach { border-left:3px solid var(--teach-green); }
.pt-item.cat-personal { border-left:3px solid #636e72; }

.pt-item-left { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.pt-item-check { font-size:16px; color:var(--text-muted); }
.pt-item-color { width:3px; height:24px; border-radius:2px; display:none; }
.pt-item-body { flex:1; min-width:0; }
.pt-item-title-row { display:flex; align-items:center; gap:4px; }
.pt-item-icon { font-size:12px; }
.pt-item-title {
  font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-item-meta {
  font-family: 'Roboto', 'Pretendard Variable', sans-serif;
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -0.1px;
}
.pt-item-detail { color:var(--text-secondary); }
.pt-item-right { flex-shrink:0; }
.pt-ai-badge {
  font-family: 'Roboto', 'Pretendard Variable', sans-serif;
  font-size: 9px; font-weight: 700; color: var(--primary-light);
  background: rgba(108,92,231,0.15); padding: 2px 6px; border-radius: 4px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(108,92,231,0.25);
}

/* ==================== COMPACT AGENDA VIEW ==================== */
.agenda-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}
.agenda-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-muted);
}
.agenda-empty-icon { font-size: 36px; opacity: 0.3; }
.agenda-empty-text { font-size: 13px; font-weight: 600; }
.agenda-add-first {
  padding: 8px 20px;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--border-light);
  background: none;
  color: var(--primary-light);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}
.agenda-add-first:hover {
  border-color: var(--primary);
  background: rgba(108,92,231,0.08);
}

/* Agenda Item */
.agenda-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.agenda-item:not(.done) {
  border-color: rgba(200,169,110,0.3);
}
.agenda-item:hover {
  transform: translateX(3px);
  border-color: var(--border-light);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.agenda-item:active { transform: scale(0.99); }

/* 진행 중 표시 */
.agenda-item.now {
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 1px rgba(253,203,110,0.3), 0 2px 12px rgba(253,203,110,0.1);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(253,203,110,0.04) 100%);
}

/* 완료 표시 */
.agenda-item.done {
  opacity: 0.65;
  background-image: repeating-linear-gradient(
    135deg, transparent, transparent 6px,
    rgba(255,255,255,0.025) 6px, rgba(255,255,255,0.025) 12px
  );
  background-color: var(--bg-card);
}
.agenda-item.done .agenda-title {
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.3);
}

/* 지난 시간 (미완료) */
.agenda-item.past {
  border-left: 3px solid var(--accent);
}

/* 시간 컬럼 */
.agenda-time-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  width: 42px;
  flex-shrink: 0;
  padding-right: 8px;
  gap: 1px;
}
.agenda-time-start {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.agenda-time-end {
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.2;
}

/* 컬러 바 (좌측) */
.agenda-bar {
  width: 3px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-right: 10px;
  min-height: 32px;
}

/* 카테고리별 왼쪽 보더 */
.agenda-item.cat-class { border-left: 3px solid var(--primary); }
.agenda-item.cat-assignment { border-left: 3px solid #FF9F43; }
.agenda-item.cat-study { border-left: 3px solid #6C5CE7; }
.agenda-item.cat-routine { border-left: 3px solid #A29BFE; }
.agenda-item.cat-activity { border-left: 3px solid #00CEC9; }
.agenda-item.cat-explore { border-left: 3px solid var(--accent); }
.agenda-item.cat-teach { border-left: 3px solid var(--teach-green); }
.agenda-item.cat-personal { border-left: 3px solid #636e72; }

/* 본문 */
.agenda-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.agenda-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.agenda-check {
  font-size: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.agenda-cat-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.agenda-title {
  font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.agenda-detail {
  font-size: 11px;
  color: var(--text-muted);
  padding-left: 37px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 37px;
}
.agenda-cat-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid;
  opacity: 0.7;
}
.agenda-now-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-warm);
  background: rgba(253,203,110,0.15);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(253,203,110,0.3);
  animation: pulse-now 2s ease-in-out infinite;
}
@keyframes pulse-now {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* 추가 버튼 */
.agenda-add-row {
  padding: 6px 0 12px;
}
.agenda-add-btn {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--border);
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.agenda-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary-light);
  background: rgba(108,92,231,0.05);
}

/* ==================== HOME AGENDA MINI LIST ==================== */
.home-agenda-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(108,92,231,0.2) transparent;
}
.home-agenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.home-agenda-item:hover { background: var(--bg-card-hover); }
.home-agenda-item.done { opacity: 0.5; }
.home-agenda-item.done .home-agenda-title {
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.3);
}
.home-agenda-item.now {
  background: rgba(253,203,110,0.06);
  border-radius: 6px;
}
.home-agenda-time {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}
.home-agenda-bar {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}
.home-agenda-info {
  flex: 1;
  min-width: 0;
}
.home-agenda-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* ==================== COMMUNITY TAB (New Tab) ==================== */
.community-landing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 24px;
}
.community-landing-card {
  text-align: center;
  max-width: 360px;
  width: 100%;
}
.community-landing-icon {
  font-size: 56px;
  margin-bottom: 16px;
  animation: community-bounce 2s ease-in-out infinite;
}
@keyframes community-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.community-landing-title {
  font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.community-landing-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
}
.community-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-lg);
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 16px rgba(108,92,231,0.3);
}
.community-open-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(108,92,231,0.4);
}
.community-open-btn:active { transform: scale(0.97); }
.community-landing-features {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}
.community-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  min-width: 80px;
}
.community-feat i {
  font-size: 16px;
  color: var(--primary-light);
}

/* ==================== PLANNER 2-COLUMN LAYOUT ==================== */
.planner-two-col {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 0;
  min-height: 400px;
}
.planner-col-timeline {
  padding: 0;
  border-right: 1px solid var(--border);
}
.planner-col-todo {
  padding: 12px 12px 12px 14px;
  position: sticky;
  top: 0;
  align-self: start;
}

/* Planner Todo Card */
.planner-todo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.planner-todo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.planner-todo-title {
  font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}
.planner-todo-count {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Todo List */
.planner-todo-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(108,92,231,0.2) transparent;
}
.planner-todo-list::-webkit-scrollbar { width: 3px; }
.planner-todo-list::-webkit-scrollbar-thumb { background: rgba(108,92,231,0.2); border-radius: 3px; }

.planner-todo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 0;
  font-size: 12px;
  color: var(--text-muted);
}

.planner-todo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.planner-todo-item:hover {
  background: var(--bg-card-hover);
}
.planner-todo-item.done .planner-todo-text {
  text-decoration: line-through;
  color: var(--text-muted);
  opacity: 0.6;
}
.planner-todo-text {
  flex: 1;
  font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planner-todo-del {
  width: 18px;
  height: 18px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 9px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.planner-todo-item:hover .planner-todo-del { opacity: 1; }
.planner-todo-del:hover { color: var(--danger); background: rgba(231,76,60,0.1); }

/* Todo Input */
.planner-todo-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.planner-todo-input {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.planner-todo-input:focus { border-color: var(--primary); }
.planner-todo-input::placeholder { color: var(--text-muted); opacity: 0.5; }
.planner-todo-add-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: white;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.planner-todo-add-btn:hover { background: var(--primary-dark); transform: scale(1.05); }

/* Mobile: stack vertically */
@media (max-width: 599px) {
  .planner-two-col {
    grid-template-columns: 1fr;
  }
  .planner-col-timeline {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .planner-col-todo {
    padding: 12px;
    position: static;
  }
}

/* Weekly Planner */
.planner-week-header {
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:8px 0 12px;
}
.pw-month { font-size:14px; font-weight:700; color:var(--text-primary); }

.planner-week-grid {
  display:grid; grid-template-columns:repeat(7, 1fr); gap:3px;
  padding:0; margin-bottom:8px;
}
.pw-day {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:6px 4px; min-height:120px; cursor:pointer; transition:all var(--transition-fast);
  overflow:hidden;
}
.pw-day:hover { border-color:var(--primary-light); }
.pw-day.today { border-color:var(--primary); background:rgba(108,92,231,0.05); }
.pw-day-header { text-align:center; margin-bottom:4px; }
.pw-dayname { font-size:9px; font-weight:600; color:var(--text-muted); display:block; }
.pw-daynum { font-size:14px; font-weight:700; color:var(--text-primary); }
.pw-daynum.today { color:var(--primary-light); }

.pw-items { display:flex; flex-direction:column; gap:2px; }
.pw-item {
  font-size:8px; padding:2px 3px; border-radius:3px;
  background:var(--bg-input); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--text-secondary); line-height:1.3;
}
.pw-item.pw-deadline {
  background:rgba(255,107,107,0.15); color:var(--accent); font-weight:700;
  border-left:none;
}
.pw-item-time { color:var(--text-muted); margin-right:2px; }
.pw-item-title { }
.pw-more { font-size:8px; color:var(--text-muted); text-align:center; padding:2px 0; }
.pw-empty { font-size:10px; color:var(--text-muted); text-align:center; padding:8px 0; opacity:0.3; }
.pw-assignment-row {
  display:flex; align-items:center; gap:4px; padding:8px 0;
  border-bottom:1px solid rgba(48,54,61,0.3); font-size:13px; cursor:pointer;
  transition:all var(--transition-fast);
}
.pw-assignment-row:last-child { border-bottom:none; }
.pw-assignment-row:hover { transform:translateX(2px); }

/* Monthly Planner */
.planner-month-header {
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:8px 0 12px;
}
.pm-title { font-size:16px; font-weight:800; }

.planner-month-grid {
  display:grid; grid-template-columns:repeat(7, 1fr); gap:2px;
  padding:0; margin-bottom:8px;
}
.pm-day-header {
  font-size:10px; font-weight:700; color:var(--text-muted);
  text-align:center; padding:6px 0;
}
.pm-day-header.sun { color:var(--accent); }
.pm-day-header.sat { color:var(--primary-light); }

.pm-cell {
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; border-radius:var(--radius-sm); cursor:pointer;
  transition:all var(--transition-fast); position:relative; background:var(--bg-card);
  border:1px solid transparent;
}
.pm-cell:hover { background:var(--bg-input); }
.pm-cell.today { border-color:var(--primary); background:rgba(108,92,231,0.1); }
.pm-cell.deadline .pm-day-num { color:var(--accent); font-weight:800; }
.pm-cell.empty { background:none; cursor:default; }
.pm-day-num { font-size:13px; font-weight:600; color:var(--text-primary); }
.pm-dots { display:flex; gap:2px; }
.pm-dot { width:4px; height:4px; border-radius:50%; }
.pm-count { font-size:8px; color:var(--text-muted); position:absolute; bottom:2px; }

.pm-legend {
  display:flex; gap:16px; justify-content:center; padding:4px 0 8px;
  font-size:10px; color:var(--text-muted);
}
.pm-dot-lg { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:3px; vertical-align:middle; }

/* Planner Add Item */
.planner-cat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.planner-cat-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px;
  background:var(--bg-input); border:1.5px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-normal); font-family:inherit;
  font-size:11px; font-weight:600; color:var(--text-secondary);
}
.planner-cat-btn span:first-child { font-size:20px; }
.planner-cat-btn:hover, .planner-cat-btn.active {
  border-color:var(--primary); background:rgba(108,92,231,0.12);
  color:var(--primary-light); transform:translateY(-2px);
}
.planner-cat-btn:active { transform:scale(0.95); }

/* AI Floating Assistant */
.planner-ai-fab {
  position:absolute; bottom:84px; right:20px; width:54px; height:54px;
  border-radius:50%; background:linear-gradient(135deg, #6C5CE7, #00B894);
  border:none; cursor:pointer; z-index:90;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(108,92,231,0.5); transition:all var(--transition-normal);
}
.planner-ai-fab:hover { transform:scale(1.1); }
.pai-fab-icon { font-size:24px; z-index:2; }
.pai-fab-pulse {
  position:absolute; inset:-4px; border-radius:50%;
  background:linear-gradient(135deg, rgba(108,92,231,0.3), rgba(0,184,148,0.3));
  animation:pulseGlow 2s ease-in-out infinite; z-index:1;
}

.planner-ai-panel {
  position:absolute; bottom:72px; left:12px; right:12px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  z-index:95; overflow:hidden; max-height:420px;
  display:flex; flex-direction:column;
}
.pai-header {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, rgba(108,92,231,0.1), rgba(0,184,148,0.05));
}
.pai-avatar { font-size:28px; }
.pai-title { font-size:14px; font-weight:700; display:block; }
.pai-status { font-size:10px; color:var(--success); display:block; }
.pai-close {
  margin-left:auto; background:none; border:none; color:var(--text-muted);
  font-size:16px; cursor:pointer; padding:4px 8px;
}

.pai-messages {
  flex:1; overflow-y:auto; padding:12px 14px;
  max-height:200px; display:flex; flex-direction:column; gap:8px;
}
.pai-msg { display:flex; gap:8px; align-items:flex-start; }
.pai-msg.user { justify-content:flex-end; }
.pai-msg-avatar { font-size:18px; flex-shrink:0; margin-top:4px; }
.pai-msg-bubble {
  max-width:85%; padding:10px 14px; border-radius:var(--radius-md);
  font-size:13px; line-height:1.6; white-space:pre-line;
}
.pai-msg.ai .pai-msg-bubble {
  background:var(--bg-input); color:var(--text-primary);
  border-bottom-left-radius:4px;
}
.pai-msg.user .pai-msg-bubble {
  background:var(--primary); color:white;
  border-bottom-right-radius:4px;
}

.pai-suggestions {
  display:flex; gap:6px; padding:8px 14px; overflow-x:auto;
  border-top:1px solid var(--border); scrollbar-width:none;
}
.pai-suggestions::-webkit-scrollbar { display:none; }
.pai-suggestion {
  white-space:nowrap; padding:6px 12px; font-size:11px; font-weight:600;
  background:var(--bg-input); border:1px solid var(--border); border-radius:20px;
  color:var(--text-secondary); cursor:pointer; transition:all var(--transition-fast);
  font-family:inherit; flex-shrink:0;
}
.pai-suggestion:hover { border-color:var(--primary); color:var(--primary-light); }

.pai-input-row {
  display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--border);
}
.pai-input {
  flex:1; padding:10px 14px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:20px; color:var(--text-primary); font-size:13px;
  font-family:inherit; outline:none;
}
.pai-input:focus { border-color:var(--primary); }
.pai-input::placeholder { color:var(--text-muted); }
.pai-send {
  width:38px; height:38px; border-radius:50%;
  background:var(--primary); border:none; color:white;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-fast);
}
.pai-send:hover { background:var(--primary-dark); transform:scale(1.05); }

/* ==================== ASSIGNMENT RECORD ==================== */
.assignment-intro-card {
  display:flex; align-items:center; gap:14px; padding:16px;
  background:linear-gradient(135deg, rgba(255,159,67,0.1), rgba(253,203,110,0.05));
  border:1px solid rgba(255,159,67,0.25); border-radius:var(--radius-lg);
  margin-bottom:20px;
}
.assignment-intro-icon { font-size:32px; flex-shrink:0; }
.assignment-intro-card h3 { font-size:14px; font-weight:700; }
.assignment-intro-card p { font-size:12px; color:var(--text-secondary); margin-top:2px; }

.assignment-type-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.assignment-type-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px;
  background:var(--bg-input); border:1.5px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-normal); font-family:inherit;
  font-size:10px; font-weight:600; color:var(--text-secondary);
}
.assignment-type-btn span:first-child { font-size:20px; }
.assignment-type-btn:hover, .assignment-type-btn.active {
  border-color:rgba(255,159,67,0.6); background:rgba(255,159,67,0.12);
  color:#FF9F43; transform:translateY(-2px);
}
.assignment-type-btn:active { transform:scale(0.95); }

.assignment-plan-cta {
  display:flex; align-items:center; gap:14px; padding:16px;
  background:linear-gradient(135deg, rgba(108,92,231,0.1), rgba(162,155,254,0.05));
  border:1.5px solid rgba(108,92,231,0.3); border-radius:var(--radius-lg);
  margin-bottom:20px; cursor:pointer; transition:all var(--transition-normal);
}
.assignment-plan-cta:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:0 4px 16px rgba(108,92,231,0.15); }
.assignment-plan-cta:active { transform:scale(0.98); }
.plan-cta-icon { font-size:28px; flex-shrink:0; }
.plan-cta-content { flex:1; }
.plan-cta-content h3 { font-size:14px; font-weight:700; color:var(--primary-light); }
.plan-cta-content p { font-size:12px; color:var(--text-secondary); margin-top:2px; }

/* ==================== ASSIGNMENT PLAN ==================== */
.assignment-summary-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; margin-bottom:16px;
}
.asm-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.asm-subject { font-size:13px; font-weight:700; }
.asm-type { font-size:11px; color:var(--text-muted); background:var(--bg-input); padding:2px 8px; border-radius:8px; }
.asm-title { font-size:17px; font-weight:800; margin-bottom:6px; }
.asm-desc { font-size:13px; color:var(--text-secondary); line-height:1.5; margin-bottom:10px; }
.asm-meta { display:flex; gap:16px; font-size:11px; color:var(--text-muted); margin-bottom:10px; }
.asm-meta i { margin-right:4px; }
.asm-progress-row { display:flex; align-items:center; gap:8px; }
.asm-progress-bar { flex:1; height:6px; background:var(--bg-input); border-radius:3px; overflow:hidden; }
.asm-progress-fill { height:100%; border-radius:3px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.asm-progress-text { font-size:12px; font-weight:700; color:var(--text-secondary); }

.plan-section { margin-bottom:16px; }
.plan-progress-mini { margin-bottom:12px; }
.plan-progress-bar { height:4px; background:var(--bg-input); border-radius:2px; overflow:hidden; }
.plan-progress-fill { height:100%; border-radius:2px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

.plan-steps { display:flex; flex-direction:column; gap:0; }
.plan-step {
  display:flex; align-items:flex-start; gap:0; position:relative;
  padding:2px 0; cursor:pointer; transition:all var(--transition-fast);
}
.plan-step:hover { transform:translateX(2px); }
.plan-step-check {
  width:36px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; z-index:2; cursor:pointer; padding-top:8px;
}
.plan-step-line {
  position:absolute; left:17px; top:30px; bottom:-2px; width:2px;
  background:var(--border); z-index:1;
}
.plan-step-line.last { display:none; }
.plan-step-line.done { background:var(--success); }
.plan-step-content {
  flex:1; padding:8px 12px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); margin-left:4px; margin-bottom:6px;
  transition:all var(--transition-fast);
}
.plan-step-content.highlight {
  border-color:rgba(108,92,231,0.4); background:rgba(108,92,231,0.08);
  box-shadow:0 2px 8px rgba(108,92,231,0.1);
}
.plan-step.done .plan-step-content { opacity:0.6; }
.plan-step.done .plan-step-title { text-decoration:line-through; }
.plan-step-header { display:flex; justify-content:space-between; margin-bottom:2px; }
.plan-step-num { font-size:10px; font-weight:700; color:var(--primary-light); }
.plan-step-date { font-size:10px; color:var(--text-muted); }
.plan-step-title { font-size:13px; font-weight:600; }

.ai-plan-card {
  background:linear-gradient(135deg, rgba(108,92,231,0.08), rgba(0,184,148,0.04));
  border:1px solid rgba(108,92,231,0.2); border-radius:var(--radius-lg);
  padding:16px; margin-bottom:16px;
}

.assignment-completed-badge {
  text-align:center; padding:12px; margin-top:8px;
  background:rgba(0,184,148,0.1); border:1px solid rgba(0,184,148,0.25);
  border-radius:var(--radius-md); color:var(--success); font-size:14px; font-weight:600;
}

/* ==================== ASSIGNMENT LIST ==================== */
.header-add-btn {
  background:rgba(108,92,231,0.15); border:1px solid rgba(108,92,231,0.3);
  border-radius:var(--radius-sm); color:var(--primary-light); width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:14px; transition:all var(--transition-fast);
}
.header-add-btn:hover { background:rgba(108,92,231,0.25); }

.assignment-stats-row { display:flex; gap:8px; margin-bottom:16px; }
.assignment-stat-card {
  flex:1; text-align:center; padding:12px 8px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-md);
}
.assignment-stat-num { font-size:22px; font-weight:800; display:block; }
.assignment-stat-label { font-size:10px; color:var(--text-muted); font-weight:600; }

.assignment-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:14px; margin-bottom:10px; cursor:pointer; transition:all var(--transition-normal);
  position:relative; overflow:hidden;
}
.assignment-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
}
.assignment-card.urgent::before { background:var(--accent); }
.assignment-card.warning::before { background:var(--warning); }
.assignment-card.normal::before { background:var(--primary); }
.assignment-card.completed::before { background:var(--success); }
.assignment-card.completed { opacity:0.7; }
.assignment-card:hover { border-color:var(--border-light); transform:translateY(-2px); box-shadow:var(--shadow); }
.assignment-card:active { transform:scale(0.98); }

.ac-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ac-subject-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; }
.ac-type { font-size:10px; color:var(--text-muted); background:var(--bg-input); padding:2px 6px; border-radius:4px; }
.ac-title { font-size:15px; font-weight:700; margin-bottom:4px; }
.ac-desc { font-size:12px; color:var(--text-secondary); line-height:1.4; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-bottom {}
.ac-meta { display:flex; gap:12px; font-size:11px; color:var(--text-muted); margin-bottom:8px; }
.ac-meta i { margin-right:3px; }
.ac-progress-row { display:flex; align-items:center; gap:8px; }
.ac-progress-bar { flex:1; height:4px; background:var(--bg-input); border-radius:2px; overflow:hidden; }
.ac-progress-fill { height:100%; border-radius:2px; transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.ac-progress-text { font-size:11px; font-weight:700; color:var(--text-secondary); }
.ac-plan-count { font-size:10px; color:var(--text-muted); }

.add-assignment-btn {
  width:100%; padding:14px; background:none; border:2px dashed var(--border);
  border-radius:var(--radius-lg); color:var(--text-muted); font-size:14px; font-weight:600;
  cursor:pointer; transition:all var(--transition-fast); font-family:inherit; margin-top:4px;
}
.add-assignment-btn:hover { border-color:var(--primary); color:var(--primary-light); background:rgba(108,92,231,0.05); }
.add-assignment-btn i { margin-right:6px; }

/* D-Day Badges */
.assignment-dday {
  font-size:11px; font-weight:700; padding:3px 8px; border-radius:8px;
  white-space:nowrap;
}
.assignment-dday.urgent { background:rgba(255,107,107,0.15); color:var(--accent); animation:pulseSmall 1.5s ease-in-out infinite; }
.assignment-dday.warning { background:rgba(243,156,18,0.15); color:var(--warning); }
.assignment-dday.normal { background:rgba(108,92,231,0.15); color:var(--primary-light); }
.assignment-dday.completed { background:rgba(0,184,148,0.15); color:var(--success); }

/* Upcoming Assignment Cards (Home Tab) */
.upcoming-assignments { display:flex; flex-direction:column; gap:8px; }
.upcoming-assignment-card {
  display:flex; align-items:center; gap:10px; padding:12px;
  background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-normal);
}
.upcoming-assignment-card:hover { border-color:var(--primary); transform:translateX(4px); }
.upcoming-assignment-card:active { transform:scale(0.98); }
.upcoming-assignment-card.urgent { border-left:3px solid var(--accent); }
.upcoming-assignment-card.warning { border-left:3px solid var(--warning); }
.upcoming-assignment-card.normal { border-left:3px solid var(--primary); }

.ua-left { flex-shrink:0; }
.ua-dday-badge {
  font-size:12px; font-weight:800; padding:6px 10px; border-radius:10px;
  text-align:center; min-width:48px;
}
.ua-dday-badge.urgent { background:rgba(255,107,107,0.15); color:var(--accent); }
.ua-dday-badge.warning { background:rgba(243,156,18,0.15); color:var(--warning); }
.ua-dday-badge.normal { background:rgba(108,92,231,0.15); color:var(--primary-light); }

.ua-center { flex:1; min-width:0; }
.ua-subject-row { display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.ua-subject-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.ua-subject { font-size:12px; font-weight:600; color:var(--text-secondary); }
.ua-type { font-size:10px; color:var(--text-muted); background:var(--bg-card); padding:1px 5px; border-radius:4px; }
.ua-title { font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:4px; }
.ua-progress-row { display:flex; align-items:center; gap:6px; }
.ua-progress-bar { flex:1; height:3px; background:var(--bg-card); border-radius:2px; overflow:hidden; }
.ua-progress-fill { height:100%; border-radius:2px; }
.ua-progress-text { font-size:10px; color:var(--text-muted); font-weight:600; }
.ua-right { flex-shrink:0; color:var(--text-muted); font-size:12px; }

/* Assignment Mini Row (Record Tab) */
.assignment-mini-row {
  display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid rgba(48,54,61,0.3); cursor:pointer; transition:all var(--transition-fast);
}
.assignment-mini-row:last-child { border-bottom:none; }
.assignment-mini-row:hover { transform:translateX(2px); }
.assignment-mini-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.assignment-mini-info { flex:1; min-width:0; }
.assignment-mini-subject { font-size:11px; color:var(--text-muted); font-weight:600; display:block; }
.assignment-mini-title { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.assignment-mini-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.assignment-mini-bar { width:50px; height:3px; background:var(--bg-input); border-radius:2px; overflow:hidden; }
.assignment-mini-bar-fill { height:100%; border-radius:2px; }

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes popBounce { 0%{transform:scale(0)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
@keyframes countUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 20px rgba(108,92,231,0.3)} 50%{box-shadow:0 0 30px rgba(108,92,231,0.5)} }
@keyframes pulseSmall { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
@keyframes pulseBtn { 0%,100%{box-shadow:0 0 0 0 rgba(108,92,231,0.3)} 50%{box-shadow:0 0 0 6px rgba(108,92,231,0)} }
@keyframes subtleShine { 0%,100%{opacity:1} 50%{opacity:0.7} }
@keyframes logoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes avatarGlow { 0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,0.3)} 50%{box-shadow:0 0 20px 4px rgba(255,215,0,0.15)} }
@keyframes waveAnim { 0%,100%{transform:scaleY(0.5)} 50%{transform:scaleY(1)} }

/* Stagger animation for list items */
.stagger-1 { animation-delay:0.05s; }
.stagger-2 { animation-delay:0.1s; }
.stagger-3 { animation-delay:0.15s; }
.stagger-4 { animation-delay:0.2s; }
.stagger-5 { animation-delay:0.25s; }
.stagger-6 { animation-delay:0.3s; }

.animate-in { animation:fadeIn 0.3s ease both; }
.animate-slide { animation:slideUp 0.35s ease both; }
.animate-slide-left { animation:slideLeft 0.3s ease both; }

/* ==================== ACADEMY GRID TIMETABLE ==================== */

/* Academy grid layout: 7 days (월~일) + period column */
.ac-grid {
  display:grid;
  grid-template-columns:16px repeat(7, 1fr);
  gap:2px;
  font-size:10px;
  margin-top:8px;
}
.ac-grid-header {
  font-size:11px; font-weight:700; text-align:center;
  padding:6px 2px; color:var(--text-secondary);
}
.ac-grid-header.weekend { color:#E056A0; }
.ac-grid-period {
  font-size:9px; font-weight:700; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  padding:2px 0;
}

/* Academy grid cells */
.ac-grid-cell {
  min-height:56px; border-radius:6px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:all var(--transition-fast); overflow:hidden;
  border:1px solid var(--border);
}
.ac-grid-cell.empty {
  background:var(--bg-input);
}
.ac-grid-cell.empty.editable { cursor:pointer; }
.ac-grid-cell.empty.editable:hover {
  background:rgba(224,86,160,0.08); border-color:rgba(224,86,160,0.3);
  transform:scale(1.03);
}
.ac-grid-cell.filled {
  cursor:pointer; padding:4px 2px 0;
}
.ac-grid-cell.filled:hover {
  transform:scale(1.03); box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.ac-grid-cell.selected {
  border:2px solid var(--primary-light) !important;
  box-shadow:0 0 10px rgba(108,92,231,0.4);
}

/* Cell inner content */
.ac-cell-name {
  font-size:9px; font-weight:700; text-align:center;
  line-height:1.2; padding:2px 2px 0; word-break:keep-all;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  flex:1; display:flex; align-items:center; justify-content:center;
}

/* Time ribbon */
.ac-cell-time-ribbon {
  width:100%; padding:2px 0; font-size:8px; font-weight:700;
  color:#fff; text-align:center; border-radius:0 0 5px 5px;
  margin-top:auto; letter-spacing:-0.3px;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

/* ==================== ACADEMY DETAIL PANEL ==================== */

.ac-detail-panel {
  background:var(--bg-card); border-radius:var(--radius-md);
  padding:16px; margin-bottom:16px; border:1px solid var(--border);
}
.ac-detail-header { margin-bottom:12px; }
.ac-detail-title-row {
  display:flex; align-items:center; justify-content:space-between;
}
.ac-detail-title {
  font-size:16px; font-weight:700;
}
.ac-detail-subtitle {
  font-size:13px; color:var(--text-secondary); margin-top:2px;
}
.ac-detail-close {
  background:none; border:none; color:var(--text-muted); font-size:16px;
  cursor:pointer; padding:4px 8px; border-radius:var(--radius-sm);
  transition:all var(--transition-fast);
}
.ac-detail-close:hover { color:var(--text-primary); background:var(--bg-input); }

.ac-detail-body { display:flex; flex-direction:column; gap:8px; }
.ac-detail-row {
  display:flex; align-items:center; gap:10px; font-size:13px;
  padding:6px 0; border-bottom:1px solid var(--border);
}
.ac-detail-row:last-child { border-bottom:none; }
.ac-detail-icon { font-size:16px; flex-shrink:0; width:24px; text-align:center; }
.ac-detail-label {
  font-weight:600; color:var(--text-secondary); min-width:60px;
}
.ac-detail-value { color:var(--text-primary); flex:1; }

.ac-detail-actions {
  display:flex; gap:8px; margin-top:12px;
}

/* ==================== TIMETABLE MANAGEMENT ==================== */

/* Header action button */
.header-action-btn {
  background:rgba(108,92,231,0.2); border:1px solid rgba(108,92,231,0.3);
  color:var(--primary-light); padding:6px 14px; border-radius:var(--radius-md);
  font-size:12px; font-weight:600; cursor:pointer; display:flex;
  align-items:center; gap:6px; transition:all var(--transition-fast);
  font-family:inherit;
}
.header-action-btn:hover { background:rgba(108,92,231,0.3); }

/* TT editor enhancements */
.tt-editor-cell.selected {
  border:2px solid var(--primary-light) !important;
  box-shadow:0 0 12px rgba(108,92,231,0.4);
  transform:scale(1.05);
}
.tt-editor-cell.editable { cursor:pointer; }
.tt-editor-cell.editable:hover { transform:scale(1.05); border-color:var(--primary-light) !important; }

/* TT edit panel */
.tt-edit-panel {
  background:var(--bg-input); border-radius:var(--radius-md);
  padding:12px; border:1px solid var(--border);
}
.tt-subject-selector {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.tt-subj-btn {
  padding:6px 12px; border-radius:var(--radius-md); font-size:12px;
  font-weight:600; border:1px solid var(--border); background:var(--bg-card);
  cursor:pointer; transition:all var(--transition-fast); font-family:inherit;
}
.tt-subj-btn:hover { background:var(--bg-card-hover); }
.tt-subj-btn.active {
  background:var(--primary)22; border-color:var(--primary-light);
  box-shadow:0 0 8px rgba(108,92,231,0.3);
}

/* Academy section */
.academy-list { display:flex; flex-direction:column; gap:8px; }
.academy-card {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px; background:var(--bg-input); border-radius:var(--radius-md);
  border:1px solid var(--border); transition:all var(--transition-fast);
}
.academy-card:hover { background:var(--bg-card-hover); }
.academy-card-left {
  display:flex; align-items:center; gap:12px; flex:1;
  padding-left:12px;
}
.academy-day-badge {
  width:32px; height:32px; border-radius:var(--radius-full);
  background:rgba(108,92,231,0.15); display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700;
  color:var(--primary-light); flex-shrink:0;
}
.academy-info { flex:1; min-width:0; }
.academy-name { font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:2px; }
.academy-detail {
  display:flex; gap:8px; font-size:11px; color:var(--text-secondary);
  flex-wrap:wrap;
}
.academy-memo { font-size:11px; color:var(--text-muted); margin-top:2px; }

.academy-card-actions { display:flex; gap:4px; }
.academy-edit-btn, .academy-del-btn {
  width:32px; height:32px; border-radius:var(--radius-sm);
  border:none; cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:12px; transition:all var(--transition-fast);
}
.academy-edit-btn {
  background:rgba(108,92,231,0.15); color:var(--primary-light);
}
.academy-edit-btn:hover { background:rgba(108,92,231,0.3); }
.academy-del-btn {
  background:rgba(255,107,107,0.15); color:var(--accent);
}
.academy-del-btn:hover { background:rgba(255,107,107,0.3); }

/* Academy add intro */
.academy-add-intro {
  display:flex; align-items:center; gap:16px; padding:16px;
  background:var(--bg-input); border-radius:var(--radius-md);
  border:1px solid var(--border); margin-bottom:16px;
}
.academy-add-intro h3 { font-size:14px; font-weight:600; color:var(--text-primary); }
.academy-add-intro p { font-size:12px; color:var(--text-secondary); margin-top:2px; }

/* Color picker */
.color-picker-row {
  display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;
}
.color-pick-btn {
  width:32px; height:32px; border-radius:var(--radius-full);
  border:3px solid transparent; cursor:pointer;
  transition:all var(--transition-fast); position:relative;
}
.color-pick-btn:hover { transform:scale(1.1); }
.color-pick-btn.active {
  border-color:var(--text-primary);
  box-shadow:0 0 12px rgba(255,255,255,0.3);
  transform:scale(1.15);
}
.color-pick-btn.active::after {
  content:'✓'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); color:#fff; font-size:14px;
  font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,0.5);
}

/* My menu */
.my-menu-list { display:flex; flex-direction:column; gap:4px; }
.my-menu-item {
  display:flex; align-items:center; gap:12px; padding:12px;
  border-radius:var(--radius-md); cursor:pointer;
  transition:all var(--transition-fast);
}
.my-menu-item:hover { background:var(--bg-input); }
.my-menu-icon {
  width:40px; height:40px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.my-menu-text { flex:1; min-width:0; }
.my-menu-title { font-size:14px; font-weight:600; color:var(--text-primary); display:block; }
.my-menu-desc { font-size:12px; color:var(--text-secondary); display:block; margin-top:2px; }

/* ==================== RESPONSIVE ==================== */
/* ==================== MOBILE-ONLY (< 768px) ==================== */
@media (max-width: 767px) {
  /* 모바일에서 상태바 간소화 */
  #tablet-status-bar { padding:8px 16px 6px; }
  .tablet-status-title { display:none; }
  
  /* 모바일 탭 콘텐츠 패딩 → 수평 0 */
  #tablet-content .tab-content { padding:0 0 16px; }
  #tablet-content .form-body { padding:12px 0 32px; }
  #tablet-content .screen-header { padding:14px 0; }
  
  /* 모바일 기록 그리드 → 2컬럼 */
  #tablet-content .record-type-grid {
    grid-template-columns:repeat(2, 1fr) !important;
  }
  
  /* 모바일 FAB */
  #tablet-content .fab {
    position:fixed; right:16px; bottom:20px;
  }
  
  /* 모바일 상세 화면 풀너비 */
  #tablet-content .full-screen { max-width:100%; }
  #tablet-content .onboarding-screen { max-width:100%; padding:24px 20px; }
  
  /* 모바일 활동 추가 유형 그리드 */
  #tablet-content .act-add-type-grid { grid-template-columns:repeat(2, 1fr); }
}

/* ==================== TABLET-ONLY (768px ~ 1279px) ==================== */
@media (min-width: 768px) and (max-width: 1279px) {
  /* 데스크톱 컨테이너 (멘토/원장) */
  #desktop-container { max-width:none; }
  #desktop-content { border-radius:16px; }
  .stats-row { grid-template-columns:repeat(2, 1fr); }
  .desk-tabs { padding:0 16px; }
  .desk-body { padding:16px; }
}

/* ===== 2축 9단계 질문 코칭 시스템 CSS ===== */

/* Coaching Banner */
.coaching-banner {
  display:flex; align-items:center; gap:12px; padding:14px;
  background:linear-gradient(135deg, rgba(108,92,231,0.12), rgba(224,86,160,0.08));
  border:1px solid rgba(108,92,231,0.2); border-radius:var(--radius-md);
  margin-bottom:16px;
}
.coaching-banner-icon { font-size:28px; }
.coaching-banner-text strong { color:var(--primary-light); font-size:14px; display:block; }
.coaching-banner-text p { font-size:11px; color:var(--text-secondary); margin-top:2px; line-height:1.4; }

/* Axis Selector */
.axis-selector { display:flex; gap:8px; }
.axis-btn {
  flex:1; padding:12px 8px; border-radius:var(--radius-md); border:1.5px solid var(--border);
  background:var(--bg-card); cursor:pointer; text-align:center; transition:all var(--transition-fast);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.axis-btn span { font-size:12px; font-weight:600; color:var(--text-primary); }
.axis-btn small { font-size:10px; color:var(--text-muted); }
.axis-btn .axis-icon { font-size:24px; }
.axis-btn.active { border-color:var(--primary); background:rgba(108,92,231,0.08); }
.axis-btn.active span { color:var(--primary-light); }

/* Input Hint */
.input-hint {
  font-size:11px; color:var(--text-secondary); margin-top:6px; padding:6px 10px;
  background:rgba(253,203,110,0.1); border-radius:6px; border:1px solid rgba(253,203,110,0.2);
  line-height:1.4;
}
.input-hint strong { color:var(--accent-warm); }

/* AI Diagnosis Card */
.ai-diagnosis-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px; margin-bottom:16px;
}
.diag-question-echo {
  padding:10px 12px; background:var(--bg-input); border-radius:8px; margin:10px 0 12px;
  font-size:12px; line-height:1.5;
}
.diag-q-label { color:var(--text-muted); font-weight:600; display:block; margin-bottom:4px; font-size:11px; }
.diag-q-text { color:var(--text-primary); }

/* Diagnosis Checklist */
.diag-checklist { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.diag-check-item {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--bg-input); border-radius:8px; font-size:12px;
}
.diag-check-item.pass { border-left:3px solid var(--success); }
.diag-check-item.fail { border-left:3px solid var(--accent); opacity:0.8; }
.diag-check-icon { font-size:14px; flex-shrink:0; }
.diag-check-label { font-weight:700; color:var(--text-primary); white-space:nowrap; }
.diag-check-detail { color:var(--text-secondary); flex:1; }

/* Diagnosis Result */
.diag-result {
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  background:linear-gradient(135deg, rgba(108,92,231,0.1), rgba(0,184,148,0.1));
  border-radius:8px; margin-bottom:12px; font-size:13px; font-weight:600;
}
.diag-arrow { font-size:16px; color:var(--primary-light); }
.diag-result-name { color:var(--text-primary); flex:1; }
.diag-xp { color:var(--xp-gold); font-weight:700; font-size:14px; }

/* Diagnosis Hint */
.diag-hint {
  display:flex; gap:8px; padding:10px 12px; background:rgba(253,203,110,0.08);
  border:1px solid rgba(253,203,110,0.2); border-radius:8px; margin-bottom:12px;
}
.diag-hint-icon { font-size:16px; flex-shrink:0; }
.diag-hint-text { font-size:11px; color:var(--text-secondary); line-height:1.5; }
.diag-hint-text strong { color:var(--text-primary); }

/* Diagnosis Actions */
.diag-actions { display:flex; gap:8px; }
.btn-challenge {
  flex:1; padding:12px; border-radius:var(--radius-md); border:none;
  background:linear-gradient(135deg, #FF6B6B, #E056A0); color:#fff;
  font-weight:700; font-size:13px; cursor:pointer; transition:all var(--transition-fast);
}
.btn-challenge:hover { transform:scale(1.02); box-shadow:0 4px 12px rgba(255,107,107,0.4); }

/* Challenge Mode */
.challenge-mode {
  background:var(--bg-card); border:1px solid rgba(255,107,107,0.3); border-radius:var(--radius-md);
  padding:16px; margin-bottom:16px;
}
.challenge-header { text-align:center; margin-bottom:12px; }
.challenge-header span { font-size:28px; }
.challenge-header h3 { color:var(--accent); margin:4px 0; font-size:15px; }
.challenge-header p { font-size:12px; color:var(--text-secondary); }
.challenge-result {
  display:flex; align-items:center; gap:8px; padding:10px; background:rgba(0,184,148,0.1);
  border-radius:8px; font-size:12px; font-weight:600;
}
.challenge-result .diag-xp { color:var(--success); }

/* Socrates Mode */
.socrates-entry { margin-bottom:8px; }
.btn-socrates {
  width:100%; display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:var(--bg-card); border:1.5px solid rgba(108,92,231,0.3); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition-fast);
}
.btn-socrates:hover { border-color:var(--primary-light); background:rgba(108,92,231,0.05); }
.socrates-icon { font-size:28px; }
.socrates-text { flex:1; text-align:left; }
.socrates-text strong { color:var(--primary-light); font-size:13px; display:block; }
.socrates-text small { color:var(--text-muted); font-size:11px; }

.socrates-mode {
  background:var(--bg-card); border:1px solid rgba(108,92,231,0.3); border-radius:var(--radius-md);
  padding:16px; margin-bottom:16px;
}
.socrates-header { text-align:center; margin-bottom:12px; }
.socrates-header span { font-size:28px; }
.socrates-header h3 { color:var(--primary-light); margin:4px 0; }
.socrates-header p { font-size:12px; color:var(--text-secondary); }

.socrates-chat { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.socrates-msg { display:flex; gap:8px; }
.socrates-msg.student { justify-content:flex-end; }
.socrates-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; background:rgba(108,92,231,0.1); flex-shrink:0; }
.socrates-bubble {
  max-width:80%; padding:10px 12px; border-radius:12px; font-size:12px; line-height:1.5;
  background:var(--bg-input); color:var(--text-primary);
}
.socrates-bubble.student-bubble { background:rgba(108,92,231,0.1); border-radius:12px 12px 4px 12px; }
.socrates-stage-tag {
  display:inline-block; margin-top:6px; padding:3px 8px; border-radius:4px;
  font-size:10px; font-weight:600; color:var(--primary-light); background:rgba(108,92,231,0.1);
}

.socrates-input-row { display:flex; gap:8px; }
.socrates-complete {
  text-align:center; padding:12px; background:rgba(0,184,148,0.08);
  border-radius:8px; border:1px solid rgba(0,184,148,0.2);
}
.socrates-complete-icon { font-size:32px; margin-bottom:4px; }
.socrates-complete p { font-size:13px; margin:4px 0; }
.socrates-xp { color:var(--xp-gold); font-weight:700; font-size:14px; }

/* Classification Table (Accordion) */
.classification-details { margin-bottom:12px; }
.classification-summary {
  cursor:pointer; padding:10px 14px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); font-size:13px; font-weight:600; color:var(--text-primary);
  display:flex; align-items:center; gap:8px; list-style:none;
}
.classification-summary::-webkit-details-marker { display:none; }
.classification-table {
  margin-top:6px; padding:12px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.ct-section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.ct-section-title span { font-size:13px; font-weight:700; color:var(--text-primary); }
.ct-section-title small { font-size:10px; color:var(--text-muted); }
.ct-group-header {
  padding:4px 8px; border-radius:4px; font-size:11px; font-weight:700; margin:6px 0 4px;
}
.ct-group-a { background:rgba(255,107,107,0.1); color:var(--question-a); }
.ct-group-b { background:rgba(108,92,231,0.1); color:var(--question-b); }
.ct-group-c { background:rgba(0,184,148,0.1); color:var(--question-c); }
.ct-row {
  display:flex; align-items:center; gap:6px; padding:5px 8px; font-size:11px;
  border-bottom:1px solid var(--border);
}
.ct-row:last-child { border-bottom:none; }
.ct-id { font-weight:700; color:var(--text-primary); min-width:28px; }
.ct-label { color:var(--text-secondary); min-width:80px; }
.ct-name { flex:1; color:var(--text-muted); }
.ct-xp { font-weight:700; color:var(--xp-gold); }
.ct-note {
  margin-top:10px; padding:8px 10px; background:rgba(253,203,110,0.08);
  border-radius:6px; font-size:10px; color:var(--text-secondary); line-height:1.5;
}
.ct-note strong { color:var(--accent-warm); }

/* Growth 2-Axis Stats */
.growth-stats-2axis { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.growth-stat-box {
  padding:14px; background:var(--bg-input); border-radius:var(--radius-md);
  text-align:center; border:1px solid var(--border);
}
.growth-stat-header { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:6px; }
.growth-stat-header span { font-size:13px; font-weight:700; color:var(--text-primary); }
.growth-stat-header .growth-stat-icon { font-size:20px; }
.growth-stat-stars { font-size:18px; color:var(--xp-gold); letter-spacing:2px; margin-bottom:4px; }
.growth-stat-detail { font-size:13px; font-weight:700; color:var(--primary-light); }
.growth-stat-sub { font-size:10px; color:var(--text-muted); margin-top:2px; }

/* KPI Grid */
.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kpi-item {
  padding:12px; background:var(--bg-input); border-radius:var(--radius-md);
  text-align:center; border:1px solid var(--border);
}
.kpi-value { font-size:22px; font-weight:800; display:block; }
.kpi-label { font-size:11px; color:var(--text-secondary); display:block; margin-top:2px; }
.kpi-target { font-size:10px; color:var(--text-muted); display:block; margin-top:2px; }

/* Question Input Wrap & Image Attach */
.question-input-wrap { position:relative; }
.q-attach-bar {
  display:flex; align-items:center; gap:8px; padding:8px 0 0;
}
.q-attach-btn {
  display:flex; align-items:center; gap:5px; padding:7px 12px;
  background:var(--bg-input); border:1px solid var(--border); border-radius:20px;
  color:var(--text-secondary); font-size:12px; font-weight:600; cursor:pointer;
  transition:all var(--transition-fast);
}
.q-attach-btn i { font-size:14px; color:var(--primary-light); }
.q-attach-btn:hover { border-color:var(--primary); background:rgba(108,92,231,0.08); color:var(--primary-light); }
.q-attach-btn:active { transform:scale(0.96); }
.q-attach-hint { font-size:10px; color:var(--text-muted); margin-left:auto; }

/* Image Preview */
.q-image-preview-row {
  display:flex; gap:8px; padding:8px 0; flex-wrap:wrap;
}
.q-image-preview-item {
  position:relative; width:72px; height:72px; border-radius:10px; overflow:hidden;
  border:2px solid var(--border); flex-shrink:0;
}
.q-image-preview-item img {
  width:100%; height:100%; object-fit:cover;
}
.q-image-remove {
  position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%;
  background:rgba(0,0,0,0.65); color:#fff; border:none; font-size:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-fast);
}
.q-image-remove:hover { background:var(--accent); transform:scale(1.1); }

/* Field Label Row (label + button 나란히) */
.field-label-row {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}

/* 정율질문방 버튼 */
.btn-jyqr {
  position:relative; display:inline-flex; align-items:center; gap:5px;
  padding:6px 14px; border-radius:20px; border:1.5px solid rgba(255,159,67,0.5);
  background:linear-gradient(135deg, rgba(255,159,67,0.12), rgba(255,107,107,0.08));
  color:#FF9F43; font-size:11px; font-weight:700; cursor:pointer;
  transition:all var(--transition-fast); overflow:hidden;
}
.btn-jyqr i { font-size:10px; }
.btn-jyqr:hover {
  border-color:#FF9F43; background:linear-gradient(135deg, rgba(255,159,67,0.2), rgba(255,107,107,0.15));
  transform:scale(1.03); box-shadow:0 2px 12px rgba(255,159,67,0.3);
}
.btn-jyqr:active { transform:scale(0.97); }

/* 펄스 애니메이션 — 살아있는 느낌 */
.jyqr-pulse {
  position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:#FF9F43;
  animation:jyqr-blink 2s ease-in-out infinite;
}
@keyframes jyqr-blink {
  0%, 100% { opacity:1; box-shadow:0 0 0 0 rgba(255,159,67,0.6); }
  50% { opacity:0.6; box-shadow:0 0 0 4px rgba(255,159,67,0); }
}

/* ==================== 시험 관리 (Exam) ==================== */

/* 기록탭 시험 미니 카드 */
.exam-mini-row {
  display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid var(--bg-input, rgba(255,255,255,0.06));
  cursor:pointer;
}
.exam-mini-row:last-child { border-bottom:none; }
.exam-mini-icon { font-size:20px; flex-shrink:0; }
.exam-mini-info { flex:1; min-width:0; }
.exam-mini-name { font-size:14px; font-weight:700; color:#FFFFFF; display:block; }
.exam-mini-subjects { font-size:12px; color:var(--text-secondary); display:block; margin-top:3px; }
.exam-mini-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.exam-mini-bar { width:48px; height:4px; background:var(--bg-input, rgba(255,255,255,0.1)); border-radius:2px; overflow:hidden; }
.exam-mini-bar-fill { height:100%; border-radius:2px; transition:width 0.3s ease; }

/* 시험 목록 카드 */
.exam-card {
  background:var(--bg-card);
  border:1.5px solid var(--border-light);
  border-radius:16px; padding:18px; margin-bottom:12px;
  cursor:pointer; transition:all 0.25s ease;
}
.exam-card:hover { background:var(--bg-card-hover); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.2); }
.exam-card.completed { opacity:0.55; }
.exam-card-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.exam-card-icon { font-size:28px; flex-shrink:0; }
.exam-card-info { flex:1; min-width:0; }
.exam-card-name { font-size:16px; font-weight:800; color:#FFFFFF; letter-spacing:-0.2px; }
.exam-card-meta { font-size:12px; color:var(--text-secondary); margin-top:3px; font-weight:500; }
.exam-card-dday { flex-shrink:0; }

/* 과목 칩 */
.exam-card-subjects { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.exam-subject-chip {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:8px;
  background:rgba(255,255,255,0.03);
}
.exam-subj-name { font-size:13px; font-weight:700; color:#FFFFFF; width:44px; flex-shrink:0; }
.exam-subj-bar { flex:1; height:5px; background:var(--bg-input); border-radius:3px; overflow:hidden; }
.exam-subj-bar-fill { height:100%; border-radius:3px; transition:width 0.3s; }
.exam-subj-pct { font-size:12px; font-weight:700; width:36px; text-align:right; color:var(--text-secondary); flex-shrink:0; }

/* 평균 준비도 바 */
.exam-card-bottom { display:flex; align-items:center; gap:8px; }
.exam-avg-label { font-size:12px; color:var(--text-secondary); white-space:nowrap; font-weight:500; }
.exam-avg-bar { flex:1; height:6px; background:var(--bg-input); border-radius:3px; overflow:hidden; }
.exam-avg-bar-fill { height:100%; border-radius:3px; transition:width 0.3s; }
.exam-avg-pct { font-size:14px; font-weight:800; width:40px; text-align:right; }

/* 시험 상세 화면 */
.exam-detail-summary {
  display:flex; align-items:center; gap:18px;
  padding:18px; border-radius:16px;
  background:var(--bg-card);
  border:1.5px solid var(--border-light);
  margin-bottom:18px;
}
.exam-detail-dday { flex-shrink:0; }
.exam-detail-meta { display:flex; flex-direction:column; gap:8px; font-size:14px; color:#E8E8E8; font-weight:500; }
.exam-detail-meta i { margin-right:8px; color:var(--text-secondary); }

/* 과목별 상세 카드 */
.exam-subject-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px; padding:16px; margin-bottom:12px;
}
.exam-subj-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.exam-subj-color-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.exam-subj-title { font-size:16px; font-weight:800; color:#FFFFFF; flex:1; letter-spacing:-0.2px; }
.exam-subj-date { font-size:12px; color:var(--text-secondary); font-weight:500; }
.exam-subj-dday { font-size:11px; font-weight:800; color:var(--primary-light); }

.exam-subj-range {
  font-size:13px; color:var(--text-secondary); line-height:1.6;
  padding:10px 12px; border-radius:10px;
  background:var(--bg-elevated); margin-bottom:10px;
  border:1px solid var(--border);
}

.exam-subj-readiness-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.exam-subj-readiness-label { font-size:12px; color:var(--text-secondary); width:40px; flex-shrink:0; font-weight:500; }
.exam-subj-readiness-bar { flex:1; height:6px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; }
.exam-subj-readiness-fill { height:100%; border-radius:3px; transition:width 0.2s; }
.exam-subj-readiness-pct { font-size:14px; font-weight:800; width:36px; text-align:right; }

.exam-readiness-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px; outline:none;
  background:rgba(255,255,255,0.1); margin-top:4px;
}
.exam-readiness-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--primary); cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}

.exam-subj-notes {
  font-size:12px; color:var(--text-secondary); padding:8px 12px;
  border-left:3px solid var(--primary-light); margin:8px 0;
  background:rgba(108,92,231,0.04); border-radius:0 8px 8px 0;
  line-height:1.5;
}

.exam-subj-actions { display:flex; gap:6px; margin-top:8px; }
.exam-subj-note-btn {
  padding:6px 12px; border-radius:8px; font-size:12px;
  background:var(--bg-elevated); color:var(--text-secondary);
  border:1px solid var(--border); cursor:pointer; transition:all 0.2s;
  font-weight:600;
}
.exam-subj-note-btn:hover { background:rgba(108,92,231,0.1); color:#FFFFFF; border-color:var(--primary); }

/* 시험 추가 화면 */
.exam-type-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
.exam-type-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:12px 4px; border-radius:12px; font-size:12px; font-weight:600;
  background:var(--bg-input, rgba(255,255,255,0.06));
  color:var(--text-muted); border:2px solid transparent;
  cursor:pointer; transition:all 0.2s;
}
.exam-type-btn.active {
  border-color:var(--primary); color:var(--primary);
  background:rgba(224,86,160,0.1);
}
.exam-type-btn:hover { background:rgba(255,255,255,0.1); }

/* 과목 추가 카드 레이아웃 */
.exam-add-subj-card {
  background:var(--bg-input, rgba(255,255,255,0.04));
  border-radius:12px; padding:12px; margin-bottom:10px;
  display:flex; flex-direction:column; gap:8px;
}
.exam-add-subj-top {
  display:flex; gap:8px; align-items:center;
}
.exam-add-subj-top .exam-subj-input { flex:1; }
.exam-add-subj-top .exam-date-input { flex:1; }
.exam-add-subj-card .exam-range-input { width:100%; }

.exam-add-subject-row {
  display:flex; gap:6px; align-items:center; margin-bottom:8px;
}
.exam-subj-input { flex:1; min-width:0; }
.exam-range-input { flex:2; min-width:0; }
.exam-date-input { flex:1; min-width:0; }
.exam-remove-subj-btn {
  width:28px; height:28px; border-radius:50%; border:none;
  background:rgba(255,107,107,0.15); color:#FF6B6B;
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all 0.2s;
}
.exam-remove-subj-btn:hover { background:rgba(255,107,107,0.3); }

/* ==================== EXAM ADD 3-MODE REDESIGN (Readability Enhanced) ==================== */

/* ── Mode Selection ── */
.ea-mode-title {
  font-family:'Pretendard Variable','Noto Sans KR',sans-serif;
  font-size:20px; font-weight:800; color:#FFFFFF;
  text-align:center; margin:12px 0 24px; line-height:1.4;
  letter-spacing:-0.3px;
}
.ea-mode-grid { display:flex; flex-direction:column; gap:12px; }
.ea-mode-card {
  display:flex; align-items:center; gap:16px;
  padding:20px 18px; border-radius:16px;
  background:var(--bg-card);
  border:1.5px solid var(--border-light);
  cursor:pointer; transition:all 0.25s ease; position:relative;
  text-align:left;
}
.ea-mode-card:hover {
  border-color:#C8A96E; background:rgba(200,169,110,0.06);
  transform:translateX(4px);
  box-shadow:0 4px 20px rgba(200,169,110,0.1);
}
.ea-mode-card:active { transform:scale(0.98); }
.ea-mode-icon {
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; flex-shrink:0;
}
.ea-mode-label {
  font-family:'Pretendard Variable','Noto Sans KR',sans-serif;
  font-size:18px; font-weight:800; color:#FFFFFF;
  letter-spacing:-0.3px;
}
.ea-mode-desc {
  font-size:14px; color:var(--text-secondary); margin-top:3px; line-height:1.5;
  font-weight:400;
}
.ea-mode-arrow {
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); font-size:14px; transition:all 0.2s;
}
.ea-mode-card:hover .ea-mode-arrow { color:#C8A96E; transform:translateY(-50%) translateX(3px); }

/* ── Toggle Row (중간/기말) ── */
.ea-toggle-row {
  display:flex; gap:4px; margin-bottom:18px;
  background:var(--bg-input);
  border-radius:12px; padding:4px;
}
.ea-toggle-btn {
  flex:1; padding:12px 0; border-radius:10px; border:none;
  font-family:'Pretendard Variable','Noto Sans KR',sans-serif;
  font-size:15px; font-weight:700; cursor:pointer;
  background:transparent; color:var(--text-secondary); transition:all 0.2s;
}
.ea-toggle-btn.active {
  background:var(--primary); color:white;
  box-shadow:0 3px 12px rgba(108,92,231,0.35);
}

/* ── Form Labels (Enhanced) ── */
.ea-mode-card ~ .form-label,
.ea-toggle-row ~ .form-label,
.ea-period-bar + .form-label,
.ea-period-field + .form-label,
.ea-quick-subjects + .form-input + .form-label,
[class*="ea-"] ~ .form-label {
  font-size:16px; font-weight:700; color:#E8E8E8;
  margin-top:16px; margin-bottom:8px;
}

/* ── Period Bar ── */
.ea-period-bar {
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.ea-period-field {
  flex:1; display:flex; align-items:center; gap:10px;
  background:var(--bg-elevated);
  border:1.5px solid var(--border-light);
  border-radius:12px; padding:13px 14px; transition:all 0.2s;
}
.ea-period-field:focus-within {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(108,92,231,0.12);
}
.ea-period-field i { color:#C8A96E; font-size:16px; flex-shrink:0; }
.ea-period-input {
  flex:1; background:transparent !important; border:none !important;
  color:#FFFFFF; font-size:15px; font-weight:600;
  padding:0 !important; margin:0; outline:none;
  font-family:'Roboto','Pretendard Variable',sans-serif;
}
.ea-period-arrow { color:var(--text-muted); font-size:14px; flex-shrink:0; }
.ea-single-date { max-width:300px; }

/* ── Input Fields (Brighter BG + Vertical Center) ── */
.ea-mode-card ~ .form-input,
.ea-toggle-row ~ .form-input,
[class*="ea-"] ~ .form-input,
.ea-modal-body .form-input {
  background:var(--bg-elevated);
  border:1.5px solid var(--border-light);
  color:#FFFFFF; font-size:16px; font-weight:600;
  padding:14px 16px; border-radius:12px;
  line-height:1.4;
  display:flex; align-items:center;
}
.ea-modal-body .form-input:focus,
[class*="ea-"] ~ .form-input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(108,92,231,0.12);
}
.ea-modal-body .form-input::placeholder,
[class*="ea-"] ~ .form-input::placeholder {
  color:var(--text-muted); opacity:0.7;
}

/* ── Section Label ── */
.ea-section-label {
  display:flex; align-items:center; justify-content:space-between;
  margin:16px 0 10px; padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.ea-section-label span:first-child {
  font-family:'Pretendard Variable','Noto Sans KR',sans-serif;
  font-size:15px; font-weight:700; color:#E8E8E8;
}
.ea-section-count {
  font-family:'Roboto','Pretendard Variable',sans-serif;
  font-size:12px; font-weight:800; color:var(--primary-light);
  background:rgba(108,92,231,0.15); padding:3px 12px; border-radius:10px;
}

/* ── Date Card (중간·기말) ── COMPACT REDESIGN */
.ea-date-card {
  background:var(--bg-card);
  border:1.5px solid var(--border-light);
  border-radius:12px; padding:10px 12px; margin-bottom:8px;
}
.ea-date-card.has-subj { padding:10px 12px 8px; }
.ea-date-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px;
}
.ea-date-badge {
  font-family:'Roboto','Pretendard Variable',sans-serif;
  font-size:15px; font-weight:800; color:#FFFFFF;
  display:flex; align-items:center; gap:5px;
}
.ea-date-day {
  font-size:16px; font-weight:900; color:#FFFFFF;
  letter-spacing:-0.3px;
}
.ea-date-dayname {
  font-size:13px; font-weight:600; color:var(--text-secondary);
}
/* 과목수 배지 - Pill Shape */
.ea-date-pill {
  font-family:'Roboto','Pretendard Variable',sans-serif;
  font-size:11px; font-weight:700; color:var(--text-muted);
  background:rgba(255,255,255,0.06); padding:3px 10px; border-radius:20px;
  letter-spacing:0.2px;
}
.ea-date-pill.filled {
  color:var(--primary-light); background:rgba(108,92,231,0.15);
  font-weight:800;
}

/* ── Period Slots (교시별 인라인) ── */
.ea-period-slots {
  display:flex; flex-direction:column; gap:4px;
}
.ea-slot {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px;
  transition:all 0.15s ease; cursor:pointer;
}
.ea-slot.empty {
  background:rgba(255,255,255,0.03);
  border:1px dashed var(--border);
}
.ea-slot.empty:hover {
  background:rgba(108,92,231,0.06); border-color:var(--primary-light);
}
.ea-slot.empty:active { transform:scale(0.98); }
.ea-slot.filled {
  background:var(--bg-elevated);
  border:1px solid var(--border);
}
.ea-slot-period {
  font-family:'Roboto','Pretendard Variable',sans-serif;
  font-size:11px; font-weight:700; color:var(--text-muted);
  min-width:36px; flex-shrink:0;
}
.ea-slot-subj {
  font-size:14px; font-weight:700; flex:1;
}
.ea-slot-hint {
  font-size:12px; color:var(--text-muted); flex:1;
  opacity:0.7;
}
.ea-slot-arrow {
  font-size:10px; color:var(--text-muted); opacity:0.4;
}
.ea-slot-clear {
  width:22px; height:22px; border-radius:50%; border:none;
  background:rgba(255,107,107,0.12); color:#FF6B6B; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:10px;
  flex-shrink:0; transition:all 0.2s;
}
.ea-slot-clear:hover { background:rgba(255,107,107,0.3); }

/* ── Period Count Row ── */
.ea-period-count-row {
  display:flex; gap:8px; margin-bottom:14px;
}
.ea-period-count-btn {
  flex:1; padding:10px 0; border-radius:10px; border:1.5px solid var(--border-light);
  background:transparent; color:var(--text-secondary);
  font-family:'Pretendard Variable','Noto Sans KR',sans-serif;
  font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s;
}
.ea-period-count-btn.active {
  border-color:var(--primary); color:var(--primary);
  background:rgba(108,92,231,0.1);
}
.ea-period-count-btn:hover { border-color:var(--primary-light); }

/* ── Period Picker Bottom Sheet ── */
.ea-pp-hint {
  display:flex; align-items:center;
  padding:10px 14px; border-radius:10px; margin-bottom:14px;
  background:rgba(108,92,231,0.08);
  border:1px solid rgba(108,92,231,0.15);
  font-size:13px; color:var(--primary-light); font-weight:600;
}
.ea-pp-hint strong { color:#FFFFFF; margin-left:4px; }
.ea-pp-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
  margin-bottom:8px;
}
.ea-pp-subj-btn {
  padding:10px 4px; border-radius:10px;
  border:1.5px solid var(--border-light);
  background:var(--bg-elevated); color:#FFFFFF;
  font-size:13px; font-weight:600; cursor:pointer;
  transition:all 0.2s; text-align:center;
  font-family:'Pretendard Variable','Noto Sans KR',sans-serif;
}
.ea-pp-subj-btn:hover {
  border-color:var(--subj-color, var(--primary));
  background:rgba(108,92,231,0.08);
}
.ea-pp-subj-btn:active {
  transform:scale(0.95);
  background:rgba(108,92,231,0.15);
  border-color:var(--subj-color, var(--primary));
}
/* Legacy subject row styles (kept for exam detail view) */
.ea-subj-row {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:8px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
}
.ea-subj-color { width:4px; height:24px; border-radius:2px; flex-shrink:0; }
.ea-subj-name {
  font-size:13px; font-weight:700; color:#FFFFFF; min-width:40px;
}
.ea-subj-time {
  font-size:12px; color:var(--text-secondary); flex-shrink:0; font-weight:500;
}
.ea-subj-range {
  flex:1; font-size:12px; color:var(--text-secondary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ea-subj-del {
  width:22px; height:22px; border-radius:50%; border:none;
  background:rgba(255,107,107,0.12); color:#FF6B6B; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:10px;
  flex-shrink:0; transition:all 0.2s;
}
.ea-subj-del:hover { background:rgba(255,107,107,0.3); }

.ea-add-subj-btn {
  width:100%; padding:7px; margin-top:4px;
  border:1.5px dashed rgba(108,92,231,0.3);
  border-radius:8px; background:transparent;
  color:var(--primary-light); font-size:12px; font-weight:700;
  cursor:pointer; transition:all 0.2s;
  font-family:'Pretendard Variable','Noto Sans KR',sans-serif;
}
.ea-add-subj-btn:hover {
  border-color:var(--primary); background:rgba(108,92,231,0.08);
}

/* ── Quick Subject Buttons ── */
.ea-quick-subjects {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;
}
.ea-quick-subj-btn {
  padding:8px 14px; border-radius:10px;
  font-size:13px; font-weight:600; cursor:pointer;
  border:1.5px solid var(--border-light);
  background:var(--bg-elevated);
  color:var(--text-secondary); transition:all 0.2s;
  font-family:'Pretendard Variable','Noto Sans KR',sans-serif;
}
.ea-quick-subj-btn:hover { border-color:var(--primary-light); color:#FFFFFF; }
.ea-quick-subj-btn.active {
  border-color:#C8A96E; color:#C8A96E;
  background:rgba(200,169,110,0.1);
  font-weight:700;
}

/* ── Textarea ── */
.ea-textarea {
  min-height:90px; resize:vertical; line-height:1.7; font-family:inherit;
}

/* ── Hint Box ── */
.ea-hint-box {
  display:flex; align-items:center; gap:12px;
  padding:18px; border-radius:14px;
  background:rgba(108,92,231,0.06);
  border:1.5px dashed rgba(108,92,231,0.2);
  color:var(--text-secondary); font-size:14px; line-height:1.5;
}
.ea-hint-box i { color:var(--primary-light); font-size:18px; flex-shrink:0; }

/* ── Mock Preset ── */
.ea-mock-intro {
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-radius:14px; margin-bottom:18px;
  background:rgba(0,184,148,0.08);
  border:1.5px solid rgba(0,184,148,0.18);
  font-size:14px; color:#FFFFFF; font-weight:500;
}
.ea-preset-grid { display:flex; flex-direction:column; gap:8px; }
.ea-preset-btn {
  display:flex; align-items:center; gap:14px;
  padding:15px 18px; border-radius:14px; cursor:pointer;
  background:var(--bg-card);
  border:1.5px solid var(--border-light);
  transition:all 0.25s ease; position:relative; text-align:left;
}
.ea-preset-btn:hover {
  border-color:rgba(0,184,148,0.5); background:rgba(0,184,148,0.05);
  transform:translateX(3px);
}
.ea-preset-btn.active {
  border-color:#00B894; background:rgba(0,184,148,0.1);
  box-shadow:0 0 0 3px rgba(0,184,148,0.1);
}
.ea-preset-month {
  font-family:'Roboto','Pretendard Variable',sans-serif;
  font-size:15px; font-weight:800; color:var(--primary-light);
  background:rgba(108,92,231,0.15); padding:5px 12px; border-radius:8px;
  min-width:40px; text-align:center;
}
.ea-preset-btn.active .ea-preset-month {
  background:#00B894; color:white;
}
.ea-preset-name {
  font-size:14px; font-weight:600; color:#FFFFFF; flex:1;
}
.ea-preset-check {
  color:#00B894; font-size:18px; flex-shrink:0;
}

/* ── Mock Subject Rows ── */
.ea-mock-subjects { display:flex; flex-direction:column; gap:8px; }
.ea-mock-subj-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
}
.ea-mock-subj-info { flex:1; min-width:0; }
.ea-mock-subj-name {
  font-size:14px; font-weight:700; color:#FFFFFF; display:block;
}
.ea-mock-subj-time {
  font-size:12px; color:var(--text-secondary); display:block; margin-top:2px;
  font-weight:500;
}
.ea-mock-subj-range {
  font-size:12px; color:var(--text-secondary); flex-shrink:0; max-width:40%;
  text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ea-mock-custom-note {
  display:flex; align-items:center; gap:10px;
  margin-top:12px; padding:12px 16px; border-radius:10px;
  background:rgba(253,203,110,0.08);
  border:1px solid rgba(253,203,110,0.12);
  font-size:13px; color:var(--text-secondary); font-weight:500;
}
.ea-mock-custom-note i { color:#F39C12; font-size:13px; }

/* ── Bottom Bar Save Button ── */
.ea-bottom-bar {
  position:fixed; bottom:0; left:0; right:0;
  padding:14px 20px 20px; z-index:50;
  background:linear-gradient(transparent, var(--bg-dark) 35%);
  padding-top:36px;
}
.ea-save-btn {
  width:100% !important; padding:18px 24px !important;
  font-size:17px !important; font-weight:800 !important;
  border-radius:14px !important;
  letter-spacing:-0.2px;
  min-height:56px;
}
.ea-save-btn:disabled {
  opacity:0.35; cursor:not-allowed; pointer-events:none;
}

/* ── Subject Add Modal ── */
.ea-modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.65); z-index:200;
  align-items:flex-end; justify-content:center; padding:0;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.ea-modal-overlay.open { display:flex; }
.ea-modal {
  background:var(--bg-card); border-radius:20px 20px 0 0;
  width:100%; max-width:500px; max-height:80vh; overflow-y:auto;
  animation:eaSlideUp 0.3s ease;
  border-top:1px solid var(--border-light);
}
@keyframes eaSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.ea-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--border);
}
.ea-modal-header h3 {
  font-family:'Pretendard Variable','Noto Sans KR',sans-serif;
  font-size:17px; font-weight:800; color:#FFFFFF; margin:0;
}
.ea-modal-close {
  width:34px; height:34px; border-radius:50%; border:none;
  background:var(--bg-input);
  color:var(--text-secondary); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:15px;
  transition:all 0.2s;
}
.ea-modal-close:hover { background:var(--bg-elevated); color:#FFFFFF; }
.ea-modal-body { padding:22px; }

/* AI 학습 계획 */
.exam-ai-plan { padding:4px 0; }
.exam-ai-plan-header {
  display:flex; justify-content:space-between; align-items:center;
  font-size:14px; font-weight:700; color:var(--text-main); margin-bottom:12px;
}
.exam-ai-plan-content {
  font-size:13px; line-height:1.7; color:var(--text-main);
}
.exam-ai-plan-content h4 {
  color:var(--primary); font-size:14px; margin:12px 0 6px;
}
.exam-ai-plan-content ul {
  padding-left:18px; margin:4px 0;
}
.exam-ai-plan-content li {
  margin-bottom:4px; color:var(--text-main);
}
.exam-ai-plan-content strong {
  color:var(--primary);
}
.exam-ai-plan-content p {
  margin:4px 0;
}

/* 섹션 라벨 */
.section-label {
  font-size:13px; font-weight:700; color:var(--text-muted);
  margin-bottom:10px; padding-left:2px;
}

/* 헤더 액션 버튼 */
.header-action-btn {
  width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.08); color:var(--text-main);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.header-action-btn:hover { background:rgba(255,255,255,0.15); }

/* ==================== AI Loading Spinner ==================== */
.diag-loading-spinner {
  width:32px; height:32px; margin:0 auto;
  border:3px solid var(--bg-input);
  border-top:3px solid var(--primary);
  border-radius:50%;
  animation:diag-spin 0.8s linear infinite;
}
@keyframes diag-spin {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
.loading-spinner-wrap { display:flex; justify-content:center; align-items:center; }

/* ==================== Typing Dots (Socrates) ==================== */
.typing-dots { display:flex; gap:4px; padding:4px 0; align-items:center; }
.typing-dots span {
  width:6px; height:6px; border-radius:50%;
  background:var(--text-muted); opacity:0.4;
  animation:typing-bounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay:0.2s; }
.typing-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform:translateY(0); opacity:0.4; }
  30% { transform:translateY(-6px); opacity:1; }
}

/* ==================== Diagnosis Check Fail State ==================== */
.diag-check-item.fail { opacity:0.9; }
.diag-check-item.fail .diag-check-icon { color:#E74C3C; }
.diag-check-item.fail .diag-check-detail { color:var(--text-muted); }

/* ==================== Socrates Chat Scroll ==================== */
.socrates-chat { max-height:320px; overflow-y:auto; scroll-behavior:smooth; }

/* ==================== Classmate Management ==================== */
.cm-list { display:flex; flex-direction:column; gap:6px; }
.cm-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  background:var(--bg-input); transition:all 0.15s ease;
}
.cm-item-editing { border:2px solid var(--primary-light); background:rgba(224,86,160,0.05); }
.cm-avatar {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:14px; flex-shrink:0;
}
.cm-info { flex:1; min-width:0; }
.cm-name { font-size:13px; font-weight:700; color:var(--text-primary); }
.cm-detail { font-size:10px; color:var(--text-muted); margin-top:2px; }
.cm-actions { display:flex; gap:4px; flex-shrink:0; }
.cm-action-btn {
  width:28px; height:28px; border-radius:8px; border:none;
  background:transparent; color:var(--text-muted);
  font-size:11px; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  transition:all 0.15s ease;
}
.cm-action-btn:hover { background:var(--bg-hover, rgba(0,0,0,0.08)); color:var(--text-primary); }
.cm-delete-btn:hover { background:rgba(231,76,60,0.12); color:#E74C3C; }
.header-action-btn {
  width:32px; height:32px; border-radius:10px; border:none;
  background:var(--primary); color:#fff; font-size:14px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform 0.15s ease;
}
.header-action-btn:hover { transform:scale(1.1); }

/* ==================== 정율질문방 인앱 오버레이 패널 ==================== */
.qa-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0);
  display:flex; align-items:flex-end; justify-content:center;
  transition:background 0.3s ease;
  pointer-events:none;
}
.qa-overlay.qa-overlay-visible {
  background:rgba(0,0,0,0.5);
  pointer-events:auto;
}
.qa-panel {
  width:100%; max-width:480px; height:92vh;
  background:var(--bg-card, #fff);
  border-radius:20px 20px 0 0;
  display:flex; flex-direction:column;
  box-shadow:0 -4px 30px rgba(0,0,0,0.25);
  transform:translateY(100%);
  transition:transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  overflow:hidden;
}
.qa-overlay-visible .qa-panel {
  transform:translateY(0);
}
.qa-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--border, #eee);
  flex-shrink:0;
  background:var(--bg-card, #fff);
}
.qa-panel-title {
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; color:var(--text-primary, #333);
}
.qa-panel-icon { font-size:18px; }
.qa-panel-actions { display:flex; gap:6px; }
.qa-panel-btn {
  width:32px; height:32px; border-radius:10px;
  border:none; background:var(--bg-input, #f0f0f0);
  color:var(--text-secondary, #666);
  font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s ease;
}
.qa-panel-btn:hover { background:var(--bg-hover, #e0e0e0); }
.qa-panel-close:hover { background:#FFE0E0; color:#E74C3C; }
.qa-panel-body {
  flex:1; position:relative; overflow:hidden;
}
.qa-panel-body iframe {
  width:100%; height:100%; border:none;
  background:#fff;
}
.qa-loading-bar {
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--bg-input, #f0f0f0);
  z-index:2;
  transition:opacity 0.3s ease;
}
.qa-loading-progress {
  height:100%; width:30%;
  background:linear-gradient(90deg, var(--primary, #E056A0), var(--primary-light, #FF8CC8));
  border-radius:0 3px 3px 0;
  animation:qa-load-anim 1.5s ease-in-out infinite;
}
@keyframes qa-load-anim {
  0% { width:0%; margin-left:0; }
  50% { width:60%; margin-left:20%; }
  100% { width:0%; margin-left:100%; }
}

/* ==================== 비교과 활동 미니 카드 ==================== */
.ec-mini-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--bg-input, rgba(255,255,255,0.06));
}
.ec-mini-row:last-child { border-bottom:none; }
.ec-mini-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ec-mini-info { flex:1; min-width:0; }
.ec-mini-top { display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.ec-mini-type { font-size:11px; font-weight:600; color:var(--text-muted); }
.ec-mini-subject { font-size:11px; color:var(--text-muted); opacity:0.7; }
.ec-mini-title { font-size:13px; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.ec-mini-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.ec-mini-status { font-size:10px; font-weight:600; padding:2px 6px; border-radius:8px; }
.ec-mini-status.in-progress { background:rgba(0,184,148,0.15); color:#00B894; }
.ec-mini-status.pending { background:rgba(108,92,231,0.15); color:#6C5CE7; }
.ec-mini-bar { width:48px; height:4px; background:var(--bg-input, rgba(255,255,255,0.1)); border-radius:2px; overflow:hidden; }
.ec-mini-bar-fill { height:100%; border-radius:2px; transition:width 0.3s ease; }

/* ==================== 포트폴리오 (활동 기록부) ==================== */
.portfolio-entry { display:flex; align-items:center; gap:12px; }
.portfolio-icon { font-size:28px; }
.portfolio-text strong { display:block; font-size:14px; color:var(--text-main); }
.portfolio-text p { font-size:12px; color:var(--text-muted); margin:2px 0 0; }

/* 기간 선택 바 */
.period-selector { display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; padding-bottom:4px; }
.period-btn {
  padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600;
  border:1px solid var(--bg-input, rgba(255,255,255,0.1));
  background:transparent; color:var(--text-muted); cursor:pointer;
  white-space:nowrap; transition:all 0.2s;
}
.period-btn.active {
  background:var(--primary); color:#fff;
  border-color:var(--primary); box-shadow:0 2px 8px rgba(224,86,160,0.3);
}

/* 커스텀 기간 입력 */
.custom-period-row {
  display:flex; gap:8px; align-items:center; margin-bottom:16px;
  font-size:12px; color:var(--text-muted);
}
.custom-period-row input[type="date"] {
  padding:4px 8px; border-radius:8px; font-size:12px;
  background:var(--bg-input, rgba(255,255,255,0.06));
  color:var(--text-main); border:1px solid rgba(255,255,255,0.1);
}

/* 통계 요약 카드 */
.portfolio-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  margin-bottom:16px;
}
.portfolio-stat-item {
  text-align:center; padding:10px 4px; border-radius:12px;
  background:var(--bg-input, rgba(255,255,255,0.06));
}
.portfolio-stat-num { font-size:20px; font-weight:700; color:var(--primary); display:block; }
.portfolio-stat-label { font-size:10px; color:var(--text-muted); }

/* 탭 필터 */
.portfolio-tabs { display:flex; gap:4px; margin-bottom:12px; }
.portfolio-tab-btn {
  flex:1; padding:8px 4px; border-radius:10px; font-size:11px; font-weight:600;
  background:transparent; color:var(--text-muted); border:none; cursor:pointer;
  transition:all 0.2s; text-align:center;
}
.portfolio-tab-btn.active { background:var(--primary); color:#fff; }

/* 포트폴리오 타임라인 */
.pf-timeline { display:flex; flex-direction:column; gap:8px; }
.pf-date-group { margin-bottom:8px; }
.pf-date-label { font-size:11px; font-weight:700; color:var(--text-muted); margin-bottom:6px; padding-left:4px; }
.pf-item {
  display:flex; gap:10px; padding:10px 12px; border-radius:12px;
  background:var(--bg-input, rgba(255,255,255,0.04));
  transition:all 0.2s;
}
.pf-item:hover { background:rgba(255,255,255,0.08); }
.pf-item-icon { font-size:18px; flex-shrink:0; line-height:1.4; }
.pf-item-body { flex:1; min-width:0; }
.pf-item-header { display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.pf-item-cat {
  font-size:10px; font-weight:700; padding:1px 6px; border-radius:6px;
  display:inline-block;
}
.pf-item-cat.cat-class { background:rgba(108,92,231,0.15); color:#6C5CE7; }
.pf-item-cat.cat-question { background:rgba(255,107,107,0.15); color:#FF6B6B; }
.pf-item-cat.cat-assignment { background:rgba(255,159,67,0.15); color:#FF9F43; }
.pf-item-cat.cat-teach { background:rgba(0,184,148,0.15); color:#00B894; }
.pf-item-cat.cat-report { background:rgba(108,92,231,0.2); color:#A29BFE; }
.pf-item-cat.cat-reading { background:rgba(0,184,148,0.15); color:#00B894; }
.pf-item-cat.cat-activity { background:rgba(253,203,110,0.2); color:#FDCB6E; }
.pf-item-subject { font-size:11px; color:var(--text-muted); }
.pf-item-title { font-size:13px; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.pf-item-desc { font-size:11px; color:var(--text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.pf-item-right { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; gap:2px; }
.pf-item-time { font-size:10px; color:var(--text-muted); }
.pf-item-xp { font-size:10px; font-weight:700; color:var(--primary); }

/* 빈 상태 */
.pf-empty { text-align:center; padding:32px 16px; color:var(--text-muted); }
.pf-empty-icon { font-size:36px; margin-bottom:8px; }
.pf-empty-text { font-size:13px; }

/* ==================== REPORT PROJECT (탐구보고서 5단계) ==================== */

/* 헤더 */
.rpt-header {
  padding:14px 16px 0;
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, var(--card-bg, #0d1117) 85%, transparent);
}
.rpt-header-top {
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.rpt-header-title { flex:1; min-width:0; }
.rpt-title { font-size:16px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rpt-subtitle { font-size:10px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rpt-xp-badge {
  padding:4px 12px; border-radius:8px;
  background:rgba(251,191,36,.1); color:#fbbf24;
  font-size:13px; font-weight:800; white-space:nowrap;
}

/* 미니 성장 그래프 */
.rpt-mini-growth { margin-bottom:8px; }
.rpt-mini-growth-label { font-size:10px; color:#666; margin-bottom:2px; }

/* 요약 통계 */
.rpt-stats-row { display:flex; gap:6px; margin-bottom:10px; }
.rpt-stat-item {
  flex:1; padding:8px 6px; border-radius:10px; text-align:center;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
.rpt-stat-icon { font-size:14px; display:block; }
.rpt-stat-value { font-size:15px; font-weight:800; display:block; }
.rpt-stat-label { font-size:9px; color:#666; display:block; }

/* Phase 탭 */
.rpt-phase-tabs {
  display:flex; gap:3px; overflow-x:auto; padding-bottom:10px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.rpt-phase-tabs::-webkit-scrollbar { display:none; }
.rpt-phase-tab {
  padding:7px 10px; border-radius:8px; font-size:11px; font-weight:700;
  white-space:nowrap; cursor:pointer; flex-shrink:0;
  background:rgba(255,255,255,.03); color:#555;
  border:1px solid rgba(255,255,255,.04);
  transition:all .2s;
}
.rpt-phase-tab.active { font-weight:800; }
.rpt-phase-tab.locked { opacity:.5; }
.rpt-phase-badge {
  margin-left:3px; font-size:8px; padding:1px 4px; border-radius:3px;
}

/* 컨텐츠 */
.rpt-content { padding:0 0 80px; }

/* Phase 헤더 */
.rpt-phase-header {
  padding:14px; margin-bottom:12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
}
.rpt-phase-header-top { display:flex; align-items:center; gap:8px; }
.rpt-ai-role {
  padding:4px 10px; border-radius:8px;
  font-size:10px; font-weight:700;
}
.rpt-phase-hint {
  margin-top:8px; padding:6px 10px; border-radius:6px;
  background:rgba(255,255,255,.03); font-size:11px; color:#888;
}

/* 잠긴 메시지 */
.rpt-locked-msg { text-align:center; padding:50px 20px; }

/* 언락 상태 */
.rpt-unlock-status {
  padding:10px; border-radius:8px; margin-bottom:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
.rpt-unlock-status.unlocked {
  background:rgba(52,211,153,.06); border-color:rgba(52,211,153,.15);
}
.rpt-unlock-title {
  font-size:12px; font-weight:700; color:#888; margin-bottom:4px;
}
.rpt-unlock-status.unlocked .rpt-unlock-title { color:#34d399; }
.rpt-unlock-checks { display:flex; gap:8px; font-size:10px; }

/* 모드 탭 */
.rpt-mode-tabs {
  display:flex; gap:0; margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.rpt-mode-tab {
  flex:1; padding:10px 0; background:none; border:none;
  color:#555; font-size:12px; font-weight:400; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:all .15s;
}
.rpt-mode-tab.active { font-weight:700; }
.rpt-mode-badge {
  margin-left:4px; font-size:9px; padding:1px 5px; border-radius:4px;
  background:rgba(255,255,255,.1); color:#888;
}

/* 추천 질문 */
.rpt-suggestions { margin-bottom:12px; }
.rpt-suggestion-btn {
  display:block; width:100%; padding:8px 12px; margin-bottom:4px;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
  border-radius:8px; color:#aaa; font-size:12px; text-align:left; cursor:pointer;
  transition:all .15s;
}
.rpt-suggestion-btn:hover { background:rgba(255,255,255,.06); color:#ddd; }

/* 질문 입력 */
.rpt-input-area {
  display:flex; gap:6px; padding:4px; margin-bottom:12px;
  background:rgba(255,255,255,.03); border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
}
.rpt-input {
  flex:1; padding:10px 12px; background:transparent;
  border:none; color:#e0e0e0; font-size:14px; line-height:1.6;
  resize:none; min-height:44px; max-height:100px; outline:none;
  font-family:inherit;
}
.rpt-input::placeholder { color:#555; }
.rpt-send-btn {
  padding:0 16px; color:#fff; border:none; border-radius:10px;
  font-weight:700; cursor:pointer; align-self:flex-end;
  margin-bottom:4px; margin-right:4px; font-size:13px;
  min-height:36px; display:flex; align-items:center; justify-content:center;
}
.rpt-send-btn:disabled { cursor:not-allowed; opacity:.6; }
.rpt-btn-spinner {
  width:16px; height:16px; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%;
  animation:diag-spin .8s infinite linear;
}

/* 로딩 */
.rpt-loading { text-align:center; padding:20px; color:#888; font-size:13px; }
.rpt-loading-pulse { animation:rpt-pulse 1.5s infinite; }
@keyframes rpt-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* 진단 배지 */
.rpt-diag-badge {
  padding:12px; border-radius:10px; margin-bottom:8px;
  border:1px solid rgba(255,255,255,.06);
}
.rpt-diag-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.rpt-diag-checks { display:flex; gap:4px; margin-bottom:8px; }
.rpt-diag-check {
  flex:1; padding:6px 8px; border-radius:6px; text-align:center;
  border:1px solid rgba(255,255,255,.06);
}
.rpt-diag-check.pass {
  background:rgba(52,211,153,.08); border-color:rgba(52,211,153,.15);
}
.rpt-diag-check.fail {
  background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.15);
}
.rpt-diag-check-label {
  font-size:10px; font-weight:600;
}
.rpt-diag-check.pass .rpt-diag-check-label { color:#34d399; }
.rpt-diag-check.fail .rpt-diag-check-label { color:#f87171; }
.rpt-diag-coaching {
  font-size:13px; color:#d4d4d4; line-height:1.7; margin-bottom:6px;
}
.rpt-diag-hint {
  padding:8px; border-radius:6px;
  background:rgba(251,191,36,.06); border:1px solid rgba(251,191,36,.12);
  font-size:12px; color:#fbbf24; line-height:1.6;
}

/* AI 응답 */
.rpt-ai-response {
  padding:14px; border-radius:10px; margin-top:8px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
.rpt-ai-response-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.rpt-ai-response-header span:first-child {
  font-size:12px; color:#34d399; font-weight:700;
}
.rpt-ai-source {
  font-size:9px; color:#60a5fa; padding:2px 6px; border-radius:4px;
  background:rgba(96,165,250,.08);
}
.rpt-ai-response-body {
  font-size:13px; color:#d4d4d4; line-height:1.8;
}
.rpt-ai-citations {
  margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,.06);
}
.rpt-citation-link {
  display:block; font-size:10px; color:#60a5fa; margin-bottom:2px;
  text-decoration:none; word-break:break-all;
}
.rpt-citation-link:hover { text-decoration:underline; }

/* 이전 질문 이력 */
.rpt-prev-questions { margin-top:16px; }
.rpt-q-history-item {
  display:flex; align-items:center; gap:8px; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.rpt-q-level {
  font-size:9px; padding:2px 6px; border-radius:4px; font-weight:700;
  white-space:nowrap;
}
.rpt-q-text {
  flex:1; font-size:12px; color:#b0b0b0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rpt-q-xp { font-size:10px; color:#fbbf24; font-weight:600; white-space:nowrap; }

/* 타임라인 항목 */
.rpt-timeline-entry {
  display:flex; gap:10px; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.rpt-tl-icon {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.rpt-tl-icon.question { background:rgba(99,102,241,.15); }
.rpt-tl-icon.ai_response { background:rgba(52,211,153,.15); }
.rpt-tl-body { flex:1; min-width:0; }
.rpt-tl-meta { display:flex; align-items:center; gap:6px; margin-bottom:3px; flex-wrap:wrap; }
.rpt-tl-phase {
  font-size:9px; padding:1px 6px; border-radius:4px; font-weight:700;
}
.rpt-tl-level {
  font-size:9px; padding:1px 6px; border-radius:4px; font-weight:700;
}
.rpt-tl-time { font-size:9px; color:#444; margin-left:auto; }
.rpt-tl-text {
  font-size:12px; color:#b0b0b0; line-height:1.5;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* 성장 그래프 */
.rpt-growth-chart { padding:8px 0; }

/* 빈 상태 */
.rpt-empty { text-align:center; padding:30px; color:#555; }

/* 리포트 카드 */
.rpt-report-card {
  padding:16px; border-radius:14px; margin-bottom:14px;
  background:linear-gradient(135deg, rgba(99,102,241,.08), rgba(52,211,153,.08));
  border:1px solid rgba(99,102,241,.15);
}
.rpt-journey {
  padding:10px; border-radius:8px; background:rgba(255,255,255,.03);
  font-size:12px; color:#b0b0b0; line-height:1.7;
}
.rpt-highlight {
  margin-top:12px; padding:10px; border-radius:8px;
  background:rgba(52,211,153,.06); border:1px solid rgba(52,211,153,.12);
}
.rpt-level-dist { display:flex; gap:3px; }
.rpt-level-dist-item {
  padding:6px 4px; border-radius:4px; text-align:center; min-width:30px;
}

/* 프로젝트 카드 */
.rpt-project-card {
  padding:14px; border-radius:12px; margin-bottom:10px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  transition:all .2s;
}
.rpt-project-card:hover { background:rgba(255,255,255,.06); transform:translateY(-1px); }
.rpt-project-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.rpt-project-color { width:4px; height:36px; border-radius:2px; flex-shrink:0; }
.rpt-project-info { flex:1; min-width:0; }
.rpt-project-name { font-size:14px; font-weight:700; color:#e0e0e0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rpt-project-meta { font-size:11px; color:#666; }
.rpt-project-phase {
  padding:4px 8px; border-radius:6px; font-size:10px; font-weight:700; white-space:nowrap;
}
.rpt-project-bottom { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rpt-project-stat { font-size:11px; color:#888; }
.rpt-project-progress {
  flex:1; height:4px; background:rgba(255,255,255,.06); border-radius:2px; min-width:60px;
}
.rpt-project-progress-fill { height:100%; border-radius:2px; transition:width .3s; }

/* 모바일 대응 */
@media (max-width:520px) {
  .qa-panel { max-width:100%; height:95vh; border-radius:16px 16px 0 0; }
  .portfolio-stats { grid-template-columns:repeat(2,1fr); }
  .rpt-stats-row { gap:4px; }
  .rpt-stat-item { padding:6px 4px; }
}

/* 헤더 + 버튼 */
.header-add-btn {
  width:34px; height:34px; border-radius:50%;
  background:rgba(108,92,231,.2); border:1px solid rgba(108,92,231,.3);
  color:#6C5CE7; font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.header-add-btn:hover { background:rgba(108,92,231,.35); transform:scale(1.05); }

/* 슬로건 배너 */
.rpt-banner {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px; margin-bottom:14px;
  background:linear-gradient(135deg, rgba(99,102,241,.08), rgba(52,211,153,.06));
  border:1px solid rgba(99,102,241,.12);
}

/* 플로팅 추가 버튼 */
.rpt-add-float-btn {
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:14px; margin-top:16px;
  border-radius:12px; cursor:pointer;
  background:rgba(108,92,231,.1); border:1.5px dashed rgba(108,92,231,.3);
  color:#6C5CE7; font-size:14px; font-weight:700;
  transition:all .2s;
}
.rpt-add-float-btn:hover {
  background:rgba(108,92,231,.18); border-color:rgba(108,92,231,.5);
  transform:translateY(-1px);
}

/* 추가 화면 스텝 */
.rpt-add-step {
  display:flex; gap:12px; margin-bottom:18px;
}
.rpt-add-step-num {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:rgba(108,92,231,.15); color:#818cf8;
  font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin-top:2px;
}
.rpt-add-step-content { flex:1; min-width:0; }

/* 과목 선택 그리드 */
.rpt-add-subject-grid {
  display:flex; flex-wrap:wrap; gap:6px;
}
.rpt-add-subject-btn {
  display:flex; align-items:center; gap:5px;
  padding:7px 12px; border-radius:8px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  color:#aaa; font-size:12px; font-weight:600; cursor:pointer;
  transition:all .15s;
}
.rpt-add-subject-btn:hover {
  background:rgba(255,255,255,.06); color:#ddd;
}
.rpt-add-subject-btn.active {
  background:rgba(108,92,231,.12); border-color:rgba(108,92,231,.35);
  color:#c4b5fd;
}
.rpt-add-subject-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}

/* ==================== 통합 활동 리스트 ==================== */

/* 요약 배너 */
.act-summary-banner {
  display:flex; align-items:center; justify-content:center; gap:0;
  background:rgba(108,92,231,.08); border:1px solid rgba(108,92,231,.15);
  border-radius:14px; padding:14px 20px; margin-bottom:12px;
}
.act-summary-item { text-align:center; flex:1; }
.act-summary-num { display:block; font-size:20px; font-weight:800; color:#e0e0e0; }
.act-summary-label { font-size:11px; color:#888; margin-top:2px; }
.act-summary-divider { width:1px; height:32px; background:rgba(255,255,255,.08); margin:0 8px; flex-shrink:0; }

/* 필터 탭 */
.act-filter-tabs {
  display:flex; gap:6px; overflow-x:auto; padding:4px 0 12px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.act-filter-tabs::-webkit-scrollbar { display:none; }
.act-filter-tab {
  display:flex; align-items:center; gap:5px; white-space:nowrap;
  padding:8px 14px; border-radius:20px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  color:#999; font-size:12px; font-weight:600; cursor:pointer;
  transition:all .2s;
}
.act-filter-tab:hover { background:rgba(255,255,255,.08); color:#ccc; }
.act-filter-tab.active {
  background:rgba(108,92,231,.15); border-color:rgba(108,92,231,.35);
  color:#c4b5fd; font-weight:700;
}
.act-filter-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:10px; font-size:10px; font-weight:700;
  background:rgba(255,255,255,.08); color:#888;
}
.act-filter-tab.active .act-filter-count {
  background:rgba(108,92,231,.25); color:#c4b5fd;
}

/* 활동 카드 */
.act-card {
  display:flex; gap:12px; padding:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; cursor:pointer; margin-bottom:8px;
  transition:all .2s;
}
.act-card:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); transform:translateY(-1px); }
.act-card:active { transform:scale(.98); }

.act-card-left { flex-shrink:0; }
.act-card-type-badge {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
}

.act-card-body { flex:1; min-width:0; }
.act-card-top { display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:wrap; }
.act-card-type-label { font-size:11px; font-weight:700; }
.act-card-subject {
  font-size:10px; font-weight:600; color:#888;
  padding:1px 6px; background:rgba(255,255,255,.06); border-radius:4px;
}
.act-card-status {
  font-size:10px; font-weight:600; margin-left:auto;
  padding:2px 8px; border-radius:8px;
}
.act-card-status.in-progress { background:rgba(108,92,231,.15); color:#a78bfa; }
.act-card-status.pending { background:rgba(255,159,67,.12); color:#FF9F43; }
.act-card-status.completed { background:rgba(0,184,148,.12); color:#00B894; }

.act-card-title { font-size:14px; font-weight:700; color:#e0e0e0; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-card-desc { font-size:12px; color:#777; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.act-card-extra { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.act-card-extra span { font-size:11px; color:#999; }

.act-card-footer { display:flex; align-items:center; gap:8px; }
.act-card-date { font-size:11px; color:#666; flex-shrink:0; }
.act-card-progress { flex:1; height:4px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden; }
.act-card-progress-fill { height:100%; border-radius:3px; transition:width .3s; }
.act-card-progress-text { font-size:11px; font-weight:700; color:#888; flex-shrink:0; }

/* 빈 상태 */
.act-empty { text-align:center; padding:48px 0; }
.act-empty-icon { font-size:48px; margin-bottom:12px; }
.act-empty-text { font-size:15px; font-weight:700; color:#e0e0e0; margin-bottom:6px; }
.act-empty-sub { font-size:13px; color:#666; }

/* 하단 추가 버튼 */
.act-add-float-btn {
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:14px; margin-top:8px; margin-bottom:20px;
  border-radius:14px; border:2px dashed rgba(108,92,231,.3);
  background:rgba(108,92,231,.05); color:#a78bfa;
  font-size:14px; font-weight:700; cursor:pointer;
  transition:all .2s;
}
.act-add-float-btn:hover { background:rgba(108,92,231,.12); border-color:rgba(108,92,231,.5); }

/* ==================== 활동 상세 화면 ==================== */

.act-detail-header {
  padding:16px 16px 12px; 
  background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.act-detail-header-top { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.act-detail-title { font-size:18px; font-weight:800; color:#e0e0e0; }
.act-detail-subtitle { font-size:12px; color:#888; margin-top:2px; }

.act-detail-stats {
  display:flex; gap:0; background:rgba(255,255,255,.03);
  border-radius:12px; border:1px solid rgba(255,255,255,.06);
  padding:10px 0; margin-bottom:10px;
}
.act-detail-stat { flex:1; text-align:center; }
.act-detail-stat-icon { display:block; font-size:16px; margin-bottom:2px; }
.act-detail-stat-value { display:block; font-size:14px; font-weight:800; color:#e0e0e0; }
.act-detail-stat-label { display:block; font-size:10px; color:#888; margin-top:1px; }

.act-detail-progress-wrap { display:flex; align-items:center; gap:10px; }
.act-detail-progress-bar { flex:1; height:6px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.act-detail-progress-fill { height:100%; border-radius:4px; transition:width .3s; }
.act-detail-progress-text { font-size:12px; font-weight:600; color:#888; flex-shrink:0; }

.act-detail-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:14px; margin-bottom:10px;
}
.act-detail-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.act-detail-card-title { font-size:14px; font-weight:700; color:#e0e0e0; margin-bottom:8px; }
.act-detail-card-body { font-size:13px; color:#aaa; line-height:1.6; }

/* 활동 로그 아이템 */
.act-log-item {
  display:flex; gap:10px; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.act-log-item:last-child { border-bottom:none; }
.act-log-date {
  font-size:11px; font-weight:700; color:#818cf8;
  flex-shrink:0; width:40px; padding-top:2px;
}
.act-log-content { flex:1; min-width:0; }
.act-log-text { font-size:13px; color:#ccc; line-height:1.5; }
.act-log-reflection { font-size:12px; color:#a78bfa; margin-top:4px; }
.act-log-duration { font-size:11px; color:#666; margin-top:3px; }

/* 로그 작성 폼 */
.act-log-form { border:1px solid rgba(108,92,231,.2); background:rgba(108,92,231,.04); }

/* 활동 액션 버튼 */
.act-detail-actions { display:flex; gap:8px; margin:12px 0 24px; }
.act-detail-actions .btn-secondary {
  flex:1; padding:12px; font-size:13px; font-weight:700;
  border-radius:12px; text-align:center;
}

/* ==================== 활동 추가 화면 ==================== */

.act-add-type-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
}
.act-add-type-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 8px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1.5px solid rgba(255,255,255,.06);
  color:#aaa; cursor:pointer; transition:all .2s;
}
.act-add-type-btn:hover { background:rgba(255,255,255,.06); }
.act-add-type-btn.active {
  background:rgba(108,92,231,.12); border-color:rgba(108,92,231,.4);
  color:#c4b5fd;
}
.act-add-type-icon { font-size:28px; }
.act-add-type-name { font-size:13px; font-weight:700; }
.act-add-type-desc { font-size:10px; color:#666; text-align:center; }
.act-add-type-btn.active .act-add-type-desc { color:#a78bfa; }

/* 반응형 */
@media (max-width: 420px) {
  .act-add-type-grid { grid-template-columns:repeat(2, 1fr); }
  .act-summary-banner { padding:10px 12px; }
  .act-summary-num { font-size:17px; }
  .act-detail-stats { flex-wrap:wrap; }
  .act-detail-stat { min-width:25%; }
}

/* ==================== 수업 종료 자동 감지 시스템 ==================== */

/* 수업 종료 직후 시간표 행 강조 */
.tt-row.tt-just-ended {
  background: linear-gradient(135deg, rgba(255,107,107,0.12), rgba(108,92,231,0.08));
  border: 1px solid rgba(255,107,107,0.3);
  animation: tt-pulse-bg 2s ease-in-out infinite;
}

@keyframes tt-pulse-bg {
  0%, 100% { border-color: rgba(255,107,107,0.3); }
  50% { border-color: rgba(255,107,107,0.6); }
}

/* 기록하기 버튼 glow 효과 */
.tt-record-btn.tt-btn-glow {
  background: linear-gradient(135deg, var(--accent), #FF8E53);
  color: #fff;
  font-weight: 700;
  animation: tt-btn-glow-anim 1.5s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(255,107,107,0.4);
}

@keyframes tt-btn-glow-anim {
  0%, 100% { box-shadow: 0 0 8px rgba(255,107,107,0.3); transform: scale(1); }
  50% { box-shadow: 0 0 20px rgba(255,107,107,0.6); transform: scale(1.05); }
}

/* Quick Action 버튼 glow */
.quick-action-btn.qa-glow {
  background: linear-gradient(135deg, rgba(255,107,107,0.15), rgba(108,92,231,0.1));
  border-color: rgba(255,107,107,0.4);
  animation: qa-glow-anim 2s ease-in-out infinite;
}

@keyframes qa-glow-anim {
  0%, 100% { border-color: rgba(255,107,107,0.3); box-shadow: 0 0 6px rgba(255,107,107,0.15); }
  50% { border-color: rgba(255,107,107,0.6); box-shadow: 0 0 14px rgba(255,107,107,0.3); }
}

.quick-action-btn.qa-glow.qa-pulse {
  animation: qa-glow-anim 1s ease-in-out infinite;
}

/* Quick Action 뱃지 */
.qa-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  line-height: 1;
}

/* 수업 종료 인앱 알림 배너 */
.class-end-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1E1B4B, #312E81);
  border: 1px solid rgba(255,107,107,0.4);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(255,107,107,0.2);
  max-width: calc(100vw - 32px);
  width: auto;
  min-width: 280px;
  animation: banner-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes banner-slide-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.ceb-icon {
  font-size: 24px;
  animation: ceb-ring 0.6s ease-in-out 0.3s;
}

@keyframes ceb-ring {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-15deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-5deg); }
}

.ceb-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ceb-text strong {
  font-size: 14px;
  color: #F0F6FC;
}

.ceb-text span {
  font-size: 11px;
  color: #8B949E;
}

.ceb-btn {
  padding: 6px 14px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--accent), #FF8E53);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ceb-btn:active {
  transform: scale(0.95);
}

.ceb-close {
  border: none;
  background: none;
  color: #484F58;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.ceb-close:hover {
  color: #F0F6FC;
}

/* 수업 기록 수정 화면 - 이해도 선택 */
.understanding-selector {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.understanding-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
}

.understanding-btn:hover {
  border-color: var(--primary-light);
  background: var(--bg-card-hover);
}

.understanding-btn.active {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(162,155,254,0.1));
  box-shadow: 0 0 12px rgba(108,92,231,0.2);
}

/* 수업 기록 수정 완료된 행 hover 힌트 */
.tt-row.done {
  transition: background 0.2s, transform 0.15s;
}

.tt-row.done:hover {
  background: var(--bg-card-hover);
  transform: translateX(2px);
}

/* 미기록 경고 배너 */
.unrecorded-warn-banner {
  background: linear-gradient(135deg, rgba(255,107,107,0.12), rgba(243,156,18,0.08));
  border: 1px solid rgba(255,107,107,0.25);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 16px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.unrecorded-warn-banner:hover {
  border-color: rgba(255,107,107,0.5);
  background: linear-gradient(135deg, rgba(255,107,107,0.18), rgba(243,156,18,0.12));
}


/* ================================================================
   LANDSCAPE MODE - 패드 가로모드 최적화 (iPad 가로 = 1194x834 등)
   조건: 가로방향 + 폭 768px+ + 높이 500px+
   핵심: 하단네비→좌측 사이드바, 콘텐츠 넓게, Split-View 레이아웃
   ================================================================ */

@media (orientation: landscape) and (min-width: 768px) and (min-height: 500px) and (max-width: 1279px) {

  /* ---------- 1. 태블릿 컨테이너: flex-row 전환 ---------- */
  #tablet-container {
    flex-direction: row !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  /* ---------- 2. 상태바 → 숨김 (사이드바에 로고 있으므로) ---------- */
  #tablet-status-bar {
    display: none !important;
  }

  /* ---------- 3. 사이드바 확장 (아이콘+텍스트) → landscape CSS에서 처리됨 ---------- */

  /* ---------- 4. 콘텐츠 영역 ---------- */
  #tablet-content {
    padding-bottom: 0 !important;
  }

  /* ---------- 5. FAB 위치 조정 ---------- */
  #tablet-content .fab {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    z-index: 201 !important;
  }

  /* ---------- 6. 탭 콘텐츠 넓은 패딩 + 최대폭 해제 ---------- */
  #tablet-content .tab-content {
    padding: 0 0 20px !important;
    max-width: none !important;
  }

  /* ---------- 7. XP 바: 가로로 넓게 ---------- */
  #tablet-content .xp-bar-container {
    padding: 0 !important;
    min-height: 52px !important;
  }

  /* ---------- 8. 홈 상단 ---------- */
  .home-top-row {
    padding: 10px 0 4px !important;
  }

  /* ---------- 9. 홈 탭: 2행 레이아웃 ---------- */
  #tablet-content .home-row-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    padding: 0 0 16px !important;
  }
  #tablet-content .home-row-bottom {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    padding: 0 0 16px !important;
  }
  #tablet-content .home-bottom-actions {
    padding: 4px 0 20px !important;
  }

  /* legacy 호환 */
  #tablet-content .home-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  #tablet-content .home-cards-grid > .card {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    width: 100% !important;
  }
  #tablet-content .home-cards-grid > .home-card-todo {
    grid-column: span 2 !important;
  }

  /* ---------- 10. 홈 인사 영역 ---------- */
  #tablet-content .home-greeting h2 {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
  }

  /* ---------- 9b. 기록 타입 그리드: 가로 3x2 넓게 ---------- */
  #tablet-content .record-type-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    max-width: none !important;
  }

  /* ---------- 10. 풀스크린 (기록/상세): 넓은 max-width ---------- */
  #tablet-content .full-screen {
    max-width: none !important;
    margin: 0 !important;
  }

  #tablet-content .screen-header {
    padding: 14px 0 !important;
  }

  #tablet-content .form-body {
    padding: 16px 0 30px !important;
  }

  /* ---------- 11. 미션 카드 & Quick Actions: 가로 배치 ---------- */
  #tablet-content .home-cards-grid ~ div[style*="flex-wrap"] {
    justify-content: flex-start !important;
  }

  /* Quick Action 버튼 */
  .quick-action-btn {
    flex: none !important;
    min-width: auto !important;
  }

  /* ---------- 12. 플래너 타임라인: 넓게 ---------- */
  #tablet-content .planner-timeline {
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* ---------- 13. 성장 탭: 4컬럼 그리드 ---------- */
  #tablet-content .growth-summary-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* ---------- 14. 과제 리스트: 넓게 ---------- */
  #tablet-content .assignment-mini-row {
    padding: 14px 0 !important;
  }

  /* ---------- 15. 시험 카드 그리드 ---------- */
  #tablet-content .exam-card {
    padding: 18px !important;
  }

  /* ---------- 16. 활동 카드/그리드 ---------- */
  #tablet-content .act-add-type-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ---------- 17. 포트폴리오 통계 ---------- */
  #tablet-content .portfolio-stats {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* ---------- 18. 프로필 카드: 가로 넓게 ---------- */
  #tablet-content .profile-card {
    max-width: none !important;
  }

  /* ---------- 19. 온보딩: 가로 넓게 + 중앙정렬 ---------- */
  #tablet-content .onboarding-screen {
    max-width: none !important;
    margin: 0 !important;
    padding: 30px 40px !important;
  }

  /* ---------- 20. 탐구보고서 ---------- */*/
  #tablet-content .rpt-header {
    padding: 18px 0 12px !important;
  }
  #tablet-content .rpt-content {
    padding: 16px 0 !important;
  }

  /* ---------- 21. 미기록 경고 배너 ---------- */
  .unrecorded-warn-banner {
    margin: 0 0 14px !important;
  }

  /* ---------- 22. 수업 기록 수정 화면 ---------- */
  .understanding-selector {
    gap: 12px !important;
  }
  .understanding-btn {
    padding: 12px 10px !important;
  }

  /* ---------- 23. 카드 기본 ---------- */
  #tablet-content .card {
    padding: 18px !important;
  }

  /* ---------- 24. field-group 간격 ---------- */
  .field-group {
    margin-bottom: 18px !important;
  }

  /* ---------- 25. 스크롤바 세로 높이 활용 ---------- */
  #tablet-content {
    scrollbar-width: thin !important;
  }
}

/* ================================================================
   LANDSCAPE MODE - 큰 패드 (iPad Pro 12.9" = 1366x1024 등)
   폭 1280px 이상 + 가로방향
   ================================================================ */

@media (orientation: landscape) and (min-width: 1280px) and (max-width: 1599px) {

  /* 학생 모드 사이드바 확장 */
  #tablet-sidebar {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }

  #tablet-status-bar {
    display: none !important;
  }

  #tablet-content {
    padding-bottom: 0 !important;
  }

  #tablet-content .fab {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 201 !important;
  }

  #tablet-content .tab-content {
    padding: 0 0 24px !important;
    max-width: none !important;
  }

  #tablet-content .xp-bar-container {
    padding: 0 !important;
    min-height: 52px !important;
  }

  /* iPad Pro: 홈 상단 */
  .home-top-row {
    padding: 10px 0 4px !important;
  }

  /* iPad Pro: 홈 2행 레이아웃 */
  #tablet-content .home-row-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    padding: 0 0 18px !important;
  }
  #tablet-content .home-row-bottom {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
    padding: 0 0 18px !important;
  }
  #tablet-content .home-bottom-actions {
    padding: 4px 0 20px !important;
  }

  /* legacy */
  #tablet-content .home-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  #tablet-content .home-cards-grid > .card {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    width: 100% !important;
  }
  #tablet-content .home-cards-grid > .home-card-todo {
    grid-column: span 2 !important;
  }

  #tablet-content .record-type-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
  }

  #tablet-content .full-screen {
    max-width: none !important;
    margin: 0 !important;
  }

  #tablet-content .planner-timeline {
    max-width: 100% !important;
  }

  #tablet-content .growth-summary-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  #tablet-content .portfolio-stats {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  #tablet-content .act-add-type-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  #tablet-content .onboarding-screen {
    max-width: none !important;
    margin: 0 !important;
  }

  #tablet-content .profile-card {
    max-width: none !important;
  }
}


/* ================================================================
   PORTRAIT MODE - 세로모드에서 사이드바 축소 (아이콘만 표시)
   ================================================================ */

@media (orientation: portrait) and (min-width: 768px) {
  /* 세로 패드: 사이드바 축소 */
  #tablet-sidebar {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }
  .sidebar-logo-text { display: none !important; }
  .sidebar-nav-label { display: none !important; }
  .sidebar-logout span { display: none !important; }
  .sidebar-user-name { display: none !important; }
  .sidebar-streak { display: none !important; }
  .sidebar-nav-item { flex-direction: column !important; padding: 10px 4px !important; gap: 3px !important; }
  .sidebar-nav-item i { font-size: 16px !important; }
  .sidebar-logo { flex-direction: column !important; padding: 8px 8px 12px !important; }
  .sidebar-footer { padding: 8px 4px !important; }
  .sidebar-user { flex-direction: column !important; }
  .sidebar-badge { top: 4px !important; right: 2px !important; }

  /* 세로 패드: 상태바 표시 */
  #tablet-status-bar {
    display: flex !important;
    padding: 8px 16px;
    justify-content: space-between;
    align-items: center;
  }

  #tablet-content .fab {
    position: fixed !important;
    right: 32px !important;
    bottom: 32px !important;
    left: auto !important;
  }

  /* 세로 패드: 홈 상단 세로 배치 */
  .home-top-row {
    flex-wrap: wrap !important;
    padding: 12px 16px 6px !important;
  }

  /* 세로 패드 홈: 2행 레이아웃 */
  #tablet-content .home-row-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 0 0 12px !important;
  }
  #tablet-content .home-row-bottom {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 0 0 12px !important;
  }
  #tablet-content .home-bottom-actions {
    padding: 4px 0 16px !important;
  }

  /* legacy */
  #tablet-content .home-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  #tablet-content .home-cards-grid > .card {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    width: 100% !important;
  }
  #tablet-content .home-cards-grid > .home-card-todo {
    grid-column: span 2 !important;
  }

  /* 세로 패드 풀스크린 */
  #tablet-content .full-screen {
    max-width: none !important;
  }

  /* 세로 패드 플래너 */
  #tablet-content .planner-timeline {
    max-width: none !important;
    margin: 0 !important;
  }
}


/* ================================================================
   SIDEBAR: 부드러운 전환 애니메이션
   ================================================================ */

#tablet-sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   RECORD GALLERY – 수업 기록 갤러리형 카드 레이아웃
   ================================================================ */

/* === 과목 필터 바 === */
.record-filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 14px;
  margin-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.record-filter-bar::-webkit-scrollbar { display: none; }
.record-filter-chip {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
}
.record-filter-chip:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.record-filter-chip.active {
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.record-filter-count {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
  margin-left: 2px;
}

/* === 그리드 === */
.record-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.record-gallery-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
}
.record-gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  border-color: rgba(108,92,231,0.4);
}
.record-gallery-card:active {
  transform: scale(0.98);
}

/* === 4:3 썸네일 영역 === */
.record-gallery-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: rgba(30,34,40,0.6);
  overflow: hidden;
}
.record-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.record-gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(108,92,231,0.06), rgba(30,34,40,0.3));
}
.record-gallery-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  letter-spacing: 0.5px;
  z-index: 3;
}

/* === 캐러셀 (카드 내 사진 슬라이드) === */
.rc-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.rc-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.rc-carousel-slide {
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
}
.rc-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.rc-carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 3;
}
.rc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: all 0.25s ease;
}
.rc-dot.active {
  background: #fff;
  width: 16px;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* === 정보 영역 (텍스트 강화) === */
.record-gallery-info {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.record-gallery-subject {
  display: flex;
  align-items: center;
  gap: 6px;
}
.record-gallery-subject-tag {
  font-size: 13px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 8px;
  letter-spacing: 0.3px;
}
.record-gallery-period {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
.record-gallery-topic {
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.record-gallery-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.record-gallery-date i {
  font-size: 11px;
  opacity: 0.7;
}
.record-gallery-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.record-gallery-kw {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
}

/* 태블릿 가로 모드: 3열 갤러리 */
@media (orientation: landscape) and (min-width: 768px) {
  .record-gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  .record-gallery-topic {
    font-size: 17px !important;
    font-weight: 800 !important;
  }
  .record-gallery-subject-tag {
    font-size: 14px !important;
    font-weight: 900 !important;
  }
  .record-gallery-info {
    padding: 14px 16px !important;
  }
  .record-gallery-period {
    font-size: 13px !important;
  }
  .record-gallery-kw {
    font-size: 12px !important;
    padding: 3px 8px !important;
  }
  .record-filter-chip {
    font-size: 14px !important;
    padding: 7px 16px !important;
  }
}

/* ================================================================
   DETAIL PHOTO GALLERY – 상세 페이지 대형 가로 스크롤 갤러리
   ================================================================ */

.detail-photo-section {
  margin: 20px 0 16px;
}
.detail-photo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.detail-photo-label {
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
}
.detail-photo-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-light);
  background: rgba(108,92,231,0.15);
  padding: 3px 10px;
  border-radius: 12px;
}

/* 가로 스크롤 컨테이너 */
.detail-gallery-wrap {
  position: relative;
}
.detail-gallery-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0 8px;
}
.detail-gallery-scroll::-webkit-scrollbar { display: none; }

.detail-gallery-item {
  flex-shrink: 0;
  width: 85%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  scroll-snap-align: center;
  background: rgba(30,34,40,0.5);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  cursor: pointer;
}
.detail-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* 인디케이터 */
.detail-gallery-indicator {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}
.detail-gallery-current {
  color: #FFFFFF;
  font-weight: 900;
  font-size: 15px;
}
.detail-gallery-total {
  color: var(--text-muted);
}

/* 힌트 */
.detail-gallery-hint {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 6px;
  opacity: 0.6;
}

/* ================================================================
   PHOTO ZOOM OVERLAY – 전체화면 확대 뷰어 (핀치줌/더블탭)
   ================================================================ */

.photo-zoom-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.96);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.photo-zoom-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease;
}
.photo-zoom-close:hover {
  background: rgba(255,255,255,0.25);
}
.photo-zoom-counter {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  background: rgba(0,0,0,0.4);
  padding: 4px 14px;
  border-radius: 14px;
  backdrop-filter: blur(4px);
  z-index: 10001;
}
.photo-zoom-container {
  width: 92%;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.photo-zoom-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.25s ease;
  transform-origin: center center;
  user-select: none;
  -webkit-user-select: none;
}
.photo-zoom-nav {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}
.photo-zoom-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease;
}
.photo-zoom-btn:hover {
  background: rgba(255,255,255,0.2);
}
.photo-zoom-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* 태블릿 가로 모드: 갤러리 아이템 더 크게 */
@media (orientation: landscape) and (min-width: 768px) {
  .detail-gallery-item {
    width: 70%;
  }
  .detail-gallery-scroll {
    gap: 16px;
  }
}

/* ================================================================
   TIMETABLE SCROLL – 오늘 시간표 내부 스크롤 & 스마트 포커스
   ================================================================ */

/* 스크롤 래퍼 */
.tt-scroll-wrapper {
  position: relative;
  overflow: hidden;
}

/* 내부 스크롤 영역 */
.timetable-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 196px; /* ~3.5 rows */
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}

/* 슬림 스크롤바 */
.timetable-list::-webkit-scrollbar {
  width: 3px;
}
.timetable-list::-webkit-scrollbar-track {
  background: transparent;
}
.timetable-list::-webkit-scrollbar-thumb {
  background: rgba(108, 92, 231, 0.2);
  border-radius: 3px;
}
.timetable-list::-webkit-scrollbar-thumb:hover {
  background: rgba(108, 92, 231, 0.4);
}
/* Firefox */
.timetable-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(108, 92, 231, 0.2) transparent;
}

/* 태블릿 가로 모드: 높이 확대 (~4.5 rows) */
@media (orientation: landscape) and (min-width: 768px) {
  .timetable-list {
    max-height: 252px;
  }
}

/* 상하 그라데이션 페이드 */
.tt-scroll-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tt-scroll-fade-top {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-card) 0%, transparent 100%);
}
.tt-scroll-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-card) 0%, transparent 100%);
}

/* ================================================================
   ACADEMY TIMETABLE – 홈 오늘 시간표 내 학원 수업 구분
   ================================================================ */

/* 학원 구분선 */
.tt-academy-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
  padding: 0 2px;
}
.tt-academy-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--primary-light);
  white-space: nowrap;
  background: rgba(108,92,231,0.12);
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}
.tt-academy-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(108,92,231,0.3), transparent);
}

/* 학원 수업 행 */
.tt-academy-row {
  border-left: 2.5px solid rgba(108,92,231,0.35);
}
.tt-academy-row:not(.done) {
  background: rgba(108,92,231,0.03);
}

/* 학원 교시 배지 */
.tt-period-badge.academy {
  background: rgba(108,92,231,0.15);
  border-color: rgba(108,92,231,0.3);
  color: var(--primary-light);
}
.tt-period-badge.academy.done {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.tt-period-badge.academy.current {
  background: var(--primary-light);
  border-color: var(--primary-light);
  color: #fff;
}

/* ================================================================
   POPUP RECORD TITLE – 당일 수업 · 당일 복습하기 헤더
   ================================================================ */

.popup-record-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.popup-record-title span {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary-light);
  letter-spacing: -0.3px;
}
.popup-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  flex-shrink: 0;
}
.popup-back-btn:hover {
  background: rgba(108,92,231,0.12);
  border-color: rgba(108,92,231,0.3);
  color: var(--primary-light);
}

/* ================================================================
   RECORD STATUS – 기록 관리 & 누락 체크 캘린더 뷰
   ================================================================ */

/* 진행률 카드 */
.rs-progress-card {
  background: linear-gradient(135deg, rgba(108,92,231,0.1), rgba(0,184,148,0.06));
  border: 1px solid rgba(108,92,231,0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}
.rs-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.rs-progress-title {
  font-size: 18px;
  font-weight: 900;
  color: #FFFFFF;
}
.rs-progress-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 원형 진행률 */
.rs-progress-circle {
  position: relative;
  width: 72px;
  height: 72px;
}
.rs-circle-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.rs-circle-bg {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 3;
}
.rs-circle-fill {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.8s ease;
}
.rs-circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.rs-circle-num {
  font-size: 22px;
  font-weight: 900;
}
.rs-circle-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

/* 통계 */
.rs-progress-stats {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.rs-stat-num {
  font-size: 20px;
  font-weight: 900;
  display: block;
}
.rs-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* 주간 캘린더 그리드 */
.rs-calendar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.rs-day-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rs-day-header {
  text-align: center;
  padding: 8px 4px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}
.rs-day-header.today {
  background: rgba(108,92,231,0.2);
  border: 1px solid rgba(108,92,231,0.4);
}
.rs-day-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.rs-day-num {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #FFFFFF;
}
.rs-day-header.today .rs-day-name {
  color: var(--primary-light);
}

/* 교시 셀 */
.rs-period-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rs-period-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  transition: all 0.2s ease;
  min-height: 52px;
  justify-content: center;
}
.rs-period-cell.recorded {
  background: rgba(0,184,148,0.08);
  border-color: rgba(0,184,148,0.2);
}
.rs-period-cell.missed {
  background: rgba(255,107,107,0.06);
  border: 1.5px dashed rgba(255,107,107,0.35);
  cursor: pointer;
}
.rs-period-cell.missed:hover {
  background: rgba(255,107,107,0.12);
  border-color: rgba(255,107,107,0.5);
  transform: scale(1.03);
}
.rs-period-cell.future {
  opacity: 0.4;
}
.rs-period-num {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
.rs-period-subject {
  font-size: 11px;
  font-weight: 800;
  margin: 1px 0;
}
.rs-period-status {
  margin-top: 2px;
}
.rs-missed-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px dashed rgba(255,107,107,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,107,107,0.6);
}

/* 힌트 */
.rs-hint {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
}

/* 태블릿 가로 모드 */
@media (orientation: landscape) and (min-width: 768px) {
  .rs-calendar {
    gap: 12px;
  }
  .rs-period-cell {
    min-height: 60px;
    padding: 8px 4px;
  }
  .rs-period-subject {
    font-size: 13px !important;
  }
  .rs-period-num {
    font-size: 11px;
  }
  .rs-day-num {
    font-size: 20px;
  }
  .rs-progress-title {
    font-size: 20px;
  }
}

/* ==============================
   멘토 학생 대시보드 (데스크톱 최적화)
   ============================== */

/* 상단 멘토 바 */
.msv-top-bar {
  background: linear-gradient(135deg, var(--primary), #4a6cf7);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: white;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.msv-back-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s;
  white-space: nowrap;
}
.msv-back-btn:hover { background: rgba(255,255,255,0.35); }
.msv-title-label {
  font-weight: 700;
  font-size: 16px;
}
.msv-badge {
  margin-left: 8px;
  padding: 3px 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
}

/* 전체 레이아웃: 사이드바 + 메인 */
.msv-layout {
  display: flex;
  min-height: calc(100vh - 52px);
  background: var(--bg-main);
}

/* 사이드바 */
.msv-sidebar {
  width: 260px;
  min-width: 260px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}
.msv-profile-card {
  text-align: center;
  padding: 24px 16px;
  background: var(--bg-main);
  border-radius: 16px;
  border: 1px solid var(--border);
}
.msv-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 12px;
}
.msv-profile-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}
.msv-profile-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.msv-profile-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  color: var(--primary-light);
  font-weight: 600;
}
.msv-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.msv-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.msv-nav-btn:hover { background: var(--bg-input); }
.msv-nav-btn.active {
  background: rgba(99,179,237,0.12);
  color: var(--primary-light);
  font-weight: 700;
}
.msv-nav-btn i { width: 18px; text-align: center; font-size: 14px; }

/* 메인 콘텐츠 */
.msv-main {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
  min-width: 0;
}

/* 그리드 (전체 보기) */
.msv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.msv-panel {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 600px;
}
.msv-panel-large {
  grid-column: span 2;
  max-height: 500px;
}
.msv-panel-header {
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--bg-card);
}
.msv-panel-header i { color: var(--primary-light); }
.msv-expand-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.15s;
}
.msv-expand-btn:hover { background: var(--bg-input); color: var(--primary-light); }
.msv-panel-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  font-size: 16px;
  line-height: 1.6;
}

/* 패널 내부의 학생 UI 리사이즈 */
.msv-panel-body .tab-content { padding: 0 !important; }
.msv-panel-body .screen-header { padding: 0 0 12px !important; }
.msv-panel-body .screen-header h1 { font-size: 24px !important; }
.msv-panel-body .record-type-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.msv-panel-body .home-cards-grid { gap: 12px !important; }
.msv-panel-body .xp-bar-container { display: none !important; }
.msv-panel-body .fab { display: none !important; }

/* 단일 패널 확대 보기 */
.msv-single-panel {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  min-height: 70vh;
}
.msv-single-body {
  padding: 32px;
  font-size: 16px;
  line-height: 1.6;
}
.msv-single-body .screen-header h1 { font-size: 24px !important; }
.msv-single-body .xp-bar-container { display: none !important; }
.msv-single-body .fab { display: none !important; }

/* 서브 화면 (상세 페이지) */
.msv-sub-screen {
  padding: 32px;
  max-width: 900px;
  margin: 0 auto;
}
.msv-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: none;
  color: var(--primary-light);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  transition: all 0.15s;
}
.msv-breadcrumb:hover { background: rgba(99,179,237,0.15); }
.msv-sub-content { font-size: 16px; line-height: 1.6; }
.msv-sub-content .screen-header h1 { font-size: 24px !important; }
.msv-back-sub {
  margin-top: 16px;
  padding: 10px 24px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

/* 1280px 미만: 2 → 1컬럼 그리드 */
@media (max-width: 1280px) {
  .msv-grid { grid-template-columns: 1fr; }
  .msv-panel-large { grid-column: span 1; }
  .msv-main { padding: 24px; }
  .msv-sidebar { width: 220px; min-width: 220px; }
}

/* 1024px 미만: 사이드바 축소 */
@media (max-width: 1024px) {
  .msv-sidebar { width: 200px; min-width: 200px; padding: 16px 12px; }
  .msv-profile-card { padding: 16px 12px; }
  .msv-avatar { width: 56px; height: 56px; font-size: 28px; }
  .msv-profile-name { font-size: 17px; }
}

/* 3컬럼 (1920px+) */
@media (min-width: 1920px) {
  .msv-grid { grid-template-columns: repeat(3, 1fr); }
  .msv-panel-large { grid-column: span 3; }
  .msv-main { padding: 32px 48px; }
}