:root{
    --c-bg      : #F9FAFB;
    --c-surface : #FFFFFF;
    --c-border  : #E5E7EB;
    --c-header  : #1F2937;  /* Dark Navy */
    --c-accent  : #6366F1;  /* Corn‑flower Blue */
    --c-accent-light: #A5B4FC;
    --c-text    : #1F2937;
    --c-muted   : #6B7280;
    --c-header-text:#FFFFFF;
  }
  
  /* ---------- Reset / Base ---------- */
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
    background:var(--c-bg);color:var(--c-text);line-height:1.6;
    padding-top:112px;   /* header56 + tabs56 */
    padding-bottom:56px; /* footer */
  }
  a{text-decoration:none;color:inherit}
  .container{max-width:960px;margin:auto;padding:1rem}
  
  /* ---------- Fixed Header ---------- */
  .header-bar{
    position:fixed;top:0;left:0;right:0;height:56px;z-index:200;
    background:var(--c-header);color:var(--c-header-text);
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;font-weight:700;letter-spacing:.03em;
    box-shadow:0 1px 3px rgb(0 0 0 /.18);
  }
  
  /* ---------- Site Tabs (all pages) ---------- */
  .site-tabs{
    position:fixed;top:56px;left:0;right:0;height:56px;z-index:190;
    background:var(--c-surface);border-bottom:1px solid var(--c-border);
    display:flex;gap:.25rem;align-items:center;justify-content:center;
  }
  .site-tab{
    flex:0 0 140px;text-align:center;
    padding:.55rem 0;font-weight:600;border-radius:.35rem;
    color:var(--c-muted);border:1px solid transparent;cursor:pointer;
    transition:.15s;
  }
  .site-tab:hover{background:var(--c-border);}
  .site-tab.active{
    background:var(--c-accent);color:#fff;border-color:var(--c-accent);
  }
  
  /* ---------- Dropdown Filter ---------- */
  .filter-bar{
    display:flex;align-items:center;gap:.5rem;
    margin:1rem auto;max-width:960px;padding:0 1rem;
  }
  .filter-select{
    appearance:none;height:40px;min-width:150px;
    padding:.45rem .9rem;border:1px solid var(--c-border);border-radius:.4rem;
    font-size:.9rem;background:var(--c-surface)
      url('data:image/svg+xml;utf8,<svg%20fill="%236B7280"%20viewBox="0%200%2024%2024"%20xmlns="http://www.w3.org/2000/svg"><path%20d="M7%209l5%205%205-5"/></svg>')
      no-repeat right .75rem center;background-size:.8rem;
    color:var(--c-text);
  }
  .filter-select:focus{outline:2px solid var(--c-accent-light);outline-offset:2px}
  
  /* ---------- Grid & Card ---------- */
  .grid{display:grid;gap:1rem}
  @media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
  
  .card{
    background:var(--c-surface);border:1px solid var(--c-border);
    border-radius:.5rem;overflow:hidden;transition:.2s;
    box-shadow:0 2px 4px rgb(0 0 0 /.06);
  }
  .card:hover{box-shadow:0 4px 12px rgb(0 0 0 /.12)}
  .card img{width:100%;aspect-ratio:4/3;object-fit:cover}
  .card-body{padding:.8rem}
  .card-body h3{font-size:1rem;font-weight:600;margin-bottom:.25rem}
  .card-body p{font-size:.85rem;color:var(--c-muted)}
  
  /* ---------- Article Layout ---------- */
  .main-grid{display:grid;gap:2rem}
  @media(min-width:1024px){.main-grid{grid-template-columns:2fr 260px}}
  .event{margin-bottom:3rem}
  .event-title{font-size:1rem;font-weight:700;margin-bottom:.3rem}
  .hline{height:4px;background:var(--c-accent-light);margin:.4rem 0 1.4rem;border-radius:2px}
  .deck-img{width:100%;max-width:820px;border-radius:.5rem}
  .event-date{font-size:.85rem;text-align:center;margin-top:.5rem;color:var(--c-muted)}
  .ad-box{
    position:sticky;top:120px;height:calc(560px - 56px);
    border:1px dashed var(--c-border);border-radius:.5rem;
    display:flex;align-items:center;justify-content:center;
    font-size:2rem;font-weight:700;color:var(--c-muted);
  }
  
  /* ---------- Footer ---------- */
  .site-footer{
    position:fixed;bottom:0;left:0;right:0;height:56px;z-index:200;
    background:var(--c-header);color:var(--c-header-text);
    display:flex;align-items:center;justify-content:center;font-size:.85rem;
    padding:0 1rem;text-align:center;
  }
  .site-footer a{color:var(--c-accent-light)}
  .site-footer a:hover{text-decoration:underline}
  
/* ===== Deck Header (article) ===== */
/* ------- Deck Header (記事 h1)  ------- */
.deck-header{
  /* ❶ 行は 1 行に制限 */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;        /* 末尾 … でカット */

  /* ❷ ビューポートに応じて自動拡縮するフォントサイズ
         min 1.1rem 〜 max 1.6rem を 4vw で補間 */
  font-size:clamp(1.1rem, 4.5vw, 1.6rem);

  font-weight:700;letter-spacing:.02em;
  text-align:center;margin:0 0 1.2rem;
}
  /* ===== Ink Colors (h3 内で使用) ===== */
.ink-color.ruby     { color: rgb(208,7,47); }
.ink-color.amethyst { color: rgb(127,56,122); }
.ink-color.amber    { color: rgb(241,177,0); }
.ink-color.emerald  { color: rgb(41,137,52); }
.ink-color.sapphire { color: rgb(3,135,193); }
.ink-color.steel    { color: rgb(157,167,177); }

h3 .ink-color {
    text-shadow:
      -0.1px -0.1px 0 #444,
       0.1px -0.1px 0 #444,
      -0.1px  0.1px 0 #444,
       0.1px  0.1px 0 #444;
  }
  .x-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height:38.5px;           /* ← 実際の見た目にフィットする高さ */
    padding: 0 14px;        /* 横幅もややタイトに */
    font-size: 15px;        /* 若干小さくして高さに馴染ませる */
    font-weight: bold;
    color: #ffffff;
    background-color: #374151;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
    font-family: sans-serif;
  }
  
  .x-btn:hover {
    background-color: #4B5563;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }
  
  .filter-bar .x-btn {
    margin-left: auto;
  }
  
/* サムネイルのグリッド：スマホ 2 列・PC 4 列の例 */
.deck-gallery article {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* 縦横比がバラバラでも崩れない */
.deck-gallery img.deck-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;   /* ここはデザインに合わせて。外せば画像本来の比率 */
  object-fit: cover;
  cursor: zoom-in;
}

