/* ============================================================
   waterfall gallery — UI v2
   ダーク＋ガラス。色/角丸/影は :root のトークンで一括変更できる。
   ============================================================ */
:root{
  color-scheme: dark;

  /* 面 */
  --bg:          #0b0b0f;
  --bg-elev:     #14141b;
  --tile-bg:     #16161d;
  --glass:       rgba(20, 20, 27, .66);
  --glass-solid: rgba(16, 16, 22, .94);
  --hairline:    rgba(255, 255, 255, .08);
  --hairline-2:  rgba(255, 255, 255, .14);

  /* 文字 */
  --fg:        #f2f2f6;
  --fg-2:      #a6a6b2;
  --fg-3:      #71717f;

  /* アクセント（使うのは細い線・フォーカス・成功表示だけ） */
  --a1: #8b5cf6;
  --a2: #22d3ee;
  --accent-grad: linear-gradient(90deg, var(--a1), var(--a2));

  /* かたち */
  --r-tile: 14px;
  --r-card: 18px;
  --r-pill: 999px;

  /* 影 */
  --sh-tile:  0 18px 44px -20px rgba(0,0,0,.85);
  --sh-hover: 0 26px 60px -22px rgba(0,0,0,.9), 0 0 0 1px var(--hairline-2);
  --sh-card:  0 30px 80px -24px rgba(0,0,0,.92);
  --blur: blur(16px) saturate(160%);

  /* フォーカス／ホバー時の光（検索欄・言語切替・prompt で共通） */
  --ring: 0 0 0 1.5px rgba(139,92,246,.55), 0 0 26px -6px rgba(139,92,246,.5);

  /* 動き */
  --e-out: cubic-bezier(.22,.61,.36,1);
  --e-soft: cubic-bezier(.4,0,.2,1);

  /* 旧トークン（JS から参照される） */
  --meta-accent: #a5b4fc;
  --gold: #ffcc00;
  --meta-border: #00518d;
  --meta-glow: #3c6c90;
}

*{ box-sizing: border-box; }

/* 横スクロールは一切させない。hidden はスクロールコンテナを作るので clip を優先
   （clip 未対応ブラウザ向けに hidden を先に書いておく） */
/* スクロールバーは出さない（位置は上部の進捗バーで示す）。スクロール自体は普通にできる */
html, body, .meta-panel{ scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.meta-panel::-webkit-scrollbar{ width: 0; height: 0; display: none; }

html{
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  overscroll-behavior-x: none;      /* 横方向のはみ出し・ラバーバンドを止める */
  touch-action: pan-y;              /* 横パンのジェスチャーを渡さない（縦だけ許可） */
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
        "Noto Sans JP", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

/* 画像はドラッグさせない。デスクトップでは画像を掴んで動かすと
   ブラウザ標準の画像ドラッグが始まり、UI が動いているように見える */
img{
  -webkit-user-drag: none;
  user-select: none; -webkit-user-select: none;
}

/* 背景の光と粒子（内容の邪魔をしない濃さ） */
body::before{
  content:''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 8% -10%,  rgba(139, 92,246,.16), transparent 60%),
    radial-gradient(55vw 55vw at 100% 8%, rgba( 34,211,238,.10), transparent 60%),
    radial-gradient(70vw 50vw at 50% 108%, rgba(139, 92,246,.10), transparent 60%);
}
body::after{
  content:''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ---------- スクロール進捗 ---------- */
.progress{
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: transparent; pointer-events: none;
}
.progress > span{
  display:block; height:100%; width:100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background-image: var(--accent-grad);
  transition: transform .12s linear;
}

/* ---------- ヘッダー（追従＋ガラス） ---------- */
header{
  position: sticky; top: 0; z-index: 50;
  max-width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px 16px;
  padding: 18px 24px 16px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hairline);
  transition: padding .25s var(--e-soft), background .25s var(--e-soft);
}
header.is-scrolled{
  padding: 10px 24px;
  background: rgba(11,11,15,.82);
  box-shadow: 0 12px 30px -22px rgba(0,0,0,.9);
}

.head-left{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.head-right{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }

h1{
  margin:0; font-size: clamp(16px, 2.1vw, 21px); font-weight: 650;
  letter-spacing: -.015em; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(100deg, #fff 20%, #cfc9ff 70%, #b7f2ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: font-size .25s var(--e-soft);
}
header.is-scrolled h1{ font-size: clamp(15px, 1.7vw, 17px); }
.count{ font-size:12px; color: var(--fg-3); white-space:nowrap; }

.note{ text-align:center; min-width:0;
       transition: opacity .25s var(--e-soft), transform .28s var(--e-out); }
/* スクロールしたら一言は引っ込める（狭い画面では下の media query で行ごと畳む） */
header.is-scrolled .note{ opacity:0; transform: translateY(-6px); pointer-events:none; }
.note-main{
  margin:0; font-size: clamp(13px, 1.6vw, 16px); font-weight: 640;
  letter-spacing: -.01em; color: #e6e6ee;
}
.note-sub{ margin:2px 0 0; font-size:11px; font-weight:400; color: var(--fg-3); }
.note-main:empty, .note-sub[hidden]{ display:none; }

/* 言語切り替え：小さなガラスのピル */
.lang-btn{
  padding: 6px 12px; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: rgba(255,255,255,.04); color: var(--fg-2);
  font: inherit; font-size: 12px; line-height: 1; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s, box-shadow .25s var(--e-out),
              transform .2s var(--e-out);
}
.lang-btn:active{ transform: scale(.96); }
.head-right a{ color: var(--fg-2); font-size:12px; text-decoration:none; border-bottom:1px solid var(--hairline-2); }
.head-right a:hover{ color: var(--fg); }

/* スクロール中の広い画面：一言を行ごと畳んで、タイトル・検索欄・言語切替を 1 行に並べる
   （モバイルと同じ考え方でヘッダーの高さを稼ぐ） */
@media (min-width: 781px){
  header.is-scrolled{
    padding: 8px 24px;
    grid-template-columns: 1fr minmax(260px, 440px) 1fr;   /* 中央列＝検索欄の幅を確保 */
  }
  header.is-scrolled .note{ display: none; }
  header.is-scrolled .head-left{ grid-column: 1; grid-row: 1; }
  header.is-scrolled .searchbox{ grid-column: 2; grid-row: 1; margin-top: 0; }
  header.is-scrolled .head-right{ grid-column: 3; grid-row: 1; }
  header.is-scrolled .search-field{ flex: 0 1 420px; }
  header.is-scrolled .search-input{ padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
}

/* ---------- 検索 ---------- */
.searchbox{
  grid-column: 1 / -1;
  display:flex; justify-content:center; align-items:center;
}
.search-field{ position:relative; display:flex; flex: 0 1 480px; min-width:0; }
.search-icon{
  position:absolute; left:14px; top:50%; transform: translateY(-50%);
  width:15px; height:15px; color: var(--fg-3); pointer-events:none;
  transition: color .2s;
}
.search-field:focus-within .search-icon{ color: var(--a2); }
.search-input{
  width:100%; padding: 11px 38px 11px 38px;
  font: inherit; font-size: 13.5px; color: var(--fg);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--hairline); border-radius: var(--r-pill); outline: none;
  transition: background .2s, border-color .2s, box-shadow .25s var(--e-out);
}
.search-input::placeholder{ color: var(--fg-3); }
.search-input:hover{ background: rgba(255,255,255,.07); }
.search-input:focus{
  background: rgba(255,255,255,.08); border-color: transparent;
  box-shadow: var(--ring);
}
.search-input::-webkit-search-cancel-button{ display:none; }
.search-clear{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:24px; height:24px; display:grid; place-items:center;
  font-size:15px; line-height:1; color: var(--fg-3);
  background: rgba(255,255,255,.06); border:0; border-radius: var(--r-pill); cursor:pointer;
  transition: color .2s, background .2s;
}
.search-clear:hover{ color: var(--fg); background: rgba(255,255,255,.14); }
.search-clear[hidden]{ display:none; }   /* display 指定が UA の [hidden] を上書きするため明示 */

/* 検索欄フォーカスと同じ見た目を、言語切替と prompt ボタンにも当てる */
.lang-btn:hover, .lang-btn:focus-visible,
.meta-toggle:hover, .meta-toggle:focus-visible{
  color: var(--a2);
  background: rgba(255,255,255,.08);
  border-color: transparent;
  box-shadow: var(--ring);
  outline: none;
}

/* ---------- セクション ---------- */
main{ padding: 22px 24px 64px; max-width: 100%; overflow-x: clip; }
.section + .section{ margin-top:36px; padding-top:26px; border-top:1px solid var(--hairline); }
.section h2{
  margin:0 0 14px; font-size:13px; font-weight:600; color: var(--fg-2); letter-spacing:.01em;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
.section-count{ font-weight:400; color: var(--fg-3); }
.section-note{ font-size:11px; font-weight:400; color: var(--fg-3); }
.h2-btn{
  padding:6px 11px; border:1px solid var(--hairline); border-radius: var(--r-pill);
  background: rgba(255,255,255,.04); color: var(--fg-2);
  font:inherit; font-size:11px; line-height:1; cursor:pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.h2-btn:hover{ color: var(--fg); background: rgba(255,255,255,.09); }
.h2-btn[hidden]{ display:none; }
.h2-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.heading-sep{ color: var(--fg-3); font-size:11px; }
.empty{ color: var(--fg-3); font-size:13.5px; }

/* ---------- 瀑布流 ---------- */
.grid{ --col-width: 300px; --col-gap: 14px;
       display:flex; align-items:flex-start; gap: var(--col-gap);
       max-width: 100%; }
.grid-col{ flex:1 1 0; min-width:0; }

/* ---------- タイル ---------- */
.tile{
  position: relative; display:block; width:100%; padding:0; border:0;
  margin-bottom: var(--col-gap);
  background: var(--tile-bg); cursor:pointer; line-height:0;
  border-radius: var(--r-tile); overflow: hidden;
  box-shadow: var(--sh-tile), 0 0 0 1px rgba(255,255,255,.05);
  transform: translateZ(0);
  transition: transform .34s var(--e-out), box-shadow .34s var(--e-out);
}
.tile img{ width:100%; height:auto; display:block;
           transition: transform .6s var(--e-out), opacity .3s; }
.tile:hover{ transform: translateY(-4px); box-shadow: var(--sh-hover); }
.tile:hover img{ transform: scale(1.045); }
.tile:active{ transform: translateY(-1px) scale(.995); }
.tile:focus-visible{ outline: 2px solid var(--a2); outline-offset: 3px; }

/* 光沢（上から下へ薄く） */
.tile::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background: linear-gradient(160deg, rgba(255,255,255,.14), transparent 42%);
  transition: opacity .34s var(--e-out);
}
.tile:hover::after{ opacity:1; }

/* 登場（IntersectionObserver が is-in を付ける） */
.tile.will-in{ opacity:0; transform: translateY(18px) scale(.985); }
.tile.will-in.is-in{
  opacity:1; transform:none;
  transition: opacity .5s var(--e-soft), transform .55s var(--e-out);
}

.tile.has-meta{ /* v1 の青枠は無効のまま */ }
.tile.is-gold{ box-shadow: var(--sh-tile), 0 0 0 2px var(--gold); }

/* ---------- 複数ページ ---------- */
.tile.is-bundle{ aspect-ratio: 4 / 3; }
.bundle-row{ display:flex; gap:2px; width:100%; height:100%; }
.bundle-cover{ flex:0 0 50%; overflow:hidden; line-height:0; }
.bundle-cover img{ width:100%; height:100%; object-fit:cover; }
.bundle-strip{ flex:1 1 0; display:flex; gap:2px; overflow:hidden; }
.bundle-slice{ flex:1 1 0; overflow:hidden; line-height:0; }
.bundle-slice img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.badge{
  position:absolute; top:10px; right:10px; z-index:3;
  padding:4px 9px; border-radius: var(--r-pill);
  background: rgba(10,10,14,.62); border:1px solid var(--hairline);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--fg); font-size:10.5px; font-weight:600; letter-spacing:.02em; line-height:1.4;
}

/* ---------- センシティブ ---------- */
.tile.is-hidden img{ filter: blur(24px) saturate(.8) brightness(.5); transform: scale(1.18); }
.veil{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:10px; color:#e9e9f0; background: rgba(12,12,16,.3);
  line-height:1.3; text-align:center; text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.veil svg{ width:28px; height:28px; opacity:.92; }
.veil-text{ font-size:12px; letter-spacing:.02em; }
.tile.is-hidden:hover .veil{ background: rgba(12,12,16,.18); color:#fff; }

/* ---------- 上に戻る ---------- */
.to-top{
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  color: var(--fg); cursor:pointer;
  opacity:0; transform: translateY(12px) scale(.9); pointer-events:none;
  transition: opacity .3s var(--e-soft), transform .3s var(--e-out), background .2s;
}
.to-top svg{ width:18px; height:18px; }
.to-top.is-on{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background: rgba(255,255,255,.12); }
.to-top:active{ transform: scale(.94); }

/* ---------- ビューア ---------- */
.viewer{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background: rgba(8,8,11,.84);
  -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%);
  touch-action: none;                      /* スワイプ操作を自前で扱う */
  animation: viewer-in .28s var(--e-out);
}
.viewer[hidden]{ display:none; }
@keyframes viewer-in{ from{ opacity:0 } to{ opacity:1 } }

.stage-shell{ position:relative; display:flex; align-items:center; justify-content:center; }
.stage{ position:relative; display:inline-block; line-height:0; --peek-size: min(24vw, 40vh); }
.stage.has-peek-next{ transform: translateX(-8%); }
.stage.has-peek-prev{ transform: translateX(8%); }
.stage.has-peek-prev.has-peek-next{ transform:none; }
.stage img{ max-width:72vw; max-height:84vh; object-fit:contain; }
#viewerImg{
  position:relative; z-index:1;
  border-radius: 12px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.95);
}

img.peek{
  position:absolute; top:50%; width:auto; height:auto;
  max-width: var(--peek-size); max-height: var(--peek-size); object-fit:contain;
  z-index:0; opacity:.6; pointer-events:none;
  /* 隣の絵の内容は読み取れないくらいぼかす（色味だけ伝わる状態） */
  filter: blur(7px) saturate(1.05) brightness(.68);
  border-radius: 10px;
}
.peek-next{ left:100%; transform: translate(-40%,-50%); }
.peek-prev{ right:100%; transform: translate(40%,-50%); }
.peek[hidden]{ display:none; }
.peek.is-blurred{ filter: blur(20px) saturate(.85) brightness(.5); }
.stage.is-hidden #viewerImg{ filter: blur(34px) saturate(.85) brightness(.55); transform: scale(1.06); }

/* 下のピル群 */
.pageno, .source, .meta-toggle{
  position:absolute; bottom:-42px; z-index:2;
  padding:6px 12px; border-radius: var(--r-pill);
  background: var(--glass); border:1px solid var(--hairline);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size:12px; line-height:1.4; color: var(--fg-3);
}
.pageno{ left:0; }
.pageno[hidden]{ display:none; }
.source{
  right:0; display:flex; gap:6px; align-items:baseline; max-width:60%;
  white-space:nowrap; overflow:hidden;
}
.source[hidden]{ display:none; }
.source-label{ color: var(--fg-3); }
.source-name{ color: var(--fg-3); overflow:hidden; text-overflow:ellipsis; }
.source a{ color: var(--fg-3); text-decoration:none; border-bottom:1px solid var(--hairline); }
.source a:hover{ color: var(--fg-2); border-bottom-color: var(--hairline-2); }

.meta-toggle{
  left:0; max-width:60%; border:1px solid var(--hairline);
  /* font:inherit だと .stage の line-height:0 まで継承して潰れるので個別に指定する */
  font-family: inherit; font-weight: 400; font-size: 12px; line-height: 1.4;
  color: var(--fg-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
  transition: color .2s, background .2s, border-color .2s, transform .2s var(--e-out);
}

.stage.has-pageno .meta-toggle{ left:74px; max-width: calc(60% - 74px); }
.meta-toggle:active{ transform: scale(.97); }
.meta-toggle[hidden]{ display:none; }
/* prompt が無い画像：同じピルだが押せないことが分かる見た目にする */
.meta-toggle.is-empty{
  color: var(--fg-3); cursor: default; border-style: dashed;
  background: rgba(255,255,255,.03);
}
.meta-toggle.is-empty:hover{
  color: var(--fg-3); background: rgba(255,255,255,.03);
  border-color: var(--hairline); box-shadow: none;
}

.viewer-reveal{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  width:100%; height:100%; padding:0; border:0; border-radius:12px;
  background: rgba(12,12,16,.3); color:#e9e9f0; cursor:pointer;
  font-family: inherit; font-size:13px; line-height:1.3; text-align:center;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.viewer-reveal[hidden]{ display:none; }
.viewer-reveal:hover{ background: rgba(12,12,16,.18); color:#fff; }
.viewer-reveal svg{ width:36px; height:36px; }

/* prompt パネル */
/* 画像を塞がないよう、半透明ガラス＋低め。背景をぼかすので文字は読める */
.meta-panel{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:4;
  width:min(620px, calc(100% - 32px)); max-height:min(34vh, 300px); overflow-y:auto;
  padding:14px 18px 16px; border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(10,10,16,.5), rgba(10,10,16,.68));
  border:1px solid var(--hairline-2);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  box-shadow: var(--sh-card);
  text-align:left; line-height:1.6;
  animation: panel-in .26s var(--e-out);
}
.meta-panel::before{
  content:''; position:absolute; left:18px; right:18px; top:0; height:1.5px;
  background-image: var(--accent-grad); opacity:.75; border-radius: 2px;
}
.meta-panel[hidden]{ display:none; }
@keyframes panel-in{ from{ opacity:0; transform: translate(-50%, 10px) } to{ opacity:1; transform: translate(-50%, 0) } }

.meta-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.meta-title{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background-image: var(--accent-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.meta-copy{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border:1px solid var(--hairline); border-radius: var(--r-pill);
  background: rgba(255,255,255,.05); color: var(--fg-2);
  font:inherit; font-size:11.5px; line-height:1; cursor:pointer;
  transition: color .2s, background .2s, border-color .2s, transform .18s var(--e-out);
}
.meta-copy svg{ width:13px; height:13px; }
.meta-copy .ico-done{ display:none; }
.meta-copy:hover{ color: var(--fg); background: rgba(255,255,255,.1); }
.meta-copy:active{ transform: scale(.95); }
.meta-copy.is-done{
  color:#7ee7c7; border-color: rgba(126,231,199,.4); background: rgba(126,231,199,.12); cursor:default;
}
.meta-copy.is-done .ico-copy{ display:none; }
.meta-copy.is-done .ico-done{ display:block; }

.meta-block{ margin-bottom:12px; }
.meta-key{ display:block; color: #9a9aa8; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; }
.meta-text{ margin:4px 0 0; color:#f0f0f6; font-size:13.5px; white-space:pre-wrap; overflow-wrap:anywhere;
             text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.meta-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:8px 18px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--hairline);
}
.meta-row{ display:flex; flex-direction:column; }
.meta-val{ color:#f0f0f6; font-size:13px; overflow-wrap:anywhere; text-shadow: 0 1px 2px rgba(0,0,0,.55); }

/* 閉じる・前後（丸いガラスボタン） */
.viewer .close, .viewer .nav{
  position:absolute; display:grid; place-items:center;
  width:44px; height:44px; padding:0;
  border:1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--fg); font-size:20px; line-height:1; cursor:pointer;
  transition: background .2s, transform .2s var(--e-out), opacity .2s;
}
.viewer .close:hover, .viewer .nav:hover{ background: rgba(255,255,255,.14); }
.viewer .close:active, .viewer .nav:active{ transform: scale(.93); }
.close{ top:16px; right:18px; z-index:5; }
.nav{ top:50%; margin-top:-22px; z-index:5; font-size:24px; }
.prev{ left:16px; }
.next{ right:16px; }
.nav[hidden]{ display:none; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px){
  .grid{ --col-width: 260px; }
}
@media (max-width: 780px){
  header{
    grid-template-columns: 1fr auto; align-items:center; row-gap:8px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  }
  header.is-scrolled{ padding: 8px 16px; }
  .head-left{ grid-column:1; order:0; }
  .head-right{ grid-column:2; order:0; justify-content:flex-end; }
  .note{ grid-column: 1 / -1; order:1; }            /* 一言は検索欄の上 */
  .searchbox{ grid-column: 1 / -1; order:2; }
  /* スクロール中は一言を畳んで、追従ヘッダーの高さを稼ぐ */
  header.is-scrolled .note{ display:none; }
  header.is-scrolled .search-input{ padding-top:9px; padding-bottom:9px; }
  main{ padding: 16px 14px 72px; }
  .stage img{ max-width: 90vw; max-height: 76vh; }
  .stage{ --peek-size: min(18vw, 26vh); }
  .stage.has-peek-next{ transform: translateX(-4%); }
  .stage.has-peek-prev{ transform: translateX(4%); }
  .close{ top:12px; right:12px; }
  /* 前後ボタンは狭い画面でも出す（スワイプと併用。マウスではスワイプできないため） */
  .viewer .close, .viewer .nav{ width:40px; height:40px; font-size:22px; }
  .nav{ margin-top:-20px; }
  .prev{ left:8px; }
  .next{ right:8px; }
  .to-top{ right:14px; bottom: max(14px, env(safe-area-inset-bottom)); }
}
@media (max-width: 600px){
  /* 360px 幅でも 2 列を保てる値にする（168px だと 1 列に落ちる） */
  .grid{ --col-width: 150px; --col-gap: 8px; }
  .tile{ border-radius: 12px; }
  .pageno, .source, .meta-toggle{ bottom:-40px; font-size:11.5px; padding:5px 10px; }
  .source{ max-width:52%; }
  .stage.has-pageno .meta-toggle{ left:64px; }
  .meta-panel{ width: calc(100% - 20px); max-height:min(32vh, 250px);
               bottom: max(12px, env(safe-area-inset-bottom)); }
  .search-input{ padding: 10px 34px; font-size:13px; }
}

@media (max-width: 380px){
  .grid{ --col-width: 132px; --col-gap: 7px; }
  main{ padding: 14px 10px 72px; }
}

/* ---------- 動きを抑える設定 ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .tile.will-in{ opacity:1; transform:none; }
  .tile:hover{ transform:none; }
  .tile:hover img{ transform:none; }
}