/* =====================================================================
   illustBox — 共通スタイル
   テーマ「Signal — 墨と、一本の青線」

   考え方:
   - 地は無彩に寄せた墨。前版「Nocturne」の褐色がかった黒は官能寄りの空気を
     つくっていたが、今版は編集（エディトリアル）寄りに振り、
     作品の色を地の色で染めないことを最優先にする。
   - 色は紅ひとつだけ。しかも「線と印」にしか置かない
     （現在地の下線・章見出しの罫・扉の一線・PR と非公開のバッジ）。
     ボタンの主従は色ではなく白黒の反転で表す。主ボタンだけが磁器白の面になる。
   - 書体は1本（システムフォント）に統一する。以前は 明朝(見出し)×ディドーネ(数字)
     ×サンセリフ(本文) の3書体を使い分けていたが、狙った「誌面らしさ」より先に
     読みにくさが立っていた。ここは読ませる場所なので、素直に読めることを優先する。
     字間も詰めた（日本語は開けるほど語のまとまりが崩れる）。
   - 動きは増やさない。唯一ゆっくり動くのは画像の輝度（700ms）のまま。

   ウェブフォントは読み込まない。全部システムフォントなので、外部への接続も
   FOUT（表示途中で書体が入れ替わるチラつき）も起きない。
   ===================================================================== */

/* =============================================
   トークン
   ============================================= */
:root {
    color-scheme: dark;

    /* ── 面 ──
       公開ページは基本的に「面」を持たない。地の上に作品と罫があるだけ。
       面を使うのはフォーム・管理・単独ページ（＝道具）に限る。 */
    --bg:           #0b0b0c;   /* 無彩の墨。作品の色温度に干渉させない */
    --bg-sunken:    #070708;   /* 画像ウェル・広告帯 */
    --bg-card:      #121214;   /* パネル（フォーム・管理・モーダル） */
    --bg-surface:   #19191c;   /* 入力欄・チップの面 */
    --bg-raised:    #222226;   /* 予備の一段（現状は未使用。持ち上げ面が要るとき用） */
    --header-bg:    rgba(11, 11, 12, 0.86);

    /* ── 罫 ──
       暗地では線を「引く」のではなく「わずかに明るい隙間」として置く。 */
    --hairline:      rgba(236, 236, 240, 0.07);
    --border:        #26262a;
    --border-strong: #3a3a40;

    /* ── 文字 ── 磁器白の4段。地と同じく無彩で揃える。 */
    --tx-primary:   #ececee;   /* 見出し・本文。磁器白。地の上 15.9:1 */
    --tx-secondary: #b8b8bf;   /* 読ませる散文。9.5:1 */
    /* 以下2段は「一番明るい面（--bg-surface）の上でも AA を満たすこと」を条件に選ぶ。
       地(--bg)の上だけで測ると、パネル上に置いた瞬間に基準を割る。 */
    --tx-muted:     #a4a4ac;   /* メタ情報。地の上 7.2:1 / パネル上 6.4:1 */
    --tx-quiet:     #8e8e96;   /* さらに静かな情報（日付・件数・表の見出し）。5.4:1 / 4.8:1 */
    /* 罫と区切り記号だけに使う。情報を持つ文字には使わない
       （ここを文字色に流用して 2:1 まで落ちていたのを分離した）。 */
    --tx-deco:      #55555c;

    /* ── 差し色 ──
       紅。面・罫・バッジの地に使う。文字色には使わない。 */
    /* 紅から青緑へ替えた。この site の絵は肌・桃色・暖色が主で、同じ暖色の紅を
       UI に置くと線や印が作品に溶けて「操作できる物」に見えない。寒色に振ると
       UI が絵から分離し、絵の暖色も引き立つ。役割（面/罫）の規則は変えない。 */
    --accent:       #17707e;   /* 面（バッジ）用。磁器白の文字で 4.9:1 */
    --accent-soft:  #35c9df;   /* 罫・下線・印 専用。地の上 9.9:1。文字色にも地色にもしない */
    /* dim / faint は soft の派生（活性状態の枠と 10% の紅の面）。
       選択色とチェックボックスの --accent も「印」の扱いで許容している。 */
    --accent-dim:   rgba(53, 201, 223, 0.32);
    --accent-faint: rgba(53, 201, 223, 0.10);
    /* 強調文字は磁器白に一本化する。変数名は旧版（薄紅）の互換で残す。
       紅を文字にしない規則は前版から変えない（小さい文字では AA を割るため）。 */
    --rose:         #f2f2f4;

    --success:      #7fa98c;
    --danger:       #c86a66;

    /* ── 奥行き ──
       暗地に黒い影を落としても物理的に見えない。上端1pxの明かりで面の立ち上がりを示す。 */
    --elev-1: inset 0 1px 0 var(--hairline);
    --elev-2: inset 0 1px 0 var(--hairline), 0 2px 10px rgba(0, 0, 0, 0.55);

    /* ── モーション ──
       速い動きは即物的。画像だけは 700ms かけて明るくする。 */
    --dur-fast: 140ms;
    --dur-base: 260ms;
    --dur-slow: 700ms;
    --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── 書体 ──
       1書体に統一する。以前は 明朝(見出し)×ディドーネ(数字)×サンセリフ(本文) の
       3書体を使い分けていたが、狙いの「誌面らしさ」より先に読みにくさが立っていた。
       ここは読ませる場所なので、素直に読めることを優先する。

       全部システムフォント＝ウェブフォントの取得が無いので、
       初回表示で書体が入れ替わるチラつき（FOUT）も起きない。
       Windows は Yu Gothic UI / BIZ UDPGothic、mac・iOS は Hiragino Sans、
       Android は Noto Sans JP に落ちる。どれも本文用に作られた書体。

       display / mark は互換のために変数を残してあるだけで、中身は body と同じ。
       （個別に指定している箇所を全部書き換えるより、変数を潰す方が事故が少ない） */
    --font-body:    system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans',
                    'Noto Sans JP', 'Yu Gothic UI', 'BIZ UDPGothic', Meiryo, sans-serif;
    --font-display: var(--font-body);
    --font-mark:    var(--font-body);

    /* ── タイプスケール（比 1.25 前後）── */
    --fs-2xs:  0.70rem;   /* 11.2px  PR・フロアバッジ・枚数 */
    --fs-xs:   0.78rem;   /* 12.5px  メタ・パンくず・キャプション・価格 */
    --fs-sm:   0.875rem;  /* 14px    タグ・ボタン・ナビ */
    --fs-md:   1rem;      /* 16px    本文・リード */
    --fs-lg:   1.25rem;   /* 20px    空状態見出し・モーダル見出し */
    --fs-xl:   1.75rem;   /* 28px    ページ h1 */
    --fs-hero: clamp(1.9rem, 4.6vw, 3rem);

    /* ── 余白（4px基底）── 章=--sp-7 / 見出し下=--sp-4 / グループ内=--sp-2 */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    /* ── シェル幅 ── ヘッダー・本文・フッターで揃える */
    /* 1280 だと今どきのワイドモニタで両脇が空きすぎる（実際に残念と言われた） */
    --shell-max:    1600px;
    --shell-narrow: 1100px;
    --shell-pad:    20px;

    /* 画像は角を落とさない（誌面の版面に見せる）。部品だけ 2px。 */
    /* 読ませる誌面ではなく探させる一覧なので、道具らしく僅かに丸める */
    --radius:    3px;
    --radius-lg: 4px;
    --header-h:  64px;
}

@media (max-width: 767px) {
    :root { --shell-pad: 16px; --header-h: 56px; }
}

/* スクロールバーも地の続きにする */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-sunken); }
::-webkit-scrollbar-thumb { background: #2a2a2f; border: 2px solid var(--bg-sunken); }
::-webkit-scrollbar-thumb:hover { background: #3d3d44; }

/* =============================================
   基礎
   ============================================= */
* { box-sizing: border-box; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* アンカー着地がヘッダーの下に潜らないように */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--tx-primary);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

/*
 * 周辺減光。画面の縁だけをごく薄く落とし、視線を版面の中央に留める。
 * 前版にあった上辺の暖色の照明は撤去した（官能の演出はこの版では使わない）。
 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(100% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.36) 100%);
}

/*
 * フィルムグレイン。印画紙の粒子。
 * 動かさない・薄くする（0.035）。これが濃いと「加工した感」が出て安っぽくなる。
 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; }

/* 選択色。ブラウザ既定の青はこの誌面から浮く */
::selection { background: var(--accent); color: var(--tx-primary); }

/* Firefox 用のスクロールバー配色（WebKit 側は別途指定済み） */
html { scrollbar-color: #34343a var(--bg-sunken); scrollbar-width: thin; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--tx-primary);
    margin: 0;
}

/* ── ワードマーク ──
   1書体に統一したのでイタリックはやめる。斜体のシステムサンセリフは
   「意図した書体」ではなく「崩れ」に見えるため。太さと字間だけで銘にする。 */
.wordmark {
    font-family: var(--font-mark);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--tx-primary);
    display: inline-block;
    line-height: 1;
}
.wordmark-sm   { font-size: 1.32rem; }
.wordmark-pane { font-size: 1.6rem; }
.wordmark-hero { font-size: clamp(2rem, 6vw, 3.2rem); }

a {
    color: var(--tx-primary);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease);
}
a:hover { color: var(--rose); }

/* 本文中のリンクだけは下線で存在を示す（罫は紅） */
.lead a, .empty-state a, .pane p a, .footer-note a, .gallery-description a {
    background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    padding-bottom: 1px;
}
.lead a:hover, .empty-state a:hover, .pane p a:hover {
    background-image: linear-gradient(var(--rose), var(--rose));
}

/* ── フォーカス ──
   キーボード操作の可視性は落とさない。紅の輪郭で示す。 */
:focus-visible {
    /* 紅だと地の上 3.6:1 で見つけにくい。ここは意匠より視認性を優先して磁器白にする */
    outline: 2px solid var(--rose);
    outline-offset: 2px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline-offset: 0; }

/* 押した瞬間のフィードバックだけは即時に返す */
.btn:active,
.tag-link:active,
.tag-cloud-item:active,
.page-link:active,
.fanza-card:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================
   スキップリンク
   ============================================= */
.skip-link {
    position: absolute;
    top: -60px;
    left: 8px;
    z-index: 200;
    background: var(--bg-card);
    color: var(--tx-primary);
    border: 1px solid var(--accent-soft);
    padding: 10px 16px;
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    transition: top var(--dur-base) var(--ease);
}
.skip-link:focus { top: 8px; }

/* =============================================
   ヘッダー
   ============================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--hairline);
}
.site-header-inner {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}

.site-brand { flex: none; display: flex; align-items: center; }
.site-brand .wordmark { transition: color var(--dur-base) var(--ease); }
.site-brand:hover .wordmark { color: var(--rose); }

.site-nav { flex: 1 1 auto; min-width: 0; }
.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--sp-5);
    align-items: center;
}
.site-nav li { margin: 0; }
.site-nav a {
    position: relative;
    display: inline-block;
    padding: 4px 0;
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--tx-muted);
    white-space: nowrap;
}
/* 現在地は「下に引かれた紅の罫」で示す。色だけで示すより静かで確実 */
.site-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: var(--accent-soft);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease);
}
.site-nav a.is-current { color: var(--tx-primary); }
.site-nav a.is-current::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
    .site-nav a:hover { color: var(--tx-primary); }
    .site-nav a:hover::after { transform: scaleX(1); }
}

.site-header-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

/* 検索。枠を描かず、下罫1本だけで「入力できる場所」を示す */
.header-search {
    display: none;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    transition: border-color var(--dur-base) var(--ease);
}
@media (min-width: 900px) { .header-search { display: flex; } }
.header-search:focus-within { border-color: var(--accent-soft); }
.header-search input {
    width: 150px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--tx-primary);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    padding: 6px 2px;
    transition: width var(--dur-base) var(--ease);
}
.header-search input::placeholder { color: var(--tx-quiet); }
.header-search:focus-within input { width: 210px; }
.header-search button {
    flex: none;
    background: transparent;
    border: none;
    color: var(--tx-muted);
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color var(--dur-base) var(--ease);
}
.header-search button:hover { color: var(--rose); }

/* 狭い画面用のフォールバック */
.header-search-link {
    display: flex;
    align-items: center;
    color: var(--tx-muted);
    padding: 6px;
}
@media (min-width: 900px) { .header-search-link { display: none; } }
.header-search-link:hover { color: var(--rose); }

.nav-outline {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    padding: 5px 14px;
    font-size: var(--fs-sm);
    letter-spacing: 0.1em;
    color: var(--tx-muted);
    transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.nav-outline:hover { border-color: var(--accent-soft); color: var(--tx-primary); }

/* =============================================
   管理バー — 公開ナビとは別の層（道具である、と見た目で分ける）
   ============================================= */
.admin-bar {
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--hairline);
    border-top: 1px solid var(--accent-dim);
}
.admin-bar-inner {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
    height: 40px;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.admin-bar-label {
    flex: none;
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
    color: var(--rose);
    text-transform: uppercase;
}
.admin-bar-nav {
    flex: 1 1 auto;
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}
.admin-bar-nav::-webkit-scrollbar { display: none; }
.admin-bar-nav a {
    flex: none;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    color: var(--tx-muted);
    padding: 4px 0;
}
.admin-bar-nav a:hover { color: var(--tx-primary); }
.admin-bar-logout { flex: none; margin: 0; }
.admin-bar-logout button {
    background: transparent;
    border: 1px solid transparent;
    color: var(--tx-muted);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    padding: 3px 10px;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.admin-bar-logout button:hover { color: var(--tx-primary); border-color: var(--border); }
/* バックアップ異常の告知。管理者にしか描画されないので、遠慮せず目に入る強さで出す。 */
.admin-bar-alert {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: var(--sp-2) var(--shell-pad);
    border-top: 1px solid var(--rose);
    color: var(--rose);
    font-size: var(--fs-xs);
}

@media (max-width: 899px) {
    .admin-bar-inner { gap: var(--sp-3); }
}

/* =============================================
   レイアウト
   ============================================= */
.container {
    max-width: var(--shell-narrow);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
}
.container-wide { max-width: var(--shell-max); }

.main-content {
    padding: var(--sp-7) 0 var(--sp-8);
    background: transparent;
}
/* 「面を持たない」ページ（一覧・詳細・トップ） */
.main-content.is-plain { padding-top: var(--sp-6); }

.main-content h1 {
    font-size: var(--fs-xl);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.45;
    margin: 0 0 var(--sp-4);
}
.main-content > h2:not(.section-title) {
    font-size: var(--fs-lg);
    font-weight: 500;
    letter-spacing: 0.06em;
    margin: var(--sp-7) 0 var(--sp-4);
}

/* ── 章見出し ──
   左の紅い短い罫はそのまま（テーマの目印）。文字は 12.5px・字間0.1em の
   「小さな柱」だったが、見出しとして拾いにくかったので本文サイズまで上げ、
   太さで差をつける。字間はほぼ詰める。 */
.section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--tx-primary);
    text-transform: none;
    margin: var(--sp-8) 0 var(--sp-4);
}
.section-title::before {
    content: "";
    flex: none;
    width: 26px;
    height: 1px;
    background: var(--accent-soft);
}
.section-title:first-child { margin-top: 0; }

.lead {
    font-size: var(--fs-md);
    line-height: 2;
    color: var(--tx-secondary);
    margin: 0 0 var(--sp-5);
    max-width: 72ch;
}
.lead b { color: var(--rose); font-family: var(--font-mark); font-variant-numeric: tabular-nums; font-weight: 400; font-size: 1.14em; }

/* =============================================
   パンくず
   ============================================= */
.breadcrumb { margin: 0 0 var(--sp-5); }
.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    color: var(--tx-muted);
}
.breadcrumb li + li::before {
    content: "/";
    margin-right: 6px;
    color: var(--tx-deco);
}
.breadcrumb a { color: var(--tx-muted); }
.breadcrumb a:hover { color: var(--rose); }

/* =============================================
   一覧グリッド
   カードの縁取りも影も置かない。画像そのものを版面に並べる。
   ============================================= */
.work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-3);
    align-content: start;
}
@media (min-width: 560px)  { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); } }
@media (min-width: 900px)  { .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .work-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-5); } }
@media (min-width: 1600px) { .work-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* 超ワイド（2560px級）ではコンテナごともう一段広げ、カードが間延びしないよう7列に */
@media (min-width: 1900px) {
    :root { --shell-max: 1840px; }
    .work-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .work-grid.compact { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* 関連ギャラリーなど従属的な枠 */
.work-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); }
@media (min-width: 768px)  { .work-grid.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .work-grid.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.work-grid.compact .work-title { -webkit-line-clamp: 1; min-height: 0; font-size: var(--fs-xs); }
.work-grid.compact .work-meta  { display: none; }

.work-item { position: relative; min-width: 0; }

.work-link { display: block; color: inherit; }
.work-link:focus-visible { outline: none; }
.work-link:focus-visible .work-thumb { box-shadow: inset 0 0 0 2px var(--rose); }

.work-thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    background: var(--bg-sunken);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--hairline);
    transition: box-shadow var(--dur-base) var(--ease);
}
.work-thumb img {
    width: 100%;
    height: 100%;
    /* SD の既定出力は 832x1216 の縦長。4/5 セルに収めると高さの14.5%が落ちるので、
       上寄りに置いて顔を残す（下端は脚と床で情報量が低い）。 */
    object-fit: cover;
    object-position: 50% 22%;
    display: block;
    /* 既定はわずかに沈めておき、ホバーでゆっくり起こす。
       この「遅い明るさの変化」がこのサイトの唯一の動きらしい動き。 */
    filter: brightness(0.94) saturate(0.98);
    transition: filter var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
    .work-link:hover .work-thumb img { filter: brightness(1.06) saturate(1.02); transform: scale(1.02); }
    .work-link:hover .work-thumb { box-shadow: inset 0 0 0 1px var(--accent-dim); }
    .work-link:hover .work-title { color: var(--tx-primary); }
    .work-link:hover .work-title::after { transform: scaleX(1); }
}
.work-link:active { transform: none; }

.work-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mark);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    color: var(--tx-quiet);
}

/* 枚数。塗りのピルではなく、暗幕の上にディドーネの数字を置く */
.work-count {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    gap: 2px;
    padding: 5px 9px 4px 14px;
    background: linear-gradient(to left, rgba(7, 7, 8, 0.82) 55%, transparent 100%);
    font-family: var(--font-mark);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    color: var(--rose);
    letter-spacing: 0.02em;
    pointer-events: none;
}
.work-count .unit {
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    color: var(--tx-muted);
    letter-spacing: 0.04em;
}

.work-private {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--accent);
    color: var(--tx-primary);
    font-size: var(--fs-2xs);
    letter-spacing: 0.06em;
    padding: 3px 8px;
    pointer-events: none;
}

.work-edit {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    background: rgba(7, 7, 8, 0.82);
    border: 1px solid var(--border);
    color: var(--tx-muted);
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
    padding: 3px 9px;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.work-edit:hover { color: var(--tx-primary); border-color: var(--accent-soft); }

/* タイトルは明朝。ホバーで下に紅の罫が引かれる */
.work-title {
    position: relative;
    /* 2行で打ち切る。block ではなく -webkit-box が要る */
    display: -webkit-box;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.05em;
    color: var(--tx-secondary);
    margin-top: 11px;
    padding-bottom: 3px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: calc(1.65em * 2);
    transition: color var(--dur-base) var(--ease);
}
.work-title::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--accent-soft);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease);
}

.work-meta {
    display: block;
    font-size: var(--fs-2xs);
    letter-spacing: 0.06em;
    color: var(--tx-quiet);
    margin-top: 5px;
}

@media (max-width: 559px) {
    .work-title { font-size: var(--fs-xs); }
}

/* =============================================
   タグ
   ============================================= */
/* .tag-chips / .tag-chip は共通部品 TagChips ごと削除済み（どのページも使っていなかった）。
   タグの見た目は .tag-link（詳細ページ）・.work-tag（一覧カード）・.tag-cloud-item（タグ一覧）が持つ。 */
.tag-link {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--tx-secondary);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    padding: 4px 11px;
    transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .tag-link:hover { border-color: var(--accent-soft); color: var(--tx-primary); }
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-5) 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--hairline);
}
.tag-label {
    flex: none;
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
    color: var(--tx-muted);
    margin-right: var(--sp-2);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.tag-tail { margin-top: var(--sp-5); }
.tag-tail summary {
    cursor: pointer;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    color: var(--tx-muted);
    padding: 6px 0;
}
.tag-tail summary:hover { color: var(--tx-primary); }

.tag-cloud-item {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    border: 1px solid var(--border);
    padding: 5px 12px;
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    color: var(--tx-secondary);
    transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .tag-cloud-item:hover { border-color: var(--accent-soft); color: var(--tx-primary); }
}
.tag-cloud-item .cnt {
    font-family: var(--font-mark);
    font-variant-numeric: tabular-nums;
    font-size: 0.86rem;
    color: var(--tx-quiet);
    letter-spacing: 0;
}
/* 件数が多いタグほど大きく。3段だけ。 */
.tag-cloud-item[data-weight="3"] {
    font-size: var(--fs-md);
    border-left: 2px solid var(--accent-soft);
    color: var(--tx-primary);
    padding-left: 13px;
}
.tag-cloud-item[data-weight="3"] .cnt { color: var(--rose); }
.tag-cloud-item[data-weight="2"] { font-size: var(--fs-sm); }
.tag-cloud-item[data-weight="1"] { font-size: var(--fs-xs); color: var(--tx-muted); }
.tag-cloud-item[hidden] { display: none !important; }

/* =============================================
   ボタン
   塗りは使わず、罫と字間で階層を出す。
   主ボタンだけ磁器白の面（白黒の反転）。紅の塗りボタンは持たない。
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: 0.06em;
    padding: 11px 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--tx-secondary);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--dur-base) var(--ease),
                color var(--dur-base) var(--ease),
                background-color var(--dur-base) var(--ease);
}
.btn-primary {
    /* 主従は色ではなく反転で示す。この面が画面で最も明るい場所＝押す場所になる */
    background: var(--tx-primary);
    border-color: var(--tx-primary);
    color: var(--bg);
}
.btn-secondary { border-color: var(--border-strong); color: var(--tx-primary); }
.btn-quiet     { border-color: transparent; color: var(--tx-muted); padding-left: 12px; padding-right: 12px; }

@media (hover: hover) and (pointer: fine) {
    .btn:hover          { border-color: var(--accent-soft); color: var(--tx-primary); }
    .btn-primary:hover  { background: #ffffff; border-color: #ffffff; color: var(--bg); }
    .btn-quiet:hover    { border-color: var(--border); }
}

.btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.button-action, .delete-button, .button-edit {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--tx-muted);
    cursor: pointer;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.delete-button { color: var(--danger); border-color: rgba(200, 106, 102, 0.35); }
@media (hover: hover) and (pointer: fine) {
    .button-action:hover, .button-edit:hover { color: var(--tx-primary); border-color: var(--border-strong); }
    .delete-button:hover { color: #e08a86; border-color: var(--danger); }
}

/* =============================================
   フォーム / 検索
   ============================================= */
.form-group { margin-bottom: var(--sp-5); }
.form-group label {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    color: var(--tx-muted);
    margin-bottom: var(--sp-2);
}
.form-group input[type="text"],
.form-group input[type="search"],
.form-group input[type="password"],
.form-group textarea,
.form-control {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--tx-primary);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    letter-spacing: 0.02em;
    padding: 11px 14px;
    outline: none;
    transition: border-color var(--dur-base) var(--ease);
}
.form-group textarea { line-height: 1.8; resize: vertical; }
.form-group input[type="text"]:focus,
.form-group input[type="search"]:focus,
.form-group input[type="password"]:focus,
.form-group textarea:focus,
.form-control:focus { border-color: var(--accent-soft); }
.form-group input::placeholder,
.form-control::placeholder { color: var(--tx-quiet); }

.form-group input[type="file"] {
    width: 100%;
    color: var(--tx-muted);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
}
.form-group input[type="file"]::file-selector-button {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--tx-secondary);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    padding: 8px 16px;
    margin-right: var(--sp-3);
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.form-group input[type="file"]::file-selector-button:hover { border-color: var(--accent-soft); color: var(--tx-primary); }

.form-group input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    margin-right: var(--sp-2);
}

.help-text {
    font-size: var(--fs-xs);
    color: var(--tx-muted);
    line-height: 1.8;
    margin-top: 6px;
}
.checkbox-label { display: inline; font-weight: 400; letter-spacing: 0.04em; color: var(--tx-secondary); }
.form-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-top: var(--sp-6); }

/* 道具のページは面を持たせる */
.login-form,
.edit-form,
.upload-section {
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    padding: var(--sp-6);
}
.login-form { max-width: 420px; margin: 0 auto; }
.edit-form  { max-width: 660px; }
.upload-section { margin-bottom: var(--sp-5); }
.upload-section h2 {
    font-size: var(--fs-lg);
    letter-spacing: 0.08em;
    margin: 0 0 var(--sp-4);
}
.login-form h1, .login-form h2 { margin-bottom: var(--sp-5); }

.search-bar-wrap { margin: 0 0 var(--sp-6); }
.search-bar-wrap form { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
/* 900px 以上ではヘッダーの常設検索と排他にする */
@media (min-width: 900px) { .search-bar-narrow { display: none; } }

.search-input {
    flex: 1 1 240px;
    min-width: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    color: var(--tx-primary);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    letter-spacing: 0.03em;
    padding: 9px 2px;
    outline: none;
    transition: border-color var(--dur-base) var(--ease);
}
.search-input:focus { border-bottom-color: var(--accent-soft); }
.search-input::placeholder { color: var(--tx-quiet); }

.filter-clear {
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    color: var(--tx-muted);
    margin-left: var(--sp-3);
    border-bottom: 1px solid var(--border);
    padding-bottom: 1px;
}
.filter-clear:hover { color: var(--rose); border-bottom-color: var(--accent-soft); }

/* 並び替え */
.sort-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin: 0 0 var(--sp-6);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--hairline);
}
.sort-nav .sort-label {
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
    color: var(--tx-quiet);
}
.sort-nav a {
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    color: var(--tx-muted);
    padding: 2px 0;
    border-bottom: 1px solid transparent;
}
.sort-nav a.active { color: var(--tx-primary); border-bottom-color: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) {
    .sort-nav a:hover { color: var(--tx-primary); }
}

/* =============================================
   ページネーション
   ============================================= */
.pagination-nav { margin: var(--sp-7) 0; }
.pagination {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.pagination li { margin: 0; }
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-family: var(--font-mark);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tx-muted);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .page-link:hover { color: var(--tx-primary); border-color: var(--border); }
}
.page-link.active {
    color: var(--tx-primary);
    border-color: var(--accent-soft);
    background: var(--accent-faint);
}
.page-link.disabled { opacity: 0.35; pointer-events: none; }
.dots { color: var(--tx-deco); padding: 0 4px; }
.page-info { font-size: var(--fs-xs); color: var(--tx-muted); letter-spacing: 0.08em; }
.pagination-controls { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* =============================================
   メッセージ / 空状態
   ============================================= */
.success-message,
.error-message {
    border-left: 2px solid var(--success);
    background: rgba(127, 169, 140, 0.07);
    color: var(--tx-primary);
    font-size: var(--fs-sm);
    line-height: 1.8;
    padding: var(--sp-3) var(--sp-4);
    margin: 0 0 var(--sp-5);
}
.error-message {
    border-left-color: var(--danger);
    background: rgba(200, 106, 102, 0.08);
}

.empty-state {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.empty-state h2 {
    font-size: var(--fs-lg);
    font-weight: 400;
    letter-spacing: 0.08em;
    margin: 0 0 var(--sp-3);
}
.empty-state p { color: var(--tx-secondary); margin: 0 0 var(--sp-5); }
.empty-state .btn-group { justify-content: center; }

/* =============================================
   トップページ ヒーロー
   ============================================= */
.hero {
    padding: var(--sp-7) 0 var(--sp-8);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: var(--sp-8);
}
/* 見出しの上に短い紅の罫を1本。扉ページの合図 */
.hero::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background: var(--accent-soft);
    margin-bottom: var(--sp-5);
}
/*
 * .main-content h1 （詳細度 0,1,1）が .hero-title（0,1,0）に勝ってしまい、
 * トップの大見出しがページ h1 と同じ 28px で出ていた。
 * 親クラスを足して詳細度で上回らせる。
 */
.hero .hero-title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: 0.08em;
    margin: 0 0 var(--sp-4);
    max-width: none; /* ch は半角基準。和文16字に 20ch は足りず「ギャラ/リー」で折れていた */
}
.hero .sub {
    font-size: var(--fs-md);
    line-height: 2.05;
    color: var(--tx-secondary);
    max-width: 56ch;
    margin: 0 0 var(--sp-6);
}
.hero-btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6);
    margin: var(--sp-6) 0 0;
}
.hero-stats a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--tx-muted);
    font-size: var(--fs-2xs);
    letter-spacing: 0.08em;
}
.hero-stats a:hover { color: var(--tx-primary); }
.hero-stats b {
    font-family: var(--font-mark);
    font-variant-numeric: tabular-nums;
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1;
    color: var(--rose);
    letter-spacing: 0.02em;
}

.view-all-btn { display: flex; justify-content: center; margin-top: var(--sp-7); }

/* =============================================
   ギャラリー詳細
   ============================================= */
.gallery-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    color: var(--tx-muted);
    margin: 0 0 var(--sp-4);
}
.gallery-meta .sep { color: var(--tx-deco); }
.gallery-meta a { color: var(--tx-secondary); }
.gallery-meta a:hover { color: var(--rose); }

/* 管理操作の帯。破線と紅ラベルで「道具の層」だと示す */
.admin-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 8px var(--sp-4);
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    color: var(--tx-muted);
}
.admin-strip-label {
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
    color: var(--rose);
}
.admin-strip .st-public  { color: var(--success); }
.admin-strip .st-private { color: var(--tx-muted); }
.admin-strip a { color: var(--tx-secondary); }
.admin-strip a:hover { color: var(--rose); }
.admin-strip-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--tx-muted);
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
    padding: 3px 10px;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.admin-strip-btn:hover { color: var(--tx-primary); border-color: var(--accent-soft); }
/* 削除（非公開の作品にだけ出る）。取り消せない操作なので、ほかのボタンと色で分ける */
.admin-strip-danger { color: var(--danger); border-color: rgba(200, 106, 102, 0.35); }
.admin-strip-danger:hover { color: #e08a86; border-color: var(--danger); }

/* 説明文は本文らしく組む。明朝にはせず、行間を広く取る */
.gallery-description {
    font-size: var(--fs-md);
    line-height: 2.1;
    color: var(--tx-secondary);
    max-width: 68ch;
    overflow-wrap: anywhere;
    margin: 0 0 var(--sp-6);
    padding-left: var(--sp-4);
    border-left: 1px solid var(--hairline);
}

.image-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin: var(--sp-6) 0 var(--sp-4);
}
.image-list-header h2 {
    font-size: var(--fs-xs);
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--tx-secondary);
}

/* ── 画像の列 ──
   1枚ずつ、間を大きく空けて縦に流す。写真集の見開きの気分。 */
.image-stream {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    margin-top: var(--sp-5);
}

/* タッチ端末では cursor:zoom-in が手がかりにならないので、1枚目にだけ明示する */
@media (hover: none) {
    .image-post a { position: relative; display: block; }
    .image-post a::after {
        content: "タップで拡大";
        position: absolute;
        left: 8px;
        top: 8px;
        font-size: var(--fs-2xs);
        letter-spacing: 0.1em;
        color: var(--tx-primary);
        background: rgba(7, 7, 8, 0.78);
        border: 1px solid var(--border);
        padding: 2px 9px;
        pointer-events: none;
    }
    .image-post:not(:first-child) a::after { content: none; }
}

.image-post { position: relative; margin: 0; padding: 0; border: none; }
.image-post a { display: block; }
.image-post img {
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--hairline);
    /* 版面の幅は画面幅によらず一定にする。写真集のように、
       どのページでも同じ位置に図版が来るほうが落ち着いて見られる。 */
    max-width: min(100%, 1000px);
    cursor: zoom-in;
    /* 到着前を黒い穴ではなく、面として見せる */
    background-color: var(--bg-sunken);
    filter: brightness(0.97);
    transition: filter var(--dur-slow) var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
    .image-post a:hover img { filter: brightness(1.04); }
}

/* 左の余白に図版番号を置く。写真集の版面番号のつもり（本文カラムには入れない） */
.image-post::before {
    content: attr(data-index);
    position: absolute;
    top: 2px;
    left: -42px;
    font-family: var(--font-mark);
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--tx-quiet);
    letter-spacing: 0.04em;
}
/*
 * 版面の外に置く番号なので、外側に余白が生まれる幅でしか出せない。
 * container-wide は 1280px + 左右 20px の内側余白なので、
 * 1380px を下回ると番号が画面外に切れる（実測で確認済み）。
 */
@media (max-width: 1379px) {
    .image-post::before { display: none; }
}
.image-post figcaption {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    color: var(--tx-muted);
    margin-top: 10px;
    text-align: center;
    letter-spacing: 0.04em;
    line-height: 1.9;
}

.view-count-detail { font-size: var(--fs-xs); color: var(--tx-muted); }

/* ── いいね ── */
.like-button-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    justify-content: center;
    margin: var(--sp-8) 0;
}
.btn-like {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--tx-secondary);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    padding: 12px 30px;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease),
                color var(--dur-base) var(--ease),
                background-color var(--dur-base) var(--ease);
}
.btn-like span:last-child { font-family: var(--font-mark); font-variant-numeric: tabular-nums; font-size: 1rem; color: var(--tx-muted); }
.btn-like:hover { border-color: var(--accent-soft); color: var(--tx-primary); }
.btn-like.liked {
    border-color: var(--accent-soft);
    background: var(--accent-faint);
    color: var(--tx-primary);
}
.btn-like.liked span:last-child { color: var(--rose); }
.btn-like[disabled] { opacity: 0.5; cursor: default; }

.like-msg {
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    color: var(--danger);
    min-height: 1em;
}

/* ── 管理者用の画像ツール ── */
.admin-image-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; max-width: 1000px; margin: 12px auto 0; padding: 10px 0; border-top: 1px solid var(--border); }
.meta-btn {
    position: static;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--tx-muted);
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
    padding: 3px 10px;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.meta-btn:hover { color: var(--tx-primary); border-color: var(--accent-soft); }

.delete-image-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    background: rgba(200, 106, 102, 0.12);
    border: 1px solid rgba(200, 106, 102, 0.65);
    border-radius: var(--radius);
    color: #f2b2ae;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    line-height: 1;
    font-weight: 600;
    padding: 10px 16px;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.delete-image-button:hover { color: #e08a86; border-color: var(--danger); }
.delete-image-button:focus-visible { outline: 2px solid #f2b2ae; outline-offset: 3px; }
.delete-image-button:disabled { opacity: 0.5; cursor: wait; }
.image-delete-notice { position: fixed; z-index: 500; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); width: max-content; padding: 12px 18px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 4px 24px #0008; color: var(--tx-primary); font-size: var(--fs-sm); }
.image-delete-notice.is-error { border-color: var(--danger); }
.image-delete-notice button { flex-shrink: 0; color: inherit; background: transparent; border: none; text-decoration: underline; cursor: pointer; padding: 8px; }

/* ── 前後のギャラリー ──
   一覧に戻らず読み進められるようにする。左右で図版の位置を入れ替える。 */
.gallery-seq {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin: var(--sp-8) 0 var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--hairline);
}
@media (min-width: 700px) {
    .gallery-seq { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}
.gallery-seq a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--radius);
    min-width: 0;
    transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.gallery-seq a:hover { border-color: var(--border); background: var(--bg-card); }
.gallery-seq .seq-prev { justify-content: flex-start; }
.gallery-seq .seq-next { justify-content: flex-end; text-align: right; }
.gallery-seq .seq-next:only-child { grid-column: 2; }
@media (max-width: 699px) {
    .gallery-seq .seq-next:only-child { grid-column: 1; }
}
.gallery-seq img {
    flex: none;
    width: 56px;
    height: 70px;
    object-fit: cover;
    object-position: 50% 22%;
    border: 1px solid var(--hairline);
    filter: brightness(0.94);
    transition: filter var(--dur-slow) var(--ease-soft);
}
.gallery-seq a:hover img { filter: brightness(1.04); }
.seq-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.seq-label {
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
    color: var(--tx-quiet);
}
.seq-name {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    color: var(--tx-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color var(--dur-base) var(--ease);
}
.gallery-seq a:hover .seq-name { color: var(--tx-primary); }

/* =============================================
   SD 生成パラメータ モーダル（管理者のみ）
   ============================================= */
#sdMetaOverlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgba(4, 4, 5, 0.86);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
#sdMetaOverlay.open { display: flex; }
#sdMetaBox {
    width: min(720px, 100%);
    max-height: 82vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--elev-2);
}
#sdMetaHeader {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-card);
    border-bottom: 1px solid var(--hairline);
}
#sdMetaHeader h2 { font-size: var(--fs-sm); letter-spacing: 0.04em; font-weight: 700; }
#sdMetaClose {
    background: transparent;
    border: none;
    color: var(--tx-muted);
    font-size: 1.3rem;
    line-height: 1;
    padding: 2px 8px;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease);
}
#sdMetaClose:hover { color: var(--tx-primary); }
#sdMetaBody { padding: var(--sp-5); font-size: var(--fs-sm); color: var(--tx-secondary); }
.meta-section-title {
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
    color: var(--rose);
    margin: var(--sp-5) 0 var(--sp-2);
}
.meta-section-title:first-child { margin-top: 0; }
.meta-prompt {
    background: var(--bg-sunken);
    border: 1px solid var(--hairline);
    border-left: 2px solid var(--border-strong);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
    line-height: 1.9;
    color: var(--tx-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}
.meta-prompt.negative { border-left-color: var(--danger); color: var(--tx-muted); }
.meta-params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--sp-2);
}
.meta-param-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid var(--hairline);
    padding: 6px 0;
}
.meta-param-key { font-size: var(--fs-2xs); letter-spacing: 0.06em; color: var(--tx-quiet); }
.meta-param-val { font-size: var(--fs-xs); color: var(--tx-primary); word-break: break-word; }

/* =============================================
   ライトボックス（依存ライブラリなしの自前実装）
   ============================================= */
#lightbox {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(4, 4, 5, 0.96);
    padding: 56px 16px 72px;
}
#lightbox.open { display: flex; }
/* 拡大表示中はフィルムグレインを外す。画像を見るための画面に粒子を残さない */
body:has(#lightbox.open)::after { opacity: 0; }
#lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 1px solid var(--hairline);
    background: var(--bg-sunken);
}
#lightbox .lb-btn {
    position: absolute;
    background: rgba(11, 11, 12, 0.72);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--tx-secondary);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    letter-spacing: 0.1em;
    padding: 10px 15px;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
#lightbox .lb-btn:hover { color: var(--tx-primary); border-color: var(--accent-soft); }
#lightbox .lb-prev  { left: 14px;  top: 50%; transform: translateY(-50%); font-size: 1.5rem; padding: 8px 16px; }
#lightbox .lb-next  { right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; padding: 8px 16px; }
#lightbox .lb-close { right: 14px; top: 14px; }
#lightbox .lb-btn[disabled] { opacity: 0.3; pointer-events: none; }
#lightbox .lb-counter {
    position: absolute;
    left: 0; right: 0; bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    font-family: var(--font-mark);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: var(--tx-muted);
}
#lightbox .lb-nextpage {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    color: var(--tx-secondary);
    border-bottom: 1px solid var(--accent-soft);
    padding-bottom: 1px;
}
#lightbox .lb-nextpage[hidden] { display: none; }
#lightbox .lb-status {
    position: absolute;
    left: 0; right: 0; top: 18px;
    text-align: center;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    color: var(--tx-muted);
    pointer-events: none;
}
#lightbox.lb-error .lb-status { color: var(--danger); }
#lightbox.lb-loading img { opacity: 0.4; }
#lightbox .lb-full {
    position: absolute;
    left: 14px;
    top: 14px;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    color: var(--tx-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 13px;
    background: rgba(11, 11, 12, 0.72);
}
#lightbox .lb-full:hover { color: var(--tx-primary); border-color: var(--accent-soft); }
#lightbox .lb-full[hidden] { display: none; }
#lightbox.lb-fullshown .lb-full { opacity: 0.4; pointer-events: none; }

/* =============================================
   FANZA 広告
   広告だと分かる形は保ちつつ、誌面の一部として組む。
   ============================================= */
.fanza-ad-wrap,
.fanza-infeed {
    margin: var(--sp-8) 0 var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--hairline);
}
.fanza-infeed { margin: var(--sp-7) 0; }

.fanza-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.fanza-heading {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    color: var(--tx-secondary);
}
.fanza-pr-badge {
    flex: none;
    background: var(--accent);
    color: var(--tx-primary);
    font-size: var(--fs-2xs);
    letter-spacing: 0.08em;
    padding: 2px 8px;
    line-height: 1.6;
}
/* .fanza-note（「FANZA・外部サイトへ移動します」）は削除済み。
   移動先が外部だと先に言われると押す前に身構えるため。
   広告であることの開示は .fanza-pr-badge の「PR」と rel="sponsored" が担う。 */

.fanza-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-3);
}
@media (min-width: 640px)  { .fanza-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fanza-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fanza-strip-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .fanza-strip-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fanza-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: inherit;
}
@media (hover: hover) and (pointer: fine) {
    .fanza-card:hover .fanza-thumb { filter: brightness(1.02); }
    .fanza-card:hover .fanza-title { color: var(--tx-primary); }
}
.fanza-img-wrap {
    position: relative;
    background: var(--bg-sunken);
    overflow: hidden;
    border: 1px solid var(--hairline);
}
.fanza-thumb {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    /* 広告は作品より一段後ろに置く。輝度で階層をつくる */
    filter: brightness(0.88);
    transition: filter var(--dur-slow) var(--ease-soft);
}
[data-floor="anime"] .fanza-thumb,
[data-floor="videoa"] .fanza-thumb { aspect-ratio: 16 / 10; }
.fanza-badge {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(7, 7, 8, 0.8);
    color: var(--tx-muted);
    font-size: var(--fs-2xs);
    letter-spacing: 0.06em;
    padding: 2px 8px;
}
.fanza-info { padding: 8px 0 0; display: flex; flex-direction: column; gap: 3px; }
.fanza-title {
    font-size: var(--fs-2xs);
    line-height: 1.65;
    letter-spacing: 0.02em;
    color: var(--tx-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color var(--dur-base) var(--ease);
}
.fanza-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-2xs);
    color: var(--rose);
}
.fanza-price {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-family: var(--font-mark);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: var(--tx-secondary);
}
.fanza-sale {
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    letter-spacing: 0.08em;
    color: var(--rose);
}

/* =============================================
   フッター
   ============================================= */
.site-footer {
    border-top: 1px solid var(--hairline);
    margin-top: var(--sp-8);
    padding: var(--sp-7) 0 var(--sp-8);
    background: var(--bg-sunken);
}
.site-footer-inner {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
    text-align: center;
}
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-5);
    margin-bottom: var(--sp-5);
}
.footer-nav a {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    color: var(--tx-muted);
}
.footer-nav a:hover { color: var(--rose); }
.footer-note {
    font-size: var(--fs-xs);
    line-height: 2;
    color: var(--tx-muted);
    margin: 0 0 var(--sp-5);
}
.footer-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    font-family: var(--font-mark);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    color: var(--tx-quiet);
    margin: 0;
}
.footer-version { font-family: var(--font-body); font-size: var(--fs-2xs); letter-spacing: 0.1em; }
.footer-login { font-family: var(--font-body); font-size: var(--fs-2xs); letter-spacing: 0.06em; color: var(--tx-quiet); }
.footer-login:hover { color: var(--tx-muted); }

/* =============================================
   中央寄せの単独ページ（年齢確認 / 404 / 500）
   ここは「入口」なので、地の暗さと紅を一番強く出す。
   ============================================= */
.centered-pane {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
}
.pane {
    width: min(520px, 100%);
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-top: 2px solid var(--accent-soft);
    border-radius: var(--radius);
    box-shadow: var(--elev-2);
    padding: var(--sp-8) var(--sp-6);
}
/*
 * 子要素の専用ルールは .pane を付けて詳細度 (0,2,0) にする。
 * 素の .pane-code / .pane-mark（0,1,0）は、後述の .pane p（0,1,1）に
 * 色も font-size も常に負けていた ── 404 の数字が本文サイズで描かれていた
 * 初版からの潜在バグで、レビューの色検査から芋づるで見つかったもの。
 */
.pane .pane-mark {
    margin: 0 0 var(--sp-6);
    color: var(--tx-primary);
    /* .wordmark-pane の 1.6rem も .pane p に負けるため、ここで確定させる */
    font-size: 1.6rem;
    line-height: 1;
}
.pane .pane-code {
    font-family: var(--font-mark);
    font-variant-numeric: tabular-nums;
    font-size: 3.4rem;
    font-weight: 400;
    line-height: 1;
    /* 紅を文字にしない規律に合わせ、数字は磁器白。紅は下の短い罫（印）で出す */
    color: var(--tx-primary);
    letter-spacing: 0.08em;
    margin: 0 0 var(--sp-3);
}
.pane .pane-code::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background: var(--accent-soft);
    margin: 12px auto 0;
}
.pane h1 {
    font-size: var(--fs-lg);
    font-weight: 500;
    letter-spacing: 0.1em;
    margin: 0 0 var(--sp-4);
}
.pane p {
    font-size: var(--fs-sm);
    line-height: 2;
    color: var(--tx-secondary);
    margin: 0 0 var(--sp-5);
}
.pane p strong { color: var(--rose); font-weight: 500; }
.pane .btn-group { justify-content: center; }
.pane-search { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-5); }
.pane-search .search-input { flex: 1 1 auto; }
.pane-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--hairline);
}
.pane-links a { font-size: var(--fs-2xs); letter-spacing: 0.08em; color: var(--tx-muted); }
.pane-links a:hover { color: var(--rose); }
.pane .pane-note {
    font-size: var(--fs-2xs);
    letter-spacing: 0.08em;
    color: var(--tx-quiet);
    margin: var(--sp-5) 0 0;
}

@media (max-width: 420px) {
    .pane { padding: var(--sp-6) var(--sp-4); }
    .pane .pane-code { font-size: 2.6rem; }
}

/* =============================================
   スマートフォン
   ============================================= */
@media (max-width: 767px) {
    body { line-height: 1.8; }

    .site-header-inner { gap: var(--sp-4); }
    .site-nav ul { gap: var(--sp-4); }
    .site-nav a { font-size: var(--fs-xs); letter-spacing: 0.08em; }
    .wordmark-sm { font-size: 1.18rem; }

    .main-content { padding: var(--sp-6) 0 var(--sp-7); }
    .main-content h1 { font-size: 1.4rem; }

    .hero { padding: var(--sp-6) 0 var(--sp-7); margin-bottom: var(--sp-7); }
    .hero-stats { gap: var(--sp-5); }
    .hero-stats b { font-size: 1.6rem; }

    .section-title { margin: var(--sp-7) 0 var(--sp-4); }

    .image-stream { gap: var(--sp-6); }
    .gallery-description { padding-left: var(--sp-3); }

    .admin-image-tools { width: 100%; }
    .image-post { display: flex; flex-direction: column; }

    .btn { padding: 10px 20px; }
    .like-button-container { margin: var(--sp-7) 0; }

    .fanza-strip { gap: var(--sp-3) var(--sp-2); }
    .footer-nav { gap: var(--sp-4); }
}

@media (max-width: 359px) {
    .work-grid { gap: var(--sp-5) var(--sp-2); }
    .btn { padding: 10px 16px; letter-spacing: 0.1em; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .work-grid { gap: var(--sp-6) var(--sp-4); }
}

/* =============================================
   一覧の作り替え（v0.1.11）

   狙いは3つだけ。
   1. 探しやすさ … カードから中身が覗ける・タグへ1タップで飛べる
   2. 戻ってくる理由 … 「続きから」で前回の続きに着地できる
   3. 収益 … PR を探している最中の視線の中に置く（末尾の帯は読み飛ばされる）
   ============================================= */

/* ── 覗き見 ──
   4枚を重ねて置き、JS が data-peek-at で1枚だけ立てる。
   コマ数が2〜4と可変なので keyframes では比率を作れない（work-peek.js の注記参照）。 */
.work-thumb .work-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 420ms var(--ease-soft);
}
.work-item:not([data-peek-at]) .work-frame[data-i="0"] { opacity: 1; }
.work-item[data-peek-at="0"] .work-frame[data-i="0"],
.work-item[data-peek-at="1"] .work-frame[data-i="1"],
.work-item[data-peek-at="2"] .work-frame[data-i="2"],
.work-item[data-peek-at="3"] .work-frame[data-i="3"] { opacity: 1; }

/* 覗き見中は「今どこか」を細い目盛りで示す。枚数バッジの直上に薄く。 */
.work-thumb::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--accent-soft);
    opacity: 0;
    transition: width 420ms var(--ease-soft), opacity var(--dur-base) var(--ease);
    pointer-events: none;
}
.work-item[data-peek-at] .work-thumb::after { opacity: 0.9; }
.work-item[data-peek-at="0"] .work-thumb::after { width: 25%; }
.work-item[data-peek-at="1"] .work-thumb::after { width: 50%; }
.work-item[data-peek-at="2"] .work-thumb::after { width: 75%; }
.work-item[data-peek-at="3"] .work-thumb::after { width: 100%; }

.work-thumb { border-radius: var(--radius-lg); }

/* ── カードのタグ ──
   一覧から横断探索へ1タップで入れるようにする。
   高さは1行で固定。2行に伸びるとカードの頭が揃わずグリッドが乱れる。 */
.work-tags {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    /* WCAG 2.2 の的の最小(24px)。1行で固定するのは、2行に伸びると
       カードの頭が揃わずグリッドが段違いになるため。 */
    height: 24px;
    overflow: hidden;
}
.work-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: var(--fs-2xs);
    line-height: 22px;
    color: var(--tx-quiet);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .work-tag:hover { color: var(--tx-primary); border-color: var(--accent-dim); }
}

/* ── トップの作品一覧（並び替えタブ付き）──
   見出しの右に 新着順／閲覧数順／人気順 を置く。文字の見た目は一覧ページの .sort-nav に揃える。
   （以前ここにあった「続きから」のレールは v0.1.27 で撤去） */
.works-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-5);
}
.sort-nav.works-sort { margin: 0 0 var(--sp-5); padding-bottom: 0; border-bottom: 0; }
.sort-nav button {
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 2px 0;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    color: var(--tx-muted);
    cursor: pointer;
}
.sort-nav button.active { color: var(--tx-primary); border-bottom-color: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) {
    .sort-nav button:hover { color: var(--tx-primary); }
}

/* ── グリッド内の PR セル ──
   作品カードと同じ寸法にするのは視認性のため。出所は隠さない
   （左上に常時 PR と出し、リンクは rel="sponsored"）。 */
.work-ad .fanza-card { display: block; }
.work-ad .fanza-img-wrap {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-sunken);
}
.work-ad .fanza-thumb {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}
.work-ad .fanza-info { padding: 8px 0 0; }
.work-ad-label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    padding: 3px 8px;
    border-radius: var(--radius-lg) 0 var(--radius) 0;
    background: var(--accent);
    color: var(--rose);
    font-size: var(--fs-2xs);
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* ── トップ導入部の圧縮（v0.1.11）──
   探しに来た人にとって、扉の余白は「作品が始まるまでの待ち時間」でしかない。
   1440x900 で最初のカードが y=554 から始まっていたのを、
   1行目が画面内に入る高さまで詰める。h1 と説明は SEO 上必要なので残す。 */
.hero {
    padding: var(--sp-5) 0 var(--sp-5);
    margin-bottom: var(--sp-6);
}
.hero::before { margin-bottom: var(--sp-3); }
.hero .hero-title { line-height: 1.34; letter-spacing: 0.04em; margin: 0 0 var(--sp-2); }
.hero .sub { line-height: 1.85; margin: 0; }
.hero-stats { gap: var(--sp-5); margin: var(--sp-4) 0 0; }

/* 画像の公開説明と管理者用の編集欄。版面幅を超えない。 */
.image-description { max-width: 1000px; margin: 12px auto; color: var(--tx-primary); line-height: 1.8; overflow-wrap: anywhere; }
.image-description-editor { max-width: 1000px; margin: 12px auto 20px; padding: 12px 16px; border: 1px dashed var(--border); border-radius: var(--radius); }
.image-description-editor summary { cursor: pointer; font-size: var(--fs-sm); }
.image-description-editor form { margin-top: 12px; }
.image-description-editor label { display: block; font-weight: 600; }
.image-description-editor p { font-size: var(--fs-sm); line-height: 1.7; }
.image-description-editor textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 90px; }
.image-description-actions { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 10px; }
.image-description-editor .is-error { color: var(--rose); }