/* study-std 1/3: 見本（居飛車穴熊）の cpu-eval.css */
/* Layout only. Colors, typography and graphs come from /shogi-eval.css. */
.kplayer[data-cpu-eval="1"] .study-evaluation{width:min(100%,calc(min(100vw,430px) - 16px));margin:8px auto 0;}
.kplayer[data-cpu-eval="1"] .study-evaluation [data-eval-part="evalfoot"]{display:block;}
.kplayer[data-cpu-eval="1"] .study-evaluation .evalwrap,
.kplayer[data-cpu-eval="1"] .study-evaluation .graphwrap{visibility:hidden;}
.kplayer[data-cpu-eval="1"] .study-evaluation[data-history="1"] .graphwrap{visibility:visible;}
.kplayer[data-cpu-eval="1"] .study-evaluation[data-graph-layout="none"] .graphwrap{display:none;}
.kplayer[data-cpu-eval="1"] .study-evaluation[data-current="1"] .evalwrap{visibility:visible;}
.kplayer[data-cpu-eval="1"] .study-evaluation .graphwrap canvas{cursor:pointer;touch-action:pan-y;}
.kplayer[data-cpu-eval="1"] .study-evaluation .kp-play{display:block;margin-top:8px;text-align:center;min-height:44px;}
.kplayer[data-cpu-eval="1"] .study-evaluation .kp-go{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;font-size:13px;font-weight:700;color:#fff;text-decoration:none;background:#3b5273;border:1px solid #ffffff33;border-radius:10px;visibility:hidden;}
.kplayer[data-cpu-eval="1"] .study-evaluation[data-playable="1"] .kp-go{visibility:visible;}
@media(prefers-reduced-motion:reduce){.kplayer[data-cpu-eval="1"] .study-evaluation .evalbar .b{transition:none;}}

/* study-std 2/3: 見本の study-ui.css */
/* Scoped layout only; the five-sided pieces are rendered by shogi-ui.css/js. */
.study-page .kplayer[data-study-ui="1"] {
 --study-cell:calc((min(100vw,430px) - 22px) / 9);
 --study-board-width:calc(min(100vw,430px) - 16px);
}
.study-page .kz .kplayer[data-study-ui="1"] .kp-hand.study-hand.on {
 display:flex;align-items:center;gap:0;box-sizing:border-box;
 width:var(--study-board-width)!important;max-width:100%;
 height:calc(var(--study-cell) + 10px);min-height:calc(var(--study-cell) + 10px);max-height:calc(var(--study-cell) + 10px);
 padding:4px 3px;margin:3px auto;border:0;border-radius:0;background:#ffffff0b;
}
.study-page .kplayer[data-study-ui="1"] .study-hand[hidden] {display:none!important}
.study-page .kplayer[data-study-ui="1"] .study-hand-label {
 flex:0 0 calc(2 * var(--study-cell));max-width:calc(2 * var(--study-cell));
 font-size:11px;line-height:1.3;text-align:left;color:#bcd;white-space:normal;
}
.study-page .kplayer[data-study-ui="1"] .study-hand-items {
 display:flex;align-items:center;flex-wrap:nowrap;gap:0;flex:0 0 calc(7 * var(--study-cell));height:var(--study-cell);min-width:0;
}
.study-page .kplayer[data-study-ui="1"] .study-hand .hw {
 display:block;box-sizing:border-box;margin:0;padding:0;cursor:default;
}
.study-page .kplayer[data-study-ui="1"] .study-hand .hw[hidden],
.study-page .kplayer[data-study-ui="1"] .study-hand .cnt[hidden],
.study-page .kplayer[data-study-ui="1"] .study-hand .none[hidden] {display:none}
.study-page .kplayer[data-study-ui="1"] .study-hand .none {font-size:11px;color:#89a}
.study-page .kz .kplayer[data-study-ui="1"] .kp-bar {
 width:var(--study-board-width);max-width:100%;height:2px;min-height:2px;margin:0 auto 3px;padding:0!important;
 border:0;border-radius:1px;background:#ffffff08;overflow:hidden;
}
.study-page .kz .kplayer[data-study-ui="1"] .kp-bar i {background:#71839a44;border-radius:1px;transition:none}
.study-page .kplayer[data-study-ui="1"],
.study-page .kplayer[data-study-ui="1"] * {
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}

/* study-std 3/3: 見本の layout.css（見本の id を使う規則はページの <style> へ移した） */
/* Each topic's background includes its heading, explanation and board. */
/* Use the same board and held-piece base size as /play/. */
.study-page {--cell:calc((min(100vw,430px) - 22px) / 9)}
.study-page .tk2 .tit.study-section {
 margin:0 -16px;padding:20px 16px;border:0;
}
.study-page .tk2 .tit.study-section .kcard {
 margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;
}
.study-page .study-section + .study-section {
 border-top:0;
}
.study-page .study-section h2,
.study-page .tk2 .study-section h2.tlabel {
 margin-top:0;margin-bottom:20px;
}
.study-page .kz.tk2 .tit.study-section .kcard > p.ti {
 position:relative;clear:both;text-indent:0;
 padding:0 16px 0 calc(16px + 1.1em);
}
.study-page .kz.tk2 .tit.study-section .kcard > p.ti::before {
 position:absolute;left:16px;top:0;
}
.study-page .study-section .ti > b.item-name {
 white-space:nowrap;
}
/* Playback progress is quiet and compact; evaluation colours stay unchanged. */
.study-page .kz .kplayer[data-study-ui="1"] .kp-ctl {margin-top:0}
.study-page .kz .kplayer[data-study-ui="1"] .sbwrap {margin-bottom:0}
.study-page .kz .kplayer[data-study-ui="1"] .kp-hand-s.on {margin-bottom:3px}
/* A cue is shown only when there is an authored explanation for this frame. */
.study-page .kplayer[data-reason-demo="1"] .sbwrap {position:relative}
.study-page .study-cue {
 box-sizing:border-box;width:var(--study-board-width,100%);min-height:20px;
 margin:0 auto;padding:0 8px;display:flex;align-items:center;
 color:#e1e9f2;font-size:14px;line-height:20px;font-weight:600;
 text-align:left;overflow:visible;
}
.study-page .study-cue-overlay {
 position:absolute;z-index:3;pointer-events:none;overflow:visible;
}
/* 2026-09-08: a castle is an area, including the pawn cover, not five pieces. */
.study-page #yurai .name-origin {margin:6px 16px 0;padding:0;border:0;background:none}
.study-page #yurai .name-origin p {margin:0;padding:0 0 8px;background:var(--study-tone-b)}
.study-page #yurai,.study-page #yurai .kcard {margin-bottom:0}
.study-page #yurai + #katachi {margin-top:16px}
.study-page .kz .kcard:has(.sb) > .study-topic {margin:0;padding:20px 0}
.study-page .kz .kcard:has(.sb) > .study-topic:first-child:not(:has(> h2)) {padding-top:0}
.study-page .kz .kcard:has(.sb) > .study-topic:last-child {padding-bottom:0}
.study-page .study-topic > .type-condition {padding-left:16px;padding-right:16px}
.study-page .study-topic + .study-topic {border-top:0}
.study-page .kz.tk2 .tit.study-section .kcard .study-topic > p.ti {
 position:relative;clear:both;text-indent:0;padding:0 16px 0 calc(16px + 1.1em);
}
.study-page .kz.tk2 .tit.study-section .kcard .study-topic > p.ti::before {position:absolute;left:16px;top:0}
.study-page .study-type-notes {width:100%;padding:4px 16px 8px;text-align:left;font-size:13px}
.study-page .study-type-notes p {display:flex;align-items:center;gap:8px;height:48px;margin:0;padding:0!important;line-height:20px;font-size:13px}
.study-page .study-type-notes b {flex:0 0 6em;white-space:nowrap;color:#dbe6f5}
.study-page .study-type-notes span {min-width:0}
.study-page .study-type-example {height:44px;display:flex;align-items:center}
.study-page .study-type-example a {color:#b8cede;text-decoration:underline;line-height:44px}
.study-page .study-type-example a[hidden] {display:none}
.study-page .kplayer {scroll-margin-top:64px}
/* Compact the lesson controls while preserving piece sizes and stable geometry. */
.study-page .kz .kplayer[data-study-ui="1"] .kp-ctl {height:44px}
.study-page .kz .kplayer[data-study-ui="1"] .kp-b {height:44px;min-height:44px;padding-top:0;padding-bottom:0}
.study-page .kz .kplayer .study-evaluation .graphwrap {height:100px}
.study-page .kplayer[data-cpu-eval="1"] .study-evaluation {margin-top:4px}
.study-page .kplayer[data-cpu-eval="1"] .study-evaluation .kp-play {margin-top:4px}
.study-page details.board-comparison {margin:8px -16px;padding:4px 0;border:0;box-shadow:inset 0 0 0 1px #ffffff22}
.study-page .kz details.board-comparison .kcard {margin:12px 0 16px;padding:0}
.study-page details.board-comparison summary,
.study-page details.board-comparison h3 {margin-left:16px;margin-right:16px}
.study-page details.board-comparison .sb {margin-left:auto;margin-right:auto}
.study-page .kplayer[data-static-position="1"] .kp-routes,
.study-page .kplayer[data-static-position="1"] .kp-ctl,
.study-page .kplayer[data-static-position="1"] .kp-bar {display:none}


/* Empty explanations and absent example links occupy no space. */
.study-page .study-cue[hidden] {display:none}
.study-page .study-cue:not([hidden]) {margin-top:4px}
.study-page .study-type-example:not(:has(a:not([hidden]))) {display:none}
.study-page #tocPanel .toc-subtopic {padding-left:24px}

/* Location hints use the approved translucent red, behind shared pieces. */
/* Keep gaps inside the adjacent lesson instead of exposing the parent background. */
.study-page .kz.tk2 > .kz:has(> .lesson-block) {margin-top:0;margin-bottom:0}
.study-page .kz .kcard:has(+ .lesson-block) {margin-bottom:0}
.study-page .kz .kcard > .kplayer:has(+ .study-topic) {margin-bottom:0}
.study-page .kz .kcard:has(+ .lesson-block) > .kplayer:last-child {margin-bottom:0}
.study-page :is(h3,h4)[id] {scroll-margin-top:56px}
.study-page #katachi {margin-bottom:0}
.study-page .kz.tk2 {margin-top:0;margin-bottom:0}
.study-page .kz > .kcard:has(> .study-topic) {margin-top:0;margin-bottom:0}
.study-page .study-topic:has(> h2:first-child) {padding-top:20px}
.study-page .study-topic > h2 {margin-top:0;margin-bottom:20px}
.study-page .kz:has(+ .kz > .lesson-block) > .kcard:last-child,.study-page .kz:has(+ .kz > .lesson-block) > .kcard:last-child > .kplayer:last-child {margin-bottom:0}
.study-page .kz:has(+ .kz > .kcard > .study-topic) > .kcard:last-child,.study-page .kz:has(+ .kz > .kcard > .study-topic) > .kcard:last-child > .kplayer:last-child {margin-bottom:0}
.study-page .study-topic > h2 {margin-left:16px;margin-right:16px}

/* Brief overview requested below the collapsed name origin. */
.study-page #yurai .castle-overview {margin:0 16px;padding:0;text-align:left;font-size:14px;line-height:1.55}
.study-page #yurai .castle-overview p {margin:0;padding:0;font-size:14px;line-height:1.55}
.study-page #yurai .castle-overview p + p {margin-top:3px}
.study-page #yurai .castle-overview b {white-space:nowrap}

/* The same merit content is partially previewed and then expanded. */
.study-page #yurai .castle-overview {overflow-anchor:none}
.study-page #yurai .overview-excerpt {margin-top:8px}
.study-page #yurai .castle-overview.is-collapsed .overview-topic + .overview-topic,
.study-page #yurai .castle-overview.is-collapsed .overview-use {display:none}
.study-page #yurai .castle-overview.is-collapsed .overview-topic:first-child li + li {max-height:14px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent)}
.study-page #yurai .overview-topic h3 {margin:0 0 6px;padding:0;border:0;font-size:16px;line-height:24px;color:inherit}
.study-page #yurai .overview-topic ul {margin:0;padding:0 0 0 1.2em;font-size:14px;line-height:1.65}
.study-page #yurai .overview-topic li + li {margin-top:6px}
.study-page #yurai .overview-topic + .overview-topic {margin-top:12px}
.study-page #yurai .castle-overview .overview-use {margin-top:12px}
.study-page #yurai .overview-toggle {display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;width:100%;min-height:44px;margin:6px 0 0;padding:8px 16px;border:1px solid rgba(195,212,237,.32);border-radius:24px;background:none;color:inherit;font:inherit;font-weight:700;line-height:1.4;cursor:pointer}
.study-page #yurai .overview-toggle[hidden] {display:none}
.study-page #yurai .overview-toggle::after {content:"";display:block;width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);flex:none}
.study-page #yurai .overview-toggle[aria-expanded="true"]::after {transform:translateY(2px) rotate(225deg)}
.study-page #yurai .overview-toggle:focus-visible {outline:2px solid #ffd23f;outline-offset:2px}


/* Empty in-page anchors occupy no text line and remain below the fixed header. */
.study-page .kcard > span[id]:empty {display:block;scroll-margin-top:56px}