/* ===================================================================
   将棋ジム 3〜9手詰め 共通CSS（/tsumeshogi/3te|5te|7te|9te/ の親ページ・分類ページ共通）
   2026-08-29 新設。元は各 index.html の <style> にあったもの（内容はそのまま）。
   1手詰め（tsume1.css）・トップページのCSSには1バイトも触っていない。
   =================================================================== */

:root{
  color-scheme:dark;
  --wood1:#f0c070; --wood2:#dfa24e; --line:#7a4a12;
  --piece1:#fde8bc; --piece2:#e9bf78; --ink:#2a1600; --red:#c0392b;
  --bg1:#101b30; --bg2:#1d3252; --gold:#ffcf40; --accent:#ff8c1a;
  --card:#ffffff10; --border:#ffffff26;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
 background:linear-gradient(160deg,var(--bg1),var(--bg2) 60%,#14243d);
 color:#fff;min-height:100vh;line-height:2}
.wrap{max-width:760px;margin:0 auto;padding:12px 16px 60px;position:relative}
:root{--cell:calc((min(100vw,430px) - 34px) / 9)}
header{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 4px;gap:8px}
header .logo{font-weight:800;font-size:16px;line-height:2;white-space:nowrap;position:relative;z-index:10;flex:none}
header .logo span{color:var(--gold)}
header a{color:#fff;text-decoration:none}
header a.logo::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
header .hmid{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#ffffffcc;line-height:1.5}
header .hmid .sep{color:#ffffff4d;margin:0 5px}header .hmid{margin-left:-5px}header .hmid>.sep:first-child{margin-left:0}
section{scroll-margin-top:44px}   /* アンカー移動でsticky進捗バーに見出しが隠れないように */
.breadcrumb{font-size:12px;color:#ffffff99;margin-bottom:6px}
.breadcrumb a{color:#ffffff99}
h1{font-size:24px;line-height:1.4;margin-bottom:8px}
h2{font-size:19.5px;color:var(--gold);border-left:4px solid var(--gold);
 padding-left:10px;margin:48px 0 14px;line-height:1.5}
h3{font-size:16px;color:#fff}
p{font-size:14.5px;margin:10px 0}
a{color:var(--gold)}
.pubdate{font-size:12px;color:#ffffff99;margin:0 0 6px}
.lead{font-size:14.5px}
.note{background:#ff8c1a1a;border:1px solid #ff8c1a55;border-radius:10px;
 padding:10px 14px;font-size:13.5px;margin:12px 0}
.point{background:#ffcf401a;border:1px solid #ffcf4055;border-radius:10px;
 padding:10px 14px;font-size:13.5px;margin:12px 0}
#menuBtn{position:relative;z-index:301;width:34px;height:30px;background:#0009;border:1px solid #ffffff33;border-radius:8px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;flex:none}
#menuBtn::after{content:"";position:absolute;inset:-8px}
#menuBtn i{display:block;width:16px;height:2px;background:#fff;border-radius:2px}
#menuPanel{display:none;position:absolute;top:54px;right:16px;z-index:300;
 background:#16274a;border:1px solid #ffffff33;border-radius:10px;min-width:210px;max-width:calc(100% - 32px);
 max-height:calc(100vh - 66px);overflow-y:auto;box-shadow:0 10px 30px #000c}
#menuPanel a.mh{display:block;text-decoration:none;padding:14px 16px 13px}
#menuPanel a.mh:active{background:#ffffff14}
#menuPanel .mh{padding:9px 16px 5px;font-size:11px;font-weight:700;color:#ffd884;background:#00000033;border-bottom:1px solid #ffffff14;line-height:1.6}
#menuPanel a.mlink{display:block;padding:12px 16px;font-size:13.5px;color:#fff;text-decoration:none;border-bottom:1px solid #ffffff14;line-height:1.6}
#menuPanel .dis{display:block;padding:12px 16px;font-size:13.5px;color:#7387a8;border-bottom:1px solid #ffffff14;line-height:1.6}
#menuPanel > *:last-child{border-bottom:none}
#menuPanel a.mlink:active{background:#ffffff14}
.progress{position:sticky;top:0;z-index:9;background:#101b30ee;border-bottom:1px solid var(--border);
 padding:6px 10px;font-size:13px;text-align:center;backdrop-filter:blur(4px)}
.progress b{color:var(--gold)}
.ctip{font-size:13.5px;color:#ffffffcc}
/* 章の中だけ並べ替えるので、章をflexにする（並べ替えはCSSのorder。HTMLの並びは変えない）
   flexにするとマージンの相殺が止まるので、上マージンを0にして相殺前と同じ間隔に戻す */
section[data-cat]{display:flex;flex-direction:column;margin-bottom:-18px}
section[data-cat]>h2{margin-bottom:14px}
section[data-cat]>.ctip{margin-top:0;margin-bottom:18px}
section[data-cat]>.prob{margin-top:0}
.prob{background:var(--card);border:1px solid var(--border);border-radius:14px;
 padding:14px 14px 10px;margin:18px 0}
.phead{display:flex;align-items:center;gap:10px}
.pdone{font-size:13px;color:#7fe27f;font-weight:700}
.hand{font-size:13.5px;margin:6px 0}
.stage{position:relative;width:calc(min(100vw,430px) - 16px);margin:8px auto;user-select:none}
/* 盤・駒・持ち駒・挙動表示・成りダイアログのCSSは共通の shogi-ui.css を使用（2026-07-19） */
@media (max-width:479px){
 .prob{margin-left:-16px;margin-right:-16px;border-left:none;border-right:none;border-radius:0;
  padding-left:8px;padding-right:8px}
}
.postext{font-size:12px;color:#ffffff99}
details.ans img{max-width:100%;height:auto;display:block;margin:8px auto 0}
details.ans,details.faq,details.about1te,details.fail{background:#00000026;border:1px solid var(--border);border-radius:10px;
 padding:8px 14px;margin:10px 0;font-size:14px}
details summary{cursor:pointer;font-weight:700;color:var(--gold)}
details p{margin:8px 0}
.anstext b{color:var(--gold)}
table.plain{border-collapse:collapse;width:100%;margin:12px 0;font-size:13.5px}
table.plain th,table.plain td{border:1px solid var(--border);padding:6px 10px;text-align:left}
table.plain th{background:#ffffff14;color:var(--gold)}
.cta{display:block;background:linear-gradient(135deg,var(--accent),#ff6a00);color:#fff;
 text-align:center;font-weight:800;font-size:15.5px;border-radius:12px;padding:12px;
 margin:14px 0;text-decoration:none;box-shadow:0 4px 14px #ff8c1a44}
.cta.sub{background:var(--card);border:1px solid var(--border);box-shadow:none}
footer{margin-top:20px;border-top:1px solid var(--border);padding-top:4px;text-align:center;font-size:12.5px;color:#ffffff99;line-height:44px}
footer a{color:#ffffff99;text-decoration:none;position:relative;display:inline-block}
footer a::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
footer .cp{margin-left:10px;color:#ffffff80}
.reset{background:none;border:1px solid var(--border);color:#ffffff99;border-radius:8px;
 font-size:11.5px;padding:2px 10px;cursor:pointer;margin-left:10px}
.reset{position:relative}
.reset::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
.breadcrumb a{position:relative;display:inline-block}
.breadcrumb a::after{content:"";position:absolute;left:-6px;right:-6px;top:-2px;height:50px}
/* 不正解演出＋答えを見るボタン（2026-07-20ユーザー指定・トップページと同じ「不正解…」＋揺れ） */
.pctl .answer{background:#8e44ad;flex:1;max-width:170px}
.pshake{animation:pshake .45s}
@keyframes pshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
/* 出題モード（1問ずつ・切替方式・2026-07-20） */
.trainbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0 2px}
#trainStart{background:linear-gradient(135deg,var(--accent),#ff6a00);color:#fff;border:none;
 font-weight:800;font-size:15.5px;border-radius:12px;padding:13px 22px;cursor:pointer;
 box-shadow:0 4px 14px #ff8c1a44;font-family:inherit}
/* ランダム10問（2026-07-29ユーザー指示） */
.trainbar .tb2{border:none;color:#fff;font-family:inherit;font-weight:800;font-size:15.5px;
 border-radius:12px;padding:13px 22px;cursor:pointer;background:#3b5273}
.trainbar button:active{transform:scale(.97)}
/* 出題画面は1画面固定＝スクロールなし（フッターや一覧へ移動できない） */
body.training{overflow:hidden}
#trainScreen{display:none;position:fixed;inset:0;z-index:200;overflow:hidden;
 background:linear-gradient(160deg,var(--bg1),var(--bg2) 60%,#14243d)}
body.training #trainScreen{display:flex;flex-direction:column}
body.training .wrap>*:not(#trainScreen){display:none}
.tbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;
 background:#101b30ee;border-bottom:1px solid var(--border);padding:6px 10px;font-size:13px}
.tbar b{color:var(--gold)}
.tquit{background:none;border:1px solid var(--border);color:#ffffff99;border-radius:8px;
 font-size:11.5px;padding:2px 10px;cursor:pointer;flex:none}
.tdots{display:flex;gap:5px;align-items:center;flex:1;justify-content:center}
.tdots i{width:9px;height:9px;border-radius:50%;background:#ffffff2e;flex:none}
.tdots i.ok{background:var(--gold)}
.tdots i.ng{background:#ff5b5b}
.tdots i.now{box-shadow:0 0 0 2px var(--accent)}
.tleft{flex:none;font-size:12px;color:#ffffffcc;min-width:56px;text-align:right}
.tcombo{position:relative;flex:none;height:24px;text-align:center;font-weight:800;font-size:13px;color:var(--gold);line-height:24px}
@media (max-width:340px){.tdots{gap:3px}.tdots i{width:7px;height:7px}.tleft{font-size:11px;min-width:46px}}
.tcombo .c5{font-size:15px;color:var(--accent)}
.tcombo .c10{font-size:17px;color:#ff5b5b;text-shadow:0 0 10px #ff8c1a99}
#trainSlot{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
#trainScore{display:none;flex:1;min-height:0;overflow:hidden;text-align:center;padding:18px 14px}
#trainScore p{margin:6px 0}
.ts-set{font-size:13px;color:#ffffff99}
.ts-h{font-size:21px;font-weight:800}
.ts-h b{color:var(--gold);font-size:30px}
.ts-star{font-size:34px;color:var(--gold);letter-spacing:4px;line-height:1.2}
.ts-time,.ts-wrong{font-size:13.5px;color:#ffffffcc}
.ts-btns{margin-top:14px}
.tsb{display:block;width:100%;max-width:280px;margin:8px auto;padding:13px 0;border:none;border-radius:12px;
 font-size:15px;font-weight:800;color:#fff;font-family:inherit;cursor:pointer;background:#3b5273}
.tsb.main{background:linear-gradient(135deg,var(--accent),#ff6a00);box-shadow:0 4px 14px #ff8c1a44}
.tsb.sub{background:none;border:1px solid var(--border);color:#ffffff99;font-weight:700;font-size:13.5px}
.tsb.off{visibility:hidden}
.tsb:active{transform:scale(.98)}
/* 出題中は一覧用の枠・見出し・説明文・解説・手筋名・正解印を出さない（1画面に収めるため） */
#trainSlot .prob{background:none;border:none;border-radius:0;margin:0;padding:2px 8px 0;width:100%;max-width:446px}
#trainSlot .prob .phead,#trainSlot .prob .hand,#trainSlot .prob details.ans{display:none}
#trainSlot .stage{margin:6px auto}
.pctl .tnext{background:var(--accent);flex:1;max-width:170px}
/* 画面の高さが足りない端末だけ盤を縮める（駒・持ち駒も同じ比率で連動） */
@media (max-height:640px){
 body.training{--tbw:min(calc(min(100vw,430px) - 16px), calc(100svh - 240px));--tcl:calc((var(--tbw) - 6px) / 9)}
 #trainSlot .stage{width:var(--tbw)}
 #trainSlot{--cell:var(--tcl)}
 #trainSlot .pc{font-size:calc(var(--tcl) * .687 * var(--ps,1))}
 #trainSlot .hw .pc{font-size:calc(var(--tcl) * .576 * var(--ps,1))}
 #trainSlot .pc.two{font-size:calc(var(--tcl) * .41 * var(--ps,1))}
}

/* 問題カード・パターン一覧（2026-07-29：カテゴリタブ・型コード・レベルバッジは削除） */
.prob{scroll-margin-top:44px}
.patlist{margin:10px 0 6px;border:1px solid #ffffff26;border-radius:10px;padding:10px 12px;background:#ffffff08}
.patlist>summary{font-weight:800;cursor:pointer;color:var(--gold)}
.patcat{margin:12px 0 4px}
.patcat h4{margin:0 0 2px;font-size:15px}
.patlead{margin:0 0 6px;font-size:13px;opacity:.8}
.patlist ul{list-style:none;margin:0 0 10px;padding:0}
.patlist li{border-top:1px solid #ffffff1a;padding:7px 0}
.patlist li a{font-weight:700;text-decoration:none}
.patn{margin-right:8px;font-size:12px;opacity:.75;white-space:nowrap}
.pattip{font-size:13px;opacity:.85;line-height:1.6}

/* 形式4（詰み判定○×）＝2026-07-22（レベルタブは2026-07-29に削除） */
.q4btns{display:flex;gap:8px;justify-content:center;margin:8px 0 2px}
.q4btns button{flex:1;max-width:160px;border:none;border-radius:10px;padding:13px 4px;font-size:15px;font-weight:800;color:#fff;font-family:inherit;cursor:pointer}
.q4btns .q4y{background:#2f6fd0}.q4btns .q4n{background:#c0392b}
.q4btns button:active{transform:scale(.96)}

/* ===== 盤の筋・段（2026-07-29ユーザー指示。符号「１一玉」の根拠を盤上に出す）
   2026-08-13 改：濃さ50%＋盤のふちに半分のせる（マスの中を空ける） ===== */
.gboard .cf,.gboard .cr,.pdb .cf,.pdb .cr{position:absolute;z-index:6;pointer-events:none;
 font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:9px;line-height:1;font-weight:700;
 color:#3a2405;opacity:.5;
 display:flex;align-items:center;justify-content:center}
.gboard .cf,.pdb .cf{top:-.5em;left:0;right:0;height:1em}    /* 筋＝盤の上ふちに半分のせる */
.gboard .cr,.pdb .cr{top:0;bottom:0;right:-.5em;width:1em}   /* 段＝盤の右ふちに半分のせる */
@media (min-width:400px){.gboard .cf,.gboard .cr,.pdb .cf,.pdb .cr{font-size:10px}}

/* ===== 表示切替バー＋★自分の問題集（2026-07-29） ===== */
.filterbar{display:flex;gap:6px;margin:8px 0 0}
.fbtn{flex:1;border:1px solid #ffffff33;background:#ffffff10;color:inherit;border-radius:8px;
 padding:14px 1px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;
 white-space:nowrap;letter-spacing:-.02em}
@media (max-width:359px){.fbtn{font-size:11px}}
.fbtn.on{background:var(--gold);color:#1a1200;border-color:var(--gold)}
.starbtn{margin-left:auto;background:none;border:1px solid var(--border);border-radius:8px;
 color:#ffffff66;font-size:17px;line-height:1;padding:14px 13px;cursor:pointer;font-family:inherit;flex:none}
.starbtn.on{color:var(--gold);border-color:#ffcf4055;background:#ffcf4014}
.phead{flex-wrap:wrap}
.phead h3{flex:0 1 auto;min-width:0}
.wrongbadge{font-size:12px;color:#ff8f8f;font-weight:700}

/* ===== 今日の1問（ファーストビュー・2026-07-29ユーザー指示） ===== */
/* 盤の左右に枠（カードの背景・枠線・余白）を作らない＝CLAUDE.md レイアウト7（2026-08-24 松原さん指示） */
#todayBox{margin:8px 0 2px;padding:0;background:none;border:0;border-radius:0}
#todayBox .tdhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 2px}
#todayBox h2{margin:0;font-size:16px;color:var(--gold)}
#todayNext{border:none;border-radius:10px;background:#3b5273;color:#fff;font-family:inherit;
 font-size:13px;font-weight:700;padding:13px 14px;cursor:pointer;flex:none}
#todayNext:active{transform:scale(.97)}
#todayBox .hw{width:max(34px,calc(var(--pdc) * .86));height:max(34px,calc(var(--pdc) * .86))}
#todayBox .hw .pc{font-size:max(21px,calc(var(--pdc) * .58 * var(--ps,1)))}
/* 持ち駒の行の高さは、持ち駒の駒（上の .hw の max(34px,…)）と同じにそろえる（持ち駒が「なし」の時も同じ高さ。幅320で「答えを見る」の後に約1px縮んでいた。盤の3原則③。2026-10-10 松原さん「直してください」） */
#todayBox .handrow{min-height:calc(max(var(--cell),34px) + 8px)}

/* ===== パターン体験デモ（2026-07-29） ===== */
.pdemo{margin:6px 0 2px}
.pdbox{position:relative;margin:8px 0 2px;--pdc:min(9.6vw,38px);--cell:var(--pdc)}
.pdb{display:grid;width:fit-content;margin:0 auto;
 background:radial-gradient(circle at 30% 20%, #ffffff2e, #0000 60%),linear-gradient(135deg,var(--wood1),var(--wood2));
 border:3px solid var(--line);border-radius:4px;box-shadow:0 4px 14px #0009, inset 0 0 10px #a86a1e55}
.pdb .cell{width:var(--pdc);height:var(--pdc)}
.pdb .pc{font-size:calc(var(--pdc) * .69 * var(--ps,1))}
.pdb .pc.two{font-size:calc(var(--pdc) * .41 * var(--ps,1))}
.pdbox .hw .pc{font-size:calc(var(--pdc) * .58 * var(--ps,1))}
.pdbox .handrow{max-width:calc(var(--pdc) * 9);margin:6px auto}
.pdctl{display:flex;gap:8px;justify-content:center;margin:8px 0 0}
.pdctl button{border:none;border-radius:9px;color:#fff;font-family:inherit;font-size:13px;
 font-weight:700;padding:14px 16px;cursor:pointer;background:#3b5273}
.pdctl .pdshow{background:#8e44ad}
.pdctl button:active{transform:scale(.97)}
.pdbox .splash{font-size:30px}
.prob{content-visibility:auto;contain-intrinsic-size:auto 730px}


/* 2026-07-31 追加：箇条書きの黒丸が枠の外に出ないようにする（*{margin:0;padding:0}のため） */
.brl,details.fail ul{margin:4px 0 4px 1.4em;list-style:disc}
.brl li,details.fail li{margin:2px 0}
/* パターン一覧のリンクのタップ範囲を44pxにする（paddingで高さを増やさない＝盤を動かさない） */
.patlist li a{position:relative;display:inline-block}
.patlist li a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}

/* 今日の1問の盤はJSで作るので、先に高さを取っておく（CLS対策・fitBoardの上限と同じ式） */
/* 手順は違うが11手で詰んだとき（トップページ #splash.near と同じ） */
.splash.near{color:#ff8c1a;white-space:pre-line;font-size:34px;line-height:1.3;letter-spacing:3px}
@media (min-width:400px){.splash.near{font-size:38px}}
/* 盤は9×9・トップページ（#app max-width:430px／左右padding 8px／盤border 3px）と同じ最大サイズにする
   （2026-08-24 松原さん指示。左右の枠を無くすため .wrap の左右padding 16px を打ち消す） */
#todaySlot{min-height:calc((min(100vw,430px) - 22px) / 9 * 9.93 + 77.6px);margin-left:-16px;margin-right:-16px}
#todaySlot:empty{min-height:calc((min(100vw,430px) - 22px) / 9 * 9.93 + 91.6px + max((min(100vw,430px) - 22px) / 9, 34px))}   /* 2026-10-10 今日の1問の盤の上に相手の持ち駒の行を足した分（行の高さ＋盤との間6px）を、盤ができる前の確保にも足す（CLS対策）。盤ができた後は上の min-height のまま＝古い体験盤のJSの時も下に空きが出ない */
#todaySlot .pdbox{--pdc:calc((min(100vw,430px) - 22px) / 9);--cell:var(--pdc);margin-top:0}
#todaySlot .handrow{max-width:calc(var(--pdc) * 9 + 6px)}
/* タップ目標44px（もう一度・答えを見る） */
.pctl button{padding:13px 4px}
/* 閉じた目次（詰将棋ハブと同じ形） */
.toc{margin:10px 0;background:var(--card);border:1px solid var(--border);border-radius:10px}
.toc summary{cursor:pointer;padding:12px;font-size:14px;font-weight:700;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary::before{content:"▶ ";color:var(--gold);font-size:11px}
.toc[open] summary::before{content:"▼ "}
.toc ul{margin:0 0 8px 1.6em;list-style:disc}
.toc ul li{padding:8px 0}
.toc ul li a{position:relative;display:inline-block;line-height:1.6;text-decoration:none}
.toc ul li a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
table.plain{border-collapse:collapse;margin:8px 0;font-size:14px;width:100%}
table.plain th,table.plain td{border:1px solid var(--border);padding:6px 8px;text-align:left}
table.plain th{background:#ffffff10;font-weight:700}
/* 本文リンク・開閉見出しのタップ範囲を44pxにする（paddingを使わないので盤の位置は変わらない） */
.note a,.ctip a,.faq p a{position:relative;display:inline-block}
.note a::after,.ctip a::after,.faq p a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
details.ans>summary,details.fail>summary,details.faq>summary,details.patlist>summary{position:relative}
details.ans>summary::after,details.fail>summary::after,details.faq>summary::after,details.patlist>summary::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
/* 盤と持ち駒の高さを先に取っておく（あとから描くときに下の文が動かない＝CLS対策・2026-08-17） */
section[data-cat] .stage{min-height:calc(min(100vw,430px) - 16px + (min(100vw,430px) - 34px) * 2 / 9 + 82px);display:flow-root}
/* 盤を描く前は「相手の持ち駒」の行がまだ無いので、その1行ぶんだけ盤を下げておく（描いた瞬間に盤が動かない） */
section[data-cat] .stage>.gboard:first-child{margin-top:calc((min(100vw,430px) - 34px) / 9 + 16px)}
/* 章の遅延描画で使う「1問ぶんの見込み高さ」を実測の平均に合わせる（幅ごとに28問を実測して平均した値） */
.prob{contain-intrinsic-size:auto 681px}
@media (min-width:360px){.prob{contain-intrinsic-size:auto 726px}}
@media (min-width:380px){.prob{contain-intrinsic-size:auto 742px}}
@media (min-width:400px){.prob{contain-intrinsic-size:auto 771px}}

/* 文頭のタップ式説明（2026-08-17 松原さん指示・見本＝shogi-rule.html の .tip / .tipbox）。
   タップ判定44pxは ::after で作る＝盤は1pxも下がらない */
.leadtip{margin:2px 0 6px;font-size:14.5px;line-height:1.9;position:relative}
.tip{border-bottom:2px dotted var(--gold);cursor:pointer;position:relative}
.tip::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:48px;transform:translateY(-50%)}   /* 下にある .progress（z-index:9）が数px重なるので48pxで取り、実測44px以上を確保する */
.tipbox{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:135%;width:min(84vw,330px);
 background:#0e1830;border:1px solid var(--gold);border-radius:10px;padding:10px 12px;font-size:12.5px;
 color:#ffe08a;z-index:20;line-height:1.7;font-weight:400;text-align:center;cursor:auto}
.tip.open ~ .tipbox{display:block}
.tipbox b{color:var(--gold)}

/* ===== 説明段落は本文に出さず、見出しごと閉じたアコーディオンに畳む（2026-08-17 松原さん指示・CLAUDE.md 文章8） ===== */
details.foldsec{margin:48px 0 14px}
details.foldsec>summary{cursor:pointer;position:relative;padding:2px 0}
details.foldsec>summary>h2{display:inline;margin:0}
details.foldsec>summary::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:48px;transform:translateY(-50%)}


/* ===================================================================
   ここから下は 3〜9手詰めの親子ページ化（2026-08-29）で足した分
   =================================================================== */

/* ----- 1手詰めページ（tsume1.css）と同じ部品。子ページで使う ----- */
.pno{font-size:11.5px;color:#ffffff8c;background:#ffffff14;border:1px solid var(--border);
 border-radius:6px;padding:1px 7px;margin-right:7px;flex:none;line-height:1.8}
.ptools{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.ptools .ptool{display:inline-block;background:#ffffff10;border:1px solid var(--border);border-radius:8px;
 color:#ffffffb3;font-size:12.5px;text-decoration:none;padding:12px;line-height:1.5;cursor:pointer;min-height:44px}
.ptools .ptool:active{background:#ffffff1f}
.progress .reset{position:relative}
.progress .reset::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
button#menuBtn{padding:0;margin:0;font:inherit;-webkit-appearance:none;appearance:none}
.tdstreak{font-size:12.5px;color:#ffd884;line-height:1.6;margin:0 0 2px;min-height:20px}
#todayBox .tdhead h2{flex:1;min-width:0}
#todayBox .tdhead .tdstreak{flex:none;margin:0 8px 0 0;min-height:0;white-space:nowrap}
.courses{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.ccard{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;
 padding:12px 13px;text-decoration:none;color:#fff;min-height:88px}
.ccard:active{background:#ffffff1f}
.ccard .cname{display:block;font-weight:700;font-size:14.5px;line-height:1.5;color:var(--gold)}
.ccard .cnum{display:block;font-size:12.5px;color:#ffffffb3;line-height:1.9}
.ccard .cdone{display:block;font-size:12px;color:#ffffff8c;line-height:1.7}
@media(max-width:359px){.courses{grid-template-columns:1fr}}
.pagenav{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.pagenav a{display:inline-block;background:#ffffff10;border:1px solid var(--border);border-radius:10px;
 padding:12px 14px;text-decoration:none;font-size:13.5px;line-height:1.6;min-height:44px}
.progress .pgall{white-space:nowrap;flex-basis:100%}   /* 常に自分の行＝桁が増えても行数が変わらない */
.progress{white-space:normal;overflow:visible;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:8px;row-gap:2px;min-height:62px;box-sizing:border-box}
.filterbar{scroll-margin-top:92px}
#offstage{display:none}

/* 手筋名を1手詰めのカテゴリページと同じ金色にする（body class="v2cards"） */
.v2cards .phead h3{color:var(--gold)}
.v2cards section[data-cat]>.ctip{margin-bottom:8px}
.v2cards section[data-cat]>.pdemo{--pdc:calc((min(100vw,430px) - 22px) / 9);
 min-height:calc(var(--pdc) * 9 + max(34px, var(--pdc) * .86) + 76px);margin:0 -16px 18px}
.v2cards section[data-cat]>.pdemo .pdbox{--pdc:calc((min(100vw,430px) - 22px) / 9);--cell:var(--pdc);margin-top:0}
.v2cards section[data-cat]>.pdemo .pdctl button{line-height:20px}

/* ----- 手順ボタン「1手目を見る／次の手を見る」（トップページ #btnHint と同じ青） -----
   並びは トップページと同じ ①もう一度（灰）②手順（青）③答えを見る（紫）。
   3つ並んでも幅320pxで盤の幅を超えないように、文字の大きさを幅に合わせて縮める。 */
.pdctl .pdstep{background:#2e86de}
.pctl .step{background:#2e86de;flex:1;max-width:170px}
.pdctl button{flex:1 1 0;min-width:0;white-space:nowrap;padding:14px 4px;
 font-size:clamp(11.5px,3.2vw,13px);line-height:20px}
.pctl button{white-space:nowrap;font-size:clamp(12px,3.4vw,14px)}
.pdctl button[disabled],.pctl button[disabled]{opacity:.45;cursor:default}
.pdctl button[disabled]:active,.pctl button[disabled]:active{transform:none}

/* ボタン行は盤と同じ幅で中央にそろえる（3つ並べても盤からはみ出さない。幅320pxでも同じ） */
.pdctl{max-width:calc(var(--pdc) * 9 + 6px);margin-left:auto;margin-right:auto}

/* 章の見本盤（親ページのパターン一覧・子ページの章）にも同じ3ボタン行を置くので、
   予約高さ（min-height）はボタン行48px＋上8pxのまま変わらない＝盤は1pxも動かない */