:root{
    /* --- 品位・清潔感・透明感（藍 × くすみ金）／明るく読みやすい --- */
    --paper:#ffffff;
    --ground:#f5f7fc;          /* 藍みのオフホワイト（選んだ neutral） */
    --ground2:#eef1f8;
    --ink:#171b2e;             /* 墨（藍寄りの near-black） */
    --sub:#5b6479;             /* スレート・藍バイアス */
    --line:#e4e8f2;
    --line-strong:#d3d9e8;
    --zebra:#fafbfe;
    --navy:#21356e;            /* 主アクセント・藍 */
    --navy-soft:#41539a;
    --navy-tint:#eef1fa;
    --gold:#b08a2e;            /* くすみ金 */
    --gold-soft:#c8a24b;
    --up:#2f8f6b;             /* 昇・くすませた緑 */
    --down:#bd4a5e;          /* 降・臙脂 */
    --m1:#c9a94a; --m2:#9aa2b1; --m3:#bd8a5c;   /* 金銀銅 */
    --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","Songti SC",serif;
    --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",YuGothic,sans-serif;
    --shadow:0 1px 2px rgba(23,27,46,.04),0 8px 24px rgba(23,27,46,.06);
    --radius:16px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --paper:#171b2b; --ground:#0f1220; --ground2:#141828;
      --ink:#eceffb; --sub:#9aa2ba; --line:rgba(255,255,255,.09);
      --line-strong:rgba(255,255,255,.15); --zebra:rgba(255,255,255,.026);
      --navy:#93a4e2; --navy-soft:#aeb9ea; --navy-tint:rgba(147,164,226,.12);
      --gold:#d6b968; --gold-soft:#e0c884;
      --up:#5bc79c; --down:#e8768a;
      --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="light"]{
    --paper:#ffffff; --ground:#f5f7fc; --ground2:#eef1f8; --ink:#171b2e; --sub:#5b6479;
    --line:#e4e8f2; --line-strong:#d3d9e8; --zebra:#fafbfe; --navy:#21356e; --navy-soft:#41539a;
    --navy-tint:#eef1fa; --gold:#b08a2e; --gold-soft:#c8a24b; --up:#2f8f6b; --down:#bd4a5e;
    --shadow:0 1px 2px rgba(23,27,46,.04),0 8px 24px rgba(23,27,46,.06);
  }
  :root[data-theme="dark"]{
    --paper:#171b2b; --ground:#0f1220; --ground2:#141828; --ink:#eceffb; --sub:#9aa2ba;
    --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.15); --zebra:rgba(255,255,255,.026);
    --navy:#93a4e2; --navy-soft:#aeb9ea; --navy-tint:rgba(147,164,226,.12); --gold:#d6b968; --gold-soft:#e0c884;
    --up:#5bc79c; --down:#e8768a; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  }

  *{box-sizing:border-box}
  body{margin:0;color:var(--ink);font-family:var(--sans);
    line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    background:
      radial-gradient(900px 420px at 92% -8%, color-mix(in srgb,var(--gold) 6%,transparent), transparent 60%),
      /* 極薄の将棋盤格子（和×将棋固有・真っ白の解消） */
      repeating-linear-gradient(0deg, transparent 0 47px, color-mix(in srgb,var(--navy) 4%,transparent) 47px 48px),
      repeating-linear-gradient(90deg, transparent 0 47px, color-mix(in srgb,var(--navy) 4%,transparent) 47px 48px),
      var(--ground);
    background-attachment:fixed}
  .wrap{max-width:1160px;margin:0 auto;padding:0 20px 72px}
  code{font-size:.9em;background:var(--ground2);padding:1px 5px;border-radius:4px}

  /* ---------- ヘッダー・ブランド ---------- */
  .top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);
    backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 color-mix(in srgb,var(--gold) 32%,transparent)}  /* 金の髪一本 */
  .top-in{max-width:1160px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:13px}
  /* 落款（朱印）＝風格を一点に集中 */
  .seal{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:5px;
    background:linear-gradient(135deg,#b5423a,#8f2b25);color:#fbe0dc;font-family:var(--serif);font-weight:700;
    font-size:17px;transform:rotate(-3deg);box-shadow:0 1px 3px rgba(120,30,25,.35),inset 0 0 0 1px rgba(255,255,255,.18)}
  .brand{display:flex;align-items:baseline;gap:9px;font-family:var(--serif)}
  .brand .mark{font-size:21px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
  .brand .mark b{color:var(--navy)}
  .brand .sub{font-family:var(--sans);font-size:11px;color:var(--sub);letter-spacing:.08em}
  .nav{display:flex;gap:2px;margin-left:8px}
  .nav a{font-size:13px;font-weight:700;color:var(--sub);text-decoration:none;padding:7px 11px;border-radius:8px}
  .nav a:hover{color:var(--navy);background:var(--navy-tint)}
  .nav a.cur{color:var(--navy)}
  @media(max-width:760px){.nav{display:none}}
  .spacer{flex:1}
  .search{display:none;align-items:center;gap:7px;background:var(--ground2);border:1px solid var(--line);
    border-radius:20px;padding:6px 13px;color:var(--sub);font-size:12px}
  @media(min-width:960px){.search{display:flex}}
  .theme{border:1px solid var(--line-strong);background:var(--paper);color:var(--sub);
    font-size:11px;border-radius:20px;padding:6px 12px;cursor:pointer;font-family:var(--sans)}
  .theme:hover{color:var(--ink);border-color:var(--navy-soft)}

  /* デモ帯 */
  .demo{max-width:1160px;margin:12px auto 0;padding:9px 14px;border:1px dashed var(--line-strong);
    border-radius:10px;background:var(--navy-tint);color:var(--sub);font-size:12px;line-height:1.6}
  .demo b{color:var(--navy);font-weight:700}
  .fillmark{color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);
    border-radius:4px;padding:0 4px;font-weight:700}

  /* ---------- タブ ---------- */
  .tabs{display:flex;gap:4px;margin:20px 0 6px;border-bottom:1px solid var(--line)}
  .tab{appearance:none;border:0;background:transparent;font-family:var(--sans);font-size:14px;
    font-weight:700;color:var(--sub);padding:11px 16px;cursor:pointer;position:relative;letter-spacing:.02em}
  .tab[aria-selected="true"]{color:var(--navy)}
  .tab[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2.5px;
    background:linear-gradient(90deg,var(--navy),var(--gold));border-radius:3px}
  .tab:focus-visible{outline:2px solid var(--navy-soft);outline-offset:2px;border-radius:6px}
  .panel{display:none;animation:fade .3s ease}
  .panel.on{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.panel{animation:none}}

  h2.section{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.02em;
    margin:24px 0 4px;color:var(--ink)}
  .lead{color:var(--sub);font-size:13px;margin:0 0 16px}
  .note{font-size:12px;color:var(--sub);margin-top:10px;line-height:1.7}

  /* ---------- 2カラム（本体＋サイドバー） ---------- */
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:26px;align-items:start}
  @media(max-width:900px){.layout{grid-template-columns:1fr}}
  .main{min-width:0}

  /* レート急変ストリップ */
  .movers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:2px 0 18px}
  @media(max-width:520px){.movers{grid-template-columns:1fr}}
  .mv{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);
    position:relative;overflow:hidden}
  .mv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
  .mv.u::before{background:var(--up)} .mv.d::before{background:var(--down)}
  .mv .lb{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--sub)}
  .mv .nm{font-weight:700;font-size:14px;margin:4px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mv .big{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
  .mv.u .big{color:var(--up)} .mv.d .big{color:var(--down)}
  .mv .sm2{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}

  /* ---------- フィルタ ---------- */
  .filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
  .sel{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--line-strong);
    border-radius:10px;padding:8px 12px;font-size:13px;color:var(--ink);box-shadow:var(--shadow)}
  .sel label{color:var(--sub);font-size:11px}
  .sel select{appearance:none;border:0;background:transparent;color:var(--ink);font-family:var(--sans);
    font-size:13px;font-weight:700;padding-right:14px;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);
    background-position:right 4px top 55%,right 0 top 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .sel select:focus-visible{outline:2px solid var(--navy-soft);outline-offset:3px;border-radius:4px}

  /* ---------- レート表 ---------- */
  .tablewrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);overflow:hidden}
  table.rate{width:100%;border-collapse:collapse;font-size:15px}
  .rate thead th{position:sticky;top:56px;background:var(--paper);z-index:5;
    font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--sub);text-align:left;
    padding:12px 16px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
  .rate th.num,.rate td.num{text-align:right;font-variant-numeric:tabular-nums}
  /* 見つけたことを1段落だけ強調する箱（⛔多用しない。ページに1つまで） */
  .callout{margin:18px 0;padding:16px 18px;border-left:3px solid var(--navy);
    background:var(--navy-tint);border-radius:0 6px 6px 0;font-size:14px;line-height:1.85}
  /* 年度別成績（先手番/後手番）＝分母を小さく添える。数字だけ見て「何局中か」を見失わせない */
  .rate td .sub{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums;margin-left:4px}
  .rate tbody tr.sumrow>td{border-top:2px solid var(--line-strong);background:var(--zebra)}
  .rate tbody tr.main{cursor:pointer;transition:background .12s}
  .rate tbody tr.main>td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
  .rate tbody tr.main:nth-of-type(4n-1){background:var(--zebra)}
  .rate tbody tr.main:hover{background:var(--navy-tint)}
  .rate tbody tr.main:focus-visible{outline:2px solid var(--navy-soft);outline-offset:-2px}

  .rk{width:34px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;color:var(--sub);font-size:15px}
  .medal{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
    font-size:13px;font-weight:800;color:#fff}
  .medal.g{background:linear-gradient(145deg,#dcc069,var(--m1))}
  .medal.s{background:linear-gradient(145deg,#c3c9d4,var(--m2))}
  .medal.b{background:linear-gradient(145deg,#d6a578,var(--m3))}

  .player{display:flex;align-items:center;gap:12px;min-width:0}
  .av{position:relative;flex:none;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(120% 120% at 30% 20%,var(--ground2),color-mix(in srgb,var(--navy) 16%,var(--paper)));
    font-family:var(--serif);color:var(--navy);font-weight:600;overflow:hidden;
    box-shadow:inset 0 0 0 1px var(--line-strong)}
  .av::after{content:"";position:absolute;inset:0;border-radius:50%;
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gold) 55%,transparent)}
  .av.r1::after{box-shadow:inset 0 0 0 2px var(--gold)}
  .av.sm{width:40px;height:40px;font-size:16px}
  .av.xl{width:132px;height:132px;font-size:52px}

  .pmeta{min-width:0}
  .pname{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .prank{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.03em;color:var(--gold);
    border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:5px;padding:0 5px;margin-right:6px;vertical-align:1px}
  .ptitle{font-size:11.5px;color:var(--sub)}

  td.rating{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:.01em}
  .delta{font-variant-numeric:tabular-nums;font-size:13px;font-weight:800;white-space:nowrap}
  .delta.u{color:var(--up)} .delta.d{color:var(--down)} .delta.z{color:var(--sub)}
  td.wr{font-weight:700;color:var(--ink)}
  .chev{color:var(--sub);font-size:12px;transition:transform .18s}
  tr.main[aria-expanded="true"] .chev{transform:rotate(90deg)}

  tr.detail>td{padding:0;border-bottom:1px solid var(--line);background:var(--ground)}
  .detail-in{max-height:0;overflow:hidden;transition:max-height .28s ease}
  tr.detail.open .detail-in{max-height:240px}
  .detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 18px 18px}
  .dcell{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
  .dcell .k{font-size:10.5px;color:var(--sub);letter-spacing:.04em}
  .dcell .v{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:3px;color:var(--ink)}
  .detail-in .link{grid-column:1/-1;font-size:12.5px;color:var(--navy);font-weight:700;padding:0 18px 16px}
  @media(max-width:620px){.detail-grid{grid-template-columns:repeat(2,1fr)}}

  .showmore{width:100%;border:0;background:var(--paper);color:var(--navy);font-family:var(--sans);
    font-weight:700;font-size:13px;padding:14px;cursor:pointer;border-top:1px solid var(--line)}
  .showmore:hover{background:var(--navy-tint)}

  @media(max-width:600px){
    .rate thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
    .rate,.rate tbody,.rate tr.main,.rate td{display:block;width:100%}
    .rate tbody tr.main{position:relative;padding:14px 14px 14px 16px;border-bottom:1px solid var(--line)}
    .rate tbody tr.main>td{padding:0;border:0}
    .rate td.rk{position:absolute;top:14px;left:16px;width:auto}
    .rate td.pl{margin:0 0 10px 40px}
    .rate td.rating{display:inline-block;font-size:22px;margin-right:14px}
    .rate td.rating::before{content:"レート ";font-size:10px;font-weight:700;color:var(--sub);vertical-align:3px}
    /* 🔴ユーザー指摘(2026-07-31)「増減の+27.8って何だ」→「直近の対局分を反映しろ」＝
       90日窓をやめ直近1局のレート変動に変更（build_site.py側）。ここはそのラベル。 */
    .rate td.dl{display:inline-block;margin-left:14px;font-size:13px}
    .rate td.dl::before{content:"前局 ";font-size:10px;font-weight:700;color:var(--sub)}
    .rate td.wr{display:inline-block;margin-left:14px}
    .rate td.wr::before{content:"勝率 ";font-size:10px;font-weight:700;color:var(--sub)}
    .rate td.ex{position:absolute;top:14px;right:12px}
    /* 🔴2026-07-31実害＝タブ内の簡易表(.rate.mini＝歴代・持ち時間別)は上のrating/wr専用の
       ルールに拾われず、数字だけがラベル無しで縦に積まれていた（build_site.py の mini_row()
       が data-th で見出しを持つよう修正済・ここはその受け皿）。 */
    .rate.mini tbody tr{display:block;position:relative;padding:14px 14px 14px 16px;
      border-bottom:1px solid var(--line)}
    .rate.mini td.num{display:inline-block;width:auto;margin:2px 14px 2px 0;font-size:15px;
      font-weight:800;font-variant-numeric:tabular-nums}
    .rate.mini td.num::before{content:attr(data-th) " ";font-size:10px;font-weight:700;
      color:var(--sub);vertical-align:2px}
  }

  /* ---------- サイドバー（回遊要素・広告） ---------- */
  .rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:72px}
  @media(max-width:900px){.rail{position:static}}
  .rcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
  .rcard h4{font-family:var(--serif);font-weight:600;font-size:15px;color:var(--ink);margin:0;
    padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
  .rcard h4 .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
  .rlist{list-style:none;margin:0;padding:6px 0}
  .rlist li{display:flex;align-items:center;gap:11px;padding:9px 16px;font-size:13.5px}
  .rlist li+li{border-top:1px solid var(--line)}
  .rlist .tm{font-variant-numeric:tabular-nums;font-weight:800;color:var(--navy);font-size:12.5px;flex:none;width:42px}
  .rlist .vs{flex:1;min-width:0;color:var(--ink)}
  .rlist .tag{font-size:10px;font-weight:800;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
    border-radius:5px;padding:1px 5px;flex:none}
  /* 驚愕クリップ */
  .clip{padding:14px 16px}
  .clip .thumb{position:relative;border-radius:10px;aspect-ratio:16/9;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--navy),#0e1836);color:#fff;overflow:hidden}
  .clip .thumb .play{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;
    font-size:16px;backdrop-filter:blur(2px);border:1.5px solid rgba(255,255,255,.5)}
  .clip .thumb .kanji{position:absolute;right:-6px;bottom:-14px;font-family:var(--serif);font-size:74px;color:rgba(255,255,255,.10);font-weight:700}
  .clip .cap{font-size:13px;font-weight:700;margin:10px 0 2px;color:var(--ink)}
  .clip .sub2{font-size:11.5px;color:var(--sub)}
  /* フォローCTA */
  .follow{padding:16px}
  .follow p{margin:0 0 11px;font-size:13px;color:var(--sub);line-height:1.7}
  .btn{display:block;text-align:center;text-decoration:none;font-weight:800;font-size:13px;border-radius:10px;padding:11px;
    color:#fff;background:linear-gradient(120deg,var(--navy),var(--navy-soft))}
  .btn:hover{filter:brightness(1.06)}
  /* 広告枠（データと分離） */
  .adslot{border:1px dashed var(--line-strong);border-radius:12px;background:
      repeating-linear-gradient(45deg,transparent,transparent 9px,color-mix(in srgb,var(--sub) 6%,transparent) 9px,color-mix(in srgb,var(--sub) 6%,transparent) 10px),
      var(--ground2);
    min-height:260px;display:grid;place-content:center;justify-items:center;gap:5px;text-align:center;padding:16px}
  .adslot .t{font-size:12px;font-weight:800;color:var(--sub);letter-spacing:.04em}
  .adslot .s{font-size:10.5px;color:var(--sub);max-width:180px;line-height:1.6}

  /* ---------- 棋士プロフィール（読み物） ---------- */
  .prof-wrap{max-width:840px;margin:0 auto}
  .profile{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);overflow:hidden}
  .cover{position:relative;padding:30px 26px 24px;
    background:
      radial-gradient(140% 120% at 82% -10%, color-mix(in srgb,var(--gold) 16%,transparent), transparent 55%),
      radial-gradient(120% 120% at 0% 0%, var(--navy-tint), transparent 60%),
      repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb,var(--navy) 5%,transparent) 27px 28px),
      repeating-linear-gradient(90deg, transparent 0 27px, color-mix(in srgb,var(--navy) 5%,transparent) 27px 28px),
      linear-gradient(180deg,var(--ground2),var(--paper));
    border-bottom:1px solid var(--line);display:flex;gap:22px;align-items:center}
  .cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 60%,transparent),transparent)}
  .cover .who .kana{font-size:12px;color:var(--sub);letter-spacing:.14em}
  .cover .who h1{font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:.03em;
    margin:2px 0 8px;color:var(--ink);text-wrap:balance}
  .cover .who .titles{display:flex;flex-wrap:wrap;gap:6px}
  .pill{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.02em}
  .pill.gold{color:#3d2f08;background:linear-gradient(120deg,var(--gold-soft),var(--gold))}
  .pill.line{color:var(--navy);border:1px solid color-mix(in srgb,var(--navy) 35%,transparent)}
  @media(max-width:560px){.cover{flex-direction:column;text-align:center;align-items:center}
    .cover .who h1{font-size:26px}}

  .statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
  .statrow .s{background:var(--paper);padding:15px 14px;text-align:center}
  .statrow .s b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--navy);font-family:var(--sans)}
  .statrow .s span{font-size:10.5px;color:var(--sub);letter-spacing:.03em}
  @media(max-width:560px){.statrow{grid-template-columns:repeat(2,1fr)}}

  .body{padding:26px}
  .article{max-width:40em;margin:0 auto}
  .article .kicker{color:var(--sub);font-size:13px;line-height:1.9;margin:0 0 20px;padding-left:14px;border-left:3px solid var(--gold)}
  .article h3{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.02em;color:var(--ink);margin:30px 0 10px;text-wrap:balance}
  .article h3 .en{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.12em;display:block;margin-bottom:2px}
  .article p{font-size:18px;line-height:1.9;margin:0 0 1.6em;text-align:left;line-break:strict;word-break:normal}
  @media(max-width:560px){.article p{font-size:16px}}
  .article .fill{color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);border-radius:4px;padding:0 4px;font-weight:700;font-size:.92em}
  .article ul{font-size:16px;line-height:1.9;padding-left:1.2em;margin:0 0 1.6em}
  .article ul li{margin-bottom:.4em}

  blockquote{font-family:var(--serif);font-size:23px;line-height:1.7;color:var(--navy);margin:26px 0;padding:6px 0 6px 22px;border-left:3px solid var(--navy);text-wrap:balance}
  blockquote cite{display:block;font-family:var(--sans);font-size:12px;color:var(--sub);font-style:normal;margin-top:10px}

  .timeline{list-style:none;margin:0;padding:0;position:relative}
  .timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line-strong)}
  .timeline li{position:relative;padding:0 0 18px 30px}
  .timeline li::before{content:"";position:absolute;left:2px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2.5px solid var(--navy)}
  .timeline li.peak::before{background:var(--gold);border-color:var(--gold)}
  .timeline .yr{font-variant-numeric:tabular-nums;font-weight:800;color:var(--navy);font-size:14px;margin-right:8px}
  .timeline .ev{font-size:15px;color:var(--ink)}
  .timeline .age{font-size:12px;color:var(--sub);margin-left:6px}

  .crosslink{margin-top:8px;border-top:1px solid var(--line);padding:20px 26px;background:var(--ground2);
    display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .crosslink .ic{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:20px}
  .crosslink .tx{flex:1;min-width:180px}
  .crosslink .tx b{display:block;font-size:14px;color:var(--ink)}
  .crosslink .tx span{font-size:12px;color:var(--sub)}
  .crosslink a{font-size:13px;font-weight:700;color:var(--navy);text-decoration:none;border:1px solid var(--navy-soft);border-radius:9px;padding:8px 14px;white-space:nowrap}

  footer{max-width:1160px;margin:34px auto 0;padding:0 20px;color:var(--sub);font-size:11.5px;line-height:1.8}
  footer .src{margin-top:6px}
  footer a{color:var(--navy-soft)}

  /* ---------- リッチ化: 勝率バー・段位色・スパークライン・実績バッジ ---------- */
  .wrcell{white-space:nowrap}
  .wrbar{display:inline-block;width:52px;height:6px;border-radius:3px;background:var(--line-strong);
    vertical-align:middle;margin-left:8px;position:relative;overflow:hidden}
  .wrbar>i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
    background:linear-gradient(90deg,var(--navy-soft),var(--navy))}
  .prank.a{color:#fff;background:var(--navy);border-color:transparent}
  .rkmove{display:block;font-size:9px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;margin-top:2px}
  .rkmove.u{color:var(--up)} .rkmove.d{color:var(--down)} .rkmove.z{color:var(--sub)}

  /* プロフィール: レートカード（推移スパークライン） */
  .views{padding:14px 26px 0;font-size:12px;color:var(--sub)}
  .ratecards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 26px 4px}
  @media(max-width:560px){.ratecards{grid-template-columns:1fr}}
  .rc{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--paper);box-shadow:var(--shadow)}
  .rc .lb{font-size:11px;color:var(--sub);font-weight:700}
  .rc .val{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);margin:2px 0 0}
  .rc .val .dl{font-size:12px;margin-left:6px}
  .rc svg{display:block;width:100%;height:32px;margin-top:6px}

  /* 実績バッジ（Awards） */
  .awards{display:flex;flex-wrap:wrap;gap:8px;padding:14px 26px 2px}
  .aw{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;
    padding:7px 11px;background:var(--paper);box-shadow:var(--shadow)}
  .aw .ai{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;
    font-family:var(--serif);font-size:13px;font-weight:700;color:#fff}
  .aw .at b{display:block;font-size:12.5px;color:var(--ink);line-height:1.3}
  .aw .at span{font-size:11px;color:var(--sub)}

  /* ================= ABEMA調 額縁：金箔×水墨グレー屏風（第5回トーン）＋墨黒バー ================= */
  /* 上部バーを墨黒＋金へ（金箔屏風のヒーローと調和・データ表は明るいまま＝二層） */
  .top{background:linear-gradient(180deg,#181307,#0e0b05);backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid rgba(201,164,74,.34);box-shadow:0 1px 0 rgba(201,164,74,.24)}
  .brand .mark{color:#f3ecdb}
  .brand .mark b{color:#e2c47e}
  .brand .sub{color:rgba(243,236,219,.5)}
  .nav a{color:rgba(243,236,219,.72)}
  .nav a:hover{color:#fff;background:rgba(255,255,255,.09)}
  .nav a.cur{color:#e8cd8a}
  .search{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:rgba(243,236,219,.72)}
  .theme{border-color:rgba(255,255,255,.20);background:rgba(255,255,255,.06);color:rgba(243,236,219,.82)}
  .theme:hover{border-color:#e2c47e;color:#fff}

  /* 見出しに金の筆アクセント（余白側だけ） */
  h2.section{position:relative}
  h2.section::after{content:"";display:block;width:46px;height:3px;margin-top:8px;border-radius:2px;
    background:linear-gradient(90deg,var(--gold),transparent)}

  /* ヒーロー：金箔屏風地 × 墨のかすみ × 右に唐獅子/似顔絵スロット */
  .hero{position:relative;overflow:hidden;border-radius:18px;margin:18px 0 8px;padding:0;color:#241d10;
    isolation:isolate;border:1px solid rgba(201,164,74,.42);min-height:300px;
    display:grid;grid-template-columns:1.12fr .88fr}
  @media(max-width:640px){.hero{grid-template-columns:1fr}}
  .hero .bg{position:absolute;inset:0;z-index:-1;
    background:
      radial-gradient(120% 130% at 82% -10%, rgba(201,164,74,.30), transparent 46%),
      radial-gradient(90% 120% at 6% 112%, rgba(58,64,72,.18), transparent 52%),
      repeating-linear-gradient(0deg, transparent 0 40px, rgba(90,74,34,.05) 40px 41px),
      repeating-linear-gradient(90deg, transparent 0 40px, rgba(90,74,34,.05) 40px 41px),
      linear-gradient(158deg,#efe9db,#e5ddc9)}
  .hero .bg .foil{position:absolute;inset:0;opacity:.7;
    background:
      radial-gradient(circle at 16% 30%, rgba(201,164,74,.34), transparent 11%),
      radial-gradient(circle at 30% 66%, rgba(201,164,74,.24), transparent 9%),
      radial-gradient(circle at 8% 82%, rgba(201,164,74,.20), transparent 8%)}
  .hero .copy{position:relative;padding:36px 30px 32px;display:flex;flex-direction:column;justify-content:center}
  .hero .art{position:relative;display:grid;place-items:center;border-left:1px dashed rgba(120,100,50,.4);
    background:radial-gradient(70% 80% at 58% 42%, rgba(58,64,72,.14), transparent 70%)}
  @media(max-width:640px){.hero .art{border-left:0;border-top:1px dashed rgba(120,100,50,.4);min-height:170px}}
  .hero .art .slot{text-align:center;color:#6a5f45;font-size:11.5px;line-height:1.7;padding:16px}
  .hero .art .slot .big{font-family:var(--serif);font-size:52px;color:rgba(58,64,72,.26);display:block;margin-bottom:4px}
  .hero .tag{position:absolute;top:20px;right:16px;writing-mode:vertical-rl;font-family:var(--serif);
    font-size:13px;letter-spacing:.32em;color:rgba(58,48,20,.72)}
  @media(max-width:640px){.hero .tag{display:none}}
  .hero .edition{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.22em;color:#8a6a1f;
    border:1px solid rgba(176,138,46,.55);border-radius:4px;padding:3px 9px;align-self:flex-start}
  .hero .wm{font-family:var(--serif);font-weight:700;line-height:1;letter-spacing:.06em;margin:14px 0 3px;
    font-size:clamp(44px,8vw,74px);transform:skewX(-5deg);display:inline-block;color:#211a0e;
    text-shadow:2px 3px 0 rgba(201,164,74,.4)}
  .hero .wm-note{font-size:10.5px;color:#8a7a52;margin:0 0 8px}
  .hero .sub2{color:#4a4130;font-size:13.5px;max-width:30em;line-height:1.85;margin:2px 0 0}
  .hero .vs{display:flex;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}
  .hero .who2{display:flex;align-items:center;gap:10px}
  .hero .av2{width:50px;height:50px;flex:none;border-radius:50%;display:grid;place-items:center;
    font-family:var(--serif);font-weight:600;font-size:20px;color:#3a3020;
    background:radial-gradient(120% 120% at 30% 20%,#f3ead2,#d8c184);box-shadow:0 0 0 2px rgba(176,138,46,.5)}
  .hero .nm2{font-family:var(--serif);font-size:15px;color:#241d10;line-height:1.3}
  .hero .nm2 span{display:block;font-family:var(--sans);font-size:11px;color:#7a6f56}
  .hero .mark2{font-family:var(--serif);font-weight:700;font-style:italic;font-size:28px;transform:skewX(-6deg);padding:0 4px;color:#b08a2e}
  .hero .htag{align-self:center;margin-left:auto;font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#8a6a1f}
  @media(max-width:640px){.hero .htag{margin-left:0}}

  /* レーティングのタブ（build_site.py の rate_tabs()）。🔴ユーザー指示 2026-07-26
     「歴代ピーク・持ち時間別トップ・レーティング上位を、レーティング表の上部でタブで
     選べるように」。3つを縦に積むのをやめ、1枠を切り替える。JSは使わない（radio+CSS）。*/
  .tabbox{background:var(--paper);border:1px solid var(--line);border-radius:16px;
          box-shadow:var(--shadow);margin:14px 0;overflow:hidden}
  .tabbox>input{position:absolute;opacity:0;pointer-events:none}
  .tabbar{display:flex;align-items:center;gap:2px;padding:6px 8px 0;
          border-bottom:1px solid var(--line);flex-wrap:wrap}
  .tabbar label{font-family:var(--serif);font-size:15px;padding:9px 15px 8px;cursor:pointer;
          color:var(--sub);border-bottom:2px solid transparent;white-space:nowrap}
  .tabbar label:hover{color:var(--ink);background:var(--navy-tint);border-radius:8px 8px 0 0}
  .tabbar .all{margin-left:auto;font-size:12.5px;padding:0 8px}
  .tabpane{display:none;padding:12px 14px 16px}
  .tabpane .rlist{margin:0;padding:0;list-style:none}
  #rt1:checked~.tabbar label[for=rt1],#rt2:checked~.tabbar label[for=rt2],
  #rt3:checked~.tabbar label[for=rt3],#rt4:checked~.tabbar label[for=rt4],
  #rt5:checked~.tabbar label[for=rt5],#rt6:checked~.tabbar label[for=rt6],
  #rt7:checked~.tabbar label[for=rt7],#rt8:checked~.tabbar label[for=rt8],
  #rt9:checked~.tabbar label[for=rt9],#rt10:checked~.tabbar label[for=rt10]
  {color:var(--ink);border-bottom-color:var(--gold);font-weight:700}
  #rt1:checked~.p1,#rt2:checked~.p2,#rt3:checked~.p3,#rt4:checked~.p4,
  #rt5:checked~.p5,#rt6:checked~.p6,#rt7:checked~.p7,#rt8:checked~.p8,
  #rt9:checked~.p9,#rt10:checked~.p10{display:block}
  /* 🔴2026-07-31: タブ8枚がスマホで2行に折り返していた（GOV.UK「折り返すならタブをやめろ」）。
     FIDE公式もモバイルではタブ12枚をセレクトへ折り畳んでいる＝同じ方式を採る。
     PC幅=タブ表示・select非表示 / スマホ幅=タブ非表示・select表示。 */
  .tabsel{display:none}
  @media(max-width:640px){
    .tabbox>.tabbar{display:none}
    .tabsel{display:flex;align-items:center;gap:8px;padding:10px 12px;
      border-bottom:1px solid var(--line)}
    .tabsel-l{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.06em;flex:none}
    .tabsel select{flex:1;min-width:0;font-family:var(--sans);font-size:15px;
      padding:9px 10px;border:1px solid var(--line);border-radius:9px;
      background:var(--paper);color:var(--ink)}
  }
  .rate.mini td,.rate.mini th{padding:9px 12px}
  .rate.mini .pmeta{line-height:1.3}
  /* 🔴この表は10行しかないので thead を固定しない。固定すると1行目（現役1位）に
     被って「1位が居ない」ように見える（2026-07-26 の実害）。 */
  .tabbox table.rate thead th{position:static}
  @media(max-width:640px){
    .tabbar{padding:4px 4px 0}
    .tabbar label{font-size:13.5px;padding:8px 10px 7px}
    .tabbar .all{width:100%;margin:0 0 4px;text-align:right}
    .tabpane{padding:10px 8px 14px}
  }

  /* 注目の一番（build_site.py の spotlight()）。🔴タブ枠の上に置く「今日いちばん見たいもの」。
     中身は**我々にしか出せないもの**＝自前レートの予測勝率と、自前DBの過去対戦成績。 */
  .spot{background:linear-gradient(160deg,var(--navy),var(--navy-soft));color:#fff;
        border-radius:16px;padding:14px 16px 15px;margin:14px 0}
  .sl-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
  .sl-tag{font-size:11px;font-weight:800;letter-spacing:.16em;color:#12182c;
          background:var(--gold-soft);border-radius:999px;padding:2px 11px}
  .sl-meta{font-size:11.5px;color:rgba(255,255,255,.78)}
  .sl-vs{display:flex;align-items:center;gap:12px}
  .sl-p{display:flex;align-items:center;gap:9px;color:#fff;flex:1;min-width:0}
  .sl-p.rt{flex-direction:row-reverse;text-align:right}
  .sl-p b{font-family:var(--serif);font-size:19px;font-weight:400;white-space:nowrap}
  .sl-p i{font-style:normal;font-size:12.5px;color:var(--gold-soft);margin-left:2px}
  .sl-p.rt i{margin:0 2px 0 0}
  .sl-x{font-family:var(--serif);color:rgba(255,255,255,.5);flex:none}
  .sl-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.18);margin:11px 0 7px;
          overflow:hidden}
  .sl-bar i{display:block;height:100%;border-radius:4px;
            background:linear-gradient(90deg,var(--gold-soft),#fff)}
  .sl-nums{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
           font-size:12.5px;color:rgba(255,255,255,.9)}
  .sl-nums b{color:#fff}
  .sl-note{color:rgba(255,255,255,.6);font-size:11px;margin-left:6px}
  .sl-lks{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
  .sl-lk{font-size:11.5px;color:#fff;border:1px solid rgba(255,255,255,.34);
         border-radius:999px;padding:2px 11px}
  .sl-lk:hover{background:rgba(255,255,255,.14);text-decoration:none}
  @media(max-width:640px){
    .sl-p b{font-size:16px}
    .sl-vs{gap:8px}
    /* 🔴ユーザー指摘(2026-07-31)「注目の一番でかすぎる」＝余白と行間を詰める(内容は削らない)。 */
    .spot{padding:11px 13px 12px;margin:10px 0}
    .sl-h{margin-bottom:6px;gap:6px}
    .sl-tag{font-size:10px;padding:2px 9px}
    .sl-meta{font-size:10.5px}
    .sl-bar{margin:8px 0 6px}
    .sl-nums{font-size:11.5px;gap:8px}
    .sl-lks{margin-top:7px;gap:5px}
    .sl-lk{font-size:10.5px;padding:2px 9px}
  }

  /* 畳める節（build_site.py の fold()）。🔴ユーザー指摘 2026-07-26「混在しすぎて見づらい／
     興味の少ないものから開けるように」。三角マークは消して**タブ風の見出し**に見せる。 */
  .fold{border:1px solid var(--line);border-radius:14px;background:var(--paper);
        margin:14px 0;overflow:hidden}
  .fold+.fold{margin-top:10px}
  .fold>summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;
        align-items:center;gap:12px;font-family:var(--serif);font-size:17px;
        color:var(--ink);user-select:none}
  .fold>summary::-webkit-details-marker{display:none}
  .fold>summary:hover{background:var(--navy-tint)}
  .fold>summary::after{content:"開く";margin-left:auto;font-family:var(--sans);
        font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--navy);
        border:1px solid var(--line-strong);border-radius:999px;padding:2px 11px}
  .fold[open]>summary::after{content:"閉じる"}
  .fold[open]>summary{border-bottom:1px solid var(--line)}
  .fold>summary .cnt{font-family:var(--sans);font-size:11.5px;color:var(--sub);
        font-weight:400;letter-spacing:.04em}
  .fold .fb{padding:4px 16px 16px}
  .fold .fb>h2:first-child,.fold .fb>.headrow:first-child{margin-top:12px}
  @media(max-width:640px){
    .fold>summary{font-size:15.5px;padding:12px 13px;flex-wrap:wrap;gap:4px 10px}
    .fold>summary .cnt{width:100%;order:3}
    .fold .fb{padding:4px 13px 14px}
  }

  /* ヒーロー金屏風版（採用＝bg_fuji_dragon・ユーザー決定 2026-07-26）
     🔴主題（富士山＝右端／龍＝左端）は端に置いてあるので、中央は盤のために空ける＝1カラムに戻す。
     🔴暗幕(スクリム)は全面でなく中央だけ。全面に掛けると端の金地と龍まで暗くなり絵が消える。 */
  .hero.gold{display:block;min-height:0;color:#fff;border-color:rgba(201,164,74,.5);
    background-position:center;background-size:cover;background-repeat:no-repeat}
  .hero.gold::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
    radial-gradient(ellipse 46% 96% at 50% 56%, rgba(10,14,30,.88) 0%,
                    rgba(10,14,30,.72) 55%, rgba(10,14,30,.18) 82%, rgba(10,14,30,0) 100%),
    linear-gradient(180deg, rgba(10,14,30,.34) 0%, rgba(10,14,30,0) 26%)}
  /* 🔴ユーザー指摘 2026-07-26「ヘッダーが大きすぎる」。1画面を占領して本題（レーティング）が
     見えなくなっていた。盤も文字も詰めて**ファーストビューに表が入る**高さにする。 */
  .hero.gold{min-height:0}
  .hero.gold .copy{z-index:1;padding:12px 18px 14px;text-align:center;align-items:center}
  .hero.gold .wm{font-size:clamp(26px,4.4vw,38px);margin:2px 0 0}
  .hero.gold .edition{font-size:9.5px}
  .hero.gold .sub2{font-size:12px;line-height:1.5;margin-top:1px}
  .hero.gold .vs{margin-top:6px;font-size:13.5px}
  .hero.gold .edition{color:#f0d489;text-shadow:0 1px 6px rgba(0,0,0,.8)}
  .hero.gold .wm{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.85)}
  .hero.gold .sub2{color:#e9e2d2;max-width:34em;margin:2px auto 0;text-shadow:0 1px 8px rgba(0,0,0,.82)}
  .hero.gold .vs{color:#f5efe1;justify-content:center;margin-top:16px;text-shadow:0 1px 8px rgba(0,0,0,.82)}
  .hero.gold .vs b{color:#fff}
  .hero.gold .htag{align-self:center;margin-left:0;color:#f0d489}
  .hero.gold .tag{color:rgba(255,255,255,.86);text-shadow:0 1px 8px rgba(0,0,0,.8)}
  /* 🔴2026-07-31: 盤をヘッダーから追い出した版(.slim)＝リサーチ(chess.com/lichess/FIDE/ESPN)
     で「ランキングサイトのヒーローはほぼ0px」と確認済み。文字だけなので大きく詰める。
     🔴🔴同日追指摘「ヘッダーと注目の一番が同じ大きさなのはおかしい」＝ヒーローは
     注目の一番より明確に小さくする（タイトル代わりの帯という扱いに落とす）。 */
  .hero.gold.slim .copy{padding:9px 16px 10px}
  .hero.gold.slim .wm{font-size:clamp(19px,3.2vw,26px);margin:0}
  .hero.gold.slim .edition{font-size:9px}
  .hero.gold.slim .sub2{font-size:11px;margin-top:0;line-height:1.4}
  .hero.gold.slim .vs{margin-top:5px;font-size:11.5px}
  @media(max-width:640px){.hero.gold.slim .copy{padding:8px 14px 9px}}
  /* 盤の移設先（ランキング表の直後）。ヒーローと同じ盤サイズ規則(.hero-board)をそのまま使う。 */
  .playbox{margin:20px 0}
  .playbox .section{margin:0 0 10px}
  /* 盤は小さめに保って左右に絵の余地を残す（盤で全部隠すと背景を入れた意味が消える）。
     🔴2026-07-26: ヒーローが大きすぎるとの指摘で 520px → 360px へ縮小。 */
  /* 🔴2026-07-27: ヒーローの盤は**静止画でなく指せる盤(J1)**になった（ユーザー指示
     「ただの画像じゃなくて将棋ができるアプリを作ってくださいよ」）。触る物なので
     270pxだと升が28px＝指で押せない。升40px前後を確保できる幅まで戻す。 */
  .hero-board{max-width:340px;--sg-max:340px;margin:6px auto 0}
  /* 🔴スマホでは指で押す＝升を小さくしない。300px固定だと升27pxで押し間違える。 */
  @media(max-width:640px){.hero-board{max-width:min(92vw,360px);--sg-max:min(92vw,360px)}}
  @media(max-width:640px){.hero.gold .copy{padding:20px 12px 24px}}
  /* 🔴M7(2026-07-30): 実測390pxで升29px＝盤でなく.wrap/.copy/盤コンテナの余白の積み重ねが原因。
     細い画面だけ余白を削って升を最低36pxまで戻す（デスクトップ/640px超は無変更）。 */
  @media(max-width:480px){
    .wrap{padding-left:2px;padding-right:2px}
    .hero.gold .copy{padding-left:4px;padding-right:4px}
    .hero.gold .sg-wrap{--sg-max:min(97vw,420px);padding:clamp(.15rem,1.2cqw,.4rem)}
  }

/* ---- 生成サイト側の追加部品（モックのCSS変数だけを使う） ---- */
/* 🔴モックには素の a{} 規則が無い（部品ごとに色を当てる設計）。生成側が足した
   カード型リンク(.mv/.pn等)がUA既定の青＋下線で出ていたので、既定を墨に戻す。
   個別部品の色指定（.nav a等・クラス付き）は詳細度で勝つため影響しない。 */
a{color:inherit;text-decoration:none}
/* 全対局テーブル（🔴2026-07-26 ユーザー指示で全件掲載）。
   全件を素で流すと数千行になるので、枠内スクロール＋ヘッダ固定にして
   ページの他の部分（読み物・グラフ）が押し流されないようにする。 */
.tablewrap.tall{max-height:70vh;overflow:auto;border:1px solid var(--line);border-radius:14px}
.tablewrap.tall table.rate{margin:0}
.tablewrap.tall thead th{position:sticky;top:0;z-index:1;background:var(--paper);
                         box-shadow:0 1px 0 var(--line)}
/* 人物プロフィール表（A1・2026-07-28）。左が項目名・右が値の2列。
   モックの table.rate は数値表向きなので、見出し列だけ細く・墨を落として読み物寄りにする。 */
table.rate.prof th{width:7.5em;text-align:left;font-weight:600;color:var(--sub);
                   white-space:nowrap;font-size:14px}
table.rate.prof td{font-size:15px}
/* 参考値の表（2026-07-30）。先頭列は**順位ではなく局数**なので、順位の見た目（等幅の細い列・
   1〜3位のメダル）を借りない。⛔太字にしない＝数字を主役にすると結局は順位に見える。 */
table.rate.ref td.rk{width:auto;white-space:nowrap;font-weight:400}
table.rate.ref td.rk .refn{font-size:12px;color:var(--sub)}
@media (max-width:480px){table.rate.prof th{width:6em;font-size:13px}
                         table.rate.prof td{font-size:14px}}
/* 測定条件の枠（C+8・2026-07-30）。数字より先に読ませたいので、
   note の中で唯一「囲って」視線を止める。⛔ここを畳んで隠さない（明記が目的）。 */
.cond{border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:12px;
      padding:10px 14px;margin:12px 0;background:color-mix(in srgb,var(--navy) 4%,transparent)}
.cond p.note{margin:0;line-height:1.75}
.gfilter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.gfilter select,.gfilter input{font-family:var(--sans);font-size:13px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:7px 10px}
.gfilter input{flex:1;min-width:170px}
.gcnt{font-size:12px;color:var(--sub)}
/* 女流棋士の絞り込み（同じ表・同じ数値の表示切替。別レートではない） */
.jofilter{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:12px 0 6px;
  font-size:13px;color:var(--ink)}
.jofilter label{display:inline-flex;gap:6px;align-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--paper)}
.jofc{font-size:12px;color:var(--sub)}
/* 区分バッジ（表の行に出る「女流棋士」）。⛔警告色にしない＝中立な線のチップに留める。
   行をコピー／スクショされた時に注記への手掛かりを残すのが目的（`JORYU_DECISION` §4.2）。 */
.kchip{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid var(--line);
  border-radius:999px;font-size:11px;line-height:1.6;color:var(--sub);
  text-decoration:none;vertical-align:middle;white-space:nowrap}
.kchip:hover{color:var(--ink);border-color:var(--navy)}
th.sortable-th{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable-th::after{content:"⇅";font-size:10px;color:var(--line);margin-left:4px}
th.sortable-th:hover::after{color:var(--sub)}
th.sortable-th.sorted::after{color:var(--navy)}
th.sortable-th.sorted[data-dir="asc"]::after{content:"▲"}
th.sortable-th.sorted[data-dir="desc"]::after{content:"▼"}
.gcnt b{font-family:var(--serif);font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.sen{font-size:10px;color:var(--sub);border:1px solid var(--line);border-radius:4px;padding:0 3px}
.fygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px;
        margin:14px 0 20px}
.fycard{display:flex;flex-direction:column;gap:3px;padding:11px 12px;background:var(--paper);
        border:1px solid var(--line);border-radius:12px;color:var(--ink)}
.fycard:hover{border-color:var(--navy-soft);text-decoration:none}
.fycard b{font-family:var(--serif);font-size:15px}
.fycard span{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
/* 対戦成績ページ（"AとBはどちらが強いか"に答える） */
svg .line.l-a{stroke:var(--navy)}
svg .line.l-b{stroke:var(--gold);stroke-dasharray:none}
.lgs{display:flex;gap:14px;justify-content:center;margin-top:6px}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--sub)}
.lg i{width:16px;height:3px;border-radius:2px;display:inline-block}
.lg i.sw-a{background:var(--navy)} .lg i.sw-b{background:var(--gold)}
/* 直接対局の印（dual_chart）。勝った側の線の上に打つ＝どちらの線に印が集まるかで一目で分かる。
   縁を紙色で抜くのは、印が密になる組（最大208局）で個々の点が潰れないようにするため。 */
.lg i.sw-m{width:9px;height:9px;border-radius:50%}
.lg i.sw-m.mm-a{background:var(--navy)} .lg i.sw-m.mm-b{background:var(--gold)}
/* 直近5局の帯を「2人の色」で塗る版。⚠️既定の .strip は勝＝紺／敗＝朱（1人視点の色）で、
   /vs/ では「どちらの勝ちか」を表したいので**チャートの線と同じ色**に揃える
   （紺＝左の棋士・金＝右の棋士）。ページ内で色の意味を1つにするため。 */
.strip.duo .s{background:var(--gold);opacity:1}
.strip.duo .s.w{background:var(--navy)}
svg .mk{stroke:var(--paper);stroke-width:.9}
svg .mk.mk-a{fill:var(--navy)}
svg .mk.mk-b{fill:var(--gold)}
/* 🔴A6「どちらが強いか」への即答ブロック。⛔煽らない＝断定と但し書きを同じ大きさで出す。
   n（対局数）を必ず添えるため、行は「ラベル｜本文」の2列固定にしている。 */
.verdict{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--navy);
         border-radius:14px;padding:15px 17px;margin:8px 0 16px}
.verdict .vq{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--sub);margin:0 0 5px}
.verdict .va{font-size:15px;line-height:1.85;margin:0 0 10px}
.verdict ul{list-style:none;margin:0;padding:0}
.verdict li{display:grid;grid-template-columns:6.4em 1fr;gap:10px;align-items:baseline;
            padding:8px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.75}
.verdict li .k{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--sub)}
.verdict .cav{margin:11px 0 0;font-size:12px;color:var(--sub);line-height:1.75}
.vshead{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;
        background:var(--paper);border:1px solid var(--line);border-radius:16px;
        padding:18px 16px;box-shadow:var(--shadow);margin:8px 0 16px}
.vsside{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;min-width:0}
.vsside .nm{font-family:var(--serif);font-size:19px;line-height:1.25}
.vsside .rt{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
/* ⚠️M-3: `.rt` は数値バッジ想定の要素。止まっているレートの注記は**別行の小さな字**に分ける
   （同じ行に括弧書きで足すと、スマホ幅で名前とスコアを押し出す）。 */
.vsside .rt small{display:block;font-size:10px;line-height:1.35;margin-top:2px;
                  letter-spacing:.02em;opacity:.9}
.vsscore{font-family:var(--serif);font-size:30px;font-variant-numeric:tabular-nums;
         white-space:nowrap;text-align:center}
.vsscore small{display:block;font-family:var(--sans);font-size:10.5px;font-weight:800;
               letter-spacing:.06em;color:var(--sub);margin-bottom:3px}
.vsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.vsc{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:12px 14px}
.vsc .k{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--sub)}
.vsc .v{font-family:var(--serif);font-size:19px;margin-top:3px;font-variant-numeric:tabular-nums}
.vslist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px;margin:12px 0}
.vslink{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:10px 12px;
        background:var(--paper);border:1px solid var(--line);border-radius:11px;color:var(--ink)}
.vslink:hover{border-color:var(--navy-soft);text-decoration:none}
.vslink b{font-family:var(--serif);font-size:14px;font-weight:400}
.vslink span{font-size:11px;color:var(--sub);white-space:nowrap}
.vsmk{font-size:9.5px;font-weight:800;letter-spacing:.04em;color:var(--sub);
      border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:6px;
      white-space:nowrap;vertical-align:1px}
td.pl a:hover + .vsmk{color:var(--navy);border-color:var(--navy-soft)}
.strip{display:inline-flex;gap:2px;vertical-align:middle}
.strip s,.strip .s{width:8px;height:15px;border-radius:2px;background:var(--down);opacity:.85;
         text-decoration:none;display:inline-block}
.strip s.w,.strip .s.w{background:var(--navy)}
.spk{display:block}
.spk path{fill:none;stroke:var(--navy-soft);stroke-width:1.6;stroke-linejoin:round}
.spk circle{fill:var(--gold)}
.tcline{display:grid;grid-template-columns:5.5em 1fr 3.2em;gap:8px;align-items:center;
        font-size:12px;margin:6px 0}
.tcbar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.tcbar i{display:block;height:100%;border-radius:4px;
         background:linear-gradient(90deg,var(--navy-soft),var(--gold))}
.pickup{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;
        margin:12px 0 18px}
.pcard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px;
       background:var(--paper);border:1px solid var(--line);border-radius:14px;color:var(--ink)}
.pcard:hover{border-color:var(--navy-soft);text-decoration:none}
.pcard .pn{font-family:var(--serif);font-size:17px;line-height:1.3}
.pcard .pr{font-size:11px;color:var(--sub)}
.rlist a{color:var(--ink)}
.prose{max-width:40em;font-size:18px;line-height:1.9}
.prose p{margin:0 0 1.6em}
svg .grid{stroke:var(--line);stroke-width:1}
svg .axis{fill:var(--sub);font-size:11px}
svg .line{fill:none;stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round}
.chart{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px}
table.rate td.pl a{color:var(--ink)}
table.rate td.pl a:hover{color:var(--navy)}
/* 今日の対局カード（トップの顔＝毎日変わる＝再訪の理由） */
.today{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:6px 0 4px}
.tg{display:block;background:var(--paper);border:1px solid var(--line);border-radius:14px;
    padding:14px 16px;box-shadow:var(--shadow);color:var(--ink)}
.tg:hover{border-color:var(--navy-soft);text-decoration:none}
.tg .dt{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--sub)}
.tg .pair{display:flex;align-items:center;gap:10px;margin:8px 0 6px}
.tg .side{flex:1;min-width:0;font-size:14px;font-weight:700;white-space:nowrap;
          overflow:hidden;text-overflow:ellipsis}
.tg .side.lose{color:var(--sub);font-weight:400}
.tg .mid{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:16px;flex:none}
.tg .tt{font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 対局予定・速報（連盟由来。参加費レイヤー） */
.sched{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin:6px 0}
.sday{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.sday h3{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--sub)}
.slist{list-style:none;margin:0;padding:0}
.srow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
      padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.srow:first-child{border-top:0}
.srow .pair{flex:1;min-width:190px;display:flex;align-items:center;gap:7px}
.srow .pn{font-weight:700;color:var(--ink)}
.srow .pn.win{color:var(--navy)}
.srow .pn.win::after{content:"○";margin-left:3px;color:var(--gold);font-size:11px}
.srow .vs{color:var(--sub);font-size:11px}
.srow .tour{font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;
            text-overflow:ellipsis;max-width:150px}
.srow .res{font-size:10px;font-weight:800;border-radius:6px;padding:2px 6px;
           background:var(--navy);color:#fff}
.srow .res.sched{background:transparent;color:var(--sub);border:1px solid var(--line)}
.srow .res.lose{background:transparent;color:var(--sub);border:1px solid var(--line)}
.srow .live{font-size:10.5px;border:1px solid var(--navy-soft);border-radius:6px;
            padding:2px 6px;color:var(--navy)}
.srow.oshi{background:linear-gradient(90deg,rgba(196,160,80,.13),transparent)}
.oshifilter{font-size:12px;color:var(--sub);margin:2px 0 6px}
/* フォロー（再訪フック） */
.fbtn{appearance:none;cursor:pointer;font-family:var(--sans);font-weight:800;font-size:12px;
      border-radius:9px;padding:7px 13px;border:1px solid var(--navy-soft);
      background:var(--paper);color:var(--navy)}
.fbtn[aria-pressed="true"]{background:linear-gradient(120deg,var(--navy),var(--navy-soft));
      color:#fff;border-color:transparent}
.fbtn:hover{filter:brightness(1.05)}
#oshi:empty{display:none}
/* 棋士図鑑（SEOのハブ・618人） */
.zgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.zc{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);
    border-radius:12px;padding:10px 12px;color:var(--ink);min-width:0}
.zc:hover{border-color:var(--navy-soft);text-decoration:none}
.zc .zn{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zc .zs{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
/* 暫定レート（通算10局未満）。⛔弱さの表示ではなく**推定の確からしさ**の表示なので、
   赤（警告）でなく中立のグレーで小さく添える。 */
.zc .prov{display:inline-block;margin-left:4px;padding:0 4px;border:1px solid var(--line);
          border-radius:4px;font-size:10px;line-height:1.5;color:var(--sub)}
/* ニュース（見出し＋出典＋日付のみ。本文は転載しない） */
.nlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nlist li{background:var(--paper);border:1px solid var(--line);border-radius:12px;
          padding:12px 14px}
.nlist a{color:var(--ink);font-weight:700;font-size:14.5px;line-height:1.6}
.nlist a:hover{color:var(--navy)}
.nlist .meta{display:block;font-size:11px;color:var(--sub);margin-top:5px;font-weight:400}
.headrow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.headrow a{font-size:12.5px;font-weight:700}
input.search2{width:100%;max-width:340px;font-size:15px;padding:9px 12px;margin:6px 0 14px;
    border:1px solid var(--line-strong);border-radius:10px;background:var(--paper);color:var(--ink)}
/* パンくず（トップ→一覧→個別）。⚠️棋士名は折り返してよい＝機械的に切り詰めない（VOICE.md） */
.crumb{font-size:12px;color:var(--sub);margin:10px 0 2px;line-height:1.7;
    display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.crumb a{color:var(--sub);text-decoration:none;border-bottom:1px solid transparent}
.crumb a:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
.crumb .sep{margin:0 5px;opacity:.55}
.crumb [aria-current]{color:var(--ink);font-weight:700}
/* 定跡の深さ（この一局は何手目で未知に入ったか）＝トップの1ブロック */
.bookex{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:12px 0 4px}
.bkcol{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--paper)}
.bkcol .sub-h{margin:0 0 6px}
.bklist{list-style:none;margin:0;padding:0}
.bklist li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
    padding:7px 0;border-bottom:1px solid var(--line)}
.bklist li:last-child{border-bottom:0}
.bklist li>b{font-size:17px;min-width:52px;color:var(--ink)}
.bklist .bkwho{font-weight:600}
.bklist .sub{flex:1 1 100%;font-size:11.5px;color:var(--sub);line-height:1.6}
@media(max-width:640px){.bookex{grid-template-columns:1fr;gap:12px}}

/* 将棋盤（board_svg.py が吐くSVG用）。色はSVG側に焼いてあるので light/dark でも見え方が崩れない */
svg.board{ display:block; margin:14px auto; }
svg.board-broadcast{ border-radius:14px; box-shadow:0 10px 30px rgba(8,14,34,.35); }
figure.zu{ margin:20px 0; }
figure.zu figcaption{ color:var(--sub); font-size:.86rem; text-align:center; margin-top:6px; }
/* 操作できる盤の見た目（J1）。デザインの正は content/rating_site_mockup.html だが、
   盤は独立した部品なのでここに持つ。

   🔴 木目・背景の画像は**このCSSでは決め打ちしない**。ページ側が custom property で渡す:
       --sg-board-img : 盤の木目            （例 url(/assets/board_wood.jpg)）
       --sg-koma-img  : 駒の木地
       --sg-bg-img    : 盤を置く背景
      こうしておくとCSSの置き場所（サイト／プレビュー）でパスが割れない。未指定でも
      グラデーションだけで成立する（画像が無い環境で崩れない）。

   🔴 将棋ウォーズを真似ない（2026-07-27 ユーザー指示）＝**明るいコバルトブルーの菊唐草**と
      あの駒の絵柄は使わない。我々の色は棋士録の 墨/木地/金 に揃える。 */
.sg-wrap,.sg-wrap *{box-sizing:border-box}   /* 🔴 padding込みで幅100%にしないと横スクロールが出る */
.sg-wrap{--sg-line:#7a5c33;--sg-wood:#e8cf9f;--sg-ink:#2b2118;--sg-frame:#6b4a26;
  --sg-bw:clamp(5px,1.6cqw,11px);   /* 盤の枠の太さ。目盛りの位置合わせにも使うので変数で持つ */
  display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr);width:100%;
  /* 🔴 幅は置き場所が決める。既定値だけ持ち、ホスト側は --sg-max で上書きする。
        （`.hero-board` と `.sg-wrap` は**同じ要素に付く**ので、ホストが max-width を
          書いても詳細度が同じで後勝ち＝効かない。2026-07-27に実際に踏んだ） */
  max-width:var(--sg-max,min(92vw,520px));margin:0 auto;font-feature-settings:"palt";
  container-type:inline-size;
  padding:clamp(.5rem,3cqw,1.1rem);border-radius:6px;
  background:var(--sg-bg-img,linear-gradient(160deg,#1b1a17,#232019)) center/cover;
  box-shadow:0 6px 24px rgba(0,0,0,.35)}

/* ── 目盛り（筋 9→1 を上、段 一→九 を右）──────────────────────
   実際の盤・中継・アプリに必ず付いている。無いと「何手目のどこ」を人に説明できない。 */
.sg-boardwrap{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);
  gap:.15em .2em;align-items:stretch}
.sg-files,.sg-ranks{display:grid;color:#d9c79c;font-size:min(2.9cqw,13px);line-height:1;
  text-align:center;user-select:none}
/* 🔴 盤には枠(border)があるので、目盛りにも同じ幅の余白を入れないと升の中心とズレる */
.sg-files{grid-column:1;grid-row:1;grid-template-columns:repeat(9,1fr);padding:0 var(--sg-bw)}
.sg-ranks{grid-column:2;grid-row:2;grid-template-rows:repeat(9,1fr);align-items:center;
  padding:var(--sg-bw) .15em}
.sg-boardwrap .sg-board{grid-column:1;grid-row:2}

/* ── 盤 ───────────────────────────────────────────────────────────
   升目の線は border でなく背景のグラデーションで引く（borderだと駒の五角形と干渉し、
   1pxの丸めで線幅がバラつく）。星は昔からの4点（3三/3七/7三/7七の交点）。 */
/* 🔴 rowsも明示する。未指定だと行が中身(駒)に押し広げられ、aspect-ratioの箱をはみ出して
      升が正方形でなくなる（実測 36.8x49.1 になっていた・2026-07-27） */
.sg-board{position:relative;display:grid;grid-template-columns:repeat(9,1fr);
  grid-template-rows:repeat(9,1fr);aspect-ratio:331/364;   /* 実物の盤面(横331mm×縦364mm)＝升は少し縦長 */
  background:var(--sg-board-img,linear-gradient(#f0dcb0,#e3c993)) center/cover,var(--sg-wood);
  border:var(--sg-bw) solid var(--sg-frame);border-radius:3px;
  box-shadow:0 3px 14px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.35),
             inset 0 0 40px rgba(120,80,30,.18)}
.sg-board::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(to right,rgba(60,40,15,.55) 0 1px,transparent 1px calc(100%/9)),
    repeating-linear-gradient(to bottom,rgba(60,40,15,.55) 0 1px,transparent 1px calc(100%/9)),
    radial-gradient(circle at 33.333% 33.333%,rgba(50,32,10,.85) 0 .9%,transparent 0),
    radial-gradient(circle at 66.667% 33.333%,rgba(50,32,10,.85) 0 .9%,transparent 0),
    radial-gradient(circle at 33.333% 66.667%,rgba(50,32,10,.85) 0 .9%,transparent 0),
    radial-gradient(circle at 66.667% 66.667%,rgba(50,32,10,.85) 0 .9%,transparent 0)}
.sg-sq{position:relative;display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none}

/* ── 駒 ───────────────────────────────────────────────────────────
   五角形は clip-path。字はAIに描かせない（崩れる）＝HTMLのテキストのまま木地に載せる。 */
.sg-piece{--sg-koma:polygon(50% 0%,78% 10%,92% 100%,8% 100%,22% 10%);
  line-height:1;color:var(--sg-ink);font-weight:700;display:inline-flex;
  align-items:center;justify-content:center;position:relative;
  font-size:clamp(13px,3.4vw,26px)}
.sg-board .sg-piece,.sg-hand .sg-piece{
  clip-path:var(--sg-koma);-webkit-clip-path:var(--sg-koma);
  background:var(--sg-koma-img,linear-gradient(170deg,#f7e3b4,#e5c98d)) center/cover,#f2ddab;
  box-shadow:none}
.sg-board .sg-piece{width:92%;aspect-ratio:1/1.07;font-size:min(6.2cqw,26px);
  padding-top:9%;box-sizing:border-box;
  filter:drop-shadow(0 .12em .1em rgba(0,0,0,.38))}
.sg-piece.sg-gote{transform:rotate(180deg)}
.sg-piece.sg-pro{color:#9c2b1e}
.sg-sq.sg-sel{background:rgba(255,214,102,.5)}
.sg-sq.sg-last{box-shadow:inset 0 0 0 2px rgba(201,162,39,.95)}
.sg-sq.sg-dest::after{content:"";position:absolute;width:24%;height:24%;border-radius:50%;
  background:rgba(40,90,45,.5);box-shadow:0 0 0 2px rgba(255,255,255,.25)}

/* ── 持ち駒 ──────────────────────────────────────────────────────
   駒(五角形)と枚数は別の要素にする。同じ要素だとclip-pathが数字まで切ってしまう。 */
.sg-hand{min-height:2.6em;display:flex;flex-wrap:wrap;gap:.3rem;padding:.3rem .45rem;
  background:rgba(20,16,10,.5);border:1px solid rgba(201,162,39,.35);border-radius:4px}
.sg-hold{display:inline-flex;align-items:flex-end;gap:.1em;cursor:pointer}
.sg-hand .sg-piece{width:min(5.6cqw,30px);aspect-ratio:1/1.07;font-size:min(4.2cqw,19px);
  padding-top:9%;box-sizing:border-box}
.sg-hold.sg-sel .sg-piece{outline:none;filter:drop-shadow(0 0 3px #ffd76a) brightness(1.12)}
.sg-hold b{font-size:min(3.4cqw,14px);color:#e9d9b4;font-weight:700}
.sg-hand-w .sg-hold{transform:rotate(180deg)}
.sg-hand .sg-none{color:#9a8b70;font-size:.8rem;align-self:center}

/* ── 操作バー ────────────────────────────────────────────────── */
.sg-bar{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#e9d9b4}
.sg-turn{flex:1;font-weight:700}
.sg-bar button,.sg-promo button{font:inherit;padding:.25em .8em;border:1px solid rgba(201,162,39,.5);
  background:rgba(255,255,255,.9);color:#2b2118;border-radius:4px;cursor:pointer}
.sg-bar button:hover,.sg-promo button:hover{background:#fff}
.sg-promo{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.45rem;
  color:#f3e6c8;background:rgba(20,16,10,.85);border:1px solid rgba(201,162,39,.5);border-radius:4px}

/* ---- 拡大（全画面）。🔴container-type:inline-size のおかげで、幅を広げるだけで
       升も駒も目盛りも一緒に大きくなる（個別のサイズ指定を足さない） ---- */
.sg-wrap.sg-full{position:fixed;inset:0;z-index:9999;max-width:none;width:100%;height:100%;
  margin:0;border-radius:0;overflow:auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.4rem;background:#1b150f}
.sg-wrap.sg-full .sg-boardwrap{width:min(96vw,calc(100vh - 13rem));max-width:900px}
.sg-wrap.sg-full .sg-hand{width:min(96vw,calc(100vh - 13rem));max-width:900px}
.sg-wrap.sg-full .sg-kifu{width:min(96vw,900px)}

/* ---- 棋譜 ---- */
.sg-kifu{margin-top:.5rem;display:flex;flex-direction:column;gap:.35rem}
.sg-kifu-list{max-height:7.5rem;overflow:auto;margin:0;padding:.35rem .4rem .35rem 2.4rem;
  background:rgba(0,0,0,.22);border-radius:4px;color:#e9d9b4;font-size:.82rem;line-height:1.5}
.sg-kifu-list li{list-style:decimal;padding-left:.2rem}
.sg-kifu-list:empty{display:none}
.sg-bar button,.sg-kifcopy{background:#3a2c1c;color:#e9d9b4;border:1px solid #6b4a26;
  border-radius:4px;padding:.22rem .6rem;font-size:.82rem;cursor:pointer}
.sg-bar button:hover,.sg-kifcopy:hover{background:#4a3826}
.sg-kifcopy{align-self:flex-start}

/* Android Chrome は横にはみ出す要素があるとフォントを勝手に拡大する(Font Boosting)。
   「全体的に文字が大きすぎる」の正体はこれ＝明示的に無効化する。 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* 保険: どこかの部品がはみ出してもページ全体は横スクロールさせない */
body{overflow-x:clip}
@media(max-width:560px){
  /* ---- ヘッダー: ロゴが2行に折れていた ---- */
  .top-in{padding:9px 12px;gap:8px}
  .brand .mark{font-size:17px;white-space:nowrap}
  .brand .sub{display:none}
  .theme{white-space:nowrap}
  /* ---- ヒーロー: 1画面を占領していた盤と余白を詰める ---- */
  .hero .copy{padding:20px 16px 18px}
  .hero .wm{font-size:34px}
  .hero .sg-wrap{--sg-max:min(88vw,330px)}
  /* ---- ランキング表: 2段カード -> 1行1段（縦を約半分に） ----
     ⚠️モックの旧規則 `.rate td{display:block;width:100%}` が生きたままだと
     flexの中で各セルが幅100%を主張して右へはみ出す（2026-07-28の実害）。
     width:auto へ**必ず**戻すこと。 */
  .rate tbody tr.main{display:flex;align-items:center;gap:7px;padding:9px 12px;position:static}
  .rate tbody tr.main>td{display:block;width:auto;padding:0;border:0;margin:0}
  .rate td.rk{position:static;flex:none;width:24px;font-size:12px;color:var(--sub);text-align:right}
  /* 参考値の表は先頭列が「17局」＝24pxに収まらない（2026-07-30） */
  .rate.ref td.rk{width:auto;min-width:40px}
  .rate td.pl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rate td.rating{flex:none;font-size:16px;letter-spacing:0}
  .rate td.rating::before{content:none}          /* 1行に収めるのでラベルは落とす */
  .rate td.wr{flex:none;font-size:11px;color:var(--sub);text-align:right}
  .rate td.wr::before{content:none}
  .rate td.wr .wrbar{display:none}               /* 勝率バーは装飾＝スマホでは畳む */
  .rate td.dl{display:none}                      /* 90日の増減はスマホでは畳む（棋士ページで見せる） */
  .rate td.ex{flex:none;width:18px}
  /* 行タップで開く内訳: 4列 -> 2列 */
  .detail-grid{grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px 12px}
  /* ---- 対局予定の行: 対局者ペアが枠からはみ出していた ---- */
  .srow{font-size:12.5px}
  .pair{flex-wrap:wrap;gap:6px;min-width:0;max-width:100%}
  .pair .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:42vw}
  /* ---- カード系グリッド: 1列 -> 2列 ---- */
  .today{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
  .sched{grid-template-columns:1fr;gap:8px}
  .pickup{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  .zgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .vsgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  /* .vslist は「題＋説明」の横並び行＝2列に割ると題が縦書きに潰れる。1列のまま */
  .vslist{grid-template-columns:1fr;gap:8px}
  /* 「どちらが強いか」ブロック: ラベル列(6.4em)を残すと本文が2〜3字で折れるので縦積みにする */
  .verdict{padding:13px 14px}
  .verdict .va{font-size:14.5px}
  .verdict li{grid-template-columns:1fr;gap:2px}
  .fygrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
  /* ---- 余白を詰める（節ごとの見出し＋説明で縦が伸びていた） ---- */
  .nlist li{padding:10px 12px}
  .nlist a{font-size:13.5px}
  .zc{padding:8px 10px;gap:8px}
  .zc .zn{font-size:13px}
}