:root{
  --bg:#fbfaf7;
  --ink:#151515;
  --muted:#6b6b6b;
  --line:rgba(21,21,21,.12);
  --paper:#ffffff;
  --radius:18px;
  --shadow: 0 18px 50px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-serif, "Iowan Old Style", "Palatino", "PingFang TC", "Noto Serif TC", serif;
  background:var(--bg);
  color:var(--ink);
  letter-spacing:.02em;
}
html, body{
  background: #fbfaf7;   /* 給一個明確底色 */
}

body{
  transition: background-color .6s ease;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1080px, 92vw); margin:0 auto}
.section{padding:68px 0}
.section__head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px}

.kicker{font-family: ui-sans-serif, system-ui, "PingFang TC", "Noto Sans TC", sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:0}
.title{font-size:52px; margin:10px 0 6px; font-weight:600; letter-spacing:.04em}
.subtitle{margin:0; color:var(--muted); font-family: ui-sans-serif, system-ui, "PingFang TC", "Noto Sans TC", sans-serif}

.h2{margin:0; font-size:22px; font-weight:600; letter-spacing:.06em}
.p{margin:0; color:var(--muted); line-height:1.9; font-size:16px}
.note{margin:0; color:var(--muted); font-size:13px; font-family: ui-sans-serif, system-ui, "PingFang TC", "Noto Sans TC", sans-serif}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  font-family: ui-sans-serif, system-ui, "PingFang TC", "Noto Sans TC", sans-serif;
  font-size:14px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.06)}
.btn--ghost{background:transparent}
.hero{
  position:relative;
  min-height:92vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background: #f3f1ec; /* 影片還沒載入時的底色 */
}

.hero__media{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.hero__video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.03);
  filter: saturate(.92) contrast(.98);
}

/* 日系「白紗感」：一點霧、一點漸層 */
.hero__veil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(70% 70% at 50% 35%, rgba(251,250,247,.25), rgba(251,250,247,.78)),
    linear-gradient(180deg, rgba(251,250,247,.10), rgba(251,250,247,.80));
}

/* 文字內容 */
.hero__inner{
  position:relative;
  padding:72px 0;
  text-align:center;
}

.hero__actions{display:flex; gap:10px; justify-content:center; margin-top:18px}
.scrollHint{margin-top:26px; color:var(--muted); font-size:12px; font-family: ui-sans-serif, system-ui, "PingFang TC", "Noto Sans TC", sans-serif}
.scrollHint{
  opacity:.75;
  letter-spacing:.06em;
  font-size: 15px;
}
.scrollHint span{
  display:inline-block;
  margin-right: 6px;
}


.scrollHint .arrow{
  display: inline-block;
  animation: arrowDrop 2.4s ease-in-out infinite;
}

@keyframes arrowDrop{
  0%   { transform: translateY(-2px); opacity: .5; }
  50%  { transform: translateY(8px);  opacity: 1; }
  100% { transform: translateY(-2px); opacity: .5; }
}


.card{

}


.featured{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
}
.featured__stack{display:grid; gap:18px}
.featured__img img,
.featured__stack img{width:100%; height:100%; object-fit:cover}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}
.grid__item{grid-column: span 4}
.grid__item img{width:100%; height:360px; object-fit:cover}

@media (max-width: 980px){
  .title{font-size:40px}
  .featured{grid-template-columns: 1fr; }
  .grid__item{grid-column: span 6}
  .grid__item img{height:280px}
}
@media (max-width: 560px){
  .grid__item{grid-column: span 12}
  .grid__item img{height:260px}
}
.video{
  position:relative;
  padding:0;
  overflow:hidden;
}

.video__cover{
  position:absolute;
  inset:0;
  z-index:2;
  border:0;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
}

.video__cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.95) contrast(.98);
}

.video__play{
  width:58px;
  height:58px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.12);
  font-size:18px;
  transform: translateY(-6px);
}

.video__label{
  position:absolute;
  bottom:14px;
  right:14px;
  background: rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  color:var(--muted);
  font-family: ui-sans-serif, system-ui, "PingFang TC", "Noto Sans TC", sans-serif;
}

/* YouTube 容器 */
.video__yt{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#000;
  opacity:0;
}

.video__yt iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}


.footer{margin-top:24px; color:var(--muted); font-family: ui-sans-serif, system-ui, "PingFang TC", "Noto Sans TC", sans-serif}

.noise{
  pointer-events:none;
  position:fixed; inset:0;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.flipSimple{
    position: relative;
    padding: 14px;
    width: 100vw;
    display: flex;
    left: 50%;
    transform: translateX(-50%) !important;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.flipSimple__frame{
  border-radius: calc(var(--radius) - 6px);
  overflow:hidden;
  background:#eee;
  aspect-ratio: 3 / 4;
}

.flipSimple__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  will-change: opacity, transform;
}

.flipSimple__meta{
  margin-top: 10px;
  display:flex;
  justify-content:center;
  font-family: ui-sans-serif, system-ui, "PingFang TC", "Noto Sans TC", sans-serif;
  font-size:12px;
  letter-spacing:.12em;
  color: var(--muted);
}

/* 箭頭按鈕：極簡、淡淡的 */
.navBtn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  cursor:pointer;

  display:grid;
  place-items:center;
  font-size: 18px;
  color: var(--ink);

  transition: transform .15s ease, opacity .2s ease;
  opacity: .92;
}
.prevBtn{z-index: 1;}
.navBtn:hover{ transform: translateY(-50%) scale(1.03); opacity:1; }
.navBtn:active{ transform: translateY(-50%) scale(.98); }

.navBtn--prev{ left: 12px; }
.navBtn--next{ right: 12px; }

.thanks{margin-bottom: 0px;}
@media (max-width:560px){
  .navBtn{ width:40px; height:40px; }

  .flipSimple{
  position:relative;
  padding: 14px;
  width: 100vw; left: 50%; transform: translateX(-50%); 
}

}
.pswp{
  --pswp-bg: #fbfaf7;
}
.pswp__counter,
.pswp__button{
  color:#333;
}

.clickable{ cursor: zoom-in; }


.pswpThumbs{
  position:fixed;
  left:0; right:0; bottom:14px;
  display:flex;
  gap:8px;
  padding:10px 14px;
  justify-content:center;
  overflow-x:auto;
  z-index:9999;

  /* 日系淡淡底 */
  background: rgba(251,250,247,.72);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,.08);
}

.pswpThumbs img{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:10px;
  opacity:.55;
  cursor:pointer;
  transition: .18s ease;
  border: 1px solid rgba(0,0,0,.10);
}

.pswpThumbs img.is-active{
  opacity:1;
  transform: scale(1.06);
}

.pswpThumbs{
  position:absolute;           /* ✅ 改 absolute：掛在 pswp 內 */
  left:0; right:0; bottom:0;
  display:flex;
  gap:8px;
  padding:10px 14px;
  justify-content:center;
  overflow-x:auto;

  z-index: 999999;             /* ✅ 夠高 */
  pointer-events: auto;        /* ✅ 確保可點 */

  background: rgba(251,250,247,.78);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,.08);
}

.pswpThumbs img{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:10px;
  opacity:.55;
  cursor:pointer;
  transition: .18s ease;
  border: 1px solid rgba(0,0,0,.10);
}

.pswpThumbs img.is-active{
  opacity:1;
  transform: scale(1.06);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(70% 70% at 50% 30%, rgba(255,255,255,.35), rgba(255,255,255,0));
  opacity:.55;
  transition: opacity .6s ease;
}


.section{
  transition: padding .6s ease;
}


/* ===== Book Album ===== */
.book{
  position: relative;
  width: min(520px, 92vw);
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper);
}

/* 封面：關起來時看到它 */
.bookCover{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  background: transparent;
  cursor: pointer;
  z-index: 5;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform .9s cubic-bezier(.2,.9,.2,1);
  backface-visibility: hidden;
}
.bookCover__inner{
  width:100%; height:100%;
  background: linear-gradient(135deg, #ffffff, #f6f4f0);
  border-right: 1px solid rgba(0,0,0,.08);
  display:grid;
  place-items:center;
}
.bookCover__title{
  text-align:center;
  padding: 18px 20px;
  border: 1px solid rgba(21,21,21,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(6px);
}
.bookCover__kicker{
  font-family: ui-sans-serif, system-ui, "PingFang TC", "Noto Sans TC", sans-serif;
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--muted);
  text-transform: uppercase;
}
.bookCover__name{
  margin-top: 10px;
  font-size: 22px;
  letter-spacing: .08em;
  font-weight: 600;
}
.bookCover__date{
  margin-top: 8px;
  font-family: ui-sans-serif, system-ui, "PingFang TC", "Noto Sans TC", sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--muted);
}

/* 內頁容器 */
.bookPages{
  position:absolute;
  inset:0;
  perspective: 1200px;
}

/* 兩張頁面（前/後） */
.page{
  position:absolute;
  inset: 14px;
  border-radius: calc(var(--radius) - 6px);
  overflow:hidden;
  background:#eee;
  transform-style: preserve-3d;
}
.page img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* 前頁：會翻 */
.page.is-front{
  transform-origin: left center;
  transform: rotateY(0deg);
  z-index: 3;
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
}

/* 後頁：在下面等著 */
.page.is-back{
  z-index: 1;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

/* 打開狀態：封面掀開 */
.book.is-open .bookCover{
  transform: rotateY(-155deg);
  pointer-events: none;
}

/* 翻頁動畫 class */
.book.is-flipping .page.is-front{
  transition: transform 2s cubic-bezier(.2,.9,.2,1);
  transform: rotateY(-180deg);
}

/* 控制按鈕 */
.bookNav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(6px);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size: 18px;
  color: var(--ink);
  z-index: 6;
  opacity: .92;
}
.bookNav--prev{ left: 12px; }
.bookNav--next{ right: 12px; }

.bookMeta{
  position:absolute;
  left:0; right:0; bottom: 10px;
  display:flex;
  justify-content:center;
  z-index: 6;
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, "PingFang TC", "Noto Sans TC", sans-serif;
  font-size:12px;
  letter-spacing:.12em;
}

.bookClose{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(6px);
  cursor:pointer;
  z-index: 6;
  font-size: 20px;
  line-height: 1;
}


.page.turn{
  z-index: 4;
  pointer-events: none;
  backface-visibility: hidden;
  transform: rotateY(0deg);
  opacity: 0;               /* 平常不顯示，翻的時候才出現 */
}
.page.turn img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}








/* ===============================
   FlipSimple：歪歪 → 扶正 → 打開（日系、輕）
================================ */

/* 讓整個相本卡片本體有“歪歪放著”的感覺 */
#flipSimple{
  position: relative;
}

/* 相框本體：預設歪歪（比較像放桌上） */
.flipSimple__frame{
  position: relative;
  transform-origin: center;
  will-change: transform, filter;
  transition: transform 980ms cubic-bezier(.2,.9,.2,1), filter 980ms cubic-bezier(.2,.9,.2,1);
  transform: rotate(-5.2deg) translateY(2px); /* ✅ 預設歪歪 */
  filter: drop-shadow(0 18px 46px rgba(0,0,0,.10));
}

/* 扶正：回到正 + 微放大 */
.flipSimple.is-upright .flipSimple__frame{
  transform: rotate(0deg) scale(1.02);
  filter: drop-shadow(0 22px 54px rgba(0,0,0,.14));
}

/* 打開一下：柔光掀過去（像紙頁反光） */
.flipSimple__frame::after{
  content:"";
  position:absolute; inset:-14%;
  opacity:0;
  pointer-events:none;
  background: radial-gradient(circle at 28% 35%, rgba(255,255,255,.72), rgba(255,255,255,0) 55%);
  transform: rotate(10deg);
  transition: opacity 780ms ease;
}

.flipSimple.is-opening .flipSimple__frame::after{
  opacity:.55;
}

/* 打開時照片有一點點“呼吸” */
.flipSimple.is-opening #flipSimpleImg{
  transition: transform 980ms ease, filter 980ms ease, opacity 240ms ease;
  transform: scale(1.008);
  filter: contrast(1.02) saturate(1.02);
}

/* ===============================
   全畫面：亮 → 緩緩暗下來（更慢）
================================ */
.flash{
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  background: rgba(255,255,255,0);
}

.flash.play{
  animation: flashToDark 1900ms cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes flashToDark{
  0%   { opacity: 0; background: rgba(255,255,255,0); }
  24%  { opacity: 1; background: rgba(255,255,255,.62); } /* 亮一下 */
  100% { opacity: 1; background: rgba(0,0,0,.78); }       /* 再慢慢暗下 */
}

/* ===============================
   PhotoSwipe：底部小格縮圖列（維持）
================================ */
.pswp__thumbsbar{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px 14px;
  display: flex;
  gap: 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.pswp__thumbsbar::-webkit-scrollbar{ display:none; }
.pswp__thumbsbar{ scrollbar-width: none; }

.pswp__thumb{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.18);
  opacity: .74;
  transform: translateZ(0);
}
.pswp__thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}
.pswp__thumb.is-active{
  opacity: 1;
  outline: 2px solid rgba(255,255,255,.86);
  outline-offset: 2px;
}

/* ✅ 關鍵：燈箱照片“原比例置中”——不裁切 */
.pswp__img{
  object-fit: contain !important; /* 保持原比例 */
  background: rgba(0,0,0,.20);    /* 日系淡淡底 */
}


/* ===============================
   封面按鈕（日系乾淨）
================================ */
.bookCover{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  border-radius: 18px; /* 跟你 card 的感覺接近 */
  cursor: pointer;
  background:
    radial-gradient(900px 520px at 30% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, #f3efe7, #e9e2d6);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.bookCover::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
    radial-gradient(900px 480px at 70% 70%, rgba(0,0,0,.08), rgba(0,0,0,0) 60%);
  opacity: .9;
  pointer-events:none;
}

.bookCover__inner{
      position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0px;
    justify-content: center;
}
.bookCover__title{
  text-align:left;
  color: rgba(25, 23, 20, .86);
  letter-spacing: .02em;
}

.bookCover__kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 8px;
}

.bookCover__name{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.bookCover__date{
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .72;
}

/* 點擊時的微微按壓感（很日系、很輕） */
.bookCover:active{
  transform: scale(.995);
}

/* ===============================
   PhotoSwipe：用淡入，不要 zoom 從角落飛進來
================================ */


/* 2) 讓整個燈箱 root 淡入 */
.pswp{
  opacity: 0;
  transition: opacity 360ms ease;
}
.pswp.pswp--open{
  opacity: 1;
}

/* 3) 影像也做一點點淡入（更柔） */
.pswp__img{
  opacity: 0;
  transition: opacity 360ms ease !important;
  object-fit: contain !important; /* 原比例置中 */
}
.pswp--open .pswp__img{
  opacity: 1;
}

/* === 讓 flipSimple 有透視，封面才能翻 === */
.flipSimple__frame{
  position: relative;
  perspective: 1200px;
}

/* 你要的：預設歪歪放著（外層歪、封面本體維持可翻） */
.flipSimple__frame{
  transform-origin: center;
  transform: rotate(-5.2deg) translateY(2px);
  transition: transform 980ms cubic-bezier(.2,.9,.2,1), filter 980ms cubic-bezier(.2,.9,.2,1);
  filter: drop-shadow(0 18px 46px rgba(0,0,0,.10));
}

/* 扶正 */
.flipSimple.is-upright .flipSimple__frame{
  transform: rotate(0deg) scale(1.02);
  filter: drop-shadow(0 22px 54px rgba(0,0,0,.14));
}

/* === 封面本體：可以 3D 翻開 === */
.bookCover{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  border-radius: 18px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  transform-style: preserve-3d;
  transform-origin: left center;
  backface-visibility: hidden;

  /* 封面材質（你原本日系風格） */
  background:
    radial-gradient(900px 520px at 30% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, #f3efe7, #e9e2d6);

  transition: transform 980ms cubic-bezier(.2,.9,.2,1);
}

/* 封面翻開：rotateY 往左掀 */
.flipSimple.is-flip .bookCover{
  transform: rotateY(-155deg);
}

/* 封面背面（翻開後會看到內頁/裡封） */
.bookCover::after{
  content:"";
  position:absolute; inset:0;
  border-radius: 18px;
  transform: rotateY(180deg);
  backface-visibility: hidden;

  /* 內頁：淡淡的紙感（日系） */
  background:
    radial-gradient(900px 520px at 30% 25%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #fbfaf7, #f2efe7);
}

/* 內文排版 */
.bookCover__inner{
  position:absolute; inset:0;
  display:flex;
  align-items:flex-end;
  padding: 22px 22px 20px;
  transform: translateZ(1px);
}

.bookCover__title{
  text-align:left;
  color: rgba(25, 23, 20, .86);
  letter-spacing: .02em;
}

.bookCover__kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 8px;
}
.bookCover__name{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.bookCover__date{
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .72;
}

/* 翻開瞬間的柔光（像紙頁反光） */
.flipSimple__frame::before{
  content:"";
  position:absolute; inset:-14%;
  opacity:0;
  pointer-events:none;
  background: radial-gradient(circle at 28% 35%, rgba(255,255,255,.72), rgba(255,255,255,0) 55%);
  transform: rotate(10deg);
  transition: opacity 780ms ease;
}
.flipSimple.is-flip .flipSimple__frame::before{
  opacity:.55;
}

/* === 亮一下 → 慢慢暗下來 === */
.flash{
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  background: rgba(255,255,255,0);
}
.flash.play{
  animation: flashToDark 1900ms cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes flashToDark{
  0%   { opacity: 0; background: rgba(255,255,255,0); }
  24%  { opacity: 1; background: rgba(255,255,255,.62); }
  100% { opacity: 1; background: rgba(0,0,0,.78); }
}

/* === PhotoSwipe：強制淡入（禁用 zoom-from-corner） === */
.pswp{
  opacity: 0;
  transition: opacity 360ms ease;
}
.pswp.pswp--open{
  opacity: 1;
}

/* 保持原比例置中 */
.pswp__img{
  object-fit: contain !important;
}


.flipSimple__frame{ perspective: 1200px; }

.bookCover{
  transform-style: preserve-3d;
  transform-origin: left center;
  backface-visibility: hidden;
  transition: transform 980ms cubic-bezier(.2,.9,.2,1);
}
.flipSimple.is-flip .bookCover{
  transform: rotateY(-155deg);
}



/* =========================================
   FlipSimple Book (日系更精緻版)
   - 歪歪 → 扶正 → 翻開
   - 修正翻開消失：避免父層 overflow 裁切
========================================= */

/* 讓這張卡片本身不要裁切 3D 翻出去的封面 */
#flipSimple,
#flipSimple.card,
#flipSimple.reveal-mask{
  overflow: visible !important;
}

/* frame 是 3D 舞台 */
.flipSimple__frame{
  position: relative;
  width: min(520px, 92vw);
  aspect-ratio: 4 / 3;     /* 你要封面像相本比例，可改 3/4 直式 */
  border-radius: 20px;
  perspective: 1400px;
  transform-style: preserve-3d;

  /* 歪歪的起始 */
  transform-origin: center;
  transform: rotate(-5.2deg) translateY(2px);
  transition: transform 980ms cubic-bezier(.2,.9,.2,1), filter 980ms cubic-bezier(.2,.9,.2,1);
  filter: drop-shadow(0 22px 58px rgba(0,0,0,.12));
}

/* 扶正 */
#flipSimple.is-upright .flipSimple__frame{
  transform: rotate(0deg) scale(1.02);
  filter: drop-shadow(0 26px 74px rgba(0,0,0,.16));
}

/* --- 書本底座（內頁） --- */
.flipSimple__frame .bookBase{
  position:absolute;
  inset: 0;
  border-radius: 20px;
  background:
    radial-gradient(900px 520px at 25% 25%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #fbfaf7, #f2efe7);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    inset 0 -18px 42px rgba(0,0,0,.08);
  transform: translateZ(-2px);
  opacity: 0;
  transition: opacity 520ms ease;
}

/* 翻開後底座顯示（像封面下的內頁） */
#flipSimple.is-flip .flipSimple__frame .bookBase{
  opacity: 1;
}

/* --- 封面外殼：不要 overflow hidden（避免翻到一半消失） --- */
.bookCover{
  position:absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;

  transform-style: preserve-3d;
  transform-origin: left center;
  border-radius: 20px;

  /* 關鍵：不裁切封面本體，避免 3D 翻到一半被切 */
  overflow: visible;
  backface-visibility: visible;

  transition: transform 980ms cubic-bezier(.2,.9,.2,1);
  transform: translateZ(6px) rotateY(0deg);
}

/* 翻開：別翻太大，-135°比較穩也更像書 */
#flipSimple.is-flip .bookCover{
  transform: translateZ(6px) rotateY(-135deg);
}

/* 封面正面（材質、日系） */
.bookCover__front{
  position:absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden; /* 只裁切正面內容，外殼不裁切 */
  backface-visibility: hidden;

  background:
    radial-gradient(900px 520px at 30% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, #f3efe7, #e9e2d6);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    inset 0 18px 60px rgba(255,255,255,.35),
    0 18px 55px rgba(0,0,0,.18);
}

/* 一點點紙纖維/顆粒感（很日系） */
.bookCover__front::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 2px, rgba(255,255,255,.02) 2px 4px);
  opacity:.28;
  transform: rotate(6deg);
  pointer-events:none;
}

/* 封面背面（翻開後看到的內封） */
.bookCover__back{
  position:absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  backface-visibility: hidden;
  transform: rotateY(180deg);

  background:
    radial-gradient(900px 520px at 35% 30%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #fbfaf7, #f0ece3);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    inset -22px 0 34px rgba(0,0,0,.08);
}

/* 書脊厚度（假象） */
.bookSpine{
  position:absolute;
  top: 10px;
  bottom: 10px;
  left: -10px;
  width: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(255,255,255,.20), rgba(0,0,0,.12));
  transform: rotateY(90deg) translateZ(9px);
  transform-origin: left center;
  opacity: .9;
}

/* 封面內容位置 */
.bookCover__inner{
  position:absolute; inset:0;
  display:flex;
  align-items:flex-end;
  padding: 22px 22px 20px;
  transform: translateZ(1px);
}
.bookCover__title{
  text-align:left;
  color: rgba(25, 23, 20, .86);
  letter-spacing: .02em;
}
.bookCover__kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 8px;
}
.bookCover__name{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.bookCover__date{
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .72;
}

/* 翻開時的柔光 */
.flipSimple__frame::after{
  content:"";
  position:absolute; inset:-14%;
  opacity:0;
  pointer-events:none;
  background: radial-gradient(circle at 28% 35%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%);
  transform: rotate(10deg);
  transition: opacity 780ms ease;
}
#flipSimple.is-opening .flipSimple__frame::after{
  opacity:.55;
}

/* 減少動畫偏好 */
@media (prefers-reduced-motion: reduce){
  .flipSimple__frame, .bookCover{ transition: none !important; }
}
.bookCover__front::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:0;
  width: 2px;
  background: rgba(255,255,255,.55);
  opacity:.55;
  pointer-events:none;
}


/* === 日系氛圍：把白的“空”變成“暖” === */

/* 整體封面底色改成米白帶暖 */
.bookCover__front{
  background:
    radial-gradient(900px 520px at 30% 25%, rgba(255,255,255,.20), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, #f6f1e8, #e9dfd0) !important;
}

/* 和紙纖維（非常淡） */
.bookCover__front::before{
  content:"";
  position:absolute; inset:-22%;
  background:
    repeating-linear-gradient(35deg,
      rgba(0,0,0,.018) 0 2px,
      rgba(255,255,255,.018) 2px 4px),
    radial-gradient(circle at 20% 30%,
      rgba(0,0,0,.02), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 80% 70%,
      rgba(0,0,0,.016), rgba(0,0,0,0) 55%);
  opacity: .55;
  transform: rotate(6deg);
  pointer-events:none;
}

/* 封面紙邊高光（會讓它更像相本） */
.bookCover__front::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,0) 22%),
    radial-gradient(900px 520px at 75% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  opacity:.55;
  pointer-events:none;
}

/* 內頁底座也不要太白，改成淡淡奶茶紙 */
.flipSimple__frame .bookBase{
  background:
    radial-gradient(900px 520px at 25% 25%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #fbf7ef, #efe6d7) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    inset 0 -18px 42px rgba(0,0,0,.10),
    0 24px 70px rgba(0,0,0,.10);
}

/* 暖色環境光：讓相本“有空氣感” */
#flipSimple .flipSimple__frame{
  filter: drop-shadow(0 26px 74px rgba(0,0,0,.14))
          drop-shadow(0 10px 34px rgba(120, 90, 50, .10));
}

/* 翻開時更有儀式感：柔光偏暖，不是純白 */
#flipSimple.is-opening .flipSimple__frame::after{
  background: radial-gradient(circle at 28% 35%,
    rgba(255, 244, 226, .82),
    rgba(255,255,255,0) 55%) !important;
  opacity: 1;
}

/* 字色更日系：不要太黑，帶一點茶色 */
.bookCover__title{
  color: rgba(56, 46, 34, .82) !important;
}
.bookCover__kicker,
.bookCover__date{
  color: rgba(56, 46, 34, .62) !important;
}

/* 小小暗角：讓封面更聚焦、更像攝影集 */
.bookCover__front{
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    inset 0 16px 60px rgba(255,255,255,.35),
    inset 0 -22px 60px rgba(0,0,0,.08),
    0 18px 55px rgba(0,0,0,.18) !important;
}
.bookCover__name{
  font-weight: 650;
  letter-spacing: .06em;
}
.bookCover__kicker{
  letter-spacing: .22em;
}


/* ===== 開本儀式的光影遮罩（不會全白） ===== */
.flash{
  position: fixed;
  inset: 0;
  z-index: 9998;          /* 在頁面上，但在 PhotoSwipe 底下/上面都可調 */
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
  
  /* 柔光：中心亮、邊緣淡，不是純白 */
  background:
    radial-gradient(1200px 720px at 50% 35%,
      rgba(255, 248, 235, .72),
      rgba(255, 248, 235, .00) 60%),
    linear-gradient(180deg,
      rgba(255, 250, 242, .22),
      rgba(255, 250, 242, .10));
  
  mix-blend-mode: screen; /* 柔光疊加，不會像白板蓋住 */
}

/* 播放：先亮起來 */
.flash.play{
  opacity: 1;
}

/* 第二段：慢慢暗下來（像房間燈光落下） */
.flash.dim{
  /* 轉成偏暗的遮罩（不是白） */
  background:
    radial-gradient(1200px 720px at 50% 35%,
      rgba(0,0,0,.30),
      rgba(0,0,0,.72) 68%),
    linear-gradient(180deg,
      rgba(0,0,0,.28),
      rgba(0,0,0,.62));
  mix-blend-mode: normal;
}

/* 讓 flash 暗下來的過程更慢 */
.flash.play.dim{
  transition: opacity 520ms ease;
}


/* ===============================
   Background Music Toggle（和網站融合）
================================ */

.soundToggle{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 6px;

  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);

  background: rgba(255,255,255,.82);
  backdrop-filter: blur(6px);

  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(60, 50, 38, .78);

  cursor: pointer;
  opacity: .85;
  transition: opacity .25s ease, transform .25s ease;
}

.soundToggle:hover{
  opacity: 1;
  transform: translateY(-1px);
}

.soundToggle__icon{
  font-size: 13px;
  opacity: .75;
}

/* 播放中狀態（變得更低調） */
.soundToggle.is-playing{
  opacity: .55;
}

.soundToggle.is-playing .soundToggle__text{
  display: none; /* 播放後只留 ♪，很日系 */
}


.bookCover__inner{
  position: relative;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
      align-items: center;
}

/* 封面照片 */
.bookCover__photo{
  position: relative;
  width: 75%;
  aspect-ratio: 4 / 5;          /* 像直式相片 */
  overflow: hidden;
  border-radius: 6px;
  background: #f2f1ed;
  box-shadow:
    0 8px 18px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(255,255,255,.6);
}

/* 照片本身 */
.bookCover__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* 原比例裁切 */
  filter: contrast(0.98) saturate(0.96);
}

/* 一層柔光，讓照片更日系 */
.bookCover__photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      120% 100% at 50% 0%,
      rgba(255,255,255,.25),
      rgba(255,255,255,0) 60%
    );
  pointer-events:none;
}

/* 文字區 */
.bookCover__title{
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bookCover__kicker{
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .6;
}

.bookCover__name{
  font-size: 20px;
  letter-spacing: .08em;
}

.bookCover__date{
  font-size: 12px;
  opacity: .55;
}


@media screen and (max-width:767px){
  .bookCover__title{margin: -3vw;padding: 0;}
  .bookCover__title{gap: 0;}
  .bookCover__kicker{
  font-size: 12px;
  letter-spacing: .12em;
  opacity: 1;
}
  .bookCover__name{
    margin-top: 0;
  }
  .bookCover__date{
    margin-top: 0;
  }


}

.video__yt{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  opacity: 0;
}

.video__yt iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.siteFooter{
  padding:0px 0 72px;
  color: rgba(0,0,0,.65);
  font-size: 14px;
}

.siteFooter__inner{
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
  text-align: center;
}

/* 感謝區 */
.siteFooter__thanks{
  line-height: 1.9;
}

.siteFooter__title{
  font-size: 13px;
  letter-spacing: .2em;
  opacity: .6;
  margin-bottom: 16px;
}

/* 版權 */
.siteFooter__copyright{
  font-size: 12px;
  opacity: .5;
  line-height: 1.6;
}


@media screen and (max-width:767px){

  .siteFooter{padding: 0;}
}

.ig-link p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ig-icon {
  width: 14px;
  height: 14px;
  fill: #808080;
  transition: transform 0.3s ease, fill 0.3s ease;
}

.ig-link:hover .ig-icon {
  fill: #E1306C;        /* IG 粉色 */
  transform: scale(1.1);
}


.pswp__thumb {
  border-radius: 6px;
  overflow: hidden;
  opacity: 0.6;
  transition: opacity .25s ease, transform .25s ease;
}

.pswp__thumb.is-active {
  opacity: 1;
  transform: scale(1.06);
}

/* ===== PhotoSwipe 手機自適應直/橫照片 ===== */
@media (max-width: 768px) {



  /* 直式照片 → 高度滿版 */
  .pswp--fit-portrait .pswp__img {
    object-fit: cover !important;
    height: 100vh !important;
    width: auto !important;
  }

}


/* ===== PhotoSwipe 手機：修正 100vh 偏移（改用 dvh/svh） ===== */
@media (max-width: 768px) {
  /* 用 dvh（動態視窗高度）+ svh（安全視窗高度）做 fallback */
  :root { --pswpH: 100dvh; }
  @supports not (height: 100dvh) {
    :root { --pswpH: 100svh; }
  }
  @supports not (height: 100svh) {
    :root { --pswpH: 100vh; }
  }

  .pswp__scroll-wrap,
  .pswp__content,
  .pswp__container,
  .pswp__item {
    height: var(--pswpH) !important;
  }



  /* 直式：高度滿版 */
  .pswp--fit-portrait .pswp__img {
    object-fit: cover !important;
    height: var(--pswpH) !important;
    width: auto !important;

    /* 若你還覺得略偏下，可微調這行（先留著） */
    object-position: center 35%;
  }
}
/* 讓縮圖列浮在照片上，不吃掉圖片可視高度 */
.pswp__thumbsbar{
  position: absolute;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
  z-index: 10000;
}

/* 給縮圖列一個柔和底，避免看不清楚 */
.pswp__thumbsbar::before{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  pointer-events:none;
}

/* 縮圖內容要在遮罩上層 */
.pswp__thumbsbar > *{
  position: relative;
  z-index: 1;
}


.pswp__thumbsbar{
  position:absolute;
  left:0; right:0;
  bottom: env(safe-area-inset-bottom, 0px);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 10000;
}

.pswp__thumbsbar::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  pointer-events:none;
}

.pswp__thumbsbar > *{ position:relative; z-index:1; }

/* ===== PhotoSwipe：縮圖列（穩定版） ===== */
.pswp__thumbsbar{
  position:absolute;
  left:0; right:0;
  bottom: env(safe-area-inset-bottom, 0px);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  display:flex;
  gap:8px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  pointer-events:auto;
  z-index:10000;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
}
.pswp__thumbsbar::-webkit-scrollbar{ display:none; }
.pswp__thumbsbar{ scrollbar-width: none; }

.pswp__thumb{
  width:46px;
  height:46px;
  border-radius:12px;
  overflow:hidden;
  flex:0 0 auto;
  border: 1px solid rgba(255,255,255,.18);
  opacity:.74;
  transition: opacity .2s ease, transform .2s ease;
}
.pswp__thumb.is-active{
  opacity:1;
  outline:2px solid rgba(255,255,255,.86);
  outline-offset:2px;
  transform: scale(1.06);
}
.pswp__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ✅ 保證照片永遠可見（不要再把 opacity 設 0） */
.pswp__img{
  opacity: 1 !important;
  object-fit: contain;
}


.pswp__img{
  opacity: 0;
  transition: opacity 360ms ease !important;
}
.pswp--open .pswp__img{
  opacity: 1;
}
.pswp__img{ opacity: 1 !important; }


/* thumbsbar 本體不要吃手勢（避免吞掉 swipe） */

/* 只有縮圖按鈕可以點 */


/* 縮圖列只允許水平手勢，別跟主滑動搶 */
.pswp__thumbsbar{
  touch-action: pan-x;
}


/* ===============================
   PhotoSwipe - FINAL PATCH (mobile swipe fix)
   放在整份 CSS 最底部
================================ */

/* 1) 影像不要被你自己 opacity 打架 */
.pswp__img{
  opacity: 1 !important;
  object-fit: contain !important;
  transition: none !important; /* 先完全關掉你自己加的淡入，避免互打 */
}

/* 2) 不要用 cover 強迫裁切（會讓某些手機手勢怪） */
@media (max-width: 768px){
  .pswp--fit-portrait .pswp__img{
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    object-position: center !important;
  }

  /* 你前面有強制 100vh/100dvh 的高度，先別碰 */
}

/* 3) thumbsbar：只有縮圖“按鈕”可點，其餘完全不吃手勢 */
.pswp__thumbsbar{
  pointer-events: none !important;
  touch-action: pan-x !important; /* 只允許水平捲縮圖列 */
}

/* 真的要點的只有縮圖按鈕 */
.pswp__thumbsbar .pswp__thumb{
  pointer-events: auto !important;
}

/* 4) 最關鍵：主滑動區強制可接手勢，避免被底部 UI 抢走 */
.pswp__scroll-wrap{
  touch-action: pan-y !important;
}


/* ===============================
   PhotoSwipe iOS Safari SWIPE FIX
   ✅ 放在 styles.css 最底部（最後一行）
================================ */

/* 0) 先把你之前對 pswp__img 的 opacity 動畫全部壓掉（避免互打） */
.pswp__img{
  opacity: 1 !important;
  transition: none !important;
  object-fit: contain !important;
}

/* 1) 主滑動區：一定要能左右滑 */
.pswp__scroll-wrap,
.pswp__container,
.pswp__item{
  touch-action: pan-x pan-y !important;
}

/* 2) 縮圖列：只允許“水平捲動”，不要搶主圖的左右 swipe */
.pswp__thumbsbar{
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: hidden;

  /* ✅ 重要：縮圖列本體要能操作（滾動/點擊） */
  pointer-events: auto !important;
}

/* 3) 縮圖列的遮罩 ::before 不能吃事件 */
.pswp__thumbsbar::before{
  pointer-events: none !important;
}

/* 4) 最關鍵：縮圖列不要做成“透明大遮罩”
      你現在 bottom bar 有很多重複設定，我直接強制成固定高度 */
.pswp__thumbsbar{
  height: 84px !important;
  align-items: center;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 5) 確保縮圖按鈕可點 */
.pswp__thumb{
  pointer-events: auto !important;
}

/* 6) 如果你有自訂左右箭頭，避免它們的外層蓋住整張 */
.pswpArrow{
  pointer-events: auto !important;
}

/* ===============================
   Force arrows to middle sides
   放在 styles.css 最底部
================================ */

.pswpArrow{
  position: fixed !important;      /* 用 fixed 脫離 pswp 內部定位干擾 */
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 46px !important;
  height: 46px !important;
  border-radius: 999px;

  z-index: 10050 !important;       /* 一定要比 thumbsbar 高 */
  pointer-events: auto !important;

  display: grid !important;
  place-items: center !important;

  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(0,0,0,.25) !important;
  color: #fff !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

/* 左右位置 */
.pswpArrow--prev{ left: 12px !important; right: auto !important; }
.pswpArrow--next{ right: 12px !important; left: auto !important; }

/* iPhone 安全邊距（避免貼太邊） */
@supports(padding: max(0px)){
  .pswpArrow--prev{ left: max(12px, env(safe-area-inset-left)) !important; }
  .pswpArrow--next{ right: max(12px, env(safe-area-inset-right)) !important; }
}