/* ============================================================
   server-type-quiz 共通CSS
   移植元: docs/superpowers/specs/approved-mock-v9.html の <style> ブロック（承認済みデザイン）
   Step 1: 実装向けの構造変更（9項目）を適用 / Step 2: 診断・タイプ詳細ページ用コンポーネントを追加
   ============================================================ */

/* ===== デザイントークン（旧 .ps-wall から移動） ===== */
:root {
  --wall: oklch(93% 0.018 250);
  --wall-dot: oklch(87% 0.025 255);
  --col: oklch(45% 0.155 262);
  --col-deep: oklch(38% 0.14 262);
  --col-lite: oklch(52% 0.12 262); /* 縞・罫線用の「--colより一段明るい青」 */
  --lemon: oklch(90% 0.145 100);
  --white: oklch(98.5% 0.004 262);
  --ink: oklch(22% 0.03 262);
  --card-cyan: oklch(85% 0.065 220);
  --pink: oklch(72% 0.14 20);
  --green: oklch(70% 0.13 150);
  /* タイプ別の色は data/types.json が唯一の正（各要素へ inline の --tcolor で注入される） */
  --fr: 'Zen Maru Gothic', sans-serif;
  --fb: 'Zen Kaku Gothic New', sans-serif;
  --fu: 'DotGothic16', monospace;
}

/* ===== 起動スプラッシュ ===== */
.ps-splash {
  position: fixed; inset: 0; z-index: 60;
  background: oklch(98.5% 0.004 262);
  display: none; align-items: center; justify-content: center;
  /* pointer-events は切らない。見えている間のタップを受け止めて、下の見えないボタンに届けないため。
     タップするとその場で消える（splash.js） */
  animation: psSplashOut 1.7s ease forwards;
}
.ps-splash.show { display: flex; }
.ps-splash img {
  width: min(250px, 55vw); height: auto;
  animation: psSplashLogo 1.7s ease forwards;
}
@keyframes psSplashOut {
  0%, 74% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes psSplashLogo {
  0% { opacity: 0; transform: scale(0.94); }
  18%, 64% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-splash, .ps-splash.show { display: none; }
}

/* ===== 壁紙（旧 .ps-wall。壁紙は body が持つ） ===== */
body {
  margin: 0;
  background-color: var(--wall);
  background-image:
    radial-gradient(var(--wall-dot) 2px, transparent 2px),
    radial-gradient(var(--wall-dot) 1.2px, transparent 1.2px);
  background-size: 46px 46px, 23px 23px;
  background-position: 0 0, 11px 11px;
  padding: 34px 12px;
  font-family: var(--fb);
  font-weight: 500;
  line-break: strict; /* 小さい「ッ」「ョ」や長音「ー」を行頭に置かない（どのブラウザでも効く） */
}

/* 日本語を文節単位で自然に折り返す（Chrome系で有効。未対応ブラウザは従来の改行のまま）。
   body全体には当てない: 図鑑名やランキング行のような幅の狭いUIラベルに効くと
   「折り返せない最小幅」が広がってレイアウトがあふれるため、文章系にだけ適用する */
.tp-text, .tp-status-item p, .tp-role-fit li, .tp-aruaru li, .tp-voice-bubble, .tp-tagline,
.rank-lede, .ps-lede, .ps-about p, .ps-zukan p.z, .ps-recruit p,
.tp-compat-txt small,
.qz-q, .qz-opt, .qz-note,
.st-poster p, .st-tagline, .st-note, .st-type-top, .qz-staff p {
  word-break: auto-phrase;
}
/* 結果カード内（.desc/.bubble）は箱が狭く、文節改行だと行末が空きすぎて
   カードが縦に間延びするため対象外（従来の詰めた折り返しのまま） */

.ps {
  max-width: 540px;
  margin: 0 auto;
  background: var(--col);
  color: var(--white);
  overflow: hidden;
  border: 3px solid var(--ink);
  box-shadow: 0 18px 50px -22px oklch(35% 0.1 262 / 0.55);
}
*, *::before, *::after { box-sizing: border-box; }

/* ===== hero ===== */
.ps-hero { position: relative; padding: 58px 22px 42px; text-align: center; }
.ps-header {
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border-bottom: 3px solid var(--ink);
  padding: 13px 18px;
}
.ps-header .lg { display: block; width: 92px; }
.ps-header .lg img { display: block; width: 92px; height: auto; }
/* ヒーローの散乱メダル。サイズは --medal-size（.ps-zmedal共通トークン）で上書きし、特異性競争を避ける */
.ps-hero .ps-medal { --medal-size: clamp(34px, 10vw, 54px); position: absolute; }
.ps-title {
  font-family: var(--fr); font-weight: 900;
  line-height: 1.14; margin: 0 0 16px;
  letter-spacing: 0.03em;
  text-shadow: 3px 3px 0 var(--ink); /* ポスター調のベタ影（ボタンの落ち影と同じ流儀） */
}
.ps-title .t1 { display: block; font-size: clamp(44px, 10vw, 58px); color: var(--white); }
.ps-title .t2 { display: block; font-size: clamp(44px, 10vw, 58px); color: var(--lemon); }
.ps-lede {
  font-family: var(--fr); font-weight: 700;
  font-size: 15px; letter-spacing: 0.02em;
  margin: 0 auto 24px; line-height: 1.95;
}
.ps-heroChar {
  width: 118px; height: 118px; margin: 0 auto 4px;
  image-rendering: pixelated;
}
.ps-heroChar.px-fallback {
  background:
    linear-gradient(var(--green), var(--green)) 22% 3%/56% 8% no-repeat,
    linear-gradient(var(--white), var(--white)) 12% 11%/76% 56% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 24% 26%/13% 13% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 60% 26%/13% 13% no-repeat,
    linear-gradient(var(--pink), var(--pink)) 38% 48%/24% 7% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 30% 72%/40% 6% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 30% 84%/16% 12% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 54% 84%/16% 12% no-repeat;
}
.ps-heroChar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.ps-cta {
  display: inline-block;
  font-family: var(--fr); font-weight: 900; font-size: 21px;
  color: var(--ink); background: var(--lemon);
  border: 3px solid var(--ink);
  padding: 15px 48px;
  box-shadow: 0 6px 0 var(--ink);
  letter-spacing: 0.08em;
  text-decoration: none; cursor: pointer; border-radius: 0;
  /* 2行になるときは行の長さをそろえる（最後の1文字だけが次の行に落ちないように） */
  text-wrap: balance;
}
button.ps-cta { font: inherit; }
.ps-meta { margin: 22px 0 0; font-family: var(--fu); font-size: 12.5px; letter-spacing: 0.16em; opacity: 0.85; }

/* ===== about ===== */
.ps-about { padding: 38px 26px 42px; text-align: center; background: var(--col-deep); }
.ps-h2 {
  font-family: var(--fr); font-weight: 900; font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--lemon); margin: 0 0 16px;
}
/* ページの大見出し（図鑑・ランキング）: 中央揃え+トップタイトルと同じベタ影 */
.ps-h2.pop { text-align: center; text-shadow: 2px 2px 0 var(--ink); }
/* 見出しのレモン色の部分（「全8タイプ」）は途中で折らない（375px幅で「全8タ／イプ」と割れていた） */
.ps-h2.pop span { display: inline-block; }
/* 「◯◯サーバーのあるある」: スマホ・タブレットでは全タイプ同じ 20px（タイプ名の長さで大きさを変えない）。長い名前は「◯◯サーバーの／あるある」の2行 */
@media (max-width: 959px) { .tp-aruaru-h { font-size: 20px; } }
.ps-about p { font-size: 13px; line-height: 2.05; margin: 0 auto 22px; }
.ps-about p.ps-note { font-size: 11.5px; line-height: 1.8; margin-top: -8px; } /* 娯楽であること・選考に使わないことの注記 */
.ps-stats { display: flex; justify-content: center; gap: 14px; }
/* 丸は縮めない（flex の既定では幅だけ縮んで楕円になる）。かわりに、狭い画面では3つと間（14px×2）が
   本文の幅に収まる大きさまで、縦横を同じだけ小さくする。112px = 本文の外側（body の左右12px×2、
   .ps の枠3px×2、.ps-about の左右26px×2）+ 間28px + 余り2px。320px幅で直径 約69px */
.ps-stat {
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 50%;
  --stat-size: min(90px, calc((100vw - 112px) / 3));
  width: var(--stat-size); height: var(--stat-size); flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
}
.ps-stat .n { font-family: var(--fr); font-weight: 900; font-size: 25px; line-height: 1.15; letter-spacing: 0.01em; }
.ps-stat .l { font-family: var(--fb); font-size: 10px; font-weight: 700; color: oklch(45% 0.02 262); letter-spacing: 0.05em; }

/* ===== 図鑑 ===== */
.ps-zukan { padding: 40px 20px 44px; text-align: center; }
.ps-zukan p.z { font-size: 12.5px; margin: 0 0 24px; opacity: 0.95; letter-spacing: 0.02em; line-height: 2; }
/* minmax(0,1fr): 長いタイプ名の最小幅でセルが広がって列がはみ出すのを防ぐ */
.ps-zgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 8px; max-width: 430px; margin: 0 auto; }
.ps-zcell { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: inherit; }
.ps-zmedal {
  /* メダルの大きさは文脈ごとに --medal-size で上書きする（ヒーロー・結果カード・ランキング等） */
  width: var(--medal-size, 62px); height: var(--medal-size, 62px); border-radius: 50%;
  border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
}
/* 10px+字間0.01em: 最長部品「バックアップ」(6文字)が375pxのセル幅(約72px)に1行で収まるサイズ。
   min-height 2行分: 1行の名前と2行の名前が混在しても全セルの高さが揃い、グリッドがガタつかない */
/* text-align は継承に任せない: 図鑑(中央揃えセクション)でもタイプページの「ほかのタイプを見る」
   (左揃えセクション)でも、折り返した2行目がメダルの中心に揃うよう自前で中央揃えを持つ */
.ps-zname { font-family: var(--fb); font-weight: 700; font-size: 10px; letter-spacing: 0.01em; line-height: 1.4; min-height: 2.8em; text-align: center; }

/* ===== result sample ===== */
.ps-result { padding: 40px 20px 46px; background: var(--col-deep); text-align: center; }
.ps-card {
  position: relative;
  background: var(--card-cyan); color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  padding: 18px 18px 16px;
  text-align: left;
  max-width: 440px; margin: 0 auto;
}
.ps-card .brand { font-family: var(--fu); font-size: 10px; letter-spacing: 0.12em; color: oklch(35% 0.05 262); margin: 0 0 10px; }
.ps-card .inner { display: flex; gap: 14px; }
.ps-card .txt { flex: 1.2; min-width: 0; }
.ps-card .aka { font-family: var(--fr); font-weight: 900; font-size: 15px; letter-spacing: 0.03em; color: oklch(45% 0.12 262); margin: 0 0 2px; }
/* コードは異名と同じ色のまま（opacity で薄めると、見本の水色の地でも 3.37:1 に落ちる） */
.ps-card .aka .code { font-family: var(--fu); font-weight: 400; font-size: 11px; letter-spacing: 0.14em; margin-left: 8px; }
/* 結果画面のカードは地がタイプ色（card.js が --card-cyan をタイプ色にし、data-dark を付ける）。
   ここでは異名・コード・ブランド行も、本文と同じ文字色（ink か白）にする。どちらを使うかは DARK_TYPES で決まり、
   選んだ色がタイプ色に対して 4.5:1 以上あることをビルドが確かめている。固定の青のままだと、メールや AI の地に溶けて読めない。
   トップの見本カードには data-dark が無い。地は既定の水色のままなので、青の異名（4.86:1）を残す */
.ps-card[data-dark] .brand, .ps-card[data-dark] .aka { color: inherit; }
.ps-card .nm { font-family: var(--fr); font-weight: 900; font-size: 31px; letter-spacing: 0.02em; line-height: 1.25; margin: 0 0 10px; }
.ps-card .desc {
  background: var(--ink); color: var(--white);
  font-family: var(--fb); font-weight: 500;
  font-size: 11.5px; line-height: 1.95; padding: 11px 13px; margin: 0;
}
.ps-card .chr { flex: 0.8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding-top:16px; }
.ps-card .bubble {
  font-family: var(--fr); font-weight: 700; font-size: 11px;
  background: var(--white); border: 2px solid var(--ink); border-radius: 10px;
  padding: 5px 9px; margin: 0;
}
/* 狭い画面では吹き出しと横に並ぶ。メダルは縮めず（縮むと楕円になる）、吹き出しのほうが折り返して幅を譲る */
.result-medal { --medal-size: 92px; flex-shrink: 0; }
.ps-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
@media (max-width: 479px) {
  .ps-card .inner { flex-direction: column; gap: 12px; }
  .ps-card .chr { flex-direction: row-reverse; justify-content: center; align-items: center; gap: 10px; padding-top: 0; }
  .ps-card .foot { flex-wrap: wrap; gap: 4px 12px; }
}
.ps-card .compat { font-family: var(--fb); font-weight: 700; font-size: 11px; letter-spacing: 0.02em; } /* 中は文字だけ。flex にすると .nb の切れ目で折り返さなくなる */
.ps-card .rar { font-family: var(--fu); font-size: 11px; letter-spacing: 0.08em; }
.ps-marquee { overflow: hidden; margin-top: 12px; }
/* spanはHTMLに1つだけ書き、marquee.js が「前半=後半」を保ったまま画面幅の2倍以上まで複製してから
   .on を付ける。-50%移動＝ちょうど前半ぶんなので、どの画面幅でも継ぎ目なくループする（JSなしなら静止した帯） */
.ps-marquee .track { display: flex; width: max-content; }
.ps-marquee span {
  flex-shrink: 0; white-space: pre; /* nowrap だと各コピーの最後の空白が消え、継ぎ目で「・Web」と詰まる */
  font-family: var(--fr); font-weight: 900; font-size: 15px;
  letter-spacing: 0.04em;
  color: oklch(60% 0.12 262); opacity: 0.75;
}
@media (prefers-reduced-motion: no-preference) {
  .ps-marquee .track.on { animation: psmq 40s linear infinite; }
  @keyframes psmq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}

/* ===== recruit + footer ===== */
.ps-recruit { padding: 34px 26px 38px; text-align: center; }
.ps-recruit p { font-family: var(--fr); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; margin: 0 0 18px; line-height: 2.05; }
.ps-recruit a {
  display: inline-block; font-family: var(--fr); font-weight: 900; font-size: 14.5px;
  letter-spacing: 0.06em;
  color: var(--ink); background: var(--white);
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  padding: 11px 28px;
}
.ps-foot {
  background: var(--white); color: oklch(45% 0.02 262);
  font-size: 10.5px; letter-spacing: 0.04em; text-align: center; padding: 16px;
}

a { color: inherit; }
/* フォーカスリングの色は、リングが乗る地で変える。青い地ではレモン（--col の上で 5.69:1、--col-deep の上で 7.67:1）。
   白い地ではレモンだと 1.28:1 でほぼ見えないので、ink（16.54:1）にする。白い地は、ヘッダー、メニューと、
   社員の分布の白い箱（/member/ の部署の箱・タイプページの箱・結果画面の一言）*/
:focus-visible { outline: 3px solid var(--focus-ring, var(--lemon)); outline-offset: 2px; }
.ps-header, .site-nav, .st-group, .st-type, .qz-staff { --focus-ring: var(--ink); }

/* 途中で折り返さない部品（タイプ名の部品＝typeNameHtml、文節＝phraseHtml・bodyHtml、手書きのページの句読点の切れ目） */
.nb { display: inline-block; }
a .nb { text-decoration: inherit; } /* リンクの下線は inline-block の .nb に届かないので、.nb にも引く */
/* 短い文を PC と同じ行で見せる（js/fit.js）。.fit-measure は1行に並べた幅を測る間だけ付ける。
   .is-fit は文字を縮めたもの（大きさは fit.js が style の --fit-size に置く。!important で、より詳しいセレクタで決めた大きさより優先する）、.is-fit-line はそのうち1行に収めたもの、
   .is-fit-join は問題文のスマホ向けの改行を PC と同じく消したもの */
.fit-measure { white-space: nowrap; width: max-content !important; max-width: none !important; }
.is-fit { font-size: var(--fit-size) !important; }
.is-fit-line { white-space: nowrap; }
.is-fit-join br { display: none; }
/* スキップリンク: キーボードで最初に Tab を押したときだけ左上に出る（本文 main#main へ飛ぶ） */
.skip { position: absolute; left: 8px; top: -80px; z-index: 1000; background: var(--ink); color: var(--white); padding: 10px 14px; font: 700 13px/1.4 var(--fb); text-decoration: none; border: 2px solid var(--white); }
.skip:focus { top: 8px; outline: 3px solid var(--lemon); outline-offset: 2px; }

/* ===== キャラ画像とフォールバック ===== */
.ps-zmedal { background: var(--tcolor, var(--col)); overflow: hidden; }
.ps-zmedal img, .tp-medal img, .tp-compat-medal img {
  width: 78%; height: 78%; object-fit: contain; image-rendering: pixelated;
}
.px-fallback::after {
  content: ""; display: block; width: 62%; height: 62%; margin: auto;
  image-rendering: pixelated;
  background:
    linear-gradient(var(--ink), var(--ink)) 12% 22%/76% 6% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 12% 38%/76% 6% no-repeat,
    linear-gradient(var(--white), var(--white)) 22% 56%/14% 14% no-repeat,
    linear-gradient(var(--white), var(--white)) 62% 56%/14% 14% no-repeat,
    oklch(96% 0.01 262 / 0.9);
}
.px-fallback { display: flex; align-items: center; justify-content: center; }

/* ===== 診断画面（qz-*） ===== */
.qz-progress { display: flex; align-items: center; gap: 12px; padding: 18px 22px 0; }
.qz-progress .bar {
  flex: 1; height: 12px;
  background: repeating-linear-gradient(90deg, var(--col-lite) 0 9px, var(--col) 9px 13px);
}
.qz-progress .bar > i {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, var(--lemon) 0 9px, var(--col) 9px 13px);
  transition: width 0.25s ease;
}
.qz-progress .num { font-family: var(--fu); font-size: 13px; letter-spacing: 0.1em; min-width: calc(6ch + 0.6em); text-align: right; } /* 「Q10/20」の6字分。Q9→Q10 でバーが縮まない */
.qz-screen { padding: 30px 22px 44px; text-align: center; }
.qz-qnum { font-family: var(--fu); font-size: 13px; color: var(--lemon); letter-spacing: 0.15em; margin: 0 0 12px; }
/* text-wrap:balance は auto-phrase と組み合わさると単語の途中で割る折り方を選ぶことがあるため使わない */
.qz-q { font-family: var(--fr); font-weight: 900; font-size: 20px; letter-spacing: 0.02em; line-height: 1.8; margin: 0 0 26px; }
/* スマホ・タブレットでは、番号と問題文のかたまり（.qz-head）の高さを、問題文が2行のときの高さで決めておき、中身を下に寄せる
   （番号の1行 13px × 1.5 ＋ 12px ＋ 問題文2行 20px × 1.8 × 2 ＋ 26px）。1行に収まる問題（js/fit.js が <br> を消す）と2行の問題が交互に来ても、
   答えのボタンの位置が動かず（続けてタップしたとき、となりの答えを押さない）、番号と問題文・問題文と答えの間もいつも同じ。
   1行の問題で余った高さは番号の上にまわる。縮めた文字に合わせて低くならないよう px で決める。PC は全問1行なのでいらない */
@media (max-width: 959px) {
  .qz-head { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(19.5px + 12px + 72px + 26px); }
  .qz-qnum { line-height: 1.5; }
}
.qz-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font: 700 14px/1.7 var(--fb); letter-spacing: 0.02em;
  color: var(--ink); background: var(--white);
  border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  padding: 15px 16px; margin-bottom: 14px; cursor: pointer;
  touch-action: manipulation; /* ダブルタップでの拡大を待たせず、続けてのタップを拡大として扱わない */
}
/* レモンの地は hover できる端末だけ。タッチ端末では、タップした位置に hover が残ることがある（iOS）。
   描き替えた次の問題の同じ位置のボタンが、もう選んだように見えないようにする。押した手応えは :active で出る */
@media (hover: hover) {
  .qz-opt:hover { background: var(--lemon); }
}
.qz-opt:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
/* 4段階の答え: バッジなしで文字を中央に置く */
.qz-opt.qz-likert { justify-content: center; text-align: center; }
/* 「まえの質問にもどる」で戻ったとき、前に選んだ答え（quiz.js が is-selected と aria-pressed を付ける） */
.qz-opt.is-selected { background: var(--lemon); }
.qz-opt.is-selected span[aria-hidden] { margin-right: 6px; }
.qz-back { background: none; border: none; font: 700 12px var(--fb); color: var(--white); opacity: 0.8; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; margin-top: 8px; touch-action: manipulation; }
.qz-note { font-size: 11.5px; opacity: 0.8; margin: 14px 0 0; }

/* ===== 結果画面（qz-result内で ps-card を再利用） ===== */
/* おまけのペース（タイプは決めない軸）: カードの直下に1行で添える */
.qz-pace { margin: 18px auto 0; max-width: 400px; font: 700 15px/1.6 var(--fr); letter-spacing: 0.02em; }
.qz-pace .tag { display: inline-block; font: 400 max(11px, 0.7334em)/1 var(--fu); letter-spacing: 0.1em; background: var(--lemon); color: var(--ink); padding: 4px 7px 3px; margin-right: 8px; vertical-align: 2px; }
.qz-pace b { color: var(--lemon); font-size: 1.2em; margin: 0 2px; }
.qz-pace small { display: block; font: 500 max(11px, 0.8em)/1.6 var(--fb); opacity: 0.85; margin-top: 2px; }
/* 中の大きさは em（15px のときに 11px・18px・12px）。js/fit.js が文字を縮めたとき、中も同じ割合で縮むように。
   ただし「おまけ」と添え書きは 11px より小さくしない（ほかの注記と同じ下限） */
.qz-axes { text-align: left; max-width: 400px; margin: 0 auto 24px; }
.qz-axis { margin-bottom: 16px; }
.qz-axis .lbl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; font: 700 12px var(--fb); margin-bottom: 5px; } /* 3列にして、軸の名前を左右のラベルの長さによらず真ん中に置く（勝った側に「60%」が付いても揺れない） */
.qz-axis .lbl > span:last-child { text-align: right; }
.qz-axis .lbl .win { color: var(--lemon); }
/* 軸名は白を青に寄せた控えめな色（--col の上で 5.31:1）。opacity で薄めると、中の「ほぼ五分五分」（レモン）まで
   一緒に薄まって 3.56:1 に落ちるため、色で控えめにする */
.qz-axis .lbl .axname { text-align: center; font-family: var(--fu); font-weight: 400; font-size: 10.5px; letter-spacing: 0.1em; color: oklch(88% 0.025 262); }
/* 各極の英字バッジ（タイプコードの構成文字）。勝ち側はレモンで「コードに入った文字」を示す */
.qz-axis .ax-ltr {
  font-family: var(--fu); font-style: normal; font-size: 10.5px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: var(--col-lite); color: var(--white);
  vertical-align: 1px;
}
.qz-axis .lbl > span:first-child .ax-ltr { margin-right: 6px; }
.qz-axis .lbl > span:last-child .ax-ltr { margin-left: 6px; }
.qz-axis .win .ax-ltr { background: var(--lemon); color: var(--ink); }
.qz-axis .track {
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--col-lite) 0 9px, var(--col-deep) 9px 13px);
  position: relative;
}
.qz-axis .track > i {
  position: absolute; top: 0; height: 100%;
  background: repeating-linear-gradient(90deg, var(--lemon) 0 9px, var(--col-deep) 9px 13px);
}
/* 僅差軸の注記と「もう1つの顔」カード */
.qz-axis .axname .tie { display: block; font-size: 9px; font-weight: 400; color: var(--lemon); letter-spacing: 0.06em; margin-top: 1px; }
.qz-second { max-width: 400px; margin: 26px auto 0; }
.qz-second-lede { text-align: center; font-size: 12.5px; line-height: 1.9; margin: 0 0 4px; }
.qz-second-lede b { color: var(--lemon); }
.qz-second .tp-compat { margin: 8px 0 0; }
.tp-compat-txt .second { color: oklch(84% 0.08 220); } /* --col の上で 4.75:1 */
.qz-actions { display: flex; flex-direction: column; gap: 12px; max-width: 340px; margin: 24px auto 0; }
.qz-actions .sub { font: 700 12.5px var(--fb); }
/* 「エントリーする」の上の一言（結果のタイプ名入り）と下の注記。どちらも2行で、PC も同じ位置で改行する */
.qz-entry-lead { margin: 0; font: 700 14px/1.8 var(--fr); letter-spacing: 0.02em; }
.qz-entry-note { margin: 0; font: 500 11.5px/1.7 var(--fb); opacity: 0.85; }
.qz-actions .sub a { color: var(--white); }

/* ===== タイプ詳細ページ（tp-*） ===== */
.tp-hero { background: var(--tcolor); border-bottom: 3px solid var(--ink); text-align: center; padding: 34px 22px 30px; color: var(--ink); }
.tp-hero.dark { color: var(--white); }
.tp-hero.dark .tp-quote { color: var(--ink); } /* 吹き出しは白地なのでinkのまま */
.tp-code { font-family: var(--fu); font-size: 12px; letter-spacing: 0.12em; margin: 0 0 16px; }
.tp-medal {
  width: 130px; height: 130px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--white); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tp-medal img { width: 76%; height: 76%; object-fit: contain; image-rendering: pixelated; }
.tp-alias { font-family: var(--fr); font-weight: 900; font-size: 16px; margin: 0 0 2px; }
.tp-name { font-family: var(--fr); font-weight: 900; font-size: 38px; letter-spacing: 0.02em; line-height: 1.3; margin: 0 0 10px; }
.tp-quote { font-family: var(--fr); font-weight: 700; font-size: 13px; background: var(--white); border: 2px solid var(--ink); border-radius: 12px; display: inline-block; padding: 6px 14px; margin: 0 0 10px; }
.tp-tagline { font-size: 13px; font-weight: 700; margin: 0; }
.tp-body { padding: 34px 26px 38px; }
.tp-body.alt { background: var(--col-deep); }
/* 「ほかのタイプを見る」: 左右余白を図鑑ページ(.ps-zukan の 20px)に揃える。
   26px のままだとセル幅が 3px 狭くなり、「バックアップ」等の折り返し位置が図鑑と変わってしまう */
.tp-body.tp-others { padding-left: 20px; padding-right: 20px; }
.tp-text { font-size: 14.5px; line-height: 2.05; margin: 0; }
.tp-text + .tp-text { margin-top: 14px; } /* detailの段落間隔 */
.tp-status { display: grid; gap: 12px; margin-top: 20px; }
/* 4枚は白い箱（黒縁＋ベタ影）。文字はすべて ink にし、色分けは見出しの下半分に引くマーカーで出す。
   緑・黄・赤・水色をそのまま白の上の文字色にすると 4.5:1 に届かず、届くまで濃くすると色がくすむため */
.tp-status-item {
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  padding: 14px 16px;
}
.tp-status-item h3 {
  width: fit-content; /* マーカーを見出しの文字の幅だけに引く */
  font-family: var(--fr); font-weight: 900; font-size: 14px;
  margin: 0 0 6px -3px; /* マーカーは左右に 3px はみ出し、文字の頭は本文とそろえる */
  padding: 0 3px;
  color: var(--ink);
  background: linear-gradient(transparent 58%, var(--mark) 58%);
}
.tp-status-item.good h3 { --mark: oklch(83% 0.16 150); } /* 緑 */
.tp-status-item.warn h3 { --mark: var(--lemon); }         /* 黄 */
.tp-status-item.care h3 { --mark: oklch(81% 0.12 22); }   /* 赤 */
.tp-status-item.role h3 { --mark: oklch(83% 0.10 220); }  /* 水色 */
/* チーム内ポジション: 名前を大きく見せ、説明の下に「向いている仕事」「ビヨンドなら」の箇条書き */
.tp-status-item .tp-role { font-family: var(--fr); font-weight: 900; font-size: 18px; line-height: 1.6; margin: 2px 0 4px; }
.tp-role-fit { display: grid; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 2px dashed oklch(82% 0.03 262); }
.tp-role-fit h4 { font-family: var(--fr); font-weight: 900; font-size: 13.5px; color: var(--col); margin: 0 0 4px; }
.tp-role-fit ul { list-style: none; margin: 0; padding: 0; }
.tp-role-fit li { position: relative; padding-left: 20px; font-size: 14.5px; font-weight: 700; line-height: 1.8; }
.tp-role-fit li + li { margin-top: 6px; }
.tp-status-item .tp-role-note { font-size: 12px; line-height: 1.8; margin-top: 14px; } /* 向いている仕事・ビヨンドならは例であることの注記 */
.tp-role-fit li::before { content: "▶"; position: absolute; left: 2px; color: var(--col); font-family: var(--fu); } /* あるあると同じ印を、白の地なので青で */

/* キャラのひとこと吹き出し */
.tp-voice { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.tp-voice .tp-voice-medal { --medal-size: 64px; flex-shrink: 0; }
.tp-voice-bubble {
  position: relative; margin: 0; min-width: 0; /* flex子が縮めず親からあふれるのを防ぐ */
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--fr); font-weight: 700; font-size: 13px; line-height: 1.8;
}
.tp-voice-bubble::before { /* しっぽの枠線 */
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  border: 10px solid transparent; border-left-width: 0; border-right-color: var(--ink);
}
.tp-voice-bubble::after { /* しっぽの白地（枠線の内側に重ねる） */
  content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  border: 9px solid transparent; border-left-width: 0; border-right-color: var(--white);
}
/* 本文(.tp-text)と同じサイズ・行間に揃える(サイズ差があると線の太さまで違って見えるため) */
.tp-status-item p { font-size: 14.5px; line-height: 2.05; margin: 0; }
/* 本文の段落は、最後の行が1〜2文字だけにならないようにする（Chrome 117〜・Safari 26〜。効かないブラウザでは今までどおり） */
.tp-text, .tp-status-item p { text-wrap: pretty; }
.tp-aruaru { list-style: none; margin: 0; padding: 0; text-align: left; max-width: 380px; margin-inline: auto; }
.tp-aruaru li { font-size: 14.5px; font-weight: 700; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--col-lite); position: relative; }
.tp-aruaru li::before { content: "▶"; position: absolute; left: 4px; color: var(--lemon); font-family: var(--fu); }
.tp-compat { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--white); border: 2px solid var(--col-lite); padding: 12px 14px; margin-top: 12px; }
@media (hover: hover) {
  .tp-compat:hover { border-color: var(--lemon); }
}
.tp-compat-medal { width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; background: var(--tcolor); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tp-compat-txt { font-size: 12.5px; line-height: 1.75; }
.tp-compat-txt .best { color: var(--lemon); }
.tp-compat-txt .spark { color: oklch(85% 0.09 20); }
/* タイプページでは前後（ランキング/ほかのタイプ）が深色なので地の青のまま挟み、明暗交互を保つ。
   前後が青のページ（ランキングページ等）では .alt で深色にする */
.tp-cta { text-align: center; padding: 36px 26px 40px; }
.tp-cta.alt { background: var(--col-deep); }
.tp-cta-lead { font-family: var(--fr); font-weight: 900; font-size: 18px; margin: 0 0 18px; }
.tp-share { margin: 18px 0 0; font-size: 12.5px; font-weight: 700; }
.tp-share a { color: var(--white); }
.ps-zcell.is-current .ps-zmedal { outline: 3px solid var(--lemon); outline-offset: 2px; }

/* ===== 希少度ランキング ===== */
.rank-lede { text-align: center; font-size: 12.5px; line-height: 2; margin: 0 0 20px; }
.rank-lede b { color: var(--lemon); }
.rank-note { text-align: center; font-size: 11.5px; line-height: 1.8; margin: -8px 0 20px; } /* 想定出現率は目安、の注記 */
.rank-list { display: flex; flex-direction: column; gap: 9px; max-width: 560px; margin: 0 auto; }
/* レア帯の区切り見出し（ラベル文言は scripts/build-types.mjs の ZONES が正） */
.rank-zone {
  display: flex; align-items: baseline; gap: 10px;
  margin: 14px 0 2px;
}
.rank-zone:first-child { margin-top: 0; }
.rank-zone b { font-family: var(--fr); font-weight: 900; font-size: 15px; color: var(--lemon); letter-spacing: 0.04em; }
.rank-zone span { font-family: var(--fu); font-size: 10.5px; letter-spacing: 0.08em; opacity: 0.8; }
.rank-zone::after { content: ""; flex: 1; height: 2px; background: var(--col-lite); align-self: center; }
.rank-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink);
  padding: 7px 12px;
  text-decoration: none;
}
@media (hover: hover) {
  .rank-row:hover { background: var(--lemon); }
}
/* 今いるページの行は、レモンの地で浮かせて示す。フォーカスリングと同じレモンの枠で示すと、
   その行にフォーカスしても見た目が変わらないため、枠はフォーカス専用に空けておく */
.rank-row.is-current {
  background: var(--lemon);
  box-shadow: 0 4px 0 var(--ink);
  --track: oklch(22% 0.03 262 / 0.14); /* バーの空き目盛り。白い地用の薄いグレーはレモンの上で消えるため */
}
.rank-no { font-family: var(--fu); font-size: 15px; width: 24px; text-align: center; flex-shrink: 0; }
.rank-row .rank-medal { --medal-size: 34px; border-width: 2px; box-shadow: none; flex-shrink: 0; }
/* 狭い画面では、名前を2行まで折り返して全部見せる。折り返してよいのは「バックアップ／サーバー」の
   部品の切れ目（typeNameHtml の .nb の間）だけ。keep-all で部品の中では折らないので、
   .nb が無い名前は1行のまま収まらなければ「…」で切る（単語の途中で折るよりよい） */
.rank-name { font-family: var(--fb); font-weight: 700; font-size: 11.5px; letter-spacing: 0.01em; flex: 1; min-width: 0; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.rank-bar { display: none; --seg: 7px; --pitch: 10px; } /* 狭い画面ではバーを省略して名前を優先。目盛りピッチは前景・背景で共有 */
.rank-bar i {
  position: absolute; left: 0; top: 0; height: 100%; display: block;
  background: repeating-linear-gradient(90deg, var(--tcolor) 0 var(--seg), transparent var(--seg) var(--pitch));
  box-shadow: inset 0 0 0 1px oklch(75% 0.015 262); /* 明色タイプ（キャッシュ等）でも白背景上で見えるように */
}
.rank-pct { font-family: var(--fu); font-size: 13px; width: 52px; text-align: right; flex-shrink: 0; } /* 「12.4%」の5文字が収まる幅 */
@media (min-width: 600px) {
  .rank-name { flex: 0 0 auto; width: 130px; white-space: nowrap; }
  .rank-bar {
    display: block; flex: 1; height: 10px; position: relative;
    background: repeating-linear-gradient(90deg, var(--track, oklch(90% 0.012 262)) 0 var(--seg), transparent var(--seg) var(--pitch));
  }
}

/* ===== 社員のサーバー分布（/member/・タイプページの箱・結果画面の一言・トップのリンク） ===== */
/* 白い箱はタイプページの4枚（.tp-status-item）と同じ黒縁＋ベタ影。数字はドット文字 */
.st-poster {
  background: var(--lemon); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  text-align: center; padding: 14px 16px 16px; margin: 0 auto 30px; max-width: 560px;
}
.st-poster p { margin: 0; }
.st-poster-lead, .st-poster-sub { font: 700 13.5px/1.7 var(--fb); }
.st-poster-big { font: 900 clamp(30px, 10vw, 40px)/1.2 var(--fr); letter-spacing: 0.02em; margin: 2px 0 4px; }
.st-groups { display: grid; gap: 14px; max-width: 560px; margin: 0 auto; }
.st-group {
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  padding: 14px 16px 16px;
}
.st-total { max-width: 560px; margin: 0 auto 30px; box-sizing: border-box; }
.st-group h3 { font: 900 16px/1.5 var(--fr); margin: 0 0 8px; }
.st-bar { display: flex; height: 18px; border: 2px solid var(--ink); background: var(--white); overflow: hidden; }
.st-bar i { display: block; height: 100%; }
.st-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; padding: 0; font-size: 11.5px; font-weight: 700; }
.st-legend li::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px;
  border: 1px solid var(--ink); background: var(--tcolor);
}
.st-tagline { margin: 10px 0 0; font: 900 13.5px/1.7 var(--fr); }
/* 折り返しても、マーカーは文字のある行の分だけ（箱の端まで伸びない） */
.st-mark {
  padding: 0 3px; margin-left: -3px;
  background: linear-gradient(transparent 58%, var(--lemon) 58%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* 「◯型が◯%：」のあとの句をまとめた .nb（inline-block）が狭い画面で中で折り返すと、マーカーがその塊の最後の行に1本だけ、
   箱の端まで引かれる。中に .nb がある一言では、いちばん内側の句ごとに引く（:has が使えないブラウザは今までどおり） */
@supports selector(:has(a)) {
  .st-mark:has(.nb .nb) { background: none; }
  .st-mark:has(.nb .nb) .nb:not(:has(.nb)) { background: linear-gradient(transparent 58%, var(--lemon) 58%); }
}
.st-tops { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; padding: 0; text-align: center; }
.st-top { display: block; color: inherit; text-decoration: none; font-size: 11.5px; font-weight: 700; line-height: 1.4; }
.st-medal { --medal-size: 52px; margin: 0 auto 4px; }
.st-tname { display: block; min-height: 2.8em; } /* 名前が2行になっても、下の % の高さがそろう */
.st-top b { display: block; font: 400 15px/1.4 var(--fu); }
.st-note { font-size: 11.5px; line-height: 1.8; margin: 20px auto 0; max-width: 560px; }
.st-more, .qz-staff a { display: inline-block; margin-top: 6px; font: 900 13px/1.6 var(--fr); color: var(--col); }
/* タイプページの「ビヨンドの社員では？」 */
.st-type {
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  padding: 14px 16px; max-width: 560px; margin: 0 auto 22px; box-sizing: border-box;
}
.st-type h3 { font: 900 14px var(--fr); margin: 0 0 8px; }
.st-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; }
.st-cmp p { margin: 0; border: 2px solid var(--ink); padding: 8px 4px; }
.st-cmp p.real { background: var(--lemon); }
.st-cmp small { display: block; font-size: 11.5px; font-weight: 700; }
.st-cmp b { font: 400 24px/1.3 var(--fu); }
.st-type-top { font-size: 13.5px; line-height: 1.8; margin: 10px 0 0; }
/* 結果画面の一言（絵も色の帯も入れない。ほかの白い箱と同じ黒縁） */
.qz-staff {
  max-width: 400px; margin: 18px auto 0; box-sizing: border-box; text-align: left;
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  padding: 12px 14px;
}
.qz-staff p { margin: 0; font: 700 13.5px/1.8 var(--fb); }
.qz-staff b { font-family: var(--fr); font-weight: 900; background: linear-gradient(transparent 58%, var(--lemon) 58%); }
/* トップの採用の箱の中のリンク（.ps-recruit a のボタンの見た目を打ち消す） */
.ps-recruit .ps-recruit-staff { font-size: 13px; margin: -6px 0 18px; }
.ps-recruit .ps-recruit-staff a {
  display: inline-block; padding: 0; border: 0; box-shadow: none; background: none;
  color: var(--lemon); font-size: inherit; letter-spacing: 0.02em; text-decoration: underline; text-underline-offset: 3px;
}

/* ===== モバイル ===== */
@media (max-width: 380px) {
  .tp-voice-bubble { padding: 12px 12px; } /* 360px 級でも吹き出しの1行に14字入るように */
  .ps-title .t1, .ps-title .t2 { font-size: 40px; }
  .ps-zgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; }
  .ps-zgrid .ps-zmedal { --medal-size: 52px; } /* 320px級でもタイプページの狭い図鑑で4列が収まるサイズ */
  .tp-voice { gap: 10px; }
  .tp-voice .tp-voice-medal { --medal-size: 54px; }
  .tp-name { font-size: 30px; }
  /* ランキング行の間と % の欄を詰めて、名前の欄を14px広げる。360px幅で「バックアップサーバー」（約116px）が1行に収まる */
  .rank-row { gap: 8px; }
  .rank-pct { width: 44px; } /* 「15.3%」は約33px */
  .st-top { font-size: 10px; letter-spacing: 0.01em; } /* 図鑑と同じ大きさ。320px級でも「バックアップ」が約71pxの欄に収まる */
}
/* 320px 級（iPhone SE 第1世代など）。本文の欄が約240pxしかないので、1行に収めたい短い文の大きさと余白だけを詰める
   （360px 以上の見た目は変えない） */
/* 問題文: data/questions.json の lines は1行14字まで。20px では約286px要り、幅360px より狭い画面では入らずに3行になるので、
   359px 以下は 17px（約243px）にする。答えのボタンが動かないよう、番号と問題文のかたまりの高さも 17px の2行分にする */
@media (max-width: 359.98px) {
  .qz-q { font-size: 17px; }
  .qz-head { min-height: calc(19.5px + 12px + 61.2px + 26px); } /* 問題文2行分は 17px × 1.8 × 2 */
}
@media (max-width: 340px) {
  .ps-cta { padding-left: 34px; padding-right: 34px; } /* 「診断スタート」が「診断ス／タート」に割れない */
  .tp-cta-lead { font-size: 16px; } /* 「あなたはどのサーバータイプ？」を1行に */
  .ps-zname { font-size: 9.5px; letter-spacing: 0; } /* 約58pxの欄に「バックアップ」が1行で入る */
  .result-medal { --medal-size: 80px; } /* 結果カードの吹き出しに幅を譲り、「よ！」「ね。」だけが次の行に落ちないようにする */
  .ps-card .bubble { font-size: 10.5px; padding: 5px 7px; }
  /* タイプページのキャラのひとこと: メダルの下に吹き出しを置き、吹き出しを全幅にする（横に並べると1行が10字ほどしか入らず、
     「私から／…」「あった／ら、」のような短い行ができるため）。しっぽはメダルのほう（上）へ向ける */
  .tp-voice { flex-direction: column; gap: 12px; }
  .tp-voice-bubble { align-self: stretch; }
  .tp-voice-bubble::before { left: 50%; top: -10px; transform: translateX(-50%); border-width: 0 10px 10px; border-color: transparent transparent var(--ink); }
  .tp-voice-bubble::after { left: 50%; top: -7px; transform: translateX(-50%); border-width: 0 9px 9px; border-color: transparent transparent var(--white); }
  /* 仕事の例・あるある: 1つの文節（15〜16字。「「一応確認しておきますね」が口癖」など）が1行に入る大きさ */
  .tp-role-fit li { font-size: 13.5px; }
  .tp-aruaru li { font-size: 12.5px; }
}

/* 白文字のタイプ（DARK_TYPES）。異名・ブランド行は上の [data-dark] の color: inherit で白になる。
   ブランド行を薄い白にすると、バックアップの地で 3.18:1 に落ちるため、白のまま使う */
.ps-card[data-dark="true"] { color: var(--white); }
.ps-card .bubble { color: var(--ink); }

/* hidden属性は常に勝つ（.qz-progressのdisplay:flex等がUAスタイルを上書きしないように） */
[hidden] { display: none !important; }

/* ===== ハンバーガーメニュー ===== */
.ps-header { position: relative; }
.nav-toggle {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; padding: 0;
  background: var(--white); border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 3px; background: var(--ink); }
.nav-toggle:active { transform: translateY(calc(-50% + 2px)); box-shadow: 0 1px 0 var(--ink); }
.site-nav {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 55;
  width: min(300px, 82vw);
  background: var(--white); color: var(--ink);
  border-right: 3px solid var(--ink);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; /* 横向きのスマホなど低い画面でも、最後の「採用サイト」まで届く（下のページは動かさない） */
  transform: translateX(-105%); visibility: hidden;
  transition: transform 0.22s ease, visibility 0.22s;
}
/* 開くときは visibility を待たずに切り替える。遅らせると、menu.js が最初のリンクへ移すフォーカスが効かない。
   閉じるときは .site-nav の 0.22s のままにして、すべり出る動きを見せる */
.site-nav.open { transform: none; visibility: visible; transition: transform 0.22s ease, visibility 0s; }
.site-nav .nav-title {
  font-family: var(--fr); font-weight: 900; font-size: 17px; letter-spacing: 0.03em;
  color: var(--col); padding: 20px 22px 14px;
  border-bottom: 3px solid var(--ink); margin: 0;
}
.site-nav a {
  font-family: var(--fr); font-weight: 900; font-size: 15px; letter-spacing: 0.03em;
  color: var(--ink); text-decoration: none;
  padding: 15px 22px; border-bottom: 1px solid oklch(88% 0.012 262);
}
@media (hover: hover) {
  .site-nav a:hover { background: var(--lemon); }
}
/* メニューのリンクは幅いっぱいに並ぶので、リングは内側に描く（外に出すと隣のリンクにかかる）。
   フォーカスしたリンクは、マウスを乗せたときと同じレモンの地にもする */
.site-nav a:focus-visible { outline-offset: -5px; }
.site-nav a:not([aria-current="page"]):focus-visible { background: var(--lemon); }
.site-nav a[aria-current="page"] { background: var(--col); color: var(--white); --focus-ring: var(--lemon); }
/* メニューの中の閉じるボタン（menu.js が足す）。開いている間はハンバーガーがメニューの下に隠れるため。
   見た目はハンバーガーと同じ箱で、線を×に組む */
.site-nav .nav-close {
  position: absolute; top: 9px; right: 12px;
  width: 42px; height: 42px; padding: 0;
  background: var(--white); border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink); cursor: pointer;
  touch-action: manipulation;
}
.site-nav .nav-close::before, .site-nav .nav-close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 3px; background: var(--ink);
  transform: translate(-50%, -50%) rotate(45deg);
}
.site-nav .nav-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.site-nav .nav-close:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.site-nav a .sub { display: block; font-family: var(--fb); font-weight: 500; font-size: 10.5px; color: oklch(52% 0.02 262); margin-top: 2px; }
.site-nav a[aria-current="page"] .sub { color: oklch(85% 0.02 262); }
.nav-overlay {
  position: fixed; inset: 0; z-index: 54;
  background: oklch(22% 0.03 262 / 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}
.nav-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.22s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav.open, .nav-overlay, .nav-overlay.open { transition: none; }
}
body.nav-locked { overflow: hidden; }

/* ===== ヒーローの散乱メダル位置（モバイル基準。PCは下のメディアクエリで再配置）
   上段・中段はヘッダーからの距離が安定するtop基準、下段(m3/m6)はリード文が伸びても
   ヒーローと一緒に下がって文字に重ならないようbottom基準 ===== */
.ps-medal.m1 { top: 26px;  left: 8px;   transform: rotate(-7deg); }
.ps-medal.m2 { top: 116px; left: 6px;   transform: rotate(5deg); }
.ps-medal.m3 { bottom: 189px; left: 20px;  transform: rotate(-4deg); }
.ps-medal.m4 { top: 30px;  right: 10px; transform: rotate(7deg); }
.ps-medal.m5 { top: 124px; right: 8px;  transform: rotate(-6deg); }
.ps-medal.m6 { bottom: 184px; right: 22px; transform: rotate(5deg); }

/* ============================================================
   PC（デスクトップ）レイアウト — ポスターを画面幅いっぱいに使う
   ============================================================ */
@media (min-width: 960px) {
  /* フル表示: 壁紙・枠なしでポスターが画面幅いっぱいに広がる */
  body { padding: 0; }
  .ps { max-width: none; border: none; box-shadow: none; min-height: 100vh; display: flex; flex-direction: column; }
  .ps-foot { margin-top: auto; } /* 短いページでもフッターを最下部へ */

  /* header */
  .ps-header { padding: 16px; }
  .ps-header .lg, .ps-header .lg img { width: 112px; }

  /* hero: タイトルとキャラを大きく、メダルを広く散らす */
  .ps-hero { padding: 96px 64px 76px; }
  .ps-title { text-shadow: 5px 5px 0 var(--ink); } /* 文字が大きいぶん影も太く */
  .ps-title .t1, .ps-title .t2 { font-size: 84px; }
  .ps-lede { font-size: 18px; margin-bottom: 30px; }
  .ps-heroChar { width: 176px; height: 176px; }
  .ps-cta { font-size: 25px; padding: 19px 66px; }
  .ps-meta { font-size: 14px; margin-top: 26px; }
  .ps-hero .ps-medal { --medal-size: 96px; }
  .ps-medal.m1 { top: 70px;  left: 9%; }
  .ps-medal.m2 { top: 300px; left: 4.5%; }
  .ps-medal.m3 { bottom: 201px; left: 12%; }
  .ps-medal.m4 { top: 84px;  right: 9.5%; }
  .ps-medal.m5 { top: 316px; right: 4.5%; }
  .ps-medal.m6 { bottom: 189px; right: 12%; }

  /* about */
  .ps-about { padding: 62px 64px 66px; }
  .ps-h2 { font-size: 34px; margin-bottom: 20px; }
  .ps-h2.pop { text-shadow: 3px 3px 0 var(--ink); }
  .ps-about p { font-size: 15px; }
  .ps-stats { gap: 20px; }
  .ps-stat { --stat-size: 118px; }
  .ps-stat .n { font-size: 33px; }
  .ps-stat .l { font-size: 12px; }

  /* 図鑑: 8列×2行で勢ぞろい */
  .ps-zukan { padding: 62px 48px 66px; }
  .ps-zukan p.z { font-size: 14px; }
  .ps-zgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 980px; gap: 24px 14px; }
  .ps-zmedal { --medal-size: 86px; }
  .ps-zname { font-size: 12px; }

  /* result sample / 診断結果カード */
  .ps-result { padding: 62px 48px 66px; }
  .ps-card { max-width: 580px; padding: 24px 26px 20px; }
  .ps-card .aka { font-size: 18px; }
  .ps-card .aka .code { font-size: 13px; }
  .ps-card .nm { font-size: 40px; }
  .ps-card .desc { font-size: 13px; }
  .ps-card .bubble { font-size: 12.5px; }
  .result-medal { --medal-size: 118px; }
  .ps-card .compat, .ps-card .rar { font-size: 12.5px; }
  .ps-marquee span { font-size: 18px; }

  /* recruit + footer */
  .ps-recruit { padding: 52px; }
  .ps-recruit p { font-size: 16.5px; }
  .ps-recruit .ps-recruit-staff { font-size: 14.5px; }
  .ps-recruit a { font-size: 16px; padding: 13px 34px; }
  .ps-foot { font-size: 12px; padding: 20px; }

  /* 診断画面: 中央フォーカスを保ちつつ読みやすい幅に */
  .qz-progress { padding: 26px 48px 0; width: 100%; max-width: 780px; margin: 0 auto; }
  .qz-screen { padding: 52px 48px 76px; }
  .qz-qnum { font-size: 15px; margin-bottom: 16px; }
  .qz-q { font-size: 29px; margin-bottom: 34px; }
  .qz-q br { display: none; } /* 問題文の改行（data/questions.json の lines）はスマホ・タブレット向け。PC は1行に収まる */
  .qz-opt { max-width: 660px; margin-left: auto; margin-right: auto; font-size: 16px; padding: 18px 20px; gap: 14px; }
  .qz-note { font-size: 13px; }
  .qz-back { font-size: 13px; }
  .qz-axes { max-width: 500px; }
  .qz-axis .lbl { font-size: 13.5px; }
  .qz-axis .lbl .axname { font-size: 12px; }
  .qz-axis .ax-ltr { width: 19px; height: 19px; font-size: 12px; }
  .qz-axis .axname .tie { font-size: 10px; }
  .qz-second { max-width: 500px; }
  .qz-second-lede { font-size: 14px; }
  .qz-actions { max-width: 420px; }
  .qz-actions .sub { font-size: 14px; }
  .qz-entry-lead { font-size: 15.5px; }
  .qz-entry-note { font-size: 12.5px; }

  /* タイプ詳細ページ */
  .tp-hero { padding: 60px 48px 52px; }
  .tp-code { font-size: 14px; }
  .tp-medal { width: 176px; height: 176px; margin-bottom: 18px; }
  .tp-alias { font-size: 21px; }
  .tp-name { font-size: 58px; }
  .tp-quote { font-size: 15px; padding: 8px 18px; }
  .tp-tagline { font-size: 15px; }
  .tp-body { padding: 54px max(48px, calc((100% - 760px) / 2)) 58px; }
  .tp-text { font-size: 16.5px; }
  .tp-status { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
  /* 対処法は「弱み」への答えなので2枚の下に全幅で。締めのポジションも全幅 */
  .tp-status-item.care, .tp-status-item.role { grid-column: 1 / -1; }
  .tp-voice { gap: 18px; margin-top: 26px; }
  .tp-voice .tp-voice-medal { --medal-size: 76px; }
  .tp-voice-bubble { font-size: 14.5px; padding: 14px 20px; }
  .tp-status-item h3 { font-size: 16px; }
  .tp-status-item p { font-size: 16.5px; } /* 本文(.tp-text)と同じ */
  .tp-status-item .tp-role { font-size: 21px; }
  .tp-role-fit { grid-template-columns: 1fr 1fr; gap: 28px; } /* 箱が全幅なので「向いている仕事」と「ビヨンドなら」を横に並べる */
  .tp-role-fit h4 { font-size: 15px; }
  .tp-role-fit li { font-size: 16px; }
  .tp-aruaru { max-width: 620px; }
  .tp-aruaru li { font-size: 16.5px; }
  .tp-compat { max-width: 620px; margin: 14px auto 0; }
  .tp-compat-medal { width: 64px; height: 64px; }
  .tp-compat-txt { font-size: 14px; }
  .rank-lede { font-size: 14px; margin-bottom: 26px; }
  .rank-note { font-size: 12.5px; margin-bottom: 26px; }
  .ps-about p.ps-note { font-size: 13px; }
  .tp-status-item .tp-role-note { font-size: 13px; }
  .rank-zone b { font-size: 17px; }
  .rank-zone span { font-size: 12px; }
  .rank-list { max-width: 680px; gap: 11px; }
  .st-type { max-width: 680px; } /* すぐ下のランキング（.rank-list）と同じ幅 */
  .qz-staff { max-width: 500px; } /* 結果画面の軸のバー・もう1つの顔（.qz-axes・.qz-second）と同じ幅 */
  .tp-others .ps-h2 { max-width: 760px; margin-left: auto; margin-right: auto; } /* ほかの見出しと同じ段に（この節だけ左右の余白が 20px なので） */
  .rank-row { padding: 9px 16px; gap: 14px; }
  .rank-no { font-size: 17px; width: 30px; }
  .rank-row .rank-medal { --medal-size: 42px; }
  .rank-name { font-size: 13px; width: 150px; }
  .rank-pct { font-size: 15px; width: 64px; }
  .tp-cta { padding: 58px 48px; }
  .tp-cta-lead { font-size: 25px; }
  .tp-share { font-size: 14px; }
}