/* ===========================
   Works Single (cosplay_work)
   レイアウト＆見た目
=========================== */

/* ベース幅・中央ロック */
.gallery-single.wrapper{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 64px;
}

/* ========== 上段ヒーロー 2カラム ========== */
.gs-hero2{
  display: grid;
  grid-template-columns: 5fr 4fr;     /* 画像 : 情報（目安 5:4） */
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  margin: clamp(18px, 3vw, 28px) 0 clamp(22px, 3.6vw, 36px);
}
.gs-hero2__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;                /* 縦めの写真想定 */
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.gs-hero2__meta{
  min-width: 0;
}

/* タイトル・メタ */
.gs-title{
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.25;
  margin: 0 0 8px;
}
.gs-meta{
  color: #666;
  font-size: 14px;
  margin-bottom: clamp(12px, 2vw, 18px);
}
.gs-muted{ color:#6a6a6a; }

/* 情報パネル（Costume Points / Materials） */
.gs-infogrid{
  display: grid;
  gap: 14px;
}
.gs-infobox{
  background: #efdaec;                /* 淡いピンク寄せ */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: clamp(14px, 2vw, 18px);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.gs-infottl{
  margin: 0 0 10px;
  font-size: clamp(16px, 2vw, 18px);
  text-align: center;
}
.gs-infolist{
  margin: 0; padding-left: 1.2em;
}
.gs-infobox p{ margin: 0 0 .5em; }

/* ========== Collection ========== */
.cw-collection{
  margin: clamp(28px, 4vw, 48px) 0 clamp(10px, 2vw, 18px);
}
.cw-collection h2{
  text-align: center;
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 0 0 14px;
}
/* Smart Slider 埋め込み領域 */
.cw-slider{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
/* フォールバック：画像グリッド */
.cw-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.cw-grid a img{
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* ========== Related Blog / Recent Works ========== */
.gs-backnum{
  margin: clamp(26px, 4vw, 44px) 0 0;
}
.gs-backnum > h2{
  text-align: center;
  font-size: clamp(20px, 2.4vw, 26px);
  margin: 0 0 12px;
}
.gs-backgrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.gs-backcard{
  display: block;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gs-backcard:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.gs-backcard img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.gs-backtitle{
  font-size: 1rem;
  margin: 8px 10px 4px;
}
.gs-btn{
  display:inline-block;
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--c-deep, #823327);
  color: var(--c-pale, #eecebf);
  text-decoration: none;
}

/* Prev / Next */
.gs-rows{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 22px 0 0;
}
.gs-col a{
  text-decoration: none;
  color: var(--c-ink, #1b2430);
}
.gs-col a:hover{ text-decoration: underline; }

/* ====== レスポンシブ ====== */
@media (max-width: 960px){
  .gs-hero2{
    grid-template-columns: 1fr;    /* 縦積み */
  }
  .gs-hero2__media img{
    aspect-ratio: auto;            /* 端末比率に合わせる */
  }
}
@media (max-width: 640px){
  .gallery-single.wrapper{ padding: 0 12px 48px; }
  .gs-infobox{ border-radius: 18px; }
}

/* 本文と広告を2カラムで並べる */
.bs-bodygrid{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

/* 本文 */
.bs-content{
  flex: 1 1 auto;
  min-width: 0;
}

/* 右カラム広告 */
.bs-sidebar{
  flex: 0 0 300px;  /* ← 固定幅。AdSense推奨の矩形広告サイズ */
  position: sticky;
  top: 80px;        /* スクロール時も少し追従する */
  height: fit-content;
}

.ads-slot.ads-side{
  background: #fafafa;
  border: 1px solid #eee;
  padding: 6px;
  border-radius: 6px;
  text-align: center;
}

/* スマホでは下に落とす */
@media (max-width: 768px){
  .bs-bodygrid{
    flex-direction: column;
  }
  .bs-sidebar{
    flex: none;
    width: 100%;
    margin-top: 20px;
  }
}
/* 本文＋サイド広告の2カラム */
.bs-bodygrid{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  max-width: 1100px;      /* 本文+サイドの全体幅 */
  margin: 0 auto;
}

/* 本文側 */
.bs-content{
  flex: 1 1 auto;
  min-width: 0;           /* 折り返し崩れ防止 */
}

/* 右サイド広告 */
.bs-sidebar{
  flex: 0 0 300px;        /* 300×250 / 336×280に相性◎ */
  position: sticky;
  top: 80px;              /* ヘッダー分の余白。調整可 */
  height: fit-content;
}

.ads-slot.ads-side{
  background: #fafafa;
  border: 1px solid #eee;
  padding: 6px;
  border-radius: 8px;
  text-align: center;
}

/* スマホでは下段へ */
@media (max-width: 768px){
  .bs-bodygrid{ flex-direction: column; }
  .bs-sidebar{ flex: none; width: 100%; position: static; margin-top: 16px; }
}