/* 小冊子樣式：螢幕閱讀與列印共用一份結構。
   PDF 由使用者的瀏覽器列印產生，伺服器不經手，因此列印樣式等同於產品的輸出品質。 */

:root {
  --ink: #23201c;
  --ink-soft: #6b635a;
  --line: #e4ded5;
  --paper: #fdfcfa;
  --card: #ffffff;
  --accent: #1f6f5c;
  --accent-soft: #eaf2ef;
  --warn-bg: #fdf4e3;
  --warn-line: #e0c58a;
  --radius: 12px;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ece7e0;
    --ink-soft: #a9a196;
    --line: #38332d;
    --paper: #1a1815;
    --card: #232019;
    --accent: #6cbfa6;
    --accent-soft: #1f2b27;
    --warn-bg: #2d2617;
    --warn-line: #6b5730;
  }
}

:root[data-theme="dark"] {
  --ink: #ece7e0;
  --ink-soft: #a9a196;
  --line: #38332d;
  --paper: #1a1815;
  --card: #232019;
  --accent: #6cbfa6;
  --accent-soft: #1f2b27;
  --warn-bg: #2d2617;
  --warn-line: #6b5730;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 工具列（列印時隱藏） ---------- */
.toolbar {
  /* 不黏在上面：標題與按鈕都不是捲動中會用到的東西，而兩層固定列加起來
     會吃掉手機螢幕上方很大一塊。捲動時真正需要留著的是章節列。 */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 列印提示出現時要自己佔一整行，不能跟標題和按鈕擠在同一列 */
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px var(--gutter);
  padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.toolbar-title {
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn {
  flex: none;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.btn:active { opacity: .85; }

.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

/* ---------- 版面 ---------- */
.booklet {
  /* 隨瀏覽器寬度伸展，讓縮圖網格用得到大螢幕的空間 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
}

/* 但文字不該跟著變寬：一行拉太長，眼睛從行尾回到下一行的行首會頻頻失準。
   所以只有網格佔滿寬度，文字型內容維持易讀行寬。 */
.day,
.checks,
.cards:not(.grid),
.notice-box,
.section-head + p {
  max-width: 780px;
}

.state {
  padding: 48px var(--gutter);
  text-align: center;
  color: var(--ink-soft);
}

.section { margin-top: 40px; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--accent);
}

.section-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
}

.section-count {
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- 封面 ---------- */
.cover {
  padding: 40px 0 8px;
  text-align: center;
}

.cover h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 700;
  line-height: 1.25;
}

.cover p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
}

.cover-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  margin-top: 20px;
  background: var(--accent-soft);
}

/* ---------- 每日 ---------- */
.day { margin-top: 32px; }

.day-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.day-badge {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.day-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.day-summary {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 14px;
}

/* ---------- 行程時間軸 ---------- */
.stop {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}

.stop:last-child { border-bottom: 0; }

.stop-time {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--accent);
  font-size: 15px;
}

.stop-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.stop-meta {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.stop-desc {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.stop-facts {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ink-soft);
}

.stop-facts li { margin-top: 2px; }
.stop-facts b { font-weight: 500; color: var(--ink); }

.stop-img {
  grid-column: 2;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 10px;
  background: var(--accent-soft);
}

/* ---------- 卡片清單 ---------- */
.cards {
  display: grid;
  gap: 12px;
}

.card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  break-inside: avoid;
}

.card h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 500;
}

.card p {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--accent-soft);
}

.tag {
  display: inline-block;
  padding: 1px 8px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.group-label {
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ---------- 核取清單 ---------- */
.checks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  break-inside: avoid;
}

.checks li:last-child { border-bottom: 0; }

.box {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 4px;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
  color: var(--accent);
}

.box.done {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.checks .qty {
  margin-left: auto;
  padding-left: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 提示訊息 ---------- */
.notice-box {
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  background: var(--warn-bg);
  font-size: 14px;
}

.notice-box p { margin: 0 0 6px; }
.notice-box p:last-child { margin-bottom: 0; }

.expired {
  margin: 32px 0;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.expired p { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }

.madeby {
  padding: 24px var(--gutter) 40px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---------- 列印：使用者按下「儲存為 PDF」時的實際輸出 ---------- */
@page {
  size: A5 portrait;
  margin: 12mm 11mm;
}

/* 封面的擁有者與每日記錄格只在兒童版出現。結構一律產生（見 booklet.js），
   這裡負責藏起來 —— 版型只換樣式不換結構，離線單檔與列印才不會失準。 */
/* 封面的擁有者、每日的天氣心情與記錄格只在兒童版出現。結構一律產生
   （見 booklet.js），這裡負責藏起來 —— 版型只換樣式不換結構，離線單檔與
   列印才不會失準。
   「我的護照」「蓋章收集」「回家以後」三個章節則是另一回事：螢幕上的上下頁
   是用索引在章節陣列裡走的，藏起來的章節會變成翻到一半的空白頁，所以那三個
   由 booklet.js 決定要不要產生。 */
.cover-owner, .day-memo, .day-tracker, .day-tasks,
.day-activity, .day-winner, .section-doodle { display: none; }

/* 解鎖後工具列有三個按鈕，窄螢幕會把按鈕文字折成兩行。
   讓它們不換行，整排改成可橫向捲動 —— 折行的按鈕比捲動難看得多。 */
.toolbar-actions {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.toolbar-actions::-webkit-scrollbar { display: none; }
.toolbar-actions .btn { white-space: nowrap; flex: none; }

.print-tip {
  flex: 1 0 100%;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.print-tip.hide { display: none; }

/* ---------- 解鎖與轉換 ---------- */
.unlock {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.unlock-title { margin: 0 0 10px; font-size: 14px; font-weight: 500; }

.unlock-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.unlock-key {
  flex: 1 1 180px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 小於 16px 會讓 iOS 自動放大頁面 */
}

.unlock-buy {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--accent);
}

.unlock-msg { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); }

.madewith {
  margin: 28px 0 8px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.madewith-title { margin: 0 0 4px; font-size: 15px; font-weight: 500; }
.madewith-note { margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); }

.madewith-brand {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

@media print {
  /* 預設不印背景色，會讓標籤與色塊消失，必須明確開啟 */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  :root {
    --ink: #000;
    --ink-soft: #444;
    --line: #ccc;
    --paper: #fff;
    --card: #fff;
    --accent: #14594a;
    --accent-soft: #eef4f2;
  }

  body { font-size: 10.5pt; line-height: 1.5; }

  /* 設定面板是給家長調整用的，不是這本書的內容 */
  .toolbar, .madeby, .expired .btn, .print-tip, .game-setup { display: none; }

  /* 未解鎖也讓他印。擋不住截圖與另存，假裝擋得住只會讓體驗變差 ——
     而圖片本身已經帶著標記，印出來的東西替我們宣傳。 */
  .unlock { display: none; }

  .booklet {
    max-width: none;
    padding: 0;
  }

  /* 每個章節從新頁開始。封面不帶 .section，因此自然獨占第一頁。
     這是小冊子而不是報表：翻到新的一頁就是新的一章，翻找時才有依據。 */
  .section { break-before: page; margin-top: 0; }

  /* 但只有兩三條的章節不值得一整張 A5。項目數由 booklet.js 標記 ——
     CSS 量不到內容多寡，渲染的時候才知道。

     這裡只放寬換頁，不加 break-inside: avoid。項目數少不代表高度矮：
     四天的「行程總覽」只有四個項目，卻可能比一張 A5 還高，而「高過一頁
     又不准拆」會讓瀏覽器放棄規則、從任意位置切下去 —— 連卡片的外框都被
     切成兩半，一半留在前一頁。標題不落單由下面的 break-after/break-before
     負責，卡片不被切由 .card 自己的 break-inside 負責，兩者都不需要
     整章不可分割這個做不到的承諾。 */
  .section-short {
    break-before: auto;
    margin-top: 10mm;
  }

  /* 封面佔滿整頁，內容垂直置中。靠上排列會讓整張紙下半部空著 ——
     那是內頁的排法，不是封面的。
     182mm 而不是版心的 186mm：留一點餘裕，免得四捨五入把封面擠到第二頁。
     display 要 !important —— 上面的 .section{display:block !important} 會蓋掉它。 */
  /* 選擇器要寫成 .section.cover：底下那條 .section{display:block !important}
     跟單用 .cover 權重相同，靠的是誰寫在後面 —— 而那條在後面。 */
  .section.cover {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-height: 182mm;
    padding-top: 0;
  }

  .cover h1 { font-size: 24pt; }

  /* 一天「不要被拆開」是做不到的承諾：行程多的那一天本來就比一張 A5 高，
     而瀏覽器遇到高過一頁又不准拆的區塊，會先空掉一整頁再把它放下去 ——
     紙本中間憑空多出白頁，看起來像印壞了。
     換頁由 .day 的 break-before 保證（見下方每日區塊），短的一天自然不會被
     拆；長的一天就讓它流到下一頁，那是正確的行為。 */
  .card, .stop, .checks li { break-inside: avoid; }

  /* 標題不可落在頁尾。h2 的 break-after 只保證緊接的那個元素不被切走，
     但章節標題後面接的是一整個網格 —— 網格放不下時，瀏覽器仍然會把它
     整塊推到下一頁，留下孤零零的標題。所以連同標題區塊與後面第一段
     內容一起標示不可分割。 */
  h2, h3, h4 { break-after: avoid; }

  .section-head {
    break-after: avoid;
    break-inside: avoid;
  }

  /* 章節開頭到第一批內容視為一體。
     會跟標題分家的是「第一張卡片」而不是它的容器 —— 容器本來就從頁首開始，
     對容器下 break-before 沒有任何作用，真正搬家的是它的第一個孩子。 */
  .section > .section-head + * { break-before: avoid; }
  .section > .section-head + * > :first-child { break-before: avoid; }

  /* 整頁高的圖片會把卡片撐到擠不進剩餘空間，於是整塊搬到下一頁，
     把標題留在原地。限制高度讓卡片縮得回來。 */
  .card-img { max-height: 52mm; }
  .stop-img { max-height: 40mm; }
  .cover-img { max-height: 90mm; }

  a { color: inherit; text-decoration: none; }

  /* 圖片未載入時不要留下大片空白 */
  img:not([src]), img[src=""] { display: none; }
}

/* ---------- 章節分頁 ---------- */
/* 螢幕上一次只顯示一章，像翻閱小冊子而不是無止境地捲動。
   列印時全部展開（見下方 @media print），PDF 才會是完整的一本。 */
.section { display: none; }
.section.is-active { display: block; }

.tabs {
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  gap: 6px;
  padding: 7px var(--gutter);
  padding-top: max(7px, env(safe-area-inset-top));
  overflow-x: auto;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.tab.is-current {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.pager .btn { flex: 1; }

.pager .btn:disabled {
  opacity: .35;
  cursor: default;
}

@media print {
  /* 列印要的是完整一本，所以忽略螢幕上的分頁狀態 */
  .section { display: block !important; }
  .tabs, .pager { display: none !important; }
}

.toolbar-actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.toolbar-actions .btn {
  text-decoration: none;
  line-height: 1.4;
}

/* ---------- 縮圖網格 ---------- */
/* 景點、美食、住宿、購物是「一眼掃過」的內容，單欄卡片一頁放不了幾個。
   auto-fill 讓手機約兩欄、平板與列印時更多，不必為各裝置各寫一組規則。 */
.cards.grid {
  /* 手機約兩欄 */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

/* 欄寬跟著內容走，不是跟著章節名稱。景點一項帶著說明與五條事實，擠在
   150px 的欄裡每行只剩四五個字；購物清單一項只有名稱與一句備註，同樣的
   欄寬反而浪費螢幕。data-cols 由 booklet.js 量出來（見 columnsFor）。 */
.cards.grid[data-cols="1"] {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* 字多的項目在手機上只排得下一欄，1:1 的照片就成了整個螢幕寬的方塊，
   要捲兩下才看得到名字。橫幅比例讓照片與說明同時在畫面裡。 */
.cards.grid[data-cols="1"] .card-img { aspect-ratio: 16 / 9; }

.cards.grid[data-cols="3"] {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

@media (min-width: 700px) {
  /* 螢幕變寬時要的是「更大的圖」，不是「更多更小的圖」，
     所以提高每欄的最小寬度而非讓欄數無限增加。 */
  .cards.grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
  }

  .cards.grid[data-cols="1"] {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }

  .cards.grid[data-cols="3"] {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  /* 螢幕夠寬時一欄約 340px，照片不再佔滿整個畫面，可以回到 4:3 */
  .cards.grid[data-cols="1"] .card-img { aspect-ratio: 4 / 3; }
}

.cards.grid .card {
  padding: 0 0 10px;
  overflow: hidden;
}

.cards.grid .card-img {
  aspect-ratio: 1 / 1;
  margin-bottom: 8px;
  border-radius: 0;
}

.cards.grid .card h4,
.cards.grid .card p,
.cards.grid .card .tag,
.cards.grid .card .stop-facts {
  margin-left: 10px;
  margin-right: 10px;
}

.cards.grid .card h4 {
  font-size: 14px;
  line-height: 1.45;
}

.cards.grid .card p,
.cards.grid .card .stop-facts {
  font-size: 12px;
  line-height: 1.55;
}

/* 縮圖是概覽，說明文字過長會把網格拉得參差不齊 */
.cards.grid .card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media print {
  /* 一列放幾個項目由 booklet.js 依內容決定（data-cols，見 columnsFor）。
     CSS 量不到字數，而「一項帶幾個字」正是版面唯一該依據的東西：
     購物清單一項只有名稱與一句備註，排一列一個等於整頁都是留白；景點一項
     帶著說明與開放時間、門票、地點、交通、網站五條事實，擠進窄欄則每行
     只剩幾個字。同一套版面套在兩者身上，總有一邊是錯的。

     這幾條用 !important：版型以 [data-booklet-theme] 前綴覆寫了同樣的選擇器，
     權重比這裡高，而 themes.css 又載在後面 —— 不加的話，換成雜誌版或手帳版
     列印就會退回各自的螢幕版面，分頁問題原封不動地回來。
     紙張的結構不該由裝飾性的版型規則決定，這正是 !important 存在的理由。 */
  .cards.grid {
    display: grid !important;
    gap: 5mm 4mm !important;
    align-items: start !important;
  }

  .cards.grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr) !important; }
  .cards.grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* 直式卡片是「圖在字的上面」，照片有多高，卡片就得多長那一截。螢幕上
     4:3 很好看，A5 上兩欄時就是 46mm 的照片配 34mm 的字 —— 一頁只排得下
     兩列。壓成寬幅之後照片仍然看得清楚，一頁多放一整列。 */
  .cards.grid[data-cols="2"] .card-img {
    aspect-ratio: 16 / 9 !important;
    max-height: 36mm !important;
  }

  .cards.grid[data-cols="3"] .card-img {
    aspect-ratio: 4 / 3 !important;
    max-height: 30mm !important;
  }

  /* 字多的清單（景點）改成一列一項、圖在左字在右。
     網格在列印時有個致命的性質：一整列（row）是不可分割的，所以只要同一
     列裡有一個項目的說明特別長，整列就一起搬到下一頁 —— 章節標題因此被
     單獨留在上一頁。改成一列一項之後，換頁只會推走放不下的那一個。
     橫排也讓 A5 上的圖片比多欄網格大得多，文字也不再擠成細長條。 */
  .cards.grid[data-cols="1"] { display: block !important; }

  .cards.grid[data-cols="1"] .card {
    display: grid !important;
    grid-template-columns: 44mm 1fr !important;
    /* 只給欄間距。圖片橫跨多列，row-gap 會乘上列數 —— 20 列就是 19 道
       間隙，把每張卡片憑空撐高三分之一頁，於是一個景點佔掉一整張紙。 */
    column-gap: 4mm !important;
    row-gap: 0 !important;
    align-items: start !important;
    margin-bottom: 5mm;
  }

  .cards.grid[data-cols="1"] .card > :not(.card-img) { grid-column: 2 !important; }

  .cards.grid[data-cols="1"] .card-img {
    grid-column: 1 !important;
    grid-row: 1 / span 20 !important;   /* 佔滿整列高度，文字有幾行都對齊 */
    aspect-ratio: 4 / 3 !important;
    max-height: 33mm !important;
    width: auto !important;
    align-self: start !important;
    position: static !important;
  }

  /* 沒有圖片的項目，文字佔滿整個寬度 */
  .cards.grid[data-cols="1"] .card:not(:has(.card-img)) { grid-template-columns: 1fr !important; }
  .cards.grid[data-cols="1"] .card:not(:has(.card-img)) > * { grid-column: 1 !important; }

  /* 一張卡片不該被頁邊切成兩半 —— 上半頁的照片配下半頁的地址，兩邊都沒用 */
  .cards.grid .card { break-inside: avoid; }

  /* 轉換卡片被切開時，最後一頁會只剩品牌那一行 —— 看起來像印壞了，
     而它偏偏是整本書的最後一頁 */
  .madewith { break-inside: avoid; }

  /* 版型的顏色、字體、外框、傾斜一律保留。使用者是看著螢幕上的樣子
     選的版型，紙本理當是同一本書 —— 只有「一列幾項」這件事是紙張的
     物理限制，不是審美判斷，所以只有版面結構被覆寫。 */

  /* 螢幕上截斷說明是為了讓網格整齊；紙本是付費帶走的成品，不該少字。
     一個項目長到放不下就自己換頁，那是可以接受的，但資訊不能消失。 */
  .cards.grid .card p {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
  }

  /* 分組標題（「那霸推薦」）要跟著它的第一個項目走 */
  .group-label { break-after: avoid; }
}

@media (min-width: 700px) {
  .cards.grid .card h4 { font-size: 16px; }
  .cards.grid .card p,
  .cards.grid .card .stop-facts { font-size: 13px; }
  .cards.grid .card-img { aspect-ratio: 4 / 3; }
}

/* ---------- 遊戲設定面板 ---------- */
/* 每種版型都有（常用語不是兒童版專屬），收合起來只佔一行 */
.game-setup {
  margin: 14px 0 4px;
  border: 2px solid var(--accent-soft);
  border-radius: var(--radius);
  background: var(--card);
}

.setup-summary {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}

.setup-summary::-webkit-details-marker { display: none; }

.setup-summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform .12s ease;
}

.game-setup[open] .setup-summary::before {
  content: "▾ ";
}

.setup-body {
  padding: 0 16px 14px;
  border-top: 1px solid var(--line);
}

.setup-lead {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.setup-head {
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* 整列都能點，不是只有那個小方框 —— 家長多半在手機上單手操作 */
.setup-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 6px;
  margin: 0 -6px;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.setup-row:hover { background: var(--accent-soft); }

.setup-row .box {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2.5px solid var(--line);
  border-radius: 6px;
  background: transparent;
}

.setup-row .box svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.setup-row .box.is-on {
  border-color: var(--accent);
  background: var(--accent);
}

.setup-row .box.is-on svg { opacity: 1; }

.setup-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.setup-name { font-size: 15px; font-weight: 500; }

.setup-hint {
  font-size: 12px;
  color: var(--ink-soft);
}

.setup-list-tight .setup-hint { font-size: 11px; }

.setup-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: #b3271e;
}

.setup-note:empty { display: none; }

/* −  N  + 的調整列 */
.setup-row-step { cursor: default; }
.setup-row-step:hover { background: transparent; }

.stepper {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.step-btn {
  width: 32px;
  height: 32px;
  border: 2px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.step-btn:active { background: var(--accent-soft); }

.step-value {
  min-width: 26px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* ---------- 常用語 ---------- */
/* 一行一句：中文在上（知道自己要說什麼），原文最大（要拿給對方看），
   念法在下。拿給店員看的時候，最大的那一行就是他要讀的。 */
.phrase-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  max-width: 780px;
}

.phrase {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.phrase-zh {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
}

.phrase-say {
  display: block;
  font-size: 17px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.phrase-read {
  display: block;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.section-note {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink-soft);
}

@media print {
  .phrase { break-inside: avoid; padding: 1.6mm 0; }
  .phrase-list { margin-bottom: 5mm; }
  .phrase-zh { font-size: 8pt; }
  .phrase-say { font-size: 11pt; }
  .phrase-read { font-size: 8.5pt; color: #555; }
}

/* ---------- 可勾選的清單 ---------- */
/* 行李清單是在打包的當下用的，一邊裝箱一邊勾，所以整列都要能點，
   不是只有那個小方框。 */
.checks li.checkable {
  cursor: pointer;
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;
  margin-right: -8px;
  transition: background-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.checks li.checkable:hover,
.checks li.checkable:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

.checks li.checkable:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* 已完成的項目要看得出來，但不能難讀 —— 旅伴可能需要回頭確認內容 */
.checks li.is-done > span:nth-child(2) {
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--line);
}

@media print {
  /* 紙本上要能用筆打勾，所以保留空白方框而非印出互動樣式 */
  .checks li.checkable { cursor: auto; }
  .checks li.checkable:hover { background: transparent; }
}

/* 兩顆按鈕的名稱都不短，窄螢幕上會把標題擠到消失。
   工具列已不再固定在上方，多佔一行不影響閱讀。 */
@media (max-width: 460px) {
  .toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .toolbar-title {
    flex: 1 0 100%;
  }

  .toolbar-actions {
    flex: 1;
  }

  .toolbar-actions .btn {
    flex: 1;
    text-align: center;
  }
}

/* ---------- 每日區塊 ---------- */
/* 一天與下一天之間要一眼看得出來，否則整個章節會糊成一長串時間。 */
.day {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 2px solid var(--line);
}

.day:first-of-type {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.day-head {
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.day-head .day-badge {
  padding: 4px 12px;
  font-size: 14px;
}

.day-head h3 {
  font-size: 19px;
  font-weight: 700;
}

/* 橫幅而非滿版大圖：照片是當天的情境提示，行程本身才是要讀的內容 */
.day-banner {
  width: 100%;
  aspect-ratio: 16 / 5;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
  background: var(--accent-soft);
}

/* 行程縮排，讓它明顯隸屬於上方那一天 */
.day-stops {
  padding-left: 14px;
  margin-left: 2px;
  border-left: 2px solid var(--accent-soft);
}

@media print {
  .day {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  /* 一天一頁，翻頁本身就是最清楚的分隔 */
  .day { break-before: page; }
  .day:first-of-type { break-before: auto; }

  .day-banner { aspect-ratio: 16 / 4; }
}