/* 小新學日語 - 全站樣式（行動優先）
主題：，預設 dark（同姊妹站 www.shinder.work） */
:root,
[data-theme='dark'] {
--bg: #16181c;
--surface: #1e2127;
--text: #e8e6e2;
--muted: #a29b91;
--border: #33373e;
--header-bg: #101215;
--accent: #d15f67; /* 朱紅（深色版提亮） */
--accent-hover: #de7a81;
--accent-contrast: #ffffff;
--ok: #6ecf97;
--ok-bg: #1a2f22;
--ng: #f08a8a;
--ng-bg: #38201f;
--radius: 10px;
}
[data-theme='light'] {
--bg: #faf9f6;
--surface: #ffffff;
--text: #2b2b2b;
--muted: #757068;
--border: #e3ded6;
--header-bg: #26292e;
--accent: #b3424a; /* 朱紅 */
--accent-hover: #93343b;
--accent-contrast: #ffffff;
--ok: #2e7d4f;
--ok-bg: #e6f4ec;
--ng: #b3424a;
--ng-bg: #fbeaec;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
margin: 0;
font-family: 'Helvetica Neue', Arial, 'Hiragino Sans', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
a { color: var(--accent); }
/* ---- 版面容器：header 底色滿版，內容與主欄同寬置中 ---- */
.container {
width: 100%;
max-width: 52rem;
margin-inline: auto;
padding-inline: 1rem;
}
/* ---- 頁首頁尾（header 恆深色，同姊妹站） ---- */
.site-header { background: var(--header-bg); }
.header-inner {
display: flex;
align-items: center;
gap: 0.5rem 1rem;
flex-wrap: wrap;
padding-block: 0.7rem;
}
.brand {
font-weight: 700;
font-size: 1.1rem;
color: #ffffff;
text-decoration: none;
}
.site-nav {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.25rem;
flex-wrap: wrap;
}
.site-nav a,
.nav-btn {
padding: 0.3rem 0.55rem;
border-radius: 6px;
color: #c6c2bc;
text-decoration: none;
font-size: 0.95rem;
border: 0;
background: none;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
}
.site-nav a:hover,
.nav-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.site-nav a.active { color: #ffffff; font-weight: 600; }
.theme-toggle {
margin-left: 0.35rem;
border: 1px solid rgba(255, 255, 255, 0.25);
background: transparent;
color: #c6c2bc;
font-size: 1rem;
line-height: 1;
padding: 0.3rem 0.5rem;
border-radius: 6px;
cursor: pointer;
}
.theme-toggle:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.55); }
main { padding-block: 1.25rem 3rem; }
.site-footer {
padding: 1.5rem 1rem;
text-align: center;
color: var(--muted);
font-size: 0.85rem;
border-top: 1px solid var(--border);
}
/* ---- 通用元件 ---- */
.btn {
display: inline-block;
padding: 0.5rem 1.1rem;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
text-decoration: none;
font-size: 1rem;
font-family: inherit;
cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
}
.btn.primary:hover { background: var(--accent-hover); color: var(--accent-contrast); }
.hint { color: var(--muted); font-size: 0.92rem; }
.form-error { color: var(--ng); font-size: 0.92rem; }
.page-head h1 { margin: 0.5rem 0 0.25rem; font-size: 1.5rem; }
select {
font-size: 0.95rem;
padding: 0.3rem 0.4rem;
font-family: inherit;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 6px;
}
/* ---- 首頁 ---- */
.hero { padding: 1.5rem 0 0.5rem; }
.hero h1 { font-size: 1.6rem; margin: 0 0 0.5rem; }
.hero p { color: var(--muted); margin: 0 0 1.25rem; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 0.75rem;
margin-top: 1.5rem;
}
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.stat-value { font-size: 2rem; font-weight: 700; color: var(--accent); }
.stat-label { color: var(--muted); font-size: 0.9rem; }
/* ---- 五十音表 ---- */
.kana-controls {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin: 0.5rem 0;
}
.voice-pick { color: var(--muted); font-size: 0.9rem; }
.voice-pick select { max-width: 15rem; }
.script-toggle {
display: inline-flex;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.script-toggle button {
padding: 0.4rem 1rem;
border: 0;
background: var(--surface);
color: var(--muted);
font-size: 0.95rem;
font-family: inherit;
cursor: pointer;
}
.script-toggle button.active { background: var(--accent); color: var(--accent-contrast); }
.kana-section h2 {
font-size: 1.1rem;
margin: 1.5rem 0 0.5rem;
padding-left: 0.5rem;
border-left: 4px solid var(--accent);
}
.kana-row {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.4rem;
}
.row-label {
width: 3.2rem;
flex: none;
color: var(--muted);
font-size: 0.85rem;
text-align: right;
padding-right: 0.2rem;
}
.kana-cell {
flex: none;
width: 3.4rem;
height: 3.9rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.05rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-family: inherit;
cursor: pointer;
}
.kana-cell:hover { border-color: var(--accent); }
.kana-cell.empty { background: none; border: 0; cursor: default; }
.kana-glyph { font-size: 1.35rem; line-height: 1.2; white-space: nowrap; }
.kana-romaji { font-size: 0.72rem; color: var(--muted); }
/* 拗音是兩個字元（きゃ），格子要比單字寬 */
.kana-row.youon .kana-cell { width: 4.9rem; }
/* 平/片假名切換：依容器 data-script 顯示對應字體 */
#kana-sections[data-script='hira'] .kana-glyph[data-script='kata'] { display: none; }
#kana-sections[data-script='kata'] .kana-glyph[data-script='hira'] { display: none; }
@media (max-width: 480px) {
.kana-cell { width: 2.9rem; height: 3.5rem; }
.kana-row.youon .kana-cell { width: 4.2rem; }
.kana-glyph { font-size: 1.15rem; }
.row-label { width: 2.6rem; font-size: 0.75rem; }
}
/* 極窄螢幕（iPhone SE 一代等 320px）：再縮一級，避免清音五格溢出 */
@media (max-width: 360px) {
.kana-row { gap: 0.3rem; }
.kana-cell { width: 2.55rem; height: 3.3rem; }
.kana-row.youon .kana-cell { width: 3.7rem; }
.kana-glyph { font-size: 1.05rem; }
.kana-romaji { font-size: 0.65rem; }
.row-label { width: 2.2rem; font-size: 0.7rem; }
}
/* ---- 測驗 ---- */
.quiz-form fieldset {
border: 1px solid var(--border);
border-radius: var(--radius);
margin: 0 0 0.75rem;
padding: 0.5rem 0.9rem 0.7rem;
background: var(--surface);
}
.quiz-form legend { color: var(--muted); font-size: 0.88rem; padding: 0 0.3rem; }
.quiz-form label { margin-right: 1rem; }
.quiz-progress { color: var(--muted); font-size: 0.9rem; margin: 0.75rem 0 0.25rem; }
.quiz-prompt {
font-size: 3rem;
text-align: center;
margin: 1rem 0 1.25rem;
min-height: 4.5rem;
}
.quiz-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.6rem;
max-width: 26rem;
margin: 0 auto;
}
.quiz-option {
padding: 0.8rem 0.5rem;
font-size: 1.3rem;
text-align: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-family: inherit;
cursor: pointer;
}
.quiz-option:hover:not(:disabled) { border-color: var(--accent); }
.quiz-option:disabled { cursor: default; }
.quiz-option.correct { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.quiz-option.wrong { background: var(--ng-bg); border-color: var(--ng); color: var(--ng); }
.quiz-next { text-align: center; margin-top: 1.25rem; }
.quiz-result { text-align: center; margin-top: 1rem; }
.quiz-score { font-size: 2.2rem; font-weight: 700; color: var(--accent); }
.quiz-wrong-list {
max-width: 26rem;
margin: 1rem auto;
padding: 0;
list-style: none;
text-align: left;
}
.quiz-wrong-list li {
display: flex;
justify-content: space-between;
padding: 0.4rem 0.75rem;
border-bottom: 1px solid var(--border);
}
.quiz-actions { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.25rem; }
/* ---- 登入 ---- */
.login-box { margin-top: 1rem; }
.login-box .form-error { margin-top: 0.75rem; }