/* 5手詰めの案内図。盤と駒は既存の共通部品を使う。 */
.ccard .cname,.patname[data-five-guide]{text-decoration:underline;text-underline-offset:.22em}
.ccard .cname{display:flex;align-items:flex-start;min-height:3.2em;line-height:1.6;overflow-wrap:anywhere}
.ccard>.patgo{box-sizing:border-box;width:calc(100% + 26px);max-width:none;margin:8px 0 0 -13px}
#patBox,#patternBox{scroll-margin-top:100px}
body.five-modal-open{overflow:hidden}
.five-dialog{margin:auto;box-sizing:border-box;width:calc(100% - 24px);max-width:980px;max-height:calc(100dvh - 24px);padding:0;border:1px solid #62758d;border-radius:14px;background:#14233b;color:#eef3f9;color-scheme:dark;overflow:auto;overscroll-behavior:contain}
.five-dialog::backdrop{background:#020914bb}
.five-dialog-head{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:16px;padding:12px 16px;background:#14233b;border-bottom:1px solid #3b4c64}
.five-dialog-head h2{flex:1;margin:0;font-size:clamp(18px,3.6vw,24px);line-height:1.5;border:0;padding:0}
.five-dialog-head button{flex:none;min-width:64px;min-height:44px;padding:8px 12px;border:1px solid #8091a7;border-radius:8px;background:#314660;color:#fff;font:inherit;cursor:pointer}
.five-dialog-body{padding:14px 18px 24px}
.five-guide{margin:12px 0 20px;border:1px solid #62758d;border-radius:10px;padding:0;background:#14233b;color:#eef3f9}
.five-guide>summary{padding:13px 16px;font-weight:bold;cursor:pointer;line-height:1.6;text-decoration:underline;text-underline-offset:.22em;min-height:44px;box-sizing:border-box}
.five-guide[open]>summary{border-bottom:1px solid #3b4c64}
.five-guide-body{padding:12px 14px 18px}
.five-lesson p{line-height:1.8}
.five-lesson h3{margin:22px 0 10px;font-size:18px;line-height:1.6}
.fg-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:22px 20px;margin:14px 0 22px;align-items:start}
.fg-figure{min-width:0;width:100%;max-width:402px;margin:0 auto;container-type:inline-size}
.fg-figure figcaption,.fg-caption{font-weight:bold;line-height:1.6;margin:0 0 8px;font-size:16px}
.fg-board-slot{min-width:0}
.fg-diagram{--pdc:min(44px,calc((100vw - 76px)/9));--cell:var(--pdc);position:relative;isolation:isolate;box-sizing:content-box;width:calc(var(--pdc)*9 + 6px);max-width:100%;margin:0 auto}
@supports(width:1cqw){.fg-diagram{--pdc:min(44px,calc((100cqw - 6px)/9))}}
.pdb.fg-board{display:grid;grid-template-columns:repeat(9,var(--pdc));grid-template-rows:repeat(9,var(--pdc));box-sizing:content-box;margin:0;width:fit-content;max-width:none}
.fg-board .cell{box-sizing:border-box;cursor:default;position:relative;pointer-events:none}
.fg-board .cell.fg-last{background:#fff0aa}
.fg-board .cell.fg-covered{background:#f7d9d2;box-shadow:inset 0 0 0 2px #b63d2d}
.fg-board .cell.fg-protected{background:#ffe49d;box-shadow:inset 0 0 0 2px #b54824}
.fg-board .cell.fg-reach{background:#d8ecd6;box-shadow:inset 0 0 0 2px #437a43}
.fg-board .cell.fg-mark{box-shadow:inset 0 0 0 2px #b54824}
.fg-mark-label{position:absolute;right:1px;bottom:0;z-index:5;line-height:1;font-size:calc(var(--pdc)*.32);font-weight:bold;color:#9b2518;background:#fffdf0e8;padding:1px}
.fg-hand{--cell:34px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;box-sizing:border-box;min-height:50px;margin:7px auto 0}
.fg-hand .hname{font-size:13px;white-space:normal;width:4em;flex:0 0 4em;line-height:1.4;text-align:center}
.fg-hand .pieces{display:flex;flex-wrap:wrap;gap:3px}
.fg-hand .hw,.fg-origin .hw{position:relative;width:34px;height:34px;flex:none}
.fg-hand .pc,.fg-origin .pc{font-size:calc(34px*.58*var(--ps,1))}
.fg-hand .pc.two{font-size:calc(34px*.35*var(--ps,1))}
.fg-note,.fg-legend,.fg-outcome{margin:7px 0 0;line-height:1.8;font-size:15px;overflow-wrap:anywhere}
.fg-legend{font-size:13px;color:#c5d0df}
.fg-outcome{font-weight:bold}
.fg-origin{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:10px;min-height:42px;font-size:13px}
.fg-arrows{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.five-example-link{display:inline-block;margin-top:8px;text-underline-offset:.22em}
@media(max-width:479px){.five-dialog{width:calc(100% - 12px);max-height:calc(100dvh - 12px);border-radius:10px}.five-dialog-head{padding:10px;gap:8px}.five-dialog-body{padding:12px 10px 20px}.five-guide-body{padding:12px 8px 18px}.fg-figures{gap:24px}.fg-figure{max-width:402px}}
@media(max-width:359px){.ccard .cname{min-height:1.6em}}

.five-dialog:not([open]){display:none}
.five-dialog-head h2,.five-guide>summary,.five-lesson h3{color:#ffd34d}
.five-guide>summary:focus-visible,[data-five-close]:focus-visible,[data-five-guide]:focus-visible{outline:2px solid #ffd34d;outline-offset:3px}
.patname[data-five-guide]{display:inline-block;min-height:44px;padding:6px 0;box-sizing:border-box}
/* Size the cropped previews from each card's real inner width, excluding scrollbars. */
@supports(width:1cqw){
 .courses .ccard{container-type:inline-size}
 .ccard .pdemo{--pdc:calc((100cqw + 20px)/5);width:calc(100% + 26px)}
 .ccard .pdbox{--pdc:inherit;--cell:var(--pdc);width:100%}
 .ccard .pdb{max-width:none}
 .patlist .patbd{container-type:inline-size}
 .patlist .patbd .pdemo{--pdc:calc((100cqw - 6px)/9);width:100%;max-width:430px}
 .patlist .patbd .pdbox{--pdc:inherit;--cell:var(--pdc);max-width:100%;width:fit-content}
}