/* ── 책 모양 ─────────────────────────────────────── */
.book {
  display: flex;
  width: 72px;
  height: 95px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), filter 0.18s;
  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
}
.book:hover {
  transform: translateY(-6px) rotate(-3deg) scale(1.05);
  filter: drop-shadow(4px 8px 16px rgba(0,0,0,0.7));
}
.book:active { transform: translateY(-2px) scale(0.98); }

/* 왼쪽 책등 */
.book-spine {
  width: 13px;
  height: 100%;
  border-radius: 2px 0 0 2px;
  background: var(--spine);
  flex-shrink: 0;
  box-shadow: inset -2px 0 4px rgba(0,0,0,0.3);
}

/* 표지 */
.book-cover {
  flex: 1;
  height: 100%;
  background: linear-gradient(160deg, var(--cover-light) 0%, var(--cover) 60%);
  border-radius: 0 3px 3px 0;
  box-shadow: 3px 0 0 0 var(--page), 5px 0 0 0 var(--page2), inset -3px 0 8px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  overflow: hidden;
  position: relative;
}

/* 반짝이 효과 */
.book-cover::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.12) 0%, transparent 50%);
  border-radius: 0 3px 3px 0;
  pointer-events: none;
}

.book-icon { font-size: 1.6rem; line-height: 1; }
.book-name {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
  word-break: keep-all;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.book-count {
  font-size: 0.6rem;
  color: var(--text);
  opacity: 0.65;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   index 페이지 공통 스타일 (index_page.css 통합)
   ══════════════════════════════════════════════════════════════ */
body { background: #0a0a0e; }

/* ── 테마: note ─────────────────────────────────────────────── */
[data-theme="note"] body {
  background: #f5f3ee !important;
  background-image: repeating-linear-gradient(
    transparent 0px, transparent 27px,
    rgba(100, 149, 237, 0.12) 28px
  ) !important;
}
[data-theme="note"] .text-gray-100,
[data-theme="note"] .text-gray-200  { color: #1e1e2e !important; }
[data-theme="note"] .text-gray-300,
[data-theme="note"] .text-gray-400  { color: #4a4a6a !important; }
[data-theme="note"] .text-gray-500,
[data-theme="note"] .text-gray-600  { color: #6a6a8a !important; }
[data-theme="note"] .bg-\[\#0a0a0e\]\/90 { background: rgba(245,243,238,0.95) !important; }
[data-theme="note"] .border-white\/5  { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="note"] .border-white\/10 { border-color: rgba(0,0,0,0.10) !important; }
[data-theme="note"] .bg-gray-800\/60  { background: rgba(0,0,0,0.07) !important; }
[data-theme="note"] .text-gray-600    { color: #6a6a8a !important; }
/* 카드/컨테이너 배경 */
[data-theme="note"] .stats-banner { background: linear-gradient(135deg,#dde5f5 0%,#e8e0f0 50%,#f0ecd8 100%) !important; border-color: rgba(0,0,0,0.10) !important; }
[data-theme="note"] .book-banner { background: linear-gradient(135deg,#f1e4c8 0%,#eee7d8 100%) !important; border-color: rgba(0,0,0,0.10) !important; }
[data-theme="note"] .stats-banner .text-gray-100 { color: #1e1e2e !important; }
[data-theme="note"] .book-banner .text-gray-100 { color: #1e1e2e !important; }
[data-theme="note"] .stats-banner .text-amber-500\/70,
[data-theme="note"] .stats-banner a { color: #7a5a10 !important; }
[data-theme="note"] .stats-banner svg { stroke: #5a5a7a !important; }
[data-theme="note"] .book-banner svg { stroke: #5a5a7a !important; }
[data-theme="note"] .qs-mini { background: rgba(0,0,0,0.06) !important; }
[data-theme="note"] .qs-mini span:last-child { color: #1e1e2e !important; }
[data-theme="note"] #stats-body   { background: #f8f7f2 !important; }
[data-theme="note"] .qs-card      { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="note"] .sc           { background: #ffffff !important; border-color: rgba(0,0,0,0.07) !important; }
/* 세션카드 게이지 트랙: 밝은 배경에서 bg-white/5는 투명에 가까움 → 컬러 틴트 트랙으로 교체 */
[data-theme="note"] .sc .bg-white\/5 { background: rgba(99,102,241,0.15) !important; }
[data-theme="note"] .sc:hover     { background: #f5f3ee !important; border-color: rgba(0,0,0,0.14) !important; }
[data-theme="note"] .sc.active    { background: #eef0fb !important; border-color: rgba(99,102,241,0.4) !important; }
[data-theme="note"] .sc.active::before { background: #6366f1; }
[data-theme="note"] .btn-secondary { background: #f5f2ec !important; border-color: rgba(0,0,0,0.10) !important; }
[data-theme="note"] .btn-secondary:hover { background: #ebe8e0 !important; }
[data-theme="note"] .goal-card     { background: #f5f2ec !important; }
[data-theme="note"] .session-row   { background: rgba(255,255,255,.7) !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="note"] .session-row:hover { background: rgba(255,255,255,.95) !important; }
[data-theme="note"] ::-webkit-scrollbar-thumb { background: #c0bdb6 !important; }
/* 노트 테마: 학습현황 내 inline 스타일 글자색 강제 덮어쓰기 */
[data-theme="note"] #stats-body * { color: #2a2a3a; }
[data-theme="note"] #stats-body .text-sky-400,
[data-theme="note"] #stats-body .text-green-400  { color: #1a7a3a !important; }
[data-theme="note"] #stats-body .text-yellow-400 { color: #8a6a00 !important; }
[data-theme="note"] #stats-body .text-red-400    { color: #b03030 !important; }
[data-theme="note"] #stats-body .text-indigo-400 { color: #4040b0 !important; }
[data-theme="note"] #stats-body .text-gray-300,
[data-theme="note"] #stats-body .text-gray-400,
[data-theme="note"] #stats-body .text-gray-500,
[data-theme="note"] #stats-body .text-gray-600,
[data-theme="note"] #stats-body .text-gray-700   { color: #5a5a7a !important; }
[data-theme="note"] #stats-body .qs-card div     { color: inherit !important; }
[data-theme="note"] #quick-stats .text-\[10px\]  { color: #7a7a9a !important; }
[data-theme="note"] .session-row span,
[data-theme="note"] .session-row div              { color: #2a2a3a !important; }
[data-theme="note"] .goal-card-head *             { color: #1e1e2e !important; }
[data-theme="note"] .sub-head *                   { color: #2a2a3a !important; }
[data-theme="note"] #weekly-heatmap-row,
[data-theme="note"] #weekly-heatmap-row *         { color: #5a5a7a !important; }
/* 키포인트·힌트 모달: 노트 테마에서도 다크 스타일 유지 */
[data-theme="note"] #hint-modal .text-gray-200,
[data-theme="note"] #hint-input-modal .text-gray-200 { color: #e2e8f0 !important; }
[data-theme="note"] #hint-modal .text-gray-400,
[data-theme="note"] #hint-input-modal .text-gray-400 { color: #9ca3af !important; }
[data-theme="note"] #hint-modal textarea,
[data-theme="note"] #hint-input-modal textarea     { color: #e2e8f0 !important; }
[data-theme="note"] #stats-body [style*="border-radius:9999px"] {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.12) !important;
}

/* 세션 그리드 스크롤 */
#session-scroll {
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #2d2d35 transparent;
}
#session-scroll::-webkit-scrollbar { width: 4px; }
#session-scroll::-webkit-scrollbar-thumb { background: #2d2d35; border-radius: 4px; }

#session-grid.goal-tree-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.other-sessions-block {
  grid-column: 1 / -1;
  order: 3;
}

/* 세션 카드 진행바 */
.s-bar-inner { transition: width .4s cubic-bezier(.4,0,.2,1); }

/* 퀵스탯 카드 */
.qs-card {
  background: #14141c;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 6px 10px;
  flex: 1 1 0;
  min-width: 0;
}

/* 세션 카드 */
.sc {
  background: #13131a;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.sc:hover  { background: #1a1a24; border-color: rgba(255,255,255,0.1); }
.sc.active { border-color: rgba(99,102,241,.5); background: #13131e; }
.sc:active { transform: scale(0.99); }

/* 진행중 강조 */
.sc.active::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  background: #6366f1;
  border-radius: 0 2px 2px 0;
}

/* 큰 버튼 */
.btn-play {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  color: white; text-decoration: none;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 24px rgba(99,102,241,.25);
}
.btn-play:hover  { opacity: .92; }
.btn-play:active { transform: scale(.98); }

.btn-secondary {
  background: #14141c;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  color: white; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn-secondary:hover  { background: #1c1c28; border-color: rgba(255,255,255,.12); }
.btn-secondary:active { transform: scale(.98); }

/* OK율 색상 */
.ok-high   { color: #22d3ee; }
.ok-good   { color: #4ade80; }
.ok-mid    { color: #facc15; }
.ok-low    { color: #f87171; }

/* 학습 현황 배너 */
.stats-banner {
  background: linear-gradient(135deg, #1a2744 0%, #1a1030 50%, #1c1a10 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  user-select: none;
}
.stats-banner:hover  { opacity: .92; }
.stats-banner:active { transform: scale(.98); }
.book-banner {
  background: linear-gradient(135deg, #24180a 0%, #15100a 100%);
  border: 1px solid rgba(245,158,11,0.18);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  user-select: none;
}
.book-banner:hover  { opacity: .92; }
.book-banner:active { transform: scale(.98); }
.stats-chevron {
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  color: rgba(255,255,255,.35);
}
.stats-chevron.open { transform: rotate(180deg); }
#stats-body,
#books-body {
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .25s;
  max-height: 0;
  opacity: 0;
}
#stats-body.open,
#books-body.open { max-height: 2000px; opacity: 1; }

/* 목표 카드 */
.goal-card {
  border-radius: 14px;
  display: contents;
  margin-bottom: 0;
  background: #131320;
}
.goal-card-head {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 12px 14px;
  border: 2px solid var(--goal-border, rgba(255,255,255,.10));
  border-radius: 14px;
  box-shadow: var(--goal-shadow, none);
  order: 1;
}
/* 1행: 아이콘 + 제목(한 줄) + 버튼 / 2행: 칩 / 3행: 지표 + 모의고사 */
.goal-head-top   { display: flex; align-items: center; gap: 10px; min-width: 0; }
.goal-head-title {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.goal-head-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.goal-head-stats {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 6px;
}
/* 목표 폴딩(선택 집중) 모드: 선택한 타일만 남기고 나머지/기타세션 숨김 */
#session-grid.goal-tree-grid.has-active .goal-card-head:not(.active-head) { display: none; }
#session-grid.goal-tree-grid.has-active .other-sessions-block { display: none; }
.goal-card-head.active-head {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 5;
}
.goal-exit-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 9999px;
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.8);
  font-size: 12px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.goal-exit-btn:hover  { background: rgba(0,0,0,.45); }
.goal-exit-btn:active { transform: scale(.92); }
.goal-card-head.active-head .goal-exit-btn { display: flex; }
[data-theme="note"] .goal-exit-btn { background: rgba(0,0,0,.08); color: rgba(0,0,0,.6); }
[data-theme="note"] .goal-exit-btn:hover { background: rgba(0,0,0,.16); }

/* 대분류 헤더 — 최근 플레이 세션 바로 이어하기 (색상 아이콘 위 오버레이 배지: 폭을 추가로 차지하지 않음) */
.goal-resume-btn {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: flex;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 9999px;
  background: #0ea5e9;
  color: #fff;
  font-size: 13px;
  border: 2px solid #0f0f13;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(14,165,233,.55);
  transition: background .15s, transform .1s;
}
.goal-resume-btn:hover  { background: #38bdf8; transform: scale(1.08); }
.goal-resume-btn:active { transform: scale(.92); }
[data-theme="note"] .goal-resume-btn { border-color: #f5f3ee; }
[data-theme="note"] .goal-resume-btn { background: rgba(2,132,199,.12); color: #0369a1; border-color: rgba(2,132,199,.35); }
[data-theme="note"] .goal-resume-btn:hover { background: rgba(2,132,199,.22); }
.goal-detail {
  grid-column: 1 / -1;
  display: none;
  border: 2px solid var(--goal-border, rgba(255,255,255,.10));
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: var(--goal-detail-bg, #131320);
  box-shadow: var(--goal-shadow, none);
  margin: -2px 0 6px;
  order: 2;
}
.goal-detail.open { display: block; }
.goal-color-dot {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px currentColor, 0 4px 12px rgba(0,0,0,.4);
}
.goal-sessions {
  padding: 8px 10px 10px;
}
/* 세션 카드 */
.session-row {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
}
.session-row:hover { background: rgba(255,255,255,.06); }
.subject-label {
  font-size: 10px; color: #4b5563;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 4px 2px;
  grid-column: 1 / -1;
}

/* 아코디언 공통 */
.ac-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s cubic-bezier(.4,0,.2,1), opacity .22s;
  opacity: 0;
}
.ac-body.open { max-height: 2000px; opacity: 1; }
.ac-chevron {
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.ac-chevron.open { transform: rotate(180deg); }
.sub-head { cursor: pointer; user-select: none; }
.sub-head:hover { filter: brightness(1.15); }

/* 책장 */
#book-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; min-height: 80px; }

@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.fade-up { animation: fadeUp .22s ease-out both; }
@keyframes slideDown { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.slide-down { animation: slideDown .2s ease-out both; }

/* 반응형 세션 그리드 */
.sg-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
@media (min-width:640px)  { .sg-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px) { .sg-grid { grid-template-columns:repeat(4,1fr); } }
@media (min-width:768px)  { #session-grid.goal-tree-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1180px) { #session-grid.goal-tree-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* 세션 스크롤 반응형 높이 */
@media (min-width:640px)  { #session-scroll { max-height: 620px; } }
@media (min-width:1024px) { #session-scroll { max-height: 820px; } }

/* qs-card 반응형 패딩 */
@media (min-width:640px)  { .qs-card { padding: 7px 12px; } }
@media (min-width:1024px) { .qs-card { padding: 8px 14px; } }