/* gallery.css — 暗い背景のコンタクトシート
   フォントはシステムフォントのみ。外部読み込みは一切しない（Referer を外に出さないため）。 */

:root{
  --bg:      #0e1014;   /* 近黒。わずかに青み */
  --bg-2:    #14161b;
  --line:    #23262d;
  --ink:     #ece7de;   /* 暖かい白 */
  --ink-dim: #8f8d87;
  --accent:  #cf5f36;   /* 琥珀寄りの赤。最新セットの罫線とフォーカスリングだけに使う */
  --gap:     6px;
  /* --row-h-base は index.php が設定値（row_h）を <html> に載せる */
  --row-h:   var(--row-h-base, 210px);
  --font: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
          "Yu Gothic UI", Meiryo, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

*{box-sizing:border-box}

html{background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

.mono{font-family:var(--mono);font-size:.82em;letter-spacing:.02em}

a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ------------------------------------------------------------- ヘッダ */

.top{
  padding:20px 16px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 16px;
}
.top-title{margin:0;font-size:1.15rem;font-weight:600;letter-spacing:.02em}
.top-meta{margin:0;color:var(--ink-dim)}
.top-note{margin:0;flex-basis:100%;color:var(--ink-dim);font-size:.9rem}
.top-nav{margin-left:auto;display:flex;gap:14px}
.top-nav a{color:var(--ink-dim);font-size:.9rem}
.top-nav a:hover{color:var(--ink)}

.empty{color:var(--ink-dim);padding:8px 16px}

/* ------------------------------------------------- 表示の絞り込み（ハート） */

.filter{
  flex-basis:100%;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.filter-btn{
  padding:3px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-dim);
  font-size:.85rem;
  line-height:1.6;
  white-space:nowrap;
}
a.filter-btn:hover{color:var(--ink);border-color:var(--ink-dim)}
.filter-btn.is-on{color:var(--ink);border-color:var(--accent);background:rgba(207,95,54,.1)}
.filter-heart{color:#e0658c}

/* --------------------------------------------------------- セット見出し */

.set{padding:22px 16px 6px}
.set-head{
  margin:0 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:baseline;
  gap:12px;
  font-size:1rem;
  font-weight:600;
}
.set.is-latest .set-head{border-bottom-color:var(--accent)}
.set-date{color:var(--ink-dim)}
.set-label{font-weight:600}
.set-count{margin-left:auto;color:var(--ink-dim)}
/* セットの説明文（v17.2）。見出しのすぐ下。長い文や URL でもスマホで横にはみ出さない */
.set-note{
  margin:-2px 0 12px;
  color:var(--ink-dim);
  font-size:.9rem;
  line-height:1.75;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* -------------------------------------------- セットにまとめてハート（v10）

   3つの状態を見分けられること。文字（12/30）だけに頼ると小さくて読み落とす。
     全部押している … 塗りつぶし
     一部だけ       … 縁だけ塗る（半分の状態）
     押していない   … 空
   ボタン自体は JS が差し込む（押せないものを出さない＝個別のハートと同じ）。 */

.set-heart{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:10px;
  padding:3px 10px 3px 8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:transparent;
  color:var(--ink-dim);
  font:inherit;
  font-size:.82rem;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.set-heart svg{display:block;width:15px;height:15px}
.set-heart .sh-n{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em}
.set-heart:hover{color:var(--ink);border-color:var(--ink-dim)}
.set-heart:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.set-heart[disabled],
.set-heart.is-busy{opacity:.55;cursor:default}

/* 一部だけ押している：縁だけ塗る（中は空のまま） */
.set-heart.is-some{color:var(--heart-on);border-color:var(--heart-on)}
.set-heart.is-some svg path{fill:none;stroke:currentColor;stroke-width:1.9}
/* 全部押している：塗りつぶし */
.set-heart.is-all{
  color:var(--heart-on);
  border-color:var(--heart-on);
  background:rgba(224,101,140,.14);
}
/* 打ち切りの知らせ（500件を超えたとき）。長く出さない */
.set-heart-note{
  margin-left:8px;
  color:var(--accent);
  font-size:.78rem;
  font-weight:400;
}

/* ------------------------------------------- justified なコンタクトシート
   flex-grow を縦横比に比例させると、同じ行の中で拡大率が揃うので高さが揃う。
   最終行が引き伸ばされないよう、末尾のダミーが余りを吸う。 */

.sheet{display:flex;flex-wrap:wrap;gap:var(--gap)}
.filler{flex-grow:1000000;flex-basis:0;min-width:0;height:0}

.cell{
  position:relative;
  min-width:0;
  border-radius:3px;
  background:var(--bg-2);
  aspect-ratio:var(--ar, 3/2);
}
.cell-link{
  display:block;
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:3px;
}
.cell img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:var(--bg-2);
}
.cell::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  border-radius:3px;
  pointer-events:none;
}
.cell-link:hover img{opacity:.86;transition:opacity .12s ease}
.cell-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ------------------------------------------------- 動画の印（再生アイコン）

   一覧の中で動画をひと目で見分けられるようにする。隅の小さな印では気づけない。

   **明るいサムネイルでも暗いサムネイルでも読めること。**
   暗い半透明の円だけだと黒い絵に埋もれ、白い三角だけだと白い絵に埋もれる。
   円（暗い）＋三角（白）＋ふちの薄い白い輪郭＋下向きの弱い影、の4つを重ねて、
   どちらの背景でも境界が出るようにしてある。**どれか1つでも欠くと埋もれる。**

   大きさはセルの高さ（--row-h）に比例させる。携帯では --row-h 自体が縮むので、
   アイコンもいっしょに縮む＝小さなセルを覆い尽くさない。 */

.badge{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:grid;
  place-items:center;
  /* セルの短辺のおよそ 25〜30%。justified なので行によって高さが伸びる。
     --row-h の .30 にしておくと、伸びた行でも 25% を下回らない。
     極端に大きく／小さくならないよう上下を止める。 */
  width:clamp(30px, calc(var(--row-h) * .30), 96px);
  height:clamp(30px, calc(var(--row-h) * .30), 96px);
  border-radius:50%;
  background:rgba(8,10,14,.55);
  /* 内側の輪郭＝白い絵の上での境界／外側の影＝黒い絵の上での境界 */
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),
             0 2px 10px rgba(0,0,0,.55);
  color:#fff;
  pointer-events:none;             /* アイコンの上を押してもセルとして開く */
}
.badge svg{
  display:block;
  width:52%;
  height:52%;
  margin-left:6%;                  /* 三角の重心ぶんだけ右に寄せると円の中心に見える */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.cell-link:hover .badge{background:rgba(8,10,14,.72)}

/* ------------------------------------------------------------ ハート
   差し色（--accent）は最新セットの罫線に使っているので、押した状態には
   別の色を割り当てる。差し色の意味が薄まらないように。 */

:root{ --heart-on:#e0658c; }   /* くすんだ桃色。琥珀寄りの赤とは別系統 */

.heart{
  position:absolute;
  left:6px;
  bottom:6px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 7px 3px 5px;
  border:0;
  border-radius:11px;
  background:rgba(10,11,14,.66);
  color:rgba(236,231,222,.72);
  font:inherit;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.heart svg{display:block}
.heart .heart-n{font-size:.72rem;letter-spacing:.02em}
.heart .heart-n:empty{display:none}
.heart:hover{background:rgba(20,22,27,.85);color:var(--ink)}
.heart.is-on{color:var(--heart-on)}
.heart.is-on:hover{color:var(--heart-on)}
.heart:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.heart[disabled]{opacity:.5;cursor:default}
.heart.is-busy{opacity:.6}

.lb-heart{
  position:fixed;
  left:10px;
  bottom:10px;
  padding:6px 12px 6px 9px;
  border-radius:16px;
  background:rgba(20,22,27,.9);
}
.lb-heart .heart-n{font-size:.8rem}

/* --------------------------------------------------------- 言語切替 */

.lang{display:inline-flex;gap:6px;align-items:baseline}
.lang a{color:var(--ink-dim)}
.lang a:hover{color:var(--ink)}
.lang-on{color:var(--ink);border-bottom:1px solid var(--accent)}

/* ------------------------------- 読み込めなかったとき（黙って待たせない） */

.cell.is-broken{background:#1a1614}
.cell-broken{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  text-align:center;
  color:var(--ink-dim);
  font-size:.78rem;
  line-height:1.4;
  background:#1a1614;
  border:1px solid var(--line);
  border-radius:3px;
}

.lb-note{
  max-width:min(90vw,420px);
  padding:22px 24px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:6px;
  text-align:center;
}
.lb-note p{margin:0 0 16px;color:var(--ink);font-size:.95rem;line-height:1.6}
.lb-note-close{
  padding:8px 20px;
  background:#1d2027;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--ink);
  font:inherit;
  cursor:pointer;
}
.lb-note-close:hover{background:#262a32}
.lb-note-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------------------------------------------------- ライトボックス */

.lb{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(8,9,12,.96);
  display:grid;
  place-items:center;
}
.lb[hidden]{display:none}
.lb-stage{
  max-width:min(100vw - 24px, 2000px);
  max-height:calc(100vh - 76px);
  display:grid;
  place-items:center;
}
.lb-stage img,
.lb-stage video{
  max-width:min(100vw - 24px, 2000px);
  max-height:calc(100vh - 76px);
  width:auto;
  height:auto;
  display:block;
  background:#000;
}
.lb-meta{
  position:fixed;
  left:0;
  right:0;
  bottom:8px;
  margin:0;
  text-align:center;
  color:var(--ink-dim);
  padding:0 56px;
  overflow-wrap:anywhere;
}
.lb-btn{
  position:fixed;
  appearance:none;
  border:0;
  background:rgba(20,22,27,.8);
  color:var(--ink);
  font-size:26px;
  line-height:1;
  width:44px;
  height:44px;
  border-radius:4px;
  cursor:pointer;
}
.lb-btn:hover{background:rgba(38,42,50,.9)}
.lb-close{top:10px;right:10px;font-size:22px}
.lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lb-next{right:10px;top:50%;transform:translateY(-50%)}
.lb-btn[hidden]{display:none}

/* ------------------------------------------------------------- ログイン */

.login-body{display:grid;place-items:center;min-height:100vh;padding:20px}
.login-card{
  width:100%;
  max-width:340px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:26px 22px;
}
.login-title{margin:0;font-size:1.1rem;font-weight:600}
.login-sub{margin:2px 0 20px;color:var(--ink-dim)}
.login-label{display:block;font-size:.85rem;color:var(--ink-dim);margin-bottom:6px}
.login-input{
  width:100%;
  padding:10px 12px;
  background:#0b0d11;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--ink);
  font:inherit;
}
.login-input:focus{border-color:var(--accent);outline:none}
.login-btn{
  width:100%;
  margin-top:14px;
  padding:10px;
  background:#1d2027;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--ink);
  font:inherit;
  cursor:pointer;
}
.login-btn:hover{background:#262a32}
.login-err{
  margin:0 0 16px;
  padding:9px 11px;
  border-left:3px solid var(--accent);
  background:rgba(207,95,54,.08);
  font-size:.9rem;
}
.login-foot{margin:18px 0 0;font-size:.85rem}
.login-foot a{color:var(--ink-dim)}

/* --------------------------------------------------------------- 携帯 */

@media (max-width:640px){
  /* 設定値を基準に縮める。固定値にすると row_h の設定が無視される。 */
  :root{--row-h:calc(var(--row-h-base, 210px) * .62);--gap:4px}
  /* セルが小さくなるのでハートも詰める */
  .heart{left:3px;bottom:3px;padding:2px 5px 2px 4px;gap:3px}
  .heart svg{width:15px;height:15px}
  .heart .heart-n{font-size:.66rem}
  body{font-size:14px}
  .set{padding:16px 8px 4px}
  .top{padding:14px 10px 10px}
  .top-nav{margin-left:0;flex-basis:100%}
  .lb-meta{padding:0 12px;font-size:.78rem}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* --------------------------------------------------- 会員トップ（members/index.php）
   ページを増やすたびに CSS を足さなくて済むよう、汎用のカードにしてある。 */
.members-main{padding:22px 16px}
.members-menu{margin:0;padding:0;list-style:none;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));max-width:900px}
.members-card{
  display:block;
  padding:16px 18px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:6px;
}
.members-card:hover{border-color:var(--accent);text-decoration:none}
.members-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.members-card-t{display:block;font-weight:600}
.members-card-d{display:block;margin-top:3px;color:var(--ink-dim);font-size:.85rem}

/* ================================================ ティアのページ（v11）

   入れるページが1つしか無いときは、そもそも出さない（index.php 側の判断）。 */

.tiers{
  flex-basis:100%;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.tier-btn{
  padding:3px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-dim);
  font-size:.85rem;
  line-height:1.6;
}
.tier-btn:hover{color:var(--ink);text-decoration:none}
.tier-btn.is-on{color:var(--ink);border-color:var(--accent);background:rgba(207,95,54,.1)}

/* Patreon に確かめられず一時的に制限しているときの断り書き */
.notice{
  margin:12px 16px;
  padding:9px 11px;
  border-left:3px solid var(--accent);
  background:rgba(207,95,54,.08);
  font-size:.9rem;
  color:var(--ink-dim);
}

/* ---------------------------------------- ログイン（18歳確認と Patreon） */

.login-adult-note{margin:0 0 16px;color:var(--ink-dim);font-size:.85rem;line-height:1.7}
.login-adult{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:.9rem;
  line-height:1.5;
  cursor:pointer;
}
.login-adult input{margin-top:3px;flex:none}
.login-patreon{background:#22262e}
.login-patreon:hover{background:#2c313a}
.login-join{margin:16px 0 0;font-size:.85rem}
.login-join a{color:var(--ink-dim)}