@charset "utf-8";
/* =============================================================
新絲路網路書店 首頁專屬樣式 (home.css)
-------------------------------------------------------------
載入位置：只在 Silkbook/index.asp 的 以 引入。
覆蓋方式：全部選擇器以 #sb-home 前綴，靠 ID 權重穩壓 css.css
的裸 class（如 .pic / .title2），不靠載入順序。
安全原則：
1. 只用 box-shadow / border-radius / transform / 顏色 等
「不觸發 reflow」的屬性，絕不改動 950px 表格版面尺寸。
2. 不修改 css.css（全站 1491 檔共用），不影響其他頁面。
3. IE / 相容模式不支援的屬性會被忽略 → 自動退回原樣
（漸進增強，不會破版）。
Phase 1：書封卡片化 + 區塊標題一致化。
Phase 2（待辦）：左欄彩虹按鈕重繪統一（需換圖，另案討論）。
建立日期：2026-06-10
============================================================= */
/* ---------- 1. 書封卡片化（最有感的「書店感」） ----------
書封 ![]()
為固定 100x135。
只用 box-shadow 當外框＋陰影、border-radius 圓角，
不加 padding/border 以避免改變盒模型尺寸（零位移）。 */
#sb-home img.pic {
background: #ffffff;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), /* 細邊框感 */
0 1px 4px rgba(0, 0, 0, .12); /* 浮起陰影 */
transition: box-shadow .15s ease, transform .15s ease;
}
/* 連結外框也叫 .pic，設為 inline-block 讓 hover 範圍正確、消除圖片底縫 */
#sb-home a.pic {
display: inline-block;
line-height: 0;
}
/* 滑鼠移上去：書封微微浮起＋陰影加深（transform 不會 reflow） */
#sb-home a.pic:hover img.pic {
box-shadow: 0 0 0 1px rgba(0, 0, 0, .06),
0 6px 16px rgba(0, 0, 0, .22);
transform: translateY(-3px);
}
/* ---------- 2. 區塊／商品標題一致化 ---------- */
#sb-home .title2 {
line-height: 1.5;
}
#sb-home .title2 p {
color: #333333;
}