裁掉，只剩書封後面那一條。
改用絕對定位的 ::before 置中（BG.png 比例 1.5）。 */
.ev-book > a::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 175%;
height: 125%; /* 見上：contain 之下實畫 322×215，寬度才是有效值 */
transform: translate(-50%, -50%);
background: url("../images/book-deco.png") center / contain no-repeat;
pointer-events: none;
}
.ev-book > a img {
display: block;
position: relative; /* 疊在雲朵之上，不用負 z-index（怕被祖先的 stacking context 吃掉） */
z-index: 1;
width: auto; /* 高度吃滿、寬度自適應 → 每本等高，作者才齊平 */
height: 100%;
max-width: 100%;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.25); /* 設計稿「作品陰影」 */
transition: transform 0.25s ease;
}
.ev-book > a:hover img { transform: scale(1.04) rotate(-1.5deg); }
.ev-book h4 {
font-family: var(--ev-font-title);
font-weight: 700;
font-size: 20px;
letter-spacing: 3px;
line-height: 1.4;
color: var(--ev-orange);
/* 最多兩行，超過截字（rakak 2026-08-26）。正式書單 20 本裡有 10 本會換行、
最長 3 行，不截的話卡片高度差到 76px。
line-clamp 至今仍要 -webkit- 前綴＋display:-webkit-box 才會生效，
標準版 line-clamp 先放著等瀏覽器跟上。 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
/* ⚠️ 作者列 2026-08-26 起不顯示（rakak 決定）。樣式留著，之後要恢復直接把
加回 markup 即可。
margin-top: auto 是重點：grid 一排會拉成等高，把作者壓到卡片底部，同一排的
作者底線就自動對齊，不必替書名預留固定行數。書名現在會截成兩行，但作者本身
也可能換行（#8 五個作者 2 行、#17 十一個作者 3 行），靠預留行數是對不齊的。 */
.ev-author {
margin-top: auto;
padding-top: 6px;
font-size: 16px;
letter-spacing: 1px;
color: var(--ev-green);
}
/* ---------- 活動資訊 / 注意事項共用的圓角列 ---------- */
.ev-pill {
display: block;
padding: 12px 16px;
border: 2px solid var(--ev-yellow);
border-radius: 999px;
background: var(--ev-yellow-bg);
font-size: 15px;
letter-spacing: 1px;
line-height: 1.5;
color: var(--ev-text);
}
/* ---------- 活動資訊 ---------- */
.ev-info { padding: 40px 0 0; }
/* 說明框左右的彩帶（設計稿「彩帶 1」114×316、「彩帶 2」100×316）。
confetti.png 是一張四角彩帶，靠 background-position 取左半／右半。
設計稿只有 desktop 有，故在 1024 以上才顯示。 */
.ev-info-wrap { position: relative; }
.ev-info-wrap::before,
.ev-info-wrap::after {
content: "";
display: none;
position: absolute;
top: 50%;
width: 114px;
height: 316px;
transform: translateY(-50%);
background-image: url("../images/confetti.png");
background-repeat: no-repeat;
background-size: auto 100%; /* 高度填滿 316，露出圖左／右緣的那組彩帶 */
pointer-events: none;
}
.ev-info-wrap::before { left: 0; background-position: left center; }
.ev-info-wrap::after { right: 0; width: 100px; background-position: right center; }
/* 外層寬 899 = 彩帶 114 + 說明欄位 685 + 彩帶 100（設計稿「活動資訊」frame 寬） */
.ev-info-wrap {
max-width: 899px;
margin: 20px auto 0;
padding: 0 12px;
}
.ev-panel {
max-width: 685px; /* 設計稿說明欄位寬 */
margin: 0 auto;
padding: 20px;
border: 2px solid var(--ev-green-line);
border-radius: 16px;
background: var(--ev-paper);
}
.ev-dl dt {
font-family: var(--ev-font-title);
font-weight: 700;
font-size: 18px;
letter-spacing: 3px;
color: var(--ev-green);
margin-bottom: 8px;
}
.ev-dl dd { margin-bottom: 20px; }
.ev-dl dd:last-child { margin-bottom: 0; }
/* ---------- 注意事項 ---------- */
.ev-notes { padding: 40px 0 0; }
.ev-notelist {
max-width: 685px;
margin: 40px auto 0;
padding: 0 12px;
}
.ev-notelist li + li { margin-top: 12px; }
/* ---------- footer ---------- */
/* ⚠️ 這一區踩過三次，依序記著：
1) footer-deco.png 的**上半 260/552（47%）是透明的**——波浪就是靠那片透明形成的。
所以底色**絕對不能設在 .ev-footer 上**，那會從透明處透出來把波浪填平成一塊黃。
底色只給文字區（見下面的 .ev-footer p）。
2) 圖的黃色其實鋪到 y=520（實測 92% 黃），只有最底 1~2px 是透明邊。
先前取樣取到 y=540 那條邊，誤判成「底部沒有黃、要補底色」。
3) 「間隔 -10」是**文字區與裝飾帶**的關係，不是 footer 與上方內容：
設計稿 footer 1（裝飾帶）y=0 高 281.5、footer（文字區）y=271.5 → 重疊 10px。
一度做成整個 footer 上移，黃底把注意事項最後一條 pill 蓋掉。 */
.ev-footer {
margin-top: 8px;
}
.ev-footer::before {
content: "";
display: block;
height: 86px;
background: url("../images/footer-deco.png") center bottom / cover no-repeat;
}
.ev-footer p {
/* 文字區才是要黃底的那一塊：裝飾圖只到 281，文字區 86px 高只有上緣 10px
疊在圖的黃色上，其餘會露白。色值取自設計稿實測 #FFE958（與 header 同色）。
滿版寬會排成一行，所以限 808（設計稿 desktop 文字寬）——但底色要滿版，
因此寬度限制交給內距、背景鋪在整條上。 */
background: #FFE958;
/* 往上疊 10px 貼住裝飾帶（設計稿 271.5 對 281.5）；position 讓它蓋在圖上面 */
position: relative;
margin: -10px 0 0;
/* 設計稿文字區 96 高，拆開是 padding 上 16 ／ 文字 48（兩行 × 24）／ 下 32
——上下不對稱。用對稱的 16/16 加 line-height 26 會變成 84，少 12px。 */
padding-top: 16px;
padding-bottom: 32px;
padding-left: max(12px, calc((100% - 808px) / 2));
padding-right: max(12px, calc((100% - 808px) / 2));
font-size: 12px;
line-height: 24px;
letter-spacing: 0.5px;
text-align: center;
color: var(--ev-text-mute);
}
/* ==========================================================================
斷點：設計稿 390 / 744 / 1280
========================================================================== */
@media (min-width: 744px) {
.ev-books { padding-top: 80px; }
.ev-info { padding-top: 80px; }
.ev-notes { padding-top: 80px; }
.ev-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px 0; /* 設計稿 tablet 排距 322 − 卡片 310 */
padding-top: 40px; /* 設計稿 173 − 標題 133 */
}
/* 2 欄之下，落單的最後一本跨欄居中（設計稿 tablet 的第 9 本 30:888 x=197 就是這個）。
⚠️ 寫成 :last-child:nth-child(odd) 而不是寫死 nth-child(9)——書單本數會換。
現行書單 20 本是偶數，這條不會生效。 */
.ev-book:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ev-pill { font-size: 16px; letter-spacing: 2px; }
.ev-panel { padding: 40px; }
.ev-dl dt { font-size: 22px; letter-spacing: 4px; }
.ev-footer::before { height: 164px; }
.ev-footer p { font-size: 13px; }
}
@media (min-width: 1024px) {
.ev-books { padding-top: 80px; }
.ev-books .ev-h2 img { width: 401px; } /* 設計稿 desktop 401×133 */
/* padding 歸零，1050 ÷ 3 = 350，與設計稿卡片寬一致 */
.ev-grid {
grid-template-columns: repeat(3, 1fr);
gap: 40px 0; /* 設計稿 desktop 排距 350 − 卡片 310 */
padding-left: 0;
padding-right: 0;
}
/* 3 欄之下不需要 tablet 那條跨欄 */
.ev-book:last-child:nth-child(odd) { grid-column: auto; }
.ev-pill { font-size: 18px; letter-spacing: 3px; padding: 14px 24px; }
.ev-dl dt { font-size: 24px; letter-spacing: 5px; }
.ev-info-wrap::before,
.ev-info-wrap::after { display: block; }
.ev-footer::before { height: 281px; }
}
/* ==========================================================================
「全套加入購物車」（設計稿 CART variant，node 17:591）2026-08-21 決定不做。
理由：這頁的 mobile header 照設計稿只有 logo ＋ 漢堡，做不出跨斷點一致的
加入回饋（數字／動畫只有桌機看得到，而主要流量在手機）。購物車入口改成
只在 header 放一顆 icon ＋ 數量徽章，兩個斷點都有。
按鈕的切圖 images/btn-cart.png 留著沒引用；結局判定那層抽到
~/papy/cart-add-outcome/（本機共用，這頁已不引用）。
========================================================================== */