/* 共通の見た目: ヘッダー・タブ・題名の星・押した感。会員画面(index.html)と設定/管理/ログイン(Worker が描く)で共用 */
  header { position:sticky; top:0; z-index:5; background:rgba(5,8,12,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:12px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  header h1 { font-size:17px; font-weight:900; margin:0; letter-spacing:.01em; background:linear-gradient(90deg,var(--ink) 0%,var(--accent2) 60%,var(--accent) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  header nav a { margin-right:6px; padding:6px 14px; border-radius:60px; color:var(--sub); text-decoration:none; cursor:pointer; font-size:13px; border:1px solid transparent; }
  header nav a:hover { color:var(--ink); border-color:var(--line); }
  header nav a.on { color:var(--on-accent); background:var(--accent); font-weight:700; }
  header .hint { margin-left:auto; }
  .mono { font-family:ui-monospace,Menlo,monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
  @keyframes blink { 50% { opacity:.2; } }
  /* 押した感(本棚アプリと同じ): 触れた瞬間に沈んで暗くなり、離すとバネで一度ふくらんでから戻る。:active は iOS で効かないことがあるので JS で .pressed を付け外し */
  button, header nav a, .runs tr, .pager button, select, input { transition: transform .42s cubic-bezier(.3,2.4,.45,1), filter .25s ease-out, background .15s, border-color .15s; }
  select.pressed, input.pressed { transform: scale(.96) !important; }
  .pressed { transform: scale(.9) !important; filter: brightness(.75); transition: transform .06s ease-out, filter .06s ease-out !important; }
  .runs tr.pressed { transform: scale(.99) !important; }
  @media (prefers-reduced-motion: reduce) { .pressed { transform: none !important; } }
  /* 題名の星(本棚アプリの更新ボタンの星と同じ): 金の四芒星。動きはJS駆動(ランダムまばたき＋プチュン)。視差を減らす設定では静止 */
  .titleWrap { position:relative; display:inline-block; }
  .newStar { position:absolute; top:-3px; right:-12px; width:16px; height:16px; color:#e8c06a; pointer-events:none; transform-origin:center; opacity:0; }
  .starBeam { position:absolute; top:3px; right:-46px; width:84px; height:3px; border-radius:60px; background:linear-gradient(90deg,transparent,#f5dfa8 40%,#fff 50%,#f5dfa8 60%,transparent); pointer-events:none; opacity:0; transform-origin:center; }

/* ヘッダーはページごとの CSS に負けないよう、ここで寸法と色を固定する(2026-09-26 たき指摘: ページ間で上下の間隔・文字色が揺れた) */
header { min-height:64px; box-sizing:border-box; }
header .mono { margin:0 0 2px; line-height:1.2; }
header h1 { margin:0; line-height:1.3; }
header nav a, header nav a:visited { color:var(--sub); text-decoration:none; font-size:13px; }
header nav a:hover { color:var(--ink); }
header nav a.on, header nav a.on:visited { color:var(--on-accent); }
header .hint { font-size:12px; color:var(--sub); line-height:1.4; }
header { font-size:14px; }                       /* 解説ページは本文 15px なので、ヘッダーだけ揃える */
header .titleWrap { vertical-align:top; }
@media (max-width:700px) { header .hint { display:none; } }  /* 狭い画面では右端の一言を全ページで隠す(高さを揃える) */
header, header nav a { line-height:1.5; }  /* 解説ページの本文 line-height 1.8 がタブ列の高さを変えないように */
/* 金継ぎ 2026-09-26: タブの語は折らない／ヘッダーの文字段を 12・13 の2段に */
header nav a { white-space:nowrap; }
header .mono { font-size:12px; }