/* ── Broadsheet 設計系統 token ────────────────────────────────────────
   報紙風：紙白底、近黑字、Source Serif 4，兩個重點色（青為互動主色、
   洋紅少量使用）。原始設計稿由 Claude Design 產出，未進版控；以下 token
   即為完整定義，不依賴外部樣式包。                                  */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);
  --color-accent: #0088b0;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-2: #d6006c;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --font-body: "Source Serif 4", "Noto Serif CJK TC", "Songti TC", serif;
  --font-heading: "Source Serif 4", "Noto Serif CJK TC", "Songti TC", serif;
  --font-heading-weight: 600;
  --radius-md: 2px;
  --radius-lg: 4px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --pad: 24px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  overscroll-behavior-y: none;
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); margin: 0; }

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-bg);
}

#view { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding-bottom: 26px; }
#view::-webkit-scrollbar { width: 0; }

svg.i { width: 1em; height: 1em; display: block; flex: 0 0 auto; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── 分頁列 ─────────────────────────────────────────────────────────── */
.tabbar {
  display: flex;
  justify-content: space-around;
  padding: 9px 8px calc(9px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-bg) 88%, #000);
  border-top: 1px solid var(--color-divider);
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 4px 14px;
  color: var(--color-neutral-600);
  font: 600 11px/1 var(--font-heading); letter-spacing: .02em;
}
.tabbar button svg.i { font-size: 21px; }
.tabbar button.on { color: var(--color-accent); }

/* ── 日期切換列 ─────────────────────────────────────────────────────── */
.dbar { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px var(--pad) 0; }
.dnav { display: inline-flex; align-items: center; gap: 4px;
  font: 600 12px/1 var(--font-heading); color: var(--color-accent-700);
  background: none; border: none; cursor: pointer; padding: 6px 2px; }
.dnav svg.i { font-size: 17px; }
.dnav[disabled] { color: var(--color-neutral-400); pointer-events: none; }
.dtoday { display: inline-flex; align-items: center; gap: 5px;
  font: 600 11px/1 var(--font-heading); color: #fff; background: var(--color-accent);
  border: none; border-radius: 999px; cursor: pointer; padding: 7px 13px; }
.dtoday svg.i { font-size: 14px; }

/* ── 日期標題 ───────────────────────────────────────────────────────── */
.dhead { display: flex; align-items: flex-start; gap: 18px; padding: 20px var(--pad) 4px; }
.dhead-num { font: 600 96px/.8 var(--font-heading); color: var(--color-accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dhead-main { padding-top: 8px; min-width: 0; }
.dhead-label { font: 600 10px/1 var(--font-heading); letter-spacing: .16em;
  text-transform: uppercase; color: var(--color-accent); }
.dhead-title { font-size: 34px; line-height: .95; letter-spacing: -.02em; margin: 8px 0 4px; }
.dhead-date { font: 400 15px/1.3 var(--font-body); color: var(--color-neutral-600); }
.dhead-transport { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 6px var(--pad) 0;
  font: 600 12px/1.5 var(--font-heading); color: var(--color-neutral-700); }

/* ── 段落標題 ───────────────────────────────────────────────────────── */
.sec { padding: 18px var(--pad) 4px; }
.sec-rule { height: 1px; background: var(--color-text); }
.sec-h { font: 600 20px/1.2 var(--font-heading); letter-spacing: .02em; margin: 12px 0 2px; }
.sub-h { font: 600 11px/1 var(--font-heading); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-neutral-500); margin: 0 0 2px; }

/* ── 時間軸 ─────────────────────────────────────────────────────────── */
.tl { padding: 4px var(--pad) 6px; }
.tl-row, .tl-seg { display: grid; grid-template-columns: 52px 20px 1fr; column-gap: 10px; }
.tl-time { font: 600 12.5px/1.4 var(--font-heading); color: var(--color-neutral-700);
  padding-top: 15px; text-align: right; white-space: nowrap; }
.tl-rail { position: relative; display: flex; justify-content: center; }
.tl-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--color-divider); }
.tl-dot { position: relative; z-index: 2; width: 11px; height: 11px; border-radius: 50%;
  margin-top: 17px; box-shadow: 0 0 0 4px var(--color-bg); background: var(--color-neutral-400); }
.tl-body { padding: 14px 0 2px; min-width: 0; }
.tl-head { display: flex; align-items: flex-start; gap: 8px; }
.tl-head svg.i { font-size: 19px; margin-top: 2px; }
.tl-name { font: 600 17px/1.25 var(--font-heading); letter-spacing: -.01em; }
.tl-seg-mid { position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 62px; }
.tl-seg-mid::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--color-divider); }
.tl-seg-icon { position: relative; z-index: 2; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg);
  color: var(--color-neutral-500); font-size: 15px; }
.tl-seg-info { display: flex; align-items: center; gap: 12px; min-height: 62px;
  font: 600 11.5px/1.4 var(--font-heading); color: var(--color-neutral-600); }
.tl-seg-mode { min-width: 0; }
.tl-nav { flex: 0 0 auto; }

/* ── 連結／按鈕 ─────────────────────────────────────────────────────── */
.link { display: inline-flex; align-items: center; gap: 5px;
  font: 600 12px/1 var(--font-heading); color: var(--color-accent-700);
  text-decoration: none; white-space: nowrap; }
.link svg.i { font-size: 15px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; font-family: var(--font-heading);
  font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--color-accent);
  background: transparent; border: 1px solid transparent; padding: 6px 11px;
  border-radius: var(--radius-md); }
.btn svg.i { font-size: 16px; }
.btn:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* ── 退房／住宿 ─────────────────────────────────────────────────────── */
.stay { padding: 2px var(--pad) 6px; }
.stay-box { border-radius: var(--radius-md); padding: 12px 14px;
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent); }
.stay-box.plain { background: color-mix(in srgb, var(--color-neutral-500) 8%, transparent);
  border-color: transparent; }
.stay-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.stay-head svg.i { font-size: 20px; color: var(--color-accent-700); }
.stay-box.plain .stay-head svg.i { color: var(--color-neutral-600); }
.stay-k { font: 600 9px/1 var(--font-heading); letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-500); }
.stay-n { font: 600 14px/1.3 var(--font-heading); }
.stay-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; }
.stay-meta span { display: flex; align-items: flex-start; gap: 6px;
  font: 600 12px/1.4 var(--font-heading); color: var(--color-neutral-700); }
.stay-meta svg.i { font-size: 15px; color: var(--color-neutral-500); margin-top: 1px; }
.stay-meta .bf-yes, .stay-meta .bf-yes svg.i { color: var(--color-accent-2); }
.stay-acts { display: flex; align-items: center; gap: 16px; margin-top: 11px; }

/* ── 今日備註 ───────────────────────────────────────────────────────── */
.notes { padding: 10px var(--pad) 8px; }
.notes ul { margin: 6px 0 0; padding: 0; list-style: none; }
.notes li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.5;
  color: var(--color-neutral-700); margin-bottom: 4px; }
.notes li::before { content: ""; position: absolute; left: 2px; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--color-neutral-400); }

/* ── 地圖 ───────────────────────────────────────────────────────────── */
.mapwrap { position: relative; height: 340px; border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm); background: #efeeec; }
.mapwrap iframe { border: 0; display: block; width: 100%; height: 100%; }
.map-off { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; padding: 24px; text-align: center; color: var(--color-neutral-600); }
.map-off svg.i { font-size: 30px; color: var(--color-neutral-400); }
.map-off p { margin: 0; font-size: 13px; line-height: 1.5; }
.map-foot { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 7px; }
.map-cap { font: 600 12px/1.3 var(--font-heading); letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-neutral-600); }

/* ── 分類膠囊 ───────────────────────────────────────────────────────── */
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 12px var(--pad) 4px;
  scrollbar-width: none; }
.chips::-webkit-scrollbar { height: 0; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
  border-radius: 999px; background: transparent; color: var(--color-neutral-700);
  font: 600 12px/1 var(--font-heading); cursor: pointer; white-space: nowrap; }
.chip svg.i { font-size: 15px; }
.chip .cnt { font-size: 10px; color: var(--color-neutral-500); }
.chip.on { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.chip.on .cnt { color: color-mix(in srgb, var(--color-bg) 70%, transparent); }

/* ── 景點卡 ─────────────────────────────────────────────────────────── */
.spots { padding: 6px var(--pad) 10px; }
.spot { display: flex; flex-direction: column; gap: 9px; padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.spot:last-child { border-bottom: 0; }
.spot-head { display: flex; align-items: baseline; gap: 12px; }
.spot-name { font: 600 15px/1.3 var(--font-heading); flex: 1; min-width: 0; }
.spot-cat { display: inline-flex; align-items: center; gap: 4px;
  font: 600 12px/1 var(--font-heading); letter-spacing: .02em; flex: 0 0 auto; }
.spot-cat svg.i { font-size: 15px; }
.spot-acts { display: flex; gap: 8px; margin-left: -11px; }
.spot.backup .spot-name { color: var(--color-neutral-700); }
.spot-plain { padding: 11px 0; font-size: 14px; color: var(--color-neutral-700);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.empty { padding: 10px var(--pad) 20px; font-size: 13px; color: var(--color-neutral-600); }

/* ── 行程分頁 ───────────────────────────────────────────────────────── */
.plan { padding: 6px var(--pad) 30px; }
.pday { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: 16px; width: 100%; text-align: left; background: transparent; border: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
  padding: 15px 2px; cursor: pointer; color: var(--color-text); font-family: var(--font-body); }
.pday:first-child { border-top: 0; }
.pday-num { font: 600 34px/.8 var(--font-heading); letter-spacing: -.03em;
  color: color-mix(in srgb, var(--color-text) 20%, transparent);
  font-variant-numeric: tabular-nums; }
.pday.now .pday-num { color: var(--color-accent); }
.pday.open { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.pday-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pday-meta { display: flex; align-items: center; gap: 8px; font: 600 10px/1 var(--font-heading);
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-500); }
.pday-now { font: 600 9px/1 var(--font-heading); letter-spacing: .06em; color: var(--color-bg);
  background: var(--color-accent); padding: 3px 6px; border-radius: 999px; text-transform: none; }
.pday-place { font: 600 19px/1.2 var(--font-heading); letter-spacing: -.01em; }
.pday-caret { font-size: 18px; color: var(--color-neutral-400); }

.plan-head { padding: 20px var(--pad) 6px; }
.plan-kicker { font: 600 10px/1 var(--font-heading); letter-spacing: .16em;
  text-transform: uppercase; color: var(--color-accent); }
.plan-title { font-size: 32px; line-height: .95; letter-spacing: -.02em; margin: 8px 0 4px; }
.plan-sub { font-size: 13px; color: var(--color-neutral-600); }