/* Asian Breeze — Player Showcase / 共通土台
   3案（A/B/C）すべてがこれを読み込み、各案は a.css / b.css / c.css で上書きする。

   黒＋赤（2026-08-04 色川CEO指示。AB本体サイトの色に寄せる）。
   一度白基調にしたが、その過程で得た可読性の基準はそのまま維持している。
   実在のスポーツサイト（Baseball Savant / Perfect Game / NBA / プレミアリーグ）を
   実際に開いて確認した上で、次を守る。

   1. 面はフラット。カードにグラデーションを敷かない
   2. 光らせない。box-shadow の色付きグロー、ホログラム、発光する枠は使わない
   3. 背景にテクスチャを敷かない（斜めストライプ・放射グラデーションは廃止）
   4. 赤は「押す場所」と「一番良い数値」だけ。面積を増やさない
   5. 極小の全大文字ラベルを並べない。ラベルは12px以上、字間は控えめに
   6. 書体は1つ（Inter）。数字は tabular-nums で桁を揃える
   7. コントラストは本文9:1以上、補助4.5:1以上、押せる部品の枠3:1以上

   暗背景で一番やりがちな失敗は「薄いグレー文字」と「光らせること」。
   ・補助文字は #9BA4AF が下限（7.2:1）。これより暗くしない
   ・色付きの box-shadow、ホログラム、発光する枠は一切使わない
   ・grid の auto-fit は最終行に空きセルを作るので、項目数を割り切る列数を明示する */

:root{
  /* 面 — 純黒は使わない。写真と動画が浮くよう、わずかに青を含む暗色にする */
  --bg:#0C0D0F;
  --surface:#14161A;
  --surface-2:#1B1E23;
  --surface-3:#242830;

  --line:#262A31;       /* 装飾の罫線 */
  --line-2:#343A44;     /* やや強い罫線 */
  --line-3:#5B6470;     /* 押せる部品の枠。面に対して 3.0:1（WCAG 1.4.11） */

  /* 文字 */
  --ink:#F3F5F7;        /* 見出し   面に対して 15.9:1 */
  --body:#C7CDD5;       /* 本文     面に対して 11.3:1 */
  --muted:#9BA4AF;      /* 補助     面に対して  7.2:1 */

  /* 赤 — ロゴの深い赤 #C8102E は暗背景だと沈む（2.4:1）ので、
     面や文字に使う分は明るい --red、押す場所のベタ塗りは --red-brand を使い分ける */
  --red:#E8354F;        /* 大きい文字・数値・バー 4.4:1 */
  --red-brand:#C8102E;  /* ボタンのベタ塗り（白抜き文字で 5.9:1） */
  --red-deep:#A00D24;   /* ホバー */
  --red-tint:#2A0D13;

  /* データの段階色。赤だけだと高低が読めないので3色使う */
  --d-hi:#E8354F;
  --d-mid:#D69A3C;
  --d-lo:#5B92C4;
  --d-track:#242830;

  --ok:#4FBE7E;

  /* 書体は IBM Plex の1族で幅の対比をつける。
     Inter は量産UIの既定色が強く「AIが作った画面」に見える要因のひとつだった。
     Plex Sans は数字（tabular）が明快で、計測値を並べるこのページに合う。 */
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --disp:'IBM Plex Sans Condensed','IBM Plex Sans',-apple-system,sans-serif;
  --jp:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;

  --z-sticky:10;
  --z-dock:30;
  --z-modal:50;

  --pad:clamp(16px,3vw,32px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1,"cv05" 1;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:3px}
.jp{font-family:var(--jp)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ── 文字の型 ─────────────────────────────────────
   全大文字は「見出し」と「表のヘッダ」だけ。本文には使わない。 */
.h1{font-family:var(--disp);font-size:clamp(32px,4.6vw,50px);font-weight:700;
  letter-spacing:-.015em;line-height:1.04;color:var(--ink)}
.h2{font-size:17px;font-weight:700;letter-spacing:-.005em;color:var(--ink)}
.h3{font-size:14px;font-weight:600;color:var(--ink)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.small{font-size:13px;color:var(--muted)}
.tiny{font-size:12px;color:var(--muted)}

/* セクション見出し。装飾の記号は付けない */
.sec{margin-bottom:28px}
.sec:last-child{margin-bottom:0}
.sec > header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:9px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.sec > header .h2{margin-right:auto}
/* 見出し脇の小さな注記。囲みの .note とは別物なので名前を分ける */
.hmeta{font-size:12.5px;color:var(--muted)}

/* ── 面 ───────────────────────────────────────── */
.box{background:var(--surface);border:1px solid var(--line);border-radius:8px}
.box-pad{padding:18px 20px}

/* ── 表（Savant / PG の成績表と同じ作り） ────────── */
.tbl{font-size:13.5px}
.tbl th{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:right;padding:0 10px 8px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl th:first-child{text-align:left}
.tbl td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;color:var(--body);white-space:nowrap}
.tbl td:first-child{text-align:left;color:var(--ink);font-weight:500}
.tbl tr:last-child td{border-bottom:none}
.tbl tr.total td{font-weight:700;color:var(--ink);background:var(--surface-2)}
/* grid/flex の子は min-width:0 を持たないと、中身の最小幅がトラックを押し広げる */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}

/* ── 定義リスト（プロフィール） ───────────────── */
.dl{font-size:14px}
.dl div{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.dl div:last-child{border-bottom:none}
.dl dt{flex:0 0 116px;color:var(--muted);font-size:13px}
.dl dd{flex:1;color:var(--ink);min-width:0}
.dl dd .sub{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
/* 幅の狭い列では dt/dd を横に並べるとタイトルが何行にも折れる。縦に積む */
.dl.stack div{display:block}
.dl.stack dt{margin-bottom:3px}
/* 本文と同色のリンクは押せると分からない。赤＋下線で「押す場所」と分かるようにする */
.lnk{color:var(--red);border-bottom:1px solid rgba(232,53,79,.38)}
.lnk:hover{border-bottom-color:var(--red)}

/* ── パーセンタイルのバー ────────────────────────
   Baseball Savant の作りに合わせる。目盛りヘッダ＋バー＋末端に順位＋右に実測値。 */
.pctwrap{padding:4px 0}
.pcthead{display:grid;grid-template-columns:118px 1fr 62px;gap:12px;align-items:center;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  padding-bottom:6px}
.pcthead .scale{display:flex;justify-content:space-between}
.pctrow{display:grid;grid-template-columns:118px 1fr 62px;gap:12px;align-items:center;padding:7px 0}
.pctrow .nm{font-size:13px;color:var(--body);text-align:right}
.pctrow .val{font-size:13.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.track{position:relative;height:22px;display:flex;align-items:center}
.track::before{content:"";position:absolute;left:0;right:0;height:6px;border-radius:3px;background:var(--d-track)}
.track::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line-2)}
.fill{position:relative;z-index:3;height:6px;border-radius:3px;background:var(--d-hi);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.fill.mid{background:var(--d-mid)}
.fill.lo{background:var(--d-lo)}
.knob{position:absolute;right:-11px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;background:var(--d-hi);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.fill.mid .knob{background:var(--d-mid)}
.fill.lo .knob{background:var(--d-lo)}
/* NCSA基準値の位置。装飾ではなく読み取る線なので --line-3（面に対して3:1）で描く。
   D1〜NAIAのタブでのみ出る。'27 class は分布内の順位なので基準値の概念が無い。
   基準線を出している間は、真ん中固定の「平均」線（.track::after）を消す。
   2本の縦線が別々の意味で並ぶと、どちらが基準か読めなくなる。 */
.pctrow .bmk{position:absolute;top:1px;bottom:1px;width:2px;border-radius:1px;
  background:var(--line-3);z-index:2;pointer-events:none;display:none}
.pctrow.bm .bmk{display:block}
.pctrow.bm .track::after{display:none}
@media (max-width:520px){
  .pcthead,.pctrow{grid-template-columns:88px 1fr 52px;gap:8px}
  .pctrow .nm{font-size:12px}
}

/* ── 数値タイル ───────────────────────────────── */
/* 数値タイル。列数は項目数で割り切れる数を指定すること。
   auto-fit にすると最終行に空きセルができて、面だけが並んで見える。 */
.figs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.figs > div{background:var(--surface);padding:13px 4px;text-align:center;min-width:0}
/* 狭い列でも "1.230" が切れない大きさ。広い場所（.wide）だけ大きくする */
.figs .n{font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1}
.figs.wide .n{font-size:clamp(18px,2.2vw,26px)}
.figs .n small{font-size:.5em;font-weight:600;color:var(--muted);margin-left:2px}
.figs .k{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-top:5px}
.figs.wide{grid-template-columns:repeat(10,minmax(0,1fr))}
@media (max-width:1080px){.figs.wide{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ── ソース表記 ───────────────────────────────── */
.src{font-size:12px;color:var(--muted)}
.src b{color:var(--body);font-weight:500}

/* ── バッジ ───────────────────────────────────── */
.chip{display:inline-block;font-size:12px;font-weight:500;color:var(--body);
  border:1px solid var(--line-3);border-radius:4px;padding:3px 9px;white-space:nowrap}
.chip.red{color:#fff;background:var(--red-brand);border-color:var(--red-brand)}
.chip.ghost{color:var(--muted)}
/* .pool は実際に押すボタン（.chip の見た目を借りているだけ）。枠を操作部品の濃さにする */
.chip.pool{border-color:var(--line-3);cursor:pointer}
.chip.pool:hover{background:var(--surface-3)}
.chip.pool.red:hover{background:var(--red-deep);border-color:var(--red-deep)}

/* ── ボタン ───────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:6px;font-size:14px;font-weight:600;
  border:1px solid var(--line-3);color:var(--ink);background:var(--surface-2);
  transition:background .15s,border-color .15s}
.btn:hover{background:var(--surface-3);border-color:var(--muted)}
.btn.primary{background:var(--red-brand);border-color:var(--red-brand);color:#fff}
/* --red と --red-brand は同値なので、ホバーは一段濃い --red-deep にしないと無反応になる */
.btn.primary:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn.sm{padding:7px 13px;font-size:13px}

/* ── 引用 ─────────────────────────────────────── */
/* 本人談は1件が縦に長い。1列に積むと極端に縦長になるので、幅に応じて3→2→1列にする。
   カードなので最終行に空きが出ても（.figs と違い）背景が露出しない。 */
.qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:1100px){.qgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.qgrid{grid-template-columns:1fr}}
.qgrid + .note{margin-top:12px}

.quote{font-size:15.5px;line-height:1.75;color:var(--body);max-width:70ch;text-wrap:pretty}
.quote + .by{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.by .who{font-size:14px;font-weight:700;color:var(--ink)}

/* ── 動画 ─────────────────────────────────────── */
.vplayer{background:#000;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.vplayer video{width:100%;aspect-ratio:16/9;display:block;background:#000;object-fit:contain}
.vplayer .meta{padding:12px 16px;border-top:1px solid var(--line);background:var(--surface);
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}

.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.clip{display:block;text-align:left;width:100%;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:var(--surface);transition:border-color .15s}
.clip:hover{border-color:var(--line-2)}
.clip .th{position:relative}
.clip .th img{aspect-ratio:16/10;width:100%;object-fit:cover;background:var(--surface-2)}
.clip .th::after{content:"";position:absolute;left:10px;bottom:10px;width:28px;height:28px;
  border-radius:50%;background:rgba(14,16,19,.82);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='white'><path d='M8 5.2v13.6l11-6.8z'/></svg>");
  background-repeat:no-repeat;background-position:center}
.clip .cap{display:block;padding:10px 12px}
.clip .cap b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.clip .cap span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.gal .shot{display:block;width:100%;padding:0;border:1px solid var(--line);
  border-radius:6px;overflow:hidden;background:var(--surface-2);cursor:zoom-in;
  transition:border-color .15s}
.gal .shot:hover{border-color:var(--line-3)}
.gal img{aspect-ratio:1;width:100%;object-fit:cover}

dialog.lb{border:none;padding:0;background:transparent;width:min(94vw,1100px);max-width:94vw;
  max-height:92vh;margin:auto;z-index:var(--z-modal)}
dialog.lb::backdrop{background:rgba(6,7,9,.88)}
.vplayer > img{width:100%;max-height:74vh;object-fit:contain;background:#000;display:block}
dialog.lb .vplayer video{max-height:74vh}
/* 操作ボタンは常に右端にまとめる。写真のときはCTAが消えるので、
   個別に margin-left:auto を付けると位置が飛ぶ。まとめて寄せる。 */
dialog.lb .meta .ctrls{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
dialog.lb .meta .navb{display:flex;gap:6px}
dialog.lb .meta .navb button{min-width:42px}
dialog.lb .meta button{margin-left:auto}

/* ── 注記 ─────────────────────────────────────── */
.note{border:1px solid var(--line-2);border-radius:8px;padding:14px 17px;
  background:var(--surface);font-size:13.5px;line-height:1.7;color:var(--body);max-width:76ch}
.note b{color:var(--ink);font-weight:600}

footer.ft{border-top:1px solid var(--line);margin-top:44px;padding:22px var(--pad)}
footer.ft .in{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ── InBody（フィジカル）用 ───────────────────────── */
.figs .sub2{font-size:10.5px;color:var(--muted);margin-top:2px}
.girth{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.girth > div{background:var(--surface);padding:11px 6px;text-align:center;min-width:0}
.girth .n{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1}
.girth .n small{font-size:.5em;font-weight:600;color:var(--muted);margin-left:2px}
.girth .k{font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}

/* 計測値の隣に「誰が測ったか」を出す。数値と出典を離さないための表示 */
.pctrow .nm{line-height:1.25}
.pctrow .nm .by{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:1px}
.pctrow .nm .by:empty{display:none}
.pcthead,.pctrow{grid-template-columns:132px 1fr 66px}
@media (max-width:520px){.pcthead,.pctrow{grid-template-columns:100px 1fr 56px;gap:8px}}

/* 未取得の項目を並べる枠。赤（悪い知らせ）ではなく中立の色にする。
   まだ出していないだけで、問題があるわけではないため。 */
.note.pend{border-color:var(--line-2);background:var(--surface-2)}
.note.pend b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.note.pend ul.bul li::before{background:var(--muted)}

ul.bul{list-style:none;display:flex;flex-direction:column;gap:7px}
ul.bul li{position:relative;padding-left:15px}
ul.bul li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1px;background:var(--red)}

/* ── 印刷 / PDF出力 ───────────────────────────────
   ブラウザの「PDFとして保存」で1枚物の選手票になる。
   画面は黒背景だが、印刷は白地に黒。暗い面をそのまま刷るとインクを浪費し、
   家庭用プリンタでは文字が潰れる。トークンごと入れ替えて反転させる。 */
@media print{
  :root{
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F6F8; --surface-3:#EDF1F5;
    --line:#D8DEE5; --line-2:#B8C2CC; --line-3:#8A94A0;
    --ink:#000000; --body:#1C232B; --muted:#4A545F;
    --red:#C8102E; --d-hi:#C8102E; --d-mid:#A8600A; --d-lo:#2F6690; --d-track:#E3E8ED;
    --ok:#17753F;
  }
  @page{size:letter portrait;margin:11mm 10mm}
  body{background:#fff;font-size:9pt;line-height:1.4;padding:0}
  a{color:inherit;text-decoration:none}

  /* 画面専用。紙では .printhead が同じ役割を果たすので二重に出さない */
  .top,.vplayer,.clips,.gal,dialog.lb,.btn,footer.ft,
  .pf .ph,.pf .id,.legend,.printonly-hide{display:none !important}

  /* 3列は紙では崩れるので1列に流す。枠線の入れ子も外して軽くする */
  .cols,.split,.qgrid,.two{display:block !important}
  .wrap{max-width:none;padding:0}
  .c1,.c2,.c3,.lower{margin-top:0}
  .c3 > * + *{margin-top:7pt}
  /* .sec に break-inside:avoid を掛けると、丸ごと次ページへ送られて
     前のページに大きな空白が残る。避けるのは中の .box 単位にとどめる。 */
  .sec,.lower > .sec,.lower > .split{margin-bottom:8pt}
  .sec > header{padding-bottom:4pt;margin-bottom:6pt}
  .box{break-inside:avoid;border-color:var(--line);border-radius:3pt}
  .box-pad{padding:8pt 10pt}
  .pf{border:none}
  .pf .body{padding:0 0 6pt}
  /* プロフィール表は紙では2段組にする。1段だと1ページ目が半分空く */
  .pf .body .dl{columns:2;column-gap:16pt}
  .pf .body .dl div{break-inside:avoid;-webkit-column-break-inside:avoid}
  .pf .body .dl dt{flex-basis:74pt}

  /* 紙のヘッダー */
  .printhead{display:block !important;border-bottom:2.5pt solid var(--red);
    padding-bottom:6pt;margin-bottom:9pt}
  .printhead .row{display:flex;align-items:flex-start;gap:11pt}
  .printhead .ph{width:64pt;height:64pt;overflow:hidden;border-radius:3pt;flex:none}
  .printhead .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
  .printhead .nm{font-family:var(--disp);font-size:26pt;font-weight:700;
    line-height:.95;letter-spacing:-.01em;color:#000}
  .printhead .cls{font-size:7.5pt;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--red);margin-bottom:2pt}
  .printhead .meta{font-size:8.5pt;color:var(--body);margin-top:3pt}
  .printhead .ab{margin-left:auto;text-align:right;font-size:7.5pt;color:var(--muted);line-height:1.45}
  .printhead .ab b{display:block;font-size:9.5pt;color:#000}

  /* 密度を上げる */
  .keyrow{grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
  .keyrow > div{padding:6pt 2pt}
  .keyrow .n{font-size:15pt}
  .figs > div,.girth > div{padding:6pt 3pt}
  .figs .n,.girth .n{font-size:12pt}
  .figs,.girth,.keyrow{break-inside:avoid}
  .tbl{font-size:8pt}
  .tbl td,.tbl th{padding:3pt 5pt}
  .dl{font-size:8.5pt}
  .dl div{padding:4pt 0}
  .quote{font-size:9pt;max-width:none}
  .pctrow{padding:3.5pt 0}
  .track{height:14pt}
  .note{padding:7pt 9pt;font-size:8pt}

  /* 紙面の区切り。Film と Photos は消えるので、その分を詰める */
  .lower > .sec:first-child{margin-bottom:0}
  h2,.h2,.h3{break-after:avoid}

  .printurl{display:block !important;font-size:7pt;color:var(--muted);
    margin-top:7pt;padding-top:5pt;border-top:1px solid var(--line)}
}
.printhead,.printurl{display:none}

/* スカウティング履歴。同じ選手を複数回見た記録を日付順に並べる。
   .dl と同じ「左に見出し / 右に本文 / 1px罫線で区切る」形にそろえている。
   日付は左固定幅にすると、いつ何が変わったかを縦に追える。 */
.log{font-size:14px}
.logrow{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.logrow:first-child{padding-top:0}
.logrow:last-child{border-bottom:none;padding-bottom:0}
.logrow .when{flex:0 0 128px}
.logrow .when b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.logrow .when .src{display:block;margin-top:3px;line-height:1.45}
.logrow .what{flex:1;min-width:0}
.logrow .what p{color:var(--body);line-height:1.72;max-width:70ch;text-wrap:pretty}
@media (max-width:900px){
  .logrow{display:block}
  .logrow .when{margin-bottom:6px}
}
@media print{
  .logrow{break-inside:avoid}
}

/* 権利表示。全ページの最下部。転載されたときに言えることを残すための固定表示。
   目立たせすぎると本文の邪魔になるので、罫線1本と補助文字色で置く。 */
.rights{max-width:1400px;margin:34px auto 0;padding:18px var(--pad) 0;
  border-top:1px solid var(--line)}
.rights p{font-size:12.5px;line-height:1.7;color:var(--muted);max-width:100ch}
.rights p + p{margin-top:8px}
.rights b{color:var(--body);font-weight:600}
@media print{
  .rights{margin-top:16pt;padding-left:0;padding-right:0;break-inside:avoid}
  .rights p{font-size:8pt}
}

/* ── Safari 対策 ──────────────────────────────────────────
   Safari は button / input に独自の描画（-webkit-appearance:button）を当てるため、
   background・border・font-family の指定が効かず、別物に見える。
   さらに button を display:flex にしても子要素が正しく並ばない既知の不具合があるので、
   ハンバーガーは flex と gap を使わない組み方に変えてある（a.css 側）。
   実際に「Safariでハンバーガーが出ない」という報告を受けて入れた（2026-08-06）。 */
button, input, select, textarea{
  -webkit-appearance:none;
  appearance:none;
  font:inherit;
  color:inherit;
}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}