@font-face{font-family:'SZWordmark';src:url('/wordmark.woff2') format('woff2');
  font-display:swap;font-weight:700;unicode-range:U+6027,U+7656,U+56F3,U+9451}
/* **明るい紙が既定、暗い地は OS の設定に追従**（2026-08-25 第2回点検）。
   暗い暖色＋明朝は「書斎・酒場」の記号で「図鑑」（標本・紙）と逆方向だった。
   モノクロの表紙（索引の半分）が暗い地では白い矩形として穴を開けていた。
   書体: 見出しは端末のゴシック（Android に明朝が無く、識別要素が端末次第だった）。
   ロゴ「性癖図鑑」だけ Shippori Mincho（OFL）の4文字を自前で配る（2KB） */
:root{
  --bg:oklch(96% 0.01 85);
  --panel:oklch(99% 0.004 85);
  --card:oklch(100% 0 0);
  --ink:oklch(20% 0.02 60);
  --muted:oklch(42% 0.02 60);
  --dim:oklch(47% 0.015 60);
  --line:oklch(86% 0.01 80);
  --edge:oklch(58% 0.015 70);     /* 押せるもの・面の境界。地に対し 3:1 以上 */
  --accent:oklch(52% 0.19 35);
  --link:oklch(46% 0.17 32);
  --serif:'SZWordmark','Hiragino Mincho ProN',YuMincho,'Yu Mincho',serif;
  --sans:'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',YuGothic,Meiryo,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sp:16px;
  --r:8px;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:oklch(22% 0.014 70);
    --panel:oklch(27% 0.016 72);
    --card:oklch(30% 0.018 66);
    --ink:oklch(92% 0.016 80);
    --muted:oklch(70% 0.014 74);
    --dim:oklch(66% 0.012 70);
    --line:oklch(44% 0.016 72);
    --edge:oklch(56% 0.016 72);
    --accent:oklch(64% 0.185 36);
    --link:oklch(70% 0.17 40);
  }
}
*{box-sizing:border-box}
/* **hidden属性のトラップ。** `.gate{display:flex}` のような作者スタイルは
   UAの `[hidden]{display:none}` を上書きするので、hidden を付けても消えない。
   コミトクで3回再発し、全域ルールで恒久解決した。最初から入れておく。 */
[hidden]{display:none!important}
/* **扉はJSを待たずに出す。** head の1行(BOOT_JS)が Cookie を見て html.gated を付ける。
   [hidden] の !important より特異度が高いので、外部JSが来る前から覆いが立つ */
html.gated #gate{display:flex!important}
/* **結果ページだけ器を広げる。**(2026-08-25) 1280px の画面で6割が空いていた。
   入口・法務は読み物なので 560px のまま */
html{-webkit-text-size-adjust:100%}
/* **rem を基準にする。** px 固定だと「文字だけ大きくする」設定が
   何も効かない（実測で200%指定しても1pxも変わらなかった）。
   ページ拡大では正しく動いていたが、文字サイズだけ変える人には届かない */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
     font-size:1rem;line-height:1.7;
     padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--link)}
a:hover{color:var(--link)}
button{font:inherit;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--sp)}
/* **読み物だけ幅を絞る。** 器は1種類（1120px）。法務・運営者情報は 66ch */
.prose{max-width:66ch}
.prose h2{margin-top:32px}
/* **本文中のリンクも指で押せる高さに。** メールアドレスなどが
   高さ16pxで、隣の行と近すぎて誤タップになっていた。
   見た目を変えずに余白だけ足す（行の高さは line-height が保つ） */
/* **負の余白は使わない。**(2026-08-30 ペルソナ検査で実害を確認)
   指で押せる44pxを `padding:13px` で作り、`margin:-13px 0` で見た目の行間を
   元に戻していた。ところが**負の余白は行箱を24.75pxに縮める**のに、
   押せる箱は51pxのまま。折り返した瞬間に**上下の箱が27px重なり、
   DOMで後のリンクが前のリンクの上に乗る**。実測の被害:
     ・フッター8本すべてが「中心を押すと別のリンクが反応する」状態
       （「仕組みと限界」を押すと「プライバシーポリシー」が開く）
     ・作家ページの導入文で「四葉チェルシー」を押すと「なるころ」が開く
   **押した物と違う所へ行く**のは、見た目の乱れより重い。
   余白を0に戻し、リンクを含む行はその分だけ高くなることを受け入れる。
   （コミトクでも同じ当て木が `.linkrow` と `.colophon__nav` を壊していた） */
/* **文中のリンクは素のインラインに戻す。**(2026-08-30)
   経緯: 指で押せる44pxを `display:inline-block; padding:13px` で作っていた。
     ① `margin:-13px` で行間を戻すと**行箱だけ縮んで上下の箱が27px重なり、
        押した物と違うリンクが反応する**（フッター8本が全滅していた）
     ② 余白を0にすると重なりは消えるが、**箱51px が行送り24.75px を押し広げ、
        段落に穴が空く**（「…12人（」→穴→リンクの行→穴→「、鮭 など）。」）
   ①も②も、**文章の中のリンクを44pxに膨らませようとしたことが原因**。
   WCAG 2.5.8 は「文中にある、または非対象文字の行間で大きさが決まる対象」を
   明確に除外している。膨らませるのをやめる。
   （自前の検査 tools/sz_browser_check.py も display:inline なら除外する作り） */
.wrap p a,.wrap li a,.btn__s a,.disc a{padding:0;margin:0}
.hd{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.hd__in{max-width:1120px;margin:0 auto;padding:0 var(--sp);min-height:56px;
        display:flex;align-items:center;gap:8px}
.hd__name{font-family:var(--serif);font-size:1.12rem;font-weight:700;letter-spacing:.06em;
          text-decoration:none;color:var(--ink);flex:none;
          display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin-left:-4px}
/* **検索窓は全ページに。** 作家ページから別の作家へ行くのに、毎回トップへ戻っていた */
.hd__q{flex:1 1 120px;position:relative;min-width:0;display:flex}
.hd__q input{all:unset;box-sizing:border-box;width:100%;font-size:16px;min-height:44px;
             padding:0 12px;background:var(--panel);border:1px solid var(--edge);
             border-radius:var(--r);color:var(--ink)}
.hd__q input::placeholder{color:var(--dim)}
.hd__sug{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:0 8px;list-style:none;
         background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);
         box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:60;max-height:70vh;overflow:auto}
.hd__sug:empty{display:none}
.hd__a{flex:none;font-size:.82rem;color:var(--link);text-decoration:none;
       display:inline-flex;align-items:center;justify-content:center;gap:4px;
       min-height:44px;min-width:44px;padding:0 6px}
.hd__a b{font-family:var(--mono);font-weight:500;color:var(--muted)}
body.top .hd__q{display:none}
.bc{max-width:1120px;margin:0 auto;padding:10px var(--sp) 0;font-size:.78rem;color:var(--dim);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc a{color:var(--dim);display:inline-block;padding:12px 2px;margin:-12px 0}
.bc span{margin:0 6px}
h1{font-family:var(--sans);font-size:1.7rem;line-height:1.35;font-weight:700;
   margin:18px 0 8px;text-wrap:balance;letter-spacing:.01em}
h2{font-family:var(--sans);font-size:1.25rem;font-weight:700;margin:32px 0 10px}
h3{font-family:var(--sans);font-size:1.08rem;font-weight:700;margin:22px 0 8px}
.lead{color:var(--muted);font-size:0.91rem;margin:0 0 4px}
.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:13px;
     width:100%;min-height:64px;border:1px solid var(--edge);border-radius:var(--r);
     padding:13px 15px;cursor:pointer;user-select:none;
     -webkit-touch-callout:none;touch-action:manipulation}
.btn:hover{border-color:var(--link)}
.btn__t{font-size:0.94rem;font-weight:600}
.btn__s{font-size:0.78rem;color:var(--muted);line-height:1.5}
.btn__go{margin-left:auto;color:var(--link);font-family:var(--mono);font-size:1.1rem;flex:none}
.opts{display:grid;gap:10px}
.opts--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* **系統の棚・新着の棚**（トップ）。表紙が主役 */
.shelf{margin:30px 0 0}
.shelf__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.shelf__h h2{margin:0}
.shelf__more{font-size:.82rem;color:var(--link);white-space:nowrap;
             display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:-12px -6px}
.hero{max-width:640px}
body.top .bar{position:static;margin:12px 0 0;max-width:640px}
.hero .fld{margin-top:12px}
.btn--go{justify-content:center;background:var(--accent);color:var(--bg);
         border-color:var(--accent);font-weight:600;min-height:52px}
.fld{display:flex;align-items:center;gap:10px;background:var(--panel);
     border:1px solid var(--accent);border-radius:var(--r);padding:0 14px;
     min-height:54px}
/* iOS Safari は font-size<16px の入力欄で自動ズームする。16px を割らない */
/* **枠いっぱいに広げる。** 見た目の枠は54pxなのに、押して反応するのが
   中央の27pxだけだった（上下13pxずつが死んでいた・実測） */
.fld input{all:unset;flex:1;font-size:16px;min-width:0;color:var(--ink);
           align-self:stretch;min-height:52px}
.fld{cursor:text}
.fld__go{all:unset;flex:none;display:flex;align-items:center;justify-content:center;
         width:44px;min-height:52px;margin-right:-10px;cursor:pointer;
         touch-action:manipulation}
.fld input::placeholder{color:var(--dim)}
/* 予測候補（入口とヘッダで共通） */
.sug{list-style:none;margin:9px 0 0;padding:0;display:flex;
     flex-direction:column;gap:0}
.sug li{border-top:1px solid var(--line)}
.sug li:first-child{border-top:0}
.sug__b{all:unset;box-sizing:border-box;display:flex;align-items:center;
        justify-content:space-between;gap:10px;width:100%;min-height:52px;
        padding:0 2px;cursor:pointer;touch-action:manipulation}
.sug__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.94rem}
.sug__c{flex:none;font-family:var(--mono);font-size:0.75rem;color:var(--muted);
        max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug__k{display:inline-block;font-size:0.66rem;color:var(--dim);border:1px solid var(--line);
        border-radius:3px;padding:0 5px;margin-right:6px;vertical-align:1px}
.sug__none{font-size:0.85rem;color:var(--muted);margin:11px 0 0}
.sug__b--w .sug__n{color:var(--muted)}
.chips{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;
       -webkit-overflow-scrolling:touch;scrollbar-width:none;
       padding:2px var(--sp) 2px 0;margin:0 calc(var(--sp) * -1) 0 0;
       scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
/* **折り返して全部見せる。** 横スクロールは12人中3人しか見えず、
   動くと分かる手がかりも見切れ57pxだけだった（実測・2026-08-23） */
.chips--wrap{flex-wrap:wrap;overflow:visible;margin-right:0;padding-right:0}
.chip{all:unset;flex:none;font-size:0.88rem;border:1px solid var(--edge);
      border-radius:999px;padding:0 15px;min-height:48px;display:flex;
      align-items:center;white-space:nowrap;cursor:pointer;scroll-snap-align:start;
      touch-action:manipulation}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--bg);
                           border-color:var(--accent);font-weight:600}
.chip[aria-pressed="true"]::before{content:"✓ ";font-weight:700}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);
      padding:14px 15px}
/* --- 作家 ＋ 代表作（3つの入口が同じ形の答えを返す）------------------
   **名前だけ並べない。** 絵柄の話をしているのに絵が1枚も無い画面だった。
   代表作は「その人の代表作」ではなく**この絵柄に近い順**で選んでいる */
.au{margin:16px 0 0}
.au__h{display:flex;align-items:center;justify-content:space-between;gap:10px;
       min-height:48px;text-decoration:none;color:inherit}
.au__n{font-family:var(--sans);font-size:1.05rem;font-weight:700;
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au__go{flex:none;font-size:0.75rem;color:var(--link)}
.strip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
       -webkit-overflow-scrolling:touch;scrollbar-width:none;
       padding:0 var(--sp) 0 0;margin:0 calc(var(--sp) * -1) 0 0;
       scroll-snap-type:x proximity}
.strip::-webkit-scrollbar{display:none}
.strip__i{flex:none;width:96px;scroll-snap-align:start;text-decoration:none;
          color:inherit;display:block}
/* **7:10。** 表紙72枚を測ったら76%が縦長で、比の中央値は0.71だった。
   4:3 の枠では絵が枠の64%しか埋まらない（7:10なら87%） */
.strip__c{position:relative;aspect-ratio:7/10;background:var(--card);border:1px solid var(--edge);
          border-radius:var(--r);overflow:hidden;display:flex;align-items:center;
          justify-content:center}
.strip__c img{width:100%;height:100%;object-fit:contain}
.strip__n{margin:4px 0 0;font-size:0.68rem;line-height:1.5;color:var(--muted);
          display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
          overflow:hidden}
.strip__e{font-size:0.75rem;color:var(--dim);margin:0}
/* 絵柄が近い作家。**1作家1枚を1行に並べる**（運営者指定・2026-08-23）。
   作家ごとに帯を作ると12行=2,947pxになり、下の「絵柄が近い作品」が
   画面のはるか下へ追いやられていた */
/* **折り返して全員見せる。**(2026-08-25) 横スクロールでは12人中4人しか見えなかった。
   運営者が避けたのは「作家ごとに帯を作る」形で、1人1枚を折り返す分には
   モバイル3行・広い器なら2行に収まる */
/* **3列にする。**(2026-08-31 運営者の指示) 82pxだと402pxの画面で4列になり、
   表紙が幅87pxまで縮んで絵柄が判らなかった。3列なら約120px取れる */
.strip--au{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
           gap:12px 8px;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
.strip--au .strip__i{width:auto}
.au1__both{display:block;font-size:.68rem;color:var(--muted);margin-top:2px}
.au1__n{display:-webkit-box;margin:6px 0 0;font-size:0.8rem;line-height:1.4;
        font-weight:600;color:var(--ink);-webkit-line-clamp:2;
        -webkit-box-orient:vertical;overflow:hidden}
.rule{height:1px;background:var(--line);border:0;margin:26px 0}
.ft{border-top:1px solid var(--line);margin-top:36px;padding:18px var(--sp)
    calc(24px + env(safe-area-inset-bottom));max-width:1120px;margin-inline:auto;
    font-size:0.78rem;color:var(--dim);line-height:1.8}
/* **見た目を変えずに当たり判定だけ拡げる。** 高さ13pxでは指で押せない */
.ft a{color:var(--dim);display:inline-block;padding:11px 4px;margin:0}
.ft__warn{color:var(--muted)}
/* **本文へ飛ぶ手段。** キーボードだけの人が、毎ページでフッタの
   7リンクを通り抜けないと本文に着けない状態だった */
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;
          background:var(--accent);color:var(--bg);padding:12px 18px;
          border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skiplink:focus{left:0}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* **共有の帯。**(2026-08-29) どの面にも共有の道具が無く、貼られようが無かった。
   ボタンは2つだけ（X とコピー）。多いほど押されない */
.shr{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 0}
.shr__l{font-size:0.82rem;color:var(--muted);margin:0 4px 0 0}
/* **押せるものは 44px 以上。**(2026-08-29) 実測 43px で検査に落ちた。
   指で押す面なので、1px 足りないは「押しにくい」と同じ */
.shr__b{display:inline-flex;align-items:center;justify-content:center;gap:7px;
        padding:0 16px;min-height:44px;
        border:1px solid var(--line);border-radius:999px;background:var(--card);
        color:var(--fg);font-size:0.86rem;cursor:pointer;text-decoration:none}
.shr__b:hover{border-color:var(--fg)}
.shr__b svg{flex:none}
.shr__m{font-size:0.8rem;color:var(--muted);margin:8px 0 0;min-height:1.2em}
/* その作家らしいジャンル。**倍率を太く**して、頻度の行と見分ける */
.chip--x{border-color:var(--accent);color:var(--fg)}
.chip--x b{margin-left:5px;font-variant-numeric:tabular-nums;color:var(--accent)}
/* 前置きの見出し行。**説明は短く、要素は近くに** */
.lead--lbl{margin:16px 0 6px;font-size:0.86rem;color:var(--muted);display:flex;
           gap:8px;align-items:baseline;flex-wrap:wrap}
.lead__n{font-size:0.74rem}
.heroimg{margin:14px 0 0}
.heroimg__a{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r);color:var(--fg);
  text-decoration:none;font-size:0.94rem}
.heroimg__a svg{flex:none;color:var(--accent)}
.heroimg__go{margin-left:auto;color:var(--muted)}
.wds{margin:10px 0 0}
.wds>summary{cursor:pointer;font-size:0.82rem;color:var(--muted);min-height:44px;
             display:flex;align-items:center;gap:6px}
/* **display:flex にすると summary の三角印が消える。**(2026-08-30 ペルソナ検査)
   閉じた状態が「見出しの言い残し」にしか見えず、トップが謳う4つの入口の1つが
   事実上見えていなかった。印を自前で描いて、開くと向きが変わるようにする */
.wds>summary::before{content:"▸";display:inline-block;transition:transform .15s}
.wds[open]>summary::before{transform:rotate(90deg)}
.wds>summary::-webkit-details-marker{display:none}
/* 広告の表示。**本文の7割の大きさ**にして、帯にはしない（帯は広告そのものに見える） */
.adnote{max-width:1120px;margin:0 auto;padding:6px var(--sp) 0;
        font-size:0.72rem;line-height:1.6;color:var(--muted)}
.adnote b{color:var(--fg);font-weight:700;margin-right:6px}
/* 題材を抜く */
.wo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0}
.wo__l{font-size:0.8rem;color:var(--muted);width:100%}
.wo__b{min-height:44px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;
       background:var(--card);color:var(--fg);font-size:0.84rem;cursor:pointer}
.wo__b.is-on{border-color:var(--accent);color:var(--accent);font-weight:700}
.wo__b.is-off{color:var(--muted)}
.wo__m{font-size:0.8rem;color:var(--muted);margin:8px 0 0;min-height:1.2em}
/* 近さの種類の切替 */
.axsw{display:flex;gap:8px;margin:26px 0 0;flex-wrap:wrap}
.axsw__b{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
         min-height:44px;padding:6px 16px;border:1px solid var(--line);border-radius:12px;
         background:var(--card);color:var(--muted);font-size:0.92rem;font-weight:700;cursor:pointer}
.axsw__b span{font-size:0.72rem;font-weight:400}
.axsw__b.is-on{border-color:var(--accent);color:var(--fg);background:var(--bg)}
.axsw ~ #anear h2,.axsw ~ #ataste h2{margin-top:14px}
html.axed #ataste{display:none}
html.axed.ax-taste #ataste{display:block}
html.axed.ax-taste #anear{display:none}
/* 値下げと試し読み。**値引きは赤で、定価は打ち消して**、いくら安いかを一目に */
.it__w{display:flex;flex-direction:column}
.it__w .it{flex:1}
/* **値段の行を折り返しで壊さない。**(2026-08-29 実測) 幅150pxの帯に畳んだら
   「1001／円」と数字と単位が分かれ、PR表記まで同じ行に混ざって読めなくなった。
   金額は途中で折らず、PR表記は必ず次の行へ */
.it__p{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 6px;margin:0}
.it__v{white-space:nowrap;font-weight:700}
.it__off{color:var(--accent);font-weight:700;white-space:nowrap}
.it__l{color:var(--muted);font-size:0.86em;white-space:nowrap}
.it__x{flex-basis:100%}
/* **行き先はボタンだけ。**(2026-08-30) 表紙や題名を押しても何も起きない。
   どこへ行くかを読んでから押せる（外部＝↗、PR は値段の行に明記） */
.it__btns{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.it__go{display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;
        border:1px solid var(--accent);border-radius:10px;background:var(--accent);
        color:var(--bg);font-size:0.84rem;font-weight:700;text-decoration:none;text-align:center}
.it__go:hover{filter:brightness(1.1)}
.it__go--try{background:var(--card);color:var(--fg);border-color:var(--line);font-weight:400}
.it__go--try:hover{border-color:var(--fg)}
/* 紹介してくださる方へ（/press/）。**表ではなく定義の並び**にする（幅の狭い画面でも折り返せる） */
.kv{display:grid;grid-template-columns:7em 1fr;gap:8px 14px;margin:14px 0 0;font-size:0.9rem}
.kv dt{color:var(--muted);font-size:0.82rem;padding-top:2px}
.kv dd{margin:0}
@media (max-width:560px){.kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin:0 0 10px}}
.alist2{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:2px}
.alist2 a{display:block;min-height:44px;display:flex;align-items:center;padding:6px 10px;
          border:1px solid var(--line);border-radius:8px;background:var(--card);text-decoration:none}
/* 作家本人向けの折り畳み。**畳んでも中身はHTMLに残る**ので、索引にも引用にも渡る */
.fory{margin:20px 0 0;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.fory>summary{cursor:pointer;padding:12px 16px;font-size:0.88rem;font-weight:600}
.fory>p{margin:0 16px 12px;font-size:0.84rem;line-height:1.7;color:var(--muted)}
/* **約束の一文。**(2026-08-29) h1 の直下に置き、説明文より一段強く見せる */
.h1p{font-size:1.02rem;line-height:1.7;margin:10px 0 0;color:var(--fg);font-weight:600}
@media (min-width:700px){.h1p{font-size:1.12rem}}

.gate{position:fixed;inset:0;z-index:99;display:flex;
      background:color-mix(in oklch, var(--bg) 92%, transparent);
      -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
      overflow-y:auto;overscroll-behavior:contain}
.gate__box{margin:auto;width:min(100%,460px);padding:var(--sp);
           display:flex;flex-direction:column;gap:14px}
/* **h1 にしない。**(2026-08-25) 全ページで h1 が2つになっていた。見た目は h1 と同じ */
.gate__ttl{margin:0;font-size:23px;font-family:var(--sans);font-weight:700;
           line-height:1.4;text-wrap:balance}
.gate__warn{margin:0;font-size:0.85rem;color:var(--muted);line-height:1.7}
.gate__n{margin:0;font-family:var(--mono);font-size:0.75rem;color:var(--muted);
         font-variant-numeric:tabular-nums}
.gate__exit{display:block;text-align:center;font-size:0.85rem;color:var(--muted);
            min-height:48px;line-height:48px;text-decoration:none}
html.gated,html.gated body{overflow:hidden}

/* **すべてのCSSの最後に置くこと。** CSSは後勝ちなので、`all:unset` を使う
   ルールより前にあると輪郭が消える。ページ固有のCSS(extra_css)にも
   `all:unset` があるため、TOKENSの中に置くだけでは足りない。
   実測で34箇所の輪郭が消えており、キーボードで操作する人が
   「いまどこにいるか」を見失っていた（2026-08-23）。 */
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:6px}
.tile:focus-visible{outline-offset:3px}
/* **入力欄は枠の側に出す。** `.fld input{all:unset}` が輪郭を消すうえ、
   入力欄だけを囲っても見た目の枠(54px)とずれる。枠ごと光らせる */
.fld:focus-within{outline:2px solid var(--link);outline-offset:2px}
.fld input:focus-visible{outline:none}