.language-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.language-modal {
  background: var(--card-bg, #fff);
  color: var(--text-color, #333);
  border-radius: 16px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.language-modal-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.language-modal-header h2 {
  font-size: var(--font-size-15);
  margin: 0 0 0.5rem 0;
  color: var(--text-color, #333);
  font-weight: 600;
}

.language-modal-subtitle {
  color: var(--text-color, #666);
  margin: 0;
  font-size: var(--font-size-1);
  opacity: 0.8;
  font-weight: 400;
}

.language-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.language-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem;
  border: 2px solid var(--card-border, #e0e0e0);
  border-radius: 12px;
  background: var(--card-bg, #fff);
  color: var(--text-color, #333);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 60px;
}

.language-option:hover {
  border-color: var(--link-color, #4a90d9);
  background: var(--hover-bg, #f5f5f5);
  color: var(--text-color, #333);
}

.language-option.selected {
  border-color: var(--link-color, #4a90d9);
  background: var(--link-color, #4a90d9);
  color: white;
}

.language-native {
  font-size: var(--font-size-11);
  font-weight: 600;
  color: inherit;
}

.language-confirm-btn {
  width: 100%;
  padding: 1rem;
  font-size: var(--font-size-11);
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #4a90d9, #357abd);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.language-confirm-btn:hover {
  background: linear-gradient(135deg, #357abd, #2a6298);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 144, 217, 0.4);
}

.language-confirm-btn:active {
  transform: translateY(0);
}

/**
 * 自製滑桿樣式
 * Track: pointer-events: none（軌道不響應拖拽）
 * Thumb: pointer-events: auto（只有圓點可以拖拽）
 */

.custom-slider-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--card-border, #e0e0e0);
  cursor: pointer;
  transition: background 0.2s;
  /* 軌道本身不響應 pointer events，但需要響應點擊 */
  /* 我們通過 JavaScript 處理點擊，所以這裡保持 pointer-events: auto */
}

.custom-slider-track:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.1));
}

.custom-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--link-color, #64b5f6);
  border-radius: 3px;
  pointer-events: none;
  transition: width 0.1s ease;
}

.custom-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--link-color, #64b5f6);
  cursor: grab;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  /* 確保 thumb 可以接收所有 pointer events */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.custom-slider-thumb:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.custom-slider-thumb:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* 拖拽時的樣式 */
.custom-slider-track:active .custom-slider-thumb {
  cursor: grabbing;
}

/**
 * Select Bottom Sheet 樣式
 */

/* 遮罩層 */
.select-bottom-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Bottom Sheet 本體 */
.select-bottom-sheet {
  background: var(--card-bg, white);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  animation: slideUpFromBottom 0.3s ease;
}

@keyframes slideUpFromBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 標題列 */
.select-bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
  flex-shrink: 0;
}

.select-bottom-sheet-title {
  font-size: var(--font-size-125);
  font-weight: 600;
  color: var(--text-color, #333);
  margin: 0;
}

.select-bottom-sheet-close {
  background: none;
  border: none;
  font-size: var(--font-size-125);
  color: var(--text-secondary, #666);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.select-bottom-sheet-close:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
  color: var(--text-color, #333);
}

/* 可卷動的選項列表 */
.select-bottom-sheet-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
  padding: 0.5rem 0;
}

.select-bottom-sheet-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
  font-size: var(--font-size-095);
  color: var(--text-color, #333);
}

.select-bottom-sheet-option:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.03));
}

.select-bottom-sheet-option.selected {
  background: rgba(100, 181, 246, 0.1);
  color: var(--link-color, #64b5f6);
  font-weight: 500;
}

.select-bottom-sheet-option-label {
  flex: 1;
}

.select-bottom-sheet-option-check {
  color: var(--link-color, #64b5f6);
  font-weight: 600;
  margin-left: 0.75rem;
}

/* 固定底部的確定鈕 */
.select-bottom-sheet-footer {
  position: sticky;
  bottom: 0;
  padding: 1rem 1.5rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  background: var(--card-bg, white);
  border-top: 1px solid var(--card-border, #e0e0e0);
  flex-shrink: 0;
}

.select-bottom-sheet-confirm {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--link-color, #64b5f6);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-095);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.select-bottom-sheet-confirm:hover {
  background: var(--link-color-hover, #42a5f5);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(100, 181, 246, 0.3);
}

.select-bottom-sheet-confirm:active {
  transform: translateY(0);
}

/* 桌面版樣式調整 */
@media (min-width: 769px) {
  .select-bottom-sheet-overlay {
    align-items: center;
    padding: 1rem;
  }

  .select-bottom-sheet {
    border-radius: 12px;
    max-width: 400px;
    max-height: 70vh;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.2s ease;
  }

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

/**
 * 設定彈出視窗樣式
 */

/* 遮罩層 */
.settings-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal 本體 */
.settings-modal {
  background: var(--card-bg, white);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.2s ease;
}

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

/* 標題列 */
.settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
  flex-shrink: 0;
}

.settings-modal-title {
  font-size: var(--font-size-125);
  font-weight: 600;
  color: var(--text-color, #333);
  margin: 0;
}

.settings-modal-close {
  background: none;
  border: none;
  font-size: var(--font-size-125);
  color: var(--text-secondary, #666);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.settings-modal-close:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
  color: var(--text-color, #333);
}

/* 內容區 */
.settings-modal-content {
  padding: 1.5rem;
  overflow-y: auto;
}

/* 設定區塊 */
.settings-section {
  margin-bottom: 1.5rem;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.settings-section-title {
  font-size: var(--font-size-09);
  font-weight: 600;
  color: var(--text-secondary, #666);
  margin: 0 0 0.75rem 0;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.settings-section-title .settings-section-icon {
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

/* 語系區塊標題不套全大寫 */
.settings-section--language .settings-section-title {
  text-transform: none;
}

.settings-section-header .settings-section-title {
  margin-bottom: 0;
}

/* 全選/取消全選按鈕 */
.select-all-btn {
  background: none;
  border: 1px solid var(--card-border, #e0e0e0);
  color: var(--link-color, #64b5f6);
  font-size: var(--font-size-075);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.select-all-btn:hover {
  background: rgba(100, 181, 246, 0.1);
  border-color: var(--link-color, #64b5f6);
}

/* 主題選項 */
.theme-options {
  display: flex;
  gap: 0.75rem;
}

.theme-option {
  flex: 1;
  cursor: pointer;
}

.theme-option input[type="radio"] {
  display: none;
}

.theme-option-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border: 2px solid var(--card-border, #e0e0e0);
  border-radius: 8px;
  transition: all 0.2s ease;
  background: var(--card-bg, white);
}

.theme-option input[type="radio"]:checked + .theme-option-content {
  border-color: var(--link-color, #64b5f6);
  background: rgba(100, 181, 246, 0.1);
}

.theme-option:hover .theme-option-content {
  border-color: var(--link-color, #64b5f6);
}

.theme-icon {
  font-size: var(--font-size-125);
}

.theme-label {
  font-size: var(--font-size-095);
  font-weight: 500;
  color: var(--text-color, #333);
}

/* 落地頁選項 */
.settings-section-hint {
  font-size: var(--font-size-085);
  color: var(--text-muted, #888);
  margin-bottom: 0.75rem;
}

.landing-page-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.landing-page-option {
  cursor: pointer;
}

.landing-page-option input[type="radio"] {
  display: none;
}

.landing-page-option-content {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 2px solid var(--card-border, #e0e0e0);
  border-radius: 20px;
  font-size: var(--font-size-09);
  font-weight: 500;
  color: var(--text-color, #333);
  background: var(--card-bg, white);
  transition: all 0.2s ease;
}

.landing-page-option input[type="radio"]:checked + .landing-page-option-content {
  border-color: var(--link-color, #64b5f6);
  background: var(--link-color, #64b5f6);
  color: white;
}

.landing-page-option:hover .landing-page-option-content {
  border-color: var(--link-color, #64b5f6);
}

/* 落地頁下拉選單（手機版） */
.landing-page-dropdown {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid var(--card-border, #e0e0e0);
  border-radius: 8px;
  font-size: var(--font-size-095);
  font-weight: 500;
  color: var(--text-color, #333);
  background: var(--card-bg, white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.landing-page-dropdown:is(select) {
  appearance: none;
}

.landing-page-dropdown:hover {
  border-color: var(--link-color, #64b5f6);
}

.landing-page-dropdown:focus {
  outline: none;
  border-color: var(--link-color, #64b5f6);
  box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.1);
}

/* 語言選項網格 */
.language-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.language-option {
  cursor: pointer;
}

.language-option input[type="radio"] {
  display: none;
}

.language-option-content {
  display: block;
  padding: 0.625rem 0.5rem;
  border: 2px solid var(--card-border, #e0e0e0);
  border-radius: 6px;
  text-align: center;
  transition: all 0.2s ease;
  font-size: var(--font-size-085);
  font-weight: 500;
  color: var(--text-color, #333);
  background: var(--card-bg, white);
}

.language-option input[type="radio"]:checked + .language-option-content {
  border-color: var(--link-color, #64b5f6);
  background: rgba(100, 181, 246, 0.1);
  color: var(--link-color, #64b5f6);
}

.language-option:hover .language-option-content {
  border-color: var(--link-color, #64b5f6);
}

/* 語言下拉選單（手機版） */
.language-dropdown {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid var(--card-border, #e0e0e0);
  border-radius: 8px;
  font-size: var(--font-size-095);
  font-weight: 500;
  color: var(--text-color, #333);
  background: var(--card-bg, white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.language-dropdown:is(select) {
  appearance: none;
}

.language-dropdown:hover {
  border-color: var(--link-color, #64b5f6);
}

.language-dropdown:focus {
  outline: none;
  border-color: var(--link-color, #64b5f6);
  box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.1);
}

/* Checkbox 列表 */
.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Checkbox 網格（兩列布局） */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

/* 單字設定並排布局 */
.word-settings-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.word-settings-column {
  display: flex;
  flex-direction: column;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background 0.2s;
}

.checkbox-item:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.03));
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--link-color, #64b5f6);
  cursor: pointer;
}

.checkbox-label {
  font-size: var(--font-size-08);
  color: var(--text-color, #333);
  user-select: none;
}

/* 活用形網格 */
.conjugation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
}

.checkbox-item.compact {
  padding: 0.375rem 0.5rem;
}

.checkbox-item.compact .checkbox-label {
  font-size: var(--font-size-08);
}

.checkbox-item.compact input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* 手機版和桌機版顯示控制 */
.settings-mobile {
  display: block;
}

.settings-desktop {
  display: none;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .settings-mobile {
    display: block;
  }

  .settings-desktop {
    display: none;
  }

  .settings-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .settings-modal {
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
  }

  .settings-modal-header {
    padding: 1rem 1.25rem;
  }

  .settings-modal-content {
    padding: 1.25rem;
  }

  .language-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .conjugation-grid {
    grid-template-columns: 1fr;
  }

  /* 手機版：單字設定改為單列 */
  .word-settings-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (min-width: 769px) {
  .settings-mobile {
    display: none;
  }

  .settings-desktop {
    display: block;
  }
}

/* 語音設定 */
.speech-settings {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.speech-setting-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.speech-setting-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-09);
  font-weight: 500;
  color: var(--text-color, #333);
}

.speech-setting-value {
  font-size: var(--font-size-095);
  font-weight: 600;
  color: var(--link-color, #64b5f6);
  min-width: 2.5rem;
  text-align: right;
}

/* 原生 range input 樣式（保留以備用） */
.speech-setting-slider {
  /* CustomSlider 組件會使用這個類名，但樣式在 CustomSlider.css 中定義 */
  /* 這裡保留類名以確保兼容性 */
}

.speech-setting-range {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-075);
  color: var(--text-muted, #888);
  margin-top: 0.25rem;
}/* 與 LanguageSelectionModal 一致的外層與彈窗樣式 */
.level-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.level-modal {
  background: var(--card-bg, #fff);
  color: var(--text-color, #333);
  border-radius: 16px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: levelModalSlideIn 0.3s ease-out;
}

@keyframes levelModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.level-modal-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.level-modal-header h2 {
  font-size: var(--font-size-15);
  margin: 0 0 0.5rem 0;
  color: var(--text-color, #333);
  font-weight: 600;
}

.level-modal-subtitle {
  color: var(--text-color, #666);
  margin: 0;
  font-size: var(--font-size-1);
  opacity: 0.8;
  font-weight: 400;
}

/* 單欄直排 */
.level-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.level-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem;
  border: 2px solid var(--card-border, #e0e0e0);
  border-radius: 12px;
  background: var(--card-bg, #fff);
  color: var(--text-color, #333);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 60px;
}

.level-option:hover {
  border-color: var(--link-color, #4a90d9);
  background: var(--hover-bg, #f5f5f5);
  color: var(--text-color, #333);
}

.level-option.selected {
  border-color: var(--link-color, #4a90d9);
  background: var(--link-color, #4a90d9);
  color: white;
}

.level-label {
  font-size: var(--font-size-11);
  font-weight: 600;
  color: inherit;
}

/* 與語系彈窗相同的確認按鈕 */
.level-confirm-btn {
  width: 100%;
  padding: 1rem;
  font-size: var(--font-size-11);
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #4a90d9, #357abd);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.level-confirm-btn:hover {
  background: linear-gradient(135deg, #357abd, #2a6298);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 144, 217, 0.4);
}

.level-confirm-btn:active {
  transform: translateY(0);
}
/* App-specific styles (if any) */


/* 首頁頂部間距（與等級分類頁保持一致） */
/* 桌面端样式 */
.home {
  text-align: center;
  padding: 4rem 0;
  padding-top: 7rem;
}

.home h1 {
  font-size: var(--font-size-3);
  margin-bottom: 1rem;
  color: var(--text-color);
}

.subtitle {
  font-size: var(--font-size-125);
  color: var(--text-color);
  opacity: 0.7;
  margin-bottom: 3rem;
}

.level-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.level-card {
  padding: 2rem;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  color: var(--text-color);
  position: relative;
  overflow: hidden;
}

.level-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.level-card:hover::before {
  opacity: 1;
}

.level-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 等級卡片顏色 */
.level-card.level-N5 {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border-color: #27ae60;
  color: white;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
}

.level-card.level-N5:hover {
  box-shadow: 0 8px 24px rgba(39, 174, 96, 0.3);
}

.level-card.level-N4 {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  border-color: #9b59b6;
  color: white;
  box-shadow: 0 4px 12px rgba(155, 89, 182, 0.2);
}

.level-card.level-N4:hover {
  box-shadow: 0 8px 24px rgba(155, 89, 182, 0.3);
}

.level-card.level-N3 {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  border-color: #f39c12;
  color: white;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.2);
}

.level-card.level-N3:hover {
  box-shadow: 0 8px 24px rgba(243, 156, 18, 0.3);
}

.level-card.level-N2 {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  border-color: #e67e22;
  color: white;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.2);
}

.level-card.level-N2:hover {
  box-shadow: 0 8px 24px rgba(230, 126, 34, 0.3);
}

.level-card.level-N1 {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-color: #e74c3c;
  color: white;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

.level-card.level-N1:hover {
  box-shadow: 0 8px 24px rgba(231, 76, 60, 0.3);
}

.level-title {
  font-size: var(--font-size-2);
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.level-desc {
  font-size: var(--font-size-base);
  opacity: 0.9;
  line-height: var(--line-height-base);
}

.actions {
  margin-top: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-primary {
  background: var(--link-color);
  color: white;
}

.btn-primary:hover {
  background: var(--link-hover);
}

/* 手机端样式 */
@media (max-width: 768px) {
  .home {
    padding: 4rem 0 !important;
    padding-top: 2rem !important;
    /* 手机端顶部间距：大幅减少 */
  }

  .home h1 {
    font-size: var(--font-size-2);
    margin-bottom: 0.75rem;
  }

  .subtitle {
    font-size: var(--font-size-1);
    margin-bottom: 2rem;
  }

  .level-cards {
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
  }

  .level-card {
    padding: 1.5rem;
  }

  .level-title {
    font-size: var(--font-size-15);
  }
}.not-found {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.not-found-content {
  text-align: center;
  max-width: 600px;
}

.not-found h1 {
  font-size: var(--font-size-8);
  font-weight: bold;
  color: var(--text-color);
  margin: 0;
  line-height: 1;
}

.not-found h2 {
  font-size: var(--font-size-2);
  color: var(--text-color);
  margin: 1rem 0;
}

.not-found p {
  font-size: var(--font-size-11);
  color: var(--text-color);
  opacity: 0.8;
  margin-bottom: 2rem;
}

.back-home-btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--primary-color, #e67e22);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-size: var(--font-size-11);
  transition: all 0.3s;
}

.back-home-btn:hover {
  background: var(--primary-hover, #d35400);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
}

/* 等級分類頁頂部間距 */
/* 桌面端样式 */
.level-category-page {
  text-align: center;
  padding: 4rem 0;
  padding-top: 7rem;
}

.level-category-page h1 {
  font-size: var(--font-size-3);
  margin-bottom: 3rem;
  color: var(--text-color);
}

.category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.category-card {
  padding: 2rem;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  color: var(--text-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.category-card:hover::before {
  opacity: 1;
}

.category-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.category-icon {
  font-size: 3rem;
  line-height: 1;
  transition: transform 0.3s;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  flex-shrink: 0;
}

.category-card:hover .category-icon {
  transform: scale(1.1) rotate(5deg);
}

/* 根据等级设置卡片颜色 */
.category-card.level-N5 {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border-color: #27ae60;
  color: white;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
}

.category-card.level-N5:hover {
  box-shadow: 0 8px 24px rgba(39, 174, 96, 0.3);
}

.category-card.level-N4 {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  border-color: #9b59b6;
  color: white;
  box-shadow: 0 4px 12px rgba(155, 89, 182, 0.2);
}

.category-card.level-N4:hover {
  box-shadow: 0 8px 24px rgba(155, 89, 182, 0.3);
}

.category-card.level-N3 {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  border-color: #f39c12;
  color: white;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.2);
}

.category-card.level-N3:hover {
  box-shadow: 0 8px 24px rgba(243, 156, 18, 0.3);
}

.category-card.level-N2 {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  border-color: #e67e22;
  color: white;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.2);
}

.category-card.level-N2:hover {
  box-shadow: 0 8px 24px rgba(230, 126, 34, 0.3);
}

.category-card.level-N1 {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-color: #e74c3c;
  color: white;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

.category-card.level-N1:hover {
  box-shadow: 0 8px 24px rgba(231, 76, 60, 0.3);
}

/* N1 測驗卡底色為紅，💯 icon 改為暖橘色以利辨識 */
.category-card.level-N1.category-exam .category-icon {
  filter: brightness(0) saturate(100%) invert(72%) sepia(45%) saturate(550%) hue-rotate(25deg) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* 文法卡固定灰色，不隨等級變色 */
.category-card.category-grammar,
.category-card.category-grammar.level-N5,
.category-card.category-grammar.level-N4,
.category-card.category-grammar.level-N3,
.category-card.category-grammar.level-N2,
.category-card.category-grammar.level-N1 {
  background: linear-gradient(135deg, #818995 0%, #b4bac4 100%);
  border-color: #818995;
  color: white;
  box-shadow: 0 4px 12px rgba(129, 137, 149, 0.3);
}

.category-card.category-grammar:hover {
  box-shadow: 0 8px 24px rgba(129, 137, 149, 0.4);
}

.category-title-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.category-title {
  font-size: var(--font-size-15);
  font-weight: bold;
  line-height: var(--line-height-base);
  text-align: left;
  transition: transform 0.3s;
}

.category-title-sub {
  font-size: var(--font-size-09);
  opacity: 0.9;
  line-height: 1.3;
  text-align: left;
}

.category-card:hover .category-title {
  transform: translateX(2px);
}

/* 手机端样式 */
@media (max-width: 768px) {
  .level-category-page {
    padding: 4rem 0 !important;
    padding-top: 2rem !important;
    /* 手机端顶部间距：大幅减少 */
  }

  .level-category-page h1 {
    font-size: var(--font-size-2);
    margin-bottom: 2rem;
  }

  .category-cards {
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
  }

  .category-card {
    padding: 1.5rem;
    gap: 0.75rem;
  }

  .category-icon {
    font-size: 2.5rem;
  }

  .category-title {
    font-size: var(--font-size-125);
    text-align: left;
  }

  .category-title-sub {
    font-size: var(--font-size-085);
  }
}/**
 * 帶側邊欄的頁面布局樣式
 * 
 * 規格：
 * - 桌機版（> 1024px）：顯示右側黏性廣告欄位
 * - 內容區保持原本的 max-width: 1200px，不因側邊欄而改變
 * - 側邊欄放在螢幕右側多出來的空間，不擠壓內容
 * - 手機/平板（≤ 1024px）：隱藏側邊欄，內容全寬
 */

.page-with-sidebar {
  position: relative;
  width: 100%;
}

/* 內容區保持原本的樣式，不受側邊欄影響 */
.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  padding-top: calc(2rem + var(--content-top-padding));
  /* 使用全局变量 */
  min-height: calc(100vh - 80px);
  padding-bottom: 2rem;
  background-color: var(--bg-color);
  transition: background-color 0.3s ease;
}

/* 桌機版：側邊欄放在右側多出來的空間 */
/* 保持原本的 max-width: 1200px，不改變 */

/* 平板和手機：隱藏側邊欄，內容全寬 */
@media (max-width: 1024px) {
  .page-content {
    width: 100%;
    max-width: 100%;
    padding: 1rem 1rem;
    padding-top: 0;
    /* 移除 padding-top，因為 main-content 已經處理了 navbar 間距 */
  }
}

/* 手機版：左右 padding 設為 0 */
@media (max-width: 767px) {
  .page-content {
    padding-left: 0;
    padding-right: 0;
  }
}.word-header-card {
    margin-bottom: 0;
    text-align: center;
    padding: 1.5rem 0;
}

.word-header-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

/* 等級標籤樣式已移至 LevelBadge 組件 */
/* 如需自訂樣式，可在使用 LevelBadge 時傳入 className */

.word-header-card__tag {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-size: var(--font-size-1);
    background: #e0e0e0;
    color: #666;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
}

.word-header-card__content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.word-header-card__text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.word-header-card__speak-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
}

/* 發音鈕：觸控立即回應，避免滑動切換後第一次按無回饋 */
.word-header-card__speak-wrapper .speak-btn {
    touch-action: manipulation;
}

.word-header-card__japanese {
    font-size: var(--font-size-4);
    font-weight: 700;
    color: var(--text-color, #2c3e50);
    margin: 0;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

.word-header-card__hiragana {
    font-size: var(--font-size-2);
    color: var(--text-color, #7f8c8d);
    opacity: 0.8;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 1px;
}

/* .speak-btn 樣式已移至 components/common/SpeakButton.css，使用 .speak-btn--lg */

/* 手機響應式 */
@media (max-width: 768px) {
    .word-header-card {
        padding: 1rem 0;
        margin-bottom: 0;
    }
    
    .word-header-card__japanese {
        font-size: var(--font-size-3);
    }

    .word-header-card__hiragana {
        font-size: var(--font-size-15);
    }
    
    .word-header-card__content {
        gap: 1rem;
    }
}.word-translation-card__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--input-bg, #f8f9fa);
    border-radius: 8px;
    transition: background-color 0.3s ease;
    margin-top: 0;
}

.word-translation-card__value {
    font-size: var(--font-size-2);
    color: var(--text-color, #2c3e50);
    font-weight: 500;
    line-height: var(--line-height-base);
}

/* 手機響應式 */
@media (max-width: 768px) {
    .word-translation-card__value {
        font-size: var(--font-size-15);
    }
}.example-sentence-card {
    padding: 1.5rem;
    background: var(--card-bg, white);
    border: 1px solid var(--card-border, #e0e0e0);
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.example-sentence-card:hover {
    border-color: var(--link-color, #64b5f6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.example-sentence-card__japanese-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.example-sentence-card__japanese {
    font-size: var(--font-size-japanese);
    color: var(--text-color, #2c3e50);
    line-height: var(--line-height-tight);
    font-weight: 500;
    flex: 1;
}

/* 無 ruby 時下一行顯示讀音 (h) */
.example-sentence-card__reading-line {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.95em;
    color: var(--text-secondary, #666);
}

/* 例句發音鈕：觸控立即回應，避免滑動切換後第一次按無回饋（與 WordHeaderCard 單字發音鈕一致） */
.example-sentence-card .speak-btn {
    touch-action: manipulation;
    background: white;
    color: var(--link-color, #3498db);
    border: 1px solid var(--card-border, #e0e0e0);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: var(--font-size-11);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    padding: 0;
}

.example-sentence-card .speak-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-color: var(--link-color, #3498db);
}

.example-sentence-card .speak-btn:active {
    transform: scale(0.95);
}

.example-sentence-card__translation {
    font-size: var(--font-size-chinese);
    color: var(--text-secondary, #666);
    line-height: var(--line-height-tight);
    padding-left: 0.5rem;
    border-left: 3px solid var(--link-color, #64b5f6);
}

/* 手機版：例句換行時增加行距；點擊例句可放大（改字級讓框線包住），放大時隱藏發音鈕 */
@media (max-width: 768px) {
    .example-sentence-card__japanese {
        line-height: 2.2;
        cursor: pointer;
        transition: font-size 0.25s ease;
    }

    .example-sentence-card__translation {
        line-height: 1.6;
    }

    .example-sentence-card--zoomed .example-sentence-card__japanese {
        font-size: 1.4em;
        /* 用字級放大，版面重排，不會衝出框線 */
    }

    .example-sentence-card--zoomed .speak-btn {
        display: none;
    }
}.example-sentence-list {
  margin-top: 1rem;
  text-align: left;
}

.example-sentence-list__title {
  font-size: var(--font-size-15);
  font-weight: bold;
  color: var(--text-color, #2c3e50);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--card-border, #ddd);
}

.example-sentence-list__items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/**
 * 活用形說明彈出框樣式
 */

.conjugation-help-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  animation: conjugationHelpFadeIn 0.2s ease;
  overflow: hidden;
}

@keyframes conjugationHelpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.conjugation-help-modal {
  background: var(--card-bg, white);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: conjugationHelpSlideUp 0.2s ease;
}

/* 桌機版加寬，手機維持原寬度；不影響設定頁 */
@media (min-width: 768px) {
  .conjugation-help-modal {
    max-width: 800px;
  }
}

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

.conjugation-help-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
  flex-shrink: 0;
}

.conjugation-help-modal-title {
  font-size: var(--font-size-125);
  font-weight: 600;
  color: var(--text-color, #333);
  margin: 0;
}

.conjugation-help-modal-close {
  background: none;
  border: none;
  font-size: var(--font-size-15);
  color: var(--text-secondary, #666);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.conjugation-help-modal-close:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
  color: var(--text-color, #333);
}

.conjugation-help-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
  flex-shrink: 0;
}

.conjugation-help-modal-tab {
  padding: 0.75rem 1.25rem;
  background: none;
  border: none;
  font-size: var(--font-size-1);
  color: var(--text-secondary, #666);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}

.conjugation-help-modal-tab:hover {
  color: var(--text-color, #333);
}

.conjugation-help-modal-tab.active {
  color: var(--link-color, #1976d2);
  font-weight: 600;
  border-bottom-color: var(--link-color, #1976d2);
}

.conjugation-help-modal-content {
  padding: 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.conjugation-help-modal-body h3 {
  font-size: var(--font-size-1125);
  font-weight: 600;
  color: var(--text-color, #2c3e50);
  margin: 2.25rem 0 0.5rem;
}

.conjugation-help-modal-body h3:first-child {
  margin-top: 0;
}

.conjugation-help-modal-body p {
  font-size: var(--font-size-1);
  line-height: 1.6;
  color: var(--text-color, #333);
  margin: 0.5rem 0;
}

.conjugation-help-table {
  border-collapse: collapse;
  margin: 0.75rem 0 1rem;
  font-size: var(--font-size-0875);
}

.conjugation-help-table--stem {
  width: max-content;
  max-width: 280px;
  margin-bottom: 1rem;
}

/* 主表（活用形｜形成方式｜舉例）依內容寬度，不拉滿 */
.conjugation-help-table:not(.conjugation-help-table--stem) {
  width: max-content;
}

.conjugation-help-table th,
.conjugation-help-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border: 1px solid var(--card-border, #e0e0e0);
}

.conjugation-help-table th {
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
  font-weight: 600;
  color: var(--text-color, #2c3e50);
}

.conjugation-help-table td {
  color: var(--text-color, #333);
}

.conjugation-help-table tbody tr:nth-child(even) {
  background: var(--hover-bg, rgba(0, 0, 0, 0.02));
}

.conjugation-help-subtable {
  width: 100%;
  border: none;
  margin: 0;
  font-size: inherit;
}

.conjugation-help-subtable td {
  padding: 0.15rem 0.5rem 0.15rem 0;
  border: none;
  vertical-align: top;
}

.conjugation-help-subtable td:first-child {
  color: var(--text-secondary, #666);
  white-space: nowrap;
  width: 1%;
}

.conjugation-help-subtable--examples td:first-child {
  color: var(--text-color, #333);
  white-space: normal;
  width: auto;
}

/* 手機版：整張表可左右滑，每欄都不換行；所有表都依內容寬度，不強制 min-width */
@media (max-width: 767px) {
  .conjugation-help-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .conjugation-help-table th,
  .conjugation-help-table td {
    white-space: nowrap;
  }
  .conjugation-help-subtable th,
  .conjugation-help-subtable td {
    white-space: nowrap;
  }
}

/* 舉例欄中的語幹（第一類動詞）：固定部分 */
.conjugation-help-stem {
  background: var(--conjugation-stem-bg, rgba(25, 118, 210, 0.12));
  border-radius: 3px;
  font-weight: 600;
}

/* 舉例欄中的活用段假名（第一類動詞）：依段變化的那一字 */
.conjugation-help-row {
  background: var(--conjugation-row-bg, rgba(245, 124, 0, 0.18));
  border-radius: 3px;
  font-weight: 600;
}

.dark-mode .conjugation-help-stem {
  background: var(--conjugation-stem-bg, rgba(100, 181, 246, 0.28));
}

.dark-mode .conjugation-help-row {
  background: var(--conjugation-row-bg, rgba(255, 183, 77, 0.28));
}

.conjugation-help-note {
  font-size: var(--font-size-0875) !important;
  color: var(--text-secondary, #666) !important;
  font-style: italic;
}
.conjugation-block {
  margin-top: 3rem;
  text-align: left;
}

.conjugation-block__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--card-border, #ddd);
}

.conjugation-block__title {
  font-size: var(--font-size-15);
  font-weight: bold;
  color: var(--text-color, #2c3e50);
  margin: 0;
}

.conjugation-block__help-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--card-border, #ddd);
  border-radius: 50%;
  background: var(--card-bg, white);
  color: var(--text-secondary, #666);
  font-size: var(--font-size-0875);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.conjugation-block__help-btn:hover {
  border-color: var(--link-color, #64b5f6);
  color: var(--link-color, #64b5f6);
  background: var(--hover-bg, rgba(100, 181, 246, 0.08));
}

.conjugation-block__group {
  margin-bottom: 2rem;
}

.conjugation-block__group-title {
  font-size: var(--font-size-1125);
  font-weight: 600;
  color: var(--text-color, #2c3e50);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
}

.conjugation-block__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.conjugation-block__item {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--card-bg, white);
  border: 1px solid var(--card-border, #e0e0e0);
  border-radius: 6px;
  transition: border-color 0.3s ease;
  flex: 1 1 calc(50% - 0.75rem);
  min-width: 140px;
  max-width: calc(50% - 0.75rem);
}

.conjugation-block__item:hover {
  border-color: var(--link-color, #64b5f6);
}

.conjugation-block__label {
  font-size: var(--font-size-0875);
  color: var(--text-secondary, #666);
  margin-bottom: 0.5rem;
  line-height: var(--line-height-tight);
}

.conjugation-block__form {
  font-size: var(--font-size-1125);
  color: var(--text-color, #2c3e50);
  font-weight: 500;
  line-height: var(--line-height-tight);
}

/* 與說明彈出框相同的語幹／活用段上色（僅第一類動詞非て/た形有第二色） */
.conjugation-block__form .conjugation-help-stem {
  background: var(--conjugation-stem-bg, rgba(25, 118, 210, 0.12));
  border-radius: 3px;
  font-weight: 600;
}

.conjugation-block__form .conjugation-help-row {
  background: var(--conjugation-row-bg, rgba(245, 124, 0, 0.18));
  border-radius: 3px;
  font-weight: 600;
}

.dark-mode .conjugation-block__form .conjugation-help-stem {
  background: var(--conjugation-stem-bg, rgba(100, 181, 246, 0.28));
}

.dark-mode .conjugation-block__form .conjugation-help-row {
  background: var(--conjugation-row-bg, rgba(255, 183, 77, 0.28));
}

/* RWD 響應式調整 */
@media (max-width: 768px) {
  .conjugation-block__item {
    flex: 1 1 calc(50% - 0.75rem); /* 手机端也保持两个一行 */
    max-width: calc(50% - 0.75rem); /* 确保最大宽度为50% */
  }

  .conjugation-block__form {
    font-size: var(--font-size-1);
  }

  .conjugation-block__label {
    font-size: var(--font-size-08);
  }
}

/* 480px 以下也保持两个一行 */
@media (max-width: 480px) {
  .conjugation-block__item {
    flex: 1 1 calc(50% - 0.75rem) !important; /* 强制两个一行 */
    max-width: calc(50% - 0.75rem) !important; /* 确保最大宽度为50% */
    min-width: 0; /* 允许更小的宽度 */
  }
}

.word-usage-block {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--card-border, #e0e0e0);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.usage-block-title {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--text-color, #333);
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--card-border, #e0e0e0);
}

.usage-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.usage-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.usage-section-title {
  font-size: var(--font-size-11);
  font-weight: 600;
  color: var(--text-color, #333);
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
}

.usage-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.usage-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--card-bg-secondary, #f8f9fa);
  border-radius: 8px;
  border-left: 3px solid var(--primary-color, #42a5f5);
  transition: all 0.2s;
}

.usage-item:hover {
  background: var(--hover-bg, rgba(66, 165, 245, 0.05));
  border-left-color: var(--primary-color-hover, #1e88e5);
}

.usage-japanese {
  font-size: var(--font-size-1);
  font-weight: 500;
  color: var(--text-color, #333);
  line-height: 1.6;
}

/* 深色模式下確保日文文字有足夠對比度 */
.dark-mode .usage-japanese {
  color: var(--text-color, #e8e8e8);
}

.usage-translation {
  font-size: var(--font-size-095);
  color: var(--text-color-secondary, #666);
  line-height: 1.6;
}

/* 深色模式下確保翻譯文字有足夠對比度 */
.dark-mode .usage-translation {
  color: var(--text-color-secondary, #b0b0b0);
}

/* 響應式設計 */
@media (max-width: 768px) {
  .word-usage-block {
    margin: 1rem 0;
    /* padding 已移除 */
  }

  .usage-block-title {
    font-size: var(--font-size-125);
    margin-bottom: 1rem;
  }

  .usage-section-title {
    font-size: var(--font-size-1);
  }

  .usage-content {
    gap: 1.5rem;
  }

  .usage-items {
    gap: 0.5rem;
  }

  .usage-item {
    padding: 0.5rem;
  }
}

/**
 * 加載狀態樣式
 */

.loading {
  text-align: center;
  padding: 2rem;
  font-size: var(--font-size-12);
  color: var(--text-color, #333);
}

/**
 * 錯誤狀態樣式
 */

.error {
    text-align: center;
    padding: 2rem;
    font-size: var(--font-size-12);
    color: #e74c3c;
}/**
 * 分類按鈕組樣式
 */

.category-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.category-btn {
  padding: 0.5rem 1rem;
  border: 2px solid var(--card-border, #e0e0e0);
  background: var(--card-bg, #ffffff);
  color: var(--text-color, #333);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
  font-size: var(--font-size-095);
}

.category-btn:hover {
  border-color: var(--primary-color, #667eea);
  background: var(--card-bg, #ffffff);
}

.category-btn.active {
  background: var(--primary-color, #667eea);
  color: white;
  border-color: var(--primary-color, #667eea);
}

.category-btn.clear-btn {
  background: var(--error-color, #e74c3c);
  color: white;
  border-color: var(--error-color, #e74c3c);
}

.category-btn.clear-btn:hover {
  background: var(--error-color-hover, #c0392b);
  border-color: var(--error-color-hover, #c0392b);
}

/**
 * 等級標籤樣式
 */

.level-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: var(--font-size-075);
    font-weight: bold;
    color: white;
    text-align: center;
    white-space: nowrap;
}

/* 尺寸變體 */
.level-badge--small {
    padding: 0.15rem 0.5rem;
    font-size: var(--font-size-07);
}

.level-badge--medium {
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-075);
}

.level-badge--large {
    padding: 0.35rem 1rem;
    font-size: var(--font-size-085);
}

/* 等級顏色 */
.level-N5 {
    background: #27ae60;
}

.level-N4 {
    background: #9b59b6;
}

.level-N3 {
    background: #f39c12;
}

.level-N2 {
    background: #e67e22;
}

.level-N1 {
    background: #e74c3c;
}/* 與文法內頁、basic 列表一致的容器 */
.grammar-list {
  max-width: 1200px;
  margin: 0 auto;
}

.grammar-list .breadcrumb {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.grammar-list-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 0.5rem;
}

.grammar-list-title {
  margin: 0;
  color: var(--text-color, #2c3e50);
  font-size: var(--font-size-15);
  font-weight: 600;
}

.grammar-list-title-grammar-notes-link {
  flex-shrink: 0;
  font-size: var(--font-size-095);
  font-weight: 500;
  color: #e74c3c;
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background 0.2s, color 0.2s;
}

.grammar-list-title-grammar-notes-link:hover {
  background: rgba(231, 76, 60, 0.08);
  color: #e74c3c;
  text-decoration: none;
}

.grammar-list-title-grammar-notes-link-icon {
  display: inline-block;
  transform: translateY(1px);
}

.grammar-list-title-grammar-notes-link-text {
  text-decoration: underline double;
  text-underline-offset: 2px;
}

@media (min-width: 768px) {
  .grammar-list-title {
    font-size: var(--font-size-175);
  }
}

.grammar-list-loading,
.grammar-list-error {
  margin-top: 0.5rem;
}

.grammar-list-error {
  color: var(--text-error, #c0392b);
}

.grammar-list-content {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* 每個分類一張卡：與內頁說明卡同語彙 */
.grammar-category-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  border-left: 4px solid #2980b9;
  padding: 1rem 1.25rem;
  margin: 0;
}

.grammar-category-card-title {
  font-size: var(--font-size-125);
  color: var(--text-color);
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
  font-weight: 600;
}

.grammar-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.grammar-item {
  padding: 0.4rem 0;
  color: var(--text-color);
  line-height: 1.5;
  border-bottom: 1px dashed var(--card-border, #e8e8e8);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.grammar-item:last-child {
  border-bottom: none;
}

.grammar-item-pattern {
  font-weight: 500;
}

.grammar-item-desc {
  color: var(--text-muted);
}

/* 接續形式：仿 basic-level-badge，全部灰色 */
.grammar-item-precedes {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.grammar-precedes-badge {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  line-height: 1.2;
  background: #9e9e9e;
  color: #fff;
}

.grammar-item-link .grammar-precedes-badge {
  background: #9e9e9e;
  color: #fff;
}

.grammar-item-link:hover .grammar-precedes-badge {
  background: #757575;
}

.grammar-item-link {
  color: var(--link-color, #3498db);
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0.15rem 0;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

.grammar-item-link:hover {
  background: rgba(52, 152, 219, 0.08);
  text-decoration: none;
  color: #2980b9;
}

/* 手機版：接頭詞靠右對齊 */
@media (max-width: 767px) {
  .grammar-item-link {
    width: 100%;
  }

  .grammar-item-precedes {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
  }
}

/* 前接形式篩選（樣式抄 basic 頁） */
.grammar-list-precedes-filters {
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .grammar-list-precedes-filters {
    margin-bottom: 1.25rem;
  }
}

.grammar-list-precedes-filters .category-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* 手機版：當前篩選 chip + 篩選按鈕 */
.grammar-mobile-filter-row {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.grammar-mobile-filter-chip {
  font-size: var(--font-size-095);
  font-weight: 600;
  color: #ffffff;
  padding: 0.5rem 1rem;
  background: #42a5f5;
  border: 1px solid #42a5f5;
  border-radius: 8px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 4px rgba(66, 165, 245, 0.3);
}

.grammar-mobile-filter-check {
  font-size: var(--font-size-085);
}

.grammar-mobile-filter-btn {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--card-border, #e0e0e0);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-095);
  font-weight: 500;
  color: var(--text-color, #333);
  transition: all 0.2s;
  flex-shrink: 0;
}

.grammar-mobile-filter-btn:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
}

.grammar-mobile-filter-arrow {
  font-size: var(--font-size-11);
}

/* 手機版篩選彈窗 */
.grammar-filter-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}

.grammar-filter-modal {
  background: var(--card-bg, white);
  border-radius: 12px;
  max-width: 90vw;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.2s ease;
}

.grammar-filter-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
  flex-shrink: 0;
}

.grammar-filter-modal-header h2 {
  font-size: var(--font-size-125);
  font-weight: 600;
  color: var(--text-color, #333);
  margin: 0;
}

.grammar-filter-modal-close {
  background: none;
  border: none;
  font-size: var(--font-size-125);
  color: var(--text-secondary, #666);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.grammar-filter-modal-close:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
  color: var(--text-color, #333);
}

.grammar-filter-modal-content {
  padding: 1.5rem;
  overflow-y: auto;
}

.grammar-filter-modal-content .category-filters {
  flex-direction: column;
  margin-bottom: 0;
  gap: 0.75rem;
}

.grammar-filter-modal-content .category-btn {
  width: 100%;
  padding: 0.75rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--card-border, #e0e0e0);
}

.grammar-filter-modal-content .category-btn.active {
  background: #42a5f5;
  color: #fff;
  border-color: #42a5f5;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.breadcrumb {
    margin-bottom: 1.5rem;
    padding: 0.75rem 0;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: var(--font-size-09);
    color: var(--text-color, #333);
}

.breadcrumb-link {
    color: var(--link-color, #3498db);
    text-decoration: none;
    transition: opacity 0.2s;
}

.breadcrumb-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.breadcrumb-current {
    color: var(--text-color, #333);
    font-weight: 500;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: var(--text-color, #999);
    opacity: 0.6;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .breadcrumb {
        display: none;
        /* 手機版完全隱藏麵包屑，不佔空間 */
    }
}/**
 * 單字詳情頁面樣式
 */

/* 主容器 */
.word-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}

/* 统一的间距系统 */
.word-detail>*+* {
  margin-top: 1rem;
}

/* 載入和錯誤狀態 */
.loading,
.error {
  text-align: center;
  padding: 2rem;
  font-size: var(--font-size-12);
}

.error {
  color: #e74c3c;
}

/* 導航欄（返回按鈕 + 操作按鈕組） */
.word-detail-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
  overflow: visible;
  min-width: 0;
}

/* 返回按鈕 */
.back-btn {
  background: var(--link-color, #64b5f6);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  flex-shrink: 0;
}

.back-btn:hover {
  background: var(--link-hover, #42a5f5);
}

/* 操作按鈕組容器 */
.word-detail-nav-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  overflow: visible;
  min-width: 0;
}

/* 通用操作按鈕樣式 */
.action-btn {
  background: var(--link-color, #64b5f6);
  color: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  font-size: var(--font-size-12);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.action-btn:hover {
  background: var(--link-hover, #42a5f5);
  transform: scale(1.1);
}


/* ChatGPT 問號按鈕 */
.chatgpt-btn {
  font-weight: bold;
}

.chatgpt-btn__icon {
  display: inline-block;
  transform: scale(1.3);
  line-height: 1;
}

/* 回報錯誤按鈕 */
.report-btn {
  font-size: var(--font-size-1);
}

/* 收藏按鈕 */
.favorite-btn {
  font-size: var(--font-size-13);
}

/* 確保未點亮狀態（沒有 favorited class）時 filter 強制應用，使用更具體的選擇器提高優先級 */
.action-btn.favorite-btn:not(.favorited) {
  background: var(--link-color, #64b5f6) !important;
}

.action-btn.favorite-btn:not(.favorited) .favorite-btn__star {
  filter: grayscale(100%) opacity(0.5) !important;
}

.action-btn.favorite-btn.favorited {
  /* 點亮狀態：保持原色（黃色）並顯示藍色背景 */
  background: var(--link-color, #64b5f6) !important;
}

.action-btn.favorite-btn.favorited .favorite-btn__star {
  filter: grayscale(0%) opacity(1) !important;
}


/* 內容卡片 */
.word-content {
  background: var(--card-bg, white);
  border: 1px solid var(--card-border, #ddd);
  color: var(--text-color, #333);
  border-radius: 12px;
  padding: 1rem;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 主內容包裝器（包含按鈕區域） */
.word-main-wrapper {
  position: relative;
}

/* 主內容區域 */
.word-main {
  text-align: center;
  margin-bottom: 2rem;
}

/* 側邊導航按鈕（長條樣式） */
.side-nav-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  background: rgba(100, 181, 246, 0.1);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-18);
  color: var(--link-color, #64b5f6);
  z-index: 10;
  padding: 0;
}

.side-nav-btn--left {
  left: -1rem;
  border-radius: 0;
}

.side-nav-btn--right {
  right: -1rem;
  border-radius: 0;
}

.side-nav-btn:hover:not(:disabled) {
  background: rgba(100, 181, 246, 0.3);
  color: var(--link-hover, #42a5f5);
  transform: scale(1.05);
}

.side-nav-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.side-nav-btn:disabled {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-secondary, #999);
  cursor: not-allowed;
  opacity: 0.4;
}

/* 平板和手機版響應式 */
@media (max-width: 1024px) {
  .side-nav-btn {
    width: 40px;
    font-size: var(--font-size-15);
  }
}

@media (max-width: 768px) {

  /* WordDetail 頁面專用：移除 page-content 多餘的 padding-top，避免與 main-content 重複佔位 */
  .main-content .page-with-sidebar .page-content:has(.word-detail) {
    padding-top: 0;
    /* 移除 padding-top，因為 main-content 已經處理了 navbar 間距，避免重複佔位 */
  }

  .word-detail-nav {
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow: visible;
  }

  .word-detail-nav-buttons {
    gap: 0.375rem;
    flex-shrink: 0;
    min-width: 0;
    overflow: visible;
  }

  .action-btn {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-1);
    flex-shrink: 0;
  }

  .chatgpt-btn {
    font-size: var(--font-size-1);
  }

  .favorite-btn {
    font-size: var(--font-size-11);
  }

  .back-btn {
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 廣告插槽樣式 */
.ad-slot-after-translation {
  width: 100%;
  margin-top: -1rem;
}

.ad-slot-after-conjugation,
.ad-slot-after-usage {
  width: 100%;
  margin: 2.5rem 0;
}

.ad-slot-after-translation .ad-slot,
.ad-slot-after-conjugation .ad-slot {
  width: 100%;
  grid-column: unset;
}.word-list {
  max-width: 1200px;
  margin: 0 auto;
}

/* 壓縮頂部區域：麵包屑 */
.word-list .breadcrumb {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.word-list .breadcrumb-item {
  font-size: var(--font-size-085);
}

@media (min-width: 768px) {
  .word-list .breadcrumb {
    margin-bottom: 0.875rem;
    padding: 0.625rem 0;
  }

  .word-list .breadcrumb-item {
    font-size: var(--font-size-0875);
  }
}

/* 返回按鈕 */
.word-list .mobile-back-btn {
  background: #9e9e9e;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 1rem;
  display: none;
  /* 預設隱藏，只在手機版顯示 */
}

.word-list .mobile-back-btn:hover {
  background: #757575;
}

.word-list h1 {
  margin-bottom: 1rem;
  color: var(--text-color, #2c3e50);
  font-size: var(--font-size-15);
}

@media (min-width: 768px) {
  .word-list h1 {
    font-size: var(--font-size-175);
    margin-bottom: 1.25rem;
  }
}

/* Tabs 容器 - 可水平滑動 */
.tabs-container {
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--card-border, #ddd);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* iOS 平滑滾動 */
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: var(--card-border, #ddd) transparent;
}

.tabs-container::-webkit-scrollbar {
  height: 6px;
  /* Chrome/Safari/Edge */
}

.tabs-container::-webkit-scrollbar-track {
  background: transparent;
}

.tabs-container::-webkit-scrollbar-thumb {
  background-color: var(--card-border, #ddd);
  border-radius: 3px;
}

.tabs-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-color, #999);
}

.tabs-scroll-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 0;
  min-width: min-content;
  /* 確保內容不會被壓縮 */
  padding-bottom: 2px;
  /* 為 border-bottom 留出空間 */
}

.tab-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
  /* 防止群組被壓縮 */
}

.tab-group-divider {
  width: 1px;
  height: 24px;
  background-color: var(--card-border, #ddd);
  margin: 0 0.75rem;
  flex-shrink: 0;
  align-self: center;
}

.filters {
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .filters {
    margin-bottom: 1.25rem;
  }
}

.filter-label {
  font-weight: 500;
  color: var(--text-color);
  opacity: 0.85;
}

.level-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.tag-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

/* 手機版：單行橫向滑動 */
@media (max-width: 768px) {
  .tag-group {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--card-border, #ddd) transparent;
    padding-bottom: 0.25rem;
    margin-bottom: 0.75rem;
  }

  .tag-group::-webkit-scrollbar {
    height: 4px;
  }

  .tag-group::-webkit-scrollbar-track {
    background: transparent;
  }

  .tag-group::-webkit-scrollbar-thumb {
    background-color: var(--card-border, #ddd);
    border-radius: 2px;
  }
}

/* 桌機版：更緊湊的多行 */
@media (min-width: 769px) {
  .tag-group {
    gap: 0.375rem;
    margin-bottom: 0.5rem;
  }
}

.sub-pos-group {
  margin-left: 2rem;
  margin-bottom: 0.5rem;
}

.tag-btn {
  padding: 0.5rem 1rem;
  border: 2px solid var(--card-border, #ddd);
  background: var(--card-bg, white);
  color: var(--text-color, #333);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
  font-size: var(--font-size-09);
  flex-shrink: 0;
}

/* 手機版：更小的 chip */
@media (max-width: 768px) {
  .tag-btn {
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-085);
    border-width: 1.5px;
  }
}

/* 桌機版：稍微縮小 */
@media (min-width: 769px) {
  .tag-btn {
    padding: 0.4rem 0.85rem;
    font-size: var(--font-size-0875);
  }
}

.pos-btn:hover {
  border-color: #3498db;
  background: #ebf5fb;
}

.pos-btn.active {
  background: #42a5f5;
  color: white;
  border-color: #42a5f5;
}

.pos-btn.dimmed {
  opacity: 0.5;
  background: #bdc3c7;
  color: #7f8c8d;
  border-color: #bdc3c7;
}

.sub-pos-btn {
  font-size: var(--font-size-085);
  padding: 0.4rem 0.8rem;
}

.sub-pos-btn.active {
  background: #2980b9;
  color: white;
  border-color: #2980b9;
}

.situation-btn:hover {
  border-color: #f39c12;
  background: #fef5e7;
}

.situation-btn.active {
  background: #42a5f5;
  color: white;
  border-color: #42a5f5;
}

.level-btn {
  padding: 0.5rem 1rem;
  border: 2px solid var(--card-border, #ddd);
  background: var(--card-bg, white);
  color: var(--text-color, #333);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.level-btn:hover {
  border-color: var(--link-color, #3498db);
  background: var(--input-bg, #f0f8ff);
}

.level-btn.active {
  background: var(--link-color, #3498db);
  color: white;
  border-color: var(--link-color, #3498db);
}

.clear-btn {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
}

.clear-btn:hover {
  background: #c0392b;
  border-color: #c0392b;
}

.search-box {
  margin-bottom: 1rem;
}

.search-input {
  width: 100%;
  padding: 1rem;
  font-size: var(--font-size-1);
  border: 2px solid var(--input-border, #ddd);
  background: var(--input-bg, white);
  color: var(--text-color, #333);
  border-radius: 8px;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

.search-input:focus {
  outline: none;
  border-color: var(--link-color, #3498db);
}

.loading,
.error {
  text-align: center;
  padding: 2rem;
  font-size: var(--font-size-12);
}

.error {
  color: #e74c3c;
}

.words-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

/* 平板：2列 */
@media (min-width: 768px) and (max-width: 1023px) {
  .words-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* 桌機格線：一排四個（必須在平板規則之後，確保優先級） */
@media (min-width: 1024px) {
  .words-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem;
  }
}

/* 手機：一行一個（條列式或卡片式一排一個） */
@media (max-width: 767px) {
  .words-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  /* 卡片式：兩列布局（一排兩個） */
  .words-grid.word-list-style-card {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem;
  }

  /* 卡片式：卡片樣式調整 */
  .word-list-style-card .word-card-mobile-card-style {
    padding: 1rem !important;
    font-size: var(--font-size-09) !important;
  }

  .word-list-style-card .word-card-mobile-card-style .word-japanese {
    font-size: var(--font-size-12) !important;
  }

  .word-list-style-card .word-card-mobile-card-style .word-hiragana {
    font-size: var(--font-size-085) !important;
  }

  .word-list-style-card .word-card-mobile-card-style .word-tag {
    font-size: var(--font-size-065) !important;
    padding: 0.15rem 0.4rem !important;
  }
}

.word-card {
  background: var(--card-bg, white);
  border: 1px solid var(--card-border, #ddd);
  color: var(--text-color, #333);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  width: 100%;
  box-sizing: border-box;
  min-height: auto;
  position: relative;
  /* 為收藏按鈕定位 */
}

/* 桌機版：稍微增加 padding */
@media (min-width: 768px) {
  .word-card {
    padding: 1rem 1.25rem;
  }
}

/* 手機版：橫向扁平樣式（收藏 | 詞性 | J | H | TC | 發音鈕）- 使用 Grid 對齊 */
@media (max-width: 767px) {
  .word-card {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    min-height: 56px;
    display: grid;
    grid-template-columns: var(--mobile-grid-columns, 24px 22px 0 1fr minmax(0, max-content) minmax(0, max-content) 32px);
    /* 動態計算的列，預設：收藏 | 詞性 | 間距 | J | H | TC | 發音鈕 */
    align-items: center;
    gap: 0.5rem;
  }

  /* 手機版收藏按鈕 */
  .word-card .word-card-favorite-btn {
    position: static;
    width: 24px;
    height: 24px;
    font-size: var(--font-size-1);
    grid-row: 1;
    justify-self: start;
    /* grid-column 由動態設定控制 */
    /* 未點亮狀態：使用 filter 讓星星變灰 */
    filter: grayscale(100%) opacity(0.5) !important;
  }

  /* 手機版收藏按鈕 - 已收藏狀態 */
  .word-card .word-card-favorite-btn.favorited {
    /* 點亮狀態：保持原色（黃色） */
    filter: grayscale(0%) opacity(1) !important;
  }

  /* 手機版收藏按鈕 - 確保未收藏狀態（沒有 favorited class）時是灰色 */
  .word-card .word-card-favorite-btn:not(.favorited) {
    filter: grayscale(100%) opacity(0.5) !important;
  }

  /* 詞性標籤 - 第一列，垂直置中 */
  .word-card .word-list-header {
    display: contents !important;
    margin-bottom: 0 !important;
  }

  .word-card .word-meta {
    display: contents !important;
    margin-bottom: 0 !important;
  }

  .word-card .word-tag {
    padding: 0.15rem 0.5rem;
    font-size: var(--font-size-075);
    min-height: 18px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    grid-row: 1;
    justify-self: start;
    /* grid-column 由動態設定控制，如果沒有設定則不參與 Grid */
  }

  /* J（日文）和 H（假名）需要分開顯示 */
  .word-card .word-japanese-container {
    margin-bottom: 0;
    text-align: left;
    display: contents;
  }

  .word-card .word-content-wrapper {
    display: contents;
  }

  .word-card .word-text-group {
    display: contents;
  }

  /* J（日文） - 垂直置中，grid-column 由動態設定控制，最優先顯示完整內容 */
  .word-card .word-japanese {
    font-size: var(--font-size-11);
    text-align: left;
    line-height: 1.2;
    margin: 0;
    /* grid-column 由動態設定控制 */
    grid-row: 1;
    display: flex;
    align-items: center;
    min-width: auto !important;
    /* 允許內容決定寬度，確保完整顯示 */
    width: max-content !important;
    /* 移除截斷樣式，確保完整顯示 */
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  /* H（假名） - 垂直置中，grid-column 由動態設定控制，空間不足時可縮小至隱藏 */
  .word-card .word-hiragana {
    font-size: var(--font-size-085);
    text-align: left;
    line-height: 1.2;
    margin: 0;
    /* grid-column 由動態設定控制 */
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    /* 允許縮小到 0 */
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* TC（翻譯） - 可伸縮，垂直置中，靠右對齊，grid-column 由動態設定控制 */
  .word-card .word-translation {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-width: 0;
    overflow: hidden;
    /* grid-column 由動態設定控制 */
    grid-row: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    max-width: 100%;
  }

  .word-card .translation {
    font-size: var(--font-size-1);
    line-height: 1.3;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    min-width: 0;
    text-align: right;
  }

  /* 發音鈕 - 垂直置中，grid-column 由動態設定控制 */
  .word-card .speak-btn {
    background: white;
    color: var(--link-color, #3498db);
    border: 1px solid var(--card-border, #e0e0e0);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: var(--font-size-085);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* grid-column 由動態設定控制 */
    grid-row: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    justify-self: center;
  }

  .word-card .speak-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-color: var(--link-color, #3498db);
  }

  .word-card .speak-btn:active {
    transform: scale(0.95);
  }

  /* 手機版批次刪除模式：checkbox 對齊（與發音鈕位置一致） */
  .word-list.batch-mode .word-card {
    position: relative;
  }

  /* 批次刪除模式的 checkbox - 當發音鈕存在時，使用絕對定位覆蓋發音鈕 */
  .word-list.batch-mode .batch-checkbox,
  .word-list.batch-mode .word-card input[type="checkbox"] {
    margin: 0 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
  }

  /* 當發音鈕被隱藏時，checkbox 需要佔據 grid 的最後一列 */
  /* 使用 word-card-wrapper 來創建一個包含 WordCard 和 checkbox 的 grid 容器 */
  .word-card-wrapper.batch-mode {
    display: grid;
    grid-template-columns: 1fr 32px;
    /* WordCard 佔主要空間，checkbox 佔 32px（與發音鈕同寬） */
    align-items: center;
    gap: 0;
  }

  .word-card-wrapper.batch-mode .word-card {
    grid-column: 1;
  }

  .word-card-wrapper.batch-mode .batch-checkbox {
    grid-column: 2;
    position: static;
    /* 改為 static，使用 grid 定位 */
    top: auto;
    right: auto;
    transform: none;
    justify-self: center;
    /* 在 32px 列中置中 */
  }

  /* 手機版卡片式樣式（參考動詞活用頁面） */
  .word-card-mobile-card-style {
    display: block !important;
    grid-template-columns: none !important;
    padding: 1.25rem !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    min-height: auto !important;
    gap: 0 !important;
  }

  .word-card-mobile-card-style:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-2px) !important;
  }

  /* 卡片式：收藏按鈕 */
  .word-card-mobile-card-style .word-card-favorite-btn {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    width: 28px !important;
    height: 28px !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* 卡片式：詞性標籤 */
  .word-card-mobile-card-style .word-list-header {
    display: block !important;
    margin-bottom: 0.75rem !important;
  }

  .word-card-mobile-card-style .word-meta {
    display: flex !important;
    gap: 0.375rem !important;
    margin-bottom: 0.5rem !important;
    flex-wrap: wrap !important;
  }

  .word-card-mobile-card-style .word-tag {
    grid-column: unset !important;
    grid-row: unset !important;
    padding: 0.2rem 0.6rem !important;
    font-size: var(--font-size-07) !important;
    min-height: 20px !important;
  }

  /* 卡片式：日文容器 */
  .word-card-mobile-card-style .word-japanese-container {
    display: block !important;
    margin-bottom: 0.375rem !important;
    text-align: left !important;
  }

  .word-card-mobile-card-style .word-content-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    position: relative !important;
  }

  .word-card-mobile-card-style .word-text-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.125rem !important;
  }

  /* 卡片式：日文 */
  .word-card-mobile-card-style .word-japanese {
    font-size: var(--font-size-15) !important;
    font-weight: bold !important;
    text-align: left !important;
    margin: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
  }

  /* 卡片式：假名 */
  .word-card-mobile-card-style .word-hiragana {
    font-size: var(--font-size-1) !important;
    text-align: left !important;
    margin: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    opacity: 0.7 !important;
    font-style: italic !important;
  }

  /* 卡片式：翻譯 */
  .word-card-mobile-card-style .word-translation {
    margin-top: 0.375rem !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    grid-column: unset !important;
    grid-row: unset !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    justify-content: unset !important;
  }

  .word-card-mobile-card-style .translation {
    font-size: var(--font-size-chinese) !important;
    font-weight: 500 !important;
    text-align: left !important;
    line-height: 1.3 !important;
    display: block !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    width: auto !important;
    min-width: auto !important;
  }

  /* 卡片式：發音鈕 */
  .word-card-mobile-card-style .speak-btn {
    position: static !important;
    grid-column: unset !important;
    grid-row: unset !important;
    width: 32px !important;
    height: 32px !important;
    font-size: var(--font-size-1) !important;
    margin: 0 !important;
    justify-self: unset !important;
  }
}

/* 敬語頁樣式的播放按鈕（白色圓形背景 + 陰影） */
.word-card .speak-btn {
  background: white;
  color: var(--link-color, #3498db);
  border: 1px solid var(--card-border, #e0e0e0);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: var(--font-size-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  padding: 0;
}

.word-card .speak-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: var(--link-color, #3498db);
}

.word-card .speak-btn:active {
  transform: scale(0.95);
}

.word-card:hover {
  box-shadow: 0 4px 12px var(--shadow, rgba(0, 0, 0, 0.1));
  transform: translateY(-2px);
}

/* 收藏按鈕（只在桌機版顯示） */
.word-card-favorite-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-12);
  line-height: 1;
  padding: 0;
  transition: all 0.3s;
  z-index: 10;
  /* 未點亮狀態：使用 filter 讓星星變灰 */
  filter: grayscale(100%) opacity(0.5);
}

.word-card-favorite-btn:hover {
  transform: scale(1.2);
  filter: grayscale(0%) opacity(1);
}

.word-card-favorite-btn.favorited {
  /* 點亮狀態：保持原色（黃色） */
  filter: grayscale(0%) opacity(1);
}

.word-card-favorite-btn.favorited:hover {
  transform: scale(1.2);
  filter: grayscale(0%) opacity(1);
}

.word-card .word-list-header {
  margin-bottom: 0.75rem;
  display: block !important;
  text-align: left !important;
  flex-direction: unset !important;
  align-items: unset !important;
  gap: unset !important;
}

.word-card .word-meta {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-start !important;
}

/* 桌機版：稍微增加間距 */
@media (min-width: 768px) {
  .word-card .word-list-header {
    margin-bottom: 0.875rem;
  }

  .word-card .word-meta {
    margin-bottom: 0.625rem;
  }
}

.word-level {
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: var(--font-size-075);
  font-weight: bold;
  color: white;
}

.level-N5 {
  background: #27ae60;
}

.level-N4 {
  background: #9b59b6;
}

.level-N3 {
  background: #f39c12;
}

.level-N2 {
  background: #e67e22;
}

.level-N1 {
  background: #e74c3c;
}

.word-tag {
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: var(--font-size-07);
  background: #95a5a6;
  color: white;
  font-weight: 500;
  line-height: 1.2;
  height: auto;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
}

/* 桌機版：稍微大一點 */
@media (min-width: 768px) {
  .word-tag {
    padding: 0.25rem 0.7rem;
    font-size: var(--font-size-075);
    min-height: 24px;
  }
}

.word-tag.tag-pos {
  background: #3498db;
}

.word-japanese-container {
  margin-bottom: 0.375rem;
  text-align: center;
}

.word-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
}

.word-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

/* 桌機版：日文單獨居中，發音鈕緊貼在日文右邊 */
@media (min-width: 768px) {
  .word-japanese-container {
    margin-bottom: 0.5rem;
    text-align: center;
  }

  .word-content-wrapper {
    gap: 0;
    position: relative;
    display: block;
    text-align: center;
  }

  .word-text-group {
    gap: 0.2rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    /* 日文單獨居中 */
    position: relative;
  }

  /* 發音鈕緊貼在日文右邊，現在在 .word-text-group 裡面 */
  .word-text-group .speak-btn {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.5rem;
    /* 基於 .word-text-group 的右邊定位 */
  }

  /* hover 時保持垂直居中，同時放大 */
  .word-text-group .speak-btn:hover {
    transform: translateY(-50%) scale(1.1);
  }

  .word-text-group .speak-btn:active {
    transform: translateY(-50%) scale(0.95);
  }
}

.word-japanese {
  font-size: var(--font-size-15);
  font-weight: bold;
  color: var(--text-color, #2c3e50);
  margin: 0;
  text-align: center;
  line-height: 1.2;
}

.word-hiragana {
  font-size: var(--font-size-1);
  color: var(--text-color, #7f8c8d);
  opacity: 0.7;
  font-style: italic;
  text-align: center;
  line-height: 1.2;
}

/* 桌機版：稍微大一點 */
@media (min-width: 768px) {
  .word-japanese {
    font-size: var(--font-size-15);
    line-height: 1.3;
  }

  .word-hiragana {
    font-size: var(--font-size-1);
    line-height: 1.3;
  }
}

/* .speak-btn 樣式已移至 components/common/SpeakButton.css */

.word-translation {
  margin-top: 0.375rem;
  text-align: left;
}

.translation {
  color: var(--text-color, #2c3e50);
  font-size: var(--font-size-chinese);
  font-weight: 500;
  text-align: left;
  line-height: 1.3;
}

/* 桌機版：稍微增加間距，長翻譯截斷顯示 ... */
@media (min-width: 768px) {
  /* Grid 子項需 min-width: 0 才能讓 overflow/ellipsis 生效，避免長翻譯破版 */
  .words-grid .word-card,
  .words-grid .word-card-wrapper {
    min-width: 0;
  }

  .word-translation {
    margin-top: 0.5rem;
  }

  .word-card .word-translation {
    overflow: hidden;
    min-width: 0;
  }

  .word-card .translation {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    min-width: 0;
  }

  .translation {
    line-height: 1.4;
  }
}

/* 手機版：為 breadcrumb 和 h1 添加左邊距 */
@media (max-width: 767px) {
  .word-list .breadcrumb {
    padding-left: 1rem;
  }

  .word-list h1 {
    padding-left: 1rem;
  }

  /* 手機版隱藏返回按鈕（使用 navbar 上的返回鍵） */
  .word-list .mobile-back-btn {
    display: none !important;
  }
}

/* 手機響應式：標題已在上方處理，這裡移除重複規則 */

/* 空狀態（與測驗我的收藏一致） */
.word-list .empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-color, #333);
}

.word-list .empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.word-list .empty-state p {
  font-size: var(--font-size-11);
  margin: 0.5rem 0;
}

.word-list .empty-state .btn-back-to-vocabulary {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--link-color, #3498db);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-size: var(--font-size-1);
  transition: background 0.2s;
}

.word-list .empty-state .btn-back-to-vocabulary:hover {
  background: var(--link-hover, #2980b9);
}

/* 隱藏表格容器的橫向滾動條（用於動詞和形容詞活用表格） */
.hide-scrollbar {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari/Opera */
}/* 手機版卡片樣式 */
.verb-conjugation-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.verb-conjugation-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--card-border, #e0e0e0);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.verb-conjugation-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.verb-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--card-border, #e0e0e0);
}

.verb-type-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  background: var(--primary-color, #667eea);
  color: white;
  border-radius: 4px;
  font-size: var(--font-size-1);
  font-weight: bold;
  flex-shrink: 0;
}

.verb-card-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.verb-japanese {
  font-size: var(--font-size-12);
  font-weight: bold;
  color: var(--text-color, #333);
}

.verb-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.verb-hiragana {
  font-size: var(--font-size-1);
  color: var(--text-color-secondary, #666);
}

.verb-translation {
  color: var(--text-color-secondary, #999);
  font-size: var(--font-size-1);
}

.verb-conjugations-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.conjugation-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.conjugation-label {
  font-size: var(--font-size-085);
  font-weight: 600;
  color: var(--text-color, #333);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.conjugation-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.conjugation-form {
  font-size: var(--font-size-12);
  font-weight: bold;
  color: var(--text-color, #333);
  flex: 1;
  min-width: 0;
}

.speak-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-1);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--link-color);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.speak-btn:hover {
  transform: scale(1.1);
}

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

.verb-card-ad {
  background: var(--card-bg);
  border-radius: 8px;
}

/* 桌機版表格（與敬語頁相同的黑暗模式變數） */
.conj-table-header-row,
.conj-table-header-row th {
  background: var(--keigo-header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%)) !important;
}

.conj-table-row {
  background: var(--keigo-row-bg, #ffffff);
}

.conj-table-row:hover {
  background: var(--keigo-row-hover-bg, #f8f9ff);
  transform: scale(1.01);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.dark-mode .conj-table-row:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.conj-table-first-cell,
.conj-table-cell {
  border-bottom: 1px solid var(--keigo-row-border, #f0f0f0);
  background: inherit;
}

.conj-table-ad-row td {
  border-bottom: 1px solid var(--keigo-row-border, #f0f0f0);
  background: var(--keigo-ad-row-bg, #fafafa) !important;
}

/* 桌機版隱藏卡片 */
@media (min-width: 769px) {
  .verb-conjugation-cards {
    display: none;
  }
}

/* 彈出視窗動畫 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* 手機版卡片樣式 */
.adj-conjugation-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.adj-conjugation-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--card-border, #e0e0e0);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.adj-conjugation-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.adj-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--card-border, #e0e0e0);
}

.adj-type-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  background: var(--primary-color, #667eea);
  color: white;
  border-radius: 4px;
  font-size: var(--font-size-1);
  font-weight: bold;
  flex-shrink: 0;
}

.adj-card-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.adj-japanese {
  font-size: var(--font-size-12);
  font-weight: bold;
  color: var(--text-color, #333);
}

.adj-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.adj-hiragana {
  font-size: var(--font-size-1);
  color: var(--text-color-secondary, #666);
}

.adj-translation {
  color: var(--text-color-secondary, #999);
  font-size: var(--font-size-1);
}

.adj-conjugations-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.adj-card-ad {
  background: var(--card-bg);
  border-radius: 8px;
}

/* 共用樣式（與動詞活用相同） */
.conjugation-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.conjugation-label {
  font-size: var(--font-size-085);
  font-weight: 600;
  color: var(--text-color, #333);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.conjugation-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.conjugation-form {
  font-size: var(--font-size-12);
  font-weight: bold;
  color: var(--text-color, #333);
  flex: 1;
  min-width: 0;
}

.speak-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-1);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--link-color);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.speak-btn:hover {
  transform: scale(1.1);
}

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

/* 桌機版表格（與敬語頁相同的黑暗模式變數） */
.conj-table-header-row,
.conj-table-header-row th {
  background: var(--keigo-header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%)) !important;
}

.conj-table-row {
  background: var(--keigo-row-bg, #ffffff);
}

.conj-table-row:hover {
  background: var(--keigo-row-hover-bg, #f8f9ff);
  transform: scale(1.01);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.dark-mode .conj-table-row:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.conj-table-first-cell,
.conj-table-cell {
  border-bottom: 1px solid var(--keigo-row-border, #f0f0f0);
  background: inherit;
}

.conj-table-ad-row td {
  border-bottom: 1px solid var(--keigo-row-border, #f0f0f0);
  background: var(--keigo-ad-row-bg, #fafafa) !important;
}

/* 桌機版隱藏卡片 */
@media (min-width: 769px) {
  .adj-conjugation-cards {
    display: none;
  }
}

/* 彈出視窗動畫 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.word-vocabulary-menu-page {
  text-align: center;
  padding: 4rem 0;
}

.word-vocabulary-menu-page h1 {
  font-size: var(--font-size-3);
  margin-bottom: 3rem;
  color: var(--text-color);
}

.vocabulary-options-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* 桌機：四個一行 */
@media (min-width: 769px) {
  .vocabulary-options-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.vocabulary-option-card {
  padding: 2rem;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  color: var(--text-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.vocabulary-option-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.vocabulary-option-card:hover::before {
  opacity: 1;
}

.vocabulary-option-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.option-icon {
  font-size: 3rem;
  line-height: 1;
  transition: transform 0.3s;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  flex-shrink: 0;
}

.vocabulary-option-card:hover .option-icon {
  transform: scale(1.1) rotate(5deg);
}

/* 根据等级设置卡片颜色 */
.vocabulary-option-card.level-N5 {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border-color: #27ae60;
  color: white;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
}

.vocabulary-option-card.level-N5:hover {
  box-shadow: 0 8px 24px rgba(39, 174, 96, 0.3);
}

.vocabulary-option-card.level-N4 {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  border-color: #9b59b6;
  color: white;
  box-shadow: 0 4px 12px rgba(155, 89, 182, 0.2);
}

.vocabulary-option-card.level-N4:hover {
  box-shadow: 0 8px 24px rgba(155, 89, 182, 0.3);
}

.vocabulary-option-card.level-N3 {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  border-color: #f39c12;
  color: white;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.2);
}

.vocabulary-option-card.level-N3:hover {
  box-shadow: 0 8px 24px rgba(243, 156, 18, 0.3);
}

.vocabulary-option-card.level-N2 {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  border-color: #e67e22;
  color: white;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.2);
}

.vocabulary-option-card.level-N2:hover {
  box-shadow: 0 8px 24px rgba(230, 126, 34, 0.3);
}

.vocabulary-option-card.level-N1 {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-color: #e74c3c;
  color: white;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

.vocabulary-option-card.level-N1:hover {
  box-shadow: 0 8px 24px rgba(231, 76, 60, 0.3);
}

.option-title-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.option-title {
  font-size: var(--font-size-15);
  font-weight: bold;
  line-height: var(--line-height-base);
  text-align: left;
  transition: transform 0.3s;
  white-space: nowrap;
}

.option-title-sub {
  font-size: var(--font-size-09);
  opacity: 0.9;
  line-height: 1.3;
  text-align: left;
}

.vocabulary-option-card:hover .option-title {
  transform: translateX(2px);
}

/* 手机端样式 */
@media (max-width: 768px) {

  /* 抵消 main-content 的 padding-top，减少顶部间距 */
  .main-content>.word-vocabulary-menu-page {
    margin-top: 0px !important;
    /* 直接抵消 main-content 的 padding-top (30px) */
  }

  .word-vocabulary-menu-page {
    padding: 1rem 0 !important;
    /* 顶部间距：砍一半 */
    padding-top: 2rem !important;
    /* 手机端顶部间距：砍一半 */
  }

  /* 减少 Breadcrumb 的间距 */
  .word-vocabulary-menu-page .breadcrumb {
    margin-bottom: 1rem !important;
    /* 砍一半 */
    padding: 0.5rem 0 !important;
    /* 砍一半 */
  }

  .word-vocabulary-menu-page h1 {
    font-size: var(--font-size-2);
    margin-bottom: 1rem;
  }

  .vocabulary-options-cards {
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
  }

  .vocabulary-option-card {
    padding: 1.5rem;
    gap: 0.75rem;
  }

  .option-icon {
    font-size: 2.5rem;
  }

  .option-title {
    font-size: var(--font-size-125);
    text-align: left;
  }

  .option-title-sub {
    font-size: var(--font-size-085);
  }
}.keigo-card-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  background: var(--bg-color);
  min-height: 100vh;
}

.keigo-card-list h1 {
  margin-bottom: 1.5rem;
  color: var(--text-color);
  font-size: var(--font-size-175);
  font-weight: 600;
  padding: 0 0.5rem;
}

/* 返回按鈕 */
.mobile-back-btn {
  background: #9e9e9e;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 1rem;
  display: none; /* 預設隱藏，只在手機版顯示 */
}

.mobile-back-btn:hover {
  background: #757575;
}

.keigo-cards-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.keigo-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.keigo-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.keigo-card__translation {
  font-size: var(--font-size-11);
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--card-border);
}

.keigo-card__section {
  margin-bottom: 1rem;
}

.keigo-card__section:last-child {
  margin-bottom: 0;
}

.keigo-card__label {
  font-size: var(--font-size-085);
  font-weight: 600;
  color: var(--text-color);
  opacity: 0.7;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.keigo-card__content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.japanese-text {
  display: inline-block;
  line-height: 2;
  font-size: var(--font-size-11);
  flex: 1;
  min-width: 0;
}

/* Ruby 標籤樣式 - 假名顯示在漢字上方（像課本一樣）；用 .keigo-card 提高優先級，避免被後載入的 .japanese-text rt 覆蓋 */
.keigo-card .japanese-text ruby {
  ruby-align: center;
  ruby-overhang: auto;
}

.keigo-card .japanese-text rt {
  font-size: 0.6em;
  font-weight: 400;
  opacity: 0.85;
  line-height: 1.2;
}

.no-keigo {
  color: var(--no-keigo-color, #999);
  font-style: italic;
  opacity: 0.7;
  font-weight: 400;
}

.speak-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-1);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--link-color);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.speak-btn:hover {
  transform: scale(1.1);
}

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

.keigo-card__ad {
  padding: 1rem;
  background: var(--card-bg);
  border-radius: 8px;
  margin: 0.5rem 0;
}

/* 手机端隐藏标题 */
@media (max-width: 768px) {
  .keigo-card-list h1 {
    display: none !important;
  }

  /* 手機版隱藏返回按鈕（使用 navbar 上的返回鍵） */
  .mobile-back-btn {
    display: none !important;
  }
}

/* 桌機版隱藏卡片 */
@media (min-width: 769px) {
  .keigo-card-list {
    display: none;
  }
}

/* 與易混淆詞列表頁一致：不另加 padding，由 PageWithSidebar 的 .page-content 提供 */
.keigo-list {
  max-width: 1200px;
  margin: 0 auto;
}

.keigo-list .breadcrumb {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.keigo-list h1 {
  margin-bottom: 1rem;
  color: var(--text-color, #2c3e50);
  font-size: var(--font-size-15);
  font-weight: 600;
}

@media (min-width: 768px) {
  .keigo-list h1 {
    font-size: var(--font-size-175);
    margin-bottom: 1.25rem;
  }
}


.keigo-table-container {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 1.5rem;
  padding: 1rem;
  overflow-x: auto;
}

.keigo-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--keigo-table-border, #e0e0e0);
}

.keigo-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-1);
  white-space: nowrap;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.keigo-table tbody tr {
  border-bottom: 1px solid var(--keigo-row-border, #f0f0f0);
  transition: background-color 0.2s;
}

.keigo-table tbody tr:last-child {
  border-bottom: none;
}

.keigo-table td {
  padding: 1rem;
  color: var(--text-color);
  font-size: var(--font-size-1);
  background: inherit;
  vertical-align: top;
  border-bottom: 1px solid var(--keigo-row-border, #f0f0f0);
}

/* 表格列：底色與 hover（支援黑暗模式） */
.keigo-table-row {
  background: var(--keigo-row-bg, #ffffff);
}

.keigo-table-row:hover {
  background: var(--keigo-row-hover-bg, #f8f9ff);
  transform: scale(1.01);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.dark-mode .keigo-table-row:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 廣告列 */
.keigo-table-ad-row td {
  border-bottom: 1px solid var(--keigo-row-border, #f0f0f0);
  background: var(--keigo-ad-row-bg, #fafafa) !important;
}

/* 垂直線由右邊的欄位畫左邊框，不受 rowspan 影響 */
.keigo-table td+td,
.keigo-table th+th {
  border-left: 1px solid var(--keigo-table-border, #e0e0e0);
}

/* 表頭的垂直線使用半透明白色 */
.keigo-table th+th {
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.japanese-text {
  display: inline-block;
  line-height: 2;
  font-size: var(--font-size-11);
}

/* Ruby 標籤樣式 - 假名顯示在漢字上方；用 .keigo-list 提高優先級，避免被其他 .japanese-text rt 覆蓋 */
.keigo-list .japanese-text ruby {
  ruby-align: center;
  ruby-overhang: auto;
}

.keigo-list .japanese-text rt {
  font-size: 0.6em;
  font-weight: 400;
  opacity: 0.85;
  line-height: 1.2;
}

.no-keigo {
  color: var(--no-keigo-color, #999);
  font-style: italic;
  opacity: 0.7;
  font-weight: 400;
}

/* .speak-btn 樣式已移至 components/common/SpeakButton.css */

/* 隱藏滾動條樣式 */
.keigo-table-container::-webkit-scrollbar {
  display: none;
}

.keigo-table-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 手機版隱藏表格 */
@media (max-width: 768px) {
  .keigo-list {
    display: none;
  }
}.basic-multilang-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

/* 手機版：方位、星期、顏色等一律一行兩格 */
@media (max-width: 768px) {
  .basic-multilang-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .basic-multilang-list .basic-multilang-card {
    min-width: 0;
  }
}

.basic-multilang-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s;
}

.basic-multilang-card .basic-level-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: #fff;
  line-height: 1.2;
}

.basic-multilang-card .basic-level-badge.basic-level-n5 {
  background: #27ae60;
}

.basic-multilang-card .basic-level-badge.basic-level-n4 {
  background: #3498db;
}

.basic-multilang-card .basic-level-badge.basic-level-n3 {
  background: #e67e22;
}

.basic-multilang-card:hover {
  box-shadow: 0 4px 12px var(--shadow);
  transform: translateY(-2px);
  border-color: #3498db;
}

.basic-multilang-card .direction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--card-border);
}

.basic-multilang-card .basic-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

.basic-multilang-card .direction-header .japanese {
  font-size: var(--font-size-15);
  font-weight: bold;
  color: var(--text-color);
}

.basic-multilang-card .direction-header .hiragana-wrap {
  display: block;
}

.basic-multilang-card .direction-header .hiragana {
  font-size: var(--font-size-11);
  color: var(--text-color);
  opacity: 0.7;
  font-style: italic;
}

.basic-multilang-card .direction-header .basic-speak-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.basic-multilang-card .basic-speak-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.basic-multilang-card .direction-content .translation {
  color: var(--text-color);
  font-size: var(--font-size-chinese);
  font-weight: 500;
  line-height: var(--line-height-base);
}

/* 特殊讀音：只強調讀音那一行 */
.basic-multilang-card .hiragana-wrap.special-reading {
  padding: 0.25rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 4px;
  background: var(--special-reading-bg, rgb(210 44 156 / 8%));
}/* 問答區塊：問答排版型式（共用於 BasicNumReadingList 與 week 等） */
.basic-qa-block {
  margin-top: 2.5rem;
}

/* 桌機：多個問答時一行兩 card，只有一個問答時一行一 card */
.basic-qa-block:not(.basic-qa-block--single) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.basic-qa-block--single .basic-qa-pair {
  margin-bottom: 0;
}

.basic-qa-block-title {
  grid-column: 1 / -1;
  font-size: var(--font-size-125);
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--card-border);
}

.basic-qa-pair {
  margin-bottom: 0;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.basic-qa-pair:last-child {
  margin-bottom: 0;
}

/* 手機：問答區塊一律一行一 card（僅問答區，不影響上方單字的一行兩 card） */
@media (max-width: 768px) {

  .basic-qa-block,
  .basic-qa-block:not(.basic-qa-block--single) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .basic-qa-pair {
    margin-bottom: 0;
  }

  .basic-qa-pair:last-child {
    margin-bottom: 0;
  }
}

/* 問句區：左側色條 + 問標籤 + 漢字／讀音上下排 */
.basic-qa-question-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(to right, rgba(52, 152, 219, 0.08), transparent);
  border-bottom: 1px solid var(--card-border);
}

.basic-qa-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  font-size: var(--font-size-095);
  font-weight: 700;
}

.basic-qa-tag-q {
  background: #3498db;
  color: #fff;
}

.basic-qa-tag-a {
  background: #27ae60;
  color: #fff;
}

.basic-qa-tag-a--no {
  background: #e74c3c;
}

.basic-qa-tag-a--neutral {
  background: #9e9e9e;
}

.basic-qa-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.basic-qa-text-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.basic-qa-question-box .basic-qa-content .basic-qa-j,
.basic-qa-answer-box .basic-qa-content .basic-qa-j {
  font-size: var(--font-size-11);
  font-weight: 600;
  color: var(--text-color);
}

.basic-qa-tc {
  font-size: var(--font-size-095);
  color: var(--text-color);
  opacity: 0.9;
  margin-top: 0.25rem;
}

/* 有 ruby 時日文區 line-height 較大，縮小 tc 與上方距離避免整體過鬆 */
.basic-qa-text-group--ruby .basic-qa-tc {
  margin-top: -0.2rem;
}

/* ruby：漢字上標讀音（daily-life 等使用 renderJapaneseWithRuby 時） */
.basic-qa-block .basic-qa-j-ruby ruby {
  ruby-align: center;
  ruby-overhang: auto;
}

/* 長句在 card 內自動換成兩行時，兩行之間的垂直間距（.basic-qa-j-ruby 這塊） */
.basic-qa-block .basic-qa-j-ruby {
  line-height: 2.1;
}

.basic-qa-block .basic-qa-j-ruby rt {
  font-size: 0.6em;
  opacity: 0.85;
}

.basic-qa-block .basic-qa-reading {
  font-size: 0.95em;
  font-weight: normal;
  color: var(--text-secondary, #666);
  margin-top: 0.25rem;
}

.basic-qa-question-box .basic-qa-content .basic-qa-h,
.basic-qa-answer-box .basic-qa-content .basic-qa-h {
  font-size: var(--font-size-base);
  color: var(--text-color);
  opacity: 0.8;
  font-style: italic;
  line-height: 1.4;
}

.basic-qa-block .basic-speak-btn {
  flex-shrink: 0;
  margin-left: auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.basic-qa-block .basic-speak-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* 答句區：可多則，每則獨立一行 */
.basic-qa-answers {
  display: flex;
  flex-direction: column;
}

.basic-qa-answer-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(to right, rgba(39, 174, 96, 0.06), transparent);
  border-bottom: 1px dashed var(--card-border);
}

.basic-qa-answer-box:last-child {
  border-bottom: none;
}

/* 答句語意類型：中性(灰) / yes(綠) / no(紅) */
.basic-qa-answer-box--neutral {
  background: linear-gradient(to right, rgba(120, 120, 120, 0.08), transparent);
  border-left: 3px solid #9e9e9e;
}

.basic-qa-answer-box--yes {
  background: linear-gradient(to right, rgba(39, 174, 96, 0.12), transparent);
  border-left: 3px solid #27ae60;
}

.basic-qa-answer-box--no {
  background: linear-gradient(to right, rgba(231, 76, 60, 0.1), transparent);
  border-left: 3px solid #e74c3c;
}

/* 答句下方：可替換的單字（句型不變、只換詞） */
.basic-qa-answer-box .basic-qa-content {
  flex-wrap: wrap;
}

.basic-qa-replaceable {
  flex: 1 1 100%;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--card-border);
}

.basic-qa-replaceable-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.basic-qa-replaceable-item {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.25rem 0.5rem;
  font-size: var(--font-size-095);
}

.basic-qa-replaceable-item .basic-qa-replaceable-j-wrap {
  display: inline-flex;
  align-items: flex-end;
  line-height: 1.3;
}

.basic-qa-replaceable-j {
  font-weight: 600;
  color: var(--text-color);
}

.basic-qa-replaceable-j rt {
  font-size: 0.6em;
}

.basic-qa-replaceable-h {
  font-size: 0.9em;
  color: var(--text-secondary, #666);
}

.basic-qa-replaceable-tc {
  color: var(--text-color);
  opacity: 0.9;
  line-height: 1.2;
}

.basic-qa-replaceable-speak {
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
}.basic-num-reading-list .basic-num-reading-section {
  margin-bottom: 3rem;
}

.basic-num-reading-list .number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.basic-num-reading-list .number-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: left;
  transition: all 0.3s;
}

.basic-num-reading-list .number-card .basic-level-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: #fff;
  line-height: 1.2;
}

.basic-num-reading-list .number-card .basic-level-badge.basic-level-n5 {
  background: #27ae60;
}

.basic-num-reading-list .number-card:hover {
  box-shadow: 0 4px 12px var(--shadow);
  transform: translateY(-2px);
  border-color: #f39c12;
}

/* 與星期 card 一致：字靠左、發音鍵靠右 */
.basic-num-reading-list .number-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.basic-num-reading-list .number-card .basic-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

/* 數字標籤：靠左、寬度隨數字 */
.basic-num-reading-list .number-label {
  display: inline-block;
  width: fit-content;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: var(--font-size-075);
  font-weight: 600;
  background: #939393;
  color: #fff;
  line-height: 1.2;
}

.basic-num-reading-list .number-card .japanese {
  font-size: var(--font-size-15);
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}

.basic-num-reading-list .number-card .hiragana-row {
  display: block;
  text-align: left;
}

.basic-num-reading-list .number-card .hiragana {
  font-size: var(--font-size-11);
  color: var(--text-color);
  opacity: 0.7;
  font-style: italic;
  line-height: var(--line-height-tight);
}

/* japanese-wrap 內：日文靠左、發音鍵靠右 */
.basic-num-reading-list .number-card .japanese-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 0.25rem;
}

.basic-num-reading-list .number-card .japanese-wrap .japanese {
  margin-bottom: 0;
  min-width: 0;
}

.basic-num-reading-list .number-card .japanese-wrap .basic-speak-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.basic-num-reading-list .number-card .japanese-wrap .basic-speak-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* 特殊讀音：只強調讀音那一行 */
.basic-num-reading-list .number-card .hiragana-row.special-reading {
  margin: 0 -0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: var(--special-reading-bg, rgb(210 44 156 / 8%));
}

/* 手機版：數字／讀音小格一行兩格 */
@media (max-width: 768px) {
  .basic-num-reading-list .number-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}/* 桌機：一行兩個 card */
.basic-counter-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* 手機：維持不變，一行一個 card */
@media (max-width: 768px) {
  .basic-counter-list {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
  }
}

.basic-counter-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s;
}

.basic-counter-card .basic-level-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: #fff;
  line-height: 1.2;
}

.basic-counter-card .basic-level-badge.basic-level-n5 {
  background: #27ae60;
}

.basic-counter-card .basic-level-badge.basic-level-n4 {
  background: #3498db;
}

.basic-counter-card .basic-level-badge.basic-level-n3 {
  background: #e67e22;
}

.basic-counter-card:hover {
  box-shadow: 0 4px 12px var(--shadow);
  border-color: #f39c12;
}

.basic-counter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--card-border);
}

.basic-counter-header .basic-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

.basic-counter-header .basic-speak-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.basic-counter-header .basic-speak-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.basic-counter-header .counter-kanji {
  font-size: var(--font-size-15);
  font-weight: bold;
  color: var(--text-color);
}

.basic-counter-header .counter-reading {
  font-size: var(--font-size-11);
  color: var(--text-color);
  opacity: 0.7;
  font-style: italic;
}

.basic-counter-desc {
  font-size: var(--font-size-095);
  color: var(--text-color);
  margin-bottom: 1rem;
  line-height: var(--line-height-base);
}

.basic-counter-forms {
  overflow-x: auto;
}

.counter-forms-table {
  width: 100%;
  min-width: 240px;
  border-collapse: collapse;
  font-size: var(--font-size-095);
}

.counter-forms-table th,
.counter-forms-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
}

.counter-forms-table th {
  font-weight: 600;
  color: var(--text-color);
  background: var(--hover-bg, rgba(0, 0, 0, 0.03));
}

.counter-forms-table .japanese {
  font-weight: 500;
}

/* 讀音欄：只放文字，不包發音鈕 */
.counter-forms-table .hiragana-cell {
  min-width: 0;
}

/* 發音鈕獨立一欄，垂直對齊 */
.counter-forms-table .counter-speak-col {
  width: 2.5rem;
  min-width: 2.5rem;
  padding-left: 0.25rem;
  padding-right: 0.5rem;
}

.counter-forms-table .counter-speak-cell {
  width: 2.5rem;
  min-width: 2.5rem;
  padding-left: 0.25rem;
  padding-right: 0.5rem;
  vertical-align: middle;
}

.counter-forms-table .hiragana-cell .basic-text-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.counter-forms-table .hiragana {
  font-style: italic;
  opacity: 0.85;
}

.counter-forms-table .basic-speak-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.counter-forms-table .basic-speak-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 特殊讀音：只強調讀音那幾個字，不整欄 */
.counter-forms-table .hiragana-cell .basic-text-group.special-reading {
  display: inline-flex;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: var(--special-reading-bg, rgb(210 44 156 / 8%));
}/* 桌機：一行兩 card（不掛 words-grid，避免被 BasicList 的 auto-fill 覆蓋） */
.basic-giving-receiving-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

/* 廣告插槽：橫跨整行（桌機每兩行=每四 card 插一個） */
.giving-receiving-ad-slot {
  grid-column: 1 / -1;
}

/* 手機：一行一 card */
@media (max-width: 767px) {
  .basic-giving-receiving-list {
    grid-template-columns: 1fr;
  }

  .basic-giving-receiving-card .basic-text-group,
  .basic-giving-receiving-card .direction-content .translation {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

.basic-giving-receiving-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 1.25rem;
  transition: all 0.3s;
}

.basic-giving-receiving-card:hover {
  box-shadow: 0 4px 12px var(--shadow);
  transform: translateY(-2px);
  border-color: #3498db;
}

/* 授受頁：N5 標籤在「單字」左側（行內） */
.giving-receiving-label-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.giving-receiving-label-row .basic-level-badge {
  position: static;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  color: #fff;
  line-height: 1.2;
  flex-shrink: 0;
}

.giving-receiving-label-row .basic-level-badge.basic-level-n5 {
  background: #27ae60;
}

.giving-receiving-label-row .basic-level-badge.basic-level-n4 {
  background: #3498db;
}

.giving-receiving-label-row .basic-level-badge.basic-level-n3 {
  background: #e67e22;
}

/* 單字區：主題強調 — 較大字、深底、左側色條 */
.basic-giving-receiving-card .giving-receiving-row {
  margin-bottom: 0;
  padding: 0.75rem 0 0.75rem 0.75rem;
  border-radius: 6px;
}

/* 區塊小標籤（單字 / 例句） */
.giving-receiving-block-label {
  display: block;
  font-size: var(--font-size-075);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-color);
  opacity: 0.7;
}

.giving-receiving-verb .giving-receiving-block-label {
  color: #2980b9;
  opacity: 0.95;
}

.giving-receiving-example .giving-receiving-block-label {
  opacity: 0.55;
}

.basic-giving-receiving-card .giving-receiving-verb {
  background: rgba(52, 152, 219, 0.1);
  border-left: 4px solid #2980b9;
  padding-left: calc(0.75rem + 4px);
  margin: -0.75rem -0.75rem 0 -0.75rem;
  margin-bottom: 0;
  padding: 0.75rem 0.75rem 0.75rem calc(0.75rem + 4px);
  border-radius: 0 0 0 6px;
}

.basic-giving-receiving-card .giving-receiving-verb .direction-header .japanese {
  font-size: var(--font-size-175);
  font-weight: 700;
  color: var(--text-color);
}

.basic-giving-receiving-card .giving-receiving-verb .direction-header .hiragana {
  font-size: var(--font-size-11);
}

.basic-giving-receiving-card .giving-receiving-verb .direction-content .translation {
  font-size: var(--font-size-chinese);
  font-weight: 600;
}

/* 例句區：輔助 — 小字、左側色條（學 verb 樣式，無底） */
.basic-giving-receiving-card .giving-receiving-example {
  margin-bottom: 0;
  border-left: 4px solid #7fb3d5;
  padding-left: calc(1.5rem + 4px);
  margin-left: -0.75rem;
  border-radius: 0 0 0 6px;
}

.basic-giving-receiving-card .giving-receiving-example .direction-header {
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed var(--card-border);
}

.basic-giving-receiving-card .giving-receiving-example .direction-header .japanese,
.basic-giving-receiving-card .giving-receiving-example .direction-header .hiragana {
  white-space: pre-line;
}

.basic-giving-receiving-card .giving-receiving-example .direction-header .japanese {
  font-size: var(--font-size-12);
  font-weight: 500;
  color: var(--text-color);
  opacity: 0.88;
}

/* 例句：漢字上標假名（與 WordDetail 例句一致） */
.basic-giving-receiving-card .giving-receiving-example .japanese-ruby ruby {
  ruby-align: center;
  ruby-overhang: auto;
}

.basic-giving-receiving-card .giving-receiving-example .japanese-ruby rt {
  font-size: 0.6em;
  opacity: 0.85;
}

.basic-giving-receiving-card .giving-receiving-example .direction-header .hiragana {
  font-size: var(--font-size-085);
  opacity: 0.75;
}

.basic-giving-receiving-card .giving-receiving-example .direction-content .translation {
  font-size: var(--font-size-09);
  font-weight: 400;
  opacity: 0.85;
}

.basic-giving-receiving-card .direction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.basic-giving-receiving-card .basic-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.basic-giving-receiving-card .direction-header .japanese {
  font-size: var(--font-size-15);
  font-weight: bold;
  color: var(--text-color);
}

.basic-giving-receiving-card .direction-header .hiragana-wrap {
  display: block;
}

.basic-giving-receiving-card .direction-header .hiragana {
  font-size: var(--font-size-095);
  color: var(--text-color);
  opacity: 0.7;
  font-style: italic;
}

.basic-giving-receiving-card .direction-header .basic-speak-btn {
  flex-shrink: 0;
  margin-left: auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.basic-giving-receiving-card .basic-speak-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.basic-giving-receiving-card .direction-content .translation {
  color: var(--text-color);
  font-size: var(--font-size-chinese);
  font-weight: 500;
  line-height: var(--line-height-base);
  white-space: pre-line;
}

.basic-giving-receiving-card .hiragana-wrap.special-reading {
  padding: 0.25rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 4px;
  background: var(--special-reading-bg, rgb(210 44 156 / 8%));
}

/* 單字與例句之間分隔線 */
.giving-receiving-divider {
  height: 2px;
  background: linear-gradient(to right, var(--card-border), rgba(52, 152, 219, 0.2), var(--card-border));
  margin: 0.5rem 0.75rem;
  border-radius: 1px;
}/* 與情境頁 .word-list 一致：max-width、margin、無額外 padding */
.basic-list {
  max-width: 1200px;
  margin: 0 auto;
}

/* 壓縮頂部區域：麵包屑（與情境頁一致） */
.basic-list .breadcrumb {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.basic-list .breadcrumb-item {
  font-size: var(--font-size-085);
}

@media (min-width: 768px) {
  .basic-list .breadcrumb {
    margin-bottom: 0.875rem;
    padding: 0.625rem 0;
  }

  .basic-list .breadcrumb-item {
    font-size: var(--font-size-0875);
  }
}

/* 返回按鈕（與情境頁 .word-list .mobile-back-btn 一致） */
.basic-list .mobile-back-btn {
  background: #9e9e9e;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 1rem;
  display: none;
}

.basic-list .mobile-back-btn:hover {
  background: #757575;
}

/* 標題（與情境頁 .word-list h1 一致） */
.basic-list h1 {
  margin-bottom: 1rem;
  color: var(--text-color, #2c3e50);
  font-size: var(--font-size-15);
}

@media (min-width: 768px) {
  .basic-list h1 {
    font-size: var(--font-size-175);
    margin-bottom: 1.25rem;
  }
}

.basic-list h2 {
  font-size: var(--font-size-15);
  color: var(--text-color);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--card-border);
}

.section-desc {
  color: var(--text-color);
  opacity: 0.8;
  font-size: var(--font-size-095);
  margin-bottom: 1.5rem;
  font-style: italic;
}

/* 分類篩選（與情境頁 .filters 的 margin 一致） */
.basic-list .category-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .basic-list .category-filters {
    margin-bottom: 1.25rem;
  }
}

.category-btn {
  padding: 0.5rem 1rem;
  border: 2px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.category-btn:hover {
  border-color: #f39c12;
  background: var(--card-bg);
}

.category-btn.active {
  background: #f39c12;
  color: white;
  border-color: #f39c12;
}

.clear-btn {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
}

.clear-btn:hover {
  background: #c0392b;
  border-color: #c0392b;
}

.loading,
.error {
  text-align: center;
  padding: 2rem;
  font-size: var(--font-size-12);
  color: var(--text-color);
}

.error {
  color: #e74c3c;
}

/* 與情境頁一致：filters 已有 margin-bottom，內容區不另加 margin-top */
.basic-list .content-area {
  margin-top: 0;
}

.basic-list .sub-section {
  margin-bottom: 1.5rem;
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.number-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s;
}

.number-card:hover {
  box-shadow: 0 4px 12px var(--shadow);
  transform: translateY(-2px);
  border-color: #f39c12;
}

.number-label {
  font-size: var(--font-size-11);
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 0.5rem;
}

.number-card .japanese {
  font-size: var(--font-size-13);
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}

.number-card .hiragana {
  font-size: var(--font-size-base);
  color: var(--text-color);
  opacity: 0.7;
  font-style: italic;
  margin-bottom: 0.5rem;
  line-height: var(--line-height-tight);
}

.note {
  font-size: var(--font-size-085);
  color: var(--text-color);
  opacity: 0.6;
  font-style: italic;
}

.note.special {
  color: #e67e22;
  font-weight: 500;
  opacity: 1;
}

.words-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.75rem;
}

/* 授受動詞：桌機一行兩 card（.words-grid 會變成多欄，此處覆寫） */
.basic-list .basic-giving-receiving-list {
  grid-template-columns: repeat(2, 1fr);
}

.direction-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s;
}

.direction-card:hover {
  box-shadow: 0 4px 12px var(--shadow);
  transform: translateY(-2px);
  border-color: #3498db;
}

.direction-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--card-border);
}

.direction-header .japanese {
  font-size: var(--font-size-15);
  font-weight: bold;
  color: var(--text-color);
}

.direction-header .hiragana {
  font-size: var(--font-size-11);
  color: var(--text-color);
  opacity: 0.7;
  font-style: italic;
}

.direction-header .accent {
  font-size: var(--font-size-09);
  color: #e67e22;
  font-weight: bold;
  background: #fef5e7;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.direction-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.direction-content .translation {
  color: var(--text-color);
  font-size: var(--font-size-chinese);
  font-weight: 500;
  line-height: var(--line-height-base);
}

.direction-content .note {
  font-size: var(--font-size-09);
  color: var(--text-color);
  opacity: 0.6;
  font-style: italic;
}

/* 手機版篩選彈窗：與情境頁一致，選項垂直排列、一行一個 */
.basic-list .filter-modal .basic-filter-modal-content .category-filters {
  flex-direction: column;
  margin-bottom: 0;
  gap: 0.75rem;
}

.basic-list .filter-modal .basic-filter-modal-content .category-btn {
  width: 100%;
  padding: 0.75rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--card-border, #e0e0e0);
}

.basic-list .filter-modal .basic-filter-modal-content .category-btn.active {
  background: #42a5f5;
  color: #fff;
  border-color: #42a5f5;
}

/* 手機版：與情境頁一致 — 隱藏大標題「基礎」、標題左縮排、隱藏返回鈕、grid 一行兩格 */
@media (max-width: 768px) {
  .basic-list .breadcrumb {
    padding-left: 1rem;
  }

  /* 手機不顯示大標題「基礎」 */
  .basic-list h1 {
    display: none;
  }

  .basic-list .mobile-back-btn {
    display: none !important;
  }

  /* 方位、星期、顏色等：手機版一行兩 card */
  .basic-list .words-grid,
  .basic-list .basic-multilang-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 授受動詞：手機版一行一 card */
  .basic-list .basic-giving-receiving-list {
    grid-template-columns: 1fr;
  }
}/* 與易混淆詞列表頁一致：不另加 padding，由 PageWithSidebar 的 .page-content 提供 */
.conversation-list {
  max-width: 1200px;
  margin: 0 auto;
}

.conversation-list .breadcrumb {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.conversation-list h1 {
  margin-bottom: 1rem;
  color: var(--text-color, #2c3e50);
  font-size: var(--font-size-15);
  font-weight: 600;
}

@media (min-width: 768px) {
  .conversation-list h1 {
    font-size: var(--font-size-175);
    margin-bottom: 1.25rem;
  }
}

/* 手機版隱藏標題 */
@media (max-width: 768px) {
  .conversation-list h1 {
    display: none !important;
  }
}

/* 返回按鈕 */
.mobile-back-btn {
  background: #9e9e9e;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 1rem;
  display: none; /* 預設隱藏，只在手機版顯示 */
}

.mobile-back-btn:hover {
  background: #757575;
}

.conversation-list h2 {
  font-size: var(--font-size-15);
  color: var(--text-color);
  margin-bottom: 1.5rem;
  margin-top: 3rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--card-border);
}

.conversation-list h2:first-of-type {
  margin-top: 0;
}

.conversation-section {
  margin-bottom: 3rem;
}

.level-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.level-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-size-1);
  transition: all 0.3s;
  text-transform: uppercase;
}

.level-btn:hover {
  border-color: #9b59b6;
  background: var(--card-bg);
  transform: translateY(-2px);
}

.level-btn.active {
  background: #9b59b6;
  color: white;
  border-color: #9b59b6;
}

.category-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.category-btn {
  padding: 0.5rem 1rem;
  border: 2px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.category-btn:hover {
  border-color: #9b59b6;
  background: var(--card-bg);
}

.category-btn.active {
  background: #9b59b6;
  color: white;
  border-color: #9b59b6;
}

.clear-btn {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
}

.clear-btn:hover {
  background: #c0392b;
  border-color: #c0392b;
}

.loading,
.error {
  text-align: center;
  padding: 2rem;
  font-size: var(--font-size-12);
  color: var(--text-color);
}

.error {
  color: #e74c3c;
}

.conversation-notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  border-left: 4px solid #ffc107;
}

.conversation-notice .notice-icon {
  font-size: var(--font-size-15);
  flex-shrink: 0;
  line-height: 1.2;
}

.conversation-notice .notice-text {
  color: #856404;
  font-size: var(--font-size-095);
  line-height: 1.6;
  flex: 1;
}

.conversation-notice .notice-text strong {
  color: #856404;
  font-weight: 600;
}

.content-area {
  margin-top: 2rem;
}

.conversation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 2rem;
}

/* 手機版內容包裝 */
.conversation-content-mobile {
  padding: 0;
}

.conversation-content-mobile h1 {
  margin-bottom: 2rem;
  color: var(--text-color);
  font-size: var(--font-size-2);
  font-weight: 600;
  display: none !important; /* 手机端隐藏标题 */
}

.conversation-content-mobile h2 {
  font-size: var(--font-size-15);
  color: var(--text-color);
  margin-bottom: 1.5rem;
  margin-top: 3rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--card-border);
}

.conversation-content-mobile h2:first-of-type {
  margin-top: 0;
}

/* 手機版調整 grid，避免卡片超出容器 */
@media (max-width: 768px) {
  .conversation-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* 手機版隱藏返回按鈕（使用 navbar 上的返回鍵） */
  .mobile-back-btn {
    display: none;
  }
}

.conversation-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 1.75rem;
  transition: all 0.3s;
}

.conversation-card:hover {
  box-shadow: 0 4px 12px var(--shadow);
  transform: translateY(-2px);
  border-color: #9b59b6;
}

.conversation-japanese {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--card-border);
}

.japanese-text-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.japanese-text {
  font-size: var(--font-size-13);
  font-weight: bold;
  color: var(--text-color);
  line-height: var(--line-height-relaxed);
}

/* 假名標在漢字上（與例句／文法頁 j、h 比例一致） */
.conversation-card .japanese-text ruby {
  ruby-align: center;
  ruby-overhang: auto;
}

.conversation-card .japanese-text rt {
  font-size: 0.6em;
  opacity: 0.85;
}

/* 無 ruby 時下一行顯示讀音 (h)，與 Word Detail 例句一致 */
.conversation-reading-line {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.95em;
  font-weight: normal;
  color: var(--text-secondary, #666);
}

/* 發音鈕：與敬語頁相同樣式 */
.conversation-card .speak-btn {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--link-color);
  padding: 0.25rem;
  transition: transform 0.2s ease;
}

.conversation-card .speak-btn:hover {
  transform: scale(1.1);
}

.conversation-card .speak-btn:active {
  transform: scale(0.95);
}

.conversation-translation {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.translation-text {
  color: var(--text-color);
  font-size: var(--font-size-chinese);
  font-weight: 500;
  line-height: var(--line-height-relaxed);
}

.note {
  font-size: var(--font-size-09);
  color: var(--text-color);
  opacity: 0.6;
  font-style: italic;
  margin-top: 0.5rem;
}
/* 生活會話專用覆寫，不影響 basic 等其它頁 */
.daily-life-qa-block .basic-qa-reading {
  margin-top: -0.6rem;
}
.grammar-detail {
  max-width: 1200px;
  margin: 0 auto;
}

.grammar-detail .breadcrumb {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.grammar-detail-loading,
.grammar-detail-error {
  margin-top: 0.5rem;
}

.grammar-detail-error {
  color: var(--text-error, #c0392b);
}

.grammar-detail-content {
  margin-top: 0;
}

/* 抄 basic 授受動詞：一整張說明卡，主區(verb) 份量重，下方說明/句型(example 風格) 份量輕 */
.grammar-detail-explanation-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 0.75rem 0.75rem 0.75rem 0;
  margin-bottom: 1.5rem;
}

/* 主區：句型＋說明 — 與 basic .giving-receiving-verb 一致，深底、左色條 #2980b9 */
.grammar-detail-verb-block {
  background: rgba(52, 152, 219, 0.1);
  border-left: 4px solid #2980b9;
  padding: 0.75rem 0.75rem 0.75rem calc(0.75rem + 4px);
  margin: -0.75rem -0.75rem 0 -0.75rem;
  border-radius: 8px 8px 0 0;
}

/* 抄 basic：N5 badge ＋ 區塊標籤（單字/文法） */
.grammar-detail-verb-block .grammar-detail-verb-label-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.grammar-detail-verb-block .grammar-detail-verb-label-row .basic-level-badge {
  position: static;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  color: #fff;
  line-height: 1.2;
  flex-shrink: 0;
}

.grammar-detail-verb-block .grammar-detail-verb-label-row .basic-level-badge.basic-level-n5 {
  background: #27ae60;
}

.grammar-detail-verb-block .grammar-detail-verb-label-row .basic-level-badge.basic-level-n4 {
  background: #3498db;
}

.grammar-detail-verb-block .grammar-detail-verb-label-row .basic-level-badge.basic-level-n3 {
  background: #e67e22;
}

.grammar-detail-verb-block .grammar-detail-verb-label-row .basic-level-badge.basic-level-n2 {
  background: #9b59b6;
}

.grammar-detail-verb-block .grammar-detail-verb-label-row .basic-level-badge.basic-level-n1 {
  background: #c0392b;
}

.grammar-detail-verb-block .grammar-detail-verb-label-row .giving-receiving-block-label {
  display: block;
  font-size: var(--font-size-075);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #2980b9;
  opacity: 0.95;
}

.grammar-detail-verb-block .grammar-detail-pattern {
  font-size: var(--font-size-15);
  color: var(--text-color);
  margin: 0 0 0.35rem 0;
  font-weight: 700;
}

/* intro 區塊內：接續形式（filterByPrecedes）＋灰底 badge */
/* 抵銷父層 intro-block 的 padding-left，讓此區塊往左延伸 */
.grammar-detail-intro-precedes {
  margin: 0.5rem 0 0.5rem 0;
  margin-left: calc(-1rem - 4px);
  padding: 0.5rem 0.75rem 0.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(to right, #f8e7b4, #f8f7f4);
  border-radius: 4px;
}

.grammar-detail-intro-precedes-label {
  font-size: var(--font-size-0875);
  font-weight: 600;
  color: var(--text-color);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.grammar-detail-intro-precedes-label::after {
  content: ': ';
}

.grammar-detail-intro-precedes-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  vertical-align: middle;
}

.grammar-detail-intro-precedes-badges .grammar-detail-precedes-badge {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  line-height: 1.2;
  background: #d04949;
  color: #fff;
}

@media (min-width: 768px) {
  .grammar-detail-verb-block .grammar-detail-pattern {
    font-size: var(--font-size-175);
  }
}

.grammar-detail-verb-block .grammar-detail-description {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-1);
  font-weight: 600;
}

/* 卡內分隔線 — 與 basic .giving-receiving-divider 一致 */
.grammar-detail-divider {
  height: 2px;
  background: linear-gradient(to right, var(--card-border), rgba(52, 152, 219, 0.2), var(--card-border));
  margin: 0.5rem 0.75rem;
  border-radius: 1px;
}

/* 說明段落 — 與 basic .giving-receiving-example 一致，左色條 #7fb3d5、無底 */
.grammar-detail-intro-block {
  border-left: 4px solid #d8d8d8;
  padding-left: calc(1rem + 4px);
  margin-left: 0.75rem;
  border-radius: 0 0 0 6px;
  background: #f8f7f4;
}

.grammar-detail-intro-block .grammar-detail-intro {
  margin: 0;
  padding: 0.25rem 0;
  line-height: 1.65;
  color: var(--text-color);
  font-size: var(--font-size-1);
}

/* 句型列 — 與 basic .giving-receiving-example 一致 */
.grammar-detail-section-row {
  border-left: 4px solid #7fb3d5;
  padding: 0.5rem 0.5rem 0.5rem calc(1rem + 4px);
  margin-left: 0.75rem;
  border-radius: 0 0 0 6px;
  background: #f2f6f9;
}

.grammar-detail-section-row .grammar-detail-section-title {
  font-size: var(--font-size-1125);
  color: var(--text-color);
  margin: 0 0 0.1rem 0;
  font-weight: 600;
}

.grammar-detail-section-row .grammar-detail-section-body {
  margin: 0;
  line-height: 1.6;
  color: var(--text-color);
  font-size: var(--font-size-1);
}

.grammar-detail-section-row .grammar-detail-section-body::before {
  content: '➠ ';
}

/* 相關文法：例句前、僅在有資料時顯示 */
.grammar-detail-related {
  margin-bottom: 1.5rem;
}

.grammar-detail-related-title {
  font-size: var(--font-size-1125);
  color: var(--text-color);
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}

.grammar-detail-related-divider {
  height: 2px;
  background: linear-gradient(to right, var(--card-border), rgba(52, 152, 219, 0.2), var(--card-border));
  margin: 0.5rem 0 0.75rem 0;
  border-radius: 1px;
}

.grammar-detail-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.grammar-detail-related-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-color);
  text-decoration: none;
  font-size: var(--font-size-0875);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.grammar-detail-related-pill:hover {
  border-color: #2980b9;
  box-shadow: 0 2px 8px rgba(41, 128, 185, 0.2);
  transform: translateY(-1px);
}

.grammar-detail-related-pill-badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.08rem 0.28rem;
  border-radius: 4px;
  color: #fff;
  flex-shrink: 0;
}

.grammar-detail-related-pill.basic-level-n5 .grammar-detail-related-pill-badge {
  background: #27ae60;
}

.grammar-detail-related-pill.basic-level-n4 .grammar-detail-related-pill-badge {
  background: #3498db;
}

.grammar-detail-related-pill.basic-level-n3 .grammar-detail-related-pill-badge {
  background: #e67e22;
}

.grammar-detail-related-pill.basic-level-n2 .grammar-detail-related-pill-badge {
  background: #9b59b6;
}

.grammar-detail-related-pill.basic-level-n1 .grammar-detail-related-pill-badge {
  background: #c0392b;
}

.grammar-detail-related-cross-pill .grammar-detail-related-pill-badge {
  background: #6c757d;
}

.grammar-detail-related-pill-label {
  display: inline;
  font-weight: 500;
}

.grammar-detail-related-pill-pattern {
  opacity: 0.95;
}

.grammar-detail-related-pill-desc {
  opacity: 0.85;
  color: var(--text-muted);
  font-weight: 400;
}

.grammar-detail-examples-title {
  font-size: var(--font-size-1125);
  color: var(--text-color);
  margin: 0 0 0.75rem 0;
  font-weight: 600;
}

/* 與 basic 頁一致：例句標題下方先有分隔線再出例句 */
.grammar-detail-examples-divider {
  height: 2px;
  background: linear-gradient(to right, var(--card-border), rgba(52, 152, 219, 0.2), var(--card-border));
  margin: 0.5rem 0 0.75rem 0;
  border-radius: 1px;
}

/* 抄 basic 授受動詞：桌機一排兩個、手機一排一個 */
.grammar-detail-examples-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

/* section 底下的例句列表為細項：縮排比 section 多一層，字級小於 section */
.grammar-detail-section-row+.grammar-detail-examples-list {
  margin-left: 1.5rem;
  margin-top: 0.75rem;
}

.grammar-detail-section-row+.grammar-detail-examples-list .grammar-detail-example-ja {
  font-size: var(--font-size-1);
}

.grammar-detail-section-row+.grammar-detail-examples-list .grammar-detail-example-hiragana {
  font-size: var(--font-size-0825, 0.825rem);
}

.grammar-detail-section-row+.grammar-detail-examples-list .grammar-detail-example-tc {
  font-size: var(--font-size-0875);
}

.grammar-detail-section-row+.grammar-detail-examples-list .grammar-detail-example-note {
  font-size: var(--font-size-0875);
}

@media (max-width: 768px) {
  .grammar-detail-examples-list {
    grid-template-columns: 1fr;
  }

  .grammar-detail-example-card .grammar-detail-example-text-group,
  .grammar-detail-example-card .grammar-detail-example-direction-content .grammar-detail-example-tc {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* 與 WordDetail 例句一致：點擊日文可放大（font-size 過渡 0.25s ease），放大時隱藏發音鈕 */
  .grammar-detail-example-card .grammar-detail-example-text-group {
    cursor: pointer;
  }

  /* 與 WordDetail 同款動畫（font-size 過渡 0.25s ease），用 calc 與基礎同單位、放大 1.3 倍 */
  .grammar-detail-example-card.grammar-detail-example-card--zoomed .grammar-detail-example-ja {
    font-size: calc(var(--font-size-12) * 1.3);
  }

  .grammar-detail-example-card.grammar-detail-example-card--zoomed .grammar-detail-example-hiragana {
    font-size: calc(var(--font-size-085) * 1.3);
  }

  /* section 底下例句：基礎為 --font-size-1 / --font-size-0825 */
  .grammar-detail-section-row+.grammar-detail-examples-list .grammar-detail-example-card.grammar-detail-example-card--zoomed .grammar-detail-example-ja {
    font-size: calc(var(--font-size-1) * 1.3);
  }

  .grammar-detail-section-row+.grammar-detail-examples-list .grammar-detail-example-card.grammar-detail-example-card--zoomed .grammar-detail-example-hiragana {
    font-size: calc(var(--font-size-0825, 0.825rem) * 1.3);
  }

  /* 對照例句區：同 section 基礎 */
  .grammar-detail-summary-examples .grammar-detail-examples-list .grammar-detail-example-card.grammar-detail-example-card--zoomed .grammar-detail-example-ja {
    font-size: calc(var(--font-size-1) * 1.3);
  }

  .grammar-detail-summary-examples .grammar-detail-examples-list .grammar-detail-example-card.grammar-detail-example-card--zoomed .grammar-detail-example-hiragana {
    font-size: calc(var(--font-size-0825, 0.825rem) * 1.3);
  }

  .grammar-detail-example-card.grammar-detail-example-card--zoomed .grammar-detail-example-speak-btn {
    display: none;
  }
}

/* 與 basic 頁疑問詞／例句一致：卡片、左色條、日文＋讀音＋發音鍵＋ruby＋翻譯 */
.grammar-detail-example-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  border-left: 4px solid #7fb3d5;
  padding: 0.5rem 1rem;
  margin: 0;
}

.grammar-detail-example-direction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--card-border);
}

.grammar-detail-example-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.grammar-detail-example-ja {
  font-size: var(--font-size-12);
  font-weight: 500;
  color: var(--text-color);
  opacity: 0.88;
  white-space: pre-line;
  transition: font-size 0.25s ease;
}

/* 例句：漢字上標假名（與 basic / WordDetail 一致） */
.grammar-detail-example-ja.japanese-ruby ruby {
  ruby-align: center;
  ruby-overhang: auto;
}

.grammar-detail-example-ja.japanese-ruby rt {
  font-size: 0.6em;
  opacity: 0.85;
}

/* 對齊失敗時在下一行顯示讀音（與 WordDetail / 會話頁一致） */
.grammar-detail-example-reading-line {
  font-size: var(--font-size-085);
  color: var(--text-color);
  opacity: 0.75;
  margin-top: 0.15em;
}

.grammar-detail-example-hiragana-wrap {
  display: block;
}

.grammar-detail-example-hiragana {
  font-size: var(--font-size-085);
  color: var(--text-color);
  opacity: 0.75;
  font-style: italic;
  white-space: pre-line;
  transition: font-size 0.25s ease;
}

.grammar-detail-example-speak-btn {
  flex-shrink: 0;
  margin-left: auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.grammar-detail-example-speak-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.grammar-detail-example-direction-content {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.grammar-detail-example-tc {
  font-size: var(--font-size-09);
  font-weight: 400;
  color: var(--text-color);
  opacity: 0.9;
  line-height: var(--line-height-base);
  white-space: pre-line;
}

.grammar-detail-example-note {
  display: inline;
  margin-left: auto;
  font-size: var(--font-size-09);
  font-weight: 400;
  color: #d04949;
  opacity: 0.9;
  line-height: var(--line-height-base);
  white-space: pre-line;
  font-style: italic;
  text-align: right;
}

.grammar-detail-example-note::before {
  content: '... ';
}

/* summaryExamples：對照例句 / 練習；對照例句字級與 section 底下例句一致 */
.grammar-detail-summary-examples {
  margin-top: 1.5rem;
}

.grammar-detail-summary-examples .grammar-detail-examples-list .grammar-detail-example-ja {
  font-size: var(--font-size-1);
}

.grammar-detail-summary-examples .grammar-detail-examples-list .grammar-detail-example-hiragana {
  font-size: var(--font-size-0825, 0.825rem);
}

.grammar-detail-summary-examples .grammar-detail-examples-list .grammar-detail-example-tc {
  font-size: var(--font-size-0875);
}

.grammar-detail-summary-examples .grammar-detail-examples-list .grammar-detail-example-note {
  font-size: var(--font-size-0875);
}

.grammar-detail-summary-practice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 767px) {
  .grammar-detail-summary-practice-list {
    grid-template-columns: 1fr;
  }
}

.grammar-detail-summary-practice-item {
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--card-border, #e8e8e8);
}

.grammar-detail-summary-practice-item:last-child {
  border-bottom: none;
}

.grammar-detail-summary-practice-question {
  margin: 0 0 0.35rem;
  font-weight: 500;
  color: var(--text-color);
}

.grammar-detail-summary-practice-answer {
  margin: 0 0 0.35rem;
  font-size: var(--font-size-095);
  color: var(--text-color);
}

.grammar-detail-summary-practice-answer-value {
  background: #ebebeb;
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.grammar-detail-summary-practice-explanation {
  color: var(--text-secondary, #666);
  font-size: var(--font-size-0875);
  font-style: italic;
}

.grammar-detail-summary-practice-explanation::before {
  content: '... ';
}

/* 考題區：放在例句下方 */
.grammar-detail-quiz {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--card-border);
}

.grammar-detail-quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.grammar-detail-quiz-title {
  font-size: var(--font-size-11);
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.grammar-detail-quiz-divider {
  height: 1px;
  background: var(--card-border);
  margin-bottom: 1rem;
}

.grammar-detail-quiz-toggle-answers {
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.grammar-detail-quiz-toggle-answers:hover {
  background: rgba(52, 152, 219, 0.1);
  border-color: #2980b9;
}

.grammar-detail-quiz-toggle-answers[aria-pressed="true"] {
  background: rgba(52, 152, 219, 0.15);
  border-color: #2980b9;
}

.grammar-detail-quiz-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.grammar-detail-quiz-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  border-left: 4px solid #7fb3d5;
  padding: 0.5rem 1rem;
  margin: 0;
}

.grammar-detail-quiz-question {
  font-size: var(--font-size-1);
  font-weight: 500;
  color: var(--text-color);
  margin: 0 0 0.5rem 0;
  line-height: 1.5;
}

.grammar-detail-quiz-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .grammar-detail-quiz-options {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grammar-detail-quiz-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.3rem 0.75rem;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 10px;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
}

.grammar-detail-quiz-option:hover:not(:disabled) {
  border-color: #7fb3d5;
}

.grammar-detail-quiz-option:disabled {
  cursor: default;
}

.grammar-detail-quiz-option-correct {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.15);
}

.grammar-detail-quiz-option-wrong {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.12);
}

.grammar-detail-quiz-choice-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-border);
  border-radius: 50%;
  font-size: var(--font-size-085);
  font-weight: bold;
  color: var(--text-color);
  flex-shrink: 0;
}

.grammar-detail-quiz-option-correct .grammar-detail-quiz-choice-number {
  background: #2ecc71;
  color: white;
}

.grammar-detail-quiz-option-wrong .grammar-detail-quiz-choice-number {
  background: #e74c3c;
  color: white;
}

.grammar-detail-quiz-choice-text {
  font-size: var(--font-size-0875);
  color: var(--text-color);
  font-weight: 500;
}/* 專頁暫無自訂樣式，完全沿用 GrammarPage 的列表樣式 *//**
 * 文法「前接形式」說明彈出框樣式
 * 抄自 ConjugationHelpModal
 */

.grammar-connection-help-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  animation: grammarConnectionHelpFadeIn 0.2s ease;
  overflow: hidden;
}

@keyframes grammarConnectionHelpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.grammar-connection-help-modal {
  background: var(--card-bg, white);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  height: 85vh;
  min-height: 360px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: grammarConnectionHelpSlideUp 0.2s ease;
}

@media (min-width: 768px) {
  .grammar-connection-help-modal {
    width: 800px;
    max-width: 800px;
    min-width: 800px;
  }
}

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

.grammar-connection-help-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
  flex-shrink: 0;
}

.grammar-connection-help-modal-title {
  font-size: var(--font-size-125);
  font-weight: 600;
  color: var(--text-color, #333);
  margin: 0;
}

.grammar-connection-help-modal-close {
  background: none;
  border: none;
  font-size: var(--font-size-15);
  color: var(--text-secondary, #666);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.grammar-connection-help-modal-close:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
  color: var(--text-color, #333);
}

.grammar-connection-help-modal-tabs-wrap {
  flex-shrink: 0;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.grammar-connection-help-modal-tabs-wrap::-webkit-scrollbar {
  display: none;
}

.grammar-connection-help-modal-tabs {
  display: flex;
  flex-wrap: wrap;
}
.grammar-connection-help-modal-tabs-two-rows,
.grammar-connection-help-modal-tabs-three-rows {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}
.grammar-connection-help-modal-tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  min-width: max-content;
}

.grammar-connection-help-modal-tab {
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  font-size: var(--font-size-0875);
  color: var(--text-secondary, #666);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.grammar-connection-help-modal-tab:hover {
  color: var(--text-color, #333);
}

.grammar-connection-help-modal-tab.active {
  color: var(--link-color, #1976d2);
  font-weight: 600;
  border-bottom-color: var(--link-color, #1976d2);
}

.grammar-connection-help-modal-content {
  padding: 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}

.grammar-connection-help-modal-body {
  font-size: var(--font-size-1);
  line-height: 1.6;
  color: var(--text-color, #333);
}

.grammar-connection-help-adj-negative-note {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: #f1f1f1;
  border-radius: 8px;
  font-size: var(--font-size-0875);
  color: var(--text-secondary, #555);
}
.grammar-connection-help-adj-negative-note p {
  margin: 0.35em 0;
}
.grammar-connection-help-adj-negative-note p:first-child {
  margin-top: 0;
}

.grammar-connection-help-modal-body .grammar-connection-help-type-title {
  font-size: var(--font-size-1125);
  font-weight: 600;
  color: var(--text-color, #2c3e50);
  margin: 0 0 0.75rem 0;
}

/* 手機版：「活用形一覽」與情境排序頁 h1 同大（.word-list h1） */
@media (max-width: 767px) {
  .grammar-connection-help-modal-body .grammar-connection-help-one-verb:first-of-type .grammar-connection-help-type-title {
    font-size: var(--font-size-15);
    margin-bottom: 1rem;
  }
}

.grammar-connection-help-modal-body p {
  margin: 0.5rem 0;
}

.grammar-connection-help-modal-body p:first-of-type {
  margin-top: 0;
}

.grammar-connection-help-all-section {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--card-border, #e8e8e8);
}

.grammar-connection-help-all-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.grammar-connection-help-supplement .grammar-connection-help-type-title {
  font-size: var(--font-size-1);
}

.grammar-connection-help-supplement-body {
  white-space: pre-line;
  margin: 0.5rem 0 0;
}

.grammar-connection-help-examples-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  list-style-type: disc;
}

.grammar-connection-help-examples-list li {
  margin: 0.35rem 0;
}

.grammar-connection-help-example-text {
  font-style: normal;
}

.grammar-connection-help-example-gloss {
  color: var(--text-secondary, #666);
}

.grammar-connection-help-table-wrapper {
  overflow-x: auto;
  margin: 0.5rem 0 0.75rem;
}

.grammar-connection-help-table {
  border-collapse: collapse;
  font-size: var(--font-size-0875);
  width: 100%;
  min-width: 280px;
}

.grammar-connection-help-table th,
.grammar-connection-help-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border: 1px solid var(--card-border, #e0e0e0);
}

.grammar-connection-help-table th {
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
  font-weight: 600;
  color: var(--text-color, #2c3e50);
}

.grammar-connection-help-table td {
  color: var(--text-color, #333);
  white-space: pre-line;
}

.grammar-connection-help-table tbody tr:nth-child(even) {
  background: var(--hover-bg, rgba(0, 0, 0, 0.02));
}

/* 變型規則／例中的特殊標示：藍底（與活用形變化規則頁語幹色一致） */
.grammar-connection-help-rule-highlight {
  background: var(--conjugation-stem-bg, rgba(25, 118, 210, 0.12));
  border-radius: 3px;
  font-weight: 600;
  padding: 0 2px;
}

/* 橘粉底（與活用形變化規則頁段變化色一致，用於買う→買わない等例） */
.grammar-connection-help-rule-highlight-row {
  background: var(--conjugation-row-bg, rgba(245, 124, 0, 0.18));
  border-radius: 3px;
  font-weight: 600;
  padding: 0 2px;
}

/* 例句區灰底（文法重點標示，如 ～ないで、～ことができる） */
.grammar-connection-help-example-gray {
  background: var(--example-gray-bg, rgba(0, 0, 0, 0.08));
  border-radius: 3px;
  padding: 0 2px;
}
.connection-types-page {
  max-width: 1200px;
  margin: 0 auto;
}

.connection-types-page-title-wrap {
  border-bottom: 1px solid var(--card-border, #e0e0e0);
}

@media (max-width: 767px) {
  .connection-types-page-title-wrap {
    display: none;
  }

  .connection-types-page .grammar-connection-help-page-wrap {
    border: none;
    border-radius: 0;
  }

  /* 手機版內容區 padding 與 Word list 頁一致（1rem） */
  .connection-types-page .grammar-connection-help-page-wrap .grammar-connection-help-modal-content {
    padding: 0rem;
  }
}

.connection-types-page-title {
  margin: 1rem 0 0;
  padding: 0 0 0.75rem 1rem;
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--text-color, #2c3e50);
}

@media (min-width: 768px) {
  .connection-types-page-title {
    font-size: var(--font-size-175);
  }
}

/* 頁面版：不用 modal 的 max-height，讓內容自然展開 */
.grammar-connection-help-page-wrap {
  background: var(--card-bg, white);
  border: 1px solid var(--card-border, #e0e0e0);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.grammar-connection-help-page-wrap .grammar-connection-help-modal-tabs-wrap {
  flex-shrink: 0;
  padding: 0 1rem;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
}

.grammar-connection-help-page-wrap .grammar-connection-help-modal-content {
  max-height: none;
  overflow: visible;
}

/* 手機版：接続形式縮進 filter（與情境/文法篩選同款） */
.grammar-connection-help-mobile-filter-row {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.grammar-connection-help-mobile-filter-chip {
  font-size: var(--font-size-095);
  font-weight: 600;
  color: #ffffff;
  padding: 0.5rem 1rem;
  background: #42a5f5;
  border: 1px solid #42a5f5;
  border-radius: 8px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 4px rgba(66, 165, 245, 0.3);
}

.grammar-connection-help-mobile-filter-check {
  font-size: var(--font-size-085);
}

.grammar-connection-help-mobile-filter-btn {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--card-border, #e0e0e0);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-095);
  font-weight: 500;
  color: var(--text-color, #333);
  transition: all 0.2s;
  flex-shrink: 0;
}

.grammar-connection-help-mobile-filter-btn:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
}

.grammar-connection-help-mobile-filter-arrow {
  font-size: var(--font-size-11);
}

/* 接続形式篩選彈窗 */
.grammar-connection-help-filter-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  animation: connectionHelpFadeIn 0.2s ease;
}

.grammar-connection-help-filter-modal {
  background: var(--card-bg, white);
  border-radius: 12px;
  max-width: 90vw;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: connectionHelpSlideUp 0.2s ease;
}

.grammar-connection-help-filter-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
  flex-shrink: 0;
}

.grammar-connection-help-filter-modal-header h2 {
  font-size: var(--font-size-125);
  font-weight: 600;
  color: var(--text-color, #333);
  margin: 0;
}

.grammar-connection-help-filter-modal-close {
  background: none;
  border: none;
  font-size: var(--font-size-125);
  color: var(--text-secondary, #666);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.grammar-connection-help-filter-modal-close:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
  color: var(--text-color, #333);
}

.grammar-connection-help-filter-modal-content {
  padding: 1.5rem;
  overflow-y: auto;
}

.grammar-connection-help-filter-modal-content .category-filters {
  flex-direction: column;
  margin-bottom: 0;
  gap: 0.75rem;
}

.grammar-connection-help-filter-modal-content .category-btn {
  width: 100%;
  padding: 0.75rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--card-border, #e0e0e0);
}

.grammar-connection-help-filter-modal-content .category-btn.active {
  background: #42a5f5;
  color: #fff;
  border-color: #42a5f5;
}

@keyframes connectionHelpFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes connectionHelpSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}.polarity-tense-comparison-page {
  max-width: 1200px;
  margin: 0 auto;
}

.polarity-tense-comparison-content {
  background: var(--card-bg, white);
  border: 1px solid var(--card-border, #e0e0e0);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  overflow: hidden;
}

.polarity-tense-comparison-header {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--card-border, #e0e0e0);
}

.polarity-tense-comparison-title {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--text-color, #2c3e50);
  margin: 0 0 0.35rem 0;
}

.polarity-tense-comparison-subtitle {
  font-size: var(--font-size-095);
  color: var(--text-secondary, #555);
  margin: 0;
}

@media (min-width: 768px) {
  .polarity-tense-comparison-title {
    font-size: var(--font-size-175);
  }
}

.polarity-tense-table-wrap {
  border: 1px solid var(--card-border, #e0e0e0);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-bg, #fff);
}

.polarity-tense-example {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--card-border, #e0e0e0);
}

.polarity-tense-example-table {
  min-width: 520px;
}

.polarity-tense-table-caption {
  font-size: var(--font-size-1125);
  font-weight: 600;
  color: var(--text-color, #2c3e50);
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--card-border, #f5f5f5);
  border-bottom: 1px solid var(--card-border, #e0e0e0);
}

.polarity-tense-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.polarity-tense-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: var(--font-size-095);
}

.polarity-tense-table th,
.polarity-tense-table td {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--card-border, #e0e0e0);
  text-align: left;
  vertical-align: top;
}

/* 除第一欄與表頭外，內容靠右 */
.polarity-tense-table tbody td:not(:first-child) {
  text-align: right;
}

/* 欄位標題（現在肯定・現在疑問…過去否定）：色一 */
.polarity-tense-table thead th,
.polarity-tense-table tbody tr.polarity-tense-col-header th {
  background: var(--polarity-tense-col-header-bg, #e6f0f7) !important;
  font-weight: 600;
  color: var(--text-color, #333);
  white-space: nowrap;
  text-align: right;
}

.polarity-tense-th-row-label {
  font-weight: 600;
  color: var(--text-color, #2c3e50);
  width: 5.5em;
  min-width: 5.5em;
}

/* 區塊標題（敬體／常體／例文）：灰色，在第一欄、靠左 */
.polarity-tense-table td.polarity-tense-th-group,
.polarity-tense-table th.polarity-tense-th-group {
  background: var(--polarity-tense-section-bg, #e8e8e8) !important;
  text-align: left !important;
}

/* 敬體／常體／例文 那整列（含現在肯定…過去否定）整列灰色 */
.polarity-tense-table tbody tr.polarity-tense-col-header th:first-child.polarity-tense-th-group,
.polarity-tense-table tbody tr.polarity-tense-col-header th:first-child.polarity-tense-th-group ~ th {
  background: var(--polarity-tense-section-bg, #e8e8e8) !important;
}

/* 第一欄（敬體／常體／例文與列標籤）一律靠左，覆蓋表頭靠右 */
.polarity-tense-table th:first-child,
.polarity-tense-table tbody tr.polarity-tense-col-header th:first-child,
.polarity-tense-table td:first-child {
  text-align: left !important;
}

.polarity-tense-table tbody tr:last-child td {
  border-bottom: none;
}

.polarity-tense-table tbody tr:nth-child(even) td {
  background: var(--hover-bg, rgba(0, 0, 0, 0.02));
}

.polarity-tense-table tbody tr:hover td {
  background: rgba(0, 0, 0, 0.02);
}

/* 與活用頁一致：<blue> / <orange> 標籤底色 */
.polarity-tense-cell-highlight-blue {
  background: var(--conjugation-stem-bg, rgba(25, 118, 210, 0.12));
  border-radius: 3px;
  font-weight: 600;
  padding: 0 2px;
}

.polarity-tense-cell-highlight-orange {
  background: var(--conjugation-row-bg, rgba(245, 124, 0, 0.18));
  border-radius: 3px;
  font-weight: 600;
  padding: 0 2px;
}

.polarity-tense-cell-highlight-yellow {
  background: rgba(255, 193, 7, 0.25);
  border-radius: 3px;
  font-weight: 600;
  padding: 0 2px;
}

.polarity-tense-cell-highlight-pink {
  background: rgba(233, 30, 99, 0.18);
  border-radius: 3px;
  font-weight: 600;
  padding: 0 2px;
}

.polarity-tense-cell-highlight-green {
  background: rgba(46, 204, 113, 0.22);
  border-radius: 3px;
  font-weight: 600;
  padding: 0 2px;
}

@media (max-width: 767px) {
  .polarity-tense-comparison-content {
    padding: 1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .polarity-tense-table {
    font-size: var(--font-size-0875);
  }

  .polarity-tense-table th,
  .polarity-tense-table td {
    padding: 0.4rem 0.45rem;
  }
}
/* 直式列表：一行 2 張卡，卡內多行直排，發音鍵靠右 */
.confusable-item-list.confusable-item-list--vertical {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .confusable-item-list.confusable-item-list--vertical {
    grid-template-columns: 1fr;
  }
}

/* AdSlot 佔滿整行 */
.confusable-ad-slot {
  grid-column: 1 / -1;
}

.confusable-item-list--vertical .confusable-item-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--card-border);
}

.confusable-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.75rem;
  min-height: 2.5rem;
}

.confusable-item-list--vertical .confusable-item-card .confusable-item-row {
  background: var(--card-bg);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--card-border);
}

.confusable-item-list--vertical .confusable-item-card .confusable-item-row:last-child {
  border-bottom: none;
}

.confusable-item-list--vertical .confusable-item-card .confusable-item-row:first-child {
  padding-top: 0.75rem;
}

.confusable-item-list--vertical .confusable-item-card .confusable-item-row:last-child {
  padding-bottom: 0.75rem;
}

.confusable-item-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.confusable-item-row-upper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.confusable-item-example-inline {
  font-size: 0.85em;
  color: var(--text-secondary, #666);
}

.confusable-item-row-main .confusable-translation {
  color: var(--text-secondary, #666);
  font-size: var(--font-size-chinese);
  font-weight: 500;
  margin-left: auto;
  text-align: right;
}

.confusable-item-row .confusable-speak-btn {
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.confusable-item-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .confusable-item-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .confusable-item-list .confusable-item-card {
    min-width: 0;
  }
}

.confusable-item-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s;
}

.confusable-item-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

.confusable-word-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.confusable-word-block .confusable-level-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: #fff;
  line-height: 1.2;
}

.confusable-level-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: #fff;
  line-height: 1.2;
}

.confusable-level-badge.confusable-level-n5 {
  background: #27ae60;
}

.confusable-level-badge.confusable-level-n4 {
  background: #3498db;
}

.confusable-level-badge.confusable-level-n3 {
  background: #e67e22;
}

.confusable-level-badge.confusable-level-n2 {
  background: #d35400;
}

.confusable-level-badge.confusable-level-n1 {
  background: #c0392b;
}

.confusable-item-card:hover {
  box-shadow: 0 4px 12px var(--shadow);
  transform: translateY(-2px);
  border-color: #3498db;
}

.confusable-word-block .confusable-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.confusable-word-block .confusable-item-content {
  margin-top: 0;
  padding-top: 0;
}

.confusable-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

.confusable-japanese {
  font-size: var(--font-size-15);
  font-weight: bold;
  color: var(--text-color);
}

/* [自][他]底色 */
.confusable-self-other-tag {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.05em 0.2em;
  border-radius: 3px;
  margin-right: 0.4rem;
  color: #999;
  font-weight: 400;
}

.confusable-hiragana-wrap {
  display: block;
}

.confusable-hiragana {
  font-size: var(--font-size-11);
  color: var(--text-color);
  opacity: 0.7;
  font-style: italic;
}

/* 假名標在單字上（與 Word list 例句 ruby 一致） */
.confusable-japanese-ruby ruby {
  ruby-align: center;
  ruby-overhang: auto;
}

.confusable-japanese-ruby rt {
  font-size: 0.6em;
  opacity: 0.85;
}

.confusable-speak-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.confusable-speak-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.confusable-item-content .confusable-translation {
  color: var(--text-color);
  font-size: var(--font-size-chinese);
  font-weight: 500;
  line-height: var(--line-height-base);
}

/* ========== 同發音不同字專用版面：發音置前、兩字並列對照 ========== */
.confusable-item-list--same-reading {
  grid-template-columns: 1fr;
}

.confusable-same-reading-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.confusable-same-reading-card:hover {
  box-shadow: 0 4px 12px var(--shadow);
  border-color: #3498db;
}

.confusable-same-reading-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.08) 0%, rgba(155, 89, 182, 0.06) 100%);
  border-bottom: 1px solid var(--card-border);
}

.confusable-same-reading-reading {
  font-size: var(--font-size-15);
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: 0.02em;
}

.confusable-same-reading-header .confusable-speak-btn {
  margin-left: auto;
}

.dark-mode .confusable-same-reading-header {
  background: rgba(255, 255, 255, 0.08);
}

.confusable-same-reading-pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.confusable-same-reading-word {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--card-border);
  border-bottom: none;
}

.confusable-same-reading-pairs .confusable-same-reading-word:last-child {
  border-right: none;
}

.confusable-same-reading-word-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.confusable-same-reading-word-main .confusable-japanese {
  font-size: var(--font-size-125);
  font-weight: 700;
}

.confusable-same-reading-word-main .confusable-translation {
  color: var(--text-secondary, #666);
  font-size: var(--font-size-chinese);
  font-weight: 500;
}

.confusable-same-reading-example {
  font-size: 0.85em;
  color: var(--text-secondary, #666);
  margin-top: 0.25rem;
  line-height: 1.45;
}.confusable-list {
  max-width: 1200px;
  margin: 0 auto;
}

.confusable-list .breadcrumb {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.confusable-back-btn {
  background: #9e9e9e;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 1rem;
}

.confusable-back-btn:hover {
  background: #757575;
}

.confusable-list h1 {
  margin-bottom: 1rem;
  color: var(--text-color, #2c3e50);
  font-size: var(--font-size-15);
}

@media (min-width: 768px) {
  .confusable-list h1 {
    font-size: var(--font-size-175);
    margin-bottom: 1.25rem;
  }
}

.confusable-list .confusable-desktop-filters {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.confusable-list .confusable-desktop-filters .confusable-desktop-filters-row2 {
  margin-bottom: 0;
}

.confusable-list .category-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.confusable-list .confusable-desktop-filters .category-filters {
  margin-bottom: 0;
}

/* 手機版篩選彈窗：與基礎頁一致，選項垂直排列、一行一個 */
.confusable-list .filter-modal .confusable-filter-modal-content .category-filters {
  flex-direction: column;
  margin-bottom: 0;
  gap: 0.75rem;
}

.confusable-list .filter-modal .confusable-filter-modal-content .category-btn {
  width: 100%;
  padding: 0.75rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--card-border, #e0e0e0);
}

.confusable-list .filter-modal .confusable-filter-modal-content .category-btn.active {
  background: #42a5f5;
  color: #fff;
  border-color: #42a5f5;
}

.confusable-content-area {
  margin-top: 0;
}

.confusable-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-color);
  opacity: 0.8;
}

/* 動畫定義（與基礎頁一致） */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* 僅隱藏桌機用的篩選區，不影響彈窗內的 CategoryFilters */
@media (max-width: 767px) {
  .confusable-list .confusable-desktop-filters {
    display: none;
  }
}
/* 更新日誌頁：與其他使用 PageWithSidebar 的頁面保持一致 */
.changelog-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  padding-top: 0;
  /* padding-top 設為 0，因為 PageWithSidebar 的 .page-content 已經有 padding-top */
  background: var(--bg-color);
  min-height: 100vh;
}

/* 手机端：左右留白减半（从 1rem 减到 0.5rem） */
@media (max-width: 768px) {
  .changelog-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -0.5rem !important;
    /* 负 margin 抵消 page-content 的 0.5rem padding */
    margin-right: -0.5rem !important;
    /* 实际留白 = 1rem (page-content) - 0.5rem = 0.5rem */
  }
}

.changelog-page .mobile-back-btn {
  background: #9e9e9e;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 1rem;
  display: none;
  /* 預設隱藏，只在手機版顯示 */
}

.changelog-page .mobile-back-btn:hover {
  background: #757575;
}

.changelog-page h1 {
  margin-bottom: 2rem;
  color: var(--text-color);
  font-size: var(--font-size-2);
  font-weight: 600;
}

.changelog-content {
  padding: 2rem 0;
}

.coming-soon {
  text-align: center;
  font-size: var(--font-size-15);
  color: var(--text-color);
  opacity: 0.7;
  padding: 4rem 0;
}

.changelog-entries {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.changelog-entry {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.3s;
}

.changelog-entry:hover {
  box-shadow: 0 4px 12px var(--shadow);
  transform: translateY(-2px);
}

.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--card-border);
}

.entry-title {
  color: var(--text-color);
  font-size: var(--font-size-15);
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.entry-date {
  color: var(--text-color);
  opacity: 0.7;
  font-size: var(--font-size-09);
  white-space: nowrap;
  margin-left: 1rem;
}

.entry-content {
  color: var(--text-color);
  line-height: var(--line-height-loose);
  font-size: var(--font-size-base);
}

.entry-content p {
  margin: 0 0 1rem 0;
  white-space: pre-line;
}

.entry-content p:last-child {
  margin-bottom: 0;
}

/* 手机端：顶部间距与其他页面一致，日期移到标题上方，标题到卡片间距减半 */
@media (max-width: 767px) {
  .changelog-page {
    padding-top: 0 !important;
    /* padding-top 設為 0，因為 PageWithSidebar 的 .page-content 已經有 padding-top */
  }

  .changelog-page .mobile-back-btn {
    display: none !important;
  }

  .changelog-page h1 {
    padding-left: 1rem;
    display: none !important;
    /* 手机端隐藏标题 */
  }

  .changelog-content {
    padding-top: 0.5rem !important;
    /* 内容区顶部间距减半：从 2rem 减到 1rem */
  }

  .entry-header {
    flex-direction: column;
    /* 改为垂直布局 */
    align-items: flex-start;
    /* 左对齐 */
  }

  .entry-date {
    order: -1;
    /* 日期显示在标题上方 */
    margin-left: 0;
    /* 移除左边距 */
    margin-bottom: 0.5rem;
    /* 添加下边距 */
  }

  .entry-title {
    flex: none;
    /* 移除 flex: 1，让标题自然宽度 */
  }
}/* 隱私權政策頁面樣式 */
.privacy-page {
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg-color);
  min-height: 100vh;
}

.privacy-page .mobile-back-btn {
  background: #9e9e9e;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 1rem;
  display: none;
  /* 預設隱藏，只在手機版顯示 */
}

.privacy-page .mobile-back-btn:hover {
  background: #757575;
}

/* Footer 页面包装器样式 */
.footer-page-wrapper {
  width: 100%;
}

/* 针对包含 footer-page-wrapper 的 main-content - 桌面端 */
.main-content:has(.footer-page-wrapper) {
}

/* 手机端：左右留白减半（从 1rem 减到 0.5rem） */
@media (max-width: 768px) {
  /* 手机端需要更高优先级，放在媒体查询内 */
  .main-content:has(.footer-page-wrapper) {
  }

  .privacy-page {
    padding: 1rem;
  }
}

.privacy-page h1 {
  margin-bottom: 2rem;
  color: var(--text-color);
  font-size: var(--font-size-2);
  font-weight: 600;
}

.privacy-content {
  color: var(--text-color);
  line-height: var(--line-height-loose);
  font-size: var(--font-size-base);
}

.privacy-content section {
  margin-bottom: 2.5rem;
}

.privacy-content section:last-child {
  margin-bottom: 0;
}

.privacy-content h2 {
  color: var(--text-color);
  font-size: var(--font-size-15);
  font-weight: 600;
  margin-bottom: 1rem;
  margin-top: 0;
}

.privacy-content p {
  margin: 0 0 1rem 0;
  line-height: var(--line-height-loose);
}

.privacy-content ul {
  margin: 1rem 0;
}

.privacy-content li {
  margin-bottom: 0.5rem;
  line-height: var(--line-height-loose);
}

.privacy-content a {
  color: var(--link-color, #0066cc);
  text-decoration: underline;
}

.privacy-content a:hover {
  color: var(--link-hover-color, #0052a3);
}

.last-updated {
  margin-top: 2rem;
  border-top: 1px solid var(--card-border);
  opacity: 0.8;
  font-size: var(--font-size-09);
}

/* 手机端樣式 */
@media (max-width: 768px) {
  .privacy-page .mobile-back-btn {
    display: none !important;
  }

  .privacy-page h1 {
    display: none !important;
  }

  .privacy-content {
  }

  .privacy-content section {
    margin-bottom: 2rem;
  }

  .privacy-content h2 {
    font-size: var(--font-size-125);
  }
}

/* 關於我們頁面樣式 */
.about-page {
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg-color);
  min-height: 100vh;
}

.about-page .mobile-back-btn {
  background: #9e9e9e;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 1rem;
  display: none;
  /* 預設隱藏，只在手機版顯示 */
}

.about-page .mobile-back-btn:hover {
  background: #757575;
}

/* Footer 页面包装器样式 - About 页面会共用 Privacy 的样式 */

/* 手机端：左右留白减半（从 1rem 减到 0.5rem） */
@media (max-width: 768px) {
  .about-page {
    padding: 1rem;
  }
}

.about-page h1 {
  margin-bottom: 2rem;
  color: var(--text-color);
  font-size: var(--font-size-2);
  font-weight: 600;
}

.about-content {
  color: var(--text-color);
  line-height: var(--line-height-loose);
  font-size: var(--font-size-base);
}

.about-content section {
  margin-bottom: 2.5rem;
}

.about-content section:last-child {
  margin-bottom: 0;
}

.about-content h2 {
  color: var(--text-color);
  font-size: var(--font-size-15);
  font-weight: 600;
  margin-bottom: 1rem;
  margin-top: 0;
}

.about-content p {
  margin: 0 0 1rem 0;
  line-height: var(--line-height-loose);
}

.about-content ul {
  margin: 1rem 0;
}

.about-content li {
  margin-bottom: 0.75rem;
  line-height: var(--line-height-loose);
}

.about-content strong {
  font-weight: 600;
  color: var(--text-color);
}

/* 手机端樣式 */
@media (max-width: 768px) {
  .about-page .mobile-back-btn {
    display: none !important;
  }

  .about-page h1 {
    display: none !important;
  }

  .about-content {
  }

  .about-content section {
    margin-bottom: 2rem;
  }

  .about-content h2 {
    font-size: var(--font-size-125);
  }
}

/* 聯絡我們頁面樣式 */
.contact-page {
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg-color);
  min-height: 100vh;
}

.contact-page .mobile-back-btn {
  background: #9e9e9e;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 1rem;
  display: none;
  /* 預設隱藏，只在手機版顯示 */
}

.contact-page .mobile-back-btn:hover {
  background: #757575;
}

/* Footer 页面包装器样式 - Contact 页面会共用 Privacy 的样式 */

/* 手机端：左右留白减半（从 1rem 减到 0.5rem） */
@media (max-width: 768px) {
  .contact-page {
    padding: 1rem;
  }
}

.contact-page h1 {
  margin-bottom: 2rem;
  color: var(--text-color);
  font-size: var(--font-size-2);
  font-weight: 600;
}

.contact-content {
  color: var(--text-color);
  line-height: var(--line-height-loose);
  font-size: var(--font-size-base);
}

.contact-content section {
  margin-bottom: 3rem;
}

.contact-content section:last-child {
  margin-bottom: 0;
}

.contact-content h2 {
  color: var(--text-color);
  font-size: var(--font-size-15);
  font-weight: 600;
  margin-bottom: 1rem;
  margin-top: 0;
}

.contact-info p {
  margin: 0 0 1rem 0;
  line-height: var(--line-height-loose);
}

.contact-email {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
}

.contact-email strong {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.contact-email a {
  color: var(--link-color, #0066cc);
  text-decoration: underline;
  font-size: var(--font-size-125);
}

.contact-email a:hover {
  color: var(--link-hover-color, #0052a3);
}

/* 表單樣式 */
.contact-form {
  margin-top: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-color);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-color);
  font-size: var(--font-size-base);
  font-family: inherit;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--link-color, #0066cc);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.submit-button {
  padding: 0.75rem 2rem;
  background: var(--link-color, #0066cc);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-button:hover {
  background: var(--link-hover-color, #0052a3);
}

.submit-button:active {
  transform: translateY(1px);
}

/* FAQ 樣式 */
.contact-faq {
  margin-top: 3rem;
  border-top: 1px solid var(--card-border);
}

.faq-item {
  margin-bottom: 2rem;
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item h3 {
  color: var(--text-color);
  font-size: var(--font-size-125);
  font-weight: 600;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.faq-item p {
  margin: 0;
  line-height: var(--line-height-loose);
  opacity: 0.9;
}

/* 手机端樣式 */
@media (max-width: 768px) {
  .contact-page .mobile-back-btn {
    display: none !important;
  }

  .contact-page h1 {
    display: none !important;
  }

  .contact-content {}

  .contact-content section {
    margin-bottom: 2rem;
  }

  .contact-content h2 {
    font-size: var(--font-size-125);
  }

  .form-group input,
  .form-group textarea {
    font-size: 16px;
    /* 防止 iOS 自動縮放 */
  }
}


.contact-page-footer {
  display: none; /* 預設隱藏，只在手機版顯示 */
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--card-border);
  text-align: center;
  width: 100%;
}

.contact-page-footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: var(--font-size-085);
  width: 100%;
  margin: 0 auto;
}

.contact-page-footer-content a {
  color: var(--text-color);
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.3s, color 0.3s;
}

.contact-page-footer-content a:hover {
  opacity: 1;
  color: var(--link-color);
}

.contact-page-footer-content .footer-link-separator {
  color: var(--text-color);
  opacity: 0.5;
  font-size: var(--font-size-085);
}

@media (max-width: 768px) {
  .contact-page-footer {
    display: block; /* 手機版顯示 */
    margin-top: 3rem;
    padding-top: 1.5rem;
  }
}/* 測驗頁面共用樣式 */

/* 作答說明頁（第一頁） */
.quiz-instruction {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  margin-bottom: 2rem;
}

.quiz-instruction-title {
  font-size: var(--font-size-15);
  color: var(--text-color);
  margin: 0 0 1.5rem;
}

.quiz-instruction-body {
  color: var(--text-color);
  line-height: 1.7;
  margin-bottom: 2rem;
  text-align: left;
}

.quiz-instruction-body p {
  margin: 0;
}

.quiz-instruction-start {
  min-width: 160px;
}

/* 返回按鈕 */
.mobile-back-btn {
  background: #9e9e9e;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 1rem;
  display: none; /* 預設隱藏，只在手機版顯示 */
}

.mobile-back-btn:hover {
  background: #757575;
}

/* 統一麵包屑樣式 - 適用於所有測驗頁面 */
.quiz-page .breadcrumb {
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
}

/* 桌機版麵包屑樣式 */
@media (min-width: 769px) {

  .quiz-page .breadcrumb {
    margin-bottom: 0.5rem;
    padding: 0.5rem 0;
  }

  /* 測驗子頁：麵包屑到上方 menubar 的距離與選單頁一致（選單頁為 padding 4rem） */
  .main-content > .quiz-page:not(.quiz-menu-page) {
    padding-top: 4rem;
  }
}

/* 測驗結果頁 - 時間統計（總耗時 / 平均每題）全測驗共用，桌機與手機皆左右並排 */
.result-time {
  display: flex;
  justify-content: center;
  gap: 5rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 8px;
}

.time-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.time-icon {
  font-size: var(--font-size-15);
}

.time-label {
  font-size: var(--font-size-085);
  color: var(--text-color);
  opacity: 0.7;
}

.time-value {
  font-size: var(--font-size-125);
  font-weight: bold;
  color: var(--link-color);
}

/* 手機版麵包屑樣式 */
@media (max-width: 768px) {

  .quiz-page .breadcrumb {
    margin-top: -3rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0.5rem 0 !important;
  }

  /* 手機版隱藏返回按鈕（使用 navbar 上的返回鍵） */
  .mobile-back-btn {
    display: none;
  }

  /* 結果頁時間統計：手機與桌機一致，維持同一行左右並排 */
  .result-time {
    gap: 5rem;
  }
}/* 漢字假名測驗頁面樣式 */

/* 作答說明頁 */
.quiz-instruction {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  margin-bottom: 2rem;
}

.quiz-instruction-title {
  font-size: var(--font-size-15);
  color: var(--text-color);
  margin: 0 0 1.5rem;
}

.quiz-instruction-body {
  color: var(--text-color);
  line-height: 1.7;
  margin-bottom: 2rem;
  text-align: left;
}

.quiz-instruction-body p {
  margin: 0;
}

.quiz-instruction-start {
  min-width: 160px;
}

.quiz-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 1rem;
  /* 固定導航欄高度約 60-80px，壓縮間距避免桌面端出現滾動條 */
  padding-top: calc(80px + 10px);
  /* 固定導航欄高度 + 最小間距 */
  /* 確保標題不被遮擋 */
  scroll-margin-top: 80px;
}

/* 標題已移除，樣式已刪除 */

/* 載入與錯誤狀態 */
.quiz-loading,
.quiz-error {
  text-align: center;
  padding: 4rem 2rem;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--card-border);
  border-top-color: var(--link-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.quiz-error p {
  color: var(--text-color);
  margin-bottom: 1.5rem;
}

/* 計時器和進度條區塊 */
.quiz-header-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
  /* 壓縮間距 */
  margin-top: 0.5rem;
  /* 減少頂部間距 */
}

/* 頂部橫向布局：計時器在左，收藏+答對答錯在右 */
.quiz-header-top {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: stretch;
  /* 確保兩個面板高度一致 */
}

/* 題目區塊右上角收藏星號 - 與 WordList / WordDetail 一模一樣（無圓圈、透明背景） */
.quiz-question .word-card-favorite-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-12);
  line-height: 1;
  padding: 0;
  transition: all 0.3s;
  z-index: 10;
  filter: grayscale(100%) opacity(0.5);
}

/* 未點亮時明確套用灰階與半透明，取消收藏後樣式會正確恢復 */
.quiz-question .word-card-favorite-btn:not(.favorited) {
  filter: grayscale(100%) opacity(0.5);
}

.quiz-question .word-card-favorite-btn.favorited:hover {
  transform: scale(1.2);
  filter: grayscale(0%) opacity(1);
}

/* 沒點亮時 hover 只放大，維持灰階半透明 */
.quiz-question .word-card-favorite-btn:not(.favorited):hover {
  transform: scale(1.2);
  filter: grayscale(100%) opacity(0.5);
}

.quiz-question .word-card-favorite-btn.favorited {
  filter: grayscale(0%) opacity(1);
}

/* 計時器 */
.quiz-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.25rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  flex: 0 0 calc(50% - 0.5rem);
  /* 佔左側50%，減去gap的一半 */
  min-height: fit-content;
  box-sizing: border-box;
}


.timer-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-125);
  font-weight: bold;
  color: var(--text-color);
}

.timer-icon {
  font-size: var(--font-size-11);
}

.timer-value {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}


.question-timer {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-09);
  color: var(--text-color);
  opacity: 0.7;
  padding-left: 1rem;
  border-left: 1px solid var(--card-border);
}

.question-timer-label {
  font-size: var(--font-size-085);
}

.question-timer-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 暫停遮罩 */

/* 進度條 */
.quiz-progress {
  /* margin-bottom: 2rem; - 已移到 quiz-header-bar */
}

.progress-bar {
  height: 8px;
  background: var(--card-border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  text-align: center;
  color: var(--text-color);
  opacity: 0.7;
  font-size: var(--font-size-09);
}

/* 題目區塊 */
.quiz-question {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.question-prompt {
  text-align: center;
  font-size: var(--font-size-125);
  color: var(--text-color);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.question-prompt .highlight {
  font-size: var(--font-size-2);
  font-weight: bold;
  color: var(--link-color);
  display: inline-block;
  padding: 0 0.25rem;
}

.question-hint {
  text-align: center;
  color: var(--text-color);
  opacity: 0.6;
  font-size: var(--font-size-1);
  margin-bottom: 2rem;
  font-style: italic;
}

/* 單字填空題目句子 */
.question-sentence {
  margin-bottom: 1.5rem;
}

.sentence-text {
  font-size: var(--font-size-11);
  line-height: 1.8;
  color: var(--text-color);
  text-align: left;
  word-spacing: 0.1em;
  /* 緊湊的字間距 */
}

.sentence-text>span {
  margin: 0;
}

.blank-answer {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin: 0 0.1rem;
  border-radius: 4px;
  text-decoration: underline;
  /* 畫底線 */
  text-underline-offset: 0.2em;
}

.blank-answer.correct {
  background: rgba(46, 204, 113, 0.2);
  color: #27ae60;
}

.blank-answer.incorrect {
  background: rgba(231, 76, 60, 0.2);
  color: #c0392b;
}

.blank-answer.star-answer {
  background: #ffeb3b;
  /* 黃色背景 */
  color: var(--text-color);
}

/* 暗色模式下，黃底使用深色文字以提高可讀性 */
.dark-mode .blank-answer.star-answer {
  color: #333333;
  /* 深色文字，在黃色背景上清晰可見 */
}

.blank-selected {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin: 0 0.25rem;
  background: rgba(52, 152, 219, 0.2);
  color: var(--link-color);
  border-radius: 4px;
  font-weight: 600;
}

.blank-placeholder {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin: 0 0.1rem;
  border-radius: 4px;
  min-width: 20px;
  height: 1.5em;
}

/* 解釋文字 */
.question-explain {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(52, 152, 219, 0.05);
  border-left: 3px solid var(--link-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: var(--font-size-095);
  line-height: 1.6;
  text-align: left;
}

/* 說明問號按鈕（右上角） */
.explain-icon-btn-top-right {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--link-color);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: var(--font-size-1);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.explain-icon-btn-top-right:hover {
  background: #2980b9;
  transform: scale(1.1);
}

.explain-icon-btn-top-right:active {
  transform: scale(0.95);
}

/* 說明彈出框 */
.explain-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.explain-modal {
  background: var(--card-bg);
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.2s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.explain-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}

.explain-modal-title {
  font-size: var(--font-size-125);
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.explain-modal-close {
  background: none;
  border: none;
  font-size: var(--font-size-125);
  color: var(--text-secondary, #666);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.explain-modal-close:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
  color: var(--text-color);
}

.explain-modal-content {
  padding: 1.5rem;
  overflow-y: auto;
  color: var(--text-color);
  font-size: var(--font-size-095);
  line-height: 1.6;
  text-align: left;
}

/* 手機版調整 */
@media (max-width: 600px) {
  .explain-icon-btn {
    width: 22px;
    height: 22px;
    font-size: var(--font-size-085);
    margin-left: 0.4rem;
  }

  .explain-modal-content {
    max-width: 100%;
    max-height: 90vh;
  }

  .explain-modal-header {
    padding: 1rem 1.25rem;
  }

  .explain-modal-header h3 {
    font-size: var(--font-size-11);
  }

  .explain-modal-body {
    padding: 1.25rem;
    font-size: var(--font-size-09);
  }
}

/* 選項格子 */
.choices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* 手機版選項間距砍半 */
@media (max-width: 600px) {
  .choices-grid {
    gap: 0.5rem !important;
  }
}

.choice-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.choice-btn:hover:not(:disabled) {
  border-color: var(--link-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow);
}

.choice-btn:disabled {
  cursor: default;
}

.choice-btn.selected {
  border-color: var(--link-color);
  background: rgba(52, 152, 219, 0.1);
}

.choice-btn.correct {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.15);
}

.choice-btn.incorrect {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.15);
}

.choice-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-border);
  border-radius: 50%;
  font-size: var(--font-size-085);
  font-weight: bold;
  color: var(--text-color);
  flex-shrink: 0;
}

.choice-btn.correct .choice-number {
  background: #2ecc71;
  color: white;
}

.choice-btn.incorrect .choice-number {
  background: #e74c3c;
  color: white;
}

.choice-text {
  font-size: var(--font-size-15);
  color: var(--text-color);
  font-weight: 500;
}

/* 答案反饋 */
.answer-feedback {
  text-align: center;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: var(--font-size-11);
  font-weight: 500;
}

.answer-feedback.correct {
  background: rgba(46, 204, 113, 0.15);
  color: #27ae60;
}

.answer-feedback.incorrect {
  background: rgba(231, 76, 60, 0.15);
  color: #c0392b;
}

/* 按鈕組 */
.quiz-action-buttons {
  display: flex;
  gap: 1rem;
  width: 100%;
}

/* 看說明按鈕 */
.btn-explain {
  flex: 1;
  padding: 1rem 2rem;
  background: var(--card-bg);
  color: var(--text-color);
  border: 2px solid var(--card-border);
  border-radius: 8px;
  font-size: var(--font-size-11);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-explain:hover {
  border-color: var(--link-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}

/* 問AI按鈕 */
.btn-ask-ai {
  flex: 1;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-11);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ask-ai:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4);
}

/* 下一題按鈕 */
.btn-next {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-11);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 在 quiz-action-buttons 容器中時，使用 flex 布局平分空間 */
.quiz-action-buttons .btn-next {
  flex: 1;
  width: auto;
}

.btn-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: var(--font-size-1);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.btn-secondary {
  background: var(--card-bg);
  color: var(--text-color);
  border: 2px solid var(--card-border);
}

.btn-secondary:hover {
  border-color: var(--link-color);
}

/* 即時統計 */
/* 答對答錯統計 - 放在頂部右側 */
.quiz-header-top .quiz-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex: 0 0 calc(50% - 0.5rem);
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  min-height: fit-content;
  box-sizing: border-box;
}

.quiz-header-top .stat-item {
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-label {
  display: inline;
  /* 改為 inline，讓標籤和數字在同一行 */
  font-size: var(--font-size-11);
  color: var(--text-color);
  opacity: 0.6;
}

.stat-value {
  font-size: var(--font-size-15);
  font-weight: bold;
}

.stat-value.correct {
  color: #2ecc71;
}

.stat-value.incorrect {
  color: #e74c3c;
}

/* 結果頁面 */
.quiz-result {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  margin-bottom: 2rem;
}

.result-score {
  font-size: var(--font-size-4);
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.score-number {
  color: #2ecc71;
}

.score-divider {
  color: var(--text-color);
  opacity: 0.3;
  margin: 0 0.25rem;
}

.score-total {
  color: var(--text-color);
  opacity: 0.5;
}

.result-percentage {
  font-size: var(--font-size-2);
  color: var(--link-color);
  margin-bottom: 1.5rem;
}

/* 時間統計改由 QuizCommon.css 共用，全測驗結果頁一致 */

.result-message {
  font-size: var(--font-size-11);
  color: var(--text-color);
}

/* 答題回顧 */
.quiz-review {
  margin-bottom: 2rem;
}

.quiz-review h2 {
  font-size: var(--font-size-125);
  color: var(--text-color);
  margin-bottom: 1rem;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.review-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  border-left: 4px solid;
}

/* 結果頁每題收藏星號 - 在 review-status 右邊，樣式與測驗進行中一致（含 :not(.favorited) 才不會點亮後再點不變暗） */
/* 明確設 position: static 避免被其他 CSS 的 .word-card-favorite-btn { position: absolute } 帶走而跑出視野 */
.quiz-review .review-item .word-card-favorite-btn {
  position: static;
  margin-left: 0.25rem;
  flex-shrink: 0;
  min-width: 28px;
  min-height: 28px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  transition: all 0.3s;
  filter: grayscale(100%) opacity(0.5);
  visibility: visible;
  opacity: 1;
}

.quiz-review .review-item .word-card-favorite-btn:not(.favorited) {
  filter: grayscale(100%) opacity(0.5);
}

.quiz-review .review-item .word-card-favorite-btn.favorited:hover {
  transform: scale(1.2);
  filter: grayscale(0%) opacity(1);
}

.quiz-review .review-item .word-card-favorite-btn:not(.favorited):hover {
  transform: scale(1.2);
  filter: grayscale(100%) opacity(0.5);
}

.quiz-review .review-item .word-card-favorite-btn.favorited {
  filter: grayscale(0%) opacity(1);
}

.review-item.correct {
  border-left-color: #2ecc71;
}

.review-item.incorrect {
  border-left-color: #e74c3c;
}

.review-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-border);
  border-radius: 50%;
  font-size: var(--font-size-085);
  font-weight: bold;
  color: var(--text-color);
  flex-shrink: 0;
}

.review-content {
  flex: 1;
}

.review-word {
  font-size: var(--font-size-125);
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}

.review-reading {
  font-size: var(--font-size-1);
  color: var(--text-color);
  opacity: 1;
}

.review-reading .label {
  opacity: 0.9;
}

.review-reading .correct-answer {
  color: #2ecc71;
  font-weight: 600;
  font-size: 1.05em;
}

.review-reading .user-answer {
  color: #e74c3c;
  font-weight: 500;
}

.review-time {
  font-size: var(--font-size-085);
  color: var(--text-color);
  opacity: 0.6;
  padding: 0.25rem 0.5rem;
  background: var(--card-border);
  border-radius: 4px;
  flex-shrink: 0;
}

.review-status {
  font-size: var(--font-size-15);
  font-weight: bold;
}

.review-item.correct .review-status {
  color: #2ecc71;
}

.review-item.incorrect .review-status {
  color: #e74c3c;
}

/* 按鈕組 */
.quiz-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* 返回連結 */
.back-link {
  display: inline-block;
  color: var(--link-color);
  text-decoration: none;
  margin-top: 1.5rem;
}

.back-link:hover {
  text-decoration: underline;
}

/* 響應式 */
@media (max-width: 600px) {

  /* 抵消 main-content 的 padding-top，減少頂部間距 */
  .main-content>.quiz-page {
    margin-top: 1rem !important;
  }

  .quiz-page {
    padding: 1rem;
    padding-top: 0;
    /* 移除手機版頂部 padding */
  }

  /* 手機版 quiz-header-bar 間距調整 */
  .quiz-page .quiz-header-bar {
    margin-top: -1.5rem !important;
  }

  /* 標題已移除，樣式已刪除 */

  /* 手機版保持水平布局，計時器和統計在同一行 */
  .quiz-header-top {
    flex-direction: row;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }

  .quiz-header-top .quiz-timer {
    flex: 0 0 calc(50% - 0.25rem);
    /* 手機版也保持50%，減去gap的一半 */
    min-width: 0;
  }

  .quiz-header-top .quiz-stats {
    flex: 0 0 calc(50% - 0.25rem);
    gap: 1rem;
    padding: 0.5rem 0.75rem;
  }

  .quiz-header-top .stat-value {
    font-size: var(--font-size-125);
  }

  .quiz-header-top .stat-label {
    font-size: var(--font-size-11);
  }

  .quiz-question .word-card-favorite-btn {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-1);
    top: 0.4rem;
    right: 0.4rem;
  }

  .quiz-timer {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .question-timer {
    border-left: none;
    padding-left: 0;
    width: 100%;
    justify-content: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--card-border);
  }

  .quiz-question {
    padding: 1.5rem 1rem;
  }

  .question-prompt {
    font-size: var(--font-size-1);
  }

  .question-prompt .highlight {
    font-size: var(--font-size-15);
  }

  .choices-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    /* gap 已在基礎樣式後面的媒體查詢中設定 */
  }

  .choice-btn {
    padding: 1rem;
  }

  .choice-text {
    font-size: var(--font-size-1);
  }

  .result-score {
    font-size: var(--font-size-3);
  }

  .review-item {
    flex-wrap: wrap;
  }

  .review-time {
    order: 10;
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
  }

  .quiz-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    text-align: center;
  }
}/* 單字聽力測驗專用樣式 */

/* 測驗頁基礎樣式 */
.quiz-page.listening-quiz {
  max-width: 800px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  /* 固定導航欄高度約 60-80px，進一步壓縮間距避免桌面端出現滾動條 */
  padding-top: calc(80px + 5px); /* 固定導航欄高度 + 最小間距 */
  /* 確保標題不被遮擋 */
  scroll-margin-top: 80px;
}

/* 壓縮計時器和進度條區塊間距 */
.quiz-page.listening-quiz .quiz-header-bar {
  margin-bottom: 0.75rem;
  margin-top: 0.25rem;
  gap: 0.75rem;
}

/* 頂部橫向布局：計時器在左，答對答錯在右 */
.quiz-page.listening-quiz .quiz-header-top {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: stretch; /* 確保兩個面板高度一致 */
}

/* 計時器佔左側一半 */
.quiz-page.listening-quiz .quiz-header-top .quiz-timer {
  flex: 0 0 calc(50% - 0.5rem); /* 佔左側50%，減去gap的一半 */
  min-height: fit-content;
  box-sizing: border-box;
}

/* 答對答錯統計 - 放在頂部右側 */
.quiz-page.listening-quiz .quiz-header-top .quiz-stats {
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中 */
  gap: 2rem;
  flex: 0 0 calc(50% - 0.5rem); /* 佔右側50%，減去gap的一半 */
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  min-height: fit-content;
  box-sizing: border-box;
}

.quiz-page.listening-quiz .quiz-header-top .stat-item {
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quiz-page.listening-quiz .quiz-header-top .stat-label {
  display: inline; /* 改為 inline，讓標籤和數字在同一行 */
  font-size: var(--font-size-11);
  color: var(--text-color);
  opacity: 0.6;
}

.quiz-page.listening-quiz .quiz-header-top .stat-value {
  font-size: var(--font-size-15);
  font-weight: bold;
}

.quiz-page.listening-quiz .quiz-header-top .stat-value.correct {
  color: #2ecc71;
}

.quiz-page.listening-quiz .quiz-header-top .stat-value.incorrect {
  color: #e74c3c;
}

/* 壓縮選項區塊 */
.quiz-page.listening-quiz .choices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* 手機版選項間距砍半 */
@media (max-width: 480px) {
  .quiz-page.listening-quiz .choices-grid {
    gap: 0.375rem !important;
  }
}

.quiz-page.listening-quiz .choice-btn {
  padding: 1rem 1.25rem;
}

/* 壓縮答案反饋區塊 */
.quiz-page.listening-quiz .answer-feedback {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
}

/* 標題已移除，樣式已刪除 */

/* 壓縮題目區塊 */
.quiz-page.listening-quiz .quiz-question {
  padding: 1rem;
  margin-bottom: 1rem;
}

/* 聽力題目提示 */
.listening-prompt {
  font-size: var(--font-size-11);
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

/* 播放按鈕區塊 */
.listening-speaker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 16px;
}

/* 大型播放按鈕 */
.speak-btn-large {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  font-size: var(--font-size-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.speak-btn-large:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.speak-btn-large:active:not(:disabled) {
  transform: scale(0.95);
}

.speak-btn-large:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.speaker-hint {
  font-size: var(--font-size-09);
  color: var(--text-muted);
  margin: 0;
}

/* 答案揭曉後顯示的日文 */
.revealed-word {
  text-align: center;
  margin: 0.75rem 0;
  padding: 0.5rem;
  background: var(--bg-accent);
  border-radius: 12px;
  animation: fadeIn 0.3s ease;
}

.revealed-japanese {
  font-size: var(--font-size-2);
  font-weight: 700;
  color: var(--text-primary);
}

.revealed-reading {
  font-size: var(--font-size-12);
  color: var(--text-secondary);
  margin-left: 0.5rem;
}

/* 回顧列表中的發音按鈕 */
.review-speak-btn {
  background: none;
  border: none;
  font-size: var(--font-size-12);
  cursor: pointer;
  padding: 0.25rem;
  margin-left: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.review-speak-btn:hover {
  opacity: 1;
}

/* 回顧項目中的日文和讀音 */
.review-japanese {
  font-weight: 600;
}

.review-reading {
  color: var(--text-secondary);
  font-size: var(--font-size-09);
}

/* 動畫 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 響應式 */
@media (max-width: 480px) {
  /* 抵消 main-content 的 padding-top，減少頂部間距 */
  .main-content > .quiz-page.listening-quiz {
    margin-top: 1rem !important;
  }

  .quiz-page.listening-quiz {
    padding: 1rem;
    padding-top: 0; /* 移除手機版頂部 padding */
  }

  /* 手機版 quiz-header-bar 間距調整 */
  .quiz-page.listening-quiz .quiz-header-bar {
    margin-top: -1.5rem !important;
  }

  /* 手機版保持水平布局，計時器和統計在同一行 */
  .quiz-page.listening-quiz .quiz-header-top {
    flex-direction: row;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }

  .quiz-page.listening-quiz .quiz-header-top .quiz-timer {
    flex: 0 0 calc(50% - 0.25rem); /* 手機版也保持50%，減去gap的一半 */
    min-width: 0;
  }

  .quiz-page.listening-quiz .quiz-header-top .quiz-stats {
    flex: 0 0 calc(50% - 0.25rem); /* 手機版也保持50%，減去gap的一半 */
    gap: 1rem;
    padding: 0.5rem 0.75rem;
  }

  .quiz-page.listening-quiz .quiz-header-top .stat-value {
    font-size: var(--font-size-125);
  }

  .quiz-page.listening-quiz .quiz-header-top .stat-label {
    font-size: var(--font-size-11);
  }

  /* 手機版保持兩列布局 */
  .quiz-page.listening-quiz .choices-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    /* gap 已在基礎樣式後面的媒體查詢中設定 */
  }

  .speak-btn-large {
    width: 80px;
    height: 80px;
    font-size: var(--font-size-25);
  }

  .listening-speaker {
    padding: 0.75rem;
    margin: 0.75rem 0;
  }

  /* 手機版隱藏「點擊播放」文字 */
  .speaker-hint {
    display: none;
  }

  .revealed-japanese {
    font-size: var(--font-size-15);
  }

  .revealed-reading {
    font-size: var(--font-size-1);
  }
}

/* 會話聽力練習專用樣式 */

/* 測驗頁基礎樣式 */
.quiz-page.conversation-listening-quiz {
  max-width: 800px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  /* 固定導航欄高度約 60-80px，進一步壓縮間距避免桌面端出現滾動條 */
  padding-top: calc(80px + 5px); /* 固定導航欄高度 + 最小間距 */
  /* 確保標題不被遮擋 */
  scroll-margin-top: 80px;
}

/* 壓縮計時器和進度條區塊間距 */
.quiz-page.conversation-listening-quiz .quiz-header-bar {
  margin-bottom: 0.75rem;
  margin-top: 0.25rem;
  gap: 0.75rem;
}

/* 標題已移除，樣式已刪除 */

/* 看答案按鈕 */
.btn-show-answer {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  padding: 0.75rem 1.5rem;
  font-size: var(--font-size-11);
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-show-answer:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.btn-show-answer:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 答案揭曉區塊 */
.answer-reveal {
  text-align: center;
  padding: 1.5rem;
  background: var(--bg-secondary);
  border-radius: 16px;
  margin: 1rem 0;
  animation: fadeInUp 0.3s ease;
}

.answer-level-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-08);
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: 20px;
  margin-bottom: 0.5rem;
}

.answer-category {
  font-size: var(--font-size-09);
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.answer-japanese {
  font-size: var(--font-size-18);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.answer-reading {
  font-size: var(--font-size-11);
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.answer-translation {
  font-size: var(--font-size-12);
  color: var(--accent-color);
  font-weight: 500;
  padding: 1rem;
  background: var(--bg-accent);
  border-radius: 8px;
}

/* 結果頁標題 */
.result-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.result-icon {
  font-size: var(--font-size-25);
}

.result-title {
  font-size: var(--font-size-15);
  font-weight: 700;
  color: var(--text-primary);
}

/* 回顧項目 - 會話專用 */
.conversation-listening-quiz .review-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 12px;
  margin-bottom: 0.75rem;
}

/* 結果頁右側：秒數 + 發音鈕，靠右、發音在秒數下方 */
.conversation-listening-quiz .review-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.conversation-listening-quiz .review-right .review-time {
  font-size: var(--font-size-085);
  color: var(--text-color);
  opacity: 0.8;
  padding: 0.25rem 0.5rem;
  background: var(--card-border);
  border-radius: 4px;
}

.review-level-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: var(--font-size-07);
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: 12px;
  margin-right: 0.5rem;
}

.review-category {
  display: inline-block;
  font-size: var(--font-size-08);
  color: var(--text-muted);
}

.review-word {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.review-japanese {
  font-size: var(--font-size-11);
  font-weight: 600;
  color: var(--text-primary);
}

.review-reading {
  font-size: var(--font-size-09);
  color: var(--text-secondary);
}

/* 無 ruby 時下一行顯示讀音 (h) */
.conversation-listening-quiz .review-reading-line {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--font-size-09);
  color: var(--text-secondary);
}

.review-translation {
  font-size: var(--font-size-095);
  color: var(--accent-color);
  margin-top: 0.5rem;
}

.review-speak-btn {
  background: none;
  border: none;
  font-size: var(--font-size-11);
  cursor: pointer;
  padding: 0.2rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.review-speak-btn:hover {
  opacity: 1;
}

/* 動畫 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 響應式 */
@media (max-width: 480px) {
  /* 抵消 main-content 的 padding-top，減少頂部間距 */
  .main-content > .quiz-page.conversation-listening-quiz {
    margin-top: 1rem !important;
  }

  .quiz-page.conversation-listening-quiz {
    padding: 1rem;
    padding-top: 0; /* 移除手機版頂部 padding */
  }

  /* 手機版 quiz-header-bar 間距調整 */
  .quiz-page.conversation-listening-quiz .quiz-header-bar {
    margin-top: -1.5rem !important;
  }

  /* 手機版 listening-speaker 間距調整 */
  .listening-speaker {
    padding: 0.75rem;
    margin: 0.75rem 0;
  }

  /* 手機版隱藏「點擊播放」文字 */
  .speaker-hint {
    display: none;
  }

  .answer-japanese {
    font-size: var(--font-size-14);
  }

  .answer-translation {
    font-size: var(--font-size-1);
  }

  .conversation-listening-quiz .review-item {
    grid-template-columns: 30px 1fr 50px;
  }

  /* 覆寫其他測驗的 .review-time { order: 10 }，維持秒數在上、發音鈕在下 */
  .conversation-listening-quiz .review-right .review-time {
    order: 0;
    width: auto;
    margin-top: 0;
    text-align: right;
  }
  .conversation-listening-quiz .review-right .review-speak-btn {
    order: 1;
  }

  .review-japanese {
    font-size: var(--font-size-1);
  }
}

/* 例句聽力練習專用樣式 */

/* 測驗頁基礎樣式 */
.quiz-page.sentence-listening-quiz {
  max-width: 800px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  /* 固定導航欄高度約 60-80px，進一步壓縮間距避免桌面端出現滾動條 */
  padding-top: calc(80px + 5px); /* 固定導航欄高度 + 最小間距 */
  /* 確保標題不被遮擋 */
  scroll-margin-top: 80px;
}

/* 壓縮計時器和進度條區塊間距 */
.quiz-page.sentence-listening-quiz .quiz-header-bar {
  margin-bottom: 0.75rem;
  margin-top: 0.25rem;
  gap: 0.75rem;
}

/* 標題已移除，樣式已刪除 */

/* 尚未開放提示 */
.quiz-unavailable {
  text-align: center;
  padding: 3rem 1rem;
}

.unavailable-icon {
  font-size: var(--font-size-4);
  margin-bottom: 1rem;
}

.unavailable-message {
  font-size: var(--font-size-12);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.unavailable-hint {
  font-size: var(--font-size-095);
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* 答案區塊 - 例句專用 */
.sentence-listening-quiz .answer-reveal {
  text-align: center;
  padding: 1.5rem;
  background: var(--bg-secondary);
  border-radius: 16px;
  margin: 1rem 0;
  animation: fadeInUp 0.3s ease;
}

.answer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.answer-level-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-08);
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 20px;
}

.answer-word-label {
  font-size: var(--font-size-09);
  color: var(--text-muted);
}

/* 行高桌機與手機皆 2.2 */
.sentence-listening-quiz .answer-japanese {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 2.2;
}

.sentence-listening-quiz .answer-japanese ruby {
  ruby-align: center;
  ruby-overhang: auto;
}
.sentence-listening-quiz .answer-japanese rt {
  font-size: 0.6em;
  opacity: 0.85;
}

.sentence-listening-quiz .answer-reading-line {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.95em;
  color: var(--text-secondary);
}

.sentence-listening-quiz .review-reading-line {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.95em;
  color: var(--text-secondary);
}

.sentence-listening-quiz .answer-translation {
  font-size: var(--font-size-11);
  color: var(--accent-color);
  font-weight: 500;
  padding: 1rem;
  background: var(--bg-accent);
  border-radius: 8px;
  line-height: 2.2;
}

/* 回顧列表 - 例句專用 */
.sentence-listening-quiz .review-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 12px;
  margin-bottom: 0.75rem;
}

/* 結果頁右側：秒數 + 發音鈕，靠右、發音在秒數下方 */
.sentence-listening-quiz .review-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.sentence-listening-quiz .review-right .review-time {
  font-size: var(--font-size-085);
  color: var(--text-color);
  opacity: 0.8;
  padding: 0.25rem 0.5rem;
  background: var(--card-border);
  border-radius: 4px;
}

.review-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.review-level-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: var(--font-size-07);
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 12px;
}

.review-word-label {
  font-size: var(--font-size-085);
  color: var(--text-muted);
}

.review-sentence {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sentence-listening-quiz .review-japanese {
  font-size: var(--font-size-105);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 2.2;
}

.sentence-listening-quiz .review-translation {
  line-height: 2.2;
}

.sentence-listening-quiz .review-japanese ruby {
  ruby-align: center;
  ruby-overhang: auto;
}
.sentence-listening-quiz .review-japanese rt {
  font-size: 0.6em;
  opacity: 0.85;
}

.sentence-listening-quiz .review-translation {
  font-size: var(--font-size-095);
  color: var(--accent-color);
  margin-top: 0.5rem;
}

.review-speak-btn {
  background: none;
  border: none;
  font-size: var(--font-size-11);
  cursor: pointer;
  padding: 0.2rem;
  opacity: 0.7;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.review-speak-btn:hover {
  opacity: 1;
}

/* 動畫 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 響應式 */
@media (max-width: 480px) {
  /* 抵消 main-content 的 padding-top，減少頂部間距 */
  .main-content > .quiz-page.sentence-listening-quiz {
    margin-top: 1rem !important;
  }

  .quiz-page.sentence-listening-quiz {
    padding: 1rem;
    padding-top: 0; /* 移除手機版頂部 padding */
  }

  /* 手機版 quiz-header-bar 間距調整 */
  .quiz-page.sentence-listening-quiz .quiz-header-bar {
    margin-top: -1.5rem !important;
  }

  /* 手機版 listening-speaker 間距調整 */
  .listening-speaker {
    padding: 0.75rem;
    margin: 0.75rem 0;
  }

  /* 手機版隱藏「點擊播放」文字 */
  .speaker-hint {
    display: none;
  }

  /* 手機版行高與 Word Detail 例句一致：日文 2.2、翻譯 1.6；例句可點擊放大 */
  .sentence-listening-quiz .answer-japanese {
    font-size: var(--font-size-12);
    line-height: 2.2;
    cursor: pointer;
    transition: font-size 0.25s ease;
  }

  .sentence-listening-quiz .answer-reveal--zoomed .answer-japanese {
    font-size: 1.4em;
  }

  .sentence-listening-quiz .answer-translation {
    font-size: var(--font-size-1);
    line-height: 1.6;
  }

  .sentence-listening-quiz .review-japanese {
    line-height: 2.2;
    cursor: pointer;
    transition: font-size 0.25s ease;
  }

  .sentence-listening-quiz .review-item--zoomed .review-japanese {
    font-size: 1.4em;
  }

  .sentence-listening-quiz .review-translation {
    line-height: 1.6;
  }

  .sentence-listening-quiz .review-item {
    grid-template-columns: 30px 1fr 50px;
  }

  /* 覆寫其他測驗的 .review-time { order: 10 }，維持秒數在上、發音鈕在下 */
  .sentence-listening-quiz .review-right .review-time {
    order: 0;
    width: auto;
    margin-top: 0;
    text-align: right;
  }
  .sentence-listening-quiz .review-right .review-speak-btn {
    order: 1;
  }

  .sentence-listening-quiz .review-japanese {
    font-size: var(--font-size-095);
  }
}

/* FavoriteQuizPage 樣式 */

.favorite-quiz-page {
  padding-bottom: 2rem;
}

/* 桌機版：與單字「我的最愛」頁一致 - 容器寬度、頂部間距、麵包屑、標題大小 */
@media (min-width: 768px) {
  .favorite-quiz-page.word-list {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 0;
    /* 覆蓋其他測驗頁 .quiz-page 的 padding-top，與單字最愛一致 */
  }

  .favorite-quiz-page.word-list .breadcrumb {
    margin-bottom: 0.875rem;
    padding: 0.625rem 0;
  }

  .favorite-quiz-page.word-list .breadcrumb-item {
    font-size: var(--font-size-0875);
  }

  .favorite-quiz-page.word-list h1 {
    font-size: var(--font-size-175);
    margin-bottom: 1.25rem;
    color: var(--text-color, #2c3e50);
  }
}

/* 標題區域 */
.favorite-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.favorite-header h1 {
  margin: 0;
  font-size: var(--font-size-15);
}

.favorite-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.btn-batch-mode {
  padding: 0.5rem 1rem;
  border: 1px solid var(--card-border, #ddd);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-size-09);
  color: var(--text-color, #333);
  transition: all 0.2s;
}

.btn-batch-mode:hover {
  background: var(--card-bg-hover, #f5f5f5);
}

.btn-batch-mode.active {
  background: var(--primary-color, #3498db);
  color: white;
  border-color: var(--primary-color, #3498db);
}

.btn-batch-delete {
  padding: 0.5rem 1rem;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-size-09);
  transition: all 0.2s;
}

.btn-batch-delete:hover:not(:disabled) {
  background: #c0392b;
}

.btn-batch-delete:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 篩選欄 */
.filter-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--card-border, #ddd);
  background: var(--card-bg, #fff);
  border-radius: 20px;
  cursor: pointer;
  font-size: var(--font-size-085);
  color: var(--text-color, #333);
  transition: all 0.2s;
  white-space: nowrap;
}

.filter-btn:hover {
  background: var(--card-bg-hover, #f5f5f5);
}

.filter-btn.active {
  background: var(--primary-color, #3498db);
  color: white;
  border-color: var(--primary-color, #3498db);
}

/* 批次控制欄 */
.batch-control-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--card-bg, #f8f9fa);
  border-radius: 6px;
  margin-bottom: 1rem;
}

.batch-count {
  font-size: var(--font-size-085);
  color: var(--text-muted, #666);
}

.select-all-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: var(--font-size-085);
}

.select-all-checkbox input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* 題目列表 */
.favorite-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 空狀態 */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-color, #333);
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state p {
  font-size: var(--font-size-11);
  margin: 0.5rem 0;
}

.btn-back-to-quiz {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color, #3498db);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-size: var(--font-size-1);
  transition: background 0.2s;
}

.btn-back-to-quiz:hover {
  background: var(--primary-dark, #2980b9);
}

/* 單個題目項目 */
.favorite-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border, #ddd);
  border-radius: 8px;
  transition: all 0.2s;
  position: relative;
}

.favorite-item:hover {
  border-color: var(--primary-color, #3498db);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.favorite-item.batch-mode {
  cursor: pointer;
}

.favorite-item.batch-mode:hover {
  background: var(--card-bg-hover, #f5f5f5);
}

.favorite-item.selected {
  background: rgba(52, 152, 219, 0.1);
  border-color: var(--primary-color, #3498db);
}

/* 批次模式：選取框在右邊（item-content 左、checkbox 右） */
.favorite-item .item-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

/* 題目內容（靠左對齊） */
.item-content {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.content-main {
  font-size: var(--font-size-1);
  color: var(--text-color, #333);
  word-break: break-word;
  text-align: left;
}

.content-sub {
  margin-top: 0.3rem;
  font-size: var(--font-size-085);
  color: var(--text-muted, #666);
  text-align: left;
}

.answer-kanji {
  color: var(--primary-color, #3498db);
  font-weight: 500;
}

.answer-text {
  color: var(--success-color, #27ae60);
}

.answer-fragments {
  color: var(--text-muted, #888);
  font-style: italic;
}

/* 刪除按鈕 - 與單字收藏一模一樣 */
.favorite-remove-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-1);
  z-index: 10;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.favorite-remove-btn:hover {
  background: #c0392b;
  transform: scale(1.1);
}

/* 響應式 */
@media (max-width: 768px) {
  .favorite-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .favorite-header h1 {
    font-size: var(--font-size-13);
  }

  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .favorite-item {
    flex-wrap: wrap;
  }

  .item-content {
    width: 100%;
    margin-top: 0;
  }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  .btn-batch-mode {
    border-color: #555;
  }

  .btn-batch-mode:hover {
    background: #333;
  }

  .filter-btn {
    background: #2a2a2a;
    border-color: #444;
  }

  .filter-btn:hover {
    background: #333;
  }

  .batch-control-bar {
    background: #2a2a2a;
  }

  .favorite-item {
    background: #2a2a2a;
    border-color: #444;
  }

  .favorite-item:hover {
    background: #333;
  }
}/* 測驗選單頁專用：max-width 1200px，避免被其他測驗頁的 .quiz-page { max-width: 800px } 覆蓋 */
.quiz-page.quiz-menu-page {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  text-align: center;
  padding: 4rem 0;
}

/* 返回按鈕 */
.mobile-back-btn {
  background: #9e9e9e;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 1rem;
  display: none; /* 預設隱藏，只在手機版顯示 */
}

.mobile-back-btn:hover {
  background: #757575;
}

.quiz-page h1 {
  font-size: var(--font-size-3);
  margin-bottom: 3rem;
  color: var(--text-color);
}

/* 手機版樣式 */
@media (max-width: 768px) {

  /* 抵消 main-content 的 padding-top，減少頂部間距 */
  .main-content>.quiz-page {
    margin-top: 0px !important;
  }

  .quiz-page {
    padding: 1rem 0 !important;
    padding-top: 2rem !important;
  }

  .quiz-page h1 {
    font-size: var(--font-size-2);
    margin-bottom: 1rem;
  }

  /* 手機版隱藏返回按鈕（使用 navbar 上的返回鍵） */
  .mobile-back-btn {
    display: none !important;
  }

  /* 減少麵包屑間距 - 覆蓋 QuizCommon.css 的設定，與單字頁保持一致 */
  .quiz-page .breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    padding: 0.5rem 0 !important;
  }

  .quiz-category-card {
    gap: 0.75rem;
  }

  .category-icon {
    font-size: 2.5rem;
  }

  .category-title {
    font-size: var(--font-size-125);
    text-align: left;
  }
}

.coming-soon {
  font-size: var(--font-size-15);
  color: var(--text-color);
  opacity: 0.7;
  margin-bottom: 3rem;
}

/* 與單字選單頁同寬：填滿 main-content 內容區，不另設 max-width */
.quiz-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 桌機：四個一行 */
@media (min-width: 769px) {
  .quiz-categories {
    grid-template-columns: repeat(4, 1fr);
  }
}

.quiz-category-card {
  padding: 1.5rem;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 2px solid transparent;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.quiz-category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.quiz-category-card:hover::before {
  opacity: 1;
}

.quiz-category-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.category-icon {
  font-size: 3rem;
  line-height: 1;
  transition: transform 0.3s;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  flex-shrink: 0;
}

.quiz-category-card:hover .category-icon {
  transform: scale(1.1) rotate(5deg);
}

/* 根據等級設置卡片顏色 */
.quiz-category-card.level-N5 {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border-color: #27ae60;
  color: white;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
}

.quiz-category-card.level-N5:hover {
  box-shadow: 0 8px 24px rgba(39, 174, 96, 0.3);
}

.quiz-category-card.level-N4 {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  border-color: #9b59b6;
  color: white;
  box-shadow: 0 4px 12px rgba(155, 89, 182, 0.2);
}

.quiz-category-card.level-N4:hover {
  box-shadow: 0 8px 24px rgba(155, 89, 182, 0.3);
}

.quiz-category-card.level-N3 {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  border-color: #f39c12;
  color: white;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.2);
}

.quiz-category-card.level-N3:hover {
  box-shadow: 0 8px 24px rgba(243, 156, 18, 0.3);
}

.quiz-category-card.level-N2 {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  border-color: #e67e22;
  color: white;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.2);
}

.quiz-category-card.level-N2:hover {
  box-shadow: 0 8px 24px rgba(230, 126, 34, 0.3);
}

.quiz-category-card.level-N1 {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-color: #e74c3c;
  color: white;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

.quiz-category-card.level-N1:hover {
  box-shadow: 0 8px 24px rgba(231, 76, 60, 0.3);
}

.category-title-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.category-title {
  font-size: var(--font-size-15);
  font-weight: bold;
  line-height: var(--line-height-base);
  text-align: left;
  transition: transform 0.3s;
  white-space: nowrap;
}

.category-title-sub {
  font-size: var(--font-size-09);
  opacity: 0.9;
  line-height: 1.3;
  text-align: left;
}

.quiz-category-card:hover .category-title {
  transform: translateX(2px);
}

.back-link {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
  background: var(--link-color);
  color: white;
}

.back-link:hover {
  background: var(--link-hover);
}

/* 當 main-content 裡有淹水遊戲時：頂部 AdSlot + 下方遊戲區填滿 */
.main-content:has(.flood-game-outer) {
  position: relative;
  padding: 0;
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}
.main-content:has(.flood-game-outer) .flood-game-outer {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.main-content:has(.flood-game-outer) .flood-top-ad {
  flex-shrink: 0;
  width: 100%;
}
.main-content:has(.flood-game-outer) .flood-game-outer .flood-game.flood-game-playing {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  position: relative;
}

.flood-game {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  background: linear-gradient(180deg, #87ceeb 0%, #e0f4ff 40%, #fff 70%);
}

/* 遊戲中：在現有內容區內滿版（寬+高），題目疊在水面上 */
.flood-game-outer .flood-game.flood-game-playing {
  display: block;
  padding: 0;
  width: 100%;
  min-width: 100%;
  position: relative;
  height: calc(100vh - 120px);
  min-height: 320px;
  box-sizing: border-box;
}
.flood-game-playing .flood-game-scene {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  border-radius: 12px;
  margin: 0;
  border: none;
  box-sizing: border-box;
  overflow: hidden;
}

/* 天空：任天堂卡通雲（橢圓疊成雲團）＋background-position 飄動，只動雲、不動天空地面 */
.flood-scene-bg {
  position: absolute;
  inset: 0;
  background:
    /* ☁ 雲 1 */
    radial-gradient(ellipse 60px 40px at 18% 10%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0.6) 75%, transparent 100%),
    radial-gradient(ellipse 70px 45px at 22% 9%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0.6) 75%, transparent 100%),
    /* ☁ 雲 2 */
    radial-gradient(ellipse 65px 40px at 48% 12%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0.6) 75%, transparent 100%),
    radial-gradient(ellipse 75px 45px at 52% 10%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0.6) 75%, transparent 100%),
    /* ☁ 雲 3 */
    radial-gradient(ellipse 60px 38px at 72% 11%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0.6) 75%, transparent 100%),
    radial-gradient(ellipse 70px 45px at 76% 9%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0.6) 75%, transparent 100%),
    /* 🌤 天空地面 */
    linear-gradient(180deg, #5ec9ff 0%, #9fe3ff 60%, #7ed957 60%, #4caf50 100%);
  background-repeat: no-repeat;
  background-size:
    200% 100%,
    200% 100%,
    220% 100%,
    220% 100%,
    240% 100%,
    240% 100%,
    100% 100%;
  background-position:
    0% 0%,
    0% 0%,
    0% 0%,
    0% 0%,
    0% 0%,
    0% 0%,
    0% 0%;
  z-index: 0;
  transition: background 0.6s ease;
  animation: cloudDrift 90s linear infinite;
}
@keyframes cloudDrift {
  0% {
    background-position:
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%;
  }
  100% {
    background-position:
      -20% 0%,
      -20% 0%,
      -10% 0%,
      -10% 0%,
      -5% 0%,
      -5% 0%,
      0% 0%;
  }
}
/* 水位 ≥50% 時：卡通暴雨雲＋黑天（不套用飄動，層數不同） */
.flood-scene-bg.flood-scene-bg-sky-dark {
  animation: none;
  background:
    radial-gradient(ellipse 70px 45px at 25% 10%, rgba(60, 70, 90, 0.9) 0%, rgba(60, 70, 90, 0.7) 70%, transparent 100%),
    radial-gradient(ellipse 75px 50px at 50% 11%, rgba(60, 70, 90, 0.9) 0%, rgba(60, 70, 90, 0.7) 70%, transparent 100%),
    radial-gradient(ellipse 70px 45px at 75% 9%, rgba(60, 70, 90, 0.9) 0%, rgba(60, 70, 90, 0.7) 70%, transparent 100%),
    linear-gradient(180deg, #263238 0%, #37474f 60%, #2e7d32 60%, #1b5e20 100%);
}
/* 地面：卡通草地，高度 80%（人與平台仍在原位置）。與 scene-bg 重疊：scene-bg 上為藍天+雲、下為綠，land 蓋住下 80% 故只露出上 20% 藍天。 */
.flood-land {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  background: linear-gradient(180deg, #66bb6a 0%, #43a047 100%);
  border-top: 4px solid #2e7d32;
  z-index: 1;
}

/* 水層：從底往上，含波動 */
.flood-game-playing .flood-water-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  pointer-events: none;
}
.flood-game-playing .flood-water-wrap .flood-water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: height 0.25s ease;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 水層：卡通扁平波浪，無 blur／玻璃感 */
.flood-water-wave {
  position: relative;
  overflow: hidden;
  background: #2196f3;
  border-top: 4px solid #1565c0;
}
.flood-water-wave::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -50%;
  width: 200%;
  height: 40px;
  background: radial-gradient(circle at 25px 25px, #42a5f5 25px, transparent 26px) repeat-x;
  background-size: 50px 40px;
  animation: cartoonWave 3s linear infinite;
  pointer-events: none;
}
@keyframes cartoonWave {
  0% { transform: translateX(0); }
  100% { transform: translateX(50px); }
}

/* 魚在水裡游（魚自身 blur 即可，不整層糊） */
.flood-sharks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.flood-shark {
  position: absolute;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  line-height: 1;
  opacity: 1;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.3));
  display: inline-block;
  /* 用「魚的底部」對齊 keyframes 的 bottom，整條魚（含體積）都在水面下 */
  transform-origin: center bottom;
  box-sizing: border-box;
}
/* 魚：外層做位移，內層 .flood-shark-emoji 做轉身，對話框與 emoji 同級故不跟隨翻轉 */
.flood-shark-1 { animation: flood-fish-swim-1-pos 14s ease-in-out infinite; }
.flood-shark-1 .flood-shark-emoji { animation: flood-fish-swim-1-dir 14s ease-in-out infinite; }
.flood-shark-2 { animation: flood-fish-swim-2-pos 12s ease-in-out infinite; }
.flood-shark-2 .flood-shark-emoji { animation: flood-fish-swim-2-dir 12s ease-in-out infinite; }
.flood-shark-3 { animation: flood-fish-swim-3-pos 16s ease-in-out infinite; }
.flood-shark-3 .flood-shark-emoji { animation: flood-fish-swim-3-dir 16s ease-in-out infinite; }
.flood-shark-emoji {
  display: inline-block;
  transform-origin: center bottom;
}
/* 對話框在魚上方，跟著魚動但不隨魚轉身（與 flood-shark-emoji 同級） */
.flood-hunger-bubble {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 0.15em;
  font-size: 11px;
  color: #c62828;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.25em 0.5em;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  pointer-events: none;
  z-index: 4;
  animation: flood-hunger-fade 2.2s ease-in-out;
}
@keyframes flood-hunger-fade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}
/* 魚：位置 keyframes（left, bottom） */
@keyframes flood-fish-swim-1-pos {
  0%, 100% { left: 8%; bottom: 12%; }
  25% { left: 75%; bottom: 52%; }
  50% { left: 40%; bottom: 68%; }
  75% { left: 85%; bottom: 38%; }
}
@keyframes flood-fish-swim-2-pos {
  0%, 100% { left: 80%; bottom: 42%; }
  33% { left: 15%; bottom: 65%; }
  66% { left: 70%; bottom: 20%; }
}
@keyframes flood-fish-swim-3-pos {
  0%, 100% { left: 50%; bottom: 60%; }
  25% { left: 10%; bottom: 22%; }
  50% { left: 90%; bottom: 68%; }
  75% { left: 25%; bottom: 45%; }
}
/* 高水位（≥50%）：魚偏在高處游，比題目區更高，增加被看見機率 */
.flood-sharks-high-water .flood-shark-1 { animation: flood-fish-swim-1-pos-high 14s ease-in-out infinite; }
.flood-sharks-high-water .flood-shark-2 { animation: flood-fish-swim-2-pos-high 12s ease-in-out infinite; }
.flood-sharks-high-water .flood-shark-3 { animation: flood-fish-swim-3-pos-high 16s ease-in-out infinite; }
@keyframes flood-fish-swim-1-pos-high {
  0%, 100% { left: 8%; bottom: 58%; }
  25% { left: 75%; bottom: 72%; }
  50% { left: 40%; bottom: 78%; }
  75% { left: 85%; bottom: 62%; }
}
@keyframes flood-fish-swim-2-pos-high {
  0%, 100% { left: 80%; bottom: 65%; }
  33% { left: 15%; bottom: 78%; }
  66% { left: 70%; bottom: 55%; }
}
@keyframes flood-fish-swim-3-pos-high {
  0%, 100% { left: 50%; bottom: 70%; }
  25% { left: 10%; bottom: 58%; }
  50% { left: 90%; bottom: 76%; }
  75% { left: 25%; bottom: 68%; }
}
/* 魚：轉身 keyframes（只套在 .flood-shark-emoji，對話框不翻轉） */
@keyframes flood-fish-swim-1-dir {
  0%, 100% { transform: scaleX(1); }
  25% { transform: scaleX(-1); }
  50% { transform: scaleX(1); }
  75% { transform: scaleX(-1); }
}
@keyframes flood-fish-swim-2-dir {
  0%, 100% { transform: scaleX(-1); }
  33% { transform: scaleX(1); }
  66% { transform: scaleX(-1); }
}
@keyframes flood-fish-swim-3-dir {
  0%, 100% { transform: scaleX(1); }
  25% { transform: scaleX(-1); }
  50% { transform: scaleX(1); }
  75% { transform: scaleX(-1); }
}

/* 陸地頂部平台（人站的地方），卡通綠＋描邊，高度佈局不變 */
.flood-mountain-platform {
  position: absolute;
  left: 0;
  right: 0;
  height: 10%;
  background: linear-gradient(180deg, #66bb6a 0%, #43a047 100%);
  border-top: 3px solid #2e7d32;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2);
}

/* 人在陸地上走來走去（z-index 設最大確保在最上層） */
.flood-character {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483647;
  transition: bottom 0.3s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4));
}
/* 助けて! 跟人同位置但不隨人轉身（只做左右位移），track 與人同高讓氣泡在頭頂 */
.flood-help-track {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483646;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(2rem, 8vw, 3.5rem);
}
.flood-character-walk-pos {
  animation: flood-walk-pos var(--walk-duration, 22s) ease-in-out infinite;
}
@keyframes flood-walk-pos {
  0%, 100% { left: 5%; transform: translateX(-50%); }
  50% { left: var(--walk-turn, 95%); transform: translateX(-50%); }
}
.flood-help {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 0.2em;
  font-size: 11px;
  font-weight: bold;
  color: #c62828;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.2em 0.45em;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.flood-help.flood-help-visible {
  opacity: 1;
  transition: opacity 0.35s ease;
}
.flood-character-walk {
  animation: flood-walk var(--walk-duration, 22s) ease-in-out infinite;
}
@keyframes flood-walk {
  0% { left: 5%; transform: translateX(-50%) scaleX(-1); }
  49% { left: var(--walk-turn, 95%); transform: translateX(-50%) scaleX(-1); }
  51% { left: var(--walk-turn, 95%); transform: translateX(-50%) scaleX(1); }
  100% { left: 5%; transform: translateX(-50%) scaleX(1); }
}

/* 下雨：極限自然版 — 三層、每層雙 pattern、漸層頭尾、不同風速/角度（height 由 inline 控制） */
.flood-rain-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 5;
  transform: translateZ(0);
  will-change: background-position;
}

/* 雨：卡通雨，三層同一簡單 pattern，無寫實紋理 */
.flood-rain-back,
.flood-rain-mid,
.flood-rain-front {
  background: repeating-linear-gradient(
    -75deg,
    #ffffff 0px,
    #ffffff 3px,
    transparent 3px,
    transparent 18px
  );
  background-size: 120% 40px;
  opacity: 0.6;
  animation: cartoonRain 0.4s linear infinite;
}
.flood-rain-mid { animation-delay: -0.15s; }
@keyframes cartoonRain {
  0% { background-position: 0 0; }
  100% { background-position: -20px 40px; }
}
/* 打雷：卡通閃白 */
.flood-rain-overlay.flood-thunder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: cartoonThunder 3s ease-in-out infinite;
}
@keyframes cartoonThunder {
  0%, 85%, 100% { opacity: 0; }
  90% { opacity: 0.9; }
}
/* 除錯：加上 .flood-rain-debug 可看到雨層範圍（半透明紅），確認有渲染 */
.flood-rain-overlay.flood-rain-debug {
  background: rgba(255, 0, 0, 0.2) !important;
  opacity: 1;
}

/* 題數 1/10 置頂（卡通卡片風，無 blur） */
.flood-progress {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  background: #ffffff;
  border: 3px solid #000;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 0 #000;
  z-index: 10;
  pointer-events: none;
}

.flood-game-playing .flood-game-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
  z-index: 20;
}
.flood-game-playing .flood-game-ui > * {
  pointer-events: auto;
}
.flood-game-playing .flood-question {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  color: #000;
  border: 3px solid #000;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0;
  box-shadow: 0 6px 0 #000;
}
.flood-game-playing .flood-question .flood-word,
.flood-game-playing .flood-question .flood-reading {
  color: #000;
}
.flood-game-playing .flood-question .flood-reading {
  opacity: 1;
  color: #333;
}
.flood-game-playing .flood-choices {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.flood-game-playing .flood-choice-btn {
  background: #ffeb3b;
  color: #000;
  border: 3px solid #000;
  font-weight: bold;
  box-shadow: 0 4px 0 #000;
}
.flood-game-playing .flood-choice-btn:hover:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #000;
}

.flood-game-start,
.flood-game-end {
  text-align: center;
  max-width: 360px;
}

.flood-game-end-fish {
  font-size: 2.5rem;
  line-height: 1;
  margin: 0 0 0.5rem;
}

/* 對話框：サメ的台詞 */
.flood-game-end-dialogue {
  margin: 0.5rem 0;
  padding: 0.75rem 1rem;
  font-size: 1.05rem;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* 答對幾題：較小、偏副資訊 */
.flood-game-end-count {
  margin: 0.75rem 0 0.5rem;
  font-size: 0.9rem;
  color: var(--text-color-secondary, #666);
  font-weight: 500;
}

.flood-game-start h1,
.flood-game-end h1 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.flood-game-start p,
.flood-game-end p {
  margin-bottom: 0.5rem;
  color: var(--text-color, #333);
}

.flood-game-btn {
  margin-top: 1.5rem;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  border: none;
  border-radius: 8px;
  background: #2196f3;
  color: #fff;
  cursor: pointer;
}

.flood-game-btn:hover {
  background: #1976d2;
}

.flood-game-scene {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #87ceeb 0%, #b3e5fc 100%);
  margin-bottom: 1rem;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.flood-water-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}

.flood-water {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(33, 150, 243, 0.5) 0%, rgba(33, 150, 243, 0.85) 100%);
  transition: height 0.3s ease;
}

.flood-character {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  transition: bottom 0.3s ease;
}
.flood-game-playing .flood-character {
  font-size: clamp(2rem, 8vw, 3.5rem);
  line-height: 1;
  z-index: 2147483647;
}

.flood-game-ui {
  width: 100%;
  max-width: 360px;
}

.flood-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-color, #333);
}

.flood-question {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.flood-word {
  font-size: 1.75rem;
  margin: 0 0 0.25rem 0;
  font-weight: bold;
}

.flood-reading {
  font-size: 1rem;
  margin: 0;
  color: #666;
}

.flood-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.flood-choice-btn {
  padding: 0.9rem 1rem;
  font-size: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.flood-choice-btn:hover:not(:disabled) {
  background: #e3f2fd;
  border-color: #2196f3;
}

.flood-choice-btn:disabled {
  cursor: default;
  opacity: 0.8;
}
/* 導入共用組件樣式 */
/**
 * 發音按鈕統一樣式
 * 
 * 使用方式：
 * - .speak-btn           基礎樣式（藍色圓形，32px）
 * - .speak-btn--sm       小尺寸（32px）- 用於單字列表
 * - .speak-btn--md       中尺寸（36px）- 用於例句
 * - .speak-btn--lg       大尺寸（44px）- 用於單字詳情標題
 * - .speak-btn--ghost    透明樣式 - 用於會話頁等
 */
/* 基礎樣式（預設小尺寸） */
.speak-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: var(--font-size-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  padding: 0;
}
.speak-btn:hover {
  background: #2980b9;
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.speak-btn:active {
  transform: scale(0.95);
}
/* 小尺寸（32px）- 用於單字列表 */
.speak-btn--sm {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-1);
}
/* 中尺寸（36px）- 用於例句 */
.speak-btn--md {
  width: 36px;
  height: 36px;
  font-size: var(--font-size-11);
}
/* 大尺寸（44px）- 用於單字詳情標題 */
.speak-btn--lg {
  width: 44px;
  height: 44px;
  font-size: var(--font-size-13);
}
/* 透明樣式 - 用於會話頁等 */
.speak-btn--ghost {
  background: none;
  color: inherit;
  box-shadow: none;
  opacity: 0.7;
}
.speak-btn--ghost:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
  box-shadow: none;
  opacity: 1;
}
/* 響應式：手機上稍微縮小 */
@media (max-width: 768px) {
  .speak-btn--lg {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-12);
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  /* 亮色主題顏色 */
  --bg-color: #ffffff;
  --text-color: #333333;
  --nav-bg: #2c3e50;
  --nav-text: #ffffff;
  --card-bg: #ffffff;
  --card-border: #dddddd;
  --footer-bg: #2c3e50;
  --footer-text: #ffffff;
  --link-color: #3498db;
  --link-hover: #2980b9;
  --input-bg: #ffffff;
  --input-border: #cccccc;
  --shadow: rgba(0, 0, 0, 0.1);

  /* Responsive Typography Tokens - Desktop (預設) */
  /* 字體大小由 SettingsProvider 動態設置，這裡只是預設值 */
  --font-size-base: 16px;
  --font-size-japanese: 16px;
  --font-size-chinese: 16px;
  --line-height-base: 1.5;
  --line-height-tight: 1.4;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;
  /* 用於長文本、文章內容 */

  /* Font Size Tokens - 統一管理所有字級（使用 rem 保持相對大小） */
  --font-size-05: 0.5rem;
  --font-size-065: 0.65rem;
  --font-size-07: 0.7rem;
  --font-size-075: 0.75rem;
  --font-size-08: 0.8rem;
  --font-size-085: 0.85rem;
  --font-size-0875: 0.875rem;
  --font-size-09: 0.9rem;
  --font-size-095: 0.95rem;
  --font-size-1: 1rem;
  --font-size-105: 1.05rem;
  --font-size-11: 1.1rem;
  --font-size-1125: 1.125rem;
  --font-size-12: 1.2rem;
  --font-size-125: 1.25rem;
  --font-size-13: 1.3rem;
  --font-size-14: 1.4rem;
  --font-size-15: 1.5rem;
  --font-size-175: 1.75rem;
  --font-size-18: 1.8rem;
  --font-size-2: 2rem;
  --font-size-25: 2.5rem;
  --font-size-3: 3rem;
  --font-size-4: 4rem;

  /* Layout Spacing - 統一管理所有頁面的頂部間距 */
  --content-top-padding: 30px;
  /* 桌面端和手機端統一的頂部間距 */
  /* 特殊讀音／星號強調底色（基礎頁） */
  --special-reading-bg: rgb(210 44 156 / 8%);
  /* 敬語頁表格（桌機版） */
  --keigo-header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --keigo-row-bg: #ffffff;
  --keigo-row-hover-bg: #f8f9ff;
  --keigo-ad-row-bg: #fafafa;
  --keigo-table-border: #e0e0e0;
  --keigo-row-border: #f0f0f0;
  --no-keigo-color: #999999;
}
.dark-mode {
  /* 暗色主題顏色 */
  --bg-color: #121212;
  --text-color: #e8e8e8;
  --nav-bg: #1e1e1e;
  --nav-text: #ffffff;
  --card-bg: #1e1e1e;
  --card-border: #333333;
  --card-bg-secondary: #252525;
  --footer-bg: #1e1e1e;
  --footer-text: #e8e8e8;
  --link-color: #64b5f6;
  --link-hover: #90caf9;
  --input-bg: #1e1e1e;
  --input-border: #404040;
  --text-color-secondary: #b0b0b0;
  --hover-bg: rgba(100, 181, 246, 0.15);
  --shadow: rgba(0, 0, 0, 0.5);
  /* 黑暗模式下特殊讀音底色需提高對比度 */
  --special-reading-bg: rgb(210 44 156 / 28%);
  /* 敬語頁表格（黑暗模式） */
  --keigo-header-bg: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
  --keigo-row-bg: #252525;
  --keigo-row-hover-bg: #2d2d2d;
  --keigo-ad-row-bg: #1e1e1e;
  --keigo-table-border: #404040;
  --keigo-row-border: #333333;
  --no-keigo-color: #b0b0b0;
}
html {
  font-size: var(--font-size-base);
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-color);
  background-color: var(--bg-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--nav-bg);
  color: var(--nav-text);
  padding: 1rem 0;
  box-shadow: 0 2px 4px var(--shadow);
  z-index: 1000;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.navbar .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.logo {
  font-size: var(--font-size-15);
  font-weight: bold;
  color: white;
  text-decoration: none;
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.nav-links a {
  white-space: nowrap;
  font-size: var(--font-size-09);
  color: var(--nav-text);
  text-decoration: none;
  transition: opacity 0.3s;
}
.nav-links a:hover,
.nav-links a.active {
  opacity: 0.8;
  text-decoration: underline;
}
/* 桌面版等級菜單項樣式（隱藏子菜單和展開圖標） */
.nav-level-item {
  display: inline-block;
}
.nav-level-link {
  display: inline-block;
}
.nav-level-link .expand-icon {
  display: none !important;
  /* 桌面版隱藏展開圖標 */
}
.nav-submenu {
  display: none !important;
  /* 桌面版隱藏子菜單 */
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-back-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--nav-text);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: var(--font-size-15);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  padding: 0;
  text-decoration: none;
}
.nav-back-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}
.settings-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--nav-text);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: var(--font-size-12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  padding: 0;
  text-decoration: none;
}
.settings-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}
.nav-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--nav-text);
  text-decoration: none;
  transition: all 0.3s;
}
.nav-social-link:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}
.nav-social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
/* 桌面版主選單內的 IG/YT：連結樣式（無圓底、無框），與設定鈕區隔 */
.nav-social-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.5rem;
  background: none;
  border: none;
  border-radius: 0;
  width: auto;
  height: auto;
  color: var(--nav-text);
  text-decoration: none;
  transition: opacity 0.2s;
}
.nav-social-inline:hover {
  opacity: 0.85;
  background: transparent;
  transform: none;
}
.nav-social-inline-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-social-inline-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}
/* 桌面版：IG 與 YT 中間間格較小 */
.nav-social-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
/* 桌面版 nav 右側：IG/YT 與設定鍵之間的分隔線與間格 */
.nav-right-separator {
  color: var(--nav-text);
  opacity: 0.6;
  margin-left: 0.5rem;
  margin-right: 0.75rem;
  user-select: none;
}
.theme-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--nav-text);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: var(--font-size-12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  padding: 0;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}
.language-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lang-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: white;
  font-size: var(--font-size-09);
  font-weight: 500;
  cursor: pointer;
}
.lang-icon {
  font-size: var(--font-size-11);
}
.lang-text {
  white-space: nowrap;
}
.lang-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 4px;
  font-size: var(--font-size-09);
  cursor: pointer;
  transition: all 0.3s;
  min-width: 140px;
}
.lang-select:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}
.lang-select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.7);
}
.lang-select option {
  background: #2c3e50;
  color: white;
  padding: 0.5rem;
}
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  padding-top: calc(0rem + var(--content-top-padding));
  /* 使用全局变量 */
  min-height: calc(100vh - 80px);
  padding-bottom: 2rem;
  background-color: var(--bg-color);
  transition: background-color 0.3s ease;
}
/* 所有測驗頁統一增加頂部間距：在全局變量基礎上增加 30px（確保標題不被固定導航欄遮擋） */
.quiz-page {
  --content-top-padding: calc(var(--content-top-padding, 30px) + 30px);
  /* 各測驗頁的 CSS 文件會自行使用這個變量來設置 padding-top */
}
.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  margin-top: 1rem;
  padding: 1.5rem 0 1.5rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  flex: 1;
}
.footer-brand h3 {
  font-size: var(--font-size-15);
  margin-bottom: 0.5rem;
  color: #f1c40f;
}
.footer-brand p {
  color: var(--footer-text);
  opacity: 0.8;
  font-size: var(--font-size-09);
  line-height: 1.6;
}
.footer-group {
  flex-shrink: 0;
  min-width: 120px;
  max-width: 200px;
}
.footer-group h4 {
  font-size: var(--font-size-11);
  margin-bottom: 0.75rem;
  color: var(--footer-text);
  word-break: break-word;
  line-height: 1.4;
}
.footer-group a {
  display: block;
  color: var(--footer-text);
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.3s, color 0.3s;
  font-size: var(--font-size-085);
  margin-bottom: 0.4rem;
  word-break: break-word;
  line-height: 1.4;
}
.footer-group a:hover {
  opacity: 1;
  color: var(--link-color);
}
.japan-life-group {
  min-width: 240px;
  max-width: 400px;
}
.japan-life-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 1rem;
}
.japan-life-links a {
  width: auto;
}
.footer-bottom {
  padding-top: 0rem;
  text-align: center;
}
.footer-bottom-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-085);
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 0.75rem;
}
.footer-row-legal .footer-copyright {
  color: var(--footer-text);
  opacity: 0.6;
}
.footer-bottom-content a {
  color: var(--footer-text);
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.3s, color 0.3s;
}
.footer-bottom-content a:hover {
  opacity: 1;
  color: var(--link-color);
}
.footer-link-separator {
  color: var(--footer-text);
  opacity: 0.5;
  font-size: var(--font-size-085);
}
@media (max-width: 768px) {

  /* Responsive Typography Tokens - Mobile */
  :root {
    --font-size-base: 13px;
    --font-size-japanese: 14px;
    --font-size-chinese: 13px;
    --line-height-base: 1.5;
    --line-height-tight: 1.4;
    --line-height-relaxed: 1.5;
    --line-height-loose: 1.5;
    /* 手機上行距縮小，避免頁面過長 */

    /* Font Size Tokens - 手機版使用相同的 rem 值（保持相對大小不變） */
    --font-size-05: 0.5rem;
    --font-size-065: 0.65rem;
    --font-size-07: 0.7rem;
    --font-size-075: 0.75rem;
    --font-size-08: 0.8rem;
    --font-size-085: 0.85rem;
    --font-size-0875: 0.875rem;
    --font-size-09: 0.9rem;
    --font-size-095: 0.95rem;
    --font-size-1: 1rem;
    --font-size-105: 1.05rem;
    --font-size-11: 1.1rem;
    --font-size-1125: 1.125rem;
    --font-size-12: 1.2rem;
    --font-size-125: 1.25rem;
    --font-size-13: 1.3rem;
    --font-size-14: 1.4rem;
    --font-size-15: 1.5rem;
    --font-size-175: 1.75rem;
    --font-size-18: 1.8rem;
    --font-size-2: 2rem;
    --font-size-25: 2.5rem;
    --font-size-3: 3rem;
    --font-size-4: 4rem;
    --font-size-5: 5rem;
    --font-size-8: 8rem;
  }

  /* Navbar 手機版面優化 - 使用漢堡選單 */
  .navbar {
    padding: 0.75rem 0;
    top: auto;
    bottom: 0;
    box-shadow: 0 -2px 4px var(--shadow);
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  }

  .navbar.hidden {
    transform: translateY(100%);
  }

  .navbar .container {
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .nav-left {
    flex: 1;
    justify-content: flex-start;
    gap: 1rem;
    min-width: 0;
    position: relative;
  }

  .logo {
    font-size: var(--font-size-125);
    flex-shrink: 0;
    order: 2;
  }

  .menu-toggle {
    order: 1;
  }

  /* 漢堡選單按鈕 */
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    width: 28px;
    height: 28px;
    background: var(--nav-bg);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    flex-shrink: 0;
    transition: width 0.3s ease;
    position: relative;
  }

  /* 當菜單打開時，menu-toggle 擴展為 container 的 100% 寬度 */
  .menu-toggle.open {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 4px 0 0 4px;
  }

  /* 三橫線圖標保持左側位置（28px 寬度） */
  .menu-toggle span {
    width: 28px;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s;
    transform-origin: center;
    flex-shrink: 0;
  }

  .menu-toggle:hover span {
    background: rgba(255, 255, 255, 0.8);
  }

  /* 手機版隱藏導航連結，使用漢堡選單控制 */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--nav-bg);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap !important;
    /* 覆蓋桌面版的 wrap，強制不換行 */
    align-items: flex-start;
    padding: 70px 1.5rem 2rem;
    gap: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    height: 100vh;
    min-height: 0;
    /* 確保 flex 子項可以正確參與滾動 */
  }

  .nav-links.open {
    transform: translateX(0);
  }


  .nav-links a {
    font-size: var(--font-size-1);
    padding: 1rem 0;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    /* 防止鏈接被壓縮，確保垂直排列 */
    background: var(--nav-bg) !important;
    /* 設置不透明背景，避免透過遮罩層 */
  }

  .nav-links a:last-child {
    border-bottom: none;
  }

  /* 手機版設定按鈕樣式 */
  .nav-link-button {
    font-size: var(--font-size-1) !important;
    padding: 1rem 0 !important;
    width: 100% !important;
    border: none !important;
    background: var(--nav-bg) !important;
    /* 設置不透明背景，避免透過遮罩層 */
    color: var(--nav-text) !important;
    text-align: left !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-family: inherit !important;
    transition: opacity 0.3s !important;
    flex-shrink: 0;
    /* 防止按鈕被壓縮，確保垂直排列 */
  }

  .nav-link-button:hover,
  .nav-link-button:active {
    opacity: 0.8;
    text-decoration: underline;
  }

  /* 手機版等級菜單項 */
  .nav-level-item {
    width: 100%;
    display: block !important;
    /* 覆蓋桌面版樣式 */
    flex-shrink: 0;
    /* 防止被壓縮，確保垂直排列 */
    background: var(--nav-bg) !important;
    /* 設置不透明背景，避免透過遮罩層 */
  }

  .nav-level-link {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    width: 100%;
    flex-shrink: 0;
    /* 防止鏈接被壓縮 */
    /* 確保整個區域都可以點擊 */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-level-link .expand-icon {
    display: inline-block !important;
    /* 手機版顯示展開圖標 */
    font-size: var(--font-size-085);
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
    pointer-events: none;
    /* 讓圖標不阻止點擊事件，整個鏈接區域都可點擊 */
  }

  .nav-level-link.expanded .expand-icon {
    transform: rotate(90deg);
  }

  /* 手機版語言選單按鈕（圖示+文字一起靠左，不套 space-between） */
  .nav-links button.nav-language-link {
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--font-size-1);
    color: var(--nav-text);
    padding: 1rem 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
  }

  /* 手機版子菜單 - 完全無動畫 */
  .nav-submenu {
    display: block !important;
    /* 手機版顯示子菜單 */
    max-height: 0;
    overflow: hidden;
    transition: none !important;
    /* 完全無動畫 */
    background: var(--nav-bg) !important;
    /* 設置不透明背景，避免透過遮罩層 */
    flex-shrink: 0;
    /* 防止被壓縮 */
  }

  .nav-submenu.expanded {
    max-height: none;
    /* 改為 none，讓子菜單內容自然展開，不被限制 */
    transition: none !important;
    /* 展開時也無動畫 */
  }

  .nav-submenu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    font-size: var(--font-size-09) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* 與主菜單項的邊框顏色一致 */
    color: var(--nav-text) !important;
    /* 確保使用相同的文字顏色 */
    opacity: 1;
    /* 改為 1，與主菜單項一致 */
    background: var(--nav-bg) !important;
    /* 設置不透明背景，避免透過遮罩層 */
    transition: opacity 0.2s, background 0.2s;
  }

  .nav-submenu-link:hover {
    opacity: 0.8;
    /* 與主菜單項的 hover 效果一致 */
    background: var(--nav-bg) !important;
    /* hover 時保持不透明背景 */
  }

  .nav-submenu-link .submenu-icon {
    font-size: var(--font-size-125);
    flex-shrink: 0;
  }

  .nav-submenu-link:last-child {
    border-bottom: none !important;
  }

  /* 手機版 nav-right 保持在同一行 */
  .nav-right {
    flex-shrink: 0;
    gap: 0.5rem;
  }

  .nav-back-button {
    display: flex;
    width: 36px;
    height: 36px;
    font-size: var(--font-size-125);
  }

  .theme-toggle {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-1);
  }

  .settings-button {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-1);
  }

  .nav-social-link {
    width: 32px;
    height: 32px;
  }

  /* 手機版折疊選單內的 IG / YouTube */
  .nav-social-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--nav-text);
    text-decoration: none;
    font-size: var(--font-size-1);
    background: var(--nav-bg) !important;
  }

  .nav-social-menu-link:last-of-type {
    border-bottom: none;
  }

  .nav-social-menu-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-social-menu-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
  }

  .language-selector {
    gap: 0.25rem;
  }

  .lang-label {
    display: none;
    /* 手機上隱藏語言標籤文字 */
  }

  .lang-icon {
    font-size: var(--font-size-1);
  }

  .lang-select {
    padding: 0.4rem 0.5rem;
    font-size: var(--font-size-085);
    min-width: 100px;
  }

  /* Footer 手機版面 - 只顯示 logo，隱藏所有描述文字 */
  .footer {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .footer-content {
    flex-direction: column;
    gap: 0;
    padding-bottom: 0.5rem;
    /* 下 padding 砍半 */
    margin-bottom: 0;
    /* 覆蓋桌面版的 margin-bottom: 2rem */
  }

  .footer-brand {
    width: 100%;
    margin-bottom: 1rem;
    text-align: center;
  }

  .footer-brand h3 {
    font-size: var(--font-size-11);
    margin-bottom: 0;
  }

  /* 手機版隱藏所有描述文字 */
  .footer-brand p {
    display: none;
  }

  /* 手機版隱藏所有 footer 連結區塊 */
  .footer-links {
    display: none;
  }

  .footer-bottom {
    padding-top: 0.5rem;
    /* 上 padding 砍半 */
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-bottom p {
    font-size: var(--font-size-07);
    opacity: 0.6;
    text-align: center;
  }

  .footer-legal-links {
    margin-top: 0.75rem;
    gap: 0.5rem;
  }

  .footer-legal-links a {
    font-size: var(--font-size-07);
  }

  .footer-link-separator {
    font-size: var(--font-size-07);
  }

  /* Main content 調整，手機版 navbar 在底部，不需要頂部 padding */
  .main-content {
    padding: 1rem 1rem;
    padding-top: 1rem;
    /* navbar 現在在底部，不需要頂部留空間 */
    padding-bottom: calc(1rem + 60px);
    /* 底部留空間給 navbar（60px 是手機版 navbar 的實際高度） */
  }

  /* 使用 PageWithSidebar 的頁面，page-content 不需要額外的 padding-top */
  .main-content .page-with-sidebar .page-content {
    padding-top: 1rem;
    /* 只保留內容區的 padding */
  }
}
/* 桌面版樣式 */
@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }

  .nav-links {
    position: static;
    transform: none;
    flex-direction: row;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  /* 桌面版隱藏手機專用的首頁連結 */
  .nav-links .nav-link-mobile-only {
    display: none !important;
  }
}