/* ════════════════════════════════════════════════════════════════
   Программные SEO-страницы словаря: /kanji/n{N}, /kanji/<символ>,
   /hsk{N}-words, /jlpt-n{N}-vocabulary, /radicals.
   ════════════════════════════════════════════════════════════════
   Рамок нет: разделяют отступы и размер шрифта, тот же приём, что в
   pinyin.css. base.css рассчитан на кабинет с сайдбаром (body жёстко
   зафиксирован, overflow: hidden) — эти страницы длинные и текстовые,
   прокрутку нужно вернуть документу, иначе якоря и колесо мыши не работают.
   ════════════════════════════════════════════════════════════════ */

html, body { overflow: visible; height: auto; }
body { display: block; }
:root:not([data-theme="dark"]) { --bg: #fff; }
:root { --site-nav-bg: var(--bg); }
[data-theme="dark"] { --site-nav-cta-fg: #1d1d1c; }

.kjseo-shell { margin-top: var(--site-nav-h); }
.kjseo-inner { max-width: 860px; margin: 0 auto; padding: 44px 24px 100px; }

/* ── Хлебные крошки — просто ссылка на /kanji, курсивом, как в SPA ── */
.kjseo-crumb {
    font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-3); text-decoration: none;
    margin-bottom: 16px; display: inline-block;
}
.kjseo-crumb:hover { color: var(--accent); }

/* ── Шапка страницы ─────────────────────────────────────────── */
.kjseo-eyebrow {
    font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-3); margin: 0 0 16px;
}
.kjseo-h1 {
    font-family: 'Cormorant Garamond', serif; font-size: 46px; font-weight: 300;
    line-height: 1.1; color: var(--text); margin: 0 0 18px;
}
.kjseo-lead {
    font-size: 15.5px; line-height: 1.7; color: var(--text-2);
    max-width: 38rem; margin: 0 0 40px;
}

/* ── Переключатель соседних уровней ──────────────────────────── */
.kjseo-levels { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 44px; }
.kjseo-levels a {
    font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-3);
    text-decoration: none; transition: color .15s;
}
.kjseo-levels a:hover { color: var(--accent); }
.kjseo-levels a.active { color: var(--accent); }

/* ── Сетка карточек (список иероглифов/слов уровня) ──────────── */
.kjseo-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 4px;
}
.kjseo-card {
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 10px; text-decoration: none; border-radius: var(--radius, 2px);
    transition: background .15s;
}
.kjseo-card:hover { background: var(--accent-pale); }
.kjseo-char {
    font-family: var(--cjk-serif); font-size: 27px; line-height: 1;
    color: var(--text);
}
.kjseo-card-reading { font-family: var(--cjk-serif-ui); font-size: 12px; color: var(--text-3); }
.kjseo-card-meaning {
    font-size: 11.5px; color: var(--text-3); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Список слов (вокабуляр/HSK) ─────────────────────────────── */
.kjseo-word-list { display: flex; flex-direction: column; }
.kjseo-word {
    display: flex; align-items: baseline; gap: 14px;
    padding: 11px 0; border-bottom: 1px solid var(--border-light);
    text-decoration: none;
}
.kjseo-word:last-child { border-bottom: none; }
.kjseo-word-char {
    font-family: var(--cjk-serif); font-size: 20px; color: var(--text);
    flex: none; min-width: 2.4em;
}
.kjseo-word-reading { font-family: var(--cjk-serif-ui); font-size: 13px; color: var(--text-3); flex: none; }
.kjseo-word-meaning { font-size: 13.5px; color: var(--text-2); }
.kjseo-word[href]:hover .kjseo-word-char { color: var(--accent); }

/* ── Карточка иероглифа (/kanji/<символ>) ────────────────────── */
.kjseo-detail-char {
    font-family: var(--cjk-serif); font-size: 104px; line-height: 1;
    color: var(--text); text-align: center; margin: 8px 0 4px;
}
.kjseo-detail-hint {
    font-size: 13px; color: var(--text-3); text-align: center;
    max-width: 30rem; margin: 0 auto 40px;
}

.kjseo-lang-section { margin: 0 0 56px; padding-top: 40px; border-top: 1px solid var(--border-light); }
.kjseo-lang-section:first-of-type { padding-top: 0; border-top: none; }
/* Секция карточки иероглифа сама задаёт язык гарнитуры — на /kanji/<символ>
   бывает две секции (ja и zh) сразу, html[data-kj-lang] тут не годится. */
.kjseo-lang-section[data-lang="zh"] {
    --cjk-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
    --cjk-serif-ui: 'Noto Serif SC', 'Songti SC', 'SimSun', 'DM Sans', sans-serif;
}
.kjseo-lang-label {
    font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-3); margin: 0 0 20px;
}

/* Бейдж уровня — тот же язык, что и в кабинете: номер уровня крупно
   акцентным серифом, черты мелко под ним, слева от значения. */
.kjseo-badge-row { display: flex; align-items: center; gap: 20px; margin: 0 0 22px; }
.kjseo-badge { display: flex; flex-direction: column; align-items: center; flex: none; min-width: 44px; }
.kjseo-badge-level {
    font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 500;
    color: var(--accent); text-decoration: none; line-height: 1.1;
}
.kjseo-badge-level:hover { color: var(--accent-dark); }
.kjseo-badge-strokes { font-size: 11px; color: var(--text-3); }
.kjseo-detail-meaning { font-size: 19px; color: var(--text); margin: 0; }

.kjseo-readings { margin: 0 0 8px; }
.kjseo-reading-row { display: flex; align-items: baseline; gap: 14px; padding: 4px 0; }
.kjseo-reading-label {
    font-family: var(--cjk-serif-ui); font-size: 12.5px; color: var(--text-3);
    min-width: 64px; flex: none;
}
/* «радикал» — русская подпись, не иностранное чтение; шрифт CJK-стека ей не нужен. */
.kjseo-reading-label--ru { font-family: 'DM Sans', sans-serif; }
.kjseo-reading-value { font-size: 16px; color: var(--text); }
.kjseo-reading-value a { color: var(--text); text-decoration: none; }
.kjseo-reading-value a:hover { color: var(--accent); }
/* Только настоящее чтение/радикал на CJK-гарнитуре — «— значение» рядом
   остаётся кириллицей на DM Sans (см. .kjseo-reading-label--ru: тот же
   шрифтовой артефакт на кириллице внутри CJK-стека). */
.kjseo-reading-value--jp { font-family: var(--cjk-serif-ui); }

.kjseo-theory { font-size: 14px; line-height: 1.75; color: var(--text-2); max-width: 34rem; }

.kjseo-section-title {
    font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-3); margin: 36px 0 16px;
}
.kjseo-examples { display: flex; flex-direction: column; }
.kjseo-example { padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.kjseo-examples .kjseo-example:last-child { border-bottom: none; }
.kjseo-example-head { display: flex; align-items: baseline; gap: 10px; }
.kjseo-example-word { font-family: var(--cjk-serif-ui); font-size: 16px; color: var(--text); }
.kjseo-example-reading { font-family: var(--cjk-serif-ui); font-size: 13px; color: var(--text-3); }
.kjseo-example-meaning { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.kjseo-example-sentence { font-family: var(--cjk-serif-ui); font-size: 13.5px; color: var(--text-2); margin-top: 4px; }

.kjseo-audio-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-left: auto; flex: none;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--text-3); transition: color .15s;
}
.kjseo-audio-btn:hover { color: var(--accent); }

/* «Показать ещё N слов» — нативный <details>: контент остаётся в разметке
   (виден поиску) и по умолчанию свёрнут, без единой строчки JS. */
.kjseo-more { margin-top: 4px; }
.kjseo-more summary {
    font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-3); cursor: pointer;
    padding: 12px 0; list-style: none;
}
.kjseo-more summary::-webkit-details-marker { display: none; }
.kjseo-more summary:hover { color: var(--accent); }
.kjseo-more summary::after { content: " ↓"; }
.kjseo-more[open] summary::after { content: " ↑"; }
.kjseo-more[open] summary { border-bottom: 1px solid var(--border-light); }

.kjseo-chips { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.kjseo-chip {
    font-family: var(--cjk-serif-ui); font-size: 15px; color: var(--text-2);
    text-decoration: none; padding: 2px 0;
}
.kjseo-chip[href]:hover { color: var(--accent); }

/* ── CTA-кнопка — акцентная, как .site-nav-cta, а не блёклая ссылка ── */
.kjseo-cta-btn {
    display: block; text-align: center;
    margin-top: 56px; padding: 16px 28px;
    background: var(--accent); color: #fff !important; text-decoration: none;
    font-family: 'DM Sans', sans-serif; font-size: 14px; letter-spacing: .03em;
    border-radius: var(--radius, 2px); transition: background .2s;
}
.kjseo-cta-btn:hover { background: var(--accent-dark); }

/* ── Радикалы ─────────────────────────────────────────────────── */
.kjseo-radical-group { margin: 0 0 38px; }
.kjseo-radical-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.kjseo-radical-char { font-family: var(--cjk-serif); font-size: 26px; color: var(--text); }
.kjseo-radical-meaning { font-size: 13.5px; color: var(--text-2); }
.kjseo-radical-count { font-size: 11.5px; color: var(--text-3); }

/* ── CTA / межстраничные ссылки ──────────────────────────────── */
.kjseo-cta {
    margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border-light);
    font-size: 13.5px; color: var(--text-3);
}
.kjseo-cta a { color: var(--accent); text-decoration: none; }
.kjseo-cta a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .kjseo-inner { padding: 28px 16px 64px; }
    .kjseo-h1 { font-size: 34px; }
    .kjseo-detail-char { font-size: 68px; }
    .kjseo-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}