/**
 * print/printStyles.css
 * ------------------------------------------------------------
 * 🖨️ 印刷模式（Print Mode）樣式表。
 *
 * 與既有 App 畫面（Tailwind utility classes）完全獨立，全部使用
 * .print-xxxx 命名，不與既有 UI 樣式互相污染、也不修改任何既有 class。
 *
 * 本檔案分成兩部分：
 *   1. 一般樣式（無 @media 包裹）：切換到「印刷版」時，在螢幕上
 *      直接可捲動閱讀整本手冊，這是平常預覽用的樣子。
 *   2. @media print：只在使用者按下「列印／另存 PDF」、瀏覽器真正
 *      進入列印流程時才生效，負責隱藏 App 外殼（導覽列、設定按鈕等），
 *      只留下印刷手冊本體。螢幕預覽不受這段影響。
 * ============================================================
 */

/* ── 小冊子列印（Booklet）版面最佳化：A4 頁面留白 ──────────────
   @page 只會在瀏覽器實際分頁列印／輸出 PDF 時生效，不影響螢幕上的
   一般模式或印刷版預覽畫面。明確指定 A4 尺寸與較精簡的留白，避免
   沿用瀏覽器預設的留白（部分瀏覽器預設留白偏大，縮印成 A5 小冊子
   後會讓內容顯得更空、行數更少）。

   本次微調（v12）：由於後續僅用影印店「小冊子列印」對折＋中間釘書機
   裝訂、不做裁切，故：
   - 上／下留白由 12mm 再收斂為 9mm（仍保留基本安全距離，避免內容
     貼近紙張邊緣，同時提高每頁可利用的直向空間）。
   - 左／右邊界不再單純縮小成對稱數值，而是改用 @page :left／:right
     區分「裝訂摺線側（內側）」與「外側」：內側維持原本 10mm 的
     舒適留白，避免文字或圖片太靠近摺線；外側則收斂到 7mm，提高
     版面利用率。裝訂後書本呈現「單數頁（右頁）摺線在左、雙數頁
     （左頁）摺線在右」，故以下分別針對 :right／:left 設定
     margin-left／margin-right。
   - 若最終輸出的瀏覽器／PDF 引擎不支援 @page :left／:right，會
     自動 fallback 到下方 margin: 9mm 8mm 的通用值（上下 9mm、
     左右 8mm），仍比原本更精簡但不影響裝訂安全距離。 */
@page {
    size: A4;
    margin: 9mm 8mm;
}
@page :right {
    margin-left: 10mm;
    margin-right: 7mm;
}
@page :left {
    margin-left: 7mm;
    margin-right: 10mm;
}

/* ── 螢幕預覽樣式（平常瀏覽印刷版時看到的樣子）───────────────── */

.print-day-page {
    background: #fff;
    color: #222;
    border: 1px solid #ddd;
    border-radius: 6px;
    /* v13 出版前校稿：上下內距由 10px 收斂為 6px。此內距只出現在每一天
       內容流的最開頭（Day 標題上方）與最結尾（最後一張卡片下方，即下一次
       page-break-after: always 換頁之前），與 @page 的頁面留白（見上方
       @page 規則）功能重疊，屬於可再收斂的「頁首／頁尾留白過多」。
       左右內距維持 10px 不變，避免影響版面左右安全距離。 */
    padding: 6px 10px;
    margin-bottom: 16px;
    page-break-after: always; /* 一天固定一頁，不做 auto pagination，保留每日留白 */
}

.print-day-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    border-bottom: 2px solid #333;
    padding: 6px 0 8px;
    margin-bottom: 10px; /* v13 校稿：12px→10px，減少頁首（標題下方）多餘留白 */
}
.print-day-label { font-size: 22px; font-weight: 800; }
.print-day-date { font-size: 14px; color: #555; }
.print-day-title { font-size: 18px; font-weight: 800; }

.print-today-alert { margin-bottom: 6px; } /* v13 校稿：8px→6px，微幅收斂 */

.print-section { margin-top: 8px; }
.print-section-title {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    border-left: 4px solid #888;
    padding-left: 6px;
    margin-bottom: 5px;
}
/* 今日景點和活動／今日美食：標題加大加粗、上下留白加大，更醒目 */
.print-section-title-emphasis {
    font-size: 17px;
    font-weight: 800;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 6px;
}
/* 今日景點和活動／今日美食：完成「今日交通」後，不再強制從新的一頁開始，
   直接接續在同一內容流中；改以比一般 .print-section（margin-top: 8px）
   更大的上邊界留白，做出「章節切換」的視覺區隔，同時避免產生大量空白頁、
   提高小冊子列印時的版面利用率。
   套用時機（由呼叫端決定，見 printRenderer.js renderPrintGuideCardSection()）：
   - 當天有景點資料：套用在緊接在「今日交通」後方的「今日景點和活動」。
   - 當天無景點資料：改套用在「今日美食」（此時它直接緊接在「今日交通」
     後方，取代原本會套用在「今日景點和活動」的留白）。
   若目前頁面剩餘空間不足以容納下一區塊，則交由瀏覽器依自然分頁機制換頁，
   本 class 不宣告任何 page-break / break 屬性 */
.print-section-gap-large {
    margin-top: 20px; /* v13 校稿：26px→20px，仍明顯大於一般 .print-section 的 8px、
                          保留章節切換的視覺區隔，同時減少過多留白、提高版面利用率 */
}

/* 今日交通 */
.print-transport-segment {
    border-left: 3px solid #999;
    padding-left: 8px;
    margin: 6px 0;
    font-size: 11px;
    line-height: 1.6;
}
.print-transport-route { font-weight: bold; }
.print-transport-mode,
.print-transport-meta,
.print-transport-note { color: #444; }

/* 今日行程：與一般模式相同的樹狀時間軸（.guide-day-content 為 app.js
   renderGuideDayContent() 既有輸出的容器 class，直接沿用不修改），
   印刷版僅隱藏節點旁的「導航」按鈕（.func-btn，由既有 renderNavButton()
   產生），其餘卡片樣式與階層縮排完全比照一般模式 */
.print-timeline .func-btn { display: none !important; }

/* 景點／美食詳情卡 */
.print-guide-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.print-guide-card {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px;
    break-inside: avoid;
}
.print-guide-image {
    display: block;
    width: 72%;
    /* v14：僅調整照片高度為原本的 95%，寬度（72%）不變。
       原本 aspect-ratio: 4 / 3 → 高度 = 寬度 × 3/4。
       高度 × 0.95 = 寬度 × (3/4 × 0.95) = 寬度 × 2.85/4，
       換算成 aspect-ratio（寬:高）即為 4 / 2.85，等同 80 / 57。
       object-fit: cover、object-position: center 維持不變，
       裁切方式與置中顯示邏輯完全比照原樣，圖片不會變形。 */
    aspect-ratio: 80 / 57;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    margin: 0 auto 4px;
}
.print-guide-name { font-size: 12px; font-weight: bold; margin-bottom: 3px; }
.print-guide-summary,
.print-guide-hours,
.print-guide-stay,
.print-guide-tips {
    font-size: 10.5px;
    color: #444;
    margin-top: 2px;
    line-height: 1.5;
}

/* 今日美食：必吃推薦（僅美食卡片使用） */
.print-guide-items { margin-top: 4px; }
.print-guide-items-label { font-size: 10.5px; font-weight: bold; color: #333; }
.print-guide-items-list {
    font-size: 10.5px;
    color: #444;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* 第一頁：航班資訊 & 喵星人紮營基地（直接沿用一般模式既有元件與資料，
   版面、結構、內容完全比照原樣，僅於印刷版適度放大字體提高紙本閱讀性，
   不重新設計、不影響一般模式畫面） */
.print-cover-page .print-cover-flight h3,
.print-cover-page .print-cover-camp h3 {
    font-size: 16px !important;
}
.print-cover-page .print-cover-flight .text-\[11px\],
.print-cover-page .print-cover-camp .text-\[11px\] {
    font-size: 14px !important;
}
.print-cover-page .print-cover-flight .text-\[9px\],
.print-cover-page .print-cover-camp .text-\[9px\] {
    font-size: 11px !important;
}
.print-cover-page .print-cover-camp .text-\[10px\] {
    font-size: 13px !important;
}

/* 最後一頁：魔法（直接沿用一般模式 #magic-tab 既有元件與資料，版面、結構、
   內容完全比照原樣，僅於印刷版適度放大字體提高紙本閱讀性，不重新設計、
   不影響一般模式畫面）
   v15：頁面下方仍有留白，故在「維持整頁內容仍完整容納於同一頁」的前提下，
   再適度放大標題／內文／條列／步驟文字（僅字體大小，不動任何間距
   margin/padding/space-y、不動圖片、卡片、換頁邏輯）：
     - 主標題（.text-sm，橫幅「Studio Tour Tokyo 影城攻略」）：15px → 17px
     - 各區塊子標題（h4.font-bold，例如「入場前必須知道的重點」
       「限時特展」「限時活動」）：原本無獨立字體大小、直接繼承同層
       .text-xs 容器的字級，本次新增專屬選擇器，讓子標題比內文明顯大一級，
       建立更清楚的標題／內文視覺層級 → 16px
     - 內文與步驟說明（.text-xs，含 9 則入場重點條列、限時活動段落等）：
       13px → 14.5px
     - 條列內容（.text-\[11px\]，含影城必拍場景／必玩體驗清單、
       滿額門檻提示框標題）：13px → 14.5px，與內文同級，維持整頁一致的
       閱讀節奏
     - 次要小字（.text-\[10px\]，橫幅副標題、滿額門檻提示框內文）：
       12px → 13px
   以上數值已考量本頁內容量（9 則提醒＋3 個色塊區塊＋雙欄清單）與換頁
   限制，選擇「明顯感受得到變大、但保留足夠緩衝空間」的放大幅度，
   避免因放大而溢出到第二頁。建議實際列印預覽一次以確認視覺效果與
   換頁狀態，如仍有餘裕可再進一步微調。 */
.print-magic-page .text-sm {
    font-size: 17px !important;
}
.print-magic-page h4.font-bold {
    font-size: 16px !important;
}
.print-magic-page .text-xs {
    font-size: 14.5px !important;
}
.print-magic-page .text-\[10px\] {
    font-size: 13px !important;
}
.print-magic-page .text-\[11px\] {
    font-size: 14.5px !important;
}

/* v16：「Studio Tour Tokyo 影城攻略」頁面 —— 同一區塊內「項目與項目」之間
   的垂直間距微調（僅間距，不動字體、配色、圖示、卡片 padding、區塊與
   區塊之間的距離）。
   三個區塊目前皆用 Tailwind space-y-* 工具類統一控制「標題→第一項」與
   「項目→項目」的間距，若直接調大 space-y-* 本身，會連同「標題與內容
   距離」一起放大，不符合本次「僅調整項目間距」的要求。因此改用更精準
   的選擇器，只鎖定「前面還有另一個項目（不是標題）」的元素，讓標題後方
   第一項的距離維持原樣，只放大同一區塊內項目彼此之間的距離：
     1. 入場前必須知道的重點（9 則提醒，皆為 <p>）：
        原本 space-y-1.5＝6px → 項目間距離放大為 10px
        （h4 → 第 1 則提醒之間的 6px 不受影響）
     2. 限時特展：《霍格華茲邀請函》條列（<ul class="space-y-1"> 內的 4 個 <li>）：
        原本 space-y-1＝4px → 項目間距離放大為 7px
        （此 <ul> 本身不含標題，不影響外層「限時特展」標題與整份清單的距離）
     3. 限時活動：湯姆與傑利的惡作劇慶典（📸拍照點 / 🍦聯名美食 / 滿額門檻
        提示框三個項目）：
        原本 space-y-2＝8px → 項目間距離放大為 12px
        （h4 → 📸拍照點第一項之間的 8px 不受影響）
   以上放大幅度已考量目前頁面留白與先前字體放大後的緩衝空間，維持
   在「整頁仍可完整容納於同一頁」的前提下微調，建議實際列印預覽一次
   確認換頁狀態。 */
.print-magic-page .space-y-1\.5 > p + p {
    margin-top: 10px !important;
}
.print-magic-page .space-y-1 > li ~ li {
    margin-top: 7px !important;
}
.print-magic-page .space-y-2 > p + p,
.print-magic-page .space-y-2 > p + div {
    margin-top: 12px !important;
}

/* 列印模式：隱藏所有操作按鈕與互動元件（例如喵星人紮營基地的「飯店資訊」
   按鈕），僅保留閱讀內容。列印手冊本來就不含任何一般模式的表單輸入元件，
   此規則只作用於 #print-booklet-container 範圍內，不影響一般模式畫面
   （一般模式的原始 DOM、按鈕本身完全未被觸碰）。無論螢幕預覽或實際列印，
   皆一致隱藏，故不放進 @media print 區塊。 */
#print-booklet-container button,
#print-booklet-container input,
#print-booklet-container select,
#print-booklet-container textarea,
#print-booklet-container .print-hide-interactive {
    display: none !important;
}

/* ── 列印專用樣式（只在按下「列印／另存 PDF」時生效）───────────── */
@media print {
    /* 先隱藏整個畫面，再只顯示印刷手冊容器本身，避免印出 App 外殼
       （header／bottom nav／輕鬆模式切換列／設定按鈕等） */
    body * { visibility: hidden; }
    #print-booklet-container,
    #print-booklet-container * { visibility: visible; }
    #print-booklet-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    /* 列印時不需要的元素（例如「列印／另存 PDF」按鈕本身） */
    .no-print { display: none !important; }

    .print-day-page {
        border: none;
        border-radius: 0;
        margin-bottom: 0;
    }

    /* ── 列印排版品質優化（僅控制跨頁行為，不調整任何內容／字體／版面）──
       目的：景點／美食卡片盡量保持完整、不被拆成上下兩頁；
       區塊標題（今日景點和活動／今日美食／今日交通等）
       下方至少保留第一張卡片或第一筆內容，不讓標題單獨留在頁尾；
       卡片內的照片與文字（標題、摘要、營業時間、停留時間、小提醒等）
       維持在同一頁，不上下分離。 */

    /* 讓「今日景點和活動／今日美食／住宿」卡片所在的 Grid 容器本身
       可以跨頁分割（僅容器本身如此宣告，容器內每張卡片仍維持下方
       .print-guide-card 的 break-inside: avoid，不會被拆開）。
       這是為了修正 Day 9 觀察到的現象：部分瀏覽器在列印分頁時，
       可能把整個 .print-guide-cards Grid 容器視為不可分割的整體，
       只要第一列（第一張卡片所在列）放不下，就把「整組」卡片
       （含所有列、所有卡片）一併推到下一頁，而非僅移動放不下的那一列。
       明確宣告容器本身 break-inside: auto／page-break-inside: auto，
       讓瀏覽器改採逐列（row-by-row）判斷是否換頁，同時完全保留現有
       雙欄 Grid 排版（grid-template-columns、卡片尺寸、照片比例等
       版面設定皆未變動）。 */
    .print-guide-cards {
        break-inside: auto;
        page-break-inside: auto;
    }

    /* 景點／美食卡片（二者共用 .print-guide-card），
       整張卡片視為不可分割區塊，空間不足時直接移到下一頁 */
    .print-guide-card {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    /* 卡片內的照片與文字內容各自也不可分割，雙重保險避免照片與文字分離 */
    .print-guide-image,
    .print-guide-body {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    /* 區塊標題避免單獨留在頁尾（僅「今日景點和活動／今日美食」，
       這兩個區塊的 DOM 結構固定為：
         <p class="print-section-title ...">標題</p>
         <div class="print-guide-cards">…卡片…</div>
       標題與卡片容器互為相鄰兄弟節點，故用 :has(+ .print-guide-cards)
       精準只鎖定這兩個標題，不影響「今日交通」「今日行程」等其他
       .print-section-title（它們後面接的不是 .print-guide-cards，
       選擇器不會命中，換頁邏輯維持原樣）。

       這裡改用 break-after: avoid-page 讓瀏覽器「不可在標題後方立即換頁」。
       若目前頁面剩餘空間連「標題＋第一列卡片」都放不下，瀏覽器會把換頁點
       往前移到標題之前，等同標題和它下面的卡片一起被推到下一頁；換頁之後
       .print-guide-cards 仍照原本 break-inside: auto（逐列判斷）＋
       .print-guide-card 的 break-inside: avoid-page（單張卡片不可分割）
       繼續自然分頁，不會把整個區塊剩下的卡片也強制鎖在同一頁。

       先前（v10 之前）曾嘗試過同樣方向的規則，但當時是直接套用在所有
       .print-section-title 上（未區分後面接的是卡片容器還是其他內容），
       在 Day 9 造成非預期的整段推頁而被移除；這次改用 :has() 精準限定
       範圍，只在「標題＋卡片」這個情境下生效，避免同樣的問題重演。
       上一頁最下方可能因此留下一段空白，這是配合本次需求必然的取捨
       （標題不可單獨留在頁尾 > 頁面滿版利用率）。 */
    .print-section-title:has(+ .print-guide-cards) {
        break-after: avoid-page;
        page-break-after: avoid;
    }

    /* Day 頁首（Day／日期／標題列）同理，避免與下方內容分離 */
    .print-day-header {
        break-after: avoid-page;
        page-break-after: avoid;
    }

    /* 今日交通：每段交通資訊視為一個不可分割區塊 */
    .print-transport-segment {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }
}