: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}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
      gap:14px 12px;margin:14px 0 0}
/* **JSで描く領域は枠を先に確保する。** 確保しないと、描いた瞬間に
   フッタが押し下げられる（/a/ で CLS 0.473・/pick/ でも同じ形だった）。
   実際の件数は分からないので、最小の1行ぶんだけ取っておく。
   中身が入ったら auto に戻すので、多すぎる空白は残らない */
/* #awork は1行の横スクロールになったので、確保も1行ぶん（.asec の側で指定） */
#res:empty{min-height:0}
.it{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.it__c{position:relative;aspect-ratio:7/10;background:var(--card);
       border:1px solid var(--edge);border-radius:8px;overflow:hidden;
       display:flex;align-items:center;justify-content:center}
.it__c img{width:100%;height:100%;object-fit:contain}
.it__ph{font-size:0.69rem;color:var(--muted)}
.it__t{margin:0;font-size:0.85rem;line-height:1.45;display:-webkit-box;
       -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.it__b{margin:0;font-size:0.75rem;color:var(--muted)}
.it__p{margin:0;font-family:var(--mono);font-size:0.85rem;
       font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
/* **外部へ出ることを示す。** サイト内の詳細を期待して押した人が、
   いきなり別ドメインの販売ページに着地していた */
.it__x{font-size:0.69rem;color:var(--muted);font-family:var(--sans)}
.meta{display:flex;gap:18px;margin:6px 0 0;flex-wrap:wrap}
.meta__v{font-family:var(--mono);font-size:1.19rem;font-variant-numeric:tabular-nums}
.meta__l{font-size:0.75rem;color:var(--muted)}
.disc{font-size:0.78rem;line-height:1.6;color:var(--muted);margin:18px 0 0}
/* **PR表記（ステマ規制）。**(2026-08-23)
   DMMの案内: 「客観的に視認されると認められる範囲で『広告』『宣伝』
   『プロモーション』『PR』といった文言による表記を用い、関係性を明確に
   表示すること」。**「紹介料が入ります」だけでは足りない**（定型の語が要る）。
   コミトクと同じく、視認できるが主張しすぎないチップで「PR」1語に統一する。 */
.pr{display:inline-block;font-family:var(--mono);font-size:0.69rem;
    color:var(--muted);border:1px solid var(--line);border-radius:3px;
    padding:1px 7px;letter-spacing:.14em;margin:0 0 6px}
/* カードの中に置く小さな印。外部へ出ることの表示と並べる */
.it__x .pr,.strip__n .pr{margin:0 0 0 4px}
/* 作家ページの3段。**本人の作品は1行に畳み、似た作家と似た作品を広く取る** */
.asec{margin:24px 0 0}
.asec__h{margin:0 0 6px}
.asec__s{font-size:0.75rem;color:var(--dim);margin:0 0 8px}
.strip__p{display:block;margin:2px 0 0;font-family:var(--mono);font-size:0.72rem;
          color:var(--muted);font-variant-numeric:tabular-nums}
.strip__x{font-family:var(--sans);font-size:0.66rem;color:var(--dim);white-space:nowrap}
/* **JSで描く領域は枠を先に確保する。値は実測で決めた**（2026-08-23）。
   確保を怠って CLS 0.409 を出した。効くのは**画面の中に見えている要素**が
   動くかどうかで、いちばん効いたのは中段（絵柄が近い作家）。ここが0から
   2,947pxに伸びると、その下の見出しが一気に画面外へ飛ぶ。
   実測: 上段195px / 中段 12人で2,947px（1人222px）/ 下段 24件で4,356px */
#awork:empty{min-height:195px}
#anear:empty{min-height:560px}   /* 見出し+3行ぶん（折り返し後・2026-08-25） */
#astyle:empty{min-height:calc(((min(100vw,560px) - 44px) / 2 * 10 / 7 + 114px) * 12 + 14px)}

.znum{font-family:var(--mono);font-size:2rem;font-variant-numeric:tabular-nums;
      line-height:1.1;margin:0}
.zsum{display:flex;align-items:baseline;gap:10px;margin:14px 0 0}
.zsum__l{font-size:0.82rem;color:var(--muted)}
.zsec{margin:26px 0 0}
.zsec__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.zsec__s{font-size:0.75rem;color:var(--dim);margin:2px 0 0}
.zempty{font-size:0.88rem;color:var(--muted);line-height:1.7;margin:12px 0}
.zbody{min-height:60vh;min-height:60dvh}
/* 集めた作家の1件。代表作は横に流す */
.zk1{margin:14px 0 0}
.zk1__h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.zk1__a{min-height:48px;display:flex;align-items:center;text-decoration:none;
        color:inherit;font-family:var(--serif);font-size:1.05rem;font-weight:600;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zk1__x{all:unset;flex:none;width:48px;height:48px;display:flex;align-items:center;
        justify-content:center;color:var(--muted);cursor:pointer;
        touch-action:manipulation;font-size:0.94rem}
.zk1__x:hover{color:var(--link)}
/* **JSで描く領域は枠を先に確保する。** 確保しないと、描いた瞬間に
   下の節とフッタが押し下げられる（コミトクと性癖図鑑で計3回やっている）。
   代表作は1行ぶん、広げる節と新着は2行ぶんを取っておく */
.zk1 .strip:empty{min-height:calc(96px * 10 / 7 + 34px)}
#zgrow:empty{min-height:calc((96px * 10 / 7 + 34px + 48px) * 2 + 32px)}
#zfresh:empty{min-height:calc(((min(100vw,560px) - 44px) / 2 * 10 / 7 + 62px) * 2 + 14px)}

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