:root {
  --bgPrimary: #FFFFFF;
  --bgSecondary: #E8EEF5;
  --textPrimary: #1A1A2E;
  --colorPrimary: #1B4F72;
  --colorSecondary: #2980B9;
  --colorAccent: #F5A623;
  --cardBg: #FFFFFF;
  --cardBgGradient: none;
  --cardBackBg: none;
  --cardBorder: #1B4F72;
  --cardBorderWidth: 2px;
  --cardBorderStyle: solid;
  --cardShadow: 0 2px 8px rgba(0,0,0,0.1);
  --cardRadius: 12px;
  --cardWordColor: #1B4F72;
  --cardMeaningColor: #2C3E50;
  --cardQAColor: var(--cardBorder);
  --cardFont: system-ui, -apple-system, sans-serif;
  --colorSuccess: #2E7D32;
  --colorError: #C62828;
  --focusRing: #335EA8;
  --fontFamily: system-ui, -apple-system, sans-serif;
  --animSpeed: 1;
  --flipSpeed: 1;
  --slideSpeed: 1;
}

[data-theme="dark"] {
  --bgPrimary: #0D1117;
  --bgSecondary: #161B22;
  --textPrimary: #E6EDF3;
  --colorPrimary: #5DADE2;
  --colorSecondary: #1B4F72;
  --colorAccent: #F5A623;
  --cardBg: #1A2332;
  --cardBorder: #5DADE2;
  --cardWordColor: #5DADE2;
  --cardMeaningColor: #D5E8F0;
  --cardFont: system-ui, -apple-system, sans-serif;
  --colorSuccess: #4CAF50;
  --colorError: #EF5350;
  --focusRing: #5B8BD4;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--fontFamily);
  background: var(--bgPrimary);
  color: var(--textPrimary);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  transition: background 0.3s, color 0.3s;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

[data-reduced-motion="true"] * {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Navbar ===== */
#navbar {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  background: var(--bgSecondary);
  border-bottom: 1px solid var(--colorSecondary);
  position: relative;
  z-index: 60;
  gap: 0.5rem;
  flex-shrink: 0;
}
#navbar h1 { font-size: 1.2rem; color: var(--colorPrimary); white-space: nowrap; flex-shrink: 0; }

/* 사용자 정보: 맨 우측 */
#nav-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}
#user-email { display: none; }
.user-email-btn { cursor: pointer; }
.userPanel {
  position: absolute; top: 100%; right: 0; z-index: 120;
  background: var(--cardBg); border: 1px solid var(--cardBorder);
  border-radius: 8px; padding: 1rem; min-width: 260px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.userPanel-header { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--colorPrimary); }
.storage-deck-row { display: flex; justify-content: space-between; font-size: 0.75rem; padding: 0.15rem 0; }
.storage-deck-name { opacity: 0.8; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-deck-size { opacity: 0.6; }
.storage-section { border-bottom: 1px solid var(--cardBorder); padding-bottom: 0.4rem; }
.storage-section:last-child { border-bottom: none; padding-bottom: 0; }
.storage-row-main { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; }
.storage-row-main span:first-child { flex: 1; }
.storage-row-main span:nth-child(2) { font-size: 0.7rem; font-weight: 400; opacity: 0.6; }
.storage-detail-btn { background: none; border: 1px solid var(--cardBorder); border-radius: 4px; padding: 0 0.4rem; font-size: 0.8rem; cursor: pointer; color: var(--textPrimary); opacity: 0.5; line-height: 1.4; }
.storage-detail-btn:hover { opacity: 1; background: var(--bgSecondary); }
.storage-detail { padding: 0.3rem 0 0 0.5rem; border-left: 2px solid var(--cardBorder); margin: 0.3rem 0 0 0.3rem; max-height: 7.5rem; overflow-y: auto; }

/* ===== Buttons ===== */
.btn {
  padding: 0.5rem 1.2rem;
  border: 2px solid var(--colorPrimary);
  border-radius: 8px;
  background: var(--colorPrimary);
  color: #FFFFFF;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  transition: background 0.2s, border-color 0.2s;
  line-height: 1.4;
  vertical-align: middle;
}
.btn:hover { background: var(--colorSecondary); border-color: var(--colorSecondary); }
.btn:focus-visible { outline: 3px solid var(--focusRing); outline-offset: 2px; }

.btn-sm {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--colorSecondary);
  border-radius: 6px;
  background: transparent;
  color: var(--textPrimary);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: var(--fontFamily);
  transition: background 0.2s;
}
.btn-sm:hover { background: var(--colorSecondary); color: #FFFFFF; }

/* TTS button states */
#tts-speak-btn.tts-active,
#tts-speak-btn.tts-active:hover,
#tts-speak-btn.tts-active:focus { background: var(--colorPrimary) !important; color: #fff !important; border-color: var(--colorPrimary) !important; }
#tts-speak-btn:not(.tts-active):hover { background: var(--colorSecondary); color: #FFFFFF; }

/* Rating buttons */
.btn-again { background: var(--colorError); border-color: var(--colorError); }
.btn-again:hover { opacity: 0.85; }
.btn-hard { background: var(--colorAccent); border-color: var(--colorAccent); }
.btn-hard:hover { opacity: 0.85; }
.btn-good { background: var(--colorPrimary); border-color: var(--colorPrimary); }
.btn-easy { background: var(--colorSuccess); border-color: var(--colorSuccess); }
.btn-easy:hover { opacity: 0.85; }

/* ===== Select / Input ===== */
select {
  padding: 0.4rem 0.75rem;
  border: 2px solid var(--colorPrimary);
  border-radius: 8px;
  background: var(--cardBg);
  color: var(--textPrimary);
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  cursor: pointer;
}
select:focus-visible { outline: 3px solid var(--focusRing); outline-offset: 2px; }

input, textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--colorSecondary);
  border-radius: 8px;
  background: var(--cardBg);
  color: var(--textPrimary);
  font-size: 0.875rem;
  font-family: var(--fontFamily);
  margin-bottom: 0.8rem;
  transition: border-color 0.2s;
}
input:focus, textarea:focus { outline: none; border-color: var(--colorPrimary); }
textarea { min-height: 80px; resize: vertical; }

/* ===== Views ===== */
.view { padding: 2rem; max-width: 900px; margin: 0 auto; }

/* ===== Auth ===== */
.auth-box {
  max-width: 380px;
  margin: 4rem auto;
  padding: 2rem;
  background: var(--cardBg);
  border-radius: 12px;
  border: 2px solid var(--cardBorder);
}
.auth-box h2 { margin-bottom: 1.5rem; text-align: center; color: var(--colorPrimary); }
.toggle-text { text-align: center; margin-top: 1rem; color: var(--textPrimary); font-size: 0.85rem; opacity: 0.7; }
.toggle-text a { color: var(--colorPrimary); text-decoration: none; font-weight: 600; }
.auth-box .btn { width: 100%; }

/* ===== Section Header ===== */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.section-header h2 { color: var(--colorPrimary); }

/* Review header buttons — unified size */
#view-review > .section-header .btn-sm {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  line-height: 1.3;
}

/* ===== Deck Grid ===== */
.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.deck-item {
  background: var(--cardBg);
  border: 2px solid var(--cardBorder);
  border-radius: 12px;
  padding: 1.2rem;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.deck-item:hover {
  border-color: var(--colorAccent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.deck-item h3 { margin-bottom: 0.5rem; color: var(--cardWordColor); }
.deck-item .meta { color: var(--textPrimary); font-size: 0.85rem; opacity: 0.6; }
.deck-item .deck-actions { display: flex; gap: 0.3rem; margin-top: auto; padding-top: 0.8rem; }
.deck-item .deck-actions .btn { white-space: nowrap; font-size: 0.75rem; padding: 0.4rem 0.3rem; flex: 1; text-align: center; min-width: 0; }
.btn-quiz-color { background: var(--colorAccent); border-color: var(--colorAccent); }
.btn-quiz-color:hover { background: #e09500; border-color: #e09500; }
.btn-quiz-color:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-weak-color { background: var(--colorSecondary); border-color: var(--colorSecondary); }
.btn-weak-color:hover { background: var(--colorPrimary); border-color: var(--colorPrimary); }

/* ===== Card Grid ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.card-item {
  background: var(--cardBg);
  border: 2px solid var(--cardBorder);
  border-radius: 12px;
  padding: 1rem;
}
.card-item .front { font-weight: 600; margin-bottom: 0.4rem; color: var(--cardWordColor); }
.card-item .back { color: var(--cardMeaningColor); font-size: 0.85rem; opacity: 0.7; }
.card-item .card-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; }

/* ===== Flashcard (Review) ===== */
.flashcard {
  width: 360px;
  max-width: 100%;
  height: 240px;
  margin: 2rem auto;
  perspective: 2000px;
  cursor: pointer;
  position: relative;
  user-select: none;
  border-radius: 12px;
  container-type: inline-size;
  outline: none;
}
.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform calc(0.6s * var(--flipSpeed));
  transform-style: preserve-3d;
  will-change: transform;
}

.flashcard-front, .flashcard-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--cardBorderWidth) var(--cardBorderStyle) var(--cardBorder);
  border-radius: var(--cardRadius);
  background: var(--cardBgGradient, var(--cardBg));
  box-shadow: var(--cardShadow);
  padding: 1.5rem;
  font-size: clamp(1.5rem, 5vw, 6rem);
  text-align: center;
  word-break: break-word;
  color: var(--cardWordColor);
  font-family: var(--cardFont);
  transform: translateZ(0);
}
.flashcard-back {
  background: var(--cardBackBg, var(--cardBgGradient, var(--cardBg)));
  pointer-events: none;
}
.has-back-bg-image .backBgImageLayer {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
}
.has-back-bg-image .backBgOverlay {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
}
.has-back-bg-image .card-face-content {
  /* z-index:2 is already set on .card-face-content base */
}
.has-back-bg-image .card-qa-label,
.has-back-bg-image .card-side-badge {
  z-index: 10;
}
.has-back-bg-image .peekText {
  /* z-index:2 is already set on .coverflowPeek/.coverflowCard .peekText base */
}
.flashcard.flipped .flashcard-front {
  pointer-events: none;
}
.flashcard.flipped .flashcard-back {
  pointer-events: auto;
}
.card-qa-label {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 0.6rem;
  font-weight: 700;
  opacity: 0.35;
  pointer-events: none;
  z-index: 10;
  backface-visibility: hidden;
}
.card-side-badge {
  position: absolute;
  top: 18px;
  right: 10px;
  font-size: 0.75rem;
  opacity: 0.45;
  color: var(--cardQAColor, var(--cardBorder));
  pointer-events: none;
  z-index: 10;
  backface-visibility: hidden;
}
.flashcard-back {
  transform: rotateY(180deg) translateZ(0);
  color: var(--cardMeaningColor);
}

/* ===== Matrix Theme ===== */
.flashcard.theme-matrix #card-front-text,
.flashcard.theme-matrix #card-back-text {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.6), 0 0 25px rgba(0, 255, 65, 0.2);
}
.flashcard.theme-matrix .card-qa-label { text-shadow: 0 0 6px rgba(0, 255, 65, 0.4); }
.flashcard.theme-matrix .card-side-badge { text-shadow: 0 0 4px rgba(0, 255, 65, 0.3); opacity: 0.6; }
/* 앞면: 디지털 레인 (세로 열별 다른 속도로 흘러내림) */
.matrix-rain-front {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
  display: flex;
}
.matrix-col {
  flex: 1; min-width: 12px;
  font-size: 10px; line-height: 1.4;
  color: rgba(0, 255, 65, 0.18);
  writing-mode: vertical-lr;
  text-orientation: upright;
  letter-spacing: 0.1em;
  white-space: nowrap;
  animation: matrixFallLoop var(--col-speed, 4s) linear infinite;
  animation-delay: var(--col-delay, 0s);
}
.matrix-col:nth-child(odd) { color: rgba(0, 255, 65, 0.10); }
.matrix-col:nth-child(3n) { color: rgba(0, 255, 65, 0.28); }
.matrix-col:nth-child(5n+2) { color: rgba(0, 255, 65, 0.22); }
@keyframes matrixFallLoop {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}
.flashcard.theme-matrix .flashcard-front { overflow: hidden; }
/* 뒷면: 정적 문자 배경 + 스캔라인 */
.matrix-rain-back {
  position: absolute; inset: 0;
  font-size: 10px; line-height: 1.2;
  color: rgba(0, 255, 65, 0.08);
  word-break: break-all; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.matrix-scanline {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,65,0.03) 2px, rgba(0,255,65,0.03) 4px);
  pointer-events: none; z-index: 0;
}
[data-reduced-motion="true"] .matrix-rain-front { animation: none; opacity: 0.12; transform: none; }
/* Matrix: 미디어 버튼 가시성 */
.flashcard.theme-matrix .slot-audio-btn {
  background: rgba(0, 255, 65, 0.15);
  color: #00FF41;
  border-color: #00FF41;
}
.flashcard.theme-matrix .slot-audio-btn:hover {
  background: rgba(0, 255, 65, 0.4);
}

/* ===== Trump Card Theme ===== */
.flashcard.theme-trump .card-qa-label {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic; letter-spacing: 0.05em;
}
.trump-suit-tl, .trump-suit-br {
  position: absolute;
  font-size: clamp(0.7rem, 3cqi, 1.6rem);
  color: var(--cardBorder); opacity: 0.3;
  pointer-events: none; z-index: 0;
  line-height: 1; letter-spacing: 0.1em;
}
.trump-suit-tl { top: clamp(4px, 1.5cqi, 12px); left: clamp(6px, 2cqi, 16px); }
.trump-suit-br { bottom: clamp(4px, 1.5cqi, 12px); right: clamp(6px, 2cqi, 16px); transform: rotate(180deg); }
.trump-front-border {
  position: absolute; inset: 8px;
  border: 1px solid var(--cardBorder);
  border-radius: calc(var(--cardRadius) - 6px);
  opacity: 0.15; pointer-events: none; z-index: 0;
}
.trump-inner-border {
  position: absolute; inset: 6px;
  border: 1px solid var(--cardBorder);
  border-radius: calc(var(--cardRadius) - 4px);
  opacity: 0.25; pointer-events: none; z-index: 0;
}
.trump-back-pattern {
  position: absolute; inset: 12px;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 8px, var(--cardBorder) 8px, var(--cardBorder) 9px),
    repeating-linear-gradient(-45deg, transparent, transparent 8px, var(--cardBorder) 8px, var(--cardBorder) 9px);
  opacity: 0.06;
  border-radius: calc(var(--cardRadius) - 10px);
  pointer-events: none; z-index: 0;
}

/* 애니메이션 중: 원본 카드 장식은 inner와 함께 visibility:hidden으로 자동 숨김됨
   오버레이에 장식이 별도 삽입되므로 추가 숨김 불필요 */

.hint { text-align: center; color: var(--textPrimary); font-size: 0.85rem; opacity: 0.5; }

#rating-buttons { display: flex; justify-content: center; gap: 0.8rem; margin-top: 1.5rem; min-height: 2.5rem; }
#rating-buttons .btn { min-width: 80px; font-weight: 600; }
#rating-buttons.hidden { visibility: hidden; }

.keyboard-hints {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem;
  margin-top: 1rem; padding: 0.6rem 1rem;
  background: var(--cardBg, #f8f9fa); border: 1px solid var(--borderColor, #dee2e6);
  border-radius: 8px; font-size: 0.75rem; color: var(--textPrimary); opacity: 0.7;
}
.kb-hint { white-space: nowrap; }
.kb-hint kbd {
  display: inline-block; padding: 1px 5px; margin: 0 2px;
  background: var(--bgSecondary, #e9ecef); border: 1px solid var(--borderColor, #ced4da);
  border-radius: 3px; font-family: inherit; font-size: 0.7rem; line-height: 1.4;
  box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.kb-hint-rating { opacity: 0.25; transition: opacity 0.15s; }
.kb-hint-rating.visible { opacity: 1; }
.kb-hint-weak { opacity: 0.25; transition: opacity 0.15s; }
.kb-hint-weak.visible { opacity: 1; }
.kb-media-focus {
  outline: 2px solid var(--colorPrimary, #4a90d9); outline-offset: 2px; border-radius: 4px;
}

#review-done { text-align: center; margin-top: 4rem; }
#review-done h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--colorPrimary); }
#review-done p { color: var(--textPrimary); opacity: 0.6; margin-bottom: 1.5rem; }
.fullscreen-mode #review-done { margin-top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }

/* ===== Stats ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--cardBg);
  border: 2px solid var(--cardBorder);
  border-radius: 12px;
  padding: 1rem;
}
.stat-card h4 { font-size: 0.85rem; color: var(--textPrimary); opacity: 0.6; margin-bottom: 0.3rem; }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--colorPrimary); }

/* ===== Heatmap ===== */
#heatmap-container {
  background: var(--cardBg);
  border: 2px solid var(--cardBorder);
  border-radius: 12px;
  padding: 1rem;
  overflow-x: auto;
}
.heatmap { display: flex; gap: 3px; }
.heatmap-day { width: 14px; height: 14px; border-radius: 3px; background: var(--bgSecondary); cursor: pointer; transition: transform 0.1s; }
.heatmap-day:hover { transform: scale(1.3); }
.heatmap-day.l1 { background: #1e5a3a; }
.heatmap-day.l2 { background: #2a8f5e; }
.heatmap-day.l3 { background: var(--colorSuccess); }
.heatmap-day.l4 { background: #58f5a0; }

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  overflow-y: auto;
  padding: 1rem;
}
.modal {
  background: var(--cardBg);
  border: 2px solid var(--cardBorder);
  border-radius: 12px;
  padding: 1.5rem;
  min-width: 340px;
  max-width: 480px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.modal h3 { margin-bottom: 1rem; color: var(--colorPrimary); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* ===== Toolbar buttons (inside navbar) ===== */
.toolbarBtn {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--colorPrimary);
  border-radius: 6px;
  background: var(--bgSecondary);
  color: var(--textPrimary);
  font-size: 0.8rem;
  font-family: var(--fontFamily);
  cursor: pointer;
  transition: background 0.2s;
  min-width: 2.2rem;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  box-sizing: border-box;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toolbarBtn:hover { background: var(--colorPrimary); color: #FFFFFF; }
.toolbarBtn:focus-visible { outline: 3px solid var(--focusRing); outline-offset: 2px; }

/* Settings wrap */
.settingsWrap { position: relative; }
.settingsPanel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bgSecondary);
  border: 1px solid var(--colorPrimary);
  border-radius: 8px;
  padding: 0.75rem;
  min-width: 200px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  scrollbar-width: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}
.settingsPanel::-webkit-scrollbar { display: none; }
.settingsPanel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Settings category list */
.settings-cat-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.5rem; cursor: pointer; border-radius: 6px; transition: background 0.15s; }
.settings-cat-item:hover { background: var(--bgSecondary, #f5f5f5); }
.cat-icon { font-size: 1.1rem; width: 1.5rem; text-align: center; }
.cat-label { flex: 1; font-size: 0.85rem; font-weight: 500; }
.cat-count { font-size: 0.7rem; opacity: 0.5; min-width: 1.2rem; text-align: center; }
.cat-arrow { font-size: 1rem; opacity: 0.3; }
.settings-cat-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; margin-bottom: 0.3rem; border-bottom: 1px solid var(--borderColor, #ddd); }
.settings-cat-header span { font-size: 0.9rem; font-weight: 600; }

/* Settings scroll indicators */
.settings-scroll-up, .settings-scroll-down {
  position: sticky; left: 0; right: 0; z-index: 5;
  display: none; justify-content: center; align-items: center;
  padding: 0.2rem 0; cursor: pointer;
  font-size: 0.8rem; opacity: 0.6;
  background: var(--bgSecondary);
}
.settings-scroll-up { top: 0; }
.settings-scroll-down { bottom: 0; }
.settings-scroll-up:hover, .settings-scroll-down:hover { opacity: 1; }
.settings-scroll-up.visible, .settings-scroll-down.visible { display: flex; }
.settingsTitle {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--colorPrimary);
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--cardBorder);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-close-btn {
  display: none;
  font-size: 1rem;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
}

/* 몰입 모드 버튼: 기본 숨김 (모바일 전용) */
.review-immersive-btn,
.immersive-exit-btn {
  display: none;
}

/* 도움말: 데스크톱 전용 항목 (모바일에서 숨김) */
.help-desktop-only {}
.settingsRow { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.5rem; }
.settingsLabel { font-size: 0.8rem; color: var(--textPrimary); }
.settingsToggleBtn {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--colorSecondary);
  border-radius: 6px;
  background: none;
  color: var(--textPrimary);
  font-size: 0.8rem;
  font-family: var(--fontFamily);
  cursor: pointer;
  transition: background 0.15s;
  width: 100%;
  text-align: left;
}
.settingsToggleBtn:hover { background: var(--colorSecondary); color: #FFFFFF; }

/* Card theme buttons */
.cardThemeControl { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.cardThemeBtn {
  display: flex; align-items: center; gap: 0.35rem;
  flex: 1; min-width: 85px;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--colorSecondary);
  border-radius: 4px;
  background: none;
  color: var(--textPrimary);
  font-size: 0.7rem;
  font-family: var(--fontFamily);
  cursor: pointer;
  transition: background 0.15s;
}
.cardThemeBtn:hover { background: var(--colorSecondary); color: #FFFFFF; }
.cardThemeBtn.active { background: var(--colorPrimary); color: #FFFFFF; border-color: var(--colorPrimary); }
.cardThemeSwatch {
  display: inline-block; width: 16px; height: 16px;
  border-radius: 4px; border: 2px solid rgba(0,0,0,0.2); flex-shrink: 0;
}

/* Speed controls */
.speedControl { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.flipSpeedBtn, .slideSpeedBtn, .slideRatingBtn, .cardOrderBtn, .effectBtn, .ttsSpeedBtn {
  flex: 1; padding: 0.3rem 0.2rem;
  border: 1px solid var(--colorSecondary); border-radius: 4px;
  background: none; color: var(--textPrimary);
  font-size: 0.7rem; font-family: var(--fontFamily);
  cursor: pointer; transition: background 0.15s;
}
.flipSpeedBtn:hover, .slideSpeedBtn:hover, .slideRatingBtn:hover, .cardOrderBtn:hover, .effectBtn:hover, .ttsSpeedBtn:hover { background: var(--colorSecondary); color: #FFFFFF; }
.flipSpeedBtn.active, .slideSpeedBtn.active, .slideRatingBtn.active, .cardOrderBtn.active, .effectBtn.active, .ttsSpeedBtn.active { background: var(--colorPrimary); color: #FFFFFF; border-color: var(--colorPrimary); }
.flipSpeedBtn:focus-visible, .slideSpeedBtn:focus-visible, .slideRatingBtn:focus-visible, .cardOrderBtn:focus-visible, .effectBtn:focus-visible, .ttsSpeedBtn:focus-visible { outline: 2px solid var(--focusRing); outline-offset: 1px; }

/* Custom theme panel */
.customThemePanel { display: none; gap: 0.35rem; margin-top: 0.35rem; }
.customThemePanel.open { display: flex; flex-direction: column; }
.customThemeRow { display: flex; align-items: center; gap: 0.5rem; }
.customThemeRow label { font-size: 0.7rem; color: var(--textPrimary); min-width: 65px; }
.customThemeRow input[type="color"] {
  width: 28px; height: 22px; border: 1px solid var(--colorSecondary);
  border-radius: 4px; padding: 0; cursor: pointer; background: none;
  margin-bottom: 0;
}
.customThemeRow input[type="range"] { margin: 0; }
.backBgImagePreview {
  width: 100%; aspect-ratio: 3/2; border: 1px solid var(--colorSecondary);
  border-radius: 8px; overflow: hidden; position: relative; cursor: grab;
  background: var(--cardBackBg, #eee); margin-top: 4px;
}
.backBgImagePreview:active { cursor: grabbing; }
.backBgImagePreviewInner {
  position: absolute; inset: 0; background-size: cover;
  background-repeat: no-repeat; pointer-events: none;
}
.backBgOverlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}

/* ===== Card Size Control ===== */
.cardSizeControl {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: none; /* shown only in review view */
  gap: 0.25rem;
  background: var(--bgSecondary);
  border: 1px solid var(--colorPrimary);
  border-radius: 8px;
  padding: 0.25rem;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.cardSizeControl.visible { display: flex; }

.cardSizeBtn {
  padding: 0.35rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s;
  line-height: 1;
  color: var(--textPrimary);
}
.cardSizeBtn:hover { background: var(--colorSecondary); }
.cardSizeBtn.active { background: var(--colorPrimary); border-color: var(--colorPrimary); color: #fff; }
.cardSizeBtn:focus-visible { outline: 2px solid var(--focusRing); outline-offset: 1px; }

/* Fit mode */
.flashcard.sizeFit {
  width: 100%;
  max-width: min(800px, 100%);
  height: calc(100vh - 14rem);
  max-height: 500px;
  background: var(--bgPrimary);
}
.flashcard.sizeFit .flashcard-inner {
  position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 16px;
}
.flashcard.sizeFit .flashcard-front,
.flashcard.sizeFit .flashcard-back { border-radius: 16px; }
.flashcard.sizeFit .flipClockOverlay,
.flashcard.sizeFit .pageTurnOverlay {
  top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 16px;
}

/* Full mode — fullscreen on #review-area, card and buttons stay separate */
.flashcard.sizeFull {
  width: auto;
  height: 60vh;
  aspect-ratio: 3/2;
  max-width: 90vw;
}
.flashcard.sizeFull .flashcard-inner { border-radius: 16px; }
.flashcard.sizeFull .flashcard-front,
.flashcard.sizeFull .flashcard-back { border-radius: 16px; }

#review-area.fullscreen-mode {
  background: var(--bgPrimary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100vw; height: 100vh;
  padding: 2rem;
  position: relative;
}

/* Fullscreen progress bar */
.fullscreen-progress {
  display: none;
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px; z-index: 20;
}
.fullscreen-mode .fullscreen-progress { display: block; }
.fullscreen-progress-bar {
  height: 100%; width: 0%;
  background: var(--colorPrimary);
  border-radius: 2px 0 0 0;
  transition: width 0.3s ease;
}
.fullscreen-progress-text {
  display: none;
  position: absolute; bottom: 6px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem; color: var(--textPrimary); opacity: 0.7;
  background: var(--bgSecondary); padding: 2px 10px; border-radius: 8px;
  pointer-events: none; white-space: nowrap;
}
.fullscreen-progress:hover .fullscreen-progress-text { display: block; }

/* Resize mode */
.flashcard.sizeResize {
  min-width: 200px; min-height: 140px;
  max-width: 90vw; max-height: 80vh;
  background: var(--bgPrimary);
  position: relative;
}
.flashcard.sizeResize::after {
  content: none;
}
.fc-resize-handle {
  position: absolute; bottom: 0; right: 0;
  width: 20px; height: 20px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--colorSecondary) 50%);
  border-radius: 0 0 10px 0; opacity: 0.6; z-index: 10;
  pointer-events: none;
}
/* Hide resize handle during fade/zoom/slide/clock flip transitions */
.flashcard.fc-animating[data-flip="fade"] .fc-resize-handle,
.flashcard.fc-animating[data-flip="zoom"] .fc-resize-handle,
.flashcard.fc-animating[data-flip="slide"] .fc-resize-handle,
.flashcard.fc-animating[data-flip="flipClock"] .fc-resize-handle,
.flashcard.fc-animating[data-flip="none"] .fc-resize-handle {
  opacity: 0;
}

/* ===== Stats Detail View ===== */
.stats-section { margin-bottom: 2rem; }
.stats-section h3 { color: var(--colorPrimary); margin-bottom: 1rem; font-size: 1.1rem; }
.stat-detail { font-size: 0.75rem; color: var(--textPrimary); opacity: 0.5; margin-top: 0.2rem; }

/* Stability distribution */
.stability-dist { margin-top: 1rem; }
.stability-dist h4 { font-size: 0.85rem; color: var(--textPrimary); opacity: 0.7; margin-bottom: 0.5rem; }
.stability-bars { display: flex; flex-direction: column; gap: 0.4rem; }
.stab-bar { display: flex; align-items: center; gap: 0.5rem; }
.stab-bar span { font-size: 0.75rem; color: var(--textPrimary); opacity: 0.7; min-width: 90px; }
.stab-fill { height: 8px; border-radius: 4px; min-width: 2px; transition: width 0.3s; }

/* 7-day chart */
.chart7-wrap { margin-top: 1rem; }
.chart7-wrap h4 { font-size: 0.85rem; color: var(--textPrimary); opacity: 0.7; margin-bottom: 0.5rem; }
.chart7 { display: flex; align-items: flex-end; gap: 0.5rem; height: 110px; }
.bar7-col { display: flex; flex-direction: column; align-items: center; flex: 1; }
.bar7-stacked { width: 100%; max-width: 40px; display: flex; flex-direction: column; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 2px; }
.bar7-seg { min-height: 0; }
.bar7-count { font-size: 0.65rem; color: var(--textPrimary); opacity: 0.6; margin-top: 0.2rem; }
.bar7-label { font-size: 0.65rem; color: var(--textPrimary); opacity: 0.5; }

/* Rating distribution */
.rating-dist-wrap { margin-top: 1rem; }
.rating-dist-wrap h4 { font-size: 0.85rem; color: var(--textPrimary); opacity: 0.7; margin-bottom: 0.5rem; }
.rating-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.rating-bar-label { font-size: 0.8rem; min-width: 45px; color: var(--textPrimary); }
.rating-bar-track { flex: 1; height: 10px; background: var(--bgSecondary); border-radius: 5px; overflow: hidden; border: 1px solid var(--cardBorder); }
.rating-bar-fill { height: 100%; border-radius: 5px; transition: width 0.3s; }
.rating-bar-val { font-size: 0.75rem; color: var(--textPrimary); opacity: 0.6; min-width: 70px; text-align: right; }

/* Deck progress */
.deck-stats { display: flex; flex-direction: column; gap: 0.8rem; }
.deck-stat-row { display: flex; flex-direction: column; gap: 0.3rem; }
.deck-stat-name { font-weight: 600; font-size: 0.9rem; color: var(--cardWordColor); }
.deck-stat-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bgSecondary); border: 1px solid var(--cardBorder); }
.deck-bar-seg { height: 100%; transition: width 0.3s; }
.deck-stat-detail { font-size: 0.75rem; color: var(--textPrimary); opacity: 0.6; }

/* Heatmap in stats */
.heatmap-wrap { background: var(--cardBg); border: 2px solid var(--cardBorder); border-radius: 12px; padding: 1rem; overflow-x: auto; }

/* ===== Card Heatmap Grid ===== */
.card-heat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0.4rem 0 0.3rem;
}
.card-heat-cell {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.card-heat-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 5px; line-height: 1;
  color: rgba(255,255,255,0.7);
  pointer-events: none;
}
.card-heat-none .card-heat-num {
  color: var(--textPrimary); opacity: 0.25;
}
.card-heat-none {
  background: var(--bgSecondary);
  border: 1px solid var(--bgSecondary);
  cursor: default;
  pointer-events: none;
}
.card-heat-active {
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.1);
  transition: transform 0.1s, box-shadow 0.1s;
}
.card-heat-active:hover {
  transform: scale(1.8);
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  z-index: 5;
  position: relative;
}

/* Card heat tooltip */
.card-heat-tooltip {
  position: fixed;
  z-index: 200;
  background: var(--cardBg);
  border: 2px solid var(--cardBorder);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  max-width: 250px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  font-size: 0.8rem;
  pointer-events: none;
}
.cht-front { color: var(--cardWordColor); font-weight: 600; margin-bottom: 0.3rem; word-break: break-word; }
.cht-back { color: var(--cardMeaningColor); opacity: 0.8; margin-bottom: 0.3rem; word-break: break-word; }
.cht-meta { font-size: 0.7rem; color: var(--textPrimary); opacity: 0.5; }

/* Rating history color line in card heat tooltip */
.cht-rating-history {
  display: flex;
  gap: 1px;
  margin-top: 0.4rem;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
}
.cht-rating-seg {
  flex: 1;
  min-width: 3px;
  max-width: 12px;
  border-radius: 1px;
}

/* ===== 14-day charts ===== */
.chart14-wrap { margin-top: 1rem; }
.chart14-wrap h4 { font-size: 0.85rem; color: var(--textPrimary); opacity: 0.7; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.chart14 { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.bar14-col { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.bar14-stacked { width: 100%; max-width: 30px; display: flex; flex-direction: column; border-radius: 3px 3px 0 0; overflow: hidden; min-height: 2px; }
.bar14-seg { min-height: 0; }
.bar14-label { font-size: 0.6rem; color: var(--textPrimary); opacity: 0.4; margin-top: 0.2rem; }
.chart-legend { font-size: 0.7rem; font-weight: 400; opacity: 0.6; display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }

/* ===== Weak Practice Settings ===== */
.weak-practice-options { display: flex; flex-direction: column; gap: 0.25rem; }
.wp-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--textPrimary); cursor: pointer; }
.wp-check input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }

/* ===== Restart Popup ===== */
.restart-popup {
  text-align: center;
  padding: 1rem 1.5rem;
  background: var(--cardBg);
  border: 2px solid var(--cardBorder);
  border-radius: 12px;
  margin: 1rem auto;
  max-width: 360px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  animation: fadeIn 0.2s ease;
}
.restart-popup p {
  margin-bottom: 1rem;
  color: var(--cardWordColor);
  font-size: 0.95rem;
  line-height: 1.5;
}
.restart-popup-btns {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}

/* ===== Tab Bar (navbar 아래 별도 레이어) ===== */
.tab-bar {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
  background: var(--bgSecondary);
  border-bottom: 1px solid var(--colorSecondary);
  flex-shrink: 0;
}

#main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  min-height: 0;
  scrollbar-color: var(--colorSecondary) transparent;
  scrollbar-width: thin;
}
#main-content::-webkit-scrollbar { width: 8px; }
#main-content::-webkit-scrollbar-track { background: transparent; }
#main-content::-webkit-scrollbar-thumb { background: var(--colorSecondary); border-radius: 4px; }
#main-content::-webkit-scrollbar-thumb:hover { background: var(--colorPrimary); }
.tab-btn {
  padding: 0.7rem 1.2rem;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--textPrimary);
  font-size: 0.9rem;
  font-family: var(--fontFamily);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  opacity: 0.6;
}
.tab-btn:hover {
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.03);
}
.tab-btn.active {
  opacity: 1;
  color: var(--colorPrimary);
  border-bottom-color: var(--colorPrimary);
  font-weight: 600;
}
.tab-btn:focus-visible {
  outline: 3px solid var(--focusRing);
  outline-offset: -2px;
}
[data-theme="dark"] .tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}


/* ===== Card Table (슬롯 기반) ===== */
.card-table-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.slot-visibility-toggles {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
}
.slot-vis-btn {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  opacity: 0.8;
}
.slot-vis-btn.slot-hidden {
  opacity: 0.4;
  text-decoration: line-through;
}
.slot-col-hidden {
  display: none;
}
.card-search-input {
  flex: 1;
  max-width: 300px;
  margin-bottom: 0;
}
.card-count {
  font-size: 0.85rem;
  color: var(--textPrimary);
  opacity: 0.6;
}
.card-table-scroll {
  overflow-x: auto;
  margin-bottom: 1rem;
}
.card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.card-table th, .card-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--cardBorder);
  text-align: left;
  vertical-align: top;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-table th {
  background: var(--bgSecondary);
  font-weight: 600;
  color: var(--colorPrimary);
  position: sticky;
  top: 0;
  z-index: 1;
}
.card-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.03);
}
[data-theme="dark"] .card-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.card-table .select-col {
  width: 32px;
  text-align: center;
}
.card-table .select-col input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.card-table .actions-cell {
  white-space: nowrap;
}
.card-table .actions-cell .btn-sm {
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
}
.selected-row {
  background: rgba(51, 94, 168, 0.08);
}
[data-theme="dark"] .selected-row {
  background: rgba(91, 139, 212, 0.12);
}
.side-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  background: var(--colorSecondary);
  color: #fff;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.tag-cell { white-space: normal; }
.tag-chip {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--bgSecondary);
  border: 1px solid var(--colorSecondary);
  color: var(--textPrimary);
  margin: 0.1rem;
}
.batch-action-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bgSecondary);
  border: 1px solid var(--colorPrimary);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}
.batch-action-bar .btn-sm { font-size: 0.75rem; }
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

/* Tag filter & batch tag input */
.tag-filter-select {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 6px;
  margin-bottom: 0;
  width: auto;
}
.batch-tag-field {
  width: 120px;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 6px;
  margin-bottom: 0;
}
.sortable-th {
  cursor: pointer;
  user-select: none;
}
.sortable-th:hover {
  color: var(--colorAccent);
}

/* ===== Deck Edit Modal ===== */
.deck-edit-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--colorPrimary);
  display: block;
  margin-bottom: 0.2rem;
}
.deck-edit-template {
  border: 1px solid var(--cardBorder);
  border-radius: 8px;
  padding: 0.75rem;
  background: var(--bgSecondary);
}
.deck-edit-slots {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.deck-edit-slot-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.deck-edit-slot-row input {
  margin-bottom: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}
.deck-edit-slot-row select {
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
  min-width: 70px;
}
.deck-edit-slot-row .btn-sm {
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.field-deleted {
  opacity: 0.5;
  padding: 0.3rem 0.5rem;
  background: rgba(198, 40, 40, 0.08);
  border-radius: 4px;
}
.new-slot-row input {
  border-color: var(--colorAccent);
}

/* ===== Cards Layout (table + preview side by side) ===== */
.cards-layout {
  display: flex;
  gap: 1rem;
}
.card-list-area {
  flex: 1;
  min-width: 0;
}
.card-preview-panel {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 1rem;
  align-self: flex-start;
}
.card-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.card-preview-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--colorPrimary);
}
.card-preview-actions {
  display: flex;
  gap: 0.25rem;
}
.card-preview-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  background: var(--cardBg);
  border: 2px solid var(--cardBorder);
  border-radius: 12px;
  overflow: hidden;
  padding: 0.5rem;
  color: var(--cardWordColor);
}

/* Card Preview Overlay (크게 보기) */
.card-preview-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
}
.card-preview-overlay-inner {
  width: 90vw; max-width: 700px; max-height: 90vh;
  display: flex; flex-direction: column;
}
.card-preview-overlay-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--bgPrimary); border-radius: 12px 12px 0 0;
}
.card-preview-overlay-header span { font-size: 0.9rem; font-weight: 600; color: var(--colorPrimary); }
.card-preview-overlay-actions { display: flex; gap: 0.25rem; }
.card-preview-overlay-actions .active { background: var(--colorPrimary); color: #fff; border-color: var(--colorPrimary); }
.card-preview-overlay-content {
  position: relative;
  width: 100%; aspect-ratio: 3/2;
  background: var(--cardBg); border: 2px solid var(--cardBorder);
  border-radius: 0 0 12px 12px;
  overflow: hidden; padding: 1rem;
  color: var(--cardWordColor);
}
.preview-slot {
  word-break: break-word;
}
.preview-media-img {
  max-width: 100%;
  border-radius: 4px;
}
.preview-media-video {
  max-width: 100%;
  border-radius: 4px;
}
.preview-audio {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.audio-toggle {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--colorPrimary);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  font-size: 0.8rem;
}
.audio-toggle.playing {
  background: var(--colorPrimary);
  color: #fff;
}
.media-indicator {
  font-size: 0.7rem;
  opacity: 0.6;
}

/* ===== Layout Editor ===== */
.layout-slot-item {
  border: 1px solid var(--cardBorder);
  border-radius: 8px;
  padding: 0.6rem;
  margin-bottom: 0.5rem;
  background: var(--cardBg);
}
.layout-slot-item.layout-slot-selected {
  border-color: var(--colorPrimary);
  box-shadow: 0 0 0 2px rgba(51, 94, 168, 0.2);
}
.layout-slot-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.layout-slot-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--colorPrimary);
}
.layout-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.layout-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.layout-label {
  font-size: 0.75rem;
  color: var(--textPrimary);
  opacity: 0.7;
  min-width: 35px;
}
.position-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.preset-btn {
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--colorSecondary);
  border-radius: 3px;
  background: none;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--textPrimary);
  transition: background 0.1s;
}
.preset-btn:hover { background: var(--colorSecondary); color: #fff; }
.preset-btn.active { background: var(--colorPrimary); color: #fff; border-color: var(--colorPrimary); }
.layout-size-slider {
  flex: 1;
  margin-bottom: 0;
}
.font-style-btn {
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--colorSecondary);
  border-radius: 3px;
  background: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--textPrimary);
}
.font-style-btn.italic { font-style: italic; }
.font-style-btn.underline { text-decoration: underline; }
.font-style-btn.active { background: var(--colorPrimary); color: #fff; border-color: var(--colorPrimary); }
.align-btn {
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--colorSecondary);
  border-radius: 3px;
  background: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--textPrimary);
}
.align-btn.active { background: var(--colorPrimary); color: #fff; border-color: var(--colorPrimary); }

/* Inline edit */
.editing-row { background: rgba(51, 94, 168, 0.05); }
.edit-cell { display: flex; flex-direction: column; gap: 0.2rem; }
.inline-edit-input { margin-bottom: 0; padding: 0.3rem 0.4rem; font-size: 0.8rem; }
.inline-edit-tags { margin-bottom: 0; padding: 0.3rem 0.4rem; font-size: 0.8rem; width: 100%; }
.compact-table td, .compact-table th { padding: 0.3rem 0.4rem; font-size: 0.8rem; }

/* Bulk tabs */
.bulk-tabs { display: flex; gap: 0; margin-bottom: 0.5rem; border-bottom: 2px solid var(--cardBorder); }
.bulk-tab {
  padding: 0.4rem 0.8rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--textPrimary);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.6;
  margin-bottom: -2px;
}
.bulk-tab.active { opacity: 1; color: var(--colorPrimary); border-bottom-color: var(--colorPrimary); font-weight: 600; }
.bulk-tab:hover { opacity: 0.85; }

/* ===== Slot Palette & Canvas ===== */
.slot-palette { margin-bottom: 0.5rem; }
.slot-palette-label { font-size: 0.75rem; color: var(--textPrimary); opacity: 0.6; display: block; margin-bottom: 0.3rem; }
.slot-palette-items { display: flex; flex-wrap: wrap; gap: 0.3rem; min-height: 28px; align-items: flex-start; }
.slot-palette-empty { font-size: 0.75rem; opacity: 0.4; padding: 0.2rem 0.5rem; }
.slot-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem;
  border: 1px solid var(--colorSecondary); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.slot-chip:hover { border-color: var(--colorPrimary); }
.slot-chip.available { opacity: 0.7; }
.slot-chip.available:hover { opacity: 1; background: var(--bgSecondary); }
.slot-chip.placed { background: var(--bgSecondary); }
.slot-chip.chip-selected { border-color: var(--colorPrimary); background: var(--colorPrimary); color: #fff; }
.side-select-front { border-left: 3px solid var(--colorPrimary); }
.side-select-back { border-left: 3px solid var(--colorAccent); }
.side-select-both { border-left: 3px solid var(--colorSuccess); }
.side-select-none { border-left: 3px solid var(--textPrimary); opacity: 0.5; }
.chip-remove-btn {
  background: none; border: none; cursor: pointer; font-size: 0.65rem;
  opacity: 0.5; padding: 0 0.15rem; color: inherit;
}
.chip-remove-btn:hover { opacity: 1; color: var(--colorError); }

.layout-canvas {
  border: 2px dashed var(--cardBorder); border-radius: 8px;
  padding: 0.5rem; margin-bottom: 0.5rem; min-height: 40px;
}
.canvas-slot-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* Layout detail panel */
.layout-detail-panel {
  border: 1px solid var(--colorPrimary); border-radius: 8px;
  padding: 0.6rem; margin-bottom: 0.5rem; background: var(--cardBg);
}
.detail-advanced summary { font-size: 0.75rem; cursor: pointer; opacity: 0.7; margin-top: 0.3rem; }
.layout-adv-input { width: 42px; margin-bottom: 0; padding: 0.2rem; font-size: 0.75rem; }
.anchor-btn {
  padding: 0.15rem 0.35rem; border: 1px solid var(--colorSecondary);
  border-radius: 3px; background: none; cursor: pointer; font-size: 0.75rem;
}
.anchor-btn.active { background: var(--colorPrimary); color: #fff; border-color: var(--colorPrimary); }
.layout-color-input { width: 28px; height: 22px; border: 1px solid var(--colorSecondary); border-radius: 4px; padding: 0; cursor: pointer; background: none; margin-bottom: 0; }

/* Layout preview */
.layout-preview-section { margin-top: 0.5rem; }
.layout-preview-card {
  position: relative; aspect-ratio: 3/2;
  background: var(--cardBg); border: 2px solid var(--cardBorder);
  border-radius: 12px; overflow: hidden; padding: 0.5rem;
  color: var(--cardWordColor);
}
.preview-slot-selected { outline: 2px solid var(--colorPrimary); outline-offset: 1px; border-radius: 3px; }

/* ===== Slot Media in Cards ===== */
.slot-content {
  margin-bottom: 0.3rem;
}
.slot-media-img {
  border-radius: 4px;
  max-height: 60cqh;
}
.slot-media-video {
  border-radius: 4px;
}
.slot-audio-player {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.slot-audio-btn {
  padding: 0.3rem 0.6rem;
  border: 2px solid var(--cardBorder);
  border-radius: 50%;
  background: var(--cardBg);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.15s;
}
.slot-audio-btn:hover {
  background: var(--colorPrimary);
  color: #fff;
}
/* Flashcard media sizing */
.flashcard-front .slot-media-img,
.flashcard-back .slot-media-img {
  max-width: 80%;
  max-height: 50cqh;
  object-fit: contain;
}
.flashcard-front .slot-media-video,
.flashcard-back .slot-media-video {
  max-width: 80%;
  max-height: 50cqh;
}

/* ===== Card Table Cell Media ===== */
.cell-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
}
.cell-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-media-thumb {
  max-width: 60px;
  max-height: 40px;
  border-radius: 3px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.15s;
  vertical-align: middle;
}
.cell-media-thumb:hover {
  transform: scale(2.5);
  z-index: 10;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.cell-media-thumb-video {
  max-width: 60px;
  max-height: 40px;
  border-radius: 3px;
  object-fit: cover;
  vertical-align: middle;
}
.cell-audio {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  vertical-align: middle;
}
.cell-audio-btn {
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--colorPrimary);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--colorPrimary);
  transition: background 0.15s;
}
.cell-audio-btn:hover {
  background: var(--colorPrimary);
  color: #fff;
}
.compact-table .cell-media-thumb {
  max-width: 40px;
  max-height: 28px;
}
.compact-table .cell-media-thumb-video {
  max-width: 40px;
  max-height: 28px;
}

/* ===== Deck Status Badges ===== */
.deck-status {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 0.2rem;
  line-height: 1.3;
  white-space: nowrap;
}
.deck-status-waiting { background: var(--colorSecondary); color: #fff; }
.deck-status-due { background: var(--colorAccent); color: #fff; }
.deck-status-complete { background: var(--colorSuccess); color: #fff; }
.deck-status-scheduled { background: var(--colorPrimary); color: #fff; opacity: 0.8; }
.deck-status-empty { background: var(--bgSecondary); color: var(--textPrimary); opacity: 0.5; }
.deck-complete { opacity: 0.7; }
.deck-empty { opacity: 0.5; }
.stat-detail { font-size: 0.7rem; color: var(--textPrimary); opacity: 0.5; margin-top: 0.1rem; }

/* ===== Deck Edit Modal (fixed size) ===== */
.modal.modal-deck-edit {
  width: 560px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  margin-top: 2vh;
}
.modal.modal-deck-edit #modal-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.modal.modal-deck-edit #modal-body.has-layout-tab {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

/* Layout tab */
.layout-tab-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.layout-preview-fixed {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.layout-preview-card {
  aspect-ratio: 3/2;
  width: 50%;
}
.layout-preview-fixed .card-preview-header {
  width: 50%;
  margin-bottom: 0.3rem;
}
.btn-preview-grid.active { background: var(--colorPrimary); color: #fff; border-color: var(--colorPrimary); }
.layout-controls-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Layout side buttons (below preview) */
.layout-side-buttons {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.4rem 0;
}

/* Slot edit header */
.deck-edit-slot-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.2rem 0.3rem;
  border-bottom: 1px solid var(--cardBorder);
  margin-bottom: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--textPrimary);
  opacity: 0.6;
}
.slot-hdr-name { flex: 1; }
.slot-hdr-side { min-width: 70px; }
.slot-hdr-order { width: 40px; text-align: center; }
.slot-hdr-layer { width: 40px; text-align: center; }
.slot-hdr-action { width: 28px; }

/* ===== Deck Settings Modal ===== */
.deck-settings-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.settings-difficulty {
  margin-bottom: 0.25rem;
}
.difficulty-btn {
  flex: 1;
  padding: 0.4rem 0.3rem;
  border: 1px solid var(--colorSecondary);
  border-radius: 4px;
  background: none;
  color: var(--textPrimary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.difficulty-btn:hover { background: var(--colorSecondary); color: #fff; }
.difficulty-btn.active { background: var(--colorPrimary); color: #fff; border-color: var(--colorPrimary); }
.settings-params {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.settings-param-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.settings-param-row span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.settings-param-row input {
  width: 80px;
  margin-bottom: 0;
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  text-align: right;
}
.param-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--colorSecondary);
  color: #fff;
  font-size: 0.6rem;
  cursor: help;
  flex-shrink: 0;
  position: relative;
}
.param-tip:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  transform: none;
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  color: var(--textPrimary);
  white-space: normal;
  width: 220px;
  max-width: 80vw;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 200;
  pointer-events: none;
  line-height: 1.4;
}

/* Deck search bar */
.deck-search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

/* Slot layout container in flashcard */
.flashcard-front .slot-layout-container,
.flashcard-back .slot-layout-container {
  width: 100%;
  height: 100%;
}

/* Card face content */
.card-face-content {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.card-face-content .slot-layout-container {
  position: absolute;
  inset: 0;
}
/* Flashcard faces: use slot layout sizing, not default clamp */
.flashcard-front.has-slot-layout,
.flashcard-back.has-slot-layout {
  font-size: 1rem;
  padding: 0.5rem;
  align-items: stretch;
  justify-content: stretch;
}
/* No layout mode: keep centered */
.card-face-content:not(.has-slot-layout) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Deck reset icon (inline with status) */
.btn-reset-deck-icon {
  display: inline-block;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  opacity: 0.4;
  padding: 0 0.15rem;
  vertical-align: middle;
  transition: opacity 0.15s;
}
.btn-reset-deck-icon:hover {
  opacity: 1;
}

/* ===== Toast Notifications ===== */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  font-size: 0.85rem;
  color: var(--textPrimary);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s, transform 0.3s;
  max-width: 360px;
}

.toast.toast-show { opacity: 1; transform: translateX(0); }
.toast-icon { font-size: 1rem; flex-shrink: 0; }
.toast-msg { line-height: 1.4; word-break: break-word; }
.toast-success { border-left: 4px solid var(--colorSuccess); }
.toast-success .toast-icon { color: var(--colorSuccess); }
.toast-error { border-left: 4px solid var(--colorError); }
.toast-error .toast-icon { color: var(--colorError); }
.toast-info { border-left: 4px solid var(--colorPrimary); }
.toast-info .toast-icon { color: var(--colorPrimary); }
.toast-warning { border-left: 4px solid #f39c12; }
.toast-warning .toast-icon { color: #f39c12; }

/* Notification history panel */
.notif-badge { position:absolute;top:-2px;right:-4px;background:var(--colorError,#e53);color:#fff;font-size:0.6rem;min-width:14px;height:14px;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:0 3px;font-weight:700;line-height:1; }
.notifPanel { position:absolute;top:calc(100% + 6px);right:0;background:var(--bgSecondary);border:1px solid var(--borderColor,#ddd);border-radius:8px;padding:0.5rem;min-width:260px;max-width:340px;max-height:400px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:100;display:flex;flex-direction:column; }
.notifTitle { font-size:0.8rem;font-weight:600;color:var(--colorPrimary);margin-bottom:0.4rem;display:flex;align-items:center;justify-content:space-between; }
.notif-list { overflow-y:auto;flex:1;max-height:320px;scrollbar-width:thin; }
.notif-item { display:flex;align-items:flex-start;gap:0.4rem;padding:0.35rem 0.3rem;border-bottom:1px solid var(--borderColor,#eee);font-size:0.78rem;line-height:1.3; }
.notif-item:last-child { border-bottom:none; }
.notif-icon { flex-shrink:0;width:1rem;text-align:center;font-size:0.8rem; }
.notif-msg { flex:1;word-break:break-word; }
.notif-time { flex-shrink:0;font-size:0.65rem;opacity:0.5;white-space:nowrap;margin-top:1px; }
.notif-success .notif-icon { color:var(--colorSuccess); }
.notif-error .notif-icon { color:var(--colorError); }
.notif-info .notif-icon { color:var(--colorPrimary); }
.notif-warning .notif-icon { color:#f39c12; }

/* Leech badge */
.leech-badge {
  font-size: 0.7rem;
  cursor: help;
}

/* Leech card in heat grid */
.card-heat-leech {
  outline: 2px solid var(--colorError);
  outline-offset: -1px;
  animation: leechPulse 1.5s ease-in-out infinite;
}
@keyframes leechPulse {
  0%, 100% { outline-color: var(--colorError); }
  50% { outline-color: transparent; }
}

/* Inactive deck styling */
.deck-inactive { opacity: 0.6; }
.deck-inactive:hover { opacity: 0.8; }

/* Test mode badge */
.deck-status-test {
  background: #9C27B0;
  color: #fff;
  border: 1px dashed #CE93D8;
}

/* Status buttons in deck settings */
.status-btn {
  flex: 1;
  padding: 0.4rem 0.3rem;
  border: 1px solid var(--colorSecondary);
  border-radius: 4px;
  background: none;
  color: var(--textPrimary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.status-btn:hover { background: var(--colorSecondary); color: #fff; }
.status-btn.active { background: var(--colorPrimary); color: #fff; border-color: var(--colorPrimary); }

.deck-status-active { background: var(--colorSuccess); color: #fff; opacity: 0.7; }

/* Layout copy bar */
.layout-copy-bar {
  margin-bottom: 0.5rem;
}
.layout-copy-bar select {
  width: 100%;
  font-size: 0.8rem;
}

/* Prevent media clicks from triggering card flip (visible face only) */
.flashcard-front .slot-media-video,
.flashcard-front .slot-audio-player,
.flashcard-front .slot-media-img {
  pointer-events: auto;
}
.flashcard.flipped .flashcard-front .slot-media-video,
.flashcard.flipped .flashcard-front .slot-audio-player,
.flashcard.flipped .flashcard-front .slot-media-img {
  pointer-events: none;
}
.flashcard.flipped .flashcard-back .slot-media-video,
.flashcard.flipped .flashcard-back .slot-audio-player,
.flashcard.flipped .flashcard-back .slot-media-img {
  pointer-events: auto;
}
.flashcard .slot-audio-btn,
.flashcard video {
  position: relative;
  z-index: 10;
}

/* Subdeck import dialog */
.subdeck-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--cardBorder);
  border-radius: 6px;
  padding: 0.4rem;
  margin: 0.5rem 0;
}
.subdeck-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.3rem;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 4px;
}
.subdeck-item:hover { background: var(--bgSecondary); }
.subdeck-item input { width: auto; margin: 0; }

/* Deck tags */
.deck-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 0.3rem;
}

/* ===== Help Page ===== */
#help-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

/* TOC */
.help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  padding: 0.8rem;
  background: var(--bgSecondary);
  border-radius: 10px;
}
.help-toc-btn {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--cardBorder);
  border-radius: 6px;
  background: var(--cardBg);
  color: var(--textPrimary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.help-toc-btn:hover {
  background: var(--colorPrimary);
  color: #fff;
  border-color: var(--colorPrimary);
}

/* Section card */
.help-section {
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.help-section:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Section header (accordion toggle) */
.help-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  user-select: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--textPrimary);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}
.help-section-header:hover {
  background: var(--bgSecondary);
}
.help-section-header .help-chevron {
  margin-left: auto;
  font-size: 0.75rem;
  transition: transform 0.2s;
  opacity: 0.5;
}
.help-section.open .help-chevron {
  transform: rotate(180deg);
}

/* Section body */
.help-section-body {
  display: none;
  padding: 0 1rem 1rem;
  line-height: 1.75;
  color: var(--textPrimary);
  font-size: 0.9rem;
}
.help-section.open .help-section-body {
  display: block;
}

/* Sub-section */
.help-section-body h4 {
  margin: 1.2rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--colorPrimary);
  font-weight: 600;
}
.help-section-body h4:first-child {
  margin-top: 0.3rem;
}

/* Lists */
.help-section-body ul,
.help-section-body ol {
  padding-left: 1.3rem;
  margin: 0.4rem 0;
}
.help-section-body li {
  margin-bottom: 0.3rem;
}
.help-section-body li strong {
  color: var(--colorPrimary);
}

/* Paragraphs */
.help-section-body p {
  margin: 0.5rem 0;
}

/* Tables */
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 0.6rem 0;
}
.help-table th {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 2px solid var(--cardBorder);
  font-weight: 600;
  color: var(--colorPrimary);
  font-size: 0.82rem;
}
.help-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--bgSecondary);
  vertical-align: top;
}
.help-table tr:last-child td {
  border-bottom: none;
}
.help-table tr:hover td {
  background: var(--bgSecondary);
}

/* Keyboard shortcut badge */
.help-kbd {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  background: var(--bgSecondary);
  border: 1px solid var(--cardBorder);
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.82rem;
  line-height: 1.4;
  white-space: nowrap;
}

/* Feedback section */
.help-feedback-section {
  margin-top: 2rem; padding: 1.2rem;
  background: var(--cardBg); border: 1px solid var(--cardBorder);
  border-radius: 12px;
}
.feedback-cat-btn {
  padding: 0.3rem 0.6rem; border: 1px solid var(--colorSecondary);
  border-radius: 4px; background: none; color: var(--textPrimary);
  font-size: 0.75rem; cursor: pointer; transition: background 0.15s;
}
.feedback-cat-btn:hover { background: var(--colorSecondary); color: #fff; }
.feedback-cat-btn.active { background: var(--colorPrimary); color: #fff; border-color: var(--colorPrimary); }
.feedback-filter-btn {
  padding: 0.2rem 0.5rem; border: 1px solid var(--colorSecondary);
  border-radius: 4px; background: none; color: var(--textPrimary);
  font-size: 0.7rem; cursor: pointer; transition: background 0.15s;
}
.feedback-filter-btn:hover { background: var(--colorSecondary); color: #fff; }
.feedback-filter-btn.active { background: var(--colorPrimary); color: #fff; border-color: var(--colorPrimary); }
.feedback-item {
  padding: 0.5rem 0.6rem; margin-bottom: 0.5rem;
  background: var(--bgSecondary); border-radius: 8px;
}
.feedback-header { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; margin-bottom: 0.3rem; }
.feedback-msg { font-size: 0.85rem; line-height: 1.4; margin: 0; white-space: pre-wrap; }
.feedback-votes { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; }
.fb-vote-btn { background: none; border: 1px solid var(--cardBorder); border-radius: 4px; padding: 0.1rem 0.4rem; font-size: 0.7rem; cursor: pointer; color: var(--textPrimary); opacity: 0.5; transition: opacity 0.15s, background 0.15s; }
.fb-vote-btn:hover { opacity: 1; background: var(--bgSecondary); }
.fb-vote-btn.fb-vote-active { opacity: 1; border-color: var(--colorPrimary); }
.fb-vote-btn.fb-upvote.fb-vote-active { color: var(--colorSuccess); border-color: var(--colorSuccess); }
.fb-vote-btn.fb-downvote.fb-vote-active { color: var(--colorError); border-color: var(--colorError); }
.fb-vote-score { font-size: 0.75rem; font-weight: 600; min-width: 1.5rem; text-align: center; }

/* Intro highlight */
.help-intro {
  padding: 1rem;
  background: var(--bgSecondary);
  border-radius: 10px;
  margin-bottom: 1.5rem;
  line-height: 1.75;
  font-size: 0.9rem;
}
.help-intro p {
  margin: 0.4rem 0;
}
.help-intro ul {
  padding-left: 1.3rem;
  margin: 0.5rem 0 0;
}
.help-intro li {
  margin-bottom: 0.25rem;
}

/* ===== Deck Structure Diagram ===== */
.structure-diagram {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 1rem; margin: 0.5rem 0;
  background: var(--bgSecondary); border-radius: 10px;
}
.struct-row { display: flex; justify-content: center; width: 100%; }
.struct-node {
  padding: 0.5rem 0.8rem; border-radius: 8px; border: 2px solid;
  text-align: center; min-width: 180px; max-width: 300px;
}
.struct-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.15rem; }
.struct-desc { font-size: 0.72rem; opacity: 0.7; line-height: 1.3; }
.struct-deck { background: #e3f2fd; border-color: #1976d2; color: #1565c0; }
.struct-template { background: #f3e5f5; border-color: #7b1fa2; color: #6a1b9a;
  box-shadow: 4px 4px 0 -1px #f3e5f5, 4px 4px 0 0 #7b1fa2, 8px 8px 0 -1px #f3e5f5, 8px 8px 0 0 #7b1fa2;
}
.struct-slot-def { background: #fff3e0; border-color: #ef6c00; color: #e65100; }
.struct-card { background: #e8f5e9; border-color: #388e3c; color: #2e7d32;
  box-shadow: 4px 4px 0 -1px #e8f5e9, 4px 4px 0 0 #388e3c, 8px 8px 0 -1px #e8f5e9, 8px 8px 0 0 #388e3c;
}
.struct-slot-val { background: #fce4ec; border-color: #c62828; color: #b71c1c; }
[data-theme="dark"] .struct-deck { background: #1a2a3a; border-color: #42a5f5; color: #64b5f6; }
[data-theme="dark"] .struct-template { background: #2a1a2e; border-color: #ab47bc; color: #ce93d8;
  box-shadow: 4px 4px 0 -1px #2a1a2e, 4px 4px 0 0 #ab47bc, 8px 8px 0 -1px #2a1a2e, 8px 8px 0 0 #ab47bc;
}
[data-theme="dark"] .struct-slot-def { background: #2e1a0a; border-color: #ef6c00; color: #ffb74d; }
[data-theme="dark"] .struct-card { background: #1a2e1a; border-color: #66bb6a; color: #81c784;
  box-shadow: 4px 4px 0 -1px #1a2e1a, 4px 4px 0 0 #66bb6a, 8px 8px 0 -1px #1a2e1a, 8px 8px 0 0 #66bb6a;
}
[data-theme="dark"] .struct-slot-val { background: #2e1a1a; border-color: #ef5350; color: #ef9a9a; }
.struct-arrow { font-size: 0.8rem; opacity: 0.5; padding: 0.2rem 0; text-align: center; }
.struct-arrow-split { display: flex; justify-content: center; gap: 1.5rem; width: 100%; }
.struct-arrow-branch { display: flex; flex-direction: column; align-items: center; flex: 1; }

/* ===== FSRS State Transition Diagram V2 ===== */
.fsrs-diagram-v2 {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 1.5rem 1rem; margin: 0.8rem 0;
  background: var(--bgSecondary); border-radius: 12px;
}
.fsrs-row { display: flex; justify-content: center; width: 100%; }
.fsrs-node-v2 {
  padding: 0.8rem 1.2rem; border-radius: 12px; border: 2px solid;
  text-align: center; min-width: 220px; max-width: 320px;
}
.fsrs-node-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.2rem; }
.fsrs-node-state { font-size: 0.75rem; opacity: 0.6; margin-bottom: 0.3rem; }
.fsrs-node-desc { font-size: 0.78rem; opacity: 0.8; line-height: 1.4; }
.fsrs-self-v2 {
  margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px dashed;
  border-color: inherit; font-size: 0.72rem; opacity: 0.7; line-height: 1.4;
}
.fsrs-new-v2 { background: #fff8e1; border-color: #f9a825; color: #e65100; }
.fsrs-learning-v2 { background: #fff3e0; border-color: #ef6c00; color: #bf360c; }
.fsrs-review-v2 { background: #e8f5e9; border-color: #388e3c; color: #1b5e20; }
.fsrs-relearn-v2 { background: #ffebee; border-color: #c62828; color: #b71c1c; }
[data-theme="dark"] .fsrs-new-v2 { background: #2e2a1a; border-color: #f9a825; color: #ffd54f; }
[data-theme="dark"] .fsrs-learning-v2 { background: #2e1a0a; border-color: #ef6c00; color: #ffb74d; }
[data-theme="dark"] .fsrs-review-v2 { background: #1a2e1a; border-color: #66bb6a; color: #81c784; }
[data-theme="dark"] .fsrs-relearn-v2 { background: #2e1a1a; border-color: #ef5350; color: #ef9a9a; }

.fsrs-edge-v2 {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.5rem 0; position: relative;
}
.fsrs-edge-line { font-size: 1rem; opacity: 0.4; color: var(--textPrimary); }
.fsrs-edge-label { font-size: 0.75rem; opacity: 0.7; text-align: center; line-height: 1.4; margin: 0.2rem 0; }
.fsrs-edge-branch { font-size: 0.72rem; opacity: 0.6; text-align: center; }
.fsrs-edge-split { flex-direction: row; justify-content: center; gap: 2rem; padding: 0.6rem 0; }
.fsrs-edge-down, .fsrs-edge-up { display: flex; flex-direction: column; align-items: center; }
.rating-again { color: #e74c3c; font-weight: 600; }
.rating-hard { color: #e67e22; font-weight: 600; }
.rating-good { color: #3498db; font-weight: 600; }
.rating-easy { color: #27ae60; font-weight: 600; }

/* ===== Jog Shuttle ===== */
.jog-shuttle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-left: 0.4rem;
}
.jog-mid {
  display: flex;
  align-items: center;
  gap: 1px;
}
.jog-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--cardBorder);
  border-radius: 4px;
  background: var(--cardBg);
  color: var(--textPrimary);
  font-size: 0.55rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.1s;
}
.jog-btn:hover {
  background: var(--colorPrimary);
  color: #fff;
  border-color: var(--colorPrimary);
}
.jog-btn:active {
  transform: scale(0.9);
}
.jog-pos {
  font-size: 0.6rem;
  opacity: 0.5;
  min-width: 30px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ===== Layout Preview Grid ===== */
.preview-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* 10% solid grid */
.preview-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(128,128,128,0.2) 0, rgba(128,128,128,0.2) 1px, transparent 1px, transparent 10%),
    repeating-linear-gradient(to bottom, rgba(128,128,128,0.2) 0, rgba(128,128,128,0.2) 1px, transparent 1px, transparent 10%);
}
/* 50% center cross */
.preview-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, transparent 49.9%, rgba(128,128,128,0.3) 50%, rgba(128,128,128,0.3) 50.1%, transparent 50.2%),
    linear-gradient(to bottom, transparent 49.9%, rgba(128,128,128,0.3) 50%, rgba(128,128,128,0.3) 50.1%, transparent 50.2%);
}
/* Scale labels on edges */
.preview-grid-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.preview-grid-label {
  position: absolute;
  font-size: 0.45rem;
  color: rgba(128,128,128,0.5);
  pointer-events: none;
  line-height: 1;
}
/* Top edge labels */
.preview-grid-label.top { top: 1px; transform: translateX(-50%); }
/* Left edge labels */
.preview-grid-label.left { left: 1px; transform: translateY(-50%); }

/* Detailed grid for expanded preview: 1% dotted + 5% dashed + 10% solid */
.preview-grid-detailed::before {
  background-image:
    repeating-linear-gradient(to right, rgba(128,128,128,0.06) 0, rgba(128,128,128,0.06) 1px, transparent 1px, transparent 1%),
    repeating-linear-gradient(to bottom, rgba(128,128,128,0.06) 0, rgba(128,128,128,0.06) 1px, transparent 1px, transparent 1%);
}
.preview-grid-detailed::after {
  background-image:
    repeating-linear-gradient(to right, rgba(128,128,128,0.25) 0, rgba(128,128,128,0.25) 1px, transparent 1px, transparent 10%),
    repeating-linear-gradient(to bottom, rgba(128,128,128,0.25) 0, rgba(128,128,128,0.25) 1px, transparent 1px, transparent 10%);
}
.preview-grid-5pct {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.preview-grid-5pct-line-v, .preview-grid-5pct-line-h {
  position: absolute;
  background: repeating-linear-gradient(to bottom, rgba(128,128,128,0.2) 0, rgba(128,128,128,0.2) 3px, transparent 3px, transparent 7px);
}
.preview-grid-5pct-line-v { width: 1px; top: 0; bottom: 0; }
.preview-grid-5pct-line-h {
  height: 1px; left: 0; right: 0;
  background: repeating-linear-gradient(to right, rgba(128,128,128,0.2) 0, rgba(128,128,128,0.2) 3px, transparent 3px, transparent 7px);
}

/* ===== Chart Line Overlay ===== */
.chart14-line-wrap {
  position: relative;
}
.line14-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.8;
}
.legend-line {
  width: 16px;
  height: 2px;
  border-radius: 1px;
  vertical-align: middle;
}

/* ===== Quiz System ===== */
.quiz-mode-select {
  text-align: center;
}
.quiz-mode-title {
  color: var(--colorPrimary);
  margin-bottom: 1.5rem;
}
.quiz-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.quiz-mode-card {
  background: var(--cardBg);
  border: 2px solid var(--cardBorder);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  text-align: center;
}
.quiz-mode-card:hover {
  border-color: var(--colorAccent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.quiz-mode-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.quiz-mode-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.quiz-mode-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--colorPrimary);
  margin-bottom: 0.3rem;
}
.quiz-mode-desc {
  font-size: 0.8rem;
  color: var(--textPrimary);
  opacity: 0.6;
}

/* Quiz action bar — 하단 액션 영역 통일 */
.quiz-action-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--textPrimary);
  flex-wrap: wrap;
}
.quiz-action-bar select {
  margin-left: 0.3rem;
}
.quiz-action-item {
  font-size: 0.82rem;
  white-space: nowrap;
}
.quiz-action-btn {
  white-space: nowrap;
}

/* 퀴즈 액션 바 select 모바일 최적화 */
.quiz-action-bar select {
  font-size: 0.9rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--colorSecondary);
  background: var(--bgPrimary);
  color: var(--textPrimary);
}

/* Legacy — keep for backward compat */
.quiz-card-count {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--textPrimary);
}

/* 커스텀 피커 (모바일 select 대체) */
.quiz-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.quiz-picker-panel {
  background: var(--bgPrimary);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 400px;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.quiz-picker-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--colorPrimary);
  text-align: center;
  margin-bottom: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--cardBorder);
}
.quiz-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 50vh;
  overflow-y: auto;
}
.quiz-picker-item {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1.1rem;
  text-align: left;
  border: none;
  border-radius: 8px;
  background: var(--bgSecondary);
  color: var(--textPrimary);
  cursor: pointer;
  font-family: var(--fontFamily);
}
.quiz-picker-item-active {
  background: var(--colorPrimary);
  color: #fff;
  font-weight: 700;
}
.quiz-picker-cancel {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.7rem;
  font-size: 1rem;
  text-align: center;
  border: none;
  border-radius: 8px;
  background: var(--bgSecondary);
  color: var(--textPrimary);
  cursor: pointer;
  font-family: var(--fontFamily);
  opacity: 0.7;
}
.quiz-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--colorSecondary);
  border-radius: 20px;
  background: var(--bgSecondary);
  color: var(--textPrimary);
  font-size: 0.85rem;
  font-family: var(--fontFamily);
  cursor: pointer;
  transition: border-color 0.2s;
}
.quiz-picker-btn:active {
  border-color: var(--colorPrimary);
}
.quiz-picker-label {
  font-size: 0.7rem;
  opacity: 0.6;
  font-weight: 500;
}
.quiz-picker-value {
  font-weight: 700;
  color: var(--colorPrimary);
}
.quiz-picker-arrow {
  font-size: 0.7rem;
  opacity: 0.5;
}
.quiz-card-count select {
  margin-left: 0.5rem;
}

/* Quiz question */
.quiz-question {
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--cardFont);
}
.quiz-question-text {
  background: var(--cardBg);
  border: 2px solid var(--cardBorder);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  text-align: center;
  color: var(--cardWordColor);
  word-break: break-word;
}

/* Multiple choice */
.quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.quiz-choice-btn {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--cardBorder);
  border-radius: 8px;
  background: var(--cardBg);
  color: var(--textPrimary);
  font-size: 0.95rem;
  font-family: var(--fontFamily);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
  word-break: break-word;
}
.quiz-choice-btn:hover:not(:disabled) {
  border-color: var(--colorPrimary);
  background: var(--bgSecondary);
}
/* 터치 디바이스: sticky hover 방지 */
@media (hover: none) {
  .quiz-choice-btn:hover:not(:disabled) {
    border-color: var(--cardBorder);
    background: var(--cardBg);
  }
  .quiz-choice-btn:active:not(:disabled) {
    border-color: var(--colorPrimary);
    background: var(--bgSecondary);
  }
}
.quiz-choice-btn:disabled {
  cursor: default;
}
.quiz-choice-btn.correct {
  border-color: var(--colorSuccess);
  background: rgba(46, 125, 50, 0.12);
  color: var(--colorSuccess);
  font-weight: 600;
}
.quiz-choice-btn.wrong {
  border-color: var(--colorError);
  background: rgba(198, 40, 40, 0.12);
  color: var(--colorError);
}

/* Typing quiz */
.quiz-typing-area {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.quiz-typing-input {
  flex: 1;
  margin-bottom: 0;
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
}
.quiz-typing-input.correct {
  border-color: var(--colorSuccess);
}
.quiz-typing-input.wrong {
  border-color: var(--colorError);
}
.quiz-typing-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.quiz-typing-feedback {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  min-height: 1.5em;
}
.quiz-feedback-correct {
  color: var(--colorSuccess);
  font-weight: 600;
}
.quiz-feedback-wrong {
  color: var(--colorError);
  font-weight: 600;
}

/* Matching quiz */
.quiz-matching {
  display: flex;
  gap: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
  max-height: calc(100dvh - 12rem);
}
.quiz-matching-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  min-height: 0;
  padding-right: 0.2rem;
}
.quiz-match-item {
  padding: 0.7rem 0.8rem;
  border: 2px solid var(--cardBorder);
  border-radius: 8px;
  background: var(--cardBg);
  color: var(--textPrimary);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, opacity 0.2s;
  word-break: break-word;
  text-align: center;
}
.quiz-match-item:hover:not(.matched) {
  border-color: var(--colorPrimary);
}
.quiz-match-item.selected {
  border-color: var(--colorPrimary);
  background: rgba(27, 79, 114, 0.15);
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(27, 79, 114, 0.3);
  transform: scale(1.02);
}
.quiz-match-item.matched {
  border-color: var(--colorSuccess);
  background: rgba(46, 125, 50, 0.1);
  opacity: 0.6;
  cursor: default;
}
.quiz-match-item.wrong {
  border-color: var(--colorError);
  background: rgba(198, 40, 40, 0.1);
}

/* Progress bar */
.quiz-progress-bar {
  display: inline-block;
  width: 120px;
  height: 6px;
  background: var(--bgSecondary);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.quiz-progress-fill {
  height: 100%;
  background: var(--colorPrimary);
  border-radius: 3px;
  transition: width 0.3s;
}

/* Result screen */
.quiz-result {
  max-width: 480px;
  margin: 2rem auto;
  text-align: center;
}
.quiz-result-title {
  font-size: 1.5rem;
  color: var(--colorPrimary);
  margin-bottom: 1.5rem;
}
.quiz-result-stats {
  background: var(--cardBg);
  border: 2px solid var(--cardBorder);
  border-radius: 12px;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
}
.quiz-result-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(128,128,128,0.15);
  border-radius: 6px;
  background: rgba(128,128,128,0.04);
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.quiz-result-row:last-child {
  margin-bottom: 0;
}
.quiz-result-accuracy {
  font-weight: 700;
  color: var(--colorPrimary);
  font-size: 1.1rem;
}
.quiz-result-correct {
  color: var(--colorSuccess);
  font-weight: 600;
}
.quiz-result-wrong {
  color: var(--colorError);
  font-weight: 600;
}
.quiz-result-actions {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}

/* Quiz Rule 선택 화면 */
.quiz-rule-select { text-align: center; }
.quiz-rule-modes { font-size: 1.1rem; margin-top: 0.3rem; }
.quiz-rule-check-card { position: relative; cursor: pointer; }
.quiz-rule-check-card input[type="checkbox"]:checked ~ .quiz-mode-name { color: var(--colorPrimary); }
.quiz-rule-next-btn { min-width: 120px; }
.quiz-btn-mode { background: var(--bgSecondary); color: var(--textPrimary); border: 1px solid var(--colorPrimary); }

/* Quiz Rule Editor (덱 설정 모달) */
.quiz-rule-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem;
  margin-bottom: 0.4rem;
  background: var(--bgSecondary);
  border-radius: 6px;
  font-size: 0.8rem;
}
.quiz-rule-row input.qr-name {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--borderColor, #ccc);
  border-radius: 4px;
  font-size: 0.8rem;
  background: var(--bgPrimary);
  color: var(--textPrimary);
}
.quiz-rule-row label {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  white-space: nowrap;
}
.quiz-rule-row select {
  padding: 0.2rem;
  font-size: 0.75rem;
  border-radius: 4px;
  border: 1px solid var(--borderColor, #ccc);
  background: var(--bgPrimary);
  color: var(--textPrimary);
}
.qr-modes {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.qr-modes label {
  font-size: 0.75rem;
  cursor: pointer;
}
.qr-remove {
  margin-left: auto;
  color: #e74c3c;
  border-color: #e74c3c;
}

/* 퀴즈 오디오 플레이어 */
.quiz-audio-player { margin: 0.5rem 0; }
.quiz-audio-btn {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--colorPrimary);
  border-radius: 6px;
  background: var(--bgSecondary);
  color: var(--textPrimary);
  cursor: pointer;
  font-size: 0.9rem;
}
.quiz-audio-btn:hover { background: var(--colorPrimary); color: #fff; }

/* 퀴즈 문제 이미지 */
.quiz-question-img {
  display: block;
  margin: 0.5rem auto;
  border-radius: 8px;
}

/* 퀴즈 빈 상태 */
.quiz-empty {
  text-align: center;
  padding: 2rem;
  opacity: 0.7;
}

/* 철자 배열 퀴즈 */
.quiz-scramble-answer {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin: 1rem 0 0.8rem;
  min-height: 2.5rem;
}
.scramble-slot {
  width: 2rem;
  height: 2.2rem;
  border: 2px dashed var(--colorSecondary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--textPrimary);
  transition: border-color 0.2s, background 0.2s;
}
.scramble-slot.filled {
  border-style: solid;
  border-color: var(--colorPrimary);
  background: var(--bgSecondary);
}
.scramble-slot.correct { border-color: var(--colorSuccess); background: rgba(46,125,50,0.15); }
.scramble-slot.wrong { border-color: var(--colorError); background: rgba(198,40,40,0.15); }

.quiz-scramble-chars {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}
.scramble-char-btn {
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid var(--colorPrimary);
  border-radius: 8px;
  background: var(--cardBg);
  color: var(--textPrimary);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.scramble-char-btn:hover:not(:disabled) { background: var(--colorPrimary); color: #fff; transform: scale(1.05); }
.scramble-char-btn.used { opacity: 0.3; cursor: default; }

/* 퀴즈 규칙 라벨 — 사용하지 않음 (placeholder만 유지) */

/* 퀴즈 힌트 */
.quiz-hint-icon-corner {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 1;
  transition: opacity 0.2s;
  z-index: 1;
}
.quiz-hint-icon-corner:hover { opacity: 0.7; }
.quiz-hint-page { font-size: 0.65rem; opacity: 0.4; margin-left: 0.3rem; }

/* 매칭 힌트 아이콘 */
.quiz-match-hint-icon {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0.8;
  z-index: 1;
}
.quiz-match-item { position: relative; }
.quiz-hint-popover {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0.3rem;
  z-index: 10;
  background: var(--cardBg);
  border: 1px solid var(--colorAccent);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 0.85rem;
  color: var(--textPrimary);
  max-width: 250px;
  animation: hintFadeIn 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
@keyframes hintFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.quiz-hint-popover-content {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* 매칭 힌트 팝오버 */
.quiz-match-hint-popover {
  display: none;
  background: var(--cardBg);
  border: 1px solid var(--colorAccent);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-top: 0.4rem;
  animation: hintFadeIn 0.15s ease;
}

.quiz-hint-label {
  font-weight: 600;
  opacity: 0.6;
  font-size: 0.75rem;
}

/* === Quiz Pass Button === */
.quiz-pass-btn { opacity: 0.7; font-size: 0.8rem; }
.quiz-pass-btn:hover:not(:disabled) { opacity: 1; }
.quiz-pass-btn:disabled { opacity: 0.4; cursor: default; }
.quiz-pass-area { text-align: center; margin-top: 0.5rem; }
.quiz-match-item.passed { opacity: 0.6; border-style: dashed; }

/* Quiz Wrong Answers List — 접기/펼치기 */
.quiz-wrong-list { margin-top: 1rem; padding: 0; border-radius: 8px; background: var(--card-bg, #f8f8f8); }
.quiz-wrong-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: none;
  border-radius: 8px;
  background: var(--bgSecondary);
  color: var(--textPrimary);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--fontFamily);
  cursor: pointer;
  text-align: left;
}
.quiz-wrong-count {
  color: var(--colorError, #e74c3c);
  font-weight: 700;
}
.quiz-wrong-chevron {
  margin-left: auto;
  font-size: 0.7rem;
  opacity: 0.5;
  transition: transform 0.2s;
}
.quiz-wrong-list.open .quiz-wrong-chevron {
  transform: rotate(90deg);
}
.quiz-wrong-items {
  display: none;
  padding: 0.5rem 0.8rem 0.8rem;
}
.quiz-wrong-list.open .quiz-wrong-items {
  display: block;
}
.quiz-wrong-item { padding: 0.4rem 0; border-bottom: 1px solid rgba(128,128,128,0.15); }
.quiz-wrong-item:last-child { border-bottom: none; }
.quiz-wrong-q { font-size: 0.85rem; opacity: 0.8; }
.quiz-wrong-a { font-size: 0.85rem; color: var(--accent, #e74c3c); margin-top: 0.15rem; }

/* 결과 액션 버튼과 오답 목록 사이 간격 */
.quiz-result-actions {
  margin-top: 1.5rem;
}

/* ===== Offline Stats Badge ===== */
.offline-stats-badge {
  background: var(--bgSecondary);
  color: var(--colorAccent, #e74c3c);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.8rem;
  margin-bottom: 0.8rem;
  text-align: center;
}

/* === Gesture Settings === */
.gesture-settings {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.gesture-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.gesture-name {
  font-size: 0.85rem;
  white-space: nowrap;
}
.gesture-action-select {
  font-size: 0.8rem;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--colorBorder, #ccc);
  background: var(--colorBg, #fff);
  color: var(--colorText, #333);
  min-width: 100px;
}

/* Platform-specific help content — desktop default */
.help-desktop-only { display: list-item; }
.help-mobile-only { display: none; }


/* === Fullscreen Exit Button (집중모드 나가기와 동일 스타일) === */
.fullscreen-exit-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.fullscreen-exit-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.55);
}
.fullscreen-mode {
  position: relative;
}

/* === Timezone Settings === */
.tz-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.tz-current {
  font-size: 0.78rem;
  color: var(--textPrimary);
  opacity: 0.8;
  word-break: break-all;
}
.tz-selectors {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.tz-select-label {
  font-size: 0.75rem;
  color: var(--textPrimary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.tz-select {
  flex: 1;
  font-size: 0.78rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--colorSecondary);
  border-radius: 4px;
  background: var(--cardBg);
  color: var(--textPrimary);
  min-width: 0;
}
.tz-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.15rem;
}
.tz-actions .btn-sm {
  font-size: 0.72rem;
  padding: 0.25rem 0.5rem;
}

/* Import spinner */
.import-spinner {
  width: 36px; height: 36px; margin: 0 auto;
  border: 3px solid var(--colorSecondary);
  border-top-color: var(--colorPrimary);
  border-radius: 50%;
  animation: importSpin 0.8s linear infinite;
}
@keyframes importSpin { to { transform: rotate(360deg); } }

/* ── 충돌 해결 UI ── */
.conflict-compare { max-height: 60vh; overflow-y: auto; }
.conflict-batch { max-height: 60vh; overflow-y: auto; }
.conflict-batch-actions { display: flex; gap: 6px; }
.conflict-item { transition: background 0.15s; }
.conflict-item:hover { background: var(--bgHover, rgba(0,0,0,0.03)); }
.conflict-choice { background: var(--bgPrimary, #fff); color: var(--textPrimary, #333); }