/*
Theme Name: 美味しんぼデータベース（雁）
Theme URI: https://example.com/
Author: 5chome-shinbun
Author URI: https://example.com/
Description: Kurita Relationship Graph（人物相関図）を120%活かす、ウインドウ幅フル活用・レトロmacOS風テーマ。人物/回ページで“芋づる式”に辿れるナビを最大化。
Version: 1.4.1
Requires at least: 6.0
Tested up to: 6.9
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oishinbo-database-gan
Tags: full-width, custom-menu, translation-ready
*/

:root{
  --gan-bg: #e9e9ea;
  --gan-surface: rgba(255,255,255,.74);
  --gan-surface-2: rgba(255,255,255,.56);
  --gan-border: rgba(0,0,0,.14);
  --gan-ink: rgba(0,0,0,.84);
  --gan-ink-soft: rgba(0,0,0,.62);
  --gan-shadow: 0 18px 44px rgba(0,0,0,.14);
  --gan-radius: 16px;
  --gan-pad: clamp(12px, 1.6vw, 24px);
  --gan-gap: clamp(12px, 1.2vw, 18px);
}

html, body{ height: 100%; }
body{
  margin:0;
  color: var(--gan-ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.92), rgba(240,240,240,.86)),
    linear-gradient(#f6f6f7, var(--gan-bg));
  font-family: system-ui, -apple-system, "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.75;
}

a{ color: inherit; text-decoration-thickness: from-font; text-underline-offset: 0.18em; }
a:hover{ opacity: .86; }

img{ max-width: 100%; height: auto; }
*{ box-sizing: border-box; }

.gan-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }

/* Menubar */
.gan-menubar{
  position: sticky;
  top:0;
  z-index: 9999;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(rgba(255,255,255,.72), rgba(240,240,240,.64));
  border-bottom: 1px solid var(--gan-border);
}
.gan-menubar-inner{
  width: 100%;
  padding: 10px var(--gan-pad);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.gan-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration:none;
}
.gan-lights{
  display:inline-flex;
  gap: 6px;
  align-items:center;
}
.gan-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.16);
  background: linear-gradient(#fff, #ddd);
}
.gan-dot.red{ background: linear-gradient(#ffb3b3,#ff6b6b); }
.gan-dot.yellow{ background: linear-gradient(#ffe6a3,#ffd24d); }
.gan-dot.green{ background: linear-gradient(#b9f5c7,#4cd964); }

.gan-nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 800;
  color: var(--gan-ink-soft);
}
.gan-pill{
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.12);
  background: linear-gradient(rgba(255,255,255,.76), rgba(230,230,230,.62));
  border-radius: 999px;
  padding: 6px 10px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.gan-pill small{ opacity:.8; font-weight:900; }

.gan-wrap{
  width: 100%;
  padding: var(--gan-pad);
}

/* Full-width frame */
.gan-frame{
  width: 100%;
  max-width: none;
  margin: 0;
  border: 1px solid var(--gan-border);
  border-radius: var(--gan-radius);
  background: var(--gan-surface);
  box-shadow: var(--gan-shadow);
  overflow: hidden;
}

/* Content */
.gan-content{ padding: clamp(16px, 2.2vw, 30px); }

.gan-title{
  margin: 0 0 10px;
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.15;
  letter-spacing: .01em;
}

.gan-subtitle{
  margin: 0 0 18px;
  color: var(--gan-ink-soft);
  font-size: 13px;
  font-weight: 800;
}

/* Breadcrumbs */
.gan-bc{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--gan-ink-soft);
  font-weight: 800;
  margin-bottom: 10px;
}
.gan-bc a{ text-decoration: none; border-bottom: 1px dotted rgba(0,0,0,.22); }

/* Layout grid for "explore" pages */
.gan-layout{
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr) 360px;
  gap: var(--gan-gap);
}

/* Explicit column assignment so multiple panels can live in the same column
   without being re-flowed into the next column by DOM order. */
.gan-layout .gan-col-left{ grid-column: 1; }
.gan-layout .gan-col-center{ grid-column: 2; }
.gan-layout .gan-col-right{ grid-column: 3; }
@media (max-width: 1200px){
  .gan-layout{ grid-template-columns: 320px minmax(0, 1fr); }
  .gan-layout .gan-col-right{ grid-column: 1 / -1; }

  /* Episode main area: stack cast -> events -> kansho on narrower screens */
  .single-krg_episode #gan-episode-maincol{ grid-template-columns: 1fr; }
  .single-krg_episode #gan-episode-maincol #gan-between-events{ grid-column: 1; grid-row: 2; }
  .single-krg_episode #gan-episode-maincol #gan-episode-kansho{ grid-column: 1; grid-row: 3; }
}
@media (max-width: 860px){
  .gan-layout{ grid-template-columns: 1fr; }
  .gan-layout .gan-col-left,
  .gan-layout .gan-col-center,
  .gan-layout .gan-col-right{ grid-column: 1 / -1; }
}

/* Episode page: keep "次回までに起きたこと" in its original center-column position.
   Make only "次のジャンプ（人物）" full-width, and show it as an 8-column grid. */
.single-krg_episode .gan-panel.gan-nextjump{ grid-column: 1 / -1; }
.single-krg_episode .gan-nextjump-grid{
  display:grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1200px){
  .single-krg_episode .gan-nextjump-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .single-krg_episode .gan-nextjump-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .single-krg_episode .gan-nextjump-grid{ grid-template-columns: 1fr; }
}

/* Episode page: lock row positions so the right column (出来事) stays at the top. */
@media (min-width: 1201px){
  .single-krg_episode .gan-layout{ grid-auto-rows: min-content; }
  .single-krg_episode .gan-layout > .gan-panel{ align-self: start; }
  .single-krg_episode .gan-layout > #gan-episode-maincol{ align-self: start; }

  /* Merge center + right into one "main" column, then split it inside */
  .single-krg_episode #gan-episode-maincol{
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--gan-gap);
    align-items: start;
  }
  .single-krg_episode #gan-episode-maincol #gan-episode-cast{ grid-column: 1; grid-row: 1; }
  .single-krg_episode #gan-episode-maincol #gan-between-events{ grid-column: 2; grid-row: 1; }
  .single-krg_episode #gan-episode-maincol #gan-episode-kansho{ grid-column: 1 / -1; grid-row: 2; }

  /* Next-jump section should be full-width under the three columns. */
  .single-krg_episode .gan-panel.gan-nextjump{ grid-column: 1 / -1; grid-row: 2; }
}



/* Compact cards in the next-jump grid */
.single-krg_episode .gan-nextjump-grid .gan-card{ min-height: 0; }
.single-krg_episode .gan-nextjump-grid .gan-card-thumb{ aspect-ratio: 1 / 1; }
.single-krg_episode .gan-nextjump-grid .gan-card-body{ padding: 8px 10px; }
.single-krg_episode .gan-nextjump-grid .gan-card-title{ font-size: 12px; margin: 0 0 4px; }
.single-krg_episode .gan-nextjump-grid .gan-card-note{ display:none; }


.gan-panel{
  border: 1px solid var(--gan-border);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  overflow:hidden;
}
.gan-panel-h{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.gan-panel-h h2{
  margin:0;
  font-size: 13px;
  font-weight: 900;
  color: var(--gan-ink-soft);
  letter-spacing: .02em;
}
.gan-panel-b{ padding: 12px; }

.gan-chips{ display:flex; gap: 8px; flex-wrap: wrap; }
.gan-chip{
  border: 1px solid rgba(0,0,0,.12);
  background: linear-gradient(rgba(255,255,255,.82), rgba(235,235,235,.62));
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 900;
  color: var(--gan-ink-soft);
}

/* Cards grid */
.gan-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1200px){ .gan-grid{ grid-template-columns: repeat(4, 1fr);} }
@media (max-width: 980px){ .gan-grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 640px){ .gan-grid{ grid-template-columns: repeat(2, 1fr);} }

/* Compact grid for taxonomy terms (e.g., dishes) */
.gan-term-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1200px){ .gan-term-grid{ grid-template-columns: repeat(5, 1fr);} }
@media (max-width: 980px){ .gan-term-grid{ grid-template-columns: repeat(4, 1fr);} }
@media (max-width: 640px){ .gan-term-grid{ grid-template-columns: repeat(2, 1fr);} }

.gan-term-card{
  border: 1px solid var(--gan-border);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  padding: 10px 12px;
  text-decoration:none;
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.gan-term-card:hover{ background: rgba(255,255,255,.92); }
.gan-term-title{ margin:0; font-weight: 1000; font-size: 13px; line-height:1.25; }
.gan-term-meta{ font-size: 12px; font-weight: 900; color: var(--gan-ink-soft); display:flex; gap:8px; flex-wrap:wrap; }

.gan-card{
  border: 1px solid var(--gan-border);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  overflow:hidden;
  display:flex;
  flex-direction: column;
  min-height: 190px;
}
.gan-card-thumb{
  aspect-ratio: 4 / 3;
  background: linear-gradient(#f2f2f2,#dcdcdc);
}
.gan-card-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.gan-card-body{ padding: 10px 12px; }
.gan-card-title{
  font-weight: 900;
  font-size: 14px;
  margin: 0 0 6px;
}
.gan-card-meta{
  font-size: 12px;
  color: var(--gan-ink-soft);
  font-weight: 800;
}
.gan-card-note{
  font-size: 12px;
  color: var(--gan-ink-soft);
  margin-top: 6px;
}

/* List */
.gan-list{ list-style:none; padding:0; margin:0; }
.gan-list li{ padding: 8px 0; border-bottom: 1px dashed rgba(0,0,0,.12); }
.gan-list li:last-child{ border-bottom:0; }
.gan-kv{ display:flex; gap:8px; align-items: baseline; flex-wrap: wrap; }
.gan-k{ font-weight: 900; color: var(--gan-ink-soft); font-size: 12px; }
.gan-v{ font-weight: 900; font-size: 12px; }

/* Forms */
.gan-form{ display:flex; gap: 8px; flex-wrap: wrap; }
.gan-input{
  border:1px solid rgba(0,0,0,.16);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,.8);
  font-weight: 800;
  font-size: 13px;
  min-width: 120px;
}
.gan-btn{
  border:1px solid rgba(0,0,0,.16);
  border-radius: 12px;
  padding: 8px 12px;
  background: linear-gradient(rgba(255,255,255,.86), rgba(235,235,235,.62));
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}
.gan-btn:hover{ opacity:.9; }

/* Footer */
.gan-footer{
  padding: 20px var(--gan-pad);
  text-align:center;
  color: var(--gan-ink-soft);
  font-size: 12px;
}


/* ===== Home (database landing) ===== */
.gan-home-content{ padding-top: clamp(18px, 2.6vw, 34px); }
.gan-home-hero{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--gan-gap);
}
.gan-home-title{
  margin:0 0 6px;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height:1.12;
  letter-spacing:.01em;
}
.gan-home-tagline{ margin:0; color: var(--gan-ink-soft); font-size:13px; font-weight:800; }
.gan-home-stats{
  display:flex; gap: 10px; flex-wrap: wrap; justify-content:flex-end;
}
.gan-stat{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 96px;
  box-shadow: var(--gan-shadow-soft);
}
.gan-stat-k{ display:block; font-size:12px; color: var(--gan-ink-soft); font-weight:900; }
.gan-stat-v{ display:block; font-size:22px; font-weight:1000; letter-spacing:.02em; }

.gan-db{
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--gan-gap);
  align-items:start;
}
.gan-db-box{
  border: 1px solid var(--gan-border);
  border-radius: var(--gan-radius);
  background: rgba(255,255,255,.72);
  box-shadow: var(--gan-shadow-soft);
  overflow:hidden;
}
.gan-db-h{
  margin:0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing:.02em;
}
.gan-db-box > :not(.gan-db-h){ padding: 12px; }

.gan-navgrid{ display:grid; gap: 8px; }
.gan-navlink{
  display:flex; gap: 10px; align-items:center;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.72);
  border-radius: 14px;
  padding: 9px 10px;
  text-decoration:none;
  font-weight: 950;
}
.gan-navlink:hover{ background: rgba(255,255,255,.92); }
.gan-ico{ width: 20px; display:inline-flex; justify-content:center; }

.gan-muted{ margin: 8px 0 0; color: var(--gan-ink-soft); font-size:12px; font-weight:800; }
.gan-recent .gan-chip{ font-size: 12px; }

.gan-mini-cols{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gan-mini-h{ font-size:12px; color: var(--gan-ink-soft); font-weight:1000; margin-bottom: 6px; }
.gan-mini-list{ list-style:none; padding:0; margin:0; display:grid; gap: 6px; }
.gan-mini-list a{ text-decoration:none; }
.gan-mini-list a:hover{ text-decoration:underline; }

.gan-searchbox .gan-db-h{ display:flex; align-items:center; justify-content:space-between; }
.gan-searchbar{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.gan-input-lg{ min-width: 280px; flex: 1 1 360px; padding: 12px 12px; border-radius: 16px; font-size: 14px; }
.gan-select{
  border:1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.88);
  border-radius: 14px;
  padding: 10px 10px;
  font-size: 13px;
  font-weight: 900;
}
.gan-btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.gan-hints{
  margin-top: 10px;
  color: var(--gan-ink-soft);
  font-size: 12px;
  font-weight: 900;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:center;
}
.gan-kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.72);
  box-shadow: var(--gan-shadow-soft);
  font-weight: 1000;
}
.gan-dotsep{ opacity:.65; }

.gan-db-main{ display:grid; gap: var(--gan-gap); }
.gan-db-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: var(--gan-gap);
}
.gan-warp{ display:grid; gap: 10px; }
.gan-warp-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gan-mini{ font-size: 12px; color: var(--gan-ink-soft); font-weight: 1000; display:grid; gap: 6px; }
.gan-mini > span{ opacity:.85; }
.gan-seg{
  display:flex; gap: 8px; flex-wrap:wrap;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
  border-radius: 16px;
  padding: 6px;
}
.gan-seg label{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 950;
}
.gan-seg input{ accent-color: var(--gan-accent); }
.gan-details{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
  border-radius: 16px;
  padding: 10px 12px;
}
.gan-details summary{
  cursor:pointer;
  font-weight: 1000;
  color: var(--gan-ink-soft);
}
.gan-details-b{ margin-top: 10px; }
.gan-warp-actions{ display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }

.gan-steps{ margin: 0; padding-left: 18px; display:grid; gap: 8px; }
.gan-steps strong{ font-weight: 1100; }

@media (max-width: 980px){
  .gan-db{ grid-template-columns: 1fr; }
  .gan-db-grid{ grid-template-columns: 1fr; }
  .gan-home-hero{ align-items:flex-start; flex-direction:column; }
  .gan-home-stats{ justify-content:flex-start; }
  .gan-mini-cols{ grid-template-columns: 1fr; }
}

/* =========================================================
   KRG graph layout tweak (desktop):
   Move side panel (filter/card) below graph to widen view.
   Applies to character single + graph hub/explore pages.
   ========================================================= */
body.single-krg_character .krg-body,
body.page-template-graph-hub .krg-body,
body.page-template-page-templates-graph-hub-php .krg-body,
body.page-template-explore .krg-body,
body.page-template-page-templates-explore-php .krg-body{
  grid-template-columns: 1fr !important;
}

body.single-krg_character .krg-side,
body.page-template-graph-hub .krg-side,
body.page-template-page-templates-graph-hub-php .krg-side,
body.page-template-explore .krg-side,
body.page-template-page-templates-explore-php .krg-side{
  border-left: 0 !important;
  border-top: 1px solid rgba(0,0,0,.12);
}


/* Body panel width: match right-column panel width on wide screens */
@media (max-width: 1200px){
  }


/* Facet chips (ingredient/method) */
.gan-chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gan-chip-n{margin-left:8px;opacity:.7;font-size:12px}
.gan-mini-h{font-size:14px;margin:0 0 8px 0}
.gan-term-facets{margin-top:8px;font-size:13px;opacity:.85}

/* =========================================================
   Tables (episode template)
   - unified with gan-panel (frosted + thin borders + rounded)
   ========================================================= */
:where(.gan-content, .entry-content) table{
  width: 100%;
  margin: 12px 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--gan-border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.72);
}

:where(.gan-content, .entry-content) table caption{
  caption-side: top;
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
  color: var(--gan-ink-soft);
}

:where(.gan-content, .entry-content) table th,
:where(.gan-content, .entry-content) table td{
  padding: 10px 12px;
  border-right: 1px solid rgba(0,0,0,.10);
  border-bottom: 1px solid rgba(0,0,0,.10);
  vertical-align: top;
}

:where(.gan-content, .entry-content) table tr > *:last-child{ border-right: 0; }
:where(.gan-content, .entry-content) table tr:last-child > *{ border-bottom: 0; }

/* column header row (your markup uses first row in tbody) */
:where(.gan-content, .entry-content) table tr:first-child th,
:where(.gan-content, .entry-content) table th[scope="col"]{
  background: rgba(255,255,255,.55);
  color: var(--gan-ink-soft);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .02em;
}

/* row header (left-most th) */
:where(.gan-content, .entry-content) table th[scope="row"]{
  white-space: nowrap;
  font-weight: 1000;
  color: var(--gan-ink);
  background: rgba(255,255,255,.62);
}

/* zebra stripes (data rows) */
:where(.gan-content, .entry-content) table tr:nth-child(even) td{
  background: rgba(255,255,255,.58);
}
:where(.gan-content, .entry-content) table tr:nth-child(even) th[scope="row"]{
  background: rgba(255,255,255,.66);
}

/* hover: subtle spotlight */
:where(.gan-content, .entry-content) table tr:hover td,
:where(.gan-content, .entry-content) table tr:hover th[scope="row"]{
  background: rgba(255,255,255,.86);
}

/* small screens: allow horizontal scroll without breaking layout */
@media (max-width: 640px){
  :where(.gan-content, .entry-content) table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  :where(.gan-content, .entry-content) table th,
  :where(.gan-content, .entry-content) table td{
    min-width: 180px;
  }
}
/* =========================================
   WordPress 標準ギャラリー（Classic / Block）
   既存の gan デザイン（薄い罫線 + 角丸 + 白ガラス面）に寄せる
   ========================================= */

:where(.gan-content, .entry-content) .gallery{
  /* 既定値（gallery-columns-* が付くので通常は上書きされる） */
  --gan-gallery-cols: 3;

  margin: 14px 0 18px;
  padding: 12px;

  /* 全体を「パネル」っぽく */
  border: 1px solid var(--gan-border);
  border-radius: var(--gan-radius);
  background: rgba(255,255,255,.55);
  box-shadow: var(--gan-shadow-soft, 0 12px 32px rgba(0,0,0,.10));

  display: grid;
  grid-template-columns: repeat(var(--gan-gallery-cols), minmax(0, 1fr));
  gap: 12px;
}

/* columns クラスから列数を反映 */
:where(.gan-content, .entry-content) .gallery.gallery-columns-1{ --gan-gallery-cols: 1; }
:where(.gan-content, .entry-content) .gallery.gallery-columns-2{ --gan-gallery-cols: 2; }
:where(.gan-content, .entry-content) .gallery.gallery-columns-3{ --gan-gallery-cols: 3; }
:where(.gan-content, .entry-content) .gallery.gallery-columns-4{ --gan-gallery-cols: 4; }
:where(.gan-content, .entry-content) .gallery.gallery-columns-5{ --gan-gallery-cols: 5; }
:where(.gan-content, .entry-content) .gallery.gallery-columns-6{ --gan-gallery-cols: 6; }
:where(.gan-content, .entry-content) .gallery.gallery-columns-7{ --gan-gallery-cols: 7; }
:where(.gan-content, .entry-content) .gallery.gallery-columns-8{ --gan-gallery-cols: 8; }
:where(.gan-content, .entry-content) .gallery.gallery-columns-9{ --gan-gallery-cols: 9; }

/* figure の謎余白を消す */
:where(.gan-content, .entry-content) figure.gallery-item{
  margin: 0;
}

/* 画像枠（カード化） */
:where(.gan-content, .entry-content) .gallery-icon{
  border: 1px solid var(--gan-border);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);

  /* サムネを正方形に揃える（サイズ違いでも崩れにくい） */
  aspect-ratio: 1 / 1;
  display: block;
}

/* WP標準だと a が入るパターンがあるので両対応 */
:where(.gan-content, .entry-content) .gallery-icon > a{
  display: block;
  width: 100%;
  height: 100%;
}

/* 画像の収まり */
:where(.gan-content, .entry-content) .gallery-icon img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
}

/* Hover（既存の hover トーンに合わせて少し明るく） */
:where(.gan-content, .entry-content) .gallery-item:hover .gallery-icon{
  background: rgba(255,255,255,.92);
}
:where(.gan-content, .entry-content) .gallery-item:hover .gallery-icon img{
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.03);
}

/* キーボード操作の見た目 */
:where(.gan-content, .entry-content) .gallery-icon > a:focus-visible{
  outline: 3px solid rgba(0,0,0,.22);
  outline-offset: 3px;
  border-radius: 16px;
}

/* キャプション（使ってる場合） */
:where(.gan-content, .entry-content) .gallery-caption{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--gan-ink-soft);
  line-height: 1.35;
}

/* レスポンシブ：狭い画面では列数を強制的に落とす */
@media (max-width: 860px){
  :where(.gan-content, .entry-content) .gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
  }
}
@media (max-width: 520px){
  :where(.gan-content, .entry-content) .gallery{
    grid-template-columns: 1fr;
  }
}