/* ============================================================
   tsunagu デザインシステム v2（ウィンブルドン公式配色）
   グリーン Pantone 349 C(#00703C)・パープル Pantone 268 C(#4E2A84)
   世界観: 芝の緑 × 貴族的な紫 × クリーム背景 × 白カード × 控えめなゴールド
   トークン → コンポーネント(card/btn/chip/badge/list) → ページはこれだけで組む
   ============================================================ */
:root{
  /* --- 色(ウィンブルドン公式) --- */
  --td-green:      #00703C;   /* Pantone 349 C = メインカラー */
  --td-green-deep: #00532C;   /* 深緑(グラデ/hover) */
  --td-green-tint: #E1EEE6;   /* 緑の淡地(バッジ背景等) */
  --td-purple:     #4E2A84;   /* Pantone 268 C = アクセント */
  --td-purple-deep:#3A1F63;
  --td-purple-tint:#EDE7F3;
  --td-gold:       #B8974E;   /* 優勝/トロフィー等・控えめに使う */
  --td-gold-tint:  #F6EEDC;
  --td-bg:         #F5F3EC;   /* クリーム背景 */
  --td-bg-deep:    #ECE8DC;   /* 沈み面 */
  --td-surface:    #FFFFFF;   /* カード=白 */
  --td-surface-2:  #FFFFFF;
  --td-ink:        #262B27;   /* 本文(緑みの濃チャコール) */
  --td-ink-soft:   #6E7570;   /* 補助文字 */
  --td-warn:       #B4682A;   /* 締切間近 */
  --td-warn-tint:  #F6E7D8;
  --td-danger:     #A33B32;
  --td-danger-tint:#F4DEDA;
  --td-ok:         #1F7A4D;
  --td-ok-tint:    #DFEEE3;
  /* 互換エイリアス(旧v1名称を使う既存箇所のため) */
  --td-teal: var(--td-green); --td-teal-deep: var(--td-green-deep); --td-teal-tint: var(--td-green-tint);
  /* --- 影(elevation levels・上質に薄く) --- */
  --td-sh-1: 0 2px 6px rgba(38,43,39,.08), 0 1px 2px rgba(38,43,39,.05);
  --td-sh-2: 0 10px 24px rgba(38,43,39,.10), 0 2px 6px rgba(38,43,39,.06);
  --td-sh-in: inset 0 1px 3px rgba(38,43,39,.12);
  /* --- 角丸スケール(参考画像準拠: 4/8/12/16/24px) --- */
  --td-r-xs: 4px; --td-r-s: 8px; --td-r-m: 12px; --td-r-l: 16px; --td-r-xl: 24px; --td-r-pill: 999px;
  /* --- 枠線トークン(参考画像準拠: 1px thin/2px regular/4px thick) --- */
  --td-bd-w-thin: 1px; --td-bd-w-reg: 2px; --td-bd-w-thick: 4px;
  --td-bd-thin: 1px solid rgba(38,43,39,.10);
  --td-bd-reg:  2px solid var(--td-green);
  --td-bd-thick: 4px solid var(--td-green);
  /* --- 余白 --- */
  --td-sp-1: 4px; --td-sp-2: 8px; --td-sp-3: 12px; --td-sp-4: 16px; --td-sp-5: 24px; --td-sp-6: 32px;
  /* --- ボタン統一寸法(サイズをここだけで管理=バラつき防止) --- */
  --td-btn-h: 40px; --td-btn-h-sm: 30px; --td-btn-pad-x: 20px; --td-btn-pad-x-sm: 13px;
}

/* --- ベース --- */
body.td-page{background:var(--td-bg);color:var(--td-ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
body.td-page main.wrap{max-width:1080px;padding:0 var(--td-sp-4) var(--td-sp-6);}
.td-card,.td-row,.td-inset{min-width:0;}
.td-row .t{overflow-wrap:anywhere;}
@media(max-width:520px){.td-card{padding:var(--td-sp-4);}}

/* --- ヘッダー/ナビ --- */
body.td-page .site-head{background:linear-gradient(155deg,var(--td-green) 0%,var(--td-green-deep) 100%);
  border-radius:0 0 var(--td-r-xl) var(--td-r-xl);box-shadow:0 8px 20px rgba(0,83,44,.22);padding-bottom:var(--td-sp-3);
  position:relative;}
body.td-page .site-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--td-purple),var(--td-gold),var(--td-purple));border-radius:0 0 var(--td-r-xl) var(--td-r-xl);opacity:.9;}
body.td-page .site-head h1 a{color:#FBFAF6;letter-spacing:.02em;}
body.td-page .tagline{color:#BFDCC9;}
body.td-page .unav{display:flex;flex-wrap:wrap;gap:8px;}
body.td-page .unav a,body.td-page .unav button{
  display:inline-flex;align-items:center;gap:6px;height:34px;box-sizing:border-box;
  background:rgba(255,255,255,.13);color:#EFF6F1;border-radius:var(--td-r-pill);
  padding:0 15px;font-size:.83rem;font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,.15);
  white-space:nowrap;}
body.td-page .unav a.on,body.td-page .unav a.active,
body.td-page .unav button.on,body.td-page .unav button.active{
  background:#FFFFFF;color:var(--td-green-deep);font-weight:800;border-color:transparent;
  box-shadow:0 2px 6px rgba(0,0,0,.16);}

/* --- ナビ グループ(ドロップダウン) --- */
body.td-page .unav-group{position:relative;}
body.td-page .unav-group .unavGroupBtn{display:inline-flex;align-items:center;gap:6px;}
body.td-page .unav-group .caret{font-size:.65em;transition:transform .15s;}
body.td-page .unav-group.open .caret{transform:rotate(180deg);}
body.td-page .unav-group .unav-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:180px;z-index:60;
  background:#FFFFFF;border-radius:var(--td-r-m);box-shadow:var(--td-sh-2);border:var(--td-bd-thin);
  padding:6px;display:none;flex-direction:column;gap:2px;}
body.td-page .unav-group.open .unav-dropdown{display:flex;}
body.td-page .unav-group .unav-dropdown a{
  height:auto;background:none;border:0;box-shadow:none;color:var(--td-ink);font-weight:600;
  border-radius:var(--td-r-s);padding:9px 12px;justify-content:flex-start;}
body.td-page .unav-group .unav-dropdown a:hover{background:var(--td-green-tint);color:var(--td-green-deep);}
body.td-page .unav-group .unav-dropdown a.on,body.td-page .unav-group .unav-dropdown a.active{
  background:var(--td-purple);color:#F8F5FB;box-shadow:none;}
body.td-page .unav-dd-logout-form{margin:2px 0 0;padding-top:6px;border-top:1px solid rgba(38,43,39,.10);}
body.td-page .unav-dd-logout{width:100%;height:auto;background:none;border:0;box-shadow:none;
  color:var(--td-danger);font-weight:700;border-radius:var(--td-r-s);padding:9px 12px;
  justify-content:flex-start;font-size:.85rem;cursor:pointer;}
body.td-page .unav-dd-logout:hover{background:var(--td-danger-tint);}
/* ★2026-07-06再修正: モバイルはハンバーガー化せず、5つのナビ項目(ホーム+4グループ)を
   2段×3列のCSS Gridへ整列。全ボタン同一の幅(gridの等幅列)・高さ(明示height)に統一。
   ドロップダウンは#unavMain基準の絶対配置にしてナビ全幅で展開(タップした列に関わらず同じ位置)。 */
@media(max-width:760px){
  body.td-page #unavMain{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;}
  body.td-page #unavMain > a{
    height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
    text-align:center;white-space:normal;line-height:1.15;padding:0 4px;font-size:.8rem;}
  body.td-page .unav-group{position:static;width:100%;}
  body.td-page .unav-group .unavGroupBtn{
    width:100%;height:44px;box-sizing:border-box;justify-content:center;text-align:center;
    white-space:normal;line-height:1.15;padding:0 4px;font-size:.8rem;}
  body.td-page .unav-group .unav-dropdown{
    position:absolute;top:100%;left:0;right:0;margin-top:8px;width:auto;min-width:0;
    box-shadow:var(--td-sh-2);border:0;background:rgba(0,83,44,.98);z-index:70;}
  body.td-page .unav-group .unav-dropdown a{color:#EFF6F1;height:auto;justify-content:flex-start;}
  body.td-page .unav-group .unav-dropdown a:hover{background:rgba(255,255,255,.14);color:#fff;}
  body.td-page .unav-group .unav-dropdown a.on,body.td-page .unav-group .unav-dropdown a.active{
    background:#FFFFFF;color:var(--td-green-deep);}
  body.td-page .unav-dd-logout-form{border-top-color:rgba(255,255,255,.18);}
  body.td-page .unav-dd-logout{color:#F6DCD8;}
  body.td-page .unav-dd-logout:hover{background:rgba(255,255,255,.14);}
}

/* --- アイコン統一トーン --- */
.td-ic{color:var(--td-green);flex:none;}
.td-purple .td-ic,.td-ic.purple{color:var(--td-purple);}

/* --- 見出し --- */
.td-h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:1.28rem;font-weight:800;color:var(--td-green-deep);margin:var(--td-sp-5) 2px var(--td-sp-2);}
@media(max-width:520px){.td-h1 .td-asof{margin-left:0 !important;width:100%;justify-content:center;}}
.td-asof{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--td-ink-soft);
  background:var(--td-bg-deep);border-radius:var(--td-r-pill);padding:5px 12px;box-shadow:var(--td-sh-in);}

/* --- カード --- */
.td-card{background:var(--td-surface);border-radius:var(--td-r-l);box-shadow:var(--td-sh-2);
  padding:var(--td-sp-5);border:var(--td-bd-thin);border-top:3px solid var(--td-green);}
.td-inset{background:var(--td-bg);border-radius:var(--td-r-m);box-shadow:var(--td-sh-in);padding:var(--td-sp-4);}

/* --- タイルグリッド --- */
.td-grid{display:grid;grid-template-columns:1fr;gap:var(--td-sp-5);margin-top:var(--td-sp-4);}
@media(min-width:900px){.td-grid{grid-template-columns:repeat(2,1fr);align-items:start;}}

/* --- 選手タイルヘッダ --- */
.td-player{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.td-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--td-purple),var(--td-purple-deep));color:#F8F5FB;font-weight:800;font-size:1.1rem;
  box-shadow:var(--td-sh-1);flex:none;}
.td-player-name{font-size:1.1rem;font-weight:800;color:var(--td-ink);}

/* --- 数字(ポイント/順位) --- */
.td-stats{display:flex;gap:var(--td-sp-4);flex-wrap:wrap;margin-top:var(--td-sp-4);}
.td-stat{flex:1;min-width:128px;}
.td-stat .lbl{display:flex;align-items:center;gap:6px;font-size:.73rem;font-weight:700;color:var(--td-ink-soft);letter-spacing:.04em;}
.td-stat .num{font-size:1.6rem;font-weight:800;color:var(--td-purple);line-height:1.15;font-variant-numeric:tabular-nums;}
.td-stat .num small{font-size:.83rem;font-weight:700;color:var(--td-ink-soft);margin-left:2px;}
.td-rank{display:inline-block;margin-top:2px;font-size:.78rem;font-weight:700;color:var(--td-green-deep);
  background:var(--td-green-tint);border-radius:var(--td-r-pill);padding:2px 10px;}
.td-gap{display:flex;align-items:center;gap:8px;margin-top:var(--td-sp-3);font-weight:800;color:var(--td-warn);font-size:.9rem;}
.td-gap .td-ic{color:var(--td-warn);}

/* --- セクション見出し --- */
.td-sec{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:800;color:var(--td-green-deep);
  margin:var(--td-sp-5) 0 var(--td-sp-2);letter-spacing:.03em;text-transform:uppercase;}

/* --- リスト行 ---
   ★2026-07-06: flexのwrapだと「日付チップ・タイトル・詳細ボタン」の折返し位置が行ごとにバラつき
   ボタンが不揃いに見える不具合があったため、3カラムgridへ変更(1列目=日付/チップ・2列目=タイトル
   [折返しはこの列内のみ]・3列目=ボタン[常に右端で揃う])。子要素の並び順・クラス名は変更していない。 */
.td-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:11px 13px;margin:8px 0;
  background:var(--td-surface);border-radius:var(--td-r-m);box-shadow:var(--td-sh-1);border:var(--td-bd-thin);}
.td-row .t{min-width:0;font-weight:700;font-size:.9rem;color:var(--td-ink);}
.td-row .d{font-size:.77rem;color:var(--td-ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums;}
@media(max-width:560px){
  .td-row{grid-template-columns:1fr auto;grid-template-areas:"chip btn" "title title";row-gap:8px;}
  .td-row>:first-child{grid-area:chip;justify-self:start;}
  .td-row>:last-child{grid-area:btn;justify-self:end;}
  .td-row .t{grid-area:title;}
}

/* --- チップ --- */
.td-chip{display:inline-flex;align-items:center;gap:5px;font-size:.73rem;font-weight:800;
  border-radius:var(--td-r-pill);padding:4px 11px;white-space:nowrap;}
.td-chip .td-ic{width:13px;height:13px;}
.td-chip.ok{background:var(--td-ok-tint);color:var(--td-ok);}
.td-chip.warn{background:var(--td-warn-tint);color:var(--td-warn);}
.td-chip.danger{background:var(--td-danger-tint);color:var(--td-danger);}
.td-chip.ai{background:var(--td-purple-tint);color:var(--td-purple);font-weight:700;}
.td-badge{display:inline-flex;align-items:center;gap:5px;background:var(--td-purple);color:#F5F0FA;
  font-size:.71rem;font-weight:800;border-radius:var(--td-r-pill);padding:3px 11px;letter-spacing:.03em;}
.td-badge.gold{background:var(--td-gold);color:#3A2E13;}

/* --- ボタン: 寸法統一(高さ固定・グリッド整列) --- */
.td-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;cursor:pointer;text-decoration:none;
  height:var(--td-btn-h);box-sizing:border-box;background:linear-gradient(150deg,var(--td-green),var(--td-green-deep));
  color:#F7FBF8;font-weight:800;font-size:.85rem;border-radius:var(--td-r-pill);padding:0 var(--td-btn-pad-x);
  box-shadow:var(--td-sh-1);transition:transform .06s,box-shadow .06s;white-space:nowrap;}
.td-btn:active{transform:translateY(1px);box-shadow:var(--td-sh-in);}
.td-btn[disabled]{background:var(--td-bg-deep);color:#A6A79C;box-shadow:none;cursor:not-allowed;}
.td-btn.ghost{background:#FFFFFF;color:var(--td-green-deep);border:1.5px solid var(--td-green);box-shadow:var(--td-sh-1);}
.td-btn.purple{background:linear-gradient(150deg,var(--td-purple),var(--td-purple-deep));}
.td-btn.sm{height:var(--td-btn-h-sm);padding:0 var(--td-btn-pad-x-sm);font-size:.76rem;
  width:78px;white-space:normal;line-height:1.15;text-align:center;} /* 詳細等の一覧内ボタン=固定幅(文字数で伸縮させない) */
.td-btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.td-link{display:inline-flex;align-items:center;gap:4px;color:var(--td-purple);font-weight:800;font-size:.8rem;text-decoration:none;}

/* --- 空状態 --- */
.td-empty{font-size:.84rem;color:var(--td-ink-soft);background:var(--td-bg-deep);border-radius:var(--td-r-m);
  box-shadow:var(--td-sh-in);padding:12px 14px;}
body.td-page footer,body.td-page .site-foot{color:var(--td-ink-soft);}

/* ============================================================
   既存共通クラスの統一スキン化（全ページ展開用）
   各ページのPHP/ロジックは変更せず、$bodyClass='td-page' を設定するだけで
   既存の .card/.btn/.fld/.pts/.player-chip/table/.kv/.empty/.backlink 等が
   ダッシュボードと同じウィンブルドン意匠になる。機能・構造は一切変えない。
   ============================================================ */
body.td-page .card{background:var(--td-surface);border:var(--td-bd-thin);border-top:3px solid var(--td-green);
  border-radius:var(--td-r-l);box-shadow:var(--td-sh-2);padding:var(--td-sp-5);}
body.td-page .card.is-soon{border-left:4px solid var(--td-warn);}
body.td-page .card.is-unknown{border-left:4px solid var(--td-ink-soft);}
body.td-page .card:hover{border-color:rgba(78,42,132,.25);}

body.td-page .authbox .card{border-top:4px solid var(--td-green);box-shadow:var(--td-sh-2);}
body.td-page .authbox h1{color:var(--td-green-deep);font-weight:800;}
body.td-page .authbox .sub{color:var(--td-ink-soft);}

body.td-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:var(--td-btn-h);box-sizing:border-box;border-radius:var(--td-r-pill);padding:0 var(--td-btn-pad-x);
  font-weight:800;font-size:.85rem;border:0;box-shadow:var(--td-sh-1);transition:transform .06s,box-shadow .06s;}
body.td-page .btn:active{transform:translateY(1px);box-shadow:var(--td-sh-in);}
body.td-page .btn-primary{background:linear-gradient(150deg,var(--td-green),var(--td-green-deep));color:#F7FBF8;}
body.td-page .btn-primary:hover{background:linear-gradient(150deg,var(--td-green),var(--td-green-deep));}
body.td-page .btn-ghost,body.td-page .btn-youkou{background:#FFFFFF;color:var(--td-green-deep);border:1.5px solid var(--td-green);box-shadow:var(--td-sh-1);}
body.td-page .btn-entry{background:linear-gradient(150deg,var(--td-purple),var(--td-purple-deep));color:#F8F5FB;}
/* --- ボタン統一バリアント(2026-07-05再発防止: 一点物インラインpaddingを全廃しこれに集約) --- */
/* ★2026-07-05再修正: 「.btn-sm」(旧ハイフン記法)と「.btn .sm」(新スペース記法)の
   2命名が混在していたのを統一。両方に同じ固定幅ルールを適用(文字数で幅が伸縮する根本原因の是正)。 */
body.td-page .btn.sm,body.td-page .btn-sm{
  height:var(--td-btn-h-sm) !important;padding:0 8px !important;font-size:.76rem !important;font-weight:700 !important;
  white-space:normal !important;line-height:1.15;text-align:center;}
body.td-page .btn.danger,body.td-page .btn-danger{background:var(--td-danger) !important;color:#FBEFEC !important;}
body.td-page .btn.neutral{background:var(--td-bg-deep) !important;color:var(--td-ink) !important;border:1px solid rgba(38,43,39,.16);box-shadow:none;}
body.td-page .btn-block{display:flex !important;width:100%;height:auto !important;padding:13px 20px !important;border-radius:var(--td-r-m);}
body.td-page .detail .actions .btn{height:48px;}

/* --- 固定幅グループ(役割ごと・文字数で伸縮させない。はみ出しは折返し) --- */
/* 選手カードの行内アクション(出られる大会/成績/申込情報/編集/通知設定など)=同一固定幅 */
body.td-page .player-card-actions .btn,
body.td-page .btn-sm{width:104px;}
/* 締切一覧・大会一覧の「詳細」小ボタン(td-btn.ghost.sm)は上のtd-btn.smで78px固定済み */
/* 並び替えトグル対(締切が近い順/開催日順 等)=長い方に揃えて固定 */
body.td-page .sort-toggle .btn{width:132px;}
/* アーカイブのページ送りnav(← さらに過去へ/直近/新しい方へ 等)=固定幅+中央寄せ */
body.td-page .arc-btn{display:inline-flex;align-items:center;justify-content:center;width:132px;
  height:var(--td-btn-h-sm);box-sizing:border-box;border-radius:var(--td-r-pill);
  background:#FFFFFF;color:var(--td-green-deep);border:1.5px solid var(--td-green);
  font-weight:700;font-size:.78rem;text-decoration:none;white-space:normal;text-align:center;line-height:1.15;}
body.td-page .arc-btn.on{background:linear-gradient(150deg,var(--td-purple),var(--td-purple-deep));color:#F8F5FB;border-color:transparent;}

body.td-page .fld label{color:var(--td-ink-soft);font-weight:600;font-size:.78rem;}
body.td-page .fld input,body.td-page .fld select{
  border:1.5px solid rgba(38,43,39,.16);border-radius:var(--td-r-m);background:#FFFFFF;
  transition:border-color .12s;}
body.td-page .fld input:focus,body.td-page .fld select:focus{outline:none;border-color:var(--td-purple);
  box-shadow:0 0 0 3px rgba(78,42,132,.12);}

body.td-page .player-switch{gap:10px;}
body.td-page .player-chip{border:1.5px solid rgba(38,43,39,.14);background:#FFFFFF;font-weight:700;
  box-shadow:var(--td-sh-1);padding:8px 16px;}
body.td-page .player-chip.active{background:linear-gradient(150deg,var(--td-purple),var(--td-purple-deep));
  color:#F8F5FB;border-color:transparent;}

body.td-page .pts{border-radius:var(--td-r-pill);font-weight:700;padding:2px 10px;}
body.td-page .pts.maru{background:var(--td-ok-tint);color:var(--td-ok);}
body.td-page .pts.sankaku{background:var(--td-warn-tint);color:var(--td-warn);}

body.td-page .cat-card{background:var(--td-surface);border:var(--td-bd-thin);border-top:3px solid var(--td-green);
  border-radius:var(--td-r-l);box-shadow:var(--td-sh-2);}
body.td-page .cat-card .catname{background:var(--td-green-tint);color:var(--td-green-deep);border-radius:var(--td-r-pill);}
body.td-page .cat-card.is-soon{border-left:4px solid var(--td-warn);}

body.td-page .sec-title{color:var(--td-green-deep);font-weight:800;font-size:.86rem;letter-spacing:.02em;
  text-transform:uppercase;border-bottom:2px solid var(--td-green-tint);padding-bottom:6px;}
body.td-page .sec-title.warn{color:var(--td-warn);border-color:var(--td-warn-tint);}

body.td-page .empty{background:var(--td-surface);border:1.5px dashed rgba(38,43,39,.18);border-radius:var(--td-r-l);color:var(--td-ink-soft);}
body.td-page .backlink{color:var(--td-purple);font-weight:700;}
body.td-page .why{background:var(--td-bg);border:var(--td-bd-thin);border-radius:var(--td-r-m);}
body.td-page .why b{color:var(--td-green-deep);}
body.td-page .note-deadline{background:var(--td-warn-tint);color:var(--td-warn);border-radius:var(--td-r-m);}
body.td-page .tag{background:var(--td-purple-tint);color:var(--td-purple-deep);border-radius:var(--td-r-pill);}

body.td-page .kv{padding:6px 0;border-bottom:1px dashed rgba(38,43,39,.10);font-size:.92rem;}
body.td-page .kv:last-child{border-bottom:0;}
body.td-page .kv b{color:var(--td-green-deep);margin-right:6px;}

body.td-page table{width:100%;border-collapse:collapse;font-size:.86rem;}
body.td-page th{background:var(--td-green-tint);color:var(--td-green-deep);font-weight:800;
  text-align:left;padding:8px 10px;font-size:.78rem;}
body.td-page td{padding:8px 10px;border-bottom:1px solid rgba(38,43,39,.08);}
body.td-page tr:last-child td{border-bottom:0;}

body.td-page details summary{cursor:pointer;color:var(--td-purple);font-weight:700;}
body.td-page code{background:var(--td-bg-deep);border-radius:6px;padding:2px 7px;color:var(--td-purple-deep);}

/* --- 管理画面(admin.css)の骨組みも軽く統一（機能・レイアウトは変更しない） --- */
body.td-page .admin-head{background:linear-gradient(155deg,var(--td-green),var(--td-green-deep)) !important;}
body.td-page .admin-head .bar nav a.active{background:#FFFFFF;color:var(--td-green-deep) !important;}
body.td-page .amain table th{background:var(--td-green-tint);color:var(--td-green-deep);}

/* ============================================================
   参考画像コンポーネント完全模倣(2026-07-06)
   Foundation(層・elevation・角丸・枠線)/ Controls(チェック・ラジオ・スイッチ・入力状態)/
   Navigation(タブ) / Data display(バッジ・アバター・ツールチップ・テーブル) /
   Feedback(アラートバナー・空状態) — 配色はウィンブルドン(緑/紫)で統一。
   ============================================================ */

/* --- Foundation: 層(flat/raised/inset/pressed)デモ用ユーティリティ --- */
body.td-page .td-layer{border-radius:var(--td-r-m);background:var(--td-surface);}
body.td-page .td-layer.flat{box-shadow:none;border:var(--td-bd-thin);}
body.td-page .td-layer.raised{box-shadow:var(--td-sh-1);}
body.td-page .td-layer.inset{box-shadow:var(--td-sh-in);background:var(--td-bg);}
body.td-page .td-layer.pressed{box-shadow:var(--td-sh-in);transform:translateY(1px);}

/* --- Controls: チェックボックス・ラジオ(ブランド色のaccent-color・拡大・押しやすく) --- */
body.td-page input[type="checkbox"],body.td-page input[type="radio"]{
  accent-color:var(--td-purple);width:19px;height:19px;vertical-align:middle;cursor:pointer;
  margin-right:2px;}
body.td-page label:has(> input[type="checkbox"]),body.td-page label:has(> input[type="radio"]),
body.td-page .consent{display:flex;align-items:flex-start;gap:8px;cursor:pointer;}
body.td-page .consent input[type="checkbox"]{margin-top:2px;flex:none;}

/* --- Controls: スイッチ(トグル)。将来のON/OFF機能用に用意(既存チェックボックスの代替表示にも使える) --- */
body.td-page .td-switch{position:relative;display:inline-block;width:44px;height:26px;flex:none;}
body.td-page .td-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1;}
body.td-page .td-switch .track{position:absolute;inset:0;background:var(--td-bg-deep);border-radius:var(--td-r-pill);
  box-shadow:var(--td-sh-in);transition:background .15s;}
body.td-page .td-switch .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#FFFFFF;box-shadow:var(--td-sh-1);transition:transform .15s;}
body.td-page .td-switch input:checked ~ .track{background:linear-gradient(150deg,var(--td-green),var(--td-green-deep));}
body.td-page .td-switch input:checked ~ .track::after{transform:translateX(18px);}

/* --- Controls: テキスト入力のエラー状態(登録・ログイン等) --- */
body.td-page .fld.has-error input,body.td-page .fld input.error{
  border-color:var(--td-danger) !important;box-shadow:0 0 0 3px rgba(163,59,50,.12) !important;}
body.td-page .fld .error-msg{color:var(--td-danger);font-size:.74rem;margin-top:3px;}

/* --- Navigation: タブ(選手切替・並び替え等は既存のpill方式を維持しつつ、下線タブ変種も用意) --- */
body.td-page .td-tabs{display:flex;gap:4px;border-bottom:2px solid var(--td-bg-deep);margin:var(--td-sp-3) 0;}
body.td-page .td-tabs a{padding:9px 14px;font-size:.85rem;font-weight:700;color:var(--td-ink-soft);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-2px;}
body.td-page .td-tabs a.active{color:var(--td-green-deep);border-color:var(--td-purple);}

/* --- Data display: ツールチップ(title属性の代替・軽量CSS実装) --- */
body.td-page [data-tip]{position:relative;}
body.td-page [data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);background:var(--td-green-deep);color:#F2F7F3;font-size:.72rem;font-weight:600;
  padding:5px 9px;border-radius:var(--td-r-s);white-space:nowrap;box-shadow:var(--td-sh-2);z-index:20;}

/* --- Feedback: アラートバナー(flashメッセージ。従来は完全無装飾だった) --- */
body.td-page .flash{display:flex;align-items:center;gap:10px;border-radius:var(--td-r-m);
  padding:12px 15px;font-size:.86rem;font-weight:600;margin:var(--td-sp-3) 0;box-shadow:var(--td-sh-1);
  border-left:var(--td-bd-thick);}
body.td-page .flash::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;}
body.td-page .flash.ok{background:var(--td-ok-tint);color:#154A31;border-left-color:var(--td-ok);}
body.td-page .flash.ok::before{background:var(--td-ok);}
body.td-page .flash.err{background:var(--td-danger-tint);color:#5E241D;border-left-color:var(--td-danger);}
body.td-page .flash.err::before{background:var(--td-danger);}

/* --- Feedback: 空状態(td-empty)にアイコン枠を付与(絵文字は使わずCSS描画の検索アイコン) --- */
body.td-page .empty::before,body.td-page .td-empty::before{content:"";display:block;width:26px;height:26px;
  margin:0 auto 8px;border:2px solid var(--td-ink-soft);border-radius:50%;opacity:.45;
  box-shadow:9px 9px 0 -7px var(--td-ink-soft);}

/* ============================================================
   戦歴テーブルのモバイル カード化（2026-07-06）
   見出し(th)が狭い列幅で1文字ずつ縦割れする不具合の根治。
   対象: table.mh-table クラスを付けた戦歴系テーブル(scouting.php/results.php)。
   モバイル幅ではthead非表示+各td先頭にdata-labelをラベルとして絶対配置し、
   1行=1試合のカード形式にする(横スクロール無し・縦に伸びるのは許容)。
   ============================================================ */
/* デスクトップ側の保険: 列数が多い戦歴テーブルは狭い列で見出しが縦割れすることがあるため、
   th自体は常時nowrap(はみ出しはカード側のoverflow-x:autoで横スクロール)。 */
body.td-page table.mh-table th{white-space:nowrap;}
@media(max-width:700px){
  body.td-page table.mh-table thead{display:none;}
  body.td-page table.mh-table,
  body.td-page table.mh-table tbody,
  body.td-page table.mh-table tr,
  body.td-page table.mh-table td{display:block;width:100%;box-sizing:border-box;}
  body.td-page table.mh-table{border:0;}
  body.td-page table.mh-table tr{
    border:var(--td-bd-thin);border-radius:var(--td-r-m);margin-bottom:10px;
    padding:8px 10px;box-shadow:var(--td-sh-1);background:var(--td-surface);}
  body.td-page table.mh-table td{
    position:relative;padding:6px 4px 6px calc(34% + 10px);min-height:1.6em;
    border-bottom:1px dashed rgba(38,43,39,.08);font-size:.86rem;text-align:left;
    white-space:normal !important;overflow-wrap:break-word;}
  body.td-page table.mh-table td:last-child{border-bottom:0;}
  body.td-page table.mh-table td::before{
    content:attr(data-label);position:absolute;left:4px;top:6px;width:calc(34% - 14px);
    font-weight:700;font-size:.72rem;color:var(--td-ink-soft,#6b7785);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}