/* デザイントークンと共通部品。正本は mock/index.html(データベース感のダークUI)。全ページがこれ1枚を読む。 */

/* =========================================================================
   規律: グラデーション・発光・テクスチャ・ボケは使わない。面はベタ、境界は1px。
         色は「意味」にだけ使う(1位/選択中=朱、量=青、上昇=緑、下降=赤)。
   ========================================================================= */
:root{
  /* 面(4段。すべてベタ塗り) */
  --c-bg:        #0B0E14;   /* ページ面 */
  --c-surface:   #12161F;   /* カード面 */
  --c-surface-2: #171C27;   /* 行ヘッダ・ホバー */
  --c-surface-3: #1D2431;   /* 押下 */
  --c-plane:     #0E121A;   /* ピッチ図の面(図版はページより沈む) */

  /* 罫線(3段) */
  --c-line:      #2E384C;
  --c-line-2:    #3A4557;
  --c-line-ui:   #5E6980;   /* 操作可能な部品の境界(隣接面すべてに対し3:1以上) */

  /* 文字(3段のみ) */
  --c-ink:       #E9EDF4;
  --c-ink-2:     #A3AEC0;
  --c-ink-3:     #7C879A;

  /* 意味を持つ色 */
  --c-accent:      #FF6B4A;
  --c-accent-ink:  #1A0D07;
  --c-accent-hi:   #FF8064;
  --c-accent-lo:   #E9573A;
  --c-accent-fill: #2A1A18;
  --c-accent-line: rgba(255,107,74,.45);
  --c-data:        #3E8AE8;
  --c-up:          #34B96A;
  --c-down:        #E5626A;

  --c-pitch-line: #45536D;

  /* 余白スケール(隣接値に25%以上の差) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* タイプスケール(デスクトップ幅では下のレスポンシブ節でこの値ごと引き上げる) */
  --t-2xs: 9.5px; --t-xs: 11px; --t-sm: 12.5px; --t-base: 15px;
  --t-md: 17px;   --t-lg: 20px; --t-xl: 26px;   --t-2xl: 32px;
  --t-pct: 13.5px;  /* 得票率の数字(表とチップで揃える) */

  /* 角丸(データUIらしく浅い) */
  --r-1: 2px; --r-2: 3px; --r-3: 6px; --r-full: 999px;

  /* モーション */
  --d-fast: 120ms; --d-slow: 420ms;
  --e-out: cubic-bezier(.2,.7,.3,1);

  /* 書体 */
  --font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic",
               "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
  /* 等幅は「キー・コード・単位」専用(データベースの列名の質感) */
  --font-key:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Roboto Mono", "DejaVu Sans Mono", monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:var(--t-base);
  line-height:1.8;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol,figure,table{ margin:0; }
ul{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
a{ color:var(--c-ink); }
:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }
.num{ font-variant-numeric:tabular-nums; }
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
[hidden]{ display:none !important; }

/* 英字キー(小さく正確なラベル。日本語ラベルへの併記) */
.key{
  font-family:var(--font-key);
  font-size:var(--t-2xs); line-height:1.4;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-ink-3);
}

/* ---------- レイアウト ---------- */
.wrap{ width:100%; max-width:560px; margin-inline:auto; padding-inline:var(--s-4); }

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:30;
  background:var(--c-bg);
  border-bottom:1px solid var(--c-line-2);
}
.site-header__inner{ display:flex; align-items:center; gap:var(--s-3); min-height:52px; }
.brand{ display:flex; align-items:center; gap:var(--s-2); min-width:0; text-decoration:none; }
.brand__mark{ font-size:var(--t-base); font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.chip-draft{
  flex:none; font-family:var(--font-key); font-size:var(--t-2xs); line-height:1;
  padding:4px 6px; border:1px solid var(--c-line-ui); border-radius:var(--r-1);
  color:var(--c-ink-2); letter-spacing:.12em;
}
.site-header__note{ margin-left:auto; font-size:var(--t-xs); color:var(--c-ink-3); white-space:nowrap; }
.site-header__link{
  margin-left:auto; font-size:var(--t-xs); color:var(--c-ink-2);
  text-decoration:none; border-bottom:1px solid var(--c-line-ui);
  padding-bottom:1px; white-space:nowrap;
}
.site-header__link:hover{ color:var(--c-ink); border-color:var(--c-ink-3); }

/* ---------- ヒーロー ---------- */
.hero{ padding-top:var(--s-6); padding-bottom:var(--s-5); }
.hero__eyebrow{ display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-3); }
.hero__eyebrow::before{ content:""; width:14px; height:2px; background:var(--c-accent); flex:none; }
.hero__title{
  font-size:clamp(21px, 5.6vw, 26px); line-height:1.55; font-weight:700; letter-spacing:.01em;
}
.hero__lead{
  margin-top:var(--s-3); color:var(--c-ink-2); font-size:var(--t-sm);
  line-height:1.85; max-width:34em;
}

/* ---------- データセット・ヘッダ(規模と鮮度を名乗る) ---------- */
.dataset{
  border:1px solid var(--c-line-2); border-radius:var(--r-3);
  background:var(--c-surface); overflow:hidden;
}
.dataset__grid{ display:grid; grid-template-columns:1fr 1fr; }
.metric{ padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--c-line); }
.metric + .metric{ border-left:1px solid var(--c-line); }
.metric:nth-child(odd){ border-left:0; }
.metric__label{ font-size:var(--t-xs); color:var(--c-ink-2); line-height:1.5; }
.metric__value{
  margin-top:2px; font-size:var(--t-lg); font-weight:700; line-height:1.25;
  font-variant-numeric:tabular-nums; letter-spacing:.005em;
}
.metric__value--sm{ font-size:var(--t-sm); font-weight:600; line-height:1.5; padding-block:5px; }
.metric__unit{ font-size:var(--t-xs); font-weight:600; color:var(--c-ink-2); margin-left:3px; }
.metric__sub{ font-size:var(--t-2xs); color:var(--c-ink-3); font-family:var(--font-key); letter-spacing:.1em; }
.dot-live{
  display:inline-block; width:6px; height:6px; border-radius:var(--r-full);
  background:var(--c-up); margin-right:5px; vertical-align:middle;
}

/* 直近7日の投票推移(スパークライン) */
.trend{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4); background:var(--c-surface-2);
}
.trend__text{ flex:none; }
.trend__label{ font-size:var(--t-xs); color:var(--c-ink-2); white-space:nowrap; }
.trend__spark{ margin-left:auto; flex:0 1 118px; min-width:0; display:block; height:30px; }
.trend__last{
  flex:none; font-size:var(--t-sm); font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--c-ink);
}
.trend__last span{ font-size:var(--t-xs); font-weight:600; color:var(--c-ink-2); margin-left:2px; }

/* ---------- セクション見出し ---------- */
.sec{ margin-top:var(--s-7); }
.sec__head{
  display:flex; flex-direction:column-reverse; align-items:flex-start; gap:2px;
  padding-bottom:var(--s-3); border-bottom:1px solid var(--c-line-2);
}
.sec__title{ font-size:var(--t-md); font-weight:700; line-height:1.4; letter-spacing:.01em; }
.sec__key{ white-space:nowrap; }
@media (min-width:560px){
  .sec__head{ flex-direction:row; align-items:baseline; gap:var(--s-3); }
  .sec__key{ margin-left:auto; }
}

/* ---------- ピッチ図(真上からの schematic) ---------- */
.board{ margin-top:var(--s-4); }
.board__bar{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-3);
  border:1px solid var(--c-line-2); border-bottom:0;
  border-radius:var(--r-3) var(--r-3) 0 0;
  background:var(--c-surface-2); font-size:var(--t-xs);
}
.board__item{ display:flex; align-items:baseline; gap:6px; color:var(--c-ink-2); }
.board__item b{ color:var(--c-ink); font-weight:700; letter-spacing:.02em; }
.board__item + .board__item{ margin-left:auto; }

.pitch{
  position:relative; aspect-ratio:68 / 105;
  background:var(--c-plane);
  border:1px solid var(--c-line-2);
  border-radius:0 0 var(--r-3) var(--r-3);
  overflow:hidden;
}
.pitch__schema{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.pitch__row{
  position:absolute; left:0; right:0;
  display:flex; align-items:flex-start; gap:5px;
  padding-inline:6px; transform:translateY(-50%);
}
.pitch__row--fw{ top:27%; }
.pitch__row--mf{ top:53%; }
.pitch__row--df{ top:74%; }
.pitch__row--gk{ top:92%; justify-content:center; }

.chip{
  flex:1 1 0; min-width:0; position:relative;
  display:block; text-align:left;
  padding:6px 7px 7px;
  margin-top:var(--dy, 0px);
  background:var(--c-surface-2);
  border:1px solid var(--c-line-ui);
  border-radius:var(--r-2);
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--d-fast) var(--e-out),
             border-color var(--d-fast) var(--e-out);
}
button.chip{ cursor:pointer; }
.pitch__row--gk .chip{ flex:0 1 38%; }
.chip__top{ display:flex; align-items:center; gap:4px; }
.chip__key{
  font-family:var(--font-key); font-size:var(--t-2xs); line-height:1.3;
  letter-spacing:.08em; color:var(--c-ink-2);
}
.chip__mark{
  margin-left:auto; flex:none;
  font-size:var(--t-2xs); line-height:1.3; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--c-ink-3); letter-spacing:0;
}
.chip__name{
  display:block; margin-top:3px;
  font-size:var(--t-xs); line-height:1.35; font-weight:600; color:var(--c-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chip__name--empty{ color:var(--c-ink-3); font-weight:400; }
.chip__pct{
  display:block; margin-top:1px;
  font-size:var(--t-pct); line-height:1.2; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--c-ink); letter-spacing:.01em;
}
.chip__pct i{ font-style:normal; font-size:var(--t-2xs); font-weight:600; color:var(--c-ink-2); margin-left:1px; }
.chip__pct--muted{ color:var(--c-ink-3); font-weight:600; }
button.chip:hover{ background:var(--c-surface-3); }
button.chip:active{ background:var(--c-surface-3); }
.chip[aria-pressed="true"], .chip[data-state="active"]{
  background:var(--c-accent-fill);
  border-color:var(--c-accent);
  box-shadow:inset 0 0 0 1px var(--c-accent-line);
}
.chip[aria-pressed="true"] .chip__key, .chip[data-state="active"] .chip__key{ color:var(--c-accent); }
.chip[data-filled="0"]{ border-style:dashed; }

.pitch__note{ margin-top:var(--s-3); font-size:var(--t-xs); line-height:1.7; color:var(--c-ink-3); }

/* ---------- ポジションフィルタ / タブ ---------- */
.filter{ margin-top:var(--s-5); }
.filter__head{ display:flex; align-items:baseline; gap:var(--s-3); margin-bottom:var(--s-2); }
.filter__label{ font-size:var(--t-xs); color:var(--c-ink-2); }
.tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.tab{
  min-width:44px; min-height:44px; padding:0 var(--s-2);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-key); font-size:var(--t-xs); letter-spacing:.06em;
  color:var(--c-ink-2);
  border:1px solid var(--c-line-ui); border-radius:var(--r-2);
  background:transparent; cursor:pointer;
  transition:color var(--d-fast) var(--e-out),
             border-color var(--d-fast) var(--e-out),
             background-color var(--d-fast) var(--e-out);
}
.tab:hover{ color:var(--c-ink); background:var(--c-surface-2); }
.tab:active{ background:var(--c-surface-3); }
.tab[aria-selected="true"]{
  color:var(--c-accent); border-color:var(--c-accent);
  background:var(--c-accent-fill);
  box-shadow:inset 0 0 0 1px var(--c-accent-line);
}

/* ---------- パネル(表・候補リスト共通の器) ---------- */
.panel{
  margin-top:var(--s-4);
  border:1px solid var(--c-line-2); border-radius:var(--r-3);
  background:var(--c-surface); overflow:hidden;
}
.panel__head{
  display:flex; align-items:center; gap:var(--s-2);
  padding:var(--s-3); background:var(--c-surface-2);
  border-bottom:1px solid var(--c-line-2);
}
.panel__code{
  flex:none;
  font-family:var(--font-key); font-size:var(--t-xs); font-weight:700; letter-spacing:.08em;
  color:var(--c-accent-ink); background:var(--c-accent);
  padding:3px 6px; border-radius:var(--r-1);
}
.panel__title{ font-size:var(--t-sm); font-weight:700; line-height:1.4; min-width:0; }
.panel__count{ margin-left:auto; flex:none; font-size:var(--t-xs); color:var(--c-ink-2); font-variant-numeric:tabular-nums; }
.panel__sub{
  display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-4);
  padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--c-line);
  font-size:var(--t-xs); color:var(--c-ink-2);
}
.panel__sub b{ color:var(--c-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.panel__foot{
  padding:var(--s-3); border-top:1px solid var(--c-line);
  font-size:var(--t-2xs); line-height:1.7; color:var(--c-ink-3); letter-spacing:0;
}

/* ---------- ランキング表 ---------- */
.rt{ width:100%; border-collapse:collapse; table-layout:fixed; }
.rt th, .rt td{ padding:9px 4px; vertical-align:top; }
.rt th:first-child, .rt td:first-child{ padding-left:var(--s-3); }
.rt th:last-child,  .rt td:last-child{ padding-right:var(--s-3); }
.rt thead th{
  font-size:var(--t-2xs); font-weight:600; line-height:1.5;
  letter-spacing:.06em; color:var(--c-ink-3);
  text-align:left; white-space:nowrap;
  padding-top:var(--s-3); padding-bottom:6px;
  border-bottom:1px solid var(--c-line-2);
}
.rt .n{ text-align:right; font-variant-numeric:tabular-nums; }
.rt tbody tr{ border-bottom:1px solid var(--c-line); }
.rt tbody tr:hover{ background:var(--c-surface-3); }
.rt tbody tr[data-rank="1"]{ box-shadow:inset 2px 0 0 var(--c-accent); }
.rt__rank{
  font-family:var(--font-key); font-size:var(--t-sm); line-height:1.5;
  color:var(--c-ink-3); font-variant-numeric:tabular-nums;
}
tr[data-rank="1"] .rt__rank{ color:var(--c-accent); font-weight:700; }
.rt__name{ font-size:var(--t-sm); line-height:1.45; font-weight:600; color:var(--c-ink); }
tr[data-rank="1"] .rt__name{ font-weight:700; }
.rt__track{
  display:block; margin-top:6px; height:4px;
  background:var(--c-line); border-radius:var(--r-1); overflow:hidden;
}
.rt__bar{
  display:block; height:100%; width:var(--w,0%);
  background:var(--c-data); border-radius:0 2px 2px 0;
  transform-origin:left center;
  animation:bar var(--d-slow) var(--e-out);
}
tr[data-rank="1"] .rt__bar{ background:var(--c-accent); }
@keyframes bar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.rt__pct{ font-size:var(--t-pct); font-weight:700; line-height:1.5; color:var(--c-ink); }
tr[data-rank="1"] .rt__pct{ color:var(--c-accent); }
.rt__pct i{ font-style:normal; font-size:var(--t-2xs); font-weight:600; color:var(--c-ink-2); margin-left:1px; }
.rt__votes{ font-size:var(--t-sm); line-height:1.5; color:var(--c-ink-2); }
.rt tfoot td{
  border-top:1px solid var(--c-line-2);
  font-size:var(--t-xs); color:var(--c-ink-2); padding-top:10px; padding-bottom:12px;
}
.rt tfoot .rt__pct, .rt tfoot .rt__votes{ color:var(--c-ink-2); font-size:var(--t-xs); font-weight:600; }
.rt__empty{ padding:var(--s-5) var(--s-3); font-size:var(--t-sm); color:var(--c-ink-3); line-height:1.8; }

/* ---------- 候補リスト(/make の選手ピッカー) ---------- */
.roster{ max-height:min(52vh, 420px); overflow-y:auto; overscroll-behavior:contain; }
.roster__item{
  display:flex; align-items:center; gap:var(--s-3);
  width:100%; min-height:52px; padding:var(--s-2) var(--s-3);
  text-align:left; cursor:pointer;
  border-bottom:1px solid var(--c-line);
  transition:background-color var(--d-fast) var(--e-out);
}
.roster__item:hover{ background:var(--c-surface-2); }
.roster__item:active{ background:var(--c-surface-3); }
.roster__pos{
  flex:none; width:30px;
  font-family:var(--font-key); font-size:var(--t-2xs); letter-spacing:.08em;
  color:var(--c-ink-3);
}
.roster__name{ font-size:var(--t-sm); font-weight:600; line-height:1.5; min-width:0; }
.roster__meta{
  margin-left:auto; flex:none;
  font-size:var(--t-xs); color:var(--c-ink-3); font-variant-numeric:tabular-nums;
}
.roster__item[aria-pressed="true"]{ background:var(--c-accent-fill); box-shadow:inset 2px 0 0 var(--c-accent); }
.roster__item[aria-pressed="true"] .roster__name{ color:var(--c-accent); }
.roster__item[data-used="1"]{ color:var(--c-ink-3); }
.roster__item[data-used="1"] .roster__name{ color:var(--c-ink-3); font-weight:400; }

.roster__empty{
  padding:var(--s-5) var(--s-3);
  font-size:var(--t-sm); line-height:1.8; color:var(--c-ink-3); text-align:center;
}

/* ---------- 検索ボックス(候補の絞り込み) ---------- */
.search{
  display:flex; align-items:center; gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  background:var(--c-surface); border-bottom:1px solid var(--c-line);
}
.search__field{
  display:flex; align-items:center; gap:var(--s-2);
  flex:1 1 auto; min-width:0;
  padding-inline:var(--s-2);
  background:var(--c-plane);
  border:1px solid var(--c-line-ui); border-radius:var(--r-2);
  transition:border-color var(--d-fast) var(--e-out);
}
.search__field:focus-within{ border-color:var(--c-accent); }
.search__icon{ flex:none; color:var(--c-ink-3); }
.search__field:focus-within .search__icon{ color:var(--c-accent); }
.search__input{
  flex:1 1 auto; min-width:0; min-height:40px;
  padding:0; background:transparent; border:0;
  color:var(--c-ink); font:inherit; font-size:var(--t-sm);
  -webkit-appearance:none; appearance:none;
}
.search__input::placeholder{ color:var(--c-ink-3); }
.search__input:focus{ outline:none; }
.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }
.search__clear{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin-right:-2px;
  border-radius:var(--r-1); color:var(--c-ink-3); cursor:pointer;
  transition:color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.search__clear:hover{ color:var(--c-ink); background:var(--c-surface-3); }

/* ---------- 選手リクエスト(候補にいない選手の申請) ---------- */
.reqcta{ border-top:1px solid var(--c-line); background:var(--c-surface-2); }
.reqcta__ask{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2) var(--s-3);
  padding:var(--s-3);
}
.reqcta__text{ font-size:var(--t-xs); line-height:1.6; color:var(--c-ink-2); }
.reqcta__btn{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:40px; padding:0 var(--s-3);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.02em; color:var(--c-ink);
  background:var(--c-surface); border:1px solid var(--c-line-ui); border-radius:var(--r-2);
  cursor:pointer;
  transition:background-color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.reqcta__btn::before{
  content:"＋"; font-family:var(--font-key); font-size:var(--t-xs); color:var(--c-accent);
}
.reqcta__btn:hover{ background:var(--c-surface-3); border-color:var(--c-ink-3); }

.reqform{ display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-3); }
.reqform__lead{ font-size:var(--t-xs); line-height:1.7; color:var(--c-ink-2); }
.reqform__note{ font-size:var(--t-2xs); line-height:1.7; color:var(--c-ink-3); }
.reqform__actions{ display:flex; gap:var(--s-2); }
.reqform__actions .btn{ flex:1 1 0; min-width:0; }
.reqform__done{ padding:var(--s-3); }

.field{ display:flex; flex-direction:column; gap:5px; }
.field__label{ display:flex; align-items:center; gap:var(--s-2); font-size:var(--t-xs); color:var(--c-ink-2); }
.field__req, .field__opt{
  font-family:var(--font-key); font-size:var(--t-2xs); line-height:1.4; letter-spacing:.1em;
  padding:1px 4px; border-radius:var(--r-1);
}
.field__req{ color:var(--c-accent); border:1px solid var(--c-accent-line); }
.field__opt{ color:var(--c-ink-3); border:1px solid var(--c-line-2); }
.field__input{
  width:100%; min-height:44px; padding:0 var(--s-3);
  background:var(--c-plane); color:var(--c-ink);
  border:1px solid var(--c-line-ui); border-radius:var(--r-2);
  font:inherit; font-size:var(--t-sm);
  -webkit-appearance:none; appearance:none;
  transition:border-color var(--d-fast) var(--e-out);
}
.field__input::placeholder{ color:var(--c-ink-3); }
.field__input:focus{ border-color:var(--c-accent); }
.field__input[aria-invalid="true"]{ border-color:var(--c-down); }
.field__hint{
  display:flex; align-items:baseline; gap:var(--s-2);
  font-size:var(--t-2xs); line-height:1.6; color:var(--c-ink-3);
}
.field__count{ margin-left:auto; flex:none; font-variant-numeric:tabular-nums; }
.field__count[data-over="1"]{ color:var(--c-down); font-weight:700; }

/* ---------- 進捗バー(/make) ---------- */
.progress{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--c-line-2); border-radius:var(--r-3);
  background:var(--c-surface);
}
.progress__label{ font-size:var(--t-xs); color:var(--c-ink-2); white-space:nowrap; }
.progress__count{ font-size:var(--t-lg); font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; }
.progress__count i{ font-style:normal; font-size:var(--t-xs); font-weight:600; color:var(--c-ink-2); margin-left:2px; }
.progress__track{
  flex:1 1 auto; min-width:60px; height:4px;
  background:var(--c-line); border-radius:var(--r-1); overflow:hidden;
}
.progress__bar{ display:block; height:100%; width:var(--w,0%); background:var(--c-data); }
.progress__bar[data-full="1"]{ background:var(--c-up); }

/* ---------- 共有タイトル「○○ジャパン」(/make) ---------- */
.titlebox{
  margin-bottom:var(--s-4);
  padding:var(--s-3) var(--s-4) var(--s-4);
  border:1px solid var(--c-line-2); border-radius:var(--r-3);
  background:var(--c-surface);
}
.titlebox__head{
  display:flex; align-items:baseline; gap:var(--s-3);
  padding-bottom:var(--s-3); margin-bottom:var(--s-3);
  border-bottom:1px solid var(--c-line);
}
.titlebox__label{ font-size:var(--t-xs); color:var(--c-ink-2); }
.titlebox__head .key{ margin-left:auto; white-space:nowrap; }
/* 入力欄と接尾辞「ジャパン」で1つの見出しに見せる(入力しながら完成形が読める) */
/* gap を置かないのは、入力欄と接尾辞のあいだに空白を見せず「○○ジャパン」と1語で読ませるため */
.titlebox__field{
  display:flex; align-items:center;
  padding:var(--s-1) var(--s-3);
  background:var(--c-plane);
  border:1px solid var(--c-line-ui); border-radius:var(--r-2);
  transition:border-color var(--d-fast) var(--e-out);
}
.titlebox__field:focus-within{ border-color:var(--c-accent); }
.titlebox__field:has(.titlebox__input[aria-invalid="true"]){ border-color:var(--c-down); }
.titlebox__input{
  flex:1 1 auto; min-width:0; min-height:44px;
  padding:0; background:transparent; border:0;
  color:var(--c-ink); font:inherit; font-size:var(--t-md); font-weight:700; letter-spacing:.01em;
  text-align:right;
  -webkit-appearance:none; appearance:none;
}
.titlebox__input::placeholder{ color:var(--c-ink-3); font-weight:400; }
.titlebox__input:focus{ outline:none; }
.titlebox__suffix{
  flex:none; font-size:var(--t-md); font-weight:700; letter-spacing:.01em; color:var(--c-ink);
}
.titlebox__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s-3); }
.titlechip{
  min-height:32px; padding:0 var(--s-3);
  font-size:var(--t-xs); font-weight:600; color:var(--c-ink-2);
  background:var(--c-surface-2); border:1px solid var(--c-line-2); border-radius:var(--r-2);
  cursor:pointer;
  transition:color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out),
             border-color var(--d-fast) var(--e-out);
}
.titlechip:hover{ color:var(--c-ink); background:var(--c-surface-3); border-color:var(--c-ink-3); }
.titlechip[aria-pressed="true"]{
  color:var(--c-accent); background:var(--c-accent-fill); border-color:var(--c-accent-line);
}
.titlebox__hint{
  display:flex; align-items:baseline; gap:var(--s-2); margin-top:var(--s-3);
  font-size:var(--t-2xs); line-height:1.6; color:var(--c-ink-3);
}
.titlebox__hint [data-error="1"]{ color:var(--c-down); }

/* ---------- 通知バー ---------- */
.banner{
  display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--c-line-2); border-left:2px solid var(--c-accent);
  border-radius:0 var(--r-2) var(--r-2) 0;
  background:var(--c-surface); color:var(--c-ink-2);
  font-size:var(--t-sm); line-height:1.75;
}
.banner--ok{ border-left-color:var(--c-up); }
.banner--error{ border-left-color:var(--c-down); }
.banner__tag{
  flex:none; font-family:var(--font-key); font-size:var(--t-2xs);
  letter-spacing:.14em; color:var(--c-accent); padding-top:4px;
}
.banner--ok .banner__tag{ color:var(--c-up); }
.banner--error .banner__tag{ color:var(--c-down); }
.banner strong{ color:var(--c-ink); font-weight:700; }

/* ---------- ボタン ---------- */
.cta{ margin-top:var(--s-6); }
.cta__stack{ display:flex; flex-direction:column; gap:var(--s-3); }
.btn{
  display:flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:52px; padding:var(--s-3) var(--s-5);
  border-radius:var(--r-3);
  font-size:var(--t-base); font-weight:700; letter-spacing:.02em;
  cursor:pointer; text-decoration:none;
  transition:background-color var(--d-fast) var(--e-out),
             border-color var(--d-fast) var(--e-out);
}
.btn svg{ flex:none; }
.btn--primary{ background:var(--c-accent); color:var(--c-accent-ink); }
.btn--primary:hover{ background:var(--c-accent-hi); }
.btn--primary:active{ background:var(--c-accent-lo); }
.btn--ghost{ border:1px solid var(--c-line-ui); color:var(--c-ink); background:var(--c-surface); }
.btn--ghost:hover{ background:var(--c-surface-2); border-color:var(--c-ink-3); }
.btn--ghost:active{ background:var(--c-surface-3); }
.btn--sm{ min-height:44px; font-size:var(--t-sm); padding:var(--s-2) var(--s-4); }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.cta__note{ margin-top:var(--s-3); font-size:var(--t-xs); color:var(--c-ink-3); text-align:center; }

/* ---------- 共有テキストのプレビュー ---------- */
.share__box{
  margin-top:var(--s-3); padding:var(--s-3) var(--s-4);
  border:1px solid var(--c-line); border-radius:var(--r-2);
  background:var(--c-plane);
  font-family:var(--font-key); font-size:var(--t-xs); line-height:1.9;
  color:var(--c-ink-2); white-space:pre-wrap; word-break:break-all;
}

/* ---------- フッター ---------- */
.site-footer{
  margin-top:var(--s-8);
  border-top:1px solid var(--c-line-2);
  padding-block:var(--s-5) var(--s-8);
  color:var(--c-ink-3); font-size:var(--t-xs); line-height:1.9;
}
.site-footer strong{ color:var(--c-ink-2); font-weight:600; }
.site-footer p + p{ margin-top:var(--s-2); }
.site-footer a{ color:var(--c-ink-2); }

/* ---------- レスポンシブ ---------- */
@media (max-width:359px){
  .chip{ padding:5px 5px 6px; }
  .chip__name{ font-size:10px; }
  .chip__pct{ font-size:12px; }
  /* 320px ではヘッダーに全部は入らない。βの表記はフッターにもあるのでここでは畳む */
  .site-header__note, .chip-draft{ display:none; }
  /* 呼びかけとボタンが1行に収まらない幅。ボタンは折り返して全幅に置く */
  .reqcta__btn{ margin-left:0; width:100%; justify-content:center; }
  .reqform__actions{ flex-direction:column; }
}
@media (min-width:600px){
  .dataset__grid{ grid-template-columns:repeat(4,1fr); }
  .metric:nth-child(odd){ border-left:1px solid var(--c-line); }
  .metric:first-child{ border-left:0; }
}
/* デスクトップは「スマホ用の寸法のまま横に広がる」を避け、文字も図版も一段拡大する。
   タイプスケールをトークンごと引き上げるので、各部品の指定はそのまま追従する。 */
@media (min-width:920px){
  :root{
    --t-2xs:10px; --t-xs:12px;  --t-sm:13.5px; --t-base:16px;
    --t-md:18.5px; --t-lg:22px; --t-xl:28px;   --t-2xl:34px;
    --t-pct:14.5px;
  }
  .wrap{ max-width:1180px; padding-inline:var(--s-6); }
  .site-header__inner{ min-height:58px; }
  .hero{ padding-top:var(--s-8); }
  .hero__title{ font-size:32px; }
  .layout{
    display:grid;
    grid-template-columns:minmax(0,420px) minmax(0,1fr);
    gap:var(--s-8); align-items:start; margin-top:var(--s-7);
  }
  .layout__side{ position:sticky; top:72px; }
  /* 画面が低いときだけ縮める(下限は従来の380px)。イレブン全体を一目に収めるため。 */
  .board{ margin-top:0; max-width:clamp(380px, calc((100vh - 190px) * .648), 420px); }
  .sec{ margin-top:0; }
  .rt th, .rt td{ padding-block:12px; }
  .chip{ padding:8px 9px 9px; }
  .trend__spark{ flex:0 1 190px; height:34px; }
  .roster{ max-height:min(58vh, 520px); }
}
@media (min-width:1280px){
  :root{
    --t-2xs:10.5px; --t-xs:12.5px; --t-sm:14.5px; --t-base:17px;
    --t-md:20px;    --t-lg:24px;   --t-xl:30px;   --t-2xl:37px;
    --t-pct:15.5px;
  }
  .wrap{ max-width:1280px; }
  .site-header__inner{ min-height:62px; }
  .hero__title{ font-size:37px; }
  .hero__lead{ font-size:var(--t-base); }
  .layout{ grid-template-columns:minmax(0,470px) minmax(0,1fr); }
  .board{ max-width:clamp(420px, calc((100vh - 190px) * .648), 470px); }
  .rt th, .rt td{ padding-block:14px; }
  .chip{ padding:9px 10px 10px; }
  .roster{ max-height:min(60vh, 600px); }
  .tab{ min-width:52px; padding:0 var(--s-3); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; }
}