/* =========================================================
   Advent Cosplay — top.css 〈Front/Home 専用 完全版・安定更新版〉
   ・各セクションの幅/余白を統一
   ・HERO（単画像）
   ・NEWS：装飾フレームと中身のズレ防止＋中央カラム化
   ・本棚
   ・モバイルはみ出し根絶／レスポンシブ調整
   ・2025-11 安定バランス調整
========================================================= */

/* ------- 共通パラメータ ------- */
:root{
  /* 幅と間隔 */
  --homeW: min(1200px, 92vw);
  --homeGap: clamp(18px, 3.8vw, 36px);
  --heroRadius: 16px;

  /* NEWS：中央カラム幅（ここだけ触れば横幅が整う） */
  --news-col: clamp(540px, 64vw, 820px);

  /* NEWS：フレームと中身の安全帯・内側パディング */
  --news-gutter: clamp(14px, 2.5vw, 26px);
  --news-inner-pad-y: clamp(18px, 2.8vw, 28px);
  --news-inner-pad-x: clamp(20px, 3.4vw, 34px);
  --news-inner-radius: 12px;

  /* 本棚 背景（任意差し替え可） */
  --shelf-bg: url("https://adventcosplay.com/wp-content/uploads/2025/10/amtique_ground.png");
}

/* 横スクロール禁止（はみ出し事故防止） */
body[data-page="home"]{ overflow-x: hidden; }

/* 各セクションを同じ幅・中央寄せに */
.site-tagline.wrapper,
.home-hero,
.home-news .news-frame,
.shelf{
  width: var(--homeW);
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   1) HERO（単画像）
========================================================= */
.home-hero{
  position: relative;
  margin-block: var(--homeGap);
  aspect-ratio: 16 / 9;
  border-radius: var(--heroRadius);
  overflow: clip;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  background: #111;
}

.hero-media,
.hero-media picture,
.hero-media img{
  width: 100%;
  height: 100%;
  display: block;
}
.hero-media img{
  object-fit: cover;
  object-position: center;
}

/* 任意のオーバーレイコピー */
.hero-copy{
  position: absolute;
  inset: auto auto 18px 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.25));
  backdrop-filter: blur(2px);
  color: #fff;
  max-width: min(80ch, 92%);
}
.hero-ttl{ font-size: clamp(20px, 3.4vw, 28px); margin: 0 0 4px; line-height: 1.2; }
.hero-sub{ font-size: clamp(12px, 1.8vw, 14px); margin: 0 0 10px; opacity: .9; }
.hero-btn{
  display: inline-block; padding: 8px 14px; border-radius: 10px;
  background: #80275c; color: #fff; text-decoration: none; font-weight: 700;
  transition: transform .15s ease, box-shadow .2s ease;
}
.hero-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }

/* =========================================================
   2) NEWS：装飾フレームと中身のズレ防止＋中央カラム
========================================================= */
.home-news{ margin-block: var(--homeGap); }

/* 外側の器：装飾フレームがあっても中身と一定間隔を維持 */
.home-news .news-frame{
  position: relative;
  padding: calc(var(--news-gutter) + 2px) var(--news-gutter);
  box-sizing: border-box;
  overflow: visible;
}
.home-news .news-frame::before,
.home-news .news-frame::after{
  pointer-events: none;
  z-index: 0;
}

/* 内側：中央カラム化＋角丸背景＋安全パディング */
.home-news .news-in{
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: var(--news-col);
  margin-inline: auto;
  background: var(--veil-paper);
  backdrop-filter: blur(2px);
  border-radius: var(--news-inner-radius);
  padding: var(--news-inner-pad-y) var(--news-inner-pad-x);
  overflow: clip;
}

/* 細かな余白 */
.home-news .home-sec-ttl{ margin: 0 0 clamp(8px, 1.6vw, 12px); }
.home-news .news-ul     { margin: 0; }
.home-news .news-more   { margin: clamp(10px, 1.8vw, 14px) 0 0; display:flex; justify-content:flex-start; }

/* 長文や英数字のはみ出し防止 */
.home-news .news-link{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* =========================================================
   3) 本棚
========================================================= */
.shelf{
  margin-block: var(--homeGap);
}

.shelf__frame{
  position: relative;
  border-radius: 18px;
  padding: clamp(18px, 3vw, 28px);
  background:
    linear-gradient(#2a221c, #2a221c) padding-box,
    var(--shelf-bg) center/cover no-repeat border-box;
  box-shadow:
    inset 0 8px 26px rgba(0,0,0,.18),
    0 6px 18px rgba(0,0,0,.08);
  overflow: clip;
}

.shelf__books{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: clamp(22px, 4vw, 40px);
  align-items: start;
  justify-items: center;
}
.shelf__cell{ display: flex; justify-content: center; align-items: flex-start; }
.shelf__book{ position: relative; display: inline-block; }
.shelf__book img{
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 10px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));
  transition: transform .25s ease, filter .25s ease;
}
.shelf__book::after{
  content:""; position:absolute; inset:-10px; border-radius:14px; pointer-events:none;
  opacity:0; transform:scale(.98);
  transition:opacity .35s ease, transform .35s ease;
  background: radial-gradient(ellipse at center,
    rgba(255,240,180,.45) 0%,
    rgba(255,240,180,.20) 55%,
    rgba(255,240,180,0) 80%);
  mix-blend-mode: screen;
}
.shelf__book:hover img{
  transform: translateY(-3px) scale(1.02);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.28)) brightness(1.03);
}
.shelf__book:hover::after{ opacity: 1; transform: scale(1); }

/* =========================================================
   4) はみ出し根絶と細かい保険
========================================================= */
.home-main img,
.home-main video,
.home-main svg,
.home-main iframe,
.home-main canvas{
  max-width: 100%;
  height: auto;
  display: block;
}
.home-news .news-frame::before,
.home-news .news-frame::after,
.shelf__frame::before,
.shelf__frame::after{
  max-width: 100%;
  inset: auto;
}

/* =========================================================
   5) レスポンシブ
========================================================= */
@media (max-width: 1024px){
  .shelf__books{ grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 960px){
  .site-tagline.wrapper,
  .home-hero,
  .home-news .news-frame,
  .shelf{
    width: var(--homeW);
    margin-inline: auto;
    padding-inline: 8px;
  }
  .hero-copy{ inset: auto 12px 12px 12px; padding: 12px; }
}

@media (max-width: 768px){
  :root{
    --news-col: min(92vw, 600px);
    --news-gutter: clamp(16px, 4vw, 22px);
  }
  .shelf__books{ grid-template-columns: 1fr; }
  .shelf__book img{ max-width: min(360px, 92vw); }
}

/* =========================================================
   ▼ 背景アートの見切れ/縮み対策（top.css の末尾に追記）
   - NEWSの額縁は比率固定＆「中身は可変」
   - 本棚は「面」なので cover＋最小高でスカスカ回避
========================================================= */

/* 好みで調整できるトークン */
:root{
  --news-frame-ratio: 1300 / 600;          /* 額縁画像の元比率 */
  --news-frame-fit:   100% 100%;           /* 角を必ず見せる：歪み許容（安全） */
  /* ↑もし歪みNGなら ↓を使う：角は必ず見える（余白が出てもOK）
     --news-frame-fit: contain; */

  --shelf-frame-ratio: 16 / 5;             /* 棚パネルの目安比率 */
  --shelf-bg-size:     cover;               /* 面として敷く。全体を見せたい時は 'contain' */
  --shelf-minh:        clamp(220px, 28vw, 420px);
}

/* NEWS 額縁：比率固定＋背景を枠いっぱいにフィット */
.home-news .news-frame{
  aspect-ratio: var(--news-frame-ratio);
  background-position: center;
  background-repeat: no-repeat;
  /* stretch or contain をトークンで切替 */
  background-size: var(--news-frame-fit);
}

/* NEWS 中身：フレーム内の安全域を守る（枠に密着しない） */
.home-news .news-in{
  /* フレームの内側に必ず収まるよう 100% を上限にする */
  max-width: min(var(--news-col), 100% - (var(--news-inner-pad-x) * 2));
}

/* 本棚：面としての背景を“気持ちよく”敷く */
.shelf__frame{
  /* 中身が少ない時に背景が小さく見えないよう最小高を確保 */
  min-height: var(--shelf-minh);
  /* コンテンツ量に応じて自然に伸びるが、上面の見栄えを揃える */
  background-position: center top;
  background-repeat: no-repeat;
  background-size: var(--shelf-bg-size);
}

/* 余白の呼吸感（棚と前後セクションの距離をほんの少し広げる） */
.shelf{ margin-block: calc(var(--homeGap) * 1.1); }

/* モバイル微調整：額縁は比率を少し縦長に、棚の最小高も確保 */
@media (max-width: 768px){
  :root{
    --news-frame-ratio: 1300 / 640;   /* 少し縦に余裕を持たせる */
    --shelf-minh:        clamp(200px, 36vw, 360px);
  }
  .home-news .news-in{
    /* モバイルはより内側に寄せてタップ余白を確保 */
    padding: clamp(14px, 3.2vw, 18px) clamp(14px, 4vw, 20px);
  }
}