/* ════════════════════════════════════════════════════════════════
   actual-pay.css — REAL PAY（他のパイロットの実給与）
                    （actual-pay.html / en/actual-pay.html）

   ★ 骨格（.mr-top / .mr-shell / .mr-side / .mr-main / .mr-card / .mr-hd …）は
     my-value.css が持っている。このファイルは骨格を1つも定義し直さない。
     読み込み順は pv-tokens.css → my-value.css → actual-pay.css。

   ★ pay-viz.css は読まない（2026-08-24 に外した）。この画面にドーナツは無い。
     支給の内訳は DEEP PAY の担当なので、ここには戻さない。

   ★ 2026-08-24、**図を全部外した**（オーナー判断）。年収の分布の棒も無くなり、
     .ap-viz / .ap-vcard / .ap-plot / .ap-bar / .ap-you / .ap-ax と、
     表を右の細い列と並べていた2段組（.ap-cols / .ap-main / .ap-side）を
     このファイルから削った。表は幅いっぱいに置く。
     分布は DEEP PAY で作り直す。**ここに別の図を置き直さない。**

   ★ このファイルのクラスは全部 .ap-* 。my-value.css の .mv-* と
     衝突しないための約束。

   ★ 2026-09-04、**開いている行に限って割合（％）を出す**ことにした（オーナー判断）。
     それまでは「％の数字を1つも出さない」だった。
     出しても増える情報が無い ── ％は帯の中点から作っていて、中点は
     **画面に出ている両端2つを足して2で割っただけ**。同じ比は今までも
     style="flex:0.7031 1 0" として小数4桁で DOM に入っていた。
     つまり ％ は、バーが既に持っている長さを読める字で書き直しただけ。
     守るのは4つ ──
       1. **閉じている行（paylock）には1文字も出さない。** あちらの幅は
          :nth-child が持つ全員同じ作り物で、％にすると発明した数字を公開することになる
       2. **整数だけ。** 端数は最大剰余法で配って合計をちょうど 100 にする
       3. **概算だと必ず添える**（一覧は .ap-shn、面は .ap-dw-stn。片方だけ消さない）
       4. **％×年収を画面に書かない。** 金額は今までどおり帯のまま
     ⚠️ 割合を「数」として持ち回さない（変数名 pct・toFixed(n)+'%' は静的検査が禁じている）。
        画面に出るまでの間、整数のまま持つ。

   ── 色 ────────────────────────────────────────────────────────
   値は書かず --pv-* を使う（pv-tokens.css）。ここで新しい色を作らない。
   この画面はオレンジ（--pv-orange-*）だけを使う。
   ★2026-08-23、公開情報からの推定レンジの節（青）を丸ごと消した。
     **青の系統（pv-tokens.css の blue 系トークン）をこの画面に戻さないこと。**
     戻すということは、
     推定と実データを同じ画面に並べるということで、そのときは
     「①と②から1つの数を作らない」という約束から作り直すことになる。
     トップページ（lp.css）の青／オレンジの対はそのまま生きている。
   ════════════════════════════════════════════════════════════════ */

/* ══ バッジ ═══════════════════════════════════════════════════════
   ★2026-08-24、見出しの橙の札（.ap-badge--actual）を消した。
     ページ全体に「本人記録」と貼ると、出典が ✓ Verified の行と食い違う。
     出典は行ごと（下の .ap-vf / .ap-vf-no）が持つ。ここに札を戻さない。
   ⚠️ 青（.ap-badge--pub＝公開情報の推定）はこの画面には二度と置かない。
      assert-pay-rows.mjs が --pv-blue ごと禁じている。 */

/* ══ 数え上げのカード ═════════════════════════════════════════════
   ★2026-08-24、オーナー判断で「本当の数字だけ出す」ことにした。
     出した人に「今どれだけ集まっているか」が見えないと Give & Get が成立しない。
   ★**3枚**（実給与の投稿 / 航空会社 / 1ヶ月以内の新規投稿）。同じ日に
     「一覧のパイロット」の枚を外した（行数は表の下の「全N件中」が言っている）。
     1枚（航空会社）は表の行を数えているだけ。
     残り2枚（実給与の投稿・直近1ヶ月）は pv_pay_rows() の stats から来る。
   ⚠️ 数が読めないカードは JS が**そのカードごと出さない**。
      枠だけ残して 0 を置かないこと（画面に嘘の数字が生まれる）。
   ★絞り込みでは動かない。絞った結果の数はページ送りの「全N件中」が持つ。
   ★2026-08-24、横に線画のアイコンを1枚ずつ足した（オーナー指示）。
     丸い薄橙の下地＋ --pv-orange-ink の線。SVG は JS がインラインで書く
     （外部ファイルもアイコンフォントも読み込まない）。 */
.ap-stats[hidden]{display:none}
.ap-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin-bottom:var(--pv-s-3)}
.ap-st{min-width:0;display:flex;align-items:center;gap:13px;padding:16px 18px;
  background:var(--pv-surface);border:1px solid var(--pv-line);
  border-radius:var(--pv-r);box-shadow:var(--pv-shadow)}
/* 丸い下地。★flex:0 0 auto。数字が長い行で潰れて楕円になるのを止める。 */
.ap-st-i{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;
  background:var(--pv-orange-soft);color:var(--pv-orange-ink)}
.ap-st-b{min-width:0}
.ap-st-n{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;
  color:var(--pv-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ap-st-u{margin-left:2px;font-size:.78rem;font-weight:700;letter-spacing:0;
  color:var(--pv-ink-3)}
.ap-st-l{margin-top:5px;font-size:.7rem;font-weight:700;letter-spacing:.02em;
  color:var(--pv-ink-3);line-break:strict;word-break:auto-phrase}

/* ══ 絞り込み ═════════════════════════════════════════════════════
   ★ 3つとも同じ1枚の表に効く。並ぶのは「実際に行がある区分」だけで、
     語彙を丸ごと出さない（選べるのに0件、が起きない）。
   ⚠️ [hidden] を先に書く。display:flex は UA の [hidden]{display:none} に勝つので、
      JS が hidden = true にしても中身が空のまま残る。実際に、鍵の無い人の画面に
      空っぽの「機材」プルダウンが出ていた。帯（.ap-filter）と枠（.ap-f）の両方に要る。 */
.ap-filter[hidden]{display:none}
.ap-f[hidden]{display:none}
/* ★2026-09-04、狭い幅のために器を2つ足した（.ap-fbar / .ap-sheet）。
     広い幅では display:contents で**器そのものを消す** ── 中の3つの口が
     そのまま .ap-filter の flex の子に戻るので、今までと1pxも変わらない。
   ⚠️ [hidden] は display:contents にも勝つ必要がある。上の2行と同じ理由。 */
.ap-fbar,.ap-sheet,.ap-sheet-b{display:contents}
.ap-fbar[hidden],.ap-sheet[hidden]{display:none}
.ap-fbtn,.ap-fbar-n,.ap-sheet-hd,.ap-sheet-ft{display:none}
.ap-filter{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  margin-bottom:var(--pv-s-3);padding:16px 18px;
  background:var(--pv-surface);border:1px solid var(--pv-line);
  border-radius:var(--pv-r);box-shadow:var(--pv-shadow)}
.ap-f{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 190px}
/* 打ち込みの窓は少し広く取る（社名は長い）。 */
.ap-f--q{flex:1.5 1 230px}
.ap-f-l{font-size:.68rem;font-weight:700;letter-spacing:.02em;color:var(--pv-ink-3)}
.ap-sel{width:100%;min-height:40px;padding:8px 32px 8px 12px;
  border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);
  background:var(--pv-bg);color:var(--pv-ink);
  font-family:inherit;font-size:.84rem;font-weight:600;line-height:1.4;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  transition:border-color .18s var(--pv-ease),box-shadow .18s var(--pv-ease)}
.ap-sel:hover{border-color:var(--pv-ink-3)}
.ap-sel:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
.ap-sel:active{border-color:var(--pv-orange)}

/* 会社の打ち込み。★見た目は .ap-sel と揃える（同じ帯に並ぶので）。
   矢印は付けない（開かない窓に矢印を出さない）。 */
.ap-q{width:100%;min-height:40px;padding:8px 12px;
  border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);
  background:var(--pv-bg);color:var(--pv-ink);
  font-family:inherit;font-size:.84rem;font-weight:600;line-height:1.4;
  -webkit-appearance:none;appearance:none;
  transition:border-color .18s var(--pv-ease),box-shadow .18s var(--pv-ease)}
.ap-q::placeholder{color:var(--pv-ink-3);font-weight:500}
.ap-q:hover{border-color:var(--pv-ink-3)}
.ap-q:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
/* ★iOS は 16px 未満の入力欄に触れるとページごと拡大し、戻らない。拡大した画面では
   position:fixed のヘッダーと常設バーが窓より広い箱になり、左右とも切れる
   （2026-08-27、オーナーの iPhone 16 で実測 1.09 倍）。⚠️ この 16px を下げない。 */
@media (pointer:coarse),(max-width:820px){.ap-sel,.ap-q{font-size:16px}}

.ap-clear{min-height:40px;padding:8px 16px;border-radius:999px;
  border:1px solid var(--pv-line);background:none;color:var(--pv-ink-2);
  font-family:inherit;font-size:.78rem;font-weight:700;cursor:pointer;
  transition:color .18s var(--pv-ease),border-color .18s var(--pv-ease),
             background-color .18s var(--pv-ease),transform .18s var(--pv-ease)}
.ap-clear:hover{color:var(--pv-ink);border-color:var(--pv-orange)}
.ap-clear:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
.ap-clear:active{transform:scale(.97);background:var(--pv-line-soft)}

/* ★日本語が語の途中で折れないようにする。
     日本語には単語の切れ目が無いので、既定だと仮名のどこでも折れる。
     実際に「訓練生の公開レンジは持っていませ／ん。」と切れていた。
     auto-phrase は文節で折る（対応していないブラウザは黙って無視する＝従来どおり）。
     max-width を ch で書くと日本語では想像より狭くなるので、上で広げてある。 */
/* ★.mr-hd-s は my-value.css（4画面で共有）の側。値は上書きせず、折り方だけこの画面で足す。
     既定だと仮名のどこでも折れて「丸めた額／で、」と切れていた。 */
.mr-hd-s,.ap-msg-s,.ap-tbl td{line-break:strict;word-break:auto-phrase}

/* ══ 表 ═══════════════════════════════════════════════════════════
   ★1枚しかない。1行＝1人。全幅で置く。
     ⚠️ 粒度を分けた2枚に戻さないこと。同じ人が両方に出て、二重に数えたように見える。
   ★行は押せる（2026-09-03）。押すと右から1人ぶんの面が出る（.ap-dw・下）。
     ⚠️ 押せることが hover でしか分からない形にしない。› は最初から見えている。 */
.ap-tw{min-width:0;
  background:var(--pv-surface);border:1px solid var(--pv-line);
  border-radius:var(--pv-r);box-shadow:var(--pv-shadow);overflow:hidden}
/* 横に溢れる分は表だけがスクロールする（ページ本体は横に動かさない）。 */
.ap-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ap-tbl{width:100%;border-collapse:collapse;font-size:.82rem}
.ap-tbl th{position:sticky;top:0;z-index:1;
  background:var(--pv-surface-2);
  padding:12px 16px;text-align:left;white-space:nowrap;
  font-size:.67rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--pv-ink-3);
  border-bottom:1px solid var(--pv-line)}
/* 金額の列は右寄せ。桁が縦に揃わないと、丸めてあることが読み取りにくい。 */
.ap-tbl th.ap-num,.ap-tbl td.ap-num{text-align:right}
.ap-tbl td{padding:14px 16px;border-bottom:1px solid var(--pv-line-soft);
  line-height:1.6;vertical-align:middle}
.ap-tbl tbody tr:last-child td{border-bottom:0}
/* 押せる行（2026-09-03）。★色と背景だけ。transform で動かさない
     ── 表の行が動くと、隣の行の桁と揃わなくなって読みにくい。 */
.ap-tbl tbody tr.ap-r{cursor:pointer;
  transition:background-color .16s var(--pv-ease)}
.ap-tbl tbody tr.ap-r:hover,.ap-tbl tbody tr.ap-r:focus-within{
  background:var(--pv-orange-soft)}

/* 職位の下に置く機材（7列目を作らない）。★無い行はこの1行が黙って空く。 */
.ap-pos{display:block;color:var(--pv-ink)}
.ap-flt{display:block;margin-top:3px;
  font-size:.72rem;font-weight:600;color:var(--pv-ink-3)}

/* hover の1行。★<tr> を増やさず、セルの中で高さ 0 → 1行に開く
     （0fr → 1fr は transition できる。height:auto はできない）。
   ★出すのは予告だけ。金額も乗務時間も1文字も入っていない（JS 側の hintHtml）。 */
.ap-hint{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .18s var(--pv-ease)}
.ap-tbl tbody tr.ap-r:hover .ap-hint,
.ap-tbl tbody tr.ap-r:focus-within .ap-hint{grid-template-rows:1fr}
.ap-hint-i{overflow:hidden;min-height:0;
  font-size:.71rem;font-weight:600;color:var(--pv-orange-ink);
  letter-spacing:.01em;line-height:1.9}

/* › ── 押せることの目印。★最初から見えている（hover で現れない）。
     文字で描く。絵にすると表の中の svg が増える。 */
.ap-go{flex:none;width:28px;height:28px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--pv-line);border-radius:999px;
  background:var(--pv-surface);color:var(--pv-ink-3);
  font-size:1rem;font-weight:700;line-height:1;cursor:pointer;
  transition:color .18s var(--pv-ease),border-color .18s var(--pv-ease),
             background-color .18s var(--pv-ease)}
.ap-tbl tbody tr.ap-r:hover .ap-go{color:var(--pv-orange-ink);
  border-color:var(--pv-orange-ink)}
.ap-go:hover{color:var(--pv-orange-ink);border-color:var(--pv-orange-ink)}
.ap-go:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
.ap-go:active{transform:scale(.92)}
/* 投稿時期と › を1行に並べる（列は増やさない）。 */
.ap-tbl td:last-child{white-space:nowrap}
.ap-tbl td:last-child .ap-age{margin-right:10px;vertical-align:middle}
.ap-tbl td:last-child .ap-go{vertical-align:middle}

/* 社名のセル。ロゴ＋文字。★ロゴが落ちても社名は必ず文字で残る。 */
.ap-cell-air{display:flex;align-items:center;gap:10px;min-width:0}
.ap-logo{flex:none;width:30px;height:30px;object-fit:contain;
  border-radius:8px;background:#fff;padding:3px;
  border:1px solid var(--pv-line-soft)}
/* ロゴを持っていない社と「一覧にない会社」。頭2文字だけのグレーの札。 */
.ap-logo--mono{display:inline-flex;align-items:center;justify-content:center;
  padding:0;background:var(--pv-surface-2);color:var(--pv-ink-3);
  font-size:.66rem;font-weight:800;letter-spacing:.01em}
.ap-air{font-weight:700;color:var(--pv-ink);min-width:0}
/* 金額は表の主役。数字は等幅の数字送りで縦に揃える。 */
.ap-amt{font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--pv-orange-ink)}
/* 月あたりは年収の言い換え。主役の隣で控えめに。 */
.ap-mon{font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--pv-ink-2)}
.ap-vf{display:inline-flex;align-items:center;gap:4px;
  font-size:.68rem;font-weight:700;color:var(--pv-green-ink);white-space:nowrap}
.ap-vf svg{flex:none}
/* ★「本人申告」は13行が13行とも同じ札になる＝いまは情報が無い。
   橙で塗ると画面がその1語で埋まるので、ここは灰の静かな札にする。
   色を使うのは ✓ Verified（緑）だけ。差が出たときにだけ目が行く。
   ★出典を言うのはこの2つの札だけ（見出しには札を置かない）。 */
.ap-vf-no{display:inline-flex;align-items:center;
  font-size:.66rem;font-weight:600;white-space:nowrap;
  border-radius:999px;padding:3px 9px;
  color:var(--pv-ink-3);background:var(--pv-line-soft);
  border:1px solid var(--pv-line)}
/* ★公開年収から大きく外れた本人申告の行（2026-09-19）。出典の札の後ろに記号だけ。
   説明は title と読み上げ（actual-pay.js の farMark）。色は既存のトークンを使う。 */
.ap-far{display:inline-block;margin-left:6px;vertical-align:middle;
  font-size:.82rem;font-weight:700;line-height:1;color:var(--pv-gold-ink)}

/* いちばん右の「投稿時期」。★出るのは5段の粗い区分の言葉だけで、日付は無い。
   ★出典の札より更に静かに。ここは「どれくらい新しいか」の目安であって、
     行の主役ではない（主役は金額）。
   ⚠️ 見出しを押せるようにしない・並べ替えの矢印を付けない。
      並びに投稿の新しさが乗ると「誰が最近出したか」が読める。 */
.ap-age{font-size:.7rem;font-weight:600;white-space:nowrap;color:var(--pv-ink-3)}

/* ══ カードのときだけ出るもの（2026-09-04）════════════════════════
   ★<table> の DOM は1バイトも変えていない。狭い幅（下の @media (max-width:720px)）で
     見せ方だけをカードに組み替える。ここに並ぶのはそのときの部品で、
     **広い幅では display:none** ── innerText に1文字も出ない＝
     見出し6語・件数・約束の言い回しを見ている既存の検査に1つも触らない。
   ★語は JS の辞書から**本物の要素**として入る（content:attr() ではない）。
     CSS に日本語を直書きしないため＝英語版がそのまま効く。 */
.ap-cl,.ap-cbh,.ap-cb,.ap-cb-l,.ap-shn{display:none}

/* セルの中の見出し語（「年収」「月あたり」）。カードには表の見出し行が無い。 */
.ap-cl{font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--pv-ink-3)}

/* 乗務の帯（例「60〜70 時間 / 月」）。★サーバが既に返している work.bh をそのまま出す。
   ⚠️ ここから時間あたりの単価（額 ÷ 時間）を作らない。あれは年収そのものではないし、
      2つの帯を割ると、丸めた両端よりも細かい数が画面に生まれる。 */
.ap-cbh{margin-top:6px;font-size:.75rem;font-weight:700;color:var(--pv-ink-2);
  font-variant-numeric:tabular-nums}
.ap-cbh-k{margin-right:8px;font-size:.66rem;font-weight:700;letter-spacing:.04em;
  color:var(--pv-ink-3)}
.ap-cbh-u{margin-left:4px;font-size:.66rem;font-weight:600;color:var(--pv-ink-3)}

/* 報酬の内訳 ── 面の1本のバー（.ap-dw-st）と同じものをカードに小さく置く。
   ★色は下の .ap-dw-c-* が持つ。**あちらはこのファイルの後ろにある＝勝つ**ので、
     ここの橙は知らない鍵が来たときの受け皿（.ap-dw-sti と同じ作り）。
   ★閉じている行（paylock）には出ない ── JS の cardCompHTML が先頭で返している。
     あちらの幅は全員同じ作り物なので、％にすると発明した数字を公開することになる。 */
.ap-cb{width:100%;height:8px;margin-bottom:8px;
  border-radius:999px;overflow:hidden;
  background:var(--pv-surface-2);box-shadow:inset 0 0 0 1px var(--pv-line)}
.ap-cb-s{display:block;min-width:4px;background:var(--pv-orange)}
.ap-cb-s+.ap-cb-s{box-shadow:inset 1.5px 0 0 var(--pv-surface)}
/* 凡例（区分名＋％）。★丸はバーと同じ色・同じ並び。 */
.ap-cb-l{flex-wrap:wrap;gap:3px 12px;margin-bottom:9px;
  font-size:.69rem;font-weight:600;line-height:1.6;color:var(--pv-ink-3)}
.ap-cb-i{display:inline-flex;align-items:center;white-space:nowrap}
.ap-cb-i b{margin-left:5px;font-weight:800;color:var(--pv-ink-2);
  font-variant-numeric:tabular-nums}
.ap-cb-d{flex:none;display:inline-block;width:8px;height:8px;margin-right:6px;
  border-radius:999px;background:var(--pv-orange)}
/* その内訳が概算だと断る1行。表の下に1つだけ置く（面では .ap-dw-stn が同じことを言う）。
   ⚠️ ％を出すなら、この1行を必ず同じ画面に置く。片方だけ消さない。 */
.ap-shn{margin:12px 2px 0;font-size:.68rem;line-height:1.7;color:var(--pv-ink-3);
  line-break:strict;word-break:auto-phrase}

/* ══ ページ送り ═══════════════════════════════════════════════════
   ★2026-08-24、オーナー判断で**件数を出す**ことにした（「全N件中 1〜10件を表示」）。
     N は絞り込んだ後の行数。絞り込みを解いた全体は上のカードが持っている。
   ★数字のページ番号（1 2 3 … 13）。多いときは真ん中を … で畳む。
   ⚠️ 押した先が空、という行き止まりを作らないこと（JS 側で頁を丸めている）。 */
.ap-pager{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  padding:14px 16px;border-top:1px solid var(--pv-line);
  background:var(--pv-surface-2)}
.ap-pgs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* 数字のボタンは正方に近づける（前へ／次へと違って幅が要らない）。 */
.ap-pg--n{min-width:36px;padding:7px 10px;
  font-variant-numeric:tabular-nums;text-align:center}
.ap-pg--n[aria-current="page"]{color:#fff;background:var(--pv-orange);
  border-color:var(--pv-orange)}
.ap-pg--n[aria-current="page"]:hover{color:#fff}
.ap-pg-e{padding:0 2px;font-size:.76rem;font-weight:700;color:var(--pv-ink-3);
  user-select:none}
.ap-pg{min-height:36px;padding:7px 16px;border-radius:999px;
  border:1px solid var(--pv-line);background:var(--pv-surface);color:var(--pv-ink-2);
  font-family:inherit;font-size:.76rem;font-weight:700;cursor:pointer;
  transition:color .18s var(--pv-ease),border-color .18s var(--pv-ease),
             transform .18s var(--pv-ease)}
.ap-pg:hover:not(:disabled){color:var(--pv-ink);border-color:var(--pv-orange)}
.ap-pg:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
.ap-pg:active:not(:disabled){transform:scale(.97)}
.ap-pg:disabled{opacity:.4;cursor:default}
.ap-pg-n{font-size:.72rem;font-weight:700;color:var(--pv-ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* 表の下の注記。★ここにも金額・件数を書かない。 */
.ap-foot{margin-top:14px;font-size:.72rem;line-height:1.75;color:var(--pv-ink-3);
  max-width:78ch;line-break:strict;word-break:auto-phrase}

/* 鍵が無いとき／まだ1行も無いとき／絞り込みで0件のとき。
   ★どれも金額を1文字も出さない。 */
.ap-msg{background:var(--pv-surface);border:1px solid var(--pv-line);
  border-radius:var(--pv-r);padding:24px;box-shadow:var(--pv-shadow)}
.ap-msg--lock{border-color:rgba(249,115,22,.28);
  background:linear-gradient(180deg,var(--pv-orange-soft) 0%,transparent 140px),var(--pv-surface)}
.ap-msg-t{font-size:.98rem;font-weight:800;letter-spacing:-.02em;line-height:1.4}
.ap-msg-s{margin-top:9px;font-size:.81rem;line-height:1.75;color:var(--pv-ink-2);max-width:70ch}
.ap-cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  min-height:44px;padding:12px 22px;border-radius:999px;
  background:var(--pv-orange);color:#fff;text-decoration:none;
  font-size:.84rem;font-weight:800;
  box-shadow:0 6px 18px -10px rgba(249,115,22,.75);
  transition:opacity .18s var(--pv-ease),transform .18s var(--pv-ease),
             box-shadow .18s var(--pv-ease)}
.ap-cta:hover{opacity:.92;box-shadow:0 10px 24px -12px rgba(249,115,22,.85)}
.ap-cta:focus-visible{outline:2px solid var(--pv-orange);outline-offset:3px}
.ap-cta:active{transform:scale(.98)}

/* ══════════════════════════════════════════════════════════════
   鍵が無い人の画面（2026-08-25）
   ⚠️ 骨組みは**ぼかしではない**。サーバーが行を返していないので中身が無い。
      このファイルに、ぼかしのたぐいは1文字も書かない。
   ══════════════════════════════════════════════════════════════ */
.ap-lockhero{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--pv-s-4);align-items:center}
.ap-lockhero-b{min-width:0}
.ap-lock-n{margin-top:10px;font-size:.72rem;font-weight:600;color:var(--pv-ink-3)}
.ap-lockhero-a{flex:0 0 auto;color:var(--pv-orange);opacity:.6}
.ap-lock-art{display:block;width:196px;height:auto}

/* 下段2枚。⚠️ .ap-cols / .ap-main / .ap-side は使わない（開いている画面から外したもの）。 */
.ap-lock-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:var(--pv-s-3);margin-top:var(--pv-s-3);align-items:start}
.ap-lock-aside{min-width:0}
.ap-lock-skel,.ap-lock-see{min-width:0;background:var(--pv-surface);
  border:1px solid var(--pv-line);border-radius:var(--pv-r);
  padding:20px;box-shadow:var(--pv-shadow)}
.ap-lock-h{font-size:.8rem;font-weight:800;letter-spacing:-.01em;line-height:1.4;
  color:var(--pv-ink)}

/* 骨組み。★灰色の棒だけ。数字も社名も1文字も入っていない。 */
.ap-skel{margin-top:14px}
.ap-skel-hd,.ap-skel-r{display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.1fr)
                        minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1fr);
  gap:12px;align-items:center}
.ap-skel-hd{padding:0 4px 10px;border-bottom:1px solid var(--pv-line);
  font-size:.66rem;font-weight:700;letter-spacing:.02em;color:var(--pv-ink-3);
  white-space:nowrap;overflow:hidden}
.ap-skel-body{position:relative;padding:6px 4px 4px}
.ap-skel-r{padding:12px 0;border-bottom:1px solid var(--pv-line-soft)}
.ap-skel-r:last-of-type{border-bottom:0}
.ap-skel-bar{display:block;height:9px;border-radius:999px;
  background:linear-gradient(90deg,rgba(15,23,42,.085),rgba(15,23,42,.045))}
.ap-skel-r:nth-child(2) .ap-skel-bar{opacity:.82}
.ap-skel-r:nth-child(3) .ap-skel-bar{opacity:.64}
.ap-skel-r:nth-child(4) .ap-skel-bar{opacity:.46}
.ap-skel-r:nth-child(5) .ap-skel-bar{opacity:.3}
.ap-skel-lock{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:999px;
  background:var(--pv-surface);border:1px solid rgba(249,115,22,.32);
  box-shadow:var(--pv-shadow-lift);
  font-size:.75rem;font-weight:700;line-height:1.5;color:var(--pv-orange-ink);
  white-space:nowrap}

/* 見えること。 */
.ap-see{margin-top:14px;display:grid;gap:11px;list-style:none;padding:0}
.ap-see li{position:relative;padding-left:24px;
  font-size:.78rem;line-height:1.7;color:var(--pv-ink-2);
  line-break:strict;word-break:auto-phrase}
.ap-see li::before{content:"";position:absolute;left:0;top:.5em;
  width:14px;height:8px;border-left:2px solid var(--pv-orange);
  border-bottom:2px solid var(--pv-orange);border-radius:1px;
  transform:rotate(-45deg) translateY(-1px)}
.ap-see-n{margin-top:14px;padding-top:13px;border-top:1px solid var(--pv-line-soft);
  display:flex;align-items:flex-start;gap:8px;
  font-size:.72rem;line-height:1.7;color:var(--pv-ink-3)}
.ap-see-n svg{flex:0 0 auto;margin-top:2px}

@media (max-width:900px){
  .ap-lockhero{grid-template-columns:minmax(0,1fr)}
  .ap-lockhero-a{display:none}
  .ap-lock-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  /* ★狭いところでは6列の骨組みが棒同士のすき間より細くなるので、頭の3列だけにする。
       列名は実物のまま（注記のカッコを足さない）。 */
  .ap-skel-hd span:nth-child(n+4),.ap-skel-r .ap-skel-bar:nth-child(n+4){display:none}
  .ap-skel-hd,.ap-skel-r{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
  .ap-skel-lock{white-space:normal;text-align:left}
}

@media (max-width:760px){
  /* ★ここではまだ3枚を横に並べたまま詰める。1列に積むのは 600px から（下）。
     700px で積むと、幅いっぱいの帯が3本ならぶだけの間の抜けた絵になる。 */
  .ap-stats{gap:10px}
  .ap-st{padding:14px}
  .ap-st-i{width:36px;height:36px}
  .ap-st-n{font-size:1.28rem}
  .ap-filter{padding:14px}
  .ap-tbl th,.ap-tbl td{padding:11px 12px}
  .ap-logo{width:26px;height:26px}
  .ap-cell-air{gap:8px}
  .ap-pager{gap:10px;padding:12px;justify-content:center}
  .ap-pgs{justify-content:center}
}

@media (max-width:600px){
  /* ★ここまで狭いと絵と数字が重なるので1列に積む。 */
  .ap-stats{grid-template-columns:minmax(0,1fr)}
}

/* ★ 要素を display:none にしない（my-value.css と同じ約束）。
     動きを止めるだけにする。 */
@media (prefers-reduced-motion:reduce){
  .ap-sel,.ap-q,.ap-clear,.ap-cta,.ap-pg{transition:none}
  /* ★骨組みは動かないので止めるものは無い。要素を消さない。 */
  .ap-clear:active,.ap-cta:active,.ap-pg:active{transform:none}
}

/* ══ 行を押すと出る面（2026-09-03）═══════════════════════════════
   ⚠️ **ぼかしを1文字も書かない。** ぼかしの類は、この画面では字面ごと禁じ手。
      assert-pay-rows.mjs が4つのファイルを素で grep しているので、
      **説明のつもりでその語をここに書くだけでも赤くなる**（実際に1度踏んだ）。
      隠して見せているのではなく、サーバが帯しか作っていない。
      背景の幕は**単色の rgba だけ**で、後ろを霞ませない。
   ⚠️ .ap-panel / .ap-cols / .ap-main / .ap-side / .ap-bar / .ap-viz を
      使わない。あれは 2026-08-24 に「消したもの」として字で禁じてある。
   ★色は --pv-* だけ。この画面はオレンジ（--pv-orange-*）で通す。
   ══════════════════════════════════════════════════════════════ */
.ap-dw-back{position:fixed;inset:0;z-index:205;
  background:rgba(10,22,40,.52);opacity:0;
  transition:opacity .32s var(--pv-ease)}
.ap-dw-back.is-in{opacity:1}

.ap-dw{position:absolute;top:0;right:0;bottom:0;
  width:420px;max-width:92vw;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--pv-surface);
  border-left:1px solid var(--pv-line);
  box-shadow:-24px 0 60px -30px rgba(10,22,40,.45),
             -2px 0 8px -4px rgba(10,22,40,.22);
  transform:translateX(100%);
  transition:transform .32s var(--pv-ease)}
/* ⚠️ 面そのものの焦点の枠は消す。開いた瞬間 JS がここへ焦点を移すので
     （× に飛ばすと「閉じる」がいちばん光るため・2026-09-03）、消さないと
     **ブラウザ既定の青い枠**が面を一周する。ブランド色ではないし、
     iPhone では画面いっぱいなので窓に青い縁が付いたように見える。
     焦点が消えるわけではない ── Tab を押すと中の口が1つずつ光る。 */
.ap-dw:focus{outline:none}
.ap-dw-back.is-in .ap-dw{transform:none}
.ap-dw-b{padding:20px 22px 28px}

/* 頭 ── 社名と × */
.ap-dw-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ap-dw-air{display:flex;align-items:center;gap:10px;min-width:0}
.ap-dw-name{font-size:1.02rem;font-weight:800;letter-spacing:-.01em;
  color:var(--pv-ink);line-break:strict;word-break:auto-phrase}
/* ★閉じるは、この面でいちばん弱い要素にする（2026-09-03）。
     大きさ（36px）と当たり判定は変えない ── 弱くするのは色だけ。
     ⚠️ 開いた瞬間の居場所は面そのものに置く（actual-pay.js の paintDrawer）。
        ここに focus を飛ばすと :focus-visible の橙が光り、
        いちばん目立つのが「閉じる」になる。 */
.ap-dw-x{flex:none;width:36px;height:36px;margin:-6px -6px 0 0;
  display:grid;place-items:center;
  border:1px solid var(--pv-line);border-radius:10px;background:none;
  color:var(--pv-ink-3);font-size:1.3rem;line-height:1;cursor:pointer;
  transition:color .18s var(--pv-ease),background-color .18s var(--pv-ease),
             border-color .18s var(--pv-ease)}
.ap-dw-x:hover{color:var(--pv-orange-ink);border-color:var(--pv-orange-ink);
  background:var(--pv-orange-soft)}
.ap-dw-x:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
.ap-dw-x:active{transform:scale(.94)}

/* 職位・機材・在籍の段 */
.ap-dw-meta{margin-top:8px;font-size:.78rem;font-weight:600;
  color:var(--pv-ink-2);line-height:1.7;
  line-break:strict;word-break:auto-phrase}

/* 年収と月あたり */
.ap-dw-amt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-top:16px;padding:14px 16px;
  background:var(--pv-surface-2);border:1px solid var(--pv-line);
  border-radius:var(--pv-r)}
.ap-dw-a{min-width:0}
.ap-dw-al{display:block;font-size:.66rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--pv-ink-3)}
.ap-dw-av{display:block;margin-top:4px;
  font-size:1.16rem;font-weight:800;letter-spacing:-.02em;
  color:var(--pv-ink);font-variant-numeric:tabular-nums}
.ap-dw-src{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.ap-dw-age{font-size:.72rem;font-weight:600;color:var(--pv-ink-3)}
/* 公開年収から大きく外れた行だけ、金額の下に出る1文。 */
.ap-dw-far{display:flex;gap:6px;margin-top:10px;
  font-size:.75rem;font-weight:600;line-height:1.7;color:var(--pv-gold-ink);
  line-break:strict;word-break:auto-phrase}

/* 節の見出し。★h3。この画面の h2 は 0 のままにする。 */
.ap-dw-h{margin:24px 0 10px;
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pv-orange-ink)}

/* 帯の並び */
.ap-dw-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ap-dw-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;gap:6px 12px}
.ap-dw-k{font-size:.78rem;font-weight:600;color:var(--pv-ink-2);min-width:0;
  line-break:strict;word-break:auto-phrase}
.ap-dw-v{font-size:.82rem;font-weight:700;color:var(--pv-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:right}
.ap-dw-u{margin-left:5px;font-size:.7rem;font-weight:600;color:var(--pv-ink-3)}
/* 帯の右に添える割合（2026-09-04・オーナー指示で出すことにした）。
   ★整数だけ・合計はちょうど 100（端数は最大剰余法で配る＝actual-pay.js の shareInts）。
   ★金額（.ap-dw-v）より弱く。主役は帯そのもので、％はその読み取りの補助。 */
.ap-dw-sh{margin-left:8px;font-size:.72rem;font-weight:700;color:var(--pv-ink-3);
  font-variant-numeric:tabular-nums}

/* 報酬の内訳 ── 1本の積み上げバー（2026-09-03）。
   ★前は行ごとに横棒を1本ずつ描いていた（帯の下端から上端まで）。長さが金額の
     大小に読めてしまうので消した。いまは「その人の報酬を、どの区分がどれくらい
     占めているか」を1本で出す。
   ★長さは帯の中点から出した**おおよその構成**。2026-09-04 から、その中点を
     整数の％にして各行の右に添えている（上の冒頭を読む）。
     バーの下の .ap-dw-stn が「概算だ」と断る役で、こちらは消さない。
   ★色は区分ごと（2026-09-03 その2・オーナー指示）。
     はじめ橙1色の濃淡9段にしたが「オレンジだけじゃわかりづらい」。
     12px の細い帯では隣り合う2段が見分けられず、1色で9段に割る以上
     これ以上ランプは広げられなかった。
     ⚠️ 多色にしたが**ドーナツを戻したのではない**。出すのは1本の帯だけ。 */
.ap-dw-st{display:flex;width:100%;height:12px;margin:0 0 9px;
  border-radius:999px;overflow:hidden;
  background:var(--pv-surface-2);box-shadow:inset 0 0 0 1px var(--pv-line)}
.ap-dw-sti{display:block;min-width:6px;background:var(--pv-orange)}
/* 隣の区分との境目。★多色でも要る（役割手当=赤 と パーディアム=桃 が隣接する）。 */
.ap-dw-sti+.ap-dw-sti{box-shadow:inset 1.5px 0 0 var(--pv-surface)}
.ap-dw-stn{margin:0 0 14px;font-size:.68rem;line-height:1.7;color:var(--pv-ink-3);
  line-break:strict;word-break:auto-phrase}
/* 一覧の丸。★バーと同じ色・同じ並び ── 凡例を別に置かないための印。 */
.ap-dw-dot{flex:none;display:inline-block;width:8px;height:8px;
  margin-right:7px;vertical-align:middle;
  border-radius:999px;background:var(--pv-orange)}

/* 区分の色 ── 9つ。★pay-viz.js の SEG から写した。
   DEEP PAY のドーナツ・マイレポートと **同じ項目が同じ色** になる
   （オーナー確定 2026-08-29「同じ項目がマイレポートと同じ色になる」）。
   ★色は**並び順ではなく区分そのもの**に付く。だから行を次々に押していったとき、
     「緑（基本給）がどれだけ占めているか」を人ごとに見比べられる。
     濃淡だった頃は「1番目が濃い」でしかなく、行が変わると同じ色が別の意味だった。
   ★暗いほうでも同じ色にする（分岐させない）。灰だけ沈むが、あれは
     「まだ埋まっていない」を表す意図的な鈍さで、ドーナツも同じ見え方をしている。
     2画面で同じ項目が違って見えるほうが害が大きい。
   ⚠️ **手で写してある。** pay-viz.js の SEG を変えたらここも直す。
      ズレは assert-pay-rows.mjs が3枚を突き合わせて落とす
      （pay-viz.js の SEG → deep-pay.js の COL → この9行）。
   ⚠️ 上の .ap-dw-sti / .ap-dw-dot の橙は消さない。知らない鍵が来たときの受け皿。 */
/* ★2026-09-15、fixed を base と guarantee に割った（オーナー指示）。色はどちらも
   pay-viz.js の SEG が前から持っていたもの＝マイページのドーナツと同じ2色。 */
.ap-dw-c-base    {background:#34d399}   /* 基本給           ← SEG.base       */
.ap-dw-c-guarantee{background:#a3e635}  /* 保証手当・職務手当 ← SEG.guarantee  */
.ap-dw-c-variable{background:#f5c842}   /* 変動給           ← SEG.flight     */
.ap-dw-c-command {background:#5fb0ff}   /* 職位手当         ← SEG.command    */
.ap-dw-c-role    {background:#e8604c}   /* 役割手当         ← SEG.instructor */
.ap-dw-c-perdiem {background:#f472b6}   /* パーディアム     ← SEG.perdiem    */
.ap-dw-c-housing {background:#fb923c}   /* 住宅手当         ← SEG.housing    */
.ap-dw-c-other   {background:#a78bfa}   /* その他の現金     ← SEG.other      */
.ap-dw-c-rest    {background:#5c6675}   /* その他・未分類   ← SEG.rest       */
/* ★賞与だけ deep-pay.js の COL に無い（あちらは賞与を月々の棒に入れない）。
     SEG から直に引いている。 */
.ap-dw-c-bonus   {background:#22d3ee}   /* 賞与・利益分配   ← SEG.bonus      */

/* ══ 閉じている「報酬の内訳」（2026-09-03・Give & Get の門）══════════
   ★ここは**ぼかしではない**。閉じている行に金額そのものは届いていない
     （db/pay-rows.sql は pay を返さず、paylock ＝ 区分の**名前だけ**を返す）。
     だから霞ませる相手が無い ── 金額の板は最初から中身が空。
   ★2026-09-03 その3（オーナー指示「色付きの棒グラフと項目名までは出す。
     金額だけ隠す」）で2つの姿を持つ ──
       .is-real  … 名前が2つ以上来た行。本物の色と本物の項目名を出す
       （無印）  … 区分が1つだけの行（名前も来ない）。今までどおりの灰色の骨組み
   ⚠️ **幅は両方とも固定。人によって変えない。** 本当の割合を出すと、
      面に出ている年収と掛けるだけで金額が戻る（門の意味が消える）。
      並びもサーバの固定順のまま ── 大きい順にすると順位が漏れる。
   ⚠️ blur を書いてよいのは**中身の空の板（.ap-dw-lk-p）だけ**。
      「本物を置いてから霞ませる」形に戻さない。assert-pay-rows.mjs が
      字（ここに blur がこれ以外に無いこと）と実測（毒を仕込んだ行を開いて
      面に数字が1文字も出ないこと）の両方で見張っている。
   ★動かさない（明滅させない）。「読み込み中」に見えて、待たせてしまう。 */
.ap-dw-lk-b{opacity:.55}
.ap-dw-lk-b.is-real{opacity:1}
/* 灰色になるのは骨組みのときだけ。色は上の .ap-dw-c-* が持つ。 */
.ap-dw-lk-b:not(.is-real) .ap-dw-lk-s{background:var(--pv-line)}
/* 幅は固定。★:nth-child で書く＝JS 側に数字を1つも置かないため。
     位置で決まるので、どの区分が来ても同じ形にしかならない。 */
.ap-dw-lk-b:not(.is-real) .ap-dw-lk-s:nth-child(1){flex:5 1 0}
.ap-dw-lk-b:not(.is-real) .ap-dw-lk-s:nth-child(2){flex:3 1 0}
.ap-dw-lk-b:not(.is-real) .ap-dw-lk-s:nth-child(3){flex:2 1 0}
.ap-dw-lk-b:not(.is-real) .ap-dw-lk-s:nth-child(4){flex:1 1 0}
.ap-dw-lk-b.is-real .ap-dw-lk-s:nth-child(1){flex:6 1 0}
.ap-dw-lk-b.is-real .ap-dw-lk-s:nth-child(2){flex:4 1 0}
.ap-dw-lk-b.is-real .ap-dw-lk-s:nth-child(3){flex:3 1 0}
.ap-dw-lk-b.is-real .ap-dw-lk-s:nth-child(4){flex:2 1 0}
.ap-dw-lk-b.is-real .ap-dw-lk-s:nth-child(5){flex:2 1 0}
.ap-dw-lk-b.is-real .ap-dw-lk-s:nth-child(6){flex:2 1 0}
.ap-dw-lk-b.is-real .ap-dw-lk-s:nth-child(7){flex:2 1 0}
.ap-dw-lk-b.is-real .ap-dw-lk-s:nth-child(8){flex:2 1 0}
.ap-dw-lk-b.is-real .ap-dw-lk-s:nth-child(9){flex:2 1 0}
.ap-dw-lk-l{margin-bottom:16px}
/* ★中身が空の板なので baseline では揃わない。中央で揃える。 */
.ap-dw-lk-r{opacity:.55;align-items:center}
/* 項目名は本物なので薄くしない（読めないと出す意味が無い）。 */
.ap-dw-lk-r.is-real{opacity:1}
.ap-dw-lk-p{display:block;height:11px;border-radius:999px;background:var(--pv-line)}
.ap-dw-lk-p:first-child{width:112px}
.ap-dw-lk-p2{width:74px}
.ap-dw-lk-r:nth-child(2) .ap-dw-lk-p:first-child{width:86px}
.ap-dw-lk-r:nth-child(3) .ap-dw-lk-p:first-child{width:98px}
.ap-dw-lk-r:nth-child(3) .ap-dw-lk-p2{width:58px}
/* ★本物の項目名と並ぶ側の板は、幅も全行そろえる（幅が動くと数に見える）。
     ここだけ blur を掛ける ── **中身が空の板の質感**であって、
     置いた数字を霞ませているのではない。 */
.ap-dw-lk-r.is-real .ap-dw-lk-p2{width:74px;height:13px;
  filter:blur(3px);background:var(--pv-line)}

/* 鍵の言葉。★「あと◯項目」と書かない（1つ埋めた人には嘘になる）。 */
.ap-dw-lk{padding:16px;border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);
  background:var(--pv-surface-2)}
.ap-dw-lk-t{margin:0;font-size:.82rem;font-weight:800;color:var(--pv-ink);
  line-height:1.6;line-break:strict;word-break:auto-phrase}
.ap-dw-lk-s2{margin:8px 0 0;font-size:.73rem;line-height:1.8;color:var(--pv-ink-3);
  line-break:strict;word-break:auto-phrase}
/* ★ボタンは .ap-dw-cta と同じ形。ここでは上の余白だけ詰める
     （枠の中なので 24px も空けると箱が間延びする）。 */
.ap-dw-lk-c{margin-top:14px}

/* 書かれていないものの1文。★空の枠も 0 も置かない。 */
.ap-dw-miss{margin-top:16px;padding:12px 14px;
  font-size:.75rem;line-height:1.8;color:var(--pv-ink-3);
  background:var(--pv-surface-2);border:1px solid var(--pv-line);
  border-radius:var(--pv-r-sm);
  line-break:strict;word-break:auto-phrase}

/* 同じ会社・同じ職位のほかの記録。押すと中身だけ差し替わる。 */
.ap-dw-sims{display:grid;gap:8px}
.ap-dw-sim{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  width:100%;min-height:44px;padding:10px 14px;text-align:left;
  border:1px solid var(--pv-line);border-radius:var(--pv-r-sm);
  background:var(--pv-surface);cursor:pointer;
  transition:border-color .18s var(--pv-ease),background-color .18s var(--pv-ease)}
.ap-dw-sim:hover{border-color:var(--pv-orange-ink);background:var(--pv-orange-soft)}
.ap-dw-sim:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
.ap-dw-sim:active{transform:scale(.99)}
.ap-dw-simv{font-size:.86rem;font-weight:800;color:var(--pv-ink);
  font-variant-numeric:tabular-nums}
.ap-dw-simm{font-size:.72rem;font-weight:600;color:var(--pv-ink-3);
  text-align:right;min-width:0}

/* 主 ── 他社と比べる（DEEP PAY）。★リンクではなくボタン。
   押すと左メニューと同じ門（pv-gates.js）が開く。DEEP PAY へは繋がない
   ── あちらの入口は2本だけと決めてある。 */
.ap-dw-cta{display:block;width:100%;margin-top:24px;padding:13px 18px;
  border:0;border-radius:999px;text-align:center;cursor:pointer;
  font-family:inherit;font-size:.84rem;font-weight:700;text-decoration:none;
  color:#fff;background:var(--pv-orange);
  box-shadow:0 10px 24px -14px rgba(249,115,22,.8);
  transition:background-color .18s var(--pv-ease),transform .18s var(--pv-ease)}
.ap-dw-cta:hover{background:var(--pv-orange-ink)}
.ap-dw-cta:focus-visible{outline:2px solid var(--pv-orange);outline-offset:3px}
.ap-dw-cta:active{transform:scale(.98)}
/* 副 ── 出す側へ戻す。消さずに順位だけ下げる。 */
.ap-dw-cta2{display:block;margin-top:10px;padding:11px 18px;
  border:1px solid var(--pv-line);border-radius:999px;text-align:center;
  font-size:.79rem;font-weight:700;text-decoration:none;
  color:var(--pv-ink-2);background:var(--pv-surface);
  transition:border-color .18s var(--pv-ease),color .18s var(--pv-ease),
             background-color .18s var(--pv-ease)}
.ap-dw-cta2:hover{border-color:var(--pv-orange-ink);color:var(--pv-orange-ink);
  background:var(--pv-orange-soft)}
.ap-dw-cta2:focus-visible{outline:2px solid var(--pv-orange);outline-offset:3px}
.ap-dw-note{margin-top:14px;font-size:.71rem;line-height:1.8;color:var(--pv-ink-3);
  line-break:strict;word-break:auto-phrase}

/* 狭いところでは下から出るシートにする（横スクロールを作らない）。 */
@media (max-width:720px){
  .ap-dw{top:auto;left:0;right:0;bottom:0;
    width:auto;max-width:none;
    /* ★vh を先に、dvh を後ろに。iOS の vh はアドレスバーを勘定に入れないので、
         下が切れて閉じるボタンに指が届かない（2026-09-04）。 */
    height:88vh;height:88dvh;
    border-left:0;border-top:1px solid var(--pv-line);
    border-radius:var(--pv-r-lg) var(--pv-r-lg) 0 0;
    box-shadow:0 -24px 60px -30px rgba(10,22,40,.45);
    transform:translateY(100%)}
  .ap-dw-b{padding:18px 18px 26px}
}

@media (prefers-reduced-motion:reduce){
  /* ★要素を消さない。動きだけ止める。 */
  .ap-dw-back,.ap-dw,.ap-hint,.ap-tbl tbody tr.ap-r,.ap-go,
  .ap-dw-x,.ap-dw-sim,.ap-dw-cta,.ap-dw-cta2{transition:none}
  .ap-go:active,.ap-dw-x:active,.ap-dw-sim:active,.ap-dw-cta:active{transform:none}
  .ap-dw{transform:none}
}


/* ══════════════════════════════════════════════════════════════
   絞り込みのシート（2026-09-04）
   ★口は1つも増えていない。中身は今までと同じ3つ（検索・航空会社・職位）で、
     広い幅では上の display:contents で器そのものが消え、.ap-filter の
     横1列にそのまま戻る。**別の絞り込みを作ったのではない。**
   ★作法は行を押すと出る面（.ap-dw）と同じ ── role="dialog" / aria-modal /
     焦点の閉じ込め / ×・幕・Escape の3経路 / 閉じたら開いたボタンへ焦点を戻す。
   ★サーバへは1本も投げない。数えるのも絞るのも、既に手元にある行の上でやる。
   ⚠️ 幕は**単色の rgba だけ**。後ろを霞ませない（この画面の約束・上の .ap-dw-back と同じ）。
   ══════════════════════════════════════════════════════════════ */
.ap-sh-back{position:fixed;inset:0;z-index:210;
  background:rgba(10,22,40,.52);opacity:0;
  transition:opacity .32s var(--pv-ease)}
.ap-sh-back.is-in{opacity:1}

/* ══════════════════════════════════════════════════════════════
   狭い幅（iPhone）── 表をカードに組み替える（2026-09-04）
   ★DOM は1バイトも変えていない。<table>/<thead>/<tr>/<td> はそのまま残る。
     広い幅では今までと1px も変わらず、ここだけが別の見せ方をする。
     ⚠️ カードにするために <div> へ書き換えないこと。行の押下・[data-ap-row]・
        見出し6語の照合が、全部この骨組みの上に乗っている。
   ★見出し行（thead）は消さずに読み上げ用へ逃がす。目で読む列の名前は
     セルの中の .ap-cl が持つ（JS の辞書から来る＝英語版もそのまま効く）。
   ══════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  /* ★数のカード3枚は**横に3つ並べたまま**、縦に組み替えて詰める。
       600px で1列に積む決まりだったが、iPhone だと帯が3本ぶら下がって
       **本題（1人1人の給与）が1画面目から押し出される**。
       この画面は「開いたら実給与が見えている」ことが第一。 */
  .ap-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ap-st{flex-direction:column;align-items:flex-start;gap:7px;padding:12px 11px}
  .ap-st-i{width:28px;height:28px}
  .ap-st-n{font-size:1.12rem}
  .ap-st-u{font-size:.7rem}
  .ap-st-l{margin-top:3px;font-size:.63rem;line-height:1.35;letter-spacing:0}

  /* 表を包んでいた白い箱は外す ── 箱はカード1枚1枚が持つ。 */
  .ap-tw{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .ap-tscroll{overflow-x:visible}
  .ap-tbl{display:block;font-size:.9rem}
  /* ★消さずに逃がす。列の名前が読み上げから無くなると、表であることが伝わらない。 */
  .ap-tbl thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;white-space:nowrap;clip-path:inset(50%);border:0}
  /* ★2026-09-05、オーナーが実機で見て「2件で画面いっぱい」。1枚 約295px を
       **約120px** まで詰めた（iPhone の1画面に4〜5枚）。
       減らしたのは**行数**で、消した情報は1つも無い ──
         ① 社名と年収を同じ段に上げた（1段ぶん）
         ② 機材と乗務を職位の次の行に**繋いだ**（· で区切る。2段ぶん）
         ③ 「年収」「月あたり」の見出し語を値の**前**に置いた（2段ぶん）
         ④ 内訳の凡例をいちばん大きい区分1つに絞った（JS 側の cardCompHTML。2段ぶん）
       ⚠️ 数字そのものは1つも変えていない。％も年収も面と同じ値のまま。 */
  .ap-tbl tbody{display:grid;gap:8px}
  .ap-tbl tbody tr.ap-r{display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"air amt age" "pos pos age" "vf vf vf";
    gap:2px 10px;align-items:start;
    padding:10px 12px;
    background:var(--pv-surface);border:1px solid var(--pv-line);
    border-radius:var(--pv-r);box-shadow:var(--pv-shadow)}
  .ap-tbl tbody tr.ap-r>td{display:block;min-width:0;padding:0;border:0;
    text-align:left;line-height:1.45}
  .ap-tbl tbody tr.ap-r>td:nth-child(1){grid-area:air}
  .ap-tbl tbody tr.ap-r>td:nth-child(2){grid-area:pos}
  .ap-tbl tbody tr.ap-r>td:nth-child(3){grid-area:amt;text-align:right}
  /* ★月あたりは狭い幅では伏せる（2026-09-05）。
       あれは**画面に出ている年収を12で割っただけ**で、新しい情報が1つも無い
       （JS 側の moneyMonth のコメントと同じ話）。iPhone の1画面に4〜5枚入れるために、
       職位と機材の行に幅を全部渡した。
       ⚠️ 伏せるだけで**消していない** ── 広い幅の表にも、行を押すと出る面にも
          今までどおり出る。textContent には残るので、
          「月あたり＝年収÷12」を見ている検査（assert-pay-rows.mjs）はそのまま通る。 */
  .ap-tbl tbody tr.ap-r>td:nth-child(4){display:none}
  /* 内訳の帯・凡例・出典の札を**1つの段**に畳む。帯だけが幅いっぱいで改行を作り、
     凡例と札はその下に横並びで座る（flex:none が無いと3つとも1行に潰れる）。 */
  .ap-tbl tbody tr.ap-r>td:nth-child(5){grid-area:vf;margin-top:6px;
    display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px}
  /* 投稿時期と › は右端の1列に縦積み。★› は最初から見えている（触る端末に hover は無い）。 */
  .ap-tbl tbody tr.ap-r>td:nth-child(6){grid-area:age;justify-self:end;align-self:center;
    max-width:70px;
    display:flex;flex-direction:column;align-items:center;gap:3px}
  /* ★英語の「Within 1 month」は1行で 85px ある。折り返させて列を細くし、
       その幅を社名に渡す（3行に折れていた社名が2行になる）。 */
  .ap-tbl td:last-child .ap-age{margin-right:0;white-space:normal;text-align:center}
  .ap-amt{font-size:1.05rem}
  .ap-mon{font-size:.72rem}
  /* 見出し語は値の**前**に小さく（段を1つ増やさない）。
     ★英語は ANNUAL の6文字が横幅を食う。字を落として社名に幅を渡す。 */
  .ap-cl{display:inline;margin:0 4px 0 0;font-size:.55rem;letter-spacing:.02em}
  /* 職位と機材は1行に繋ぐ。★区切りの · は機材が在るときだけ出す
     （隣接の + で見ている＝機材の無い行の頭に · がぶら下がらない）。
     ⚠️ ここに日本語を書かない。語は今までどおり JS の辞書から本物の要素で入る。 */
  .ap-pos{display:inline;font-size:.84rem}
  .ap-flt{display:inline;margin-top:0}
  .ap-pos+.ap-flt::before{content:'\00B7';margin:0 6px;color:var(--pv-ink-3)}
  /* 乗務の帯は次の行。★数字が入る行なので、機材と混ぜて折り返させない。 */
  .ap-cbh{display:block;margin-top:1px;font-size:.72rem;font-weight:600}
  .ap-cbh-k{margin-right:4px}
  .ap-cb{display:flex;flex:none;height:7px;margin-bottom:0}
  .ap-cb-l{display:flex;flex-wrap:wrap;margin-bottom:0;gap:2px 8px;min-width:0}
  /* 「ほか3区分」── 名前を出すのは最大の1つだけ、残りは数だけ言う。 */
  .ap-cb-m{flex:none}
  .ap-vf-no{padding:2px 7px;font-size:.62rem}
  .ap-shn{display:block;margin-top:10px}
  /* ★触る端末では hover が貼り付いたまま残る。押した色を作らない。 */
  .ap-tbl tbody tr.ap-r:hover,.ap-tbl tbody tr.ap-r:focus-within{background:var(--pv-surface)}
  /* hover でしか出ない予告の1行は、触る端末では永久に出ない。場所ごと空けない。 */
  .ap-hint{display:none}
  .ap-logo{width:24px;height:24px}
  .ap-cell-air{gap:8px}
  .ap-air{font-size:.84rem}
  /* 触れる的を 44px 以上に（› とページ送り）。 */
  .ap-go{width:44px;height:44px;font-size:1.15rem}
  .ap-pg{min-height:44px}
  .ap-pg--n{min-width:44px}
  /* .ap-tw の箱を外したので、ページ送りは自分で箱になる。 */
  .ap-pager{margin-top:12px;padding:12px;justify-content:center;
    border:1px solid var(--pv-line);border-radius:var(--pv-r)}

  /* ── 上に張り付く帯 ───────────────────────────────────────── */
  /* ★.mr-top（60px・sticky）のすぐ下に付ける。z は .mr-top(200) より下、
       幕(210)・シート(215)より更に下。 */
  .ap-filter{position:sticky;top:60px;z-index:100;
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:var(--pv-r-sm)}
  .ap-fbar{display:flex;align-items:center;gap:10px;min-width:0;width:100%}
  .ap-fbtn{display:inline-flex;align-items:center;justify-content:center;
    flex:none;min-height:44px;padding:10px 20px;border-radius:999px;
    border:1px solid var(--pv-line);background:var(--pv-bg);color:var(--pv-ink);
    font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;
    transition:color .18s var(--pv-ease),border-color .18s var(--pv-ease),
               background-color .18s var(--pv-ease),transform .18s var(--pv-ease)}
  .ap-fbtn:hover{color:var(--pv-orange-ink);border-color:var(--pv-orange-ink);
    background:var(--pv-orange-soft)}
  .ap-fbtn:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
  .ap-fbtn:active{transform:scale(.97)}
  .ap-fbar-n{display:inline-block;min-width:0;
    font-size:.76rem;font-weight:600;color:var(--pv-ink-3);
    font-variant-numeric:tabular-nums;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}

  /* ── 下から出るシート ─────────────────────────────────────── */
  .ap-sheet{display:none;position:fixed;left:0;right:0;bottom:0;z-index:215;
    box-sizing:border-box;max-width:100vw;
    flex-direction:column;
    max-height:86vh;max-height:86dvh;
    background:var(--pv-surface);
    border-top:1px solid var(--pv-line);
    border-radius:var(--pv-r-lg) var(--pv-r-lg) 0 0;
    box-shadow:0 -24px 60px -30px rgba(10,22,40,.45);
    transform:translateY(100%);
    transition:transform .32s var(--pv-ease)}
  /* ★開いている間だけ出す。[role] は JS が開くときに付ける印。 */
  .ap-sheet[role]{display:flex;transform:none}
  /* ⚠️ 器そのものの焦点の枠は消す。開いた瞬間 JS がここへ焦点を移すので、
       消さないと**ブラウザ既定の青い枠**がシートを一周する（ブランド色ではない）。
       焦点が消えるわけではない ── Tab を押すと中の口が1つずつ光る。 */
  .ap-sheet[role]:focus{outline:none}
  /* ★閉じるときも下へ滑らせる ── 幕が消えるまでの 0.32 秒、器を残しておくため
       body ごしに幕の有無を見る。:has() が無いブラウザは上の [role] だけが効き、
       消え方が瞬時になるだけで壊れない。 */
  body:has(.ap-sh-back) .ap-sheet{display:flex}
  body:has(.ap-sh-back:not(.is-in)) .ap-sheet{transform:translateY(100%)}

  /* ⚠️ 開いている間だけ、器（.ap-filter）ごと幕より前に出す。
       .ap-filter は position:sticky なので、それ自体が「重なりの入れ物」を作る。
       中のシートに z-index:215 と書いても、比べる相手は入れ物の中の兄弟だけで、
       body 直下の幕（210）とは比べてもらえない ── **シートが幕の裏に潜る**。
       見た目は正しく出ているのに、押した先が全部幕になって「閉じるだけ」になる
       （すべてクリアが効かない形で実際に踏んだ・2026-09-05）。
       器を 300 に上げて幕より前へ出し、器そのものは opacity:0 ＋ pointer-events:none で
       見えなく・触れなくして、シートだけが触れると名乗り直す。
       ⚠️ **visibility:hidden で消してはいけない。**あれは焦点も取り上げるので、
       閉じたときに「開いたボタンへ焦点を戻す」が黙って空振りする（実際に踏んだ）。
       opacity:0 なら焦点は残る。pointer-events:none なら上の空きを押すと幕に当たる。
       ap-sh-on は閉じた瞬間に外れるので、下へ滑る 0.32 秒ぶんは :has() が受け持つ。
       :has() を知らないブラウザのために、2組を別々の行で書く
       （1行にまとめると、読めない選択子のせいで両方まとめて捨てられる）。 */
  body.ap-sh-on .ap-filter{z-index:300;pointer-events:none;
    background:none;border-color:transparent;box-shadow:none}
  body.ap-sh-on .ap-fbar{opacity:0}
  body.ap-sh-on .ap-sheet{pointer-events:auto}
  body:has(.ap-sh-back) .ap-filter{z-index:300;pointer-events:none;
    background:none;border-color:transparent;box-shadow:none}
  body:has(.ap-sh-back) .ap-fbar{opacity:0}
  body:has(.ap-sh-back) .ap-sheet{pointer-events:auto}
  .ap-sheet-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
    flex:none;padding:16px 18px 12px;border-bottom:1px solid var(--pv-line-soft)}
  .ap-sheet-t{margin:0;font-size:.92rem;font-weight:800;letter-spacing:-.01em;
    color:var(--pv-ink)}
  .ap-sheet-x{flex:none;width:44px;height:44px;margin:-6px -8px -6px 0;
    display:grid;place-items:center;
    border:1px solid var(--pv-line);border-radius:12px;background:none;
    color:var(--pv-ink-3);font-family:inherit;font-size:1.3rem;line-height:1;cursor:pointer;
    transition:color .18s var(--pv-ease),border-color .18s var(--pv-ease),
               background-color .18s var(--pv-ease)}
  .ap-sheet-x:hover{color:var(--pv-orange-ink);border-color:var(--pv-orange-ink);
    background:var(--pv-orange-soft)}
  .ap-sheet-x:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
  .ap-sheet-x:active{transform:scale(.94)}
  /* 中だけがスクロールする（後ろのページは body の overflow で止めてある）。 */
  .ap-sheet-b{display:grid;gap:14px;align-content:start;
    padding:16px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .ap-clear{width:100%;min-height:44px}
  /* 下に固定の主ボタン。★足元は端末の丸みのぶんだけ足す。
     ⚠️ viewport-fit=cover は足さない。env() が 0 なのが正しい。 */
  .ap-sheet-ft{display:block;flex:none;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--pv-line-soft);background:var(--pv-surface)}
  .ap-sheet-go{display:block;width:100%;min-height:48px;padding:13px 18px;
    border:0;border-radius:999px;text-align:center;cursor:pointer;
    font-family:inherit;font-size:.86rem;font-weight:700;
    color:#fff;background:var(--pv-orange);
    box-shadow:0 10px 24px -14px rgba(249,115,22,.8);
    transition:background-color .18s var(--pv-ease),transform .18s var(--pv-ease)}
  .ap-sheet-go:hover{background:var(--pv-orange-ink)}
  .ap-sheet-go:focus-visible{outline:2px solid var(--pv-orange);outline-offset:3px}
  .ap-sheet-go:active{transform:scale(.98)}

  /* ── 下タブ（廃止済み）───────────────────────────────────── */
  /* ★2026-09-05、この画面から**出ていった**。オーナーの指摘
       「real pay から別のページへ移ると下のタブが消える」──
       行き先が7画面あるのに、帯が1画面にしか無いと、移った先が行き止まりに見える。
     ★2026-09-06、帯そのものを廃止した（tabs.css はファイルごと消えている）。
       狭い画面のメニューは**ヘッダーの ≡ から左に出るドロワー**が受け持つ
       ── 見た目は app-nav.css、開け閉めは app-nav.js、中身は patch-side-nav.mjs。
     ⚠️ ここに .ap-tabs を書き戻さない。この画面だけに帯を戻すと、
        上の指摘（移った先が行き止まりに見える）がそのまま再発する。 */
}

@media (prefers-reduced-motion:reduce){
  /* ★要素を消さない。動きだけ止める。 */
  .ap-sh-back,.ap-sheet,.ap-fbtn,.ap-sheet-x,.ap-sheet-go{transition:none}
  .ap-fbtn:active,.ap-sheet-x:active,.ap-sheet-go:active{transform:none}
}

/* ══════════════════════════════════════════════════════════════
   プレビュー（2026-09-13）
   鍵の無い人（未ログイン・登録しただけ）に見せる5行。中身は ap-preview.js。
   ⚠️ **プレビューの板にぼかしを1文字も書かない。** 3〜5件目に数字が出ないのは
      隠しているからではなく、あちらが annual_usd を持っていないから
      （中身の空いた板を置いているだけ）。
      このファイルで filter/blur を書いてよいのは次の3つだけ ──
        ① .ap-dw-lk-r.is-real .ap-dw-lk-p2（内訳の帯）
        ② .ap-r--mk / .ap-dw--mk の中の .ap-amt-lk-p（伏せた一覧の年収）
        ③ .ap-flt-lk（伏せた一覧の機材）
      ②③ もぼかしているのは**中身の空いた板**で、置いた数字を霞ませてはいない。
      assert-pay-rows.mjs がこの3つ以外を実測で落とす。
   ★色は既存のトークンだけ（--pv-orange* / --pv-line* / --pv-ink*）。新しい色を作らない。
   ══════════════════════════════════════════════════════════════ */

/* 見出しの横の小さな札。★「ダミー」「架空」とは書かない（JS の辞書が「プレビュー」）。 */
.ap-pv-tag{display:inline-flex;align-items:center;margin-left:8px;
  padding:3px 9px;border-radius:999px;
  background:var(--pv-orange-soft);color:var(--pv-orange-ink);
  border:1px solid rgba(249,115,22,.28);
  font-size:.62rem;font-weight:800;letter-spacing:.04em;line-height:1.4;
  vertical-align:middle}

/* 読み上げにだけ「ロック中」と伝える（見た目は板だけ）。 */
.ap-pv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;white-space:nowrap;clip-path:inset(50%);border:0}

/* 中身の空いた板。★ここに数字は入っていない。 */
.ap-amt-lk{position:relative;display:inline-flex;align-items:center;
  justify-content:flex-end;min-height:20px}
.ap-amt-lk-p{display:block;width:86px;height:13px;border-radius:999px;
  background:var(--pv-line)}
.ap-amt-lk--m .ap-amt-lk-p{width:58px;height:10px}
/* 面の上の大きな金額のところ。左揃え・.ap-dw-av と同じ高さを取る。 */
.ap-dw-av-lk{justify-content:flex-start;margin-top:4px;min-height:26px}
.ap-dw-av-lk .ap-amt-lk-p{width:104px;height:15px}

/* 表そのもの。★行の骨組みは本物と同じ（.ap-r）。 */
.ap-tbl--pv .ap-r--pv.is-lk .ap-air{color:var(--pv-ink-2)}

/* ══════════════════════════════════════════════════════════════
   伏せた一覧（2026-09-16 オーナー指示）
   鍵の無い人にも**本物の行**を出す。行ごとに見える欄が違い（2026-09-18 から。
   上の8行は1人に固定の型で決まる）、見えない欄は**サーバが渡していない**
   （db/pay-rows.sql の mask）。
   ⚠️ ここのぼかしは「置いた数字を霞ませる」ものではない。板の中は最初から空で、
      DevTools で filter を外しても出るものが1文字も無い。
   ⚠️ 板の幅を値や桁数から作らない（ch も width:auto も禁止）。幅が動くと
      それ自体が数の手がかりになる。上の .ap-amt-lk-p の固定寸法をそのまま使う。
   ⚠️ .ap-r--mk / .ap-dw--mk の下に閉じ込める。外へ出すと、プレビューの板まで
      ぼけて「数字を隠している」に見える（あちらは持っていないだけ）。
   ══════════════════════════════════════════════════════════════ */
.ap-r--mk .ap-amt-lk-p{filter:blur(3px)}
.ap-dw--mk .ap-amt-lk-p{filter:blur(3px)}

/* 機材の板。★職位の2行目（.ap-flt と同じ場所）。幅は固定。 */
.ap-flt-lk{display:inline-block;width:52px;height:11px;border-radius:999px;
  background:var(--pv-line);filter:blur(3px);vertical-align:-1px}

/* 会社・職位の板（2026-09-18）。★機材の板と同じ部品（.ap-flt-lk）で、幅だけ変える。
     ぼかしの規則を増やさない（上の1つが全部に効く）。幅は固定＝値から作らない。 */
.ap-mk-lk{position:relative;display:inline-flex;align-items:center}
/* ★スマホのカードでは社名の列が 92px より狭くなり、板が隣の「ANNUAL」に乗っていた。
     縮めてよいのは列の幅に合わせるときだけ（値からは作らない）。 */
.ap-cell-air .ap-mk-lk{min-width:0}
.ap-flt-lk--air{width:92px;height:12px}
.ap-flt-lk--pos{width:44px}

/* 見出しの下の1行（「ほかの項目は、給与を1件共有すると見られます」）。
   ★.ap-lock-h は見出しだけの規則で余白を持っていない。ここで空ける。 */
.ap-lock-sub{margin:6px 0 0;font-size:.73rem;font-weight:600;line-height:1.8;
  color:var(--pv-ink-3);line-break:strict;word-break:auto-phrase}

/* 2件目の直後に1枚だけ挟む解放案内。
   ⚠️ 全画面の覆いにしない・点滅させない・動かさない（指示書の §3）。 */
/* ⚠️ .ap-tbl td:last-child は nowrap（末尾の「投稿時期」を折らないため）。
   この段は td が1つ＝last-child なので、戻さないと英語の1文が折り返せず、
   表そのものが横に伸びて**横スクロールしないと読めない**（2026-09-13 に実際にそうなった）。 */
.ap-pv-un-r>td{padding:0;border-bottom:1px solid var(--pv-line-soft)}
.ap-tbl .ap-pv-un-r>td:last-child{white-space:normal}
.ap-pv-un{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px var(--pv-s-3);
  align-items:center;padding:18px 16px;
  background:linear-gradient(180deg,var(--pv-orange-soft) 0%,transparent 100%)}
.ap-pv-un-b{min-width:0}
.ap-pv-un-t{font-size:.86rem;font-weight:800;letter-spacing:-.01em;line-height:1.45;
  color:var(--pv-ink);line-break:strict;word-break:auto-phrase}
.ap-pv-un-s{margin-top:6px;font-size:.75rem;line-height:1.7;color:var(--pv-ink-2);
  max-width:56ch;line-break:strict;word-break:auto-phrase}
.ap-pv-un-c{flex:none;margin-top:0;white-space:nowrap}

/* プレビューに居ない会社を選んだとき。
   ★「その会社に投稿がある／ない」とは書かない（数はサーバしか持っていない）。 */
.ap-pv-msg{margin-top:16px;padding:20px 18px;
  border:1px solid var(--pv-line);border-radius:var(--pv-r);
  background:var(--pv-surface-2)}
.ap-pv-msg-t{font-size:.86rem;font-weight:800;letter-spacing:-.01em;line-height:1.45;
  color:var(--pv-ink);line-break:strict;word-break:auto-phrase}
.ap-pv-msg-s{margin-top:7px;font-size:.75rem;line-height:1.7;color:var(--pv-ink-2);
  max-width:60ch;line-break:strict;word-break:auto-phrase}

/* ヒーローの下の「すでにアカウントをお持ちの方：ログイン」。
   ★未ログインのときだけ JS が出す。登録済みの人には出さない。 */
.ap-pv-in{margin-top:14px;font-size:.75rem;font-weight:600;color:var(--pv-ink-3)}
.ap-pv-in-a{margin-left:8px;color:var(--pv-orange-ink);font-weight:800;
  text-decoration:underline;text-underline-offset:3px;
  border-radius:4px;
  transition:opacity .18s var(--pv-ease)}
.ap-pv-in-a:hover{opacity:.8}
.ap-pv-in-a:focus-visible{outline:2px solid var(--pv-orange);outline-offset:3px}
.ap-pv-in-a:active{opacity:.65}

/* ロックの帯は、骨組みのときのように真ん中へ浮かせない
   （プレビューは中身が読めるので、上に被せると読めない行が出る）。 */
.ap-lock-skel>.ap-skel-lock{position:static;transform:none;
  margin:14px auto 0;white-space:normal}
.ap-lock-skel>.ap-foot{margin-top:12px}

/* プレビューのときだけ、左右2段組を**やめて幅いっぱい**にする。
   ★1.35fr の側に本物と同じ6列の表が入るので、PC で列が潰れる。
     「REAL PAY で見えること」の節は表の下へ回す（消さない）。 */
.ap-lock-cols:has(.ap-tbl--pv),
/* ★伏せた一覧も同じ6列の表。同じ扱いにする（2026-09-16）。 */
.ap-lock-cols:has(.ap-tbl--mk){grid-template-columns:minmax(0,1fr)}

@media (max-width:720px){
  /* 430×932 を最優先（オーナー指示）。ヒーローの見出し・CTA・1件目のカードの
     主要部分が1画面目に入るよう、上の余白だけを詰める。 */
  .ap-lock-skel{padding:16px 14px}
  /* ★指示書の §3 ── プレビューの主な金額は 24〜28px。
       本物の一覧（.ap-amt は 1.05rem）は触らない。ここだけ大きくする。 */
  .ap-tbl--pv .ap-amt{font-size:1.5rem;line-height:1.25}
  .ap-tbl--pv .ap-amt-lk{min-height:30px}
  .ap-tbl--pv .ap-amt-lk-p{width:104px;height:16px}
  /* ★伏せた一覧のカードでは、年収の板（86px）が社名の列を削って
       「Lufthansa」が「ANNUAL」にくっついていた。本物の「$180K」より広かったので縮める。
       幅は固定のまま（値から作らない）。 */
  .ap-tbl--mk .ap-amt-lk-p{width:60px}
  /* 出典の欄はプレビューでは空。段を1つ空けない。 */
  .ap-tbl--pv tbody tr.ap-r>td:nth-child(5){display:none}
  /* 解放案内は、カードに組み替わった一覧の中で1枚のカードとして座る。 */
  .ap-pv-un-r{display:block}
  .ap-pv-un-r>td{display:block;border-bottom:0}
  .ap-pv-un{grid-template-columns:minmax(0,1fr);gap:12px;
    padding:16px 14px;
    background:var(--pv-surface);
    border:1px solid rgba(249,115,22,.32);border-radius:var(--pv-r);
    box-shadow:var(--pv-shadow)}
  .ap-pv-un-c{width:100%;justify-content:center;margin-top:2px}
  .ap-pv-msg{padding:16px 14px}
  .ap-pv-msg .ap-cta{width:100%;justify-content:center}
  .ap-dw-av-lk .ap-amt-lk-p{width:92px}
}

@media (prefers-reduced-motion:reduce){
  /* ★要素を消さない。動きだけ止める。 */
  .ap-pv-in-a{transition:none}
}