/* あなただけの家紋メーカー：生成りの紙と藍・朱 */
:root {
  --accent: #b3312a; --accent-ink: #ffffff; --accent-soft: #f6e1dc;
  --km-paper: #f6f1e4; --km-paper-2: #e9dfc8; --km-ink: #1e3a6e;
  --serif: "Hiragino Mincho ProN", "Noto Serif CJK JP", "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #f08a7e; --accent-ink: #1a1210; --accent-soft: #3a211d; --km-paper: #1e2233; --km-paper-2: #262b40; --km-ink: #e9dfc8; }
}
:root[data-theme="dark"] { --accent: #f08a7e; --accent-ink: #1a1210; --accent-soft: #3a211d; --km-paper: #1e2233; --km-paper-2: #262b40; --km-ink: #e9dfc8; }
.mn-title { font-family: var(--serif); letter-spacing: .03em; font-size: clamp(26px, 7.4vw, 38px); }

.km-mon svg, .km-result-mon svg, .km-build svg, .km-draw svg, .km-hero-mon svg, .km-zk svg { display: block; width: 100%; height: auto; }
.km-mon-s { width: 72px; flex: none; border-radius: 50%; overflow: hidden; }

/* ヒーロー */
.km-hero { position: relative; height: 210px; border-radius: var(--radius); border: 1px solid var(--line); background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(0, 0, 0, .025) 22px 23px), radial-gradient(circle at 50% 40%, var(--km-paper), var(--km-paper-2)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.km-hero-mon { width: 170px; color: var(--km-ink); animation: km-spin 18s linear infinite; }
.km-hero-seal { position: absolute; right: 16px; bottom: 14px; width: 44px; height: 44px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-family: var(--serif); font-weight: 900; font-size: 26px; display: flex; align-items: center; justify-content: center; transform: rotate(-6deg); }
@keyframes km-spin { to { transform: rotate(360deg); } }

.km-daily { display: flex; gap: 12px; align-items: flex-start; }
.km-friend { display: flex; gap: 12px; align-items: center; }

/* 質問中の組み立てプレビュー */
.km-build { width: 150px; margin: 0 auto; color: var(--km-ink); transition: opacity .3s; }
.km-build.step0 { opacity: .12; }
.km-build.step1, .km-build.step2 { opacity: .4; }
.km-build.step3, .km-build.step4 { opacity: .7; }
.km-q { font-family: var(--serif); font-size: 24px; text-align: center; margin: 4px 0 0; }
.km-choice { text-align: center; font-size: 17px; }

/* 描く演出 */
.km-draw { width: min(260px, 80%); margin: 10px auto; color: var(--km-ink); }
.km-draw svg > g > * { opacity: 0; animation: km-ink .5s ease-out forwards; }
.km-draw svg > g > :nth-child(1) { animation-delay: .1s; }
.km-draw svg > g > :nth-child(2) { animation-delay: .5s; }
.km-draw svg > g > :nth-child(3) { animation-delay: .7s; }
.km-draw svg > g > :nth-child(4) { animation-delay: .9s; }
.km-draw svg > g > :nth-child(5) { animation-delay: 1.1s; }
.km-draw svg > g > :nth-child(6) { animation-delay: 1.3s; }
.km-draw svg > g > :nth-child(n+7) { animation-delay: 1.5s; }
@keyframes km-ink { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }

/* 結果 */
.km-result-mon { width: min(300px, 82%); margin: 0 auto; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); animation: mn-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.km-name { font-family: var(--serif); text-align: center; font-size: clamp(20px, 6vw, 28px); margin: 6px 0 0; }
.km-origin { background: var(--km-paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 0; }
.km-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.km-sw { min-width: 52px; height: 44px; border-radius: 10px; border: 3px solid transparent; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; padding: 0 8px; }
.km-sw.is-on { border-color: var(--text); }
.km-sw-rev { background: var(--surface-2); color: var(--text); border: 3px solid var(--line); }
.km-sw-rev.is-on { border-color: var(--text); }
.km-save { display: flex; gap: 8px; }

/* 図鑑 */
.km-zukan { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.km-zk { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 4px; cursor: pointer; }