/*
Theme Name: Gridzen SEO (DMM) fix128 home-rotate-tabs
Theme URI: https://example.com/
Author: ChatGPT
Author URI: https://example.com/
Description: Lightweight, SEO-friendly WordPress theme with a responsive CSS Grid layout. Includes a built-in DMM Affiliate API importer for auto-posting (no external plugin required).
Version: fix128
Requires at least: 6.4
Tested up to: 6.4.7
Requires PHP: 7.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gridzen-seo
Tags: blog, grid-layout, two-columns, three-columns, custom-menu, featured-images, translation-ready
*/

:root{ --gz-stack-gap: 6px; }

/* Back to top button */
.gz-back-to-top{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 99999;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  color: #111;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  cursor: pointer;
  user-select: none;
}
.gz-back-to-top.is-show{ display: flex; }
.gz-back-to-top:hover{ transform: translateY(-1px); }
.gz-back-to-top:active{ transform: translateY(0); }
.gz-back-to-top:focus{ outline: none; box-shadow: 0 10px 24px rgba(0,0,0,.16), 0 0 0 3px rgba(0,0,0,.10); }
@media (max-width: 560px){
  .gz-back-to-top{ width: 44px; height: 44px; }
}


/* Base */
:root{
  --gzs-max: 1400px;
  --gzs-gap: 12px;
  --gzs-radius: 14px;
  --gzs-border: rgba(0,0,0,.08);
  /* Default thumbnail aspect ratio.
     fix92: align card thumbnail height to typical landscape main images.
     This makes the grid feel less "tall" and reduces vertical jumpiness. */
  --gzs-thumb-ar: 560 / 315;
}

/* Per-hub thumb ratios (prevents letterboxing while keeping CLS stable)
   - videoa(実写/動画) is typically landscape screenshots
   - doujin/books are typically portrait covers
*/
.gz-hub[data-mode="videoa"]{ --gzs-thumb-ar: 16 / 9; }
.gz-hub[data-mode="doujin"]{ --gzs-thumb-ar: 16 / 9; }
/* Books: keep portrait/vertical covers */
.gz-hub[data-mode="books"]{ --gzs-thumb-ar: 2 / 3 !important; }

/* fix98: belt-and-suspenders — force books cards to be portrait even if CSS vars get overridden. */
.gz-hub[data-mode="books"] .card-thumb{ aspect-ratio: 2 / 3 !important; }

/* fix100: allow portrait main thumbs in doujin when the main image itself is vertical. */
.gz-hub[data-mode="doujin"] .card-thumb.is-portrait{
  aspect-ratio: 2 / 3 !important;
}

/* fix100: post cards (site articles) can be portrait too. */
.posts-grid .card-thumb.is-portrait,
.gz-tabs-posts-grid .card-thumb.is-portrait{
  aspect-ratio: 2 / 3 !important;
}


/* Restore original reading width on single article pages (revert any narrow override). */
body.single .container{ max-width: var(--gzs-max) !important; }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height:1.7;
  color:#111;
  background:#fff;
}

a{ color: inherit; text-decoration: underline; text-underline-offset: .2em; }
a:hover{ opacity:.85; }

.container{
  max-width: var(--gzs-max);
  margin: 0 auto;
  padding: 18px;
}

/* fix95: Mobile full-width product grid without the common 100vw "drift" (right-shift).
   Instead of 100vw + calc(50%-50vw) (which can misalign on some mobile browsers),
   we cancel the container padding just for the product grid.
   Also switch to 1 column on phones so the landscape main image can use the full screen width.
   iOS safe-area is respected to avoid clipping on notches. */
@media (max-width: 649px){
  /* fix99: Make the product grid use the full screen width on phones without 100vw hacks.
     We cancel the container padding using negative margins, which keeps the grid centered
     and avoids iOS Safari drift and clipping. */
  body{ overflow-x: hidden; }

  /* Full-bleed for videoa/doujin only (books/posts keep original layout) */
  .gz-hub[data-mode="videoa"] .posts-grid,
  .gz-hub[data-mode="doujin"] .posts-grid{
    margin-left: -18px;
    margin-right: -18px;
    width: auto;
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    box-sizing: border-box;
    grid-template-columns: 1fr;
  }

  /* Edge-to-edge feel: remove side borders to prevent 1px clipping on iOS */
  .gz-hub[data-mode="videoa"] .card,
  .gz-hub[data-mode="doujin"] .card{
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .gz-hub[data-mode="videoa"] .card-thumb,
  .gz-hub[data-mode="doujin"] .card-thumb{ border-radius: 0; }

  /* Hard reset for books + posts tab in case a cached CSS bundle still applies old rules. */
  .gz-hub[data-mode="books"] .posts-grid,
  .gz-posts-wrap .posts-grid{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .gz-hub[data-mode="books"] .card,
  .gz-posts-wrap .card{
    border-radius: var(--gzs-radius) !important;
  }
}

/* Header */
.site-header{
  border-bottom: 1px solid var(--gzs-border);
  position: relative;
  top: 0;
  background: #fff;
  z-index: 10;
}
.header-inner{
  display:flex;
  align-items:center;
  gap: 14px;
  justify-content: space-between;
}
.site-title{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
}
.site-title a{ text-decoration: none; }

.nav-toggle{ display:none; }
.primary-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}
.primary-nav a{
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 10px;
}
.primary-nav a:hover{
  background: rgba(0,0,0,.04);
}

/* Layout */
.main-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gzs-gap);
  margin-top: 14px;
}
@media (min-width: 900px){
  .main-grid.has-sidebar{
    grid-template-columns: 1fr 320px;
  }
}

/* Posts grid */
.posts-grid{
  display:grid;
  gap: var(--gzs-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 650px){
  .posts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px){
  .posts-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card{
  border: 1px solid var(--gzs-border);
  border-radius: var(--gzs-radius);
  overflow:hidden;
  background:#fff;
  display:flex;
  flex-direction:column;
  min-height: 100%;
}

/* Inline ad card inserted between normal posts */
.card-inline-ad{
  grid-column: 1 / -1; /* span all columns */
  background: rgba(0,0,0,.02);
}
.card-inline-ad .gz-inline-ad-body{
  padding: 14px;
}
.card-thumb{
  display:block;
  width:100%;
  background: rgba(0,0,0,.03);
  position: relative;
  overflow: hidden;
  line-height:0;
  aspect-ratio: var(--gzs-thumb-ar);
}

/* 2枚サンプル縦連結（横長を縦長っぽく見せて余白を減らす）
   - 端末/ブラウザの丸め誤差で下端が欠けたり、2枚が"密着"しすぎると加工っぽく見えるので
     stack2 は少しだけ縦を長めに確保し、画像の間にわずかな余白(gap)を入れる。
   - 目安: 16:9×2 + gap(6px前後) に耐えるように、少し縦長寄りの比率にする */
.card-thumb[data-thumb-layout="stack2"]{ --gzs-thumb-ar: 8 / 9; }
.card-thumb .gz-thumb--stack2{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  gap: var(--gzs-stack-gap, 8px);
}

/* stack2 は中身の高さで自然に伸ばす（親の高さはJSが確保する） */
.card-thumb[data-thumb-layout="stack2"] .gz-thumb--stack2{ height:auto; }
.card-thumb .gz-thumb--stack2 .gz-thumb__half{
  flex: 0 0 auto;
}
.card-thumb img{
  position: static;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit: contain;
  object-position: center;
}

/* stack2 は「縦に2枚」なので、height:100%で押し潰すと端が欠けたり重なりやすい。
   stack2 のときだけ自然な高さ(auto)で表示し、JS側で必要な高さを確保する。 */
.card-thumb[data-thumb-layout="stack2"] img{
  height:auto;
}


/* ---- Fit for single thumbs (fix93) ----
   Always fill the landscape thumb box to match the main image shape exactly.
   Use object-fit: contain to avoid cropping. */
.card-thumb:not([data-thumb-layout="stack2"]){
  display:block;
}
.card-thumb:not([data-thumb-layout="stack2"]) img{
  width:100%;
  height:100%;
  object-fit: contain;
}


/* Tabs UI */
.gz-tabs{ margin: 0 0 2px; }

/* fix86: Robust spacing control between History/Favorites and Category/Tabs.
   Some Gutenberg layouts inject wrappers (group/columns/spacer) that keep vertical gaps.
   We solve it by moving the two blocks into a dedicated stack wrapper at runtime.
   This CSS is the visual side of that wrapper.
*/
.gz-panels-stack{
  display:flex;
  flex-direction:column;
  gap: var(--gz-stack-gap);
  margin: 0;
}
.gz-panels-stack > *{ margin: 0 !important; }

/* fix84: tighten gap between history/favs and category (Gutenberg wrappers) */
@supports (selector(:has(*))) {
  .wp-block-shortcode:has(.gz-history-wrap){ margin-bottom: var(--gz-stack-gap) !important; }
  .wp-block-shortcode:has(.gz-tabs){ margin-top: 0 !important; }
  .wp-block-group:has(.gz-history-wrap):has(.gz-tabs){ gap: var(--gz-stack-gap) !important; row-gap: var(--gz-stack-gap) !important; }
}

/* Category accordion (same style as history/favs) (fix78) */
.gz-cat-details{
  margin: 0 0 var(--gz-stack-gap);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  overflow: hidden;
}

.gz-cat-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.gz-cat-summary::-webkit-details-marker{ display:none; }

.gz-cat-summary-title{ font-size: 15px; font-weight: 700; }
.gz-cat-summary-right{ display:inline-flex; align-items:center; gap:8px; }

.gz-cat-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(0,0,0,.03);
  border-radius: 999px;
  line-height: 1;
  font-weight: 400 !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  font-family: inherit;
}
.gz-cat-details[open] .gz-cat-toggle{ background: rgba(0,0,0,.06); }

.gz-cat-body{
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(0,0,0,.10);
}
.gz-cat-details:not([open]){ margin-bottom: var(--gz-stack-gap); }

.gz-tabs-bar{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}
.gz-tab-btn{
  appearance:none;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
}
.gz-tab-btn.is-active{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
}
.gz-tab-placeholder{
  padding: 14px;
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 12px;
  opacity: .75;
}
.gz-tabs-panels{ margin-top: var(--gz-stack-gap); }

/* Search tab (same design as other tabs) */
.gz-tabs-search{
  margin-top: 0;
}

/* Button uses .gz-tab-btn; keep class for hooks */
.gz-tabs-search-btn{}

/* Panel is visually the same as other tab contents */
.gz-tabs-search-panel{
  margin-top: var(--gz-stack-gap);
  padding: 0;
  border: 0;
  background: transparent;
}
.gz-tabs-search-form{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.gz-tabs-search-input{
  flex: 1 1 220px;
  min-width: 180px;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.2;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

/* fix122: iPhoneで検索窓が縦にデカくならないように、PCっぽい高さに固定（スマホのみ） */
@media (max-width: 649px){
  .gz-tabs-search-form{ flex-direction: column; align-items: stretch; }
  .gz-tabs-search-input{
    width: 100%;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 32px !important;
    padding: 5px 10px !important;
    font-size: 16px !important; /* avoid iOS zoom */
    line-height: 1.2 !important;
    border-radius: 12px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .gz-tabs-search-actions{ width: 100%; justify-content: flex-start; }
}
.gz-tabs-search-actions{
  display:flex;
  gap: 8px;
  align-items: center;
}
.gz-tabs-search-actions .gz-tabs-search-submit,
.gz-tabs-search-actions .gz-tabs-search-close{
  white-space: nowrap;
  min-width: 72px;
  color: #111;
  -webkit-text-fill-color: #111;
}
.gz-tabs-search-submit,
.gz-tabs-search-close{
  padding: 9px 12px;
}
.gz-tabs-search-results{
  margin-top: 10px;
}

/* DMM importer post content helpers */
.gz-dmm-img{
  width:100%;
  height:auto;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
}
.gz-dmm-price{
  font-weight: 700;
}
.gz-dmm-cta{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  text-decoration: none;
}
.gz-dmm-cta:hover{ background: rgba(0,0,0,.03); }
.gz-dmm-credit{
  font-size: 12px;
  opacity: .75;
}
.card-body{
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  flex: 1;
}
.card-title{
  margin:0;
  font-size: 16px;
  line-height:1.35;
}
.card-title a{ text-decoration:none; }
.card-meta{
  font-size: 12px;
  color: rgba(0,0,0,.6);
}
.card-excerpt{
  margin:0;
  font-size: 14px;
  color: rgba(0,0,0,.8);
}

/* Single */
.entry-title{ margin: 0 0 10px; font-size: 26px; line-height: 1.25; }
.entry-meta{ font-size: 13px; color: rgba(0,0,0,.6); margin-bottom: 18px; }
.entry-content img{ max-width:100%; height:auto; border-radius: 12px; }
.entry-content a{ word-break: break-word; }

.post-thumb-single{
  margin: 0 0 18px;
}
.post-thumb-single img{ width:100%; height:auto; border-radius: var(--gzs-radius); }

/* Sidebar */
.widget-area{
  border: 1px solid var(--gzs-border);
  border-radius: var(--gzs-radius);
  padding: 12px;
  height: fit-content;
}
.widget{ margin-bottom: 12px; }
.widget:last-child{ margin-bottom: 0; }
.widget-title{
  font-size: 14px;
  margin: 0 0 8px;
}

/* Footer */
.site-footer{
  border-top: 1px solid var(--gzs-border);
  margin-top: 24px;
}
.footer-inner{
  font-size: 13px;
  color: rgba(0,0,0,.65);
  padding: 18px 0;
}

/* Accessibility */
.screen-reader-text{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}


/* DMM importer */
.gz-dmm-imglink{ display:inline-block; text-decoration:none; }
.gz-dmm-imglink:hover{ opacity:.9; }
.gz-dmm-titlelink{ margin: 6px 0 12px; font-weight: 700; }
.gz-dmm-titlea{ text-decoration: underline; }
.gz-dmm-titlea:hover{ color:#06c; }
.gz-dmm-img{ width:100%; height:auto; display:block; border-radius: 12px; }
.gz-aff-label{ font-size: 12px; color: rgba(0,0,0,.6); }
.gz-dmm-cta{ display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.12); text-decoration:none; }
.gz-dmm-cta:hover{ background: rgba(0,0,0,.04); }


/* DMM sample images */
.gz-dmm-samples{ display:block; margin: 10px 0; }
.gz-dmm-sample{ margin: 0 0 6px; }
.gz-dmm-sampleimg{ width:100%; height:auto; display:block; border-radius: 12px; }
.gz-dmm-samplelink{ display:block; text-decoration:none; }
.gz-dmm-samplelink:hover{ opacity:.92; }
.gz-dmm-price{ font-weight:600; }

/* Fix14: sample images vertical list */
.gz-dmm-samples{
  display:block;
  margin: 10px 0;
}
.gz-dmm-samples .gz-dmm-samplelink,
.gz-dmm-samples img{
  display:block;
}
.gz-dmm-samples img{
  width: 100%;
  height: auto;
  margin: 0 0 8px;
  border-radius: 10px;
}

/* Fix14: title text link styling under main image */
.gz-dmm-titlelink{
  margin: 8px 0 12px;
}
.gz-dmm-titlea{ text-decoration: underline; }
.gz-dmm-titlea:hover{ color:#06c; }

/* Fix14: product description block */
.gz-dmm-desc{
  margin: 10px 0 14px;
  line-height: 1.8;
}
.gz-dmm-desc h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
}


/* Fix15: UI tweaks */

/* Fix15: CTA and description spacing */
.gz-dmm-cta{
  display:inline-block;
  margin: 6px 0 4px;
}
.gz-dmm-desc{
  margin-top: 10px;
}
.gz-dmm-desc h3{
  margin-top: 0;
}



/* --- DMM AutoPost tweaks (Fix19) --- */
.gz-dmm-titlelink a{ text-decoration: underline; }
.gz-dmm-titlelink a:hover{ color:#1a73e8; }
.gz-dmm-samplelink{ display:block; margin: 6px 0; }

/* --- Ad slots --- */
.card-ad{
  padding: 10px 14px 14px;
  border-top: 1px dashed rgba(0,0,0,.12);
}
.card-ad .widget{
  margin: 0;
}
.single-bottom-ad{
  margin: 18px 0 0;
  padding: 12px;
  border: 1px dashed rgba(0,0,0,.12);
  border-radius: var(--gzs-radius);
  background: #fff;
}


/* --- DMM Hub (no-post fixed pages) --- */
.gz-hub-pagination{
  display:flex;
  gap:12px;
  justify-content:center;
  margin:18px 0;
}
.gz-hub-pagination a{
  padding:8px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  text-decoration:none;
}
.gz-hub-loadmore{
  display:block;
  margin:14px auto 28px;
  padding:10px 16px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}
.gz-hub.gz-hub-ready .gz-hub-loadmore{ display:none; }
.gz-hub.gz-hub-ready.gz-hub-manual .gz-hub-loadmore{ display:block; }
.gz-hub-loadmore[disabled]{
  opacity:.6;
  cursor:default;
}
.gz-hub-card .card-body{
  position:relative;
}
.gz-hub-badge{
  display:inline-block;
  font-size:12px;
  line-height:1;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  margin-bottom:8px;
}
.gz-hub-badge-pr{
  opacity:.9;
}
.gz-hub-note, .gz-hub-error{
  padding:12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  margin:10px 0;
}


/* --- Mobile nav: collapsible menu --- */
.nav-toggle{
  display:none;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  line-height:1;
}
.nav-toggle-icon{
  width:18px;
  height:12px;
  position:relative;
  display:inline-block;
}
.nav-toggle-icon:before,
.nav-toggle-icon:after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background: currentColor;
  border-radius:2px;
}
.nav-toggle-icon:before{ top:0; box-shadow: 0 5px 0 currentColor; }
.nav-toggle-icon:after{ bottom:0; }

@media (max-width: 720px){
  .header-inner{ flex-wrap:wrap; gap:12px; }
  .site-title{ max-width: 100%; }
  .site-title a{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 100%;
  }
  .nav-toggle{ display:inline-flex; margin-left:auto; }
  .primary-nav{ width:100%; display:none; }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .primary-nav a{
    display:block;
    padding:10px 12px;
    border:1px solid rgba(0,0,0,.10);
  }
}

/* --- DMM Hub loading indicator --- */
.gz-hub{
  position:relative;
}
.gz-hub-loader{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  position:sticky;
  bottom: 10px;
  width: fit-content;
  margin: 10px auto 18px;
  padding:10px 14px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:#fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  z-index: 5;
}
.gz-hub.gz-is-loading .gz-hub-loader{
  display:flex;
}
.gz-spinner{
  width:16px;
  height:16px;
  border:2px solid rgba(0,0,0,.18);
  border-top-color: rgba(0,0,0,.65);
  border-radius:50%;
  animation: gzspin 0.9s linear infinite;
}
@keyframes gzspin{ to { transform: rotate(360deg); } }

/* --- Infinite scroll (main posts grid) --- */
.gz-inf-ready .pagination{ display:none; }
.gz-inf-loader{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width: fit-content;
  margin: 12px auto 22px;
  padding:10px 14px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:#fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}




/* ===== Search (作品を検索する) — separate block under Category ===== */
.gz-search-details{
  margin: 0 0 var(--gz-stack-gap);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  overflow: hidden;
}
.gz-search-summary{
  list-style: none;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.gz-search-summary::-webkit-details-marker{ display:none; }
.gz-search-summary-title{
  font-weight: 700;
  font-size: 15px;
}
.gz-search-summary-right{ display:inline-flex; align-items:center; gap:8px; }
.gz-search-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(0,0,0,.03);
  border-radius: 999px;
  line-height: 1;
  font-weight: 400 !important;
  cursor: pointer;
  user-select: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  font-family: inherit;
}
.gz-search-details[open] .gz-search-toggle{ background: rgba(0,0,0,.06); }

.gz-search-body{
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(0,0,0,.10);
}

/* ===== Click History (閲覧履歴) ===== */
.gz-history-wrap{ margin: var(--gz-stack-gap) 0 0; }

.gz-history-details{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  overflow: hidden;
}

.gz-history-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.gz-history-summary::-webkit-details-marker{ display:none; }

.gz-history-summary-title{
  font-size: 15px;
  font-weight: 700;
}
.gz-history-count{ opacity: .7; font-size: 13px; }

.gz-history-summary-right{ display:inline-flex; align-items:center; gap:8px; }

.gz-history-toggle{
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(0,0,0,.03);
  border-radius: 999px;
  line-height: 1;
}

.gz-history-details[open] .gz-history-toggle{ background: rgba(0,0,0,.06); }

.gz-history-body{ padding: 12px; }

.gz-history-actions{
  display:flex;
  justify-content:flex-end;
  margin-bottom: 10px;
}

.gz-history-clear{
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: transparent;
  border-radius: 8px;
}

.gz-history-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 720px){
  .gz-history-list{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.gz-history-item{ position: relative; }

.gz-history-link{
  display:block;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  overflow:hidden;
  background: #fff;
  color: inherit;
}

.gz-history-remove{
  position:absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.16);
  background: #fff;
  cursor: pointer;
  line-height: 1;
}

.gz-history-thumb{
  width:100%;
  background: rgba(0,0,0,.03);
  overflow:hidden;
  line-height:0;
  aspect-ratio: var(--gzs-thumb-ar);
}

.gz-history-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit: contain;
  object-position: center;
}

.gz-history-title{
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
  color: inherit;
}

.gz-history-empty{ opacity:.7; margin: 0; }

/* Floating mode: [gz_history floating="1"] */
.gz-history-floating{
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: min(92vw, 380px);
  z-index: 9999;
}

.gz-history-floating .gz-history-details{
  border-radius: 16px;
}

.gz-history-floating .gz-history-summary{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  background: #fff;
}

.gz-history-floating .gz-history-details[open] .gz-history-summary{
  border-radius: 16px 16px 0 0;
}

.gz-history-floating .gz-history-body{
  border-top: 1px solid rgba(0,0,0,.10);
  max-height: min(60vh, 520px);
  overflow: auto;
}


/* ===== Favorites - collapsible under history (fix75) ===== */
.gz-favs-details{
  margin-top: var(--gz-stack-gap);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  overflow: hidden;
}
.gz-favs-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.gz-favs-summary::-webkit-details-marker{ display:none; }

.gz-favs-summary-title{ font-size: 15px; font-weight: 700; }
.gz-favs-count{ opacity: .7; font-size: 13px; }
.gz-favs-summary-right{ display:inline-flex; align-items:center; gap:8px; }

.gz-favs-toggle{
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(0,0,0,.03);
  border-radius: 999px;
  line-height: 1;
}
.gz-favs-details[open] .gz-favs-toggle{ background: rgba(0,0,0,.06); }

.gz-favs-body{ padding: 12px; }

.gz-favs-actions{ display:flex; justify-content:flex-end; margin-bottom: 10px; }

.gz-favs-clear{
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: transparent;
  border-radius: 8px;
}
.gz-favs-clear[disabled]{ opacity:.5; cursor:not-allowed; }

.gz-favs-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 720px){
  .gz-favs-list{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.gz-favs-item{ position: relative; }

.gz-favs-link{
  display:block;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  overflow:hidden;
  background: #fff;
  color: inherit;
}

.gz-favs-thumb{
  width:100%;
  background: rgba(0,0,0,.03);
  overflow:hidden;
  line-height:0;
  aspect-ratio: var(--gzs-thumb-ar);
}

.gz-favs-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit: contain;
  object-position: center;
}

.gz-favs-title{
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
}

.gz-favs-remove{
  position:absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.16);
  background: #fff;
  cursor: pointer;
  line-height: 1;
}

.gz-favs-empty{ opacity:.7; margin: 0; }

/* Floating mode: stacked pills */
.gz-history-floating{ display:flex; flex-direction:column; gap: 10px; }

.gz-history-floating .gz-favs-details{ margin-top: 0; border-radius: 16px; }

.gz-history-floating .gz-favs-summary{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  background: #fff;
}

.gz-history-floating .gz-favs-details[open] .gz-favs-summary{ border-radius: 16px 16px 0 0; }

.gz-history-floating .gz-favs-body{
  border-top: 1px solid rgba(0,0,0,.10);
  max-height: min(52vh, 520px);
  overflow: auto;
}


/* Fix: remove baseline gap under main images (especially horizontal images) */
.gz-dmm-mainimg{ line-height:0; }
.gz-dmm-mainimglink{ display:block; line-height:0; }
.gz-dmm-mainimgtag{ display:block; width:100%; height:auto; }


/* GZ STACK: same-page vertical triplet (no titles) */
.gz-stack{ display:block; }
.gz-stack-section{ margin: 0 0 18px; }
.gz-stack-section:last-child{ margin-bottom:0; }


/* === Favorites + Card Actions (fix74) === */
.gz-card-actions{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items:stretch;
  margin-top: 6px;
  width: 100%;
}
.gz-readmore-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  font-size: 13px;
  line-height: 1;
  text-decoration:none;
  color: inherit;
  width: 100%;
  min-width: 0;
}
.gz-readmore-btn:hover{ background: rgba(0,0,0,.03); }
.gz-fav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  white-space: normal;
}
.gz-fav-btn:hover{ background: rgba(0,0,0,.03); }
.gz-fav-btn.is-on{
  border-color: rgba(0,0,0,.28);
  background: rgba(0,0,0,.04);
}

/* fix103: Make the "この作品の画像を見る" button look the same on PC and mobile */
.gz-samples-details{ margin: 10px 0 6px; }
.gz-samples-summary,
.gz-dmm-samples-summary{ list-style:none; cursor:pointer; }
.gz-samples-summary::-webkit-details-marker,
.gz-dmm-samples-summary::-webkit-details-marker{ display:none; }

.gz-samples-summary span,
.gz-dmm-samples-summary span{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  font-size: 13px;
  line-height: 1;
  text-align:center;
}
.gz-samples-details[open] .gz-samples-summary span,
.gz-dmm-samples-details[open] .gz-dmm-samples-summary span{ background: rgba(0,0,0,.03); }

.gz-samples-body,
.gz-dmm-samples-body{ margin-top: 10px; }

/* Closed state must fully collapse */
details.gz-samples-details:not([open]) .gz-samples-body,
details.gz-dmm-samples-details:not([open]) .gz-dmm-samples-body{ display:none !important; margin-top:0 !important; }

/* Hard collapse for iOS Safari / optimizer edge cases */
.gz-samples-body[hidden],
.gz-dmm-samples-body[hidden]{
  display:none !important;
  height:0 !important;
  max-height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* Used by JS to nudge a reflow */
.gz-force-reflow{ transform: translateZ(0); }

/* Bottom close button inside the viewer */
.gz-samples-close-btn{
  display:block;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  font-size: 13px;
  line-height: 1;
  text-align:center;
  cursor: pointer;
}
.gz-samples-close-btn:hover{ background: rgba(0,0,0,.03); }

/* fix108: inside viewer, show a lightweight more button to load the next chunk */
.gz-samples-controls{ display:block; margin-top: 10px; }
.gz-samples-more-btn{
  display:block;
  width: 100%;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  font-size: 13px;
  line-height: 1;
  text-align:center;
  cursor: pointer;
}
.gz-samples-more-btn:hover{ background: rgba(0,0,0,.03); }

.gz-samples-note{
  margin: 8px 0 0;
  font-size: 12px;
  opacity: .75;
}


/* fix104: iOS Safari can keep stale CSS grid row sizes after <details> toggles.
   On mobile we already show 1 column, so switch to block flow to eliminate grid track caching. */
@media (max-width: 649px){
  .posts-grid{ display:block; }
  .posts-grid > *{ margin-bottom: var(--gzs-gap); }
  .posts-grid > *:last-child{ margin-bottom: 0; }
  .card{ min-height: 0; }

  /* Mobile: put action buttons under the input, left-aligned */
  .gz-tabs-search-form{ flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .gz-tabs-search-input{ width: 100%; min-width: 0; padding: 7px 10px; height: 32px; font-size: 16px; line-height: 1.2; -webkit-appearance: none; appearance: none; }
  .gz-tabs-search-actions{ width: 100%; justify-content: flex-start; }
}

/* On very small screens, stack the action buttons so text never gets clipped. */
/* fix98: keep 2-column actions on normal phones; only stack on very narrow screens. */
@media (max-width: 360px){
  .gz-card-actions{ grid-template-columns: 1fr; }
}

@media (max-width: 420px){
  .gz-readmore-btn,
  .gz-fav-btn{ font-size: 12px; padding: 10px 10px; }

/* fix100: Collapsible sample viewer inside each DMM card */
.gz-samples-details{ margin: 10px 0 6px; }
.gz-samples-summary{ list-style:none; cursor:pointer; }
.gz-samples-summary::-webkit-details-marker{ display:none; }
.gz-samples-summary span{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  font-size: 13px;
  line-height: 1;
  text-align:center;
}
.gz-samples-details[open] .gz-samples-summary span{ background: rgba(0,0,0,.03); }
.gz-samples-body{ margin-top: 10px; }
/* fix101: ensure closed state collapses completely (avoid residual whitespace on some mobile browsers/optimizers) */
details.gz-samples-details:not([open]) .gz-samples-body{ display:none !important; margin-top:0 !important; }
/* fix102: additional hard collapse for iOS Safari / optimizer edge cases */
.gz-samples-body[hidden],
.gz-dmm-samples-body[hidden]{
  display:none !important;
  height:0 !important;
  max-height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* fix102: tiny style change used to force a grid reflow on iOS when toggling details */
.gz-force-reflow{ transform: translateZ(0); }

/* fix100: Collapsible sample viewer on single product pages */
.gz-dmm-samples-details{ margin: 12px 0 10px; }
.gz-dmm-samples-summary{ list-style:none; cursor:pointer; }
.gz-dmm-samples-summary::-webkit-details-marker{ display:none; }
.gz-dmm-samples-summary span{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  font-size: 13px;
  line-height: 1;
  text-align:center;
}
.gz-dmm-samples-details[open] .gz-dmm-samples-summary span{ background: rgba(0,0,0,.03); }
.gz-dmm-samples-body{ margin-top: 10px; }
/* fix101: ensure closed state collapses completely */
details.gz-dmm-samples-details:not([open]) .gz-dmm-samples-body{ display:none !important; margin-top:0 !important; }
}

/* perf: Let the browser skip layout/paint for offscreen cards.
   Modern browsers (including recent iOS Safari) can dramatically reduce scroll jank on long grids.
   Older browsers simply ignore this block.
*/
@supports (content-visibility: auto){
  article.card,
  .gz-hub article.gz-hub-card{
    content-visibility: auto;
    contain-intrinsic-size: 320px 520px;
  }
}

/* fix123: iPhone/スマホで検索窓が縦にデカくなる問題を強制的に抑える（PCっぽい高さ・見た目） */
@media (max-width: 649px){
  /* fix124: iPhone/スマホで検索窓が縦に大きくならないよう、PCと同じ薄さに強制 */
  .gz-search-details .gz-tabs-search-input{
    display: block !important;
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 5px 10px !important;
    line-height: 1.2 !important;
    border: 1px solid rgba(0,0,0,.14) !important;
    background: #fff !important;
    border-radius: 12px !important;
    font-size: 16px !important; /* iOSズーム回避 */
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .gz-search-details .gz-tabs-search-input::-webkit-search-decoration,
  .gz-search-details .gz-tabs-search-input::-webkit-search-cancel-button,
  .gz-search-details .gz-tabs-search-input::-webkit-search-results-button,
  .gz-search-details .gz-tabs-search-input::-webkit-search-results-decoration{
    -webkit-appearance: none;
  }
}