/* ============================================================
   電子婚紗 · 樣式表
   想微調顏色 / 字體，改最上面「配色」這一段就好
   ============================================================ */

:root{
  /* ---------- 配色 ---------- */
  --紙:        #F6F1E9;   /* 頁面米白 */
  --紙深:      #ECE4D8;   /* 書邊、陰影用的深一階 */
  --底:        #E3DACD;   /* 整個螢幕的背景 */
  --底深:      #CFC3B2;
  --墨:        #3B352E;   /* 主要文字 */
  --淡墨:      #8C8175;   /* 小字、說明 */
  --金:        #B08D57;   /* 點綴線條 */

  /* ---------- 字體 ---------- */
  --標題字: "Noto Serif TC", "Songti TC", "宋體", "PMingLiU", Georgia, serif;
  --內文字: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  /* ---------- 由 JS 計算，勿手動改 ---------- */
  --pw: 420px;
  --ph: 560px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; height:100%;
  background:
    radial-gradient(120% 90% at 50% 0%, #EFE8DC 0%, var(--底) 55%, var(--底深) 100%);
  color:var(--墨);
  font-family:var(--內文字);
  overflow:hidden;
  overscroll-behavior:none;
}

/* ============================ 舞台 ============================ */
#stage{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  perspective: 2100px;
  perspective-origin: 50% 50%;
}

#book{
  position:relative;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.4,.05,.2,1);
  filter: drop-shadow(0 26px 46px rgba(80,64,44,.28));
}
#book.closed  { transform: translateX(calc(var(--pw) / -2)); }
#book.finished{ transform: translateX(calc(var(--pw) / 2)); }

/* 書縫 */
#spine{
  position:absolute; top:0; bottom:0; left:50%; width:34px;
  margin-left:-17px; z-index:999; pointer-events:none;
  background:linear-gradient(90deg,
     rgba(90,74,54,0) 0%, rgba(90,74,54,.13) 32%,
     rgba(90,74,54,.30) 50%, rgba(90,74,54,.13) 68%, rgba(90,74,54,0) 100%);
  opacity:0; transition:opacity .5s;
}
#book.opened #spine{ opacity:1; }

/* ============================ 書頁 ============================ */
.leaf{
  position:absolute; top:0; left:50%;
  width:var(--pw); height:var(--ph);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(.61,.04,.21,1);
}
.leaf.flipped{ transform: rotateY(-180deg); }

/* 正在翻的那一頁：浮起來、影子更重，感覺像真的被拿起來翻 */
.leaf.flipping{
  transition-duration: 1.05s;
  filter: drop-shadow(0 22px 40px rgba(55,42,24,.40));
}

.face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden;
  background:var(--紙);
}
.face.back{ transform: rotateY(180deg); }

/* 靠書縫那側的內陰影 */
.face.front::after,
.face.back::after{
  content:""; position:absolute; top:0; bottom:0; width:44px; pointer-events:none;
  z-index:5;
}
.face.front::after{ left:0;  background:linear-gradient(90deg, rgba(92,76,55,.17), rgba(92,76,55,0)); }
.face.back::after { right:0; background:linear-gradient(270deg, rgba(92,76,55,.17), rgba(92,76,55,0)); }

/* 翻頁瞬間掃過的光影，模擬紙張轉到側面時最暗、
   轉平之後光影散開的樣子（翻頁翻到一半通常最有「立體感」） */
.face.front::before,
.face.back::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  z-index:6; opacity:0;
}
.face.front::before{ background:linear-gradient(90deg, rgba(25,18,9,.5) 0%, rgba(25,18,9,0) 62%); }
.face.back::before { background:linear-gradient(270deg, rgba(25,18,9,.5) 0%, rgba(25,18,9,0) 62%); }
.leaf.flipping .face::before{
  animation: pageShade 1.05s cubic-bezier(.61,.04,.21,1) both;
}
@keyframes pageShade{
  0%   { opacity:0; }
  46%  { opacity:1; }
  60%  { opacity:1; }
  100% { opacity:0; }
}

/* 手機單頁模式 */
body.mobile #book{ width:var(--pw); transform:none !important; }
body.mobile .leaf{ left:0; }
body.mobile #spine{ display:none; }
body.mobile .face.front::after,
body.mobile .face.back::after{ display:none; }

/* ============================ 頁面內容 ============================ */
.page{
  position:absolute; inset:0;
  padding: calc(var(--ph) * .055) calc(var(--pw) * .075);
  display:flex; flex-direction:column;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 30%),
    var(--紙);
}
.pnum{
  position:absolute; bottom:calc(var(--ph)*.028); left:0; right:0;
  text-align:center; font-size:calc(var(--ph)*.019);
  letter-spacing:.22em; color:var(--淡墨); font-family:var(--標題字);
}
.face.front .pnum{ text-align:right; padding-right:calc(var(--pw)*.09); }
.face.back  .pnum{ text-align:left;  padding-left:calc(var(--pw)*.09); }
body.mobile .pnum{ text-align:center !important; padding:0 !important; }

/* --- 照片 --- */
.shots{ flex:1; display:flex; gap:calc(var(--pw)*.045); min-height:0; }
.shots.col{ flex-direction:column; }
.shot{
  flex:1; min-height:0; min-width:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.shot img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; display:block;
  box-shadow:0 6px 18px rgba(90,72,50,.20);
  background:#EFE9E0;
}

/* --- 說明小字 --- */
.cap{
  margin-top:calc(var(--ph)*.026);
  font-size:calc(var(--ph)*.0205);
  line-height:1.75; letter-spacing:.06em; color:var(--淡墨);
  display:flex; align-items:center; gap:.7em;
  min-height:1.2em;
}
.cap::before{
  content:""; width:calc(var(--pw)*.075); height:1px;
  background:var(--金); opacity:.65; flex:none;
}
.cap.empty::before{ display:none; }

/* --- 章名頁 --- */
.chapter{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  gap:calc(var(--ph)*.022);
  padding:0 calc(var(--pw)*.06);
}
.chapter .num{
  font-family:var(--標題字); font-size:calc(var(--ph)*.021);
  letter-spacing:.42em; text-indent:.42em; color:var(--金);
}
.chapter .rule{ width:calc(var(--pw)*.16); height:1px; background:var(--金); opacity:.55; }
.chapter h2{
  margin:0; font-family:var(--標題字); font-weight:500;
  font-size:calc(var(--ph)*.093); letter-spacing:.20em; text-indent:.20em;
  color:var(--墨);
}
.chapter .en{
  font-family:var(--標題字); font-style:italic;
  font-size:calc(var(--ph)*.026); letter-spacing:.18em; color:var(--淡墨);
}
.chapter .lead{
  margin-top:calc(var(--ph)*.03);
  font-size:calc(var(--ph)*.0225); line-height:2.2; letter-spacing:.09em;
  color:var(--淡墨); white-space:pre-line;
}

/* --- 純文字頁 --- */
.textpage{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:0 calc(var(--pw)*.08);
}
.textpage p{
  margin:0; font-family:var(--標題字);
  font-size:calc(var(--ph)*.031); line-height:2.5; letter-spacing:.12em;
  white-space:pre-line; color:var(--墨);
}
.textpage .sign{
  margin-top:calc(var(--ph)*.05); font-size:calc(var(--ph)*.020);
  letter-spacing:.2em; color:var(--淡墨); font-family:var(--內文字);
}

/* --- 封面 / 封底（米白雜誌感） --- */
.cover, .ending{
  position:absolute; inset:0;
  padding: calc(var(--ph)*.062) calc(var(--pw)*.085) calc(var(--ph)*.05);
  display:flex; flex-direction:column; align-items:center;
  background:
    linear-gradient(180deg, #FBF7F0 0%, var(--紙) 42%, #EFE7DA 100%);
  overflow:hidden;
}
.cover::before, .ending::before{
  content:""; position:absolute; inset:calc(var(--ph)*.028) calc(var(--pw)*.04);
  border:1px solid rgba(176,141,87,.32); pointer-events:none;
}
.cover .head, .ending .head{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:calc(var(--ph)*.014); flex:none;
}
.cover .shot, .ending .shot{
  flex:1; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
  margin:calc(var(--ph)*.035) 0 calc(var(--ph)*.028);
}
.cover img, .ending img{
  max-width:100%; max-height:100%; width:auto; height:auto; display:block;
  box-shadow:0 10px 26px rgba(90,72,50,.24);
}
.cover .foot, .ending .foot{ flex:none; text-align:center; }

.cover .en, .ending .en{
  font-family:var(--標題字); font-size:calc(var(--ph)*.021);
  letter-spacing:.52em; text-indent:.52em; color:var(--金);
}
.cover h1{
  margin:0; font-family:var(--標題字); font-weight:500;
  font-size:calc(var(--ph)*.105); letter-spacing:.26em; text-indent:.26em;
  color:var(--墨); line-height:1.2;
}
.cover .rule, .ending .rule{
  width:calc(var(--pw)*.20); height:1px; background:var(--金); opacity:.6;
  margin:calc(var(--ph)*.012) 0;
}
.cover .sub, .ending .en2{
  font-family:var(--標題字); font-style:italic;
  font-size:calc(var(--ph)*.026); letter-spacing:.2em; color:var(--淡墨);
}
.cover .tiny{
  font-size:calc(var(--ph)*.020); letter-spacing:.14em; color:var(--淡墨);
}

.ending h2{
  margin:0; font-family:var(--標題字); font-weight:500;
  font-size:calc(var(--ph)*.078); letter-spacing:.24em; text-indent:.24em; color:var(--墨);
}
.ending p{
  margin:0; font-family:var(--標題字);
  font-size:calc(var(--ph)*.027); line-height:2.2; letter-spacing:.12em;
  white-space:pre-line; color:var(--墨);
}
.ending .sign{
  margin-top:calc(var(--ph)*.028); font-size:calc(var(--ph)*.019);
  letter-spacing:.2em; color:var(--淡墨);
}

/* ============================ 控制列 ============================ */
#ui{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  gap:14px; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  pointer-events:none;
}
#ui > *{ pointer-events:auto; }

.btn{
  border:1px solid rgba(59,53,46,.22);
  background:rgba(255,253,249,.78);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--墨); font-family:var(--內文字); font-size:14px;
  letter-spacing:.08em; border-radius:999px;
  padding:9px 18px; cursor:pointer; user-select:none;
  transition:background .2s, transform .12s, opacity .2s;
}
.btn:hover{ background:#fff; }
.btn:active{ transform:scale(.96); }
.btn[disabled]{ opacity:.35; cursor:default; }
.btn.round{ width:42px; height:42px; padding:0; font-size:17px; line-height:1; }

#counter{
  font-family:var(--標題字); font-size:13px; letter-spacing:.2em;
  color:var(--淡墨); min-width:78px; text-align:center;
}

#corner{
  position:fixed; top:0; right:0; z-index:1000;
  display:flex; gap:10px; padding:14px 16px;
}

/* ============================ 目錄 ============================ */
#toc{
  position:fixed; inset:0; z-index:1500;
  background:rgba(232,224,212,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center;
  padding:32px;
}
#toc.on{ display:flex; }
#toc .box{ width:min(520px,100%); max-height:82vh; overflow:auto; }
#toc h3{
  margin:0 0 22px; text-align:center; font-family:var(--標題字);
  font-weight:500; font-size:15px; letter-spacing:.5em; text-indent:.5em; color:var(--淡墨);
}
#toc a{
  display:flex; align-items:baseline; gap:14px;
  padding:14px 8px; border-bottom:1px solid rgba(59,53,46,.13);
  cursor:pointer; color:var(--墨); text-decoration:none;
}
#toc a:hover{ background:rgba(255,255,255,.5); }
#toc .n{ font-family:var(--標題字); font-size:12px; letter-spacing:.2em; color:var(--金); width:30px; flex:none; }
#toc .t{ font-family:var(--標題字); font-size:19px; letter-spacing:.14em; }
#toc .e{ margin-left:auto; font-family:var(--標題字); font-style:italic; font-size:13px; color:var(--淡墨); }

/* ============================ 開場 ============================ */
#intro{
  position:fixed; inset:0; z-index:2000;
  background:radial-gradient(120% 90% at 50% 30%, #F3EDE3 0%, #E0D6C7 60%, #CFC3B2 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; text-align:center; padding:36px;
  transition:opacity .8s;
}
#intro.hide{ opacity:0; pointer-events:none; }
#intro .en{ font-family:var(--標題字); font-size:13px; letter-spacing:.6em; text-indent:.6em; color:var(--金); }
#intro h1{
  margin:0; font-family:var(--標題字); font-weight:500;
  font-size:clamp(34px,7vw,58px); letter-spacing:.28em; text-indent:.28em; color:var(--墨);
}
#intro .sub{ font-family:var(--標題字); font-style:italic; font-size:15px; letter-spacing:.2em; color:var(--淡墨); }
#intro .rule{ width:70px; height:1px; background:var(--金); opacity:.6; }
#intro .row{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
#intro .note{ font-size:12px; letter-spacing:.1em; color:var(--淡墨); opacity:.85; }

/* 提示 */
#hint{
  position:fixed; left:50%; top:22px; transform:translateX(-50%);
  z-index:900; font-size:12px; letter-spacing:.16em; color:var(--淡墨);
  opacity:0; transition:opacity .6s; pointer-events:none; white-space:nowrap;
}
#hint.on{ opacity:.9; }

@media (max-width:760px){
  .btn{ font-size:13px; padding:8px 14px; }
  #ui{ gap:10px; }
  #hint{ top:auto; bottom:calc(60px + env(safe-area-inset-bottom)); }
}