/* 基础排版与全局样式 — 全部使用系统字体，不加载外部字体 */

body {
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* 安全区域（刘海屏） */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 排版 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

p {
  margin-bottom: 0.5em;
}

small {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* ===== 日文假名专用字体（仅假名区域使用） ===== */
.kana-large,
.kana-medium,
.kana-main-char,
.kana-sub-char,
.kana-row-nav .row-item,
.review-char,
.review-result-answer,
.furigana-wrapper .reading {
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif !important;
}

/* 假名大字显示 */
.kana-large {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}

.kana-medium {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
}

/* 注音标注（Furigana） */
.furigana-wrapper {
  position: relative;
  display: inline-block;
}

.furigana-wrapper .reading {
  position: absolute;
  top: -0.6em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.45em;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 进度条 */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--progress-bg);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar .fill {
  height: 100%;
  background: var(--progress-fill);
  border-radius: 3px;
  transition: width var(--transition-slow);
}

/* 统一容器 */
.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

/* 页面过渡 */
.page {
  display: none;
  animation: fadeIn 200ms ease;
}

.page.active {
  display: block;
}

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

/* iOS 触觉反馈增强（可选） */
@media (hover: none) and (pointer: coarse) {
  button:active {
    opacity: 0.7;
    transform: scale(0.97);
    transition: all 100ms;
  }
}