@font-face {
    font-family: 'MOJI';
    src: url(../font/Moji.otf);
}

@font-face {
    font-family: 'genshin';
    src: url(../font/GenShinGothic-Medium.woff);
}

@font-face {
    font-family: 'kilgo';
    src: url(../font/GN-KillGothic-U-KanaNB.woff);
    unicode-range: U+4E00-U+9FEA;
}

html,
body,
div,
span,
object,
iframe,
p,
blockquote,
pre,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

nav ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}


/* change colours to suit your needs */

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}


/* change colours to suit your needs */

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* change border colour to suit your needs */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input,
select {
    vertical-align: middle;
}
/* ------------------------------------------------------------------
   Layout constants (single source of truth, added 2026-10-28).
   Historically the sidebar widths were re-typed as magic numbers in
   every stylesheet (24vw / 70px / 225px / 443px ...), which is why
   the layout drifted out of sync. Every rule now reads these
   variables, so the menu or visual width is changed in one place.
   ------------------------------------------------------------------ */
:root {
    --kft-visual-w: 24vw;     /* left visual column */
    --kft-menu-w: 70px;       /* side menu, collapsed */
    --kft-menu-open-w: 225px; /* side menu, hovered open */
}

/* ------------------------------------------------------------------
   Display headings (added 2026-10-28 for the unified theme):
   - line-height 1.3 keeps multi-line Latin titles in the decorative
     MOJI / KillGothic fonts from colliding (Japanese metrics are
     tighter than Latin ones at the default line height).
   - 'zcool' is ZCOOL QingKe HuangYou (站酷庆科黄油体, SIL OFL 1.1),
     an extra-bold Chinese poster font close in weight to
     DFG Gokubuto Gothic and in feel to KillGothic. It is the
     fallback for glyphs MOJI/kilgo do not cover, and the primary
     display font on Chinese pages via :lang(zh). The shipped files
     are subset to the GB2312 character set plus common symbols.
   ------------------------------------------------------------------ */
@font-face {
    font-family: 'zcool';
    src: url(../font/ZCOOLQingKeHuangYou-Regular.woff2) format('woff2'),
         url(../font/ZCOOLQingKeHuangYou-Regular.woff) format('woff');
    font-display: swap;
    unicode-range: U+0000-00FF, U+2000-206F, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF;
}

.page_title,
.hchi1 {
    font-family: 'MOJI', 'kilgo', 'zcool', sans-serif;
    line-height: 1.5;
}

:lang(zh) .page_title,
:lang(zh) .hchi1 {
    font-family: 'zcool', 'MOJI', 'kilgo', sans-serif;
}

/* The decorative fonts draw their glyphs larger than the em box, so
   multi-line Latin titles need more leading than Japanese ones. */
:lang(en) .page_title,
:lang(en) .hchi1 {
    line-height: 1.6;
}

/* The side menu used to be a fixed overlay and the content column
   duplicated its widths as magic numbers, because a fixed element
   leaves no "remaining width" for the content to size against. The
   :has() narrowing rule that patched this is no longer needed: the
   header and footer now wrap the sidebar and the content in a
   .layout flex row, the sidebar is sticky instead of fixed, and the
   content column is flex:1, so the browser computes the remaining
   width itself and the column follows the menu's expansion on its
   own. The variables above remain as the single definition of the
   sidebar pieces' own sizes. */