/* ====== 基本トークン（トップページ準拠） ====== */
:root{
    --fg: rgb(223,223,223);
    --bg: rgb(48,48,48);
    --panel: #1a1a1a;
    --section: #131313;
    --border: #333333;
    --muted: #979797;
    --accent: #ff0000;
  }
  
  /* Takibi フォント（design/ からの相対） */
  @font-face {
    font-family:'Takibi-Semi';
    src: url(../../font/takibi/05Takibi-SemiBold.otf);
  }
  
  html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Takibi-Semi', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    letter-spacing: .05em;
  }
  
  a{
    color: var(--fg);
    font-weight: bold;
    text-decoration: none;
    transition: color 1s;
  }
  a:hover{ color: var(--accent); }
  
  img{ max-width:100%; height:auto; vertical-align:bottom; border-style:none; }
  
  /* ====== ヘッダー（戻る／タイトル／検索・タグ） ====== */
  .dw-header{
    position: sticky; top: 0; z-index: 10;
    display: grid; gap: 12px; align-items: end;
    padding: 20px 40px;
    background: var(--panel);
    box-shadow: 0 5px 10px -6px rgba(202,202,202,0.08);
    border-bottom: 1px solid var(--border);
  }
  .dw-header h1{ margin:0; font-size: 24px; color:#fff; letter-spacing:.05em; }
  .dw-back{ color: var(--fg); opacity:.85; }
  .dw-back:hover{ color: var(--accent); opacity:1; }
  
  .dw-controls{
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  }
  
  /* 検索ボックス（ダーク） */
  #q{
    padding: 10px 12px;
    min-width: 240px;
    color: var(--fg);
    background: #1f1f1f;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
  }
  #q::placeholder{ color: var(--muted); }
  
  /* タグ */
  .tag-list{ display:flex; gap:8px; flex-wrap:wrap; }
  .tag{
    padding: 6px 12px;
    font-size: 13px;
    color: var(--fg);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor:pointer;
    transition: background .2s, color .2s, border-color .2s;
  }
  .tag:hover{ color:#fff; border-color: var(--accent); }
  .tag.on{
    color:#fff; background: var(--accent); border-color: var(--accent);
  }
  .tag-all{
    color: var(--fg); opacity:.8; text-decoration: underline; cursor:pointer;
  }
  .tag-all:hover{ color: var(--accent); opacity:1; }
  
  /* ====== グリッド（トップの .container に近い幅感） ====== */
  .dw-wrap{ /* 必要ならHTML側で <div class="dw-wrap"> で囲む */
    max-width: 1340px; margin: 0 auto; padding: 0 40px;
  }
  .grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(160px,160px)); /* タイル幅は現状維持 */
    justify-content: start;
    gap: 0;                      /* スキマなしで敷き詰め */
    padding: 0 0 60px;           /* 下だけ余白 */
    background: transparent;
  }
  
  /* タイル（角丸無し／枠無し／暗配色） */
  .card{
    position:relative;
    border:none;
    border-radius:0;
    overflow:hidden;
    background: transparent;
    cursor:pointer;
    /* 表示順アニメ（必要な最小限だけ残す） */
    opacity: 1;                  /* ←アニメを諦める指定に合わせて常時表示 */
    transform: none;
  }
  .card .ph{
    width:100%;
    aspect-ratio: 1 / 1;         /* 正方形タイル維持 */
    background: #0f0f0f;         /* 読み込み中の下地（暗） */
  }
  .card img{
    width:100%; height:100%; display:block; object-fit:cover;
    border-radius:0;
  }
  
  /* キャプションはトップの雰囲気に合わせて控えめ */
  .card .cap{
    position:absolute; left:0; right:0; bottom:0;
    padding: 8px 10px;
    font-size: 12px; color:#fff;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
    opacity: 0; transition: opacity .15s ease;
  }
  .card:hover .cap,
  .card:focus-visible .cap,
  .card:active .cap{ opacity:1; }
  
  /* ====== ライトボックス（暗配色） ====== */
  .lb[hidden]{ display:none; }
  .lb{
    position: fixed; inset: 0; z-index: 9999;
    display:grid; grid-template-rows:auto 1fr auto; place-items:center;
    background: rgba(0,0,0,.88);
  }
  .lb img{
    max-width: min(92vw, 1400px);
    max-height: 78vh;
    object-fit: contain;
    background: #000;
  }
  .lb-meta{
    color:#fff; opacity:.92; font-size: 14px; margin: 8px 0 16px; text-align:center;
  }
  .lb-close, .lb-prev, .lb-next{
    position: fixed; top: 16px;
    background: transparent; color: #fff; border: none;
    font-size: 28px; cursor: pointer;
  }
  .lb-close{ right: 20px; }
  .lb-prev{ left: 20px; top: 50%; transform: translateY(-50%); font-size: 42px; }
  .lb-next{ right: 20px; top: 50%; transform: translateY(-50%); font-size: 42px; }
  
  /* ====== セクション背景（トップ準拠で段差が欲しい場合） ======
     必要に応じて .dw-section を囲いに使う */
  .dw-section:nth-of-type(odd){ background: var(--section); }
  
  /* ====== レスポンシブ（トップの 767px 基準にあわせる） ====== */
  @media screen and (max-width: 767px){
    .dw-header{ padding: 15px 20px; gap: 10px; }
    .dw-header h1{ font-size: 18px; }
    #q{ min-width: 180px; padding: 8px 10px; }
  
    .dw-wrap{ padding: 0 20px; }
    .grid{ grid-template-columns: repeat(auto-fill, minmax(140px,140px)); padding-bottom: 40px; }
  
    .lb img{ max-width: 94vw; max-height: 70vh; }
    .lb-prev, .lb-next{ font-size: 36px; }
  }
  
  /* ====== アクセシビリティ小ワザ ====== */
  .card{ -webkit-tap-highlight-color: transparent; }
  .card:focus{ outline: 2px solid var(--accent); outline-offset: 2px; }

  /* 読み込み前のプレースホルダー画像は見せない */
.ph img[data-blank="1"] { visibility: hidden; }
.card .ph { background: rgb(48,48,48); }

/*--------------------------------
 フッター
---------------------------------*/
.footer {
    padding: 30px;
    background-color: rgb(27, 27, 27);
  }
  
  .expand-less {
    width: 20px;
  }
  
  .copyright {
    font-size: 10px;
    text-align: center;
    color: #979797;
  }