/* 書頁專用樣式（T05）：共用骨架＋四本各自的 [data-book] 主題
   每本書是自己的房間：書頭底色、區塊強調色用該書 token；書色底上的文字一律放在 --paper 卡片內。 */

/* ════════════ 主題 ════════════ */
[data-book="nari"]        { --book-bg: var(--nari);       --book-deep: var(--nari-deep);   --book-accent: var(--nari-accent); }
[data-book="sleepy-king"] { --book-bg: var(--king);       --book-deep: var(--king-deep);   --book-accent: var(--king-accent); }
[data-book="miss-booger"] { --book-bg: var(--booger);     --book-deep: var(--booger-deep); --book-accent: var(--booger-accent); }
[data-book="cats"]        { --book-bg: var(--cats-paper); --book-deep: var(--cats-deep);   --book-accent: var(--cats-accent); }

[data-book] .section-title::before { background: var(--book-deep); }
/* 交替區塊：該書主色淡淡疊在 --paper 上（正文仍是 --ink，對比不受影響） */
[data-book] .section--tint { background: color-mix(in srgb, var(--book-bg) 22%, var(--paper)); }
[data-book="cats"] .section--tint { background: color-mix(in srgb, var(--cats) 30%, var(--paper)); }

/* ════════════ A. 書頭 ════════════ */
.book-head {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-7) var(--sp-8);
  background: var(--book-bg);
}
.book-head__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
.book-head__cover { display: flex; justify-content: center; }
.book-head__cover img {
  height: 320px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(var(--shadow));
  transition: transform var(--t-micro) var(--ease);
}
.book-head__cover img:hover,
.book-head__cover img:active { transform: translateY(-6px) rotate(-1.5deg); }
.book-head__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  border: var(--border);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.book-head__card h1 { font-size: min(var(--fs-h1), 3rem); }
.book-head__title-img { display: block; width: min(100%, 360px); height: auto; }
.book-head__credit { color: var(--ink-soft); }
.book-head__price { font-weight: 700; }

@media (min-width: 900px) {
  .book-head { padding-block: var(--sp-8) var(--sp-9); }
  .book-head__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); }
  .book-head__cover img { height: 520px; }
  .book-head__card { padding: var(--sp-7); }
}

/* 奈莉：卡片內緣 --nari-deep 2px 雙線框（呼應封面的藍色花框） */
[data-book="nari"] .book-head__card {
  border-color: transparent;
  box-shadow:
    inset 0 0 0 8px var(--paper),
    inset 0 0 0 10px var(--nari-deep),
    inset 0 0 0 14px var(--paper),
    inset 0 0 0 16px var(--nari-deep);
}
@media (min-width: 900px) {
  [data-book="nari"] .book-head__card { padding: calc(var(--sp-7) + 8px); }
}

/* ════════════ D. 購買管道（books.js 產生） ════════════ */
.buy { width: 100%; margin-top: var(--sp-3); padding-top: var(--sp-4); border-top: var(--border); }
.buy__title { font-size: 1.125rem; margin-bottom: var(--sp-3); }
.buy__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; }
.buy__list .btn { gap: .375em; padding-inline: 1.125rem; }
.buy__list svg { width: 1em; height: 1em; flex: none; }
.buy__none { color: var(--ink-soft); }

/* ════════════ B. 內頁試閱 ════════════ */
.gallery__track { list-style: none; padding: 0; }
.gallery__track img,
.gallery__thumb img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border);
  border-radius: var(--r-md);
  background: var(--white);
}
.gallery__thumbs { display: none; }

@media (min-width: 769px) {
  .js .gallery__track > li:not(.is-active) { display: none; }
  html:not(.js) .gallery__track { display: grid; gap: var(--sp-4); }
  .js .gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    list-style: none;
    padding: 0;
  }
  .gallery__thumb {
    display: block;
    width: 100%;
    padding: 3px;
    border: 0;
    border-radius: calc(var(--r-md) + 3px);
    background: transparent;
    opacity: .7;
    transition: opacity var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
  }
  .gallery__thumb img { border-radius: var(--r-sm); }
  .gallery__thumb:hover, .gallery__thumb:active { opacity: 1; }
  .gallery__thumb[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 3px var(--book-deep); }
}

/* 手機：多張跨頁橫向捲動，可 snap */
@media (max-width: 768px) {
  .gallery__track {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .gallery__track > li { flex: 0 0 88%; scroll-snap-align: start; }
}

/* ════════════ C. 關於這本書 ════════════ */
.about-book { display: grid; gap: var(--sp-6); }
.about-book h3 { margin-bottom: var(--sp-3); }
.about-book__intro p { max-width: 32em; }
.spec { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); }
.spec dt { color: var(--ink-soft); }
.spec dd { margin: 0; }
.podcast { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-5); }
@media (min-width: 900px) {
  .about-book { grid-template-columns: 3fr 2fr; gap: var(--sp-8); }
}

/* ════════════ 貓貓：怎麼玩（三張小卡） ════════════ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
}
.info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-5);
  border: var(--border);
  border-radius: var(--r-md);
  background: var(--white);
}
.info-card p { font-size: var(--fs-small); line-height: 1.7; }

/* ════════════ 貓貓：彩蛋場景（eggs.js 產生） ════════════ */
.egg-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.egg-tab {
  min-height: 44px;
  padding: 0 var(--sp-5);
  border: var(--border);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.0625rem;
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.egg-tab:hover, .egg-tab:active { border-color: var(--ink); }
.egg-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.egg-scene__stage {
  --scene-h: 640px;
  position: relative;
  width: min(100%, calc(var(--scene-h) * var(--ar)));
  aspect-ratio: var(--ar);
  margin-inline: auto;
}
.egg-scene__stage > img {
  display: block;
  width: 100%;
  height: 100%;
  border: var(--border);
  border-radius: var(--r-md);
  background: var(--white);
}
.egg-scene__stage .egg { position: absolute; z-index: 2; margin: -14px 0 0 -14px; }
.egg-more { margin-top: var(--sp-5); color: var(--ink-soft); text-align: center; }
/* 沒有 JS 的備援清單 */
.egg-fallback { display: grid; gap: var(--sp-6); }
.egg-fallback img { width: 100%; max-width: 720px; height: auto; border-radius: var(--r-md); }
.egg-fallback dl { margin-top: var(--sp-3); }
.egg-fallback dt { font-weight: 700; margin-top: var(--sp-2); }
.egg-fallback dd { margin: 0; }

/* ════════════ 貓貓：桌遊 ════════════ */
.boardgame { display: grid; gap: var(--sp-6); align-items: center; }
.boardgame__box img { width: 100%; height: auto; }
.card-fan { position: relative; height: 230px; margin: 0 auto var(--sp-6); max-width: 420px; }
/* 六張卡以下方遠處為軸心展開成扇形 */
.card-fan img {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 112px;
  height: auto;
  margin-left: -56px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  transform-origin: 50% 220%;
  transform: rotate(calc(var(--i) * var(--step)));
}
.card-fan { --step: 7deg; }
.card-fan img:nth-child(1) { --i: -2.5; }
.card-fan img:nth-child(2) { --i: -1.5; }
.card-fan img:nth-child(3) { --i: -.5; }
.card-fan img:nth-child(4) { --i: .5; }
.card-fan img:nth-child(5) { --i: 1.5; }
.card-fan img:nth-child(6) { --i: 2.5; }
.rules { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-small); }
.rules dt { font-weight: 700; }
.rules dd { margin: 0; }
.rules dd + dd { grid-column: 2; }
.boardgame__price { margin-top: var(--sp-4); font-weight: 700; }
.boardgame__price[data-price=""] { display: none; }
@media (min-width: 900px) {
  .boardgame { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .card-fan { height: 280px; --step: 9deg; }
  .card-fan img { width: 132px; margin-left: -66px; bottom: 32px; }
}

/* ════════════ 貓貓：宣傳影片 ════════════ */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--ink); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ════════════ 減少動態 ════════════ */
@media (prefers-reduced-motion: reduce) {
  .book-head__cover img:hover,
  .book-head__cover img:active { transform: none; }
}