/* zukan.css — 図鑑（試作 v1 から移植）（2026-10-17 — 見開きは基本情報・くわしくは挟み込みの別紙）。site.css の後に読む */
button.pg-art { position: relative; flex: 1; min-height: 0; padding: 0; font: inherit; color: inherit; cursor: zoom-in; }
.pg-art canvas.mo { position: relative; width: 100%; height: 100%; display: block; }
.pg-art .hint { position: absolute; right: .5em; bottom: .45em; padding: .1em .55em; border-radius: .3em; font: 700 .8em/1.5 var(--f-body); color: var(--p-ink); background: rgba(255, 250, 235, .92); border: 1px solid var(--p-sub); }
.pg-art:hover .hint, .pg-art:focus-visible .hint { background: #FFFAEB; }
.descbox .desc { margin: 0; font-size: .92em; line-height: 1.75; }
.desc .kari { display: inline-block; margin-left: .5em; padding: 0 .4em; border: 1px solid #7A3F10; border-radius: .2em; font: 700 .8em/1.5 var(--f-body); color: #7A3F10; vertical-align: .1em; }
.tamer { margin: .4em 0 0; font-family: 'Klee One', cursive; font-size: .92em; line-height: 1.6; color: #2B4C7E; }
.tamer b { display: block; font-size: .78em; color: var(--p-sub); font-family: var(--f-body); }
.stats.big { font-size: .95em; line-height: 1.55; }
.stats.big .bar { height: .7em; }
.abil b { font-size: 1em; }
.abil p { font-size: .82em; }
button.more { align-self: flex-start; margin-top: auto; margin-bottom: .3em; display: flex; flex-direction: column; align-items: flex-start; gap: .05em; padding: .45em 1em; border-radius: .4em; border: var(--box-line); background: rgba(255, 250, 235, .6); color: var(--p-ink); font: 700 .95em/1.3 var(--f-page); cursor: pointer; pointer-events: auto; }
button.more small { font: 500 .8em/1.3 var(--f-body); color: var(--p-sub); }
button.more:hover { background: rgba(255, 250, 235, .95); }

/* くわしく（挟み込みの別紙） */
body.dt-open { overflow: hidden; }
.dt-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(20, 14, 8, .6); opacity: 0; transition: opacity .2s; }
.dt-back.on { opacity: 1; }
.dt-back[hidden] { display: none; }
.dt { width: min(880px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px 26px 26px; border-radius: 6px; background: var(--paper); color: var(--p-ink); font-family: var(--f-page); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), var(--spine-R); transform: translateY(16px) rotate(-.6deg); transition: transform .22s; outline: none; font-size: 17px; }
.dt-back.on .dt { transform: none; }
.dt-head { display: flex; align-items: flex-end; gap: 14px; border-bottom: var(--p-rule); padding-bottom: 10px; }
.dt-head .pg-no { font-size: 46px; }
.dt-head .pg-name b { font-size: 30px; }
.dt-close { margin-left: auto; align-self: flex-start; min-height: 44px; padding: 0 16px; border-radius: 8px; border: var(--box-line); background: transparent; color: var(--p-ink); font: 700 16px/1 var(--f-body); cursor: pointer; }
.dt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.dt-tabs button { min-height: 44px; padding: 0 18px; border-radius: 8px 8px 0 0; border: var(--box-line); border-bottom-width: 3px; background: transparent; color: var(--p-sub); font: 700 16px/1 var(--f-body); cursor: pointer; }
.dt-tabs button[aria-selected="true"] { color: var(--p-ink); background: rgba(255, 250, 235, .7); border-bottom-color: var(--accent2); }
.dt-stage { position: relative; height: min(380px, 52vh); border: var(--art-line); border-radius: var(--art-r); background: radial-gradient(circle at 50% 60%, rgba(255, 245, 220, .9), transparent 70%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dt-stage canvas.mo { width: 100%; height: 100%; display: block; }
.dt-stage img { max-height: 90%; max-width: 90%; object-fit: contain; }
.dt-moves { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dt-moves button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: var(--box-line); background: transparent; color: var(--p-ink); font: 700 16px/1 var(--f-body); cursor: pointer; }
.dt-moves button[aria-pressed="true"] { background: #6B5236; color: #EADBBE; border-color: #6B5236; }
.dt-note { margin: 10px 0 0; color: var(--p-sub); }
.dt-tbl { width: 100%; border-collapse: collapse; font-size: 16px; }
.dt-tbl th, .dt-tbl td { padding: 6px 8px; border-bottom: var(--sk-line); text-align: left; vertical-align: middle; }
.dt-tbl thead th { font: 700 14px/1.3 var(--f-body); color: var(--p-sub); border-bottom: var(--p-rule); }
.dt-tbl .lv, .dt-tbl .num { font-variant-numeric: tabular-nums; text-align: right; width: 3.5em; }
.dt-tbl .dot { display: inline-block; width: .75em; height: .75em; border-radius: 50%; background: var(--tcol); border: 1px solid rgba(0, 0, 0, .4); margin-right: .4em; }
.dt-tbl.eff th { width: 6em; font: 700 16px/1.3 var(--f-body); }
.dt-tbl.eff .mini { display: inline-block; margin: 2px; padding: 1px 8px; border-radius: 4px; background: color-mix(in srgb, var(--tcol) 60%, #EADBBE); color: #111; font: 700 14px/1.5 var(--f-body); }
@media (max-width: 760px) {
  .dt-back { padding: 0; place-items: stretch; }
  .dt { max-height: 100vh; border-radius: 0; padding: 14px 16px 24px; }
  .dt-head .pg-no { font-size: 34px; } .dt-head .pg-name b { font-size: 24px; }
  .dt-tbl { font-size: 15px; }
}
.dt-tbl td.cl, .dt-tbl th.cl, .dt-tbl td.at { white-space: nowrap; }
@media (max-width: 760px) {
  .dt-tbl .at { display: none; }   /* 属性は スキル名の前の色の丸で分かる */
  .dt-tabs button { padding: 0 12px; font-size: 15px; }
}

/* スマホの 1 ページ表示: 字を大きくした分 行の間を詰める（_check_site.py のはみ出し — No.022 のデータのページ） */
.pf-single .descbox .desc { line-height: 1.55; }
.pf-single .stats.big { line-height: 1.35; }
.pf-single .pg { gap: .35em; }

/* くわしくの覚えるスキル: 名前を押すと説明（DEC-WEB-001 Z-2） */
.dt-tbl .skname { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .3em; margin-left: -.3em; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted rgba(86, 62, 36, .5); text-underline-offset: .25em; }
.dt-tbl .skname:hover, .dt-tbl .skname[aria-expanded="true"] { background: rgba(255, 250, 235, .8); }
.dt-tbl tr.skdesc td { padding-top: 0; }
.dt-tbl tr.skdesc p { margin: 0 0 .2em; font-size: 15px; line-height: 1.6; }
.dt-tbl tr.skdesc p.meta { color: var(--p-sub); font: 500 14px/1.5 var(--f-body); }

/* くわしくの舞台: 大きく・枠からはみ出さない（motion.js data-mode="stage"）・いまの動きの札 */
.dt-stage { height: min(440px, 56vh); }
.dt-now { position: absolute; left: 10px; top: 8px; padding: 2px 10px; border-radius: 6px; background: rgba(255, 250, 235, .92); border: 1px solid var(--p-sub); font: 700 14px/1.6 var(--f-body); color: var(--p-ink); }

/* 見開きの絵: 静止画の上に 待機の動きを重ねる（開いているページだけ — DEC-WEB-003） */
.pg-art canvas.mo.live { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-art img { transition: opacity .25s; }
.pg-art.live-on img { opacity: 0; }

/* 見開きの絵の 静止画 / 動き の切り替え（DEC-WEB-003 S-2） */
.zk-artmode { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font: 700 15px/1 var(--f-body); color: var(--sub); }
.zk-artmode button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #A3BDAA; background: #fff; color: var(--ink); font: 700 15px/1 var(--f-body); cursor: pointer; }
.zk-artmode button[aria-pressed="true"] { background: #2F7D4A; border-color: #2F7D4A; color: #fff; }

/* くわしくの入口を 2 つに（DEC-WEB-004） */
.mores { margin-top: auto; margin-bottom: .3em; display: flex; flex-wrap: wrap; gap: .5em; }
.mores button.more { margin: 0; }
.dt-kind { align-self: flex-start; margin-left: auto; padding: 2px 10px; border-radius: 6px; border: 1px solid var(--p-sub); font: 700 14px/1.6 var(--f-body); color: var(--p-sub); }
.dt-kind + .dt-close { margin-left: 8px; }
/* スマホの 1 ページ: 入口 2 つは 横に並べて 小さい説明を出さない（ページに収める） */
.pf-single .mores { flex-wrap: nowrap; gap: .4em; }
.pf-single .mores button.more { padding: .35em .7em; font-size: .9em; }
.pf-single .mores button.more small { display: none; }

/* 動きの画質（DEC-WEB-005）: 図鑑の上（見開きの絵の切り替えの下）と 動きを見る の舞台の右上 */
.zk-q { display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px/1 var(--f-body); color: var(--sub); }
.zk-q-top { margin-top: 8px; }
.zk-q button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #A3BDAA; background: #fff; color: var(--ink); font: 700 15px/1 var(--f-body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.zk-q button small { font: 500 13px/1 var(--f-body); color: inherit; }
.zk-q button[aria-pressed="true"] { background: #2F7D4A; border-color: #2F7D4A; color: #fff; }
.dt-q { position: absolute; top: 8px; right: 8px; gap: 6px; color: var(--p-sub); }
.dt-q span { font-size: 14px; }
.dt-q button { min-height: 36px; padding: 0 12px; font-size: 14px; border-color: #A08A63; background: #FFF8E8; color: var(--p-ink); }
.dt-q button[aria-pressed="true"] { background: #6B4E2E; border-color: #6B4E2E; color: #fff; }
@media (max-width: 760px) { .dt-q button small { display: none; } }
/* スマホ: 開いている方の札は 出さない（名前と とじる を つぶさない — 中身で分かる） */
.dt-kind, .dt-close { white-space: nowrap; }
@media (max-width: 760px) { .dt-kind { display: none; } }