/* 一字入魂 ・ 字ごとのページ (= tools/build_ji.mjs が作る ji/<符号>/index.html と ji/index.html の見た目 ・ 墨の地に 半紙の札) */
:root {
  --bg: #1b1916; --panel: #25221e; --text: #efe8da; --sub: #a39a8a; --line: rgba(255, 255, 255, 0.12);
  --shu: #d8553e; --paper: #f2ece0; --ink: #1b1916; --gold: #e8b04a;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.75; }
a { color: inherit; }
.top { display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px; border-bottom: 1px solid var(--line); }
.top .brand { font-weight: 700; letter-spacing: 0.12em; font-size: 13px; text-decoration: none; color: var(--gold); }
.top .game { font-family: var(--mincho); font-weight: 700; font-size: 14px; text-decoration: none; border: 1px solid rgba(216, 85, 62, 0.6); color: var(--shu); border-radius: 999px; padding: 4px 12px; }
main { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
.crumbs { font-size: 12px; color: var(--sub); margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 2px 6px; }
.crumbs a { color: var(--sub); }
.crumbs i { font-style: normal; opacity: 0.5; }
h1 { font-family: var(--mincho); font-size: 26px; line-height: 1.4; margin: 10px 0 8px; letter-spacing: 0.04em; }
h2 { font-family: var(--mincho); font-size: 19px; margin: 34px 0 12px; padding-left: 10px; border-left: 3px solid var(--shu); letter-spacing: 0.06em; }
.lead { color: #d9d1c2; margin: 0 0 16px; }
.note { font-size: 13px; color: var(--sub); }

/* 大きなお手本 と 書く入口 */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 620px) { .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; } }
.ji-big { position: relative; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 1 / 1.05; background: var(--paper); border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); overflow: hidden; }
.ji-big::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 40%, rgba(255, 253, 246, 0.6), rgba(214, 202, 180, 0.35)); }
.ji-big svg.skel { position: absolute; inset: 0; width: 100%; height: 100%; }
.ji-big svg.skel path { fill: none; stroke: #2a2620; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.ji-big canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ji-big.drawn svg.skel { display: none; }
.hero-side { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.kaku { text-align: center; color: var(--sub); font-family: var(--mincho); }
.kaku b { font-size: 40px; color: var(--text); margin-right: 4px; }
.cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 14px; border-radius: 16px; background: #c9432f; color: #fff6ee; text-decoration: none; box-shadow: 0 10px 26px rgba(201, 67, 47, 0.3); text-align: center; }
.cta b { font-family: var(--mincho); font-size: 20px; letter-spacing: 0.06em; }
.cta span { font-size: 12.5px; opacity: 0.9; font-weight: 600; }
.cta:active { transform: scale(0.98); }
.cta-sec { margin-top: 30px; }

/* 1 画ずつ */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 12px 10px; }
.steps li { margin: 0; }
.steps svg { display: block; width: 100%; height: auto; border-radius: 3px; }
.steps p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: #d9d1c2; }
.steps p b { display: block; color: var(--text); font-size: 13px; }
svg .bg { fill: var(--paper); }
svg .grid { stroke: rgba(160, 140, 110, 0.35); stroke-width: 0.6; stroke-dasharray: 2 2; fill: none; }
svg .done { fill: none; stroke: #b9ae9b; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
svg .now { fill: none; stroke: #c8402c; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
svg .arw { fill: #c8402c; }
svg .num { fill: #fff6ee; stroke: #c8402c; stroke-width: 1.6; }
svg .numt { fill: #c8402c; font: 700 9px var(--sans); text-anchor: middle; }

/* 動く書き順 */
.anim-wrap { max-width: 300px; margin: 0 auto; }
.anim { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.anim .ghost { fill: none; stroke: rgba(160, 140, 110, 0.28); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.anim .ink { fill: none; stroke: var(--ink); stroke-width: 8.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@media (prefers-reduced-motion: reduce) { .anim .ink { animation: none; stroke-dashoffset: 0; } }

/* コツ と 間違えやすい点 */
.tips { margin: 0; }
.tips dt { font-family: var(--mincho); font-weight: 700; font-size: 17px; color: var(--shu); margin-top: 12px; }
.tips dt small { font-family: var(--sans); font-size: 12px; color: var(--sub); font-weight: 600; margin-left: 10px; }
.tips dd { margin: 2px 0 0; }
.miss { padding-left: 1.2em; margin: 0; }
.miss li { margin: 6px 0; }

/* ほかの字 */
.pn { display: flex; justify-content: space-between; gap: 10px; }
.pn a { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-decoration: none; font-weight: 600; }
.others { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; margin-top: 10px; }
.others a, .others span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; font-family: var(--mincho); font-weight: 700; font-size: 19px; background: rgba(255, 255, 255, 0.04); }
.others span.me { background: var(--paper); color: var(--ink); border-color: transparent; }
.more { text-align: right; font-size: 13px; }

/* 一覧 */
.list { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 8px; }
.list a { display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; border-radius: 10px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.list a b { font-family: var(--mincho); font-size: 32px; line-height: 1.2; }
.list a small { font-size: 11px; color: #6d6252; }
section[hidden] { display: none; }

.about { margin-top: 36px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.about h2 { margin-top: 0; border: 0; padding: 0; }
footer { text-align: center; color: var(--sub); font-size: 12px; letter-spacing: 0.14em; padding: 20px 0 calc(env(safe-area-inset-bottom, 0px) + 24px); }
footer small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 0.04em; }
footer small a { color: inherit; }
.kw { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.kw a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-family: var(--mincho); font-weight: 700; font-size: 17px; background: rgba(255, 255, 255, 0.04); }