:root {
  --paper: #f7f0f3;        /* 暖白底 */
  --page: #fbf6ef;         /* 手帳內頁 */
  --ink: #3e3a36;          /* 暖灰墨色 */
  --ink-soft: #8a827a;
  --mist: #5b7cb8;         /* 低飽和霧藍 */
  --mist-light: #c9d5ea;
  --navy: #3f5577;
  --sage: #c9cbb7;         /* 灰綠票紙 */
  --wine: #9b4a5a;         /* 酒紅標籤 */
  --line: #e4dbd2;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", "MingLiU", serif;
  --mono: "Courier New", "Courier", monospace;
  --hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --tabbar-h: 72px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--serif); }
body { overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.app { max-width: 440px; margin: 0 auto; min-height: 100%; position: relative; }
main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

/* ---------- 底部導覽：只用 icon、文字、短底線上色 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  max-width: 440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper);
}
.tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink); }
.tabbar svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar span { font-size: 17px; letter-spacing: .35em; padding-left: .35em; position: relative; padding-bottom: 5px; }
.tabbar button.on { color: var(--mist); }
.tabbar button.on span::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; border-radius: 2px; background: var(--mist); }

/* ---------- 旅途（首頁）：定稿圖當底，上面疊可點區域 ---------- */
.home { position: relative; width: 100%; aspect-ratio: 942 / 1400; overflow: hidden; overflow: clip; /* clip：點擊時圖片不會在框內被捲動 */ }
.home > img.base { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(-4.790%); /* 裁掉狀態列：80/1670 */ display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.hit { position: absolute; display: block; border-radius: 6px; }
.hit:active { background: rgba(106,134,189,.10); }
.check-mark { position: absolute; pointer-events: none; opacity: 0; transition: opacity .15s; }
.check-mark.on { opacity: 1; }
.check-mark svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--mist); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.strike { position: absolute; height: 0; border-top: 1.5px solid rgba(106,134,189,.75); transform: rotate(-2deg); pointer-events: none; opacity: 0; transition: opacity .15s; }
.strike.on { opacity: 1; }

/* 右頁內展開的完整清單 */
.list-panel {
  position: absolute; background: #f9efe9;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity .2s, transform .2s;
  font-size: clamp(11px, 3.2vw, 14px); line-height: 1.2;
}
.list-panel.open { opacity: 1; pointer-events: auto; transform: none; }
.list-panel h3 { margin: 0 0 .2em; font-family: var(--serif); font-weight: 500; font-size: 1.05em; color: var(--mist); letter-spacing: .2em; border-bottom: 1px solid var(--mist-light); padding-bottom: .2em; }
.list-panel ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; scrollbar-width: none; }
.list-panel ul::-webkit-scrollbar { display: none; }
.list-panel li button { width: 100%; display: flex; align-items: center; gap: .55em; padding: .2em 0; border-bottom: 1px dashed var(--line); text-align: left; }
.box { width: 1em; height: 1em; border: 1.4px solid var(--ink); border-radius: 2px; flex: none; position: relative; }
.done .box::after { content: ""; position: absolute; left: .18em; top: -.1em; width: .35em; height: .7em; border: solid var(--mist); border-width: 0 2.4px 2.4px 0; transform: rotate(40deg); }
.done .label { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--mist); }
.list-panel .fold { align-self: flex-end; color: var(--ink); font-size: .9em; padding: .3em 0 0; letter-spacing: .1em; }
.list-panel .count { font-family: var(--mono); font-size: .75em; color: var(--ink-soft); margin-left: .5em; letter-spacing: 0; }

/* ---------- 共用頁首 ---------- */
.head { padding: 26px 22px 6px; }
.head .eyebrow { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); letter-spacing: .12em; }
.head h1 { margin: 2px 0 0; font-weight: 500; font-size: 26px; letter-spacing: .25em; }
.head h1 .squiggle { display: block; width: 92px; height: 8px; margin-top: 2px; }

/* ---------- 行程 ---------- */
.days { display: flex; gap: 0; overflow-x: auto; padding: 8px 8px 4px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.days button { flex: 1 0 auto; min-width: 44px; padding: 6px 2px 8px; display: flex; flex-direction: column; align-items: center; color: var(--ink-soft); position: relative; }
.days b { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .05em; }
.days i { font-style: normal; font-family: var(--mono); font-size: 13px; letter-spacing: -.02em; color: var(--ink); margin-top: 1px; }
.days button.on, .days button.on i { color: var(--mist); }
.days button.on::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 2px; height: 2px; border-radius: 2px; background: var(--mist); }

.sheet { margin: 10px 14px 18px; background: var(--page); border-radius: 3px; padding: 18px 16px 10px 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 6px 18px rgba(80,60,40,.08);
  background-image: radial-gradient(rgba(106,134,189,.16) 1px, transparent 1.3px); background-size: 14px 14px; position: relative; animation: sheetIn .28s ease; }
@keyframes sheetIn { from { transform: translateY(10px); } to { transform: none; } }
.sheet::before { /* 紙膠帶 */ content: ""; position: absolute; top: -9px; left: 50%; width: 86px; height: 18px; margin-left: -43px; transform: rotate(-2deg);
  background: repeating-linear-gradient(135deg, rgba(106,134,189,.35) 0 4px, rgba(201,213,234,.55) 4px 8px); opacity: .85; }
.day-title { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 6px; }
.day-title h2 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: .08em; }
.day-title span { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 47px; top: 14px; bottom: 14px; border-left: 1.5px dotted var(--mist); }
.stop { display: grid; grid-template-columns: 40px 16px 1fr; gap: 0 6px; padding: 10px 0; }
.stop time { font-family: var(--mono); font-size: 13px; padding-top: 2px; text-align: right; }
.stop .dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--mist); background: var(--page); margin: 4px 0 0 2px; position: relative; z-index: 1; }
.stop.next .dot { background: var(--mist); }
.stop h3 { margin: 0; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag-next { font-family: var(--hand); font-style: italic; font-size: 11px; color: #fff; background: var(--wine); border-radius: 3px 8px 3px 8px; padding: 0 7px; letter-spacing: .05em; }
.meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
.meta .mode { color: var(--navy); }
.addr { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-top: 5px; color: var(--ink); }
.addr button { font-family: var(--mono); font-size: 10.5px; color: var(--mist); border: 1px dashed var(--mist); border-radius: 3px; padding: 1px 6px; flex: none; }
.note { font-size: 12.5px; margin-top: 5px; color: var(--ink); background: rgba(201,203,183,.35); padding: 4px 8px; border-left: 2px solid var(--sage); }
.leg { grid-column: 3; font-family: var(--mono); font-size: 11px; color: var(--mist); padding: 0 0 0 0; }
.leg::before { content: "↓ "; }

/* ---------- 手帳 ---------- */
.book-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 18px 0; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.spread-wrap { padding: 14px 10px 6px; }
.spread { position: relative; width: 100%; aspect-ratio: 1.22; }
.spread .pg { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--page); box-shadow: 0 10px 24px rgba(80,60,40,.13), 0 1px 0 rgba(0,0,0,.04); }
.spread .pg.l { left: 0; border-radius: 4px 0 0 4px; background-image: linear-gradient(90deg, transparent 88%, rgba(80,60,40,.12)); }
.spread .pg.r { right: 0; border-radius: 0 4px 4px 0; background-image: linear-gradient(90deg, rgba(80,60,40,.13), transparent 12%), radial-gradient(rgba(106,134,189,.15) 1px, transparent 1.3px); background-size: auto, 11px 11px; }
.spread .pg.off { visibility: hidden; }
.spread .layer { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
.el { position: absolute; transition: left .45s cubic-bezier(.3,.8,.3,1), top .45s cubic-bezier(.3,.8,.3,1), width .45s, height .45s, transform .45s, opacity .3s; z-index: 1; }
.el.hide { opacity: 0; pointer-events: none; }
.photo { background: #fff; padding: 5px 5px 17px; box-shadow: 0 2px 6px rgba(60,40,20,.18); }
.photo .pic { width: 100%; height: 100%; overflow: hidden; position: relative; }
.photo .pic img { position: absolute; left: 0; top: 0; }
.photo .cap { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-family: var(--hand); font-size: clamp(7px, 2.2vw, 10px); color: var(--mist); }
.photo.main { z-index: 2; }
.p-yuyuan { background: linear-gradient(180deg, #e7d9cf 0%, #c98d7f 55%, #8b4c4a 56%, #5f3a36 100%); }
.p-bund { background: radial-gradient(circle at 30% 70%, rgba(255,214,140,.9) 0 2px, transparent 3px) 0 0/18px 14px, linear-gradient(180deg, #2c3b5a 0%, #445a80 60%, #1f2a40 100%); }
.p-xlb { background: radial-gradient(circle at 35% 50%, #f5ede0 0 22%, transparent 23%), radial-gradient(circle at 68% 48%, #f2e8d8 0 20%, transparent 21%), radial-gradient(circle at 50% 75%, #efe4d2 0 18%, transparent 19%), #b9a27e; }
.p-tree { background: linear-gradient(160deg, #d9dcc6 0%, #a9b08c 50%, #7f8a69 100%); }
.memo { font-size: clamp(8.5px, 2.6vw, 12px); line-height: 1.55; padding: 2px 4px; }
.memo .date { font-family: var(--mono); color: var(--mist); font-size: 1.05em; }
.memo p { margin: .3em 0 0; }
.memo .hl { background: linear-gradient(transparent 60%, rgba(201,213,234,.8) 60%); }
.stub { background: var(--sage); border-radius: 2px; font-family: var(--mono); font-size: clamp(6.5px, 2vw, 9px); color: #4c4e40; padding: 4px 6px;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) right/51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) right/51% 100% no-repeat; }
.stub b { display: block; font-size: 1.25em; letter-spacing: .1em; }

.controls { padding: 6px 18px 20px; }
.controls h4 { margin: 10px 0 6px; font-size: 13px; font-weight: 500; letter-spacing: .2em; color: var(--ink-soft); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { padding: 6px 10px 7px; font-size: 13.5px; color: var(--ink); position: relative; border-bottom: 1px dashed transparent; }
.seg button.on { color: var(--mist); }
.seg button.on::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 2px; border-radius: 2px; background: var(--mist); }
.thumb { display: block; width: 46px; height: 32px; margin: 0 auto 3px; border: 1px solid currentColor; border-radius: 2px; position: relative; opacity: .8; }
.thumb i { position: absolute; background: currentColor; opacity: .35; }
.hint { font-size: 12px; color: var(--ink-soft); margin-top: 12px; line-height: 1.6; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 16px); transform: translateX(-50%) translateY(10px); background: var(--ink); color: var(--paper);
  font-size: 13px; padding: 7px 14px; border-radius: 4px; opacity: 0; transition: .2s; pointer-events: none; z-index: 30; }
.toast.show { opacity: .92; transform: translateX(-50%); }

/* 首頁在螢幕可用高度內垂直置中，避免下方大片空白 */
.home-wrap { min-height: calc(100vh - var(--tabbar-h)); min-height: calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: center; }
.addr .pin { width: 11px; height: 14px; flex: none; fill: none; stroke: var(--mist); stroke-width: 1.3; }
.addr span { flex: 1; min-width: 0; }
.seg.layouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.seg.layouts button { padding: 6px 0 7px; font-size: 12.5px; white-space: nowrap; }

/* ---------- 手帳：拼貼編輯 ---------- */
.spread.editing .layer { overflow: visible; }
.spread.editing .el { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.el.dragging { transition: none !important; }
.el .handle { display: none; position: absolute; right: -11px; bottom: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--mist); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); touch-action: none; z-index: 5; }
.el .handle::before { content: ""; position: absolute; inset: 5px; border: 1.5px solid #fff; border-left-color: transparent; border-radius: 50%; }
.spread.editing .el.sel { outline: 1.5px dashed var(--mist); outline-offset: 3px; }
.spread.editing .el.sel:not(.locked) .handle { display: block; }
.el.locked .lock { display: block; }
.lock { display: none; position: absolute; left: -6px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); z-index: 5; }
.lock::before { content: ""; position: absolute; left: 4.5px; top: 6.5px; width: 7px; height: 5.5px; background: #fff; border-radius: 1px; }
.lock::after { content: ""; position: absolute; left: 5.5px; top: 2.5px; width: 3px; height: 4px; border: 1.3px solid #fff; border-bottom: 0; border-radius: 3px 3px 0 0; }
.spread:not(.editing) .el.locked .lock { display: none; }

.pic > img.media, .pic > video.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }
.play { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; min-width: 18px; max-width: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,.85); pointer-events: none; }
.play::after { content: ""; position: absolute; left: 38%; top: 28%; border-style: solid; border-width: .5em 0 .5em .8em; border-color: transparent transparent transparent var(--mist); font-size: clamp(6px, 2vw, 11px); }
.playing .play { opacity: 0; transition: opacity .2s; }
.vtag { position: absolute; right: 4px; top: 4px; font-family: var(--mono); font-size: 7px; background: rgba(255,255,255,.85); color: var(--mist); padding: 0 3px; border-radius: 2px; pointer-events: none; }
.p-bund.anim { background-size: 18px 14px, 100% 100%; animation: shimmer 3s linear infinite; }
@keyframes shimmer { to { background-position: 18px 0, 0 0; } }

.toolbar { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 10px 14px 0; min-height: 44px; align-items: center; }
.toolbar button { font-size: 13px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 3px; background: var(--page); }
.toolbar button.primary { color: #fff; background: var(--mist); border-color: var(--mist); }
.toolbar .sp { flex: 1; }
.toolbar .tip { font-size: 12px; color: var(--ink-soft); }

/* ---------- 電子手帳翻頁預覽 ---------- */
.flip { position: fixed; inset: 0; z-index: 40; background: #ebe4e6; display: flex; flex-direction: column; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.flip-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.flip-head button { font-family: var(--serif); font-size: 14px; color: var(--ink); padding: 6px 4px; }
.flip-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px; perspective: 1800px; touch-action: pan-y; }
.flip-stage .book { position: relative; width: min(96vw, 900px, calc((100dvh - 150px) * 1.22)); aspect-ratio: 1.22; }
.flip-stage .book > .spread { position: absolute; inset: 0; width: auto; }
.half-l { clip-path: inset(-5% 50% -5% -5%); }
.half-r { clip-path: inset(-5% -5% -5% 50%); }
.leaf { position: absolute; inset: 0; transform-style: preserve-3d; z-index: 3; }
.leaf > .spread { position: absolute; inset: 0; width: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf > .spread.back { transform: rotateY(180deg); }
.leaf.go-next { animation: turnNext .7s cubic-bezier(.45,.05,.35,1) forwards; }
.leaf.go-prev { animation: turnPrev .7s cubic-bezier(.45,.05,.35,1) forwards; }
@keyframes turnNext { to { transform: rotateY(-180deg); } }
@keyframes turnPrev { to { transform: rotateY(180deg); } }
.flip-foot { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 6px 0 calc(18px + env(safe-area-inset-bottom)); }
.flip-foot button { font-size: 22px; width: 44px; height: 44px; color: var(--mist); }
.flip-foot button:disabled { color: var(--line); }
.flip-foot span { font-family: var(--mono); font-size: 12px; min-width: 90px; text-align: center; }
.flip-hint { text-align: center; font-size: 11px; color: var(--ink-soft); padding-bottom: 4px; }

/* 封面、封底、其他天、旅圖 */
.pg.cover { background: #3f5577; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px); color: #f3ece4; }
.cover-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8%; }
.cover-in .t { font-family: Georgia, var(--serif); font-size: clamp(14px, 5.2vw, 34px); letter-spacing: .02em; line-height: 1; }
.cover-in .d { font-family: var(--mono); font-size: clamp(7px, 2.2vw, 13px); margin-top: .6em; letter-spacing: .15em; }
.cover-in .label { margin-top: 1.2em; border: 1px solid rgba(243,236,228,.6); padding: .3em .8em; font-family: var(--mono); font-size: clamp(6px, 1.8vw, 11px); letter-spacing: .2em; }
.hamster { width: 58%; aspect-ratio: 200 / 180; overflow: hidden; position: relative; margin-top: 8%; background: var(--page); border-radius: 50% 50% 46% 46%; }
.hamster img { position: absolute; left: 0; top: 0; }
.pagetext { position: absolute; inset: 0; padding: 9% 9%; font-size: clamp(7px, 2.3vw, 13px); line-height: 1.6; }
.pagetext .dn { font-family: var(--mono); color: var(--mist); font-size: 1.05em; }
.pagetext h5 { margin: .2em 0 .6em; font-size: 1.35em; font-weight: 500; }
.pagetext ol { list-style: none; padding: 0; margin: 0; }
.pagetext li { border-bottom: 1px dashed var(--line); padding: .15em 0; }
.pagetext li b { font-family: var(--mono); font-weight: 400; color: var(--ink-soft); margin-right: .5em; }
.ph { position: absolute; border: 1.5px dashed var(--mist-light); display: flex; align-items: center; justify-content: center; font-size: clamp(6px, 1.9vw, 11px); color: var(--ink-soft); background: rgba(255,255,255,.4); }
.map svg { position: absolute; inset: 8% 8% 18%; width: 84%; height: 74%; }
.end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--hand); color: var(--mist); font-size: clamp(12px, 4.2vw, 26px); }
.end small { font-family: var(--mono); color: var(--ink-soft); font-size: .45em; margin-top: .6em; }
.spread.editing .el.sel { z-index: 60 !important; }
.flip-stage .book { transition: transform .6s ease; }
.flip-stage .book.at-front { transform: translateX(-25%); }
.flip-stage .book.at-back { transform: translateX(25%); }
/* 手機橫放：標題與箭頭疊在邊上，讓書本盡量大 */
@media (orientation: landscape) and (max-height: 500px) {
  .flip-head { position: absolute; top: 0; left: 0; right: 0; padding: 6px 12px; z-index: 5; }
  .flip-hint { display: none; }
  .flip-foot { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 0 2px; pointer-events: none; }
  .flip-foot button { pointer-events: auto; }
  .flip-stage .book { width: min(96vw, calc((100dvh - 80px) * 1.22)); }
}

/* ---------- 當日開場（全屏） ---------- */
.intro { position: absolute; inset: 0; z-index: 20; background: #1d2635; color: #f3ece4; transition: background-color .6s ease; overflow: hidden; }
.intro.out { background-color: rgba(29,38,53,0); pointer-events: none; }
.intro.out .bars, .intro.out .skip, .intro.out .icap, .intro.out .ititle { opacity: 0; transition: opacity .3s; }
.bars { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.bars i { flex: 1; height: 2px; border-radius: 2px; background: rgba(243,236,228,.28); overflow: hidden; }
.bars b { display: block; height: 100%; width: 0; background: #f3ece4; }
.bars i.done b { width: 100%; }
.bars i.now b { animation: barFill var(--d, 2600ms) linear forwards; }
@keyframes barFill { to { width: 100%; } }
.skip { position: absolute; top: calc(22px + env(safe-area-inset-top)); right: 12px; z-index: 3; color: #f3ece4; font-size: 13px; padding: 6px 4px; opacity: .85; }
.ibody { position: absolute; inset: 0; }
.ititle { position: absolute; left: 9%; right: 9%; top: 50%; transform: translateY(-50%); animation: riseIn .7s ease both; }
.ititle .dn { font-family: var(--mono); font-size: 13px; letter-spacing: .15em; color: #9fb3da; }
.ititle h2 { margin: 10px 0 2px; font-weight: 500; font-size: clamp(24px, 7.5vw, 40px); letter-spacing: .08em; line-height: 1.3; }
.ititle svg { width: 140px; height: 12px; display: block; }
.ititle ol { list-style: none; padding: 0; margin: 22px 0 0; font-size: 14px; line-height: 2; color: rgba(243,236,228,.85); }
.ititle li { animation: riseIn .6s ease both; }
.ititle li:nth-child(1) { animation-delay: .25s; } .ititle li:nth-child(2) { animation-delay: .4s; } .ititle li:nth-child(3) { animation-delay: .55s; } .ititle li:nth-child(4) { animation-delay: .7s; }
.ititle li b { font-family: var(--mono); font-weight: 400; color: #9fb3da; margin-right: .8em; }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } }
.ititle { animation-name: riseInTitle; }
@keyframes riseInTitle { from { opacity: 0; transform: translateY(calc(-50% + 12px)); } to { opacity: 1; transform: translateY(-50%); } }
.ifr { position: absolute; overflow: hidden; background: #fff; animation: fadeIn .45s ease; }
.ifr.full { left: 0; right: 0; top: 0; bottom: 0; background: transparent; }
.ifr.full .media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ifr.sq { width: min(86vw, 62vh); aspect-ratio: 1; left: 50%; top: calc(46% - min(86vw, 62vh) / 2); margin-left: calc(min(86vw, 62vh) / -2); padding: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.ifr.sq .pic { width: 100%; height: 100%; }
.ifr.sq .play, .ifr.sq .vtag { display: none; }
.ifr.kb > * { animation: kenburns 4s ease-out forwards; }
.ifr.kb > .pic { transform-origin: 50% 45%; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.icap { position: absolute; left: 0; right: 0; bottom: calc(34px + env(safe-area-inset-bottom)); text-align: center; font-family: var(--hand); font-size: 18px; color: #f3ece4; text-shadow: 0 1px 6px rgba(0,0,0,.5); animation: riseIn .6s .2s ease both; }
.toolbar button[data-act=film] { color: var(--mist); }

/* ---------- 全屏重看 ---------- */
.viewer { position: fixed; inset: 0; z-index: 60; background: #1d2635; color: #f3ece4; animation: fadeIn .2s ease; touch-action: pan-y; }
.vhead { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top)) 14px 8px; font-family: var(--mono); font-size: 12px; color: #9fb3da; }
.vhead button { color: #f3ece4; font-size: 14px; padding: 6px 4px; font-family: var(--serif); }
.viewer .ifr.full { top: 48px; bottom: 80px; }
.viewer .ifr.full video { background: transparent; }
.vnav { position: absolute; top: 50%; z-index: 3; width: 40px; height: 64px; margin-top: -32px; font-size: 30px; color: #f3ece4; opacity: .8; }
.vnav.l { left: 0; } .vnav.r { right: 0; }
.vnav:disabled { opacity: .15; }
.intro .ititle.trip h2 { font-family: Georgia, var(--serif); letter-spacing: .04em; }
.el.photo { cursor: zoom-in; }
.spread.editing .el.photo { cursor: grab; }

/* ================= 統一成首頁的拼貼手帳質感（2026-11-05） ================= */
:root {
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .35  0 0 0 0 .28  0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --nb-page: #fbf4ee;
}
.spr { background-repeat: no-repeat; }
.openhint { display: block; margin: 4px auto 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-soft); padding: 6px 10px; }

/* ---- 行程 ---- */
.plan-head { padding: 18px 0 0; text-align: center; }
.ptitle { width: 66%; margin: 0 auto; }
.dayline { position: relative; display: flex; justify-content: space-between; margin: 10px 11% 0; }
.dayline::before { content: ""; position: absolute; left: 7px; right: 7px; top: 13px; height: 1.2px; background: var(--ink); opacity: .55; }
.dayline button { position: relative; width: 14%; display: flex; flex-direction: column; align-items: center; padding: 6px 0 2px; }
.dayline .dt { width: 13px; height: 13px; border-radius: 50%; border: 1.4px solid var(--ink); background: var(--paper); transition: background .2s, border-color .2s, transform .2s; }
.dayline button.on .dt { background: var(--mist); border-color: var(--mist); transform: scale(1.15); }
.dayline .dl { font-family: var(--mono); font-size: 12px; height: 16px; margin-top: 4px; white-space: nowrap; color: var(--mist); }

.nb-wrap { position: relative; margin: 14px 12px 22px; padding-top: 22px; }
.deco-pvg { position: absolute; right: -4px; top: 0; width: 46%; transform: rotate(4deg); filter: drop-shadow(0 2px 3px rgba(60,40,20,.15)); -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
.deco-ticket { position: absolute; left: 2px; top: 6px; width: 34%; transform: rotate(-5deg); -webkit-mask: linear-gradient(#000 65%, transparent); mask: linear-gradient(#000 65%, transparent); }
.nb-page { position: relative; z-index: 1; background: var(--nb-page) var(--noise); border-radius: 3px 8px 8px 3px; padding: 18px 16px 8px 22px;
  box-shadow: 0 1px 1px rgba(60,40,20,.06), 0 10px 26px rgba(80,60,40,.14), inset 14px 0 18px -14px rgba(80,60,40,.22); animation: sheetIn .28s ease; }
.nb-page::after { /* 邊緣厚度 */ content: ""; position: absolute; inset: auto 3px -4px 5px; height: 5px; background: #efe5dc; border-radius: 0 0 6px 4px; z-index: -1; box-shadow: 0 2px 3px rgba(60,40,20,.1); }
.deco-clip { position: absolute; left: -10px; top: -14px; width: 54px; transform: rotate(-8deg); z-index: 2; -webkit-mask: radial-gradient(ellipse 50% 50%, #000 70%, transparent 100%); mask: radial-gradient(ellipse 50% 50%, #000 70%, transparent 100%); }
.nb-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid rgba(62,58,54,.25); }
.hand-title { margin: 14px 0 6px; font-weight: 500; font-size: 20px; letter-spacing: .12em; color: var(--mist); font-style: italic; }
.hand-title svg { display: block; width: 150px; height: 9px; margin-top: 2px; }
.tl { list-style: none; margin: 4px 0 0; padding: 0; }
.tl-stop { position: relative; padding: 11px 2px 11px; border-bottom: 1px dashed rgba(62,58,54,.22); }
.tl-row { display: flex; align-items: baseline; gap: 12px; }
.tl-row time { font-family: var(--mono); font-size: 13px; color: var(--ink); flex: none; width: 42px; }
.tl-row h3 { margin: 0; font-size: 16.5px; font-weight: 500; letter-spacing: .04em; }
.tl-stop .meta, .tl-stop .addr, .tl-stop .note { margin-left: 54px; }
.tl-stop .note { background: rgba(201,203,183,.38) var(--noise); border-left: 0; border-radius: 2px; }
.tl-stop.next { margin: 6px -6px 8px; padding: 26px 12px 12px; background: #fdf8f3 var(--noise); border: 1.4px dotted rgba(91,124,184,.55); border-radius: 4px; box-shadow: 0 3px 8px rgba(80,60,40,.10); }
.tl-stop.next .tag-next { position: absolute; left: 10px; top: -9px; font-family: Georgia, var(--serif); font-size: 13px; padding: 1px 12px; transform: rotate(-3deg); }
.tl-stop.next .stripes { position: absolute; right: 12px; top: 8px; width: 70px; height: 9px; background: repeating-linear-gradient(115deg, rgba(91,124,184,.45) 0 5px, transparent 5px 10px); }
.tl-leg { font-family: var(--mono); font-size: 11px; color: var(--mist); padding: 5px 0 5px 56px; position: relative; }
.tl-leg::before { content: ""; position: absolute; left: 22px; top: 3px; bottom: 3px; border-left: 1.4px dotted var(--mist); }
.addr button { background: transparent; }
.nb-foot { display: flex; align-items: flex-end; justify-content: flex-end; gap: 0; margin-top: 8px; opacity: .92; }
.nb-foot .spr { width: 34%; -webkit-mask: radial-gradient(ellipse 52% 55% at 50% 55%, #000 65%, transparent 100%); mask: radial-gradient(ellipse 52% 55% at 50% 55%, #000 65%, transparent 100%); }
.nb-foot .spr + .spr { width: 30%; margin-left: -4%; }

/* ---- 手帳 DIY ---- */
.spread .pg { background-color: var(--nb-page); }
.spread .pg.l { background-image: linear-gradient(90deg, transparent 86%, rgba(80,60,40,.16)), var(--noise); }
.spread .pg.r { background-image: linear-gradient(90deg, rgba(80,60,40,.18), transparent 14%), radial-gradient(rgba(91,124,184,.14) 1px, transparent 1.3px), var(--noise); background-size: auto, 11px 11px, auto; }
.spread .pg.cover { background-color: #3f5577; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px), var(--noise); }
.spread-wrap { position: relative; }
.spread-wrap .deco-ticket { left: 14px; top: 0; width: 30%; z-index: 0; }
.spread-wrap .spread { z-index: 1; }
.toolbar button { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; border: 0; background: #fdf8f3 var(--noise); box-shadow: 0 1px 3px rgba(60,40,20,.18); border-radius: 2px; padding: 7px 11px; }
.toolbar button.primary { background: var(--mist) var(--noise); color: #fff; transform: rotate(-1.5deg); }
.toolbar .tip { font-family: var(--mono); font-size: 11px; }
.thumb { background: #fdf8f3; box-shadow: 0 1px 2px rgba(60,40,20,.15); border: 0; }
.seg.layouts button.on .thumb { box-shadow: 0 0 0 1.5px var(--mist), 0 1px 2px rgba(60,40,20,.15); }
.controls h4 { font-family: var(--mono); letter-spacing: .12em; }
.head h1 { font-family: var(--serif); }

/* ---- 電子手帳（展示） ---- */
.flip { background: var(--paper); }
.nb-wrap { padding-top: 46px; }
.deco-pvg { width: 50%; top: 2px; -webkit-mask: linear-gradient(#000 78%, transparent); mask: linear-gradient(#000 78%, transparent); }
.deco-ticket { width: 40%; top: 0; -webkit-mask: linear-gradient(#000 78%, transparent); mask: linear-gradient(#000 78%, transparent); }
.deco-clip { left: -12px; top: -26px; width: 50px; }
.nb-top { padding-left: 22px; }

/* ================= 首頁右頁：旅程階段（出發前／旅途中／結束後） ================= */
.home { container-type: inline-size; }
.ov { position: absolute; display: block; background: #faefe9; color: var(--ink); text-align: left; text-decoration: none; }
.ov svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.3; vertical-align: -.15em; margin-right: .45em; }
/* NEXT 卡片內文 */
.ov-next { background: #faf0e9; padding: .6cqw .4cqw; display: flex; flex-direction: column; justify-content: space-between; }
.ov-next b { font-weight: 600; font-size: 2.9cqw; letter-spacing: .06em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-next span { font-family: var(--mono); font-size: 1.75cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 清單區 */
.ov-list { padding: 0 1.4cqw 0 .6cqw; }
.ov-h, .ov-h2 button { font-family: var(--serif); font-style: italic; font-size: 3cqw; letter-spacing: .14em; color: var(--mist); }
.ov-h { display: block; padding: .5cqw 0 .2cqw 2.6cqw; border-bottom: 1.4px solid rgba(91,124,184,.7); width: 64%; }
.ov-h small, .ov-h2 small { font-family: var(--mono); font-style: normal; font-size: 1.5cqw; letter-spacing: .05em; color: var(--ink-soft); margin-left: 1.2cqw; }
.ov-h2 { display: flex; align-items: baseline; gap: 2.4cqw; padding: .4cqw 0 .3cqw 1.2cqw; border-bottom: 1.2px solid rgba(91,124,184,.35); }
.ov-h2 button { padding: 0; opacity: .45; font-size: 2.6cqw; position: relative; }
.ov-h2 button.on { opacity: 1; font-size: 3cqw; }
.ov-h2 button.on::after { content: ""; position: absolute; left: 0; right: 10%; bottom: -.5cqw; height: 1.6px; background: var(--mist); border-radius: 2px; }
.ov-h2 small { margin-left: auto; }
.ov-row { display: flex; align-items: center; width: 100%; height: 4.67cqw; gap: 2.4cqw; padding-left: 1.6cqw; border-bottom: 1px solid rgba(62,58,54,.12); font-family: var(--serif); font-size: 2.35cqw; letter-spacing: .04em; text-align: left; }
.ov-row .box { width: 2.3cqw; height: 2.3cqw; border-width: 1.6px; font-size: 2.3cqw; }
.ov-row .label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-row i { font-style: normal; color: var(--ink); font-size: 2.6cqw; margin-right: .8cqw; }
.ov-row.done .label { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--mist); }
.ov-more { background: #fbf0ea; font-family: var(--serif); font-style: italic; font-size: 2.2cqw; letter-spacing: .08em; text-align: right; padding-right: 2cqw; display: flex; align-items: center; justify-content: flex-end; gap: 1.2cqw; }
.pdots { display: inline-flex; gap: .8cqw; margin-right: auto; padding-left: 2cqw; }
.pdots i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: rgba(91,124,184,.3); }
.pdots i.on { background: var(--mist); }
/* 今天的回憶 */
.mem-strip { display: flex; gap: 1.4cqw; padding: 1.4cqw 0 .8cqw 1.4cqw; }
.mem-th, .mem-add { position: relative; width: 7.6cqw; aspect-ratio: 1; background: #fff; padding: .5cqw; box-shadow: 0 1px 2px rgba(60,40,20,.2); flex: none; overflow: hidden; }
.mem-th img, .mem-th video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mem-th .vt { position: absolute; right: .6cqw; bottom: .4cqw; font-size: 1.5cqw; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.6); }
.mem-add { background: transparent; box-shadow: none; border: 1.4px dashed rgba(91,124,184,.6); color: var(--mist); font-size: 2.8cqw; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mem-add small { font-size: 1.4cqw; margin-top: .3cqw; font-family: var(--mono); }
.mem-line { display: block; width: 100%; text-align: left; padding: .4cqw 0 0 1.6cqw; font-family: var(--serif); font-size: 2.1cqw; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-panel .mem-scroll { flex: 1; overflow-y: auto; scrollbar-width: none; }
.mem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 0; }
.mem-grid .mem-th, .mem-grid .mem-add { width: auto; }
.mem-grid .mem-add small { font-size: 9px; }
.mem-grid .mem-add { font-size: 18px; }
.mem-write { display: flex; gap: 4px; margin: 4px 0; }
.mem-write input { flex: 1; min-width: 0; font: inherit; font-size: 12px; border: 0; border-bottom: 1px dashed var(--mist); background: transparent; padding: 3px 2px; color: var(--ink); }
.mem-write button { font-size: 11px; color: #fff; background: var(--mist); border-radius: 2px; padding: 2px 8px; }
.mem-list { list-style: none; padding: 0; margin: 0; font-size: .9em; }
.mem-list li { padding: .25em 0; border-bottom: 1px dashed var(--line); }
.mem-list b { font-family: var(--mono); font-weight: 400; color: var(--ink-soft); margin-right: .6em; font-size: .85em; }
/* 結束後：旅途回顧 */
.ov-recap { display: flex; flex-direction: column; align-items: flex-start; }
.ov-recap p { margin: 1.6cqw 0 1.2cqw 2.6cqw; font-family: var(--mono); font-size: 1.8cqw; color: var(--ink); }
.ov-play { margin-left: 2.6cqw; font-size: 2.4cqw; letter-spacing: .1em; color: #fff; background: var(--mist) var(--noise); padding: 1cqw 2.4cqw; border-radius: 2px; transform: rotate(-1.5deg); box-shadow: 0 1px 3px rgba(60,40,20,.2); }
.ov-link { margin: 1.4cqw 0 0 2.6cqw; font-family: var(--serif); font-style: italic; font-size: 2.2cqw; color: var(--mist); }
/* 原型預覽切換 */
.phase-switch { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 2px 0 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); flex-wrap: wrap; }
.phase-switch span { margin-right: 4px; }
.phase-switch button { padding: 4px 7px; border: 1px dashed transparent; border-radius: 3px; font-size: 11.5px; color: var(--ink-soft); }
.phase-switch button.on { color: var(--mist); border-color: var(--mist); }
.ov-h2 { white-space: nowrap; gap: 2cqw; padding: .3cqw 0 .2cqw 1.2cqw; }
.ov-h2 button { font-size: 2.2cqw; letter-spacing: .06em; white-space: nowrap; }
.ov-h2 button.on { font-size: 2.6cqw; }
.ov-h2 small { white-space: nowrap; font-size: 1.4cqw; }
.ov-next { -webkit-mask: linear-gradient(90deg, #000 90%, transparent); mask: linear-gradient(90deg, #000 90%, transparent); }
.ov-list .ov-row { height: 4.3cqw; }
.ov-next { -webkit-mask: none; mask: none; clip-path: polygon(0 0, 100% 0, 100% 44%, 87% 44%, 87% 100%, 0 100%); padding-right: 14%; }
.ov-next b { padding-right: 0; }
.ov-next { padding-right: .4cqw; }
.ov-next b { padding-right: 9%; }
.ov-next span { max-width: 86%; font-size: 1.6cqw; }

/* ---- 手帳 DIY：每天切換＋回憶素材 ---- */
.book-head { padding-top: 16px; }
.book-head .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-soft); }
.book-head .dayline .dl { font-size: 11px; }
.pic.empty { background: rgba(255,255,255,.35); outline: 1.5px dashed var(--mist-light); outline-offset: -1px; display: flex; align-items: center; justify-content: center; font-size: clamp(7px, 2vw, 11px); color: var(--ink-soft); }
.el.photo.is-empty { background: transparent; box-shadow: none; }
.el.photo.is-empty .cap { color: var(--ink-soft); }
.tray { margin: 10px 14px 0; padding: 10px 12px 8px; background: #fdf8f3 var(--noise); border-radius: 3px; box-shadow: 0 1px 3px rgba(60,40,20,.12); }
.tray h4 { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 15px; letter-spacing: .12em; color: var(--mist); }
.tray h4 small { font-family: var(--mono); font-style: normal; font-size: 10.5px; letter-spacing: .04em; color: var(--ink-soft); margin-left: 8px; }
.tray-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.tray-row .mem-th { width: 54px; padding: 3px; }
.tray-row .mem-th.placed { opacity: .55; }
.tray-row .mem-th .in { position: absolute; right: 3px; top: 2px; font-size: 11px; color: #fff; background: var(--mist); border-radius: 50%; width: 15px; height: 15px; line-height: 15px; text-align: center; }
.tray .mem-list { font-size: 12.5px; }
.tray-tip { margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-soft); }
.controls h4 small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--mist); margin-left: 8px; }
.seg.layouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ================= 手帳：文字、清單、貼紙、塗鴉、紙膠帶、圖片、畫筆 ================= */
:root { --hand-tc: "LXGW WenKai TC", "Noto Serif TC", "PMingLiU", serif; }
.spread { container-type: inline-size; }
.el.x { z-index: 3; }
.el.x .xin { width: 100%; height: 100%; position: relative; container-type: inline-size; }
.el.x img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.el.x svg { width: 100%; height: 100%; display: block; overflow: visible; }
.x-text .xt { position: relative; font-family: var(--hand-tc); color: var(--ink); line-height: 1.55; white-space: normal; word-break: break-all; overflow: hidden; height: 100%; }
/* 愛心蕾絲紙 */
.paper-heart .doily { position: absolute; inset: 0; filter: drop-shadow(0 1.5px 2px rgba(80,50,40,.18)); }
.paper-heart .xt { padding: 22% 16% 22%; text-align: center; font-size: 7.4cqw; display: flex; align-items: flex-start; justify-content: center; }
/* 橫線紙（上緣撕邊） */
.paper-lined .xin { background: #fffdf9 repeating-linear-gradient(transparent 0 calc(11cqw - 1px), rgba(91,124,184,.28) calc(11cqw - 1px) 11cqw); background-position: 0 6cqw; box-shadow: 0 2px 4px rgba(60,40,20,.16); }
.paper-lined .xin::before { content: ""; position: absolute; left: 12%; top: 0; bottom: 0; border-left: 1px solid rgba(233,140,168,.55); }
.paper-lined .xt { padding: 10cqw 7% 4% 17%; font-size: 7cqw; line-height: 11cqw; }
/* 便利貼（下緣撕邊） */
.paper-note .xin { background: #fbe3ea; box-shadow: 0 3px 5px rgba(60,40,20,.15); }
.paper-note .xin::before { content: ""; position: absolute; left: 30%; top: -4%; width: 40%; height: 14%; background: rgba(201,213,234,.75); transform: rotate(-3deg); }
.paper-note .xt { padding: 18% 10% 10%; font-size: 9cqw; }
/* 票根 */
.paper-ticket .xin { background: var(--sage); border-radius: 2px;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 7cqw, #000 7.5cqw) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7cqw, #000 7.5cqw) right/51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 7cqw, #000 7.5cqw) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7cqw, #000 7.5cqw) right/51% 100% no-repeat; }
.paper-ticket .xin::after { content: ""; position: absolute; right: 22%; top: 12%; bottom: 12%; border-left: 1.5px dashed rgba(62,58,54,.45); }
.paper-ticket .xt { padding: 6% 28% 6% 12%; font-size: 8cqw; display: flex; align-items: center; color: #3f4132; }
/* 大標題 */
.paper-title .xt { font-family: Georgia, var(--hand-tc); font-weight: 700; font-style: italic; font-size: 15cqw; letter-spacing: .06em; line-height: 1; display: flex; align-items: center; justify-content: center; white-space: nowrap;
  text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0 3px 4px rgba(60,40,20,.2); }
/* 清單（像 PLAYLIST 那頁） */
.x-list .xin { display: flex; background: #fffdf9; box-shadow: 0 2px 5px rgba(60,40,20,.18); }
.lst-band { flex: none; width: 15%; background: var(--wine); color: #f6c9d6; writing-mode: vertical-rl; font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 7cqw; letter-spacing: .12em; display: flex; align-items: center; justify-content: center; }
.lst-body { flex: 1; padding: 8% 7% 6%; display: flex; flex-direction: column; min-width: 0; }
.lst-body h6 { margin: 0 0 4%; font-family: var(--hand-tc); font-size: 11cqw; font-weight: 700; color: var(--ink); letter-spacing: .1em; border-bottom: 2px solid var(--ink); padding-bottom: 2%; }
.lst-body ol { list-style: none; margin: 0; padding: 0; flex: 1; font-family: var(--hand-tc); font-size: 7.2cqw; line-height: 1.5; counter-reset: li; overflow: hidden; }
.lst-body li { counter-increment: li; padding: 2.5% 0; border-bottom: 1px dashed rgba(62,58,54,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst-body li::before { content: counter(li, decimal-leading-zero) "  "; font-family: var(--mono); font-size: .8em; color: var(--mist); }
.barcode { height: 9%; margin-top: 4%; background: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 3px, var(--ink) 3px 5px, transparent 5px 6.5px, var(--ink) 6.5px 7px, transparent 7px 9px); opacity: .85; }
/* 紙膠帶 */
.x-tape .tp, .sw.x-tape .tp { position: absolute; inset: 0; opacity: .82; }
.tape-mist .tp { background: rgba(140,165,210,.75); }
.tape-pink .tp { background: repeating-linear-gradient(90deg, rgba(246,201,214,.9) 0 8%, rgba(255,240,244,.9) 8% 16%); }
.tape-wine .tp { background: radial-gradient(circle, rgba(255,255,255,.75) 18%, transparent 20%) 0 0/14% 50%, rgba(155,74,90,.78); }
.tape-grid .tp { background: linear-gradient(rgba(91,124,184,.35) 1px, transparent 1px) 0 0/10% 25%, linear-gradient(90deg, rgba(91,124,184,.35) 1px, transparent 1px) 0 0/10% 25%, rgba(251,244,238,.92); }
/* 剪下來的插畫（自動白邊） */
.x-image .cut { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 3px rgba(60,40,20,.25)); }
/* 文字拼貼頁底紙 */
.spread.text-page.bg-lined .pg { background-image: repeating-linear-gradient(transparent 0 calc(3.2cqw - 1px), rgba(91,124,184,.22) calc(3.2cqw - 1px) 3.2cqw), var(--noise); background-size: auto, auto; background-color: #fffdf9; }
.spread.text-page.bg-lined .pg.l::before { content: ""; position: absolute; left: 10%; top: 0; bottom: 0; border-left: 1px solid rgba(233,140,168,.5); }
.spread.text-page.bg-grid .pg { background-image: linear-gradient(rgba(91,124,184,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(91,124,184,.18) 1px, transparent 1px), var(--noise); background-size: 2.6cqw 2.6cqw, 2.6cqw 2.6cqw, auto; background-color: #fffdf9; }
.spread.text-page.bg-dot .pg { background-image: radial-gradient(rgba(91,124,184,.3) 1px, transparent 1.4px), var(--noise); background-size: 2.4cqw 2.4cqw, auto; }
.spread.text-page.bg-plain .pg { background-image: var(--noise); background-size: auto; }
.spread.text-page .pg.l { box-shadow: inset -14px 0 16px -14px rgba(80,60,40,.25), 0 10px 24px rgba(80,60,40,.13); }
.spread.text-page .pg.r { box-shadow: inset 14px 0 16px -14px rgba(80,60,40,.25), 0 10px 24px rgba(80,60,40,.13); }
/* 照片頁／文字頁切換 */
.pageswitch { display: flex; justify-content: center; gap: 6px; margin: 8px 0 -4px; }
.pageswitch button { font-family: var(--serif); font-size: 13px; letter-spacing: .1em; padding: 5px 12px; color: var(--ink-soft); border-bottom: 2px solid transparent; }
.pageswitch button.on { color: var(--mist); border-bottom-color: var(--mist); }
.pageswitch button[data-act=addpage] { color: var(--wine); font-style: italic; }
/* 畫筆 */
.spread-wrap { position: relative; }
.penlayer { position: absolute; top: 14px; left: 10px; right: 10px; aspect-ratio: 1.22; z-index: 20; touch-action: none; cursor: crosshair; outline: 2px dashed rgba(91,124,184,.5); outline-offset: 2px; }
.penlayer svg { width: 100%; height: 100%; display: block; }
.toolbar .pc { width: 24px; height: 24px; padding: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.2); }
.toolbar .pc.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
/* 加入面板、文字編輯 */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(40,36,34,.35); display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .15s ease; }
.sheet-box { width: 100%; max-width: 440px; max-height: 82vh; overflow-y: auto; background: var(--paper) var(--noise); border-radius: 14px 14px 0 0; padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,0,0,.15); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sheet-head b { font-size: 16px; letter-spacing: .2em; }
.sheet-head button { font-size: 14px; padding: 6px 4px; color: var(--ink-soft); }
.sheet-box h5 { margin: 12px 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--mist); font-weight: 400; }
.pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pick button { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; padding: 6px 2px; font-size: 11px; border-radius: 6px; background: #fdf8f3; box-shadow: 0 1px 2px rgba(60,40,20,.12); }
.pick button.on { box-shadow: 0 0 0 2px var(--mist); }
.pick img, .pick svg { width: 38px; height: 38px; object-fit: contain; }
.pick .sw { display: block; width: 40px; height: 32px; position: relative; border-radius: 2px; overflow: hidden; }
.paper-sw-heart { background: #f6c9d6; clip-path: path("M20 30 C8 22 2 16 3 9 C4 3 12 1 20 8 C28 1 36 3 37 9 C38 16 32 22 20 30 Z"); }
.paper-sw-lined { background: #fffdf9 repeating-linear-gradient(transparent 0 6px, rgba(91,124,184,.35) 6px 7px); box-shadow: inset 0 0 0 1px #eee; }
.paper-sw-note { background: #fbe3ea; }
.paper-sw-ticket { background: var(--sage); }
.paper-sw-title { background: #fff; }
.paper-sw-title::after { content: "Aa"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: italic 700 16px Georgia, serif; color: var(--mist); }
.paper-sw-list { background: linear-gradient(90deg, var(--wine) 0 22%, #fffdf9 22%); box-shadow: inset 0 0 0 1px #eee; }
.sw-img { background: #fff; border: 1.5px dashed var(--mist); color: var(--mist); font-size: 18px; display: flex !important; align-items: center; justify-content: center; }
.sheet-tip { font-size: 11.5px; color: var(--ink-soft); margin: 10px 0 0; }
.te-title, .te-body { width: 100%; font-family: var(--hand-tc); font-size: 16px; color: var(--ink); background: #fffdf9; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; margin-top: 8px; }
.te-ok { display: block; width: 100%; margin-top: 10px; padding: 10px; background: var(--mist) var(--noise); color: #fff; font-size: 15px; letter-spacing: .3em; border-radius: 4px; }
/* 手寫字體也用在短記 */
.memo { font-family: var(--hand-tc); }
.seg.tlayouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.seg.tlayouts button { font-size: 12.5px; padding: 6px 0 7px; white-space: nowrap; }
.seg .dice { margin: 6px 0 2px; padding: 8px 16px; font-size: 14px; letter-spacing: .1em; color: #fff; background: var(--wine) var(--noise); border-radius: 3px; transform: rotate(-1deg); box-shadow: 0 1px 3px rgba(60,40,20,.2); }
.seg .dice.on::after { display: none; }