/* ===== コース一覧（11枚）と28パターンの盤（2026-08-30 松原さん指示＝型一覧は1手詰めの一覧と同じ型：名前→盤→この問題を解く）
   盤は今日の1問と同じ最大サイズ（--pdc）・9×9・持ち駒の行は幅固定（レイアウト4d・4e）。このページだけの並びなのでCSSはここに置く。 */
/* コース10枚は2カラムのカードのまま、各カードの中に5×5の切り抜き盤（data-win・カードの内側いっぱい）＋「問題を解く」。
   2カラムだと9×9では駒が小さすぎるので、この盤だけ5×5（2026-08-30 松原さん承認＝盤の3原則①・レイアウト4eの例外） */
.ccard .cname{text-decoration:none}
.courses .ccard{--pdc:calc(((min(100vw,760px) - 42px) / 2 - 10px) / 5)}   /* 盤・持ち駒・ボタン・問題を解く が同じ幅になるようカードに置く */
.ccard .pdemo{--pdc:calc(((min(100vw,760px) - 42px) / 2 - 10px) / 5);margin:6px -13px 0;
 min-height:calc(var(--pdc) * 5 + max(34px, var(--pdc) * .86) + 76px)}   /* 5×5（data-win）。盤(--pdc×5+6)＋持ち駒の行＋ボタン行 */
.ccard .pdbox{--pdc:calc(((min(100vw,760px) - 42px) / 2 - 10px) / 5);--cell:var(--pdc);margin:0}
.ccard .handrow,.ccard .pdctl{width:calc(var(--pdc) * 5 + 6px);max-width:100%}
.courses .ccard{min-width:0}
.ccard .pdbox{max-width:100%;overflow:hidden}
.ccard .pdb{max-width:100%;overflow:hidden}   /* 保険＝古い tsumen-demo.js（data-win を知らない）が9×9で描いても、カードが広がらず隣に重ならない */
.ccard .handrow{margin:6px auto;min-height:calc(max(34px, var(--pdc) * .86) + 8px)}
.ccard .patgo{display:block;width:calc(var(--pdc) * 5 + 6px);max-width:none;margin:8px 0 0 -12px;padding:12px 10px;border-radius:10px;
 background:#8e44ad;color:#fff;font-size:14px;font-weight:800;text-align:center;text-decoration:none;line-height:1.5}
.ccard .patgo:active{transform:scale(.97)}
@media(max-width:359px){
 .courses .ccard{--pdc:calc((min(100vw,760px) - 42px) / 5)}
 .ccard .pdemo{--pdc:calc((min(100vw,760px) - 42px) / 5)}
 .ccard .pdbox{--pdc:calc((min(100vw,760px) - 42px) / 5)}
}
.patlist li{padding:10px 0}
.patlist .cdone{margin-left:8px;font-size:12px;opacity:.75;white-space:nowrap}
.patlist .patbd{min-width:0;margin:4px 0 0}
.patlist .patbd .pdemo{--pdc:calc((min(100vw,430px) - 22px) / 9);margin:0;
 min-height:calc(var(--pdc) * 9 + max(34px, var(--pdc) * .86) + 76px)}   /* 盤(--pdc×9+6)＋持ち駒の行(6+max+8)＋ボタン行(8+48)＝実高さと同じ式（レイアウト4f） */
.patlist .patbd .pdbox{--pdc:calc((min(100vw,430px) - 22px) / 9);--cell:var(--pdc);margin:0}
.patlist .patbd .hw{width:max(34px,calc(var(--pdc) * .86));height:max(34px,calc(var(--pdc) * .86))}
.patlist .patbd .hw .pc{font-size:max(21px,calc(var(--pdc) * .58 * var(--ps,1)))}
.patlist .patbd .handrow{width:calc(var(--pdc) * 9 + 6px);max-width:100%;margin:6px auto;min-height:calc(max(34px, var(--pdc) * .86) + 8px)}
.patlist .pattx{min-width:0}
.patlist .patgo{display:block;width:100%;max-width:300px;margin:6px auto 0;padding:12px 10px;border-radius:10px;
 background:#8e44ad;color:#fff;font-size:14px;font-weight:800;text-align:center;text-decoration:none;line-height:1.5}
.patlist .patgo:active{transform:scale(.97)}
.patlist .patgo::after{content:none}
/* 759pxまでは一覧を画面の端まで広げ、盤を今日の1問と同じ幅にする。文字は元の位置（画面の端から28px＝.wrap 16px＋枠 12px）のまま */
@media (max-width:759px){
 details.patlist{margin-left:-16px;margin-right:-16px;padding-left:0;padding-right:0;border-left:0;border-right:0;border-radius:0}
 details.patlist>summary,.patlist .patcat>h3,.patlist .patlead,.patlist li{padding-left:28px;padding-right:28px}
 .patlist .patbd{margin-left:-28px;margin-right:-28px}
 details.patlist>summary::after{left:0;right:0}   /* 画面の端まで広げたので、タップ範囲の帯が画面の外にはみ出さないようにする */
}
/* 760px以上は盤が左・文字が右の2列（1手詰めの一覧と同じ） */
@media (min-width:760px){
 .patlist li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto 1fr;gap:4px 14px;align-items:start}
 .patlist li>br{display:none}
 .patlist .patbd{grid-column:1;grid-row:1 / span 4;width:calc((min(100vw,430px) - 22px) + 6px);margin:0}
 .patlist .patname{margin-top:6px}
 .patlist .patgo{margin:8px 0 0}
}

/* 7手詰めの案内図。盤と駒は既存の共通部品を使う。 */
.ccard .cname,.patname[data-seven-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.seven-modal-open{overflow:hidden}
.seven-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}
.seven-dialog::backdrop{background:#020914bb}
.seven-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}
.seven-dialog-head h2{flex:1;margin:0;font-size:clamp(18px,3.6vw,24px);line-height:1.5;border:0;padding:0}
.seven-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}
.seven-dialog-body{padding:14px 18px 24px}
.seven-guide{margin:12px 0 20px;border:1px solid #62758d;border-radius:10px;padding:0;background:#14233b;color:#eef3f9}
.seven-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}
.seven-guide[open]>summary{border-bottom:1px solid #3b4c64}
.seven-guide-body{padding:12px 14px 18px}
.seven-lesson p{line-height:1.8}
.seven-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}
.seven-example-link{display:inline-block;margin-top:8px;text-underline-offset:.22em}
@media(max-width:479px){.seven-dialog{width:calc(100% - 12px);max-height:calc(100dvh - 12px);border-radius:10px}.seven-dialog-head{padding:10px;gap:8px}.seven-dialog-body{padding:12px 10px 20px}.seven-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}}

.seven-dialog:not([open]){display:none}
.seven-dialog-head h2,.seven-guide>summary,.seven-lesson h3{color:#ffd34d}
.seven-guide>summary:focus-visible,[data-seven-close]:focus-visible,[data-seven-guide]:focus-visible{outline:2px solid #ffd34d;outline-offset:3px}
.patname[data-seven-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}
}