: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);     /* 押せるもの・面の境界。地に対し 3.72:1 */
  --accent:oklch(64% 0.185 36);
  --link:oklch(70% 0.17 40);
  --serif:'Hiragino Mincho ProN',YuMincho,'Yu Mincho',serif;
  --sans:'Hiragino Kaku Gothic ProN','Hiragino Sans',YuGothic,Meiryo,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sp:16px;
}
*{box-sizing:border-box}
/* **hidden属性のトラップ。** `.gate{display:flex}` のような作者スタイルは
   UAの `[hidden]{display:none}` を上書きするので、hidden を付けても消えない。
   コミトクで3回再発し、全域ルールで恒久解決した。最初から入れておく。 */
[hidden]{display:none!important}
/* **フォーム部品とスクロールバーも暗く。**(2026-08-25) 無いと明色の部品が暗い画面に載る */
:root{color-scheme:dark}
/* **扉はJSを待たずに出す。** head の1行(BOOT_JS)が Cookie を見て html.gated を付ける。
   [hidden] の !important より特異度が高いので、外部JSが来る前から覆いが立つ */
html.gated #gate{display:flex!important}
/* **結果ページだけ器を広げる。**(2026-08-25) 1280px の画面で6割が空いていた。
   入口・法務は読み物なので 560px のまま */
body.wide .wrap,body.wide .hd,body.wide .ft{max-width:880px}
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:560px;margin:0 auto;padding:0 var(--sp)}
/* **本文中のリンクも指で押せる高さに。** メールアドレスなどが
   高さ16pxで、隣の行と近すぎて誤タップになっていた。
   見た目を変えずに余白だけ足す（行の高さは line-height が保つ） */
.wrap p a,.wrap li a{display:inline-block;padding:12px 2px;margin:-12px 0}
.hd{display:flex;align-items:center;justify-content:space-between;
    padding:13px var(--sp);border-bottom:1px solid var(--line);
    max-width:560px;margin:0 auto}
/* **当たり判定を44pxに。** 実測72×29pxで、全ページに出る唯一の
   「戻る」手段なのに指で押しにくかった。見た目は変えずに余白で稼ぐ */
.hd__name{font-family:var(--serif);font-size:1.06rem;letter-spacing:.06em;
          text-decoration:none;color:var(--ink);
          display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
          margin-left:-4px}
/* **図鑑に1件でもあれば出す。** 保存した人が翌週戻っても、自分が
   保存した絵柄がどこにも無かった。URLは誰も覚えていない */
.hd__zk{font-size:0.82rem;color:var(--link);text-decoration:none;
        display:inline-flex;align-items:center;gap:5px;
        min-height:44px;padding:0 4px}
.hd__zk span{font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
h1{font-family:var(--serif);font-size:1.7rem;line-height:1.4;font-weight:600;
   margin:26px 0 8px;text-wrap:balance}
h2{font-family:var(--serif);font-size:1.32rem;font-weight:600;margin:28px 0 10px}
h3{font-family:var(--serif);font-size:1.13rem;font-weight:600;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:11px;
     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{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:10px;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)}
.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:11px;
      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(--serif);font-size:1.05rem;font-weight:600;
       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{aspect-ratio:7/10;background:var(--card);border:1px solid var(--edge);
          border-radius:7px;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行に収まる */
.strip--au{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));
           gap:12px 8px;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
.strip--au .strip__i{width:auto}
.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:560px;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:-11px 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}
}

.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(--serif);font-weight:600;
           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}

.heads{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.head{all:unset;font-size:0.94rem;border:1px solid var(--edge);border-radius:9px;
      min-width:58px;min-height:52px;display:flex;flex-direction:column;
      align-items:center;justify-content:center;cursor:pointer;
      touch-action:manipulation;padding:0 10px}
.head[aria-pressed="true"]{background:var(--accent);color:var(--bg);
                           border-color:var(--accent);font-weight:600}
.head__n{font-family:var(--mono);font-size:0.66rem;color:var(--muted)}
.head[aria-pressed="true"] .head__n{color:var(--bg)}
.alist{list-style:none;margin:16px 0 0;padding:0}
.alist li{border-top:1px solid var(--line)}
.alist li:first-child{border-top:0}
.alist a{display:flex;align-items:center;justify-content:space-between;gap:10px;
         min-height:52px;text-decoration:none;color:var(--ink);padding:0 2px}
.alist__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alist__c{flex:none;font-family:var(--mono);font-size:0.72rem;color:var(--muted);
          font-variant-numeric:tabular-nums}
#ahead:empty{min-height:118px}
#alist:empty{min-height:420px}
.alist__more{all:unset;box-sizing:border-box;display:flex;align-items:center;
             justify-content:center;width:100%;min-height:52px;cursor:pointer;
             color:var(--link);font-size:0.94rem;touch-action:manipulation}

/* **すべての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}