/* TripQuest —— 手機優先、深色為主、長輩友善 設計核心：大字、大按鈕、淺層級、明確回饋、少打字。 全站以 rem 排版，字級由 控制（標準 / 大 / 特大）。 */ :root { --bg: #0f1523; --bg-elev: #1a2740; --bg-elev-2: #24345a; --line: #37496e; --text: #f5f8ff; --muted: #c2cde6; --primary: #4f8dff; --primary-ink: #04122e; --accent: #ffb454; --ok: #4fd6a6; --ok-ink: #05231a; --heart: #ff6b8b; --danger: #ff6b6b; --ring-track: #37496e; --ring-fill: #4f8dff; --radius: 20px; --tabbar-h: 76px; --topbar-h: 60px; --maxw: 640px; --tap: 56px; color-scheme: dark; } /* 字級三段 —— 影響整站（都用 rem） */ html { font-size: 118%; -webkit-text-size-adjust: 100%; } html[data-fs="l"] { font-size: 134%; } html[data-fs="xl"] { font-size: 156%; } /* 高對比模式 */ html[data-contrast="high"] { --bg: #000; --bg-elev: #14203a; --bg-elev-2: #22345f; --line: #5a7099; --text: #ffffff; --muted: #dbe4f7; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 1rem; line-height: 1.6; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } button, input, textarea, select { font: inherit; } #app { max-width: var(--maxw); margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; } /* ---------- 頂列 ---------- */ #topbar { position: sticky; top: 0; z-index: 20; min-height: var(--topbar-h); padding-top: env(safe-area-inset-top); display: grid; grid-template-columns: var(--tap) 1fr var(--tap); align-items: center; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } #backBtn { grid-column: 1; } #topbar h1 { grid-column: 2; } #topActionBtn { grid-column: 3; } #topbar h1 { margin: 0; font-size: 1.15rem; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; } .icon-btn { appearance: none; border: 0; background: transparent; color: var(--text); font-size: 1.5rem; height: var(--tap); width: var(--tap); border-radius: 14px; cursor: pointer; display: grid; place-items: center; } .icon-btn:active { background: var(--bg-elev); } #backBtn { font-size: 2rem; line-height: 1; } /* ---------- 主內容 ---------- */ #view { flex: 1; } .page { /* 底部留白要同時避開底部功能列「和」右下角的 🆘 浮動鈕（在功能列上方 14px、 高 52px），不然捲到最後時最後一段內容會永遠被那顆紅色按鈕蓋住看不到。 */ padding: 16px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 84px); animation: fade 0.18s ease; /* 每一頁至少佔滿一個畫面高：內容短的分頁（例如只有一兩筆的分帳）若比畫面矮， 頁面就不能捲，iOS Safari 的瀏覽器工具列因此不會收起來，底部功能列看起來 就比別的分頁高一截。四頁一律填滿，行為才一致。 */ min-height: calc(100vh - var(--topbar-h)); min-height: calc(100dvh - var(--topbar-h)); } @keyframes fade { from { opacity: 0; transform: translateY(4px); } } .pad-x { padding: 0 2px; } /* ---------- 分頁列（大） ---------- */ #tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: var(--maxw); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); z-index: 20; } #tabbar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: 12.5px; font-weight: 700; padding-top: 4px; -webkit-tap-highlight-color: transparent; } #tabbar .tab .ti { font-size: 25px; line-height: 1; } #tabbar .tab.active { color: var(--primary); } #tabbar .tab.active .ti { transform: translateY(-1px); } #tabbar .tab:active { opacity: 0.6; } /* ---------- 回顧與成就 hub ---------- */ .mem-card { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 14px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; margin-top: 12px; } .mem-card:active { transform: scale(0.99); } .mem-card.is-locked { opacity: 0.55; } .mem-card-emoji { font-size: 2rem; flex: none; } .mem-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .mem-card-title { font-size: 1.2rem; font-weight: 800; } .mem-card-sub { font-size: 0.9rem; color: var(--muted); line-height: 1.5; } .mem-card-arrow { flex: none; color: var(--muted); font-size: 1.6rem; } /* ---------- 通用 ---------- */ .muted { color: var(--muted); } .sm { font-size: 0.85rem; } .lg { font-size: 1.15rem; } .center { text-align: center; } .mono { font-family: ui-monospace, Menlo, monospace; font-size: 0.9rem; } .stack > * + * { margin-top: 12px; } .row-2 { display: flex; gap: 10px; } .row-2 > * { flex: 1; min-width: 0; } .row-2 .field { width: 100%; } h2 { font-size: 1.35rem; margin: 0 0 8px; line-height: 1.35; } h3 { font-size: 1.05rem; } .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; width: 100%; text-align: left; color: inherit; display: flex; align-items: center; gap: 14px; cursor: pointer; } button.card { appearance: none; font: inherit; } .card:active { transform: scale(0.99); } .btn { appearance: none; border: 2px solid transparent; border-radius: 16px; padding: 14px 18px; min-height: var(--tap); font-weight: 700; cursor: pointer; background: var(--bg-elev-2); color: var(--text); transition: transform 0.08s, background 0.15s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--primary); color: var(--primary-ink); } .btn-ok { background: var(--ok); color: var(--ok-ink); } .btn-soft { background: var(--bg-elev-2); color: var(--text); border-color: var(--line); } .btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); } .btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); } .btn-block { display: flex; width: 100%; margin-top: 12px; } .btn-big { font-size: 1.2rem; padding: 20px; min-height: 68px; } .btn.is-locked { opacity: 0.6; } .tag { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--bg-elev-2); color: var(--muted); border: 1px solid var(--line); } .tag-curated { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .tag-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); } .tag-todo { color: var(--muted); } /* 標籤外觀、但實際是按鈕（例：景點頁每個任務的「編輯 / 刪除」）—— 觸控區要有 44px，不能沿用純標示用的 .tag 那種小尺寸，尤其「刪除」點錯代價大。 */ .tag-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 64px; padding: 0 16px; font-size: 0.95rem; font-weight: 700; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev-2); color: var(--text); } .tag-btn:active { transform: scale(0.96); } .tag-btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } .tag-er { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); margin-left: 6px; } .section-label { font-size: 0.9rem; font-weight: 800; color: var(--muted); margin: 26px 2px 10px; } /* ---------- Hero / 空狀態 ---------- */ .hero { padding: 10px 2px 20px; } .hero h2 { font-size: 1.5rem; } .hero p { margin: 0; } .empty { text-align: center; padding: 44px 20px; color: var(--muted); } .empty-emoji { font-size: 3rem; margin-bottom: 10px; } .empty p { margin: 6px 0; font-size: 1.05rem; } .center-fill { display: flex; align-items: center; justify-content: center; min-height: 46vh; } /* ---------- Spinner ---------- */ .spinner { width: 34px; height: 34px; border: 4px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- 進度環 ---------- */ .ring { position: relative; flex: none; display: grid; place-items: center; } .ring svg { position: absolute; inset: 0; } .ring-label { font-size: 0.8rem; font-weight: 800; color: var(--text); } .ring-done .ring-label { color: var(--ok); font-size: 1.1rem; } /* ---------- 頭像 ---------- */ .avatars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 0.95rem; font-weight: 800; color: #fff; background: hsl(var(--h, 210) 55% 46%); border: 2px solid var(--bg); flex: none; } .avatar.big { width: 52px; height: 52px; font-size: 1.4rem; } /* ---------- 大進度橫幅 ---------- */ .progress-banner { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, var(--bg-elev)), var(--bg-elev)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; align-items: center; gap: 16px; } .progress-banner .pb-text { flex: 1; min-width: 0; } .progress-banner .pb-title { font-size: 1.2rem; font-weight: 800; } .progress-banner .pb-sub { color: var(--muted); margin-top: 2px; } .progress-track { height: 12px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; margin-top: 10px; } .progress-track > i { display: block; height: 100%; background: var(--ok); border-radius: 999px; transition: width 0.5s ease; } /* ---------- 首頁行程卡 ---------- */ .trip-card { justify-content: space-between; } .trip-card-main { min-width: 0; } .trip-card-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 3px; } /* ---------- 行程總覽 ---------- */ .day-tools { display: flex; gap: 10px; margin: 20px 2px 4px; } .day-tool-btn { appearance: none; border: 1px solid var(--line); background: var(--bg-elev); color: var(--muted); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 0.9rem; cursor: pointer; min-height: 40px; } .day-tool-btn:active { transform: scale(0.96); } /* 「天」折疊 */ .daycollapse { margin-top: 12px; } .dc-head { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 12px; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; min-height: 60px; } .dc-head:active { background: var(--bg-elev); } .dc-head.is-today { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--bg-elev-2)); } .dc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .dc-row1 { display: flex; align-items: center; gap: 8px; } .dc-daynum { font-size: 1.2rem; font-weight: 900; } .dc-todaytag { font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); } .dc-meta { font-size: 0.85rem; color: var(--muted); font-weight: 600; line-height: 1.4; display: flex; flex-wrap: wrap; gap: 2px 8px; } .dc-wx { color: var(--text); font-weight: 700; } .dc-wx:not(:empty)::before { content: ""; } .dc-chev { flex: none; color: var(--muted); font-size: 1.05rem; width: 1.4em; text-align: center; } .dc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .daycollapse.open .dc-body { grid-template-rows: 1fr; } .dc-inner { overflow: hidden; min-height: 0; padding-top: 2px; } .dc-inner .qcollapse:first-child { margin-top: 10px; } /* 用地圖帶路 */ .nextstn-btn { flex-direction: column; gap: 4px; line-height: 1.3; } .nextstn-name { font-size: 0.95rem; font-weight: 700; opacity: 0.92; } .map-btn { font-size: 1rem; } /* 「換一站」：人到了景點常常不會當下就拍照，那個景點就一直算沒完成， 自動判斷會永遠指著同一個地方 —— 所以要讓他自己講現在在哪。 */ .nextstn { display: block; } .nextstn-plain { display: flex; flex-direction: column; gap: 4px; align-items: center; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; font-weight: 800; line-height: 1.3; } .nextstn-switch { appearance: none; display: block; width: 100%; margin-top: 8px; background: none; border: 0; color: var(--muted); font: inherit; font-weight: 700; font-size: 0.95rem; padding: 12px; min-height: 46px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; } .nextstn-switch:active { color: var(--text); } .here-pick { appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--bg-elev); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; min-height: var(--tap); } .here-pick.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); } .here-pick:active { transform: scale(0.99); } .here-pick-emoji { font-size: 1.5rem; flex: none; } .here-pick-name { flex: 1; min-width: 0; font-weight: 800; line-height: 1.35; } .here-pick-tick { flex: none; color: var(--primary); font-weight: 900; font-size: 1.2rem; } /* 標出「現在這一站」 */ .qcollapse.is-here { border-color: var(--primary); } .qc-here { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 24%, transparent); color: var(--text); font-size: 0.76rem; font-weight: 800; vertical-align: middle; } /* ---------- 有新版本 ---------- */ .update-bar { position: fixed; left: 10px; right: 10px; z-index: 90; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px); display: flex; align-items: center; gap: 10px; background: var(--bg-elev-2); border: 2px solid var(--primary); border-radius: 16px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); animation: slideup 0.24s ease; } .update-text { flex: 1; min-width: 0; font-weight: 700; } .update-go { appearance: none; flex: none; cursor: pointer; font: inherit; font-weight: 800; background: var(--primary); color: var(--primary-ink); border: 0; border-radius: 12px; padding: 0 16px; min-height: 46px; } .update-go:active { transform: scale(0.96); } .update-go:disabled { opacity: 0.72; } .update-bar[data-busy] { border-color: var(--muted); } .update-later { appearance: none; flex: none; cursor: pointer; background: none; border: 0; color: var(--muted); font-size: 1.1rem; width: 46px; min-height: 46px; } /* ---------- 照片牆的排序與篩選 ---------- 壓成一行：標題 + 景點下拉 + 排序小圖示。景點一多的時候，一整排 chips 會把 畫面吃掉一大半，照片反而變成配角。 */ .wall-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 26px 2px 10px; } .wall-bar-title { flex: 1 1 5em; min-width: 0; font-size: 0.9rem; font-weight: 800; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wall-ctl { appearance: none; cursor: pointer; font: inherit; flex: none; display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--line); background: var(--bg-elev); color: var(--text); border-radius: 14px; padding: 0 12px; min-height: 46px; max-width: 45vw; font-weight: 700; font-size: 0.95rem; } .wall-ctl:active { transform: scale(0.96); } .wall-ctl.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 20%, transparent); } .wall-ctl-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wall-ctl-chev { flex: none; color: var(--muted); font-size: 0.8rem; } /* 動態／相簿 檢視切換（v1.57） */ .wall-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--bg-elev-2); border-radius: 14px; padding: 4px; margin: 8px 0 6px; } .wall-mode { appearance: none; border: 0; background: transparent; color: var(--muted); font-weight: 800; font-size: 1rem; min-height: 46px; border-radius: 11px; cursor: pointer; } .wall-mode.on { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.25); } /* 相簿格狀 */ .pg { margin: 4px 0 12px; } .pg-day { position: sticky; top: var(--topbar-h, 56px); z-index: 2; display: flex; align-items: baseline; gap: 10px; padding: 8px 4px 6px; background: var(--bg); font-weight: 800; } .pg-day .pg-date { color: var(--muted); font-weight: 600; font-size: 0.9rem; } .pg-day .pg-n { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 0.85rem; } .pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .pg-cell { position: relative; appearance: none; border: 0; padding: 0; margin: 0; background: var(--bg-elev-2); aspect-ratio: 1; overflow: hidden; border-radius: 6px; cursor: pointer; } .pg-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .pg-cell.pg-wait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--bg-elev-2), var(--bg-elev)); } .pg-cell.pg-miss::after { content: '下載中'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.8rem; color: var(--muted); } .pg-likes { position: absolute; left: 4px; bottom: 4px; font-size: 0.75rem; font-weight: 800; background: rgba(0,0,0,.55); color: #fff; border-radius: 999px; padding: 2px 7px; } .pg-untag { position: absolute; right: 5px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #ffb14e; box-shadow: 0 0 0 2px rgba(0,0,0,.45); font-size: 0; overflow: hidden; } /* 全螢幕檢視器 */ body.pv-open { overflow: hidden; } .pv { position: fixed; inset: 0; z-index: 400; background: #000; color: #fff; display: flex; flex-direction: column; touch-action: none; user-select: none; -webkit-user-select: none; } .pv-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top) + 8px) 10px 8px; background: linear-gradient(rgba(0,0,0,.65), transparent); transition: opacity .2s; } .pv-counter { flex: 1; text-align: center; font-weight: 800; font-size: 1.05rem; } .pv-btn { appearance: none; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45); color: #fff; min-width: 52px; min-height: 52px; border-radius: 14px; font-size: 1.35rem; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; } .pv-close { font-size: 1.6rem; } .pv-stage { position: absolute; inset: 0; overflow: hidden; } .pv-track { display: flex; width: 300%; height: 100%; transform: translateX(calc(-100% / 3)); transition: transform .28s ease-out; } .pv-slide { position: relative; width: calc(100% / 3); height: 100%; display: flex; align-items: center; justify-content: center; } .pv-img.pv-fadein { position: absolute; inset: 0; opacity: 0; transition: opacity .15s linear; } .pv-img.pv-fadein.on { opacity: 1; } .reduce-motion .pv-img.pv-fadein { transition: none; } .pv-img { width: 100%; height: 100%; object-fit: contain; transform-origin: center center; transition: transform .08s linear; } /* 滿版：縮圖放大到與全圖同版面，換圖不跳尺寸 */ .pv-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 10px 12px calc(env(safe-area-inset-bottom) + 12px); background: linear-gradient(transparent, rgba(0,0,0,.8)); transition: opacity .2s; } .pv-hide-ui .pv-top, .pv-hide-ui .pv-bottom { opacity: 0; pointer-events: none; } .pv-cap-1 { font-weight: 800; font-size: 1rem; } .pv-cap-2 { color: rgba(255,255,255,.8); font-size: 0.92rem; margin-top: 2px; } .pv-actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; } .pv-reacts { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; } .pv-react { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; padding: 8px 12px; min-height: 48px; } .pv-react.on { background: color-mix(in srgb, var(--heart) 45%, transparent); border-color: var(--heart); } .pv-cbtn { font-size: 1rem; white-space: nowrap; } .pv-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; background: var(--bg-elev); color: var(--text); border-radius: 18px 18px 0 0; padding: 10px 14px calc(env(safe-area-inset-bottom) + 12px); max-height: 60vh; display: flex; flex-direction: column; box-shadow: 0 -6px 24px rgba(0,0,0,.5); } .pv-sheet-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 1.05rem; } .pv-sheet-head .pv-btn { background: var(--bg-elev-2); color: var(--text); border-color: var(--line); } .pv-clist { overflow: auto; flex: 1; margin: 6px 0; } .pv-cadd { display: flex; gap: 8px; } .pv-cadd .field { flex: 1; } /* 邀請加入（v1.57 第一分鐘） */ .join-preview { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 10px 0; } .join-preview .jp-day { font-weight: 800; margin: 6px 0 2px; } .join-preview .jp-spot { color: var(--muted); font-size: 0.95rem; padding: 2px 0 2px 6px; } .join-progress { background: var(--bg-elev); border: 1px solid var(--primary); border-radius: var(--radius); padding: 14px; margin: 12px 0; text-align: center; font-weight: 700; } .join-progress .jp-sub { color: var(--muted); font-weight: 600; font-size: 0.9rem; margin-top: 4px; } .welcome-card { background: color-mix(in srgb, var(--primary) 14%, var(--bg-elev)); border: 1px solid var(--primary); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 10px; display: flex; gap: 10px; align-items: flex-start; } .welcome-card .wc-t { font-weight: 800; margin-bottom: 4px; } .welcome-card .wc-p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; } .welcome-card .wc-x { margin-left: auto; min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev-2); color: var(--text); font-size: 1.1rem; } .sync-banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 10px; border-radius: 12px; background: var(--bg-elev-2); color: var(--muted); font-weight: 600; font-size: 0.95rem; } .sync-banner .spinner { width: 18px; height: 18px; border-width: 2px; } .sync-banner.done { color: var(--ok, #6cd39a); } .wall-ctl.on .wall-ctl-chev { color: var(--text); } /* 排序只有新／舊兩種，做成「按一下就換」的切換鈕，按鈕上直接寫現在是哪一種 */ .wall-ctl-sort { padding: 0 12px; } /* 通用的「挑一個」大按鈕清單（chooseFrom） */ .pick-row { appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--bg-elev); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; min-height: var(--tap); } .pick-row.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); } .pick-row:active { transform: scale(0.99); } .pick-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pick-row-label { font-weight: 800; line-height: 1.35; } .pick-row-tag { flex: none; font-size: 0.85rem; font-weight: 800; color: var(--muted); background: var(--bg-elev-2); border-radius: 999px; padding: 3px 10px; } .pick-row-tick { flex: none; color: var(--primary); font-weight: 900; font-size: 1.2rem; } /* ---------- 大任務卡（長輩主視覺） ---------- */ /* 卡片本身不是按鈕了：上半部（圖＋文字）點了看照片，下半部是加照片的兩顆大按鈕。 加照片的按鈕必須直接在卡片上 —— 藏在任何一層裡面長輩就找不到。 */ .qbig-open { appearance: none; display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .qbig-open:active { opacity: 0.88; } .qbig-actions { padding: 0 14px 14px; } .qbig-actions .addphoto-row { margin-top: 0; } .qbig { position: relative; display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-elev); text-align: left; color: inherit; font: inherit; margin-bottom: 14px; } .qbig-body { padding-bottom: 10px; } .qbig-photo { height: 168px; background: var(--bg-elev-2) center/cover no-repeat; display: grid; place-items: center; position: relative; } .qbig-photo .qbig-emoji { font-size: 3.4rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); } .qbig-photo.has-img .qbig-emoji { position: absolute; top: 10px; left: 10px; font-size: 1.4rem; background: rgba(11,17,32,.7); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; } .qbig-photo.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(15,21,35,.55)); } .qbig-body { padding: 14px 16px 16px; } .qbig-title { font-size: 1.2rem; font-weight: 800; line-height: 1.3; } .qbig-hint { color: var(--muted); margin-top: 4px; font-size: 0.95rem; } .qbig-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .qbig-status { font-size: 0.95rem; font-weight: 800; padding: 6px 14px; border-radius: 999px; background: var(--bg-elev-2); color: var(--muted); } .qbig.done .qbig-status { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); } .qbig.done .qbig-photo { filter: saturate(1); } .qbig-check { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--ok); color: var(--ok-ink); display: grid; place-items: center; font-size: 1.5rem; font-weight: 900; box-shadow: 0 4px 16px rgba(0,0,0,.4); } .qbig-likes { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.9rem; font-weight: 700; } /* ---------- 任務詳情（全神貫注） ---------- */ .quest-focus { text-align: center; } .quest-focus-photo { width: 100%; height: 240px; border-radius: var(--radius); background: var(--bg-elev-2) center/cover no-repeat; display: grid; place-items: center; margin-bottom: 6px; position: relative; overflow: hidden; } .quest-focus-photo .qf-emoji { font-size: 5rem; transition: opacity .3s; } .quest-focus-photo.has-img .qf-emoji { position: absolute; top: 12px; left: 12px; font-size: 1.6rem; background: rgba(11,17,32,.7); width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; } .quest-focus-kind { display: inline-block; margin: 14px 0 6px; } .quest-focus h2 { font-size: 1.6rem; margin: 4px 0; } .quest-focus .qf-hint { font-size: 1.1rem; color: var(--muted); margin: 8px 4px 0; line-height: 1.6; } .big-shot-btn { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); margin-top: 24px; } .photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 0 12px; } .photo-cell { margin: 0; position: relative; } .photo-cell img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; cursor: pointer; background: var(--bg-elev); display: block; } .photo-cell figcaption { font-size: 0.85rem; color: var(--muted); text-align: center; margin-top: 5px; font-weight: 600; } .photo-cell .mini-likes { position: absolute; left: 8px; bottom: 34px; background: rgba(0,0,0,.55); border-radius: 999px; padding: 3px 9px; font-size: 0.8rem; font-weight: 800; color: #fff; } .upload-prog { text-align: center; color: var(--muted); font-size: 1rem; margin: 14px 0; font-weight: 600; } /* ---------- 成就慶祝 ---------- */ .celebrate { position: fixed; inset: 0; z-index: 95; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; animation: fade 0.2s ease; } .celebrate-badge { width: 132px; height: 132px; border-radius: 50%; background: var(--ok); color: var(--ok-ink); display: grid; place-items: center; font-size: 4.6rem; font-weight: 900; animation: pop 0.5s cubic-bezier(.17,.89,.32,1.28); box-shadow: 0 12px 48px color-mix(in srgb, var(--ok) 40%, transparent); } @keyframes pop { from { transform: scale(0); } 60% { transform: scale(1.15); } } .celebrate h2 { font-size: 2rem; margin: 20px 0 6px; } .celebrate p { font-size: 1.15rem; color: var(--muted); margin: 2px 0; } .celebrate .celebrate-photo { width: 210px; max-width: 62vw; border-radius: 18px; margin: 18px 0; box-shadow: 0 10px 40px rgba(0,0,0,.5); } .celebrate .btn { min-width: 240px; margin-top: 8px; } .confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 96; } .confetti i { position: absolute; top: -20px; width: 11px; height: 15px; border-radius: 2px; animation: fall linear forwards; } @keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .9; } } /* ---------- 「大家」畫面 ---------- */ .people-row { display: flex; align-items: center; gap: 14px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; } .people-row .pr-main { flex: 1; min-width: 0; } .people-row .pr-name { font-size: 1.1rem; font-weight: 800; } .people-row .pr-count { color: var(--muted); margin-top: 2px; } .people-row .pr-mini-track { height: 8px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; margin-top: 8px; } .people-row .pr-mini-track > i { display: block; height: 100%; background: var(--primary); } /* 資訊區（回顧頁「大家的表現」）：平底、無邊框、無箭頭 —— 跟可按的入口卡明確分開 */ .info-block { background: var(--bg-elev-2); border-radius: var(--radius); padding: 12px 14px 6px; margin: 0 0 12px; } .info-block .ib-head { font-weight: 800; margin-bottom: 8px; } .info-block .people-row { background: transparent; border: 0; padding: 8px 0; margin-bottom: 0; } .info-block .people-row + .people-row { border-top: 1px solid var(--line); } .hero.hero-tight { padding: 6px 2px 10px; } .hero.hero-tight h2 { font-size: 1.35rem; } .hero.hero-tight p { font-size: 0.95rem; } /* 旅伴列（行程頁）：可點開清單；未加入的頭像半透明、24 小時內加入的掛「新」 */ .crew-btn { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 10px 2px; margin: 2px 0 4px; } .crew-btn .avatars { margin: 0; flex: 1; } .crew-btn .crew-label { flex: none; color: var(--muted); font-weight: 700; white-space: nowrap; } .crew-btn .avatar.ghost { opacity: 0.38; } .crew-wrap { position: relative; display: inline-flex; } .crew-new { position: absolute; right: -4px; top: -6px; background: var(--heart); color: #fff; font-size: 0.62rem; font-weight: 800; border-radius: 999px; padding: 1px 5px; box-shadow: 0 0 0 2px var(--bg); } .crew-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px; } .crew-row + .crew-row { border-top: 1px solid var(--line); } .crew-row .cr-main { flex: 1; min-width: 0; } .crew-row .cr-name { font-weight: 800; font-size: 1.05rem; } .crew-row .cr-line { color: var(--muted); font-size: 0.92rem; margin-top: 2px; } .crew-row .cr-line.ok { color: var(--ok, #6cd39a); } /* 有人加入的橫幅（行程頁，一次性） */ .join-banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--heart) 16%, var(--bg-elev)); border: 1px solid var(--heart); font-weight: 800; } .join-banner .jb-x { margin-left: auto; min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev-2); color: var(--text); } .feed-item { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; } .feed-item .fi-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; } .feed-item .fi-who { font-weight: 800; } .feed-item .fi-what { color: var(--muted); font-size: 0.9rem; } .feed-item img.fi-photo { width: 100%; display: block; max-height: 460px; object-fit: cover; background: var(--bg-elev-2); } .feed-item .fi-actions { display: flex; gap: 8px; padding: 12px 14px; flex-wrap: wrap; } .react-btn { appearance: none; border: 1px solid var(--line); background: var(--bg-elev-2); border-radius: 999px; padding: 10px 16px; min-height: 46px; font-weight: 800; cursor: pointer; color: var(--text); display: inline-flex; align-items: center; gap: 6px; } .react-btn.on { background: color-mix(in srgb, var(--heart) 22%, transparent); border-color: var(--heart); } .react-btn:active { transform: scale(0.95); } .feed-item .fi-comments { padding: 0 14px 12px; } .fi-comment { font-size: 0.95rem; margin: 4px 0; } .fi-comment b { font-weight: 800; } .fi-comment-add { display: flex; gap: 8px; margin-top: 8px; } .fi-comment-add .field { flex: 1; } /* ---------- Toast ---------- */ #toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px); transform: translate(-50%, 12px); background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--line); padding: 14px 22px; border-radius: 999px; font-size: 1rem; font-weight: 600; max-width: 92vw; text-align: center; opacity: 0; transition: opacity 0.22s, transform 0.22s; z-index: 70; box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45); } #toast.show { opacity: 1; transform: translate(-50%, 0); } /* ---------- Modal ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(5, 8, 16, 0.62); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; z-index: 80; animation: fade 0.15s ease; } /* 對話框內容比螢幕高時要能捲動。少了 max-height + overflow，卡片會往上長到螢幕外面 （overlay 是 position:fixed + align-items:flex-end），上面的選項就永遠點不到， 而且怎麼滑都沒反應。景點多、字級調大的時候特別明顯。 */ .modal-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 24px 24px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); width: 100%; max-width: var(--maxw); animation: slideup 0.22s ease; max-height: 92vh; max-height: 92dvh; /* 手機網址列會伸縮，dvh 才準 */ display: flex; flex-direction: column; } @keyframes slideup { from { transform: translateY(40px); } } .modal-title { margin: 0 0 14px; font-size: 1.2rem; flex: none; } .modal-body { margin-bottom: 18px; font-size: 1.05rem; flex: 1 1 auto; min-height: 0; /* min-height:0 才會真的縮、才會出現捲軸 */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .modal-body p { margin: 0; } /* flex:1（＝1 1 0%）會把按鈕壓成等寬，特大字級下「測試並儲存」「套用這個順序」 就在按鈕裡折成兩行。改成 basis:auto ＋ 允許整列換行：放得下就並排，放不下就 整顆換到下一行變成滿版 —— 對長輩反而更好按。 */ .modal-actions { display: flex; gap: 12px; flex: none; flex-wrap: wrap; } .modal-actions .btn { flex: 1 1 auto; } .member-pick { display: flex; flex-direction: column; gap: 10px; } .member-pick .btn { margin: 0; } /* ---------- 表單 ---------- */ .form .form-field { display: block; margin-bottom: 20px; } .form-label { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 8px; } .form-hint { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 8px; line-height: 1.5; } .field { width: 100%; background: var(--bg-elev); border: 2px solid var(--line); border-radius: 14px; padding: 14px; color: var(--text); min-height: var(--tap); } .field:focus { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 0; border-color: var(--primary); } textarea.field { resize: vertical; line-height: 1.6; } .chip-input { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; font-size: 1rem; font-weight: 600; min-height: 46px; } .chip-x { appearance: none; border: 0; background: transparent; color: var(--muted); font-size: 1.4rem; cursor: pointer; line-height: 1; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -8px -12px -8px 0; border-radius: 50%; flex: none; touch-action: manipulation; } .chip-x:active { background: var(--bg-elev-2); } .chip-add { cursor: pointer; color: var(--primary); font-weight: 800; } /* ---------- 階層選景點 ---------- */ .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 10px; } .crumb-btn { appearance: none; border: 0; background: transparent; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; padding: 4px 6px; border-radius: 8px; min-height: 44px; /* 麵包屑也要好按 */ } .crumb-btn.cur { color: var(--text); } .crumb-sep { color: var(--muted); margin: 0 2px; } .picker { min-height: 60px; } .pick-big { appearance: none; border: 2px solid var(--line); background: var(--bg-elev); color: var(--text); border-radius: 16px; padding: 16px 18px; font-weight: 800; font-size: 1.05rem; cursor: pointer; min-height: 58px; flex: 1 1 40%; } .pick-big:active { transform: scale(0.97); } .chip-sm { padding: 8px 12px; font-size: 0.9rem; min-height: 40px; } .quick-pick button.chip-sm.on, .quick-pick button.chip-sm[class*="on"] { border-color: var(--primary); } .place-card { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; display: flex; align-items: flex-start; gap: 12px; background: var(--bg-elev); border: 2px solid var(--line); border-radius: 16px; padding: 14px; cursor: pointer; } .place-card:active { transform: scale(0.99); } .place-card.on { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--bg-elev)); } .pc-emoji { font-size: 1.7rem; flex: none; line-height: 1.2; } .pc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .pc-city { color: var(--muted); font-size: 0.85rem; font-weight: 600; } .pc-name { font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pc-blurb { color: var(--muted); font-size: 0.92rem; line-height: 1.5; } .pc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; } .pc-add { flex: none; align-self: center; font-weight: 800; font-size: 0.95rem; color: var(--muted); min-width: 44px; text-align: center; } .place-card.on .pc-add { color: var(--ok); } .tag-hot { color: var(--heart); border-color: color-mix(in srgb, var(--heart) 45%, transparent); background: color-mix(in srgb, var(--heart) 12%, transparent); } .tag-must { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); font-size: 0.72rem; padding: 2px 7px; } .picked-bar { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px); background: var(--bg-elev-2); border: 1px solid var(--primary); border-radius: 14px; padding: 10px 12px; margin-top: 14px; z-index: 5; } .pb-count { font-weight: 800; font-size: 0.9rem; } .pb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 96px; overflow-y: auto; } .quick-pick { display: flex; flex-wrap: wrap; gap: 10px; } .quick-pick button { appearance: none; border: 2px solid var(--line); background: var(--bg-elev); color: var(--text); border-radius: 14px; padding: 12px 16px; font-weight: 700; cursor: pointer; min-height: 50px; } .quick-pick button:active { transform: scale(0.96); } .quick-pick button.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, transparent); } .search-results { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .search-results button { appearance: none; text-align: left; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); border-radius: 14px; padding: 14px; font-weight: 700; cursor: pointer; min-height: var(--tap); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); } .setting-row > span:first-child { min-width: 0; } .setting-row > button { max-width: 60%; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); } /* 設定裡的開關：畫成看得出「開 / 關」的滑動開關。 原本是預設的小方框（30px），長輩既不容易點到，也看不出來現在是開還關。 */ .switch-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; cursor: pointer; position: relative; width: 68px; height: 40px; margin: 2px 0 0; border-radius: 999px; background: var(--bg-elev-2); border: 2px solid var(--line); transition: background 0.18s, border-color 0.18s; } .switch-row input[type="checkbox"]::after { /* 圓鈕 */ content: ''; position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; border-radius: 50%; background: var(--muted); transition: transform 0.18s, background 0.18s; } .switch-row input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); } .switch-row input[type="checkbox"]:checked::after { transform: translateX(28px); background: #fff; } .switch-row input[type="checkbox"]:active::after { width: 34px; } .seg { display: flex; gap: 0; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; } .seg button { appearance: none; border: 0; background: var(--bg-elev); color: var(--muted); padding: 12px 16px; font-weight: 800; cursor: pointer; flex: 1; min-height: var(--tap); } .seg button.on { background: var(--primary); color: var(--primary-ink); } .danger-zone { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); } .danger-zone .btn { margin-top: 12px; } .storage-box { flex-direction: column; align-items: stretch; gap: 10px; } .storage-bar { height: 10px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; } .storage-bar > i { display: block; height: 100%; background: var(--primary); } .about { flex-direction: column; align-items: stretch; gap: 8px; cursor: default; } .about p { margin: 0; } /* ---------- 相簿 / 影片 ---------- */ .poster-frame { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.35); max-width: 100%; } .poster-canvas { display: block; width: 100%; height: auto; } /* 一天一張的模式：容器鎖固定高度，短的那天置中留白 —— 翻頁時版面完全不動 */ .poster-frame.paged { position: relative; height: min(60vh, 560px); display: flex; align-items: center; justify-content: center; background: var(--bg-elev-2); box-shadow: none; } .poster-frame.paged .poster-canvas { width: auto; height: auto; max-width: 100%; max-height: 100%; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } .poster-ghost { position: absolute; pointer-events: none; } .album-frame { position: relative; border-radius: 18px; overflow: hidden; background: var(--bg); width: fit-content; margin: 0 auto; } .album-canvas { display: block; width: auto; max-width: 100%; height: 46vh; margin: 0 auto; aspect-ratio: 9 / 16; object-fit: contain; background: var(--bg); } /* 進度條可以拖（v1.47）：加高觸控區、加圓點，時間顯示在下面 */ .scrub { position: relative; height: 20px; background: rgba(255, 255, 255, 0.15); cursor: pointer; touch-action: none; } .scrub > i { display: block; height: 100%; width: 0; background: var(--primary); } .scrub-knob { position: absolute; top: 50%; left: -10px; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); pointer-events: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .scrub-time { padding: 6px 10px; text-align: center; font-size: 0.92rem; color: var(--muted); background: var(--bg); font-variant-numeric: tabular-nums; } /* v1.73：三個東西都 nowrap、中間那個還有 130px 的硬底線 —— 320px×特大字級時 整頁被推寬到 365px，可以左右捲。兩顆按鈕的文字不能折（「下一張 ›」拆行很醜）， 所以讓中間的標籤負責讓步：可折行、可縮到比內容窄。 */ .pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; margin: 10px 0 2px; } .pager-btn { min-height: 44px; white-space: nowrap; flex: 0 0 auto; } .pager-lbl { font-weight: 700; flex: 1 1 120px; min-width: 0; text-align: center; line-height: 1.4; } .record-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(5, 8, 16, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px; } .record-pct { font-size: 2rem; font-weight: 800; } .music-pick { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .music-pick button { appearance: none; text-align: left; border: 2px solid var(--line); background: var(--bg-elev); color: var(--text); border-radius: 14px; padding: 14px; font-weight: 700; cursor: pointer; min-height: var(--tap); } .music-pick button.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); } .mp-head { font-size: 0.82rem; color: var(--muted); margin: 6px 0 0; } .mp-row { display: grid; grid-template-columns: 1fr 52px 52px; gap: 8px; } .mp-row.compact { grid-template-columns: 1fr 52px; } .mp-row.compact > button:first-child { min-height: 44px; padding: 8px 12px; } .mp-cat { display: block; font-weight: 800; } .mp-title { display: block; font-size: 0.86rem; color: var(--muted); margin-top: 2px; } .mp-row button.on .mp-title { color: inherit; } .music-pick .mp-alt { min-height: 48px; text-align: center; padding: 0; font-size: 1.0rem; } .mp-all:empty { display: none; } .mp-all { border-left: 3px solid var(--line, #39415a); padding-left: 8px; display: flex; flex-direction: column; gap: 8px; } .mp-expand { margin: 2px 0; } .music-pick .mp-prev { min-height: 48px; text-align: center; padding: 0; font-size: 1.05rem; } .music-src ul { margin: 8px 0; padding-left: 20px; } .music-src li { margin: 4px 0; } .music-src a { color: var(--primary); word-break: break-all; } .photo-view { display: flex; flex-direction: column; gap: 14px; } .photo-view img { width: 100%; border-radius: 14px; max-height: 56vh; object-fit: contain; background: #000; } .photo-view-actions { display: flex; gap: 10px; } .photo-view-actions .btn { flex: 1; } .spot-hero { justify-content: space-between; } .wiki-box { display: flex; gap: 14px; align-items: center; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 12px 0; } .wiki-box img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; flex: none; } .wiki-text { min-width: 0; } .wiki-text p { margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- 日期範圍選擇 ---------- */ .date-range-btn { appearance: none; width: 100%; text-align: left; font: inherit; cursor: pointer; display: flex; align-items: center; gap: 12px; background: var(--bg-elev); border: 2px solid var(--line); border-radius: 14px; padding: 16px 14px; color: var(--text); min-height: var(--tap); } .date-range-btn.has-val { border-color: var(--primary); } .date-range-btn:active { transform: scale(0.99); } .drb-icon { font-size: 1.4rem; flex: none; } .drb-placeholder { color: var(--muted); font-weight: 600; } .drb-val { font-weight: 800; flex: 1; min-width: 0; } .drb-edit { color: var(--primary); font-weight: 800; font-size: 0.9rem; flex: none; } .cal-card { max-width: 460px; margin: 0 auto; border-radius: 24px; } .cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .cal-title { font-size: 1.15rem; font-weight: 800; } .cal-arrow { appearance: none; border: 2px solid var(--line); background: var(--bg-elev); color: var(--text); border-radius: 12px; width: 52px; height: 52px; flex: none; font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; } .cal-arrow:active { transform: scale(0.94); } /* v1.73：`1fr` 是 `minmax(auto, 1fr)`，而 `auto` 的下限是格子的 min-content —— .cal-cell 有 min-height:44px + aspect-ratio:1，min-content 寬度就變成 44px， 7×44+24 = 332 > 320px 的對話框，日曆整個推出去。minmax(0,1fr) 拆掉那個下限： 格子變成「寬度照分、高度仍保 44px」，觸控區沒有變小。 */ .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .cal-wd { text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--muted); padding: 4px 0; } .cal-cell { appearance: none; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; aspect-ratio: 1; min-height: 44px; border-radius: 12px; display: grid; place-items: center; } .cal-cell.cal-blank { visibility: hidden; } .cal-cell:active { transform: scale(0.92); } .cal-today { box-shadow: inset 0 0 0 2px var(--line); } .cal-mid { background: color-mix(in srgb, var(--primary) 22%, transparent); border-radius: 0; } .cal-start, .cal-end, .cal-single { background: var(--primary); color: var(--primary-ink); } .cal-start:not(.cal-single) { border-radius: 12px 0 0 12px; } .cal-end { border-radius: 0 12px 12px 0; } .cal-summary { text-align: center; font-weight: 700; color: var(--muted); margin: 14px 4px 4px; line-height: 1.5; min-height: 2.6em; } .cal-card .btn-big { margin-top: 6px; } /* ---------- 折疊式任務清單 ---------- */ .qcollapse { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); overflow: hidden; margin-bottom: 12px; border-left: 4px solid var(--theme-accent, var(--primary)); } .qc-theme { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-top: 2px; } .qc-head { display: flex; align-items: stretch; } .qc-toggle { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 16px 14px; cursor: pointer; text-align: left; } .qc-toggle:active { background: var(--bg-elev-2); } .qc-emoji { font-size: 1.5rem; flex: none; } .qc-name { font-size: 1.1rem; font-weight: 800; flex: 1; min-width: 0; line-height: 1.25; } .qc-prog { flex: none; font-size: 0.9rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; background: var(--bg-elev-2); color: var(--muted); } .qc-prog.part { color: var(--accent); } .qc-prog.done { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); } .qc-chev { flex: none; color: var(--muted); font-size: 0.9rem; width: 1.2em; text-align: center; } /* .qc-edit 已移除：那顆「編輯」會把長輩帶到景點頁，而拍照按鈕在那裡， 於是「編輯」看起來就成了加照片的入口。景點管理現在集中在「調整每天的行程」。 */ .qc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; } .qcollapse.open .qc-body { grid-template-rows: 1fr; } .qc-inner { overflow: hidden; min-height: 0; padding: 4px 12px 2px; } .qc-inner .qbig:last-child { margin-bottom: 12px; } /* ---------- 總行程編輯 ---------- */ .plan-tip { font-size: 0.88rem; color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin: 0 2px 16px; } .plan-list { display: block; } .plan-divider { /* v1.70.2：要能換行。v1.69 之後這一列最多會有四個東西（第 N 天／N 個景點／ ✨ 排順序／🕘 出發時刻／⚠️ 檢查），390px 排不下就會把「第 1 天」擠成直排 —— 實機截圖才看得出來，斷言只驗按鈕存不存在抓不到。 */ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 22px 2px 10px; padding-bottom: 6px; border-bottom: 2px solid var(--line); } .pd-day, .pd-count { flex: 0 0 auto; white-space: nowrap; } .pd-count { margin-right: auto; } /* 按鈕靠右，但排不下時整組換到下一行 */ .plan-divider:first-child { margin-top: 4px; } .pd-day { font-size: 1.15rem; font-weight: 800; } .pd-count { font-size: 0.85rem; font-weight: 700; color: var(--muted); } .plan-empty { border: 2px dashed var(--line); border-radius: 14px; padding: 18px 14px; text-align: center; color: var(--muted); font-weight: 600; margin-bottom: 10px; } .plan-row { display: flex; align-items: stretch; gap: 8px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 8px; margin-bottom: 8px; } .plan-row.is-dragging { opacity: 0.35; } .plan-ghost { background: var(--bg-elev-2); border: 2px solid var(--primary); border-radius: 16px; padding: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); opacity: 0.96; display: flex; gap: 10px; } .plan-handle { appearance: none; border: 0; background: var(--bg-elev-2); color: var(--muted); border-radius: 10px; width: 42px; flex: none; font-size: 1.3rem; cursor: grab; touch-action: none; display: grid; place-items: center; } .plan-handle:active { cursor: grabbing; background: var(--primary); color: var(--primary-ink); } .plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; } .plan-name { font-size: 1rem; font-weight: 800; line-height: 1.3; } .plan-time { font-size: 0.85rem; color: var(--muted); font-weight: 700; } /* 兩顆等寬、圖示在前、數量用固定寬度的小徽章 —— 不然「改任務（3）」跟「景點設定」長度不同，一排看起來歪的 */ /* v1.73.5：1fr 是 minmax(auto, 1fr)，而 auto 的下限是按鈕的 min-content —— 特大字級下兩顆撐大整條，畫到旁邊的 ▲▼ 上。minmax(0,1fr) 拆掉那個下限， 標籤就會照 .plan-mini-t 的設定收成「…」。（跟日期選擇的日曆同一個病。） */ .plan-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; } .plan-row-actions .plan-mini { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 44px; padding: 4px 6px; font-size: 0.85rem; border-radius: 10px; } .plan-mini-ic { font-size: 0.95rem; line-height: 1; flex: none; } /* v1.73.5：nowrap 的標籤在特大字級下比按鈕寬，畫到旁邊的 ▲▼ 上。 跟 .qline-sub 同一個病 —— 排不下就用「…」收掉，不要蓋到別人。 */ .plan-mini-t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .plan-mini-n { min-width: 18px; padding: 0 4px; border-radius: 999px; flex: none; background: var(--bg); color: var(--muted); font-size: 0.72rem; font-weight: 800; text-align: center; } .plan-mini { appearance: none; border: 1px solid var(--line); background: var(--bg-elev-2); color: var(--text); border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 0.9rem; cursor: pointer; min-height: 44px; } .plan-mini:active { transform: scale(0.95); } .plan-updown { display: flex; flex-direction: column; gap: 5px; flex: none; } .plan-arrow { appearance: none; border: 1px solid var(--line); background: var(--bg-elev-2); color: var(--text); border-radius: 10px; width: 44px; min-height: 44px; flex: 1; font-size: 1rem; font-weight: 800; cursor: pointer; } .plan-arrow:active { transform: scale(0.94); } .plan-arrow:disabled { opacity: 0.28; cursor: default; } .plan-addspot { appearance: none; width: 100%; border: 2px dashed var(--line); background: transparent; color: var(--primary); border-radius: 14px; padding: 14px; font-weight: 800; cursor: pointer; min-height: 52px; margin-bottom: 6px; } .plan-addspot:active { transform: scale(0.99); } .plan-day-tools { display: flex; gap: 10px; margin-top: 20px; } .plan-day-tools .btn { flex: 1; margin-top: 0; } .day-move-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .day-move-grid .btn { margin-top: 0; } /* ---------- 緊急求助 ---------- */ #sosFab { position: fixed; right: 12px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); width: 52px; height: 52px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--danger) 60%, #fff); background: var(--danger); color: #fff; font-size: 1.3rem; font-weight: 800; cursor: pointer; z-index: 60; opacity: 0.82; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); display: grid; place-items: center; transition: opacity 0.15s; } #sosFab:active { transform: scale(0.92); opacity: 1; } #sosFab:hover { opacity: 1; } .sos h3 { font-size: 1.1rem; margin: 0 0 12px; } .sos-section { margin-top: 26px; } .sos-help { background: linear-gradient(160deg, color-mix(in srgb, var(--danger) 26%, var(--bg-elev)), var(--bg-elev)); border: 2px solid color-mix(in srgb, var(--danger) 55%, transparent); border-radius: var(--radius); padding: 20px 16px; } .sos-help-big { font-size: 2.1rem; font-weight: 900; text-align: center; letter-spacing: 2px; } .sos-help-sub { text-align: center; color: var(--muted); margin: 6px 0 16px; font-size: 1rem; line-height: 1.6; } .sos-help-sub-en { font-size: 0.9rem; } .sos-people { display: flex; flex-direction: column; gap: 10px; } .sos-person { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: var(--text); min-height: 56px; } .sos-person-name { font-size: 1.15rem; font-weight: 800; } .sos-person-phone { font-size: 1.05rem; color: var(--muted); font-variant-numeric: tabular-nums; } .sos-call { margin-left: auto; background: var(--ok); color: var(--ok-ink); font-weight: 800; padding: 6px 14px; border-radius: 999px; } .sos-none { color: var(--muted); font-size: 0.95rem; } .sos-loc-wrap { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } .sos-loc-title { font-weight: 800; margin-bottom: 6px; } .sos-addr { font-size: 1.1rem; font-weight: 700; } .sos-addr-full { font-size: 0.9rem; color: var(--muted); margin-top: 2px; line-height: 1.5; } .sos-coord { font-family: ui-monospace, monospace; margin-top: 6px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* v1.73：320/360px 時兩顆各分到 ~135px，「🗺️ 打開地圖」放不下就折成兩行。 這是走失時要按的按鈕，折行＝難讀＝更慌。排不下就上下排，不要硬擠。 */ .sos-loc-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .sos-loc-btns .btn { flex: 1 1 145px; text-decoration: none; white-space: nowrap; } .sos-tel-grid { display: flex; flex-direction: column; gap: 10px; } .sos-tel { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; text-decoration: none; padding: 16px 18px; min-height: 62px; background: color-mix(in srgb, var(--danger) 14%, transparent); } .sos-tel-label { font-size: 1.05rem; font-weight: 800; min-width: 0; } .sos-tel-num { font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 1px; flex: none; white-space: nowrap; } .sos-near-group { margin-bottom: 18px; } .sos-near-head { font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; } .sos-near-item { display: flex; align-items: center; gap: 10px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; } .sos-near-main { flex: 1; min-width: 0; } .sos-near-name { font-weight: 700; } .sos-near-acts { display: flex; gap: 8px; flex: none; } .sos-near-acts .sm-btn { min-height: 44px; padding: 8px 12px; text-decoration: none; font-size: 1.1rem; } .sm-btn { min-height: 44px; padding: 8px 14px; flex: none; } .member-row { display: flex; align-items: center; gap: 10px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; } .member-row-main { flex: 1; min-width: 0; } .contact-row { display: flex; align-items: center; gap: 10px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; } .contact-row-main { flex: 1; min-width: 0; } /* ---------- 天氣 ---------- */ .wx-slot { margin-top: 14px; } .wx-strip { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--bg-elev)), var(--bg-elev)); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; } .wx-strip:active { transform: scale(0.99); } .wx-strip-days { display: flex; justify-content: space-between; gap: 4px; } .wx-strip-day { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; font-size: 0.8rem; } .wx-strip-ic { font-size: 1.5rem; } .wx-strip-t { font-weight: 800; } .wx-strip-tip { margin-top: 10px; font-size: 0.95rem; font-weight: 600; line-height: 1.5; } .wx-advice { background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--radius); padding: 16px; } .wx-advice.wx-ok { background: color-mix(in srgb, var(--ok) 12%, var(--bg-elev)); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .wx-advice-head { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; } .wx-advice-list { margin: 0; padding-left: 4px; list-style: none; } .wx-tip { padding: 8px 0 8px 26px; position: relative; line-height: 1.6; border-top: 1px solid var(--line); } .wx-tip:first-child { border-top: 0; } .wx-tip::before { position: absolute; left: 0; top: 8px; } .wx-cold::before { content: '🧥'; } .wx-cool::before { content: '🧥'; } .wx-snow::before { content: '❄️'; } .wx-rain::before { content: '☔'; } .wx-hot::before { content: '☀️'; } .wx-wind::before { content: '💨'; } .wx-alt::before { content: '⛰️'; } .wx-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; } .wx-day { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px; text-align: center; } .wx-day-date { font-weight: 800; } .wx-day-sub { font-size: 0.75rem; color: var(--muted); } .wx-day-icon { font-size: 2rem; margin: 4px 0; } .wx-day-txt { font-size: 0.8rem; color: var(--muted); } .wx-day-temp { margin-top: 4px; font-size: 1rem; } .wx-day-rain { font-size: 0.78rem; color: var(--primary); margin-top: 3px; font-weight: 700; } /* ---------- 分帳 ---------- */ .exp-summary { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; } .exp-total { text-align: center; } /* v1.73：特大字級下 2rem = 50px，「NT$1,250.00」要 340px，320px 的手機直接切掉 尾巴（實機截圖看到的是「NT$1,250.0」）。改成同時受視窗寬度封頂。 */ .exp-total-num { font-size: min(2rem, 9.5vw); font-weight: 900; margin: 4px 0; overflow-wrap: anywhere; } .exp-settle { display: flex; align-items: center; gap: 12px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 14px; } .exp-settle-txt { flex: 1; min-width: 0; } .exp-settle-amt { font-weight: 900; font-size: 1.1rem; color: var(--accent); } /* v1.73：金額（「應收 NT$1,250.00」）的最小寬度是不可斷行的數字，名字那一欄 min-width:0 就被壓到剩一個字的寬 —— 實機截圖是「阿」「嬤」直排、金額壓在上面。 讓整列可以換行：排得下就同一列，排不下金額自己掉到下一行靠右。 */ .exp-person { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; } .exp-person-main { flex: 1 1 120px; min-width: 0; } .exp-person-bal { font-weight: 800; font-size: 0.95rem; flex: 0 0 auto; margin-left: auto; white-space: nowrap; } .exp-person-bal.pos { color: var(--ok); } .exp-person-bal.neg { color: var(--danger); } /* v1.73.5：特大字級下金額（不可斷行的數字）把標題欄擠到只剩 31px， 標題的字就畫出來撞在金額上。排不下就讓金額掉到下一行。 */ .exp-item { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; } .exp-item-cat { font-size: 1.5rem; flex: none; } .exp-item-main { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .exp-item-title { font-weight: 700; overflow-wrap: anywhere; } .exp-item-amt { font-weight: 800; font-variant-numeric: tabular-nums; flex: 0 0 auto; margin-left: auto; white-space: nowrap; } .exp-form .form-field { margin-bottom: 16px; } .numpad-row { display: flex; align-items: stretch; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } /* 輸入框吃剩下的空間。.field 本身是 width:100%，在 flex 列裡要用 flex-basis 蓋掉， 否則它會先要 100% 再壓縮旁邊的按鈕。180px 的 basis 讓「窄到放不下」時整個換行， 而不是把按鈕壓扁。 */ .numpad-row .field { flex: 1 1 140px; width: auto; min-width: 0; } /* nowrap 是重點：沒有它，「📋 貼上」會在 84px 裡折成三行、把整列撐到 98px （特大字級 120px），輸入框跟著 stretch，看起來就是歪的。 */ .numpad-row .btn { flex: 0 0 auto; min-width: 84px; font-size: 1.1rem; white-space: nowrap; } .numpad-display { flex: 1; background: var(--bg); border: 2px solid var(--line); border-radius: 14px; display: flex; align-items: center; justify-content: flex-end; padding: 0 18px; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; min-height: 60px; } .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; } .numpad-key { appearance: none; border: 2px solid var(--line); background: var(--bg-elev); color: var(--text); border-radius: 14px; font-size: 1.5rem; font-weight: 800; padding: 14px 0; cursor: pointer; min-height: 56px; } .numpad-key:active { transform: scale(0.95); background: var(--bg-elev-2); } .numpad-del { color: var(--danger); } .exp-part { display: flex; align-items: center; gap: 10px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; } .exp-part.on { border-color: var(--primary); } .exp-part input[type="checkbox"] { width: 26px; height: 26px; flex: none; accent-color: var(--primary); } .exp-part-name { flex: 1; font-weight: 600; } .exp-share { width: 76px; min-height: 40px; padding: 6px 8px; text-align: center; } /* ---------- 成就徽章 ---------- */ .pr-badges { font-size: 0.85rem; margin-left: 8px; color: var(--accent); font-weight: 800; } /* ---------- 示意圖：出處標示與佔位 ---------- */ /* Wikimedia 的圖多是 CC 授權，要標作者與授權條款；美食用的是「該道菜」的通用照， 要寫明是示意圖，不然會被當成該店實照。字小、壓在圖片下緣，不搶版面。 */ .img-credit { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 10px 10px 5px; font-size: 0.68rem; line-height: 1.3; font-weight: 600; color: rgba(255, 255, 255, 0.82); background: linear-gradient(transparent, rgba(0, 0, 0, 0.62)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* 抓不到圖時的主題色塊：不留白，而且 emoji 維持大的、置中（不像有照片時縮到角落） */ .qline-thumb.is-placeholder, .qline-photo.is-placeholder, .qbig-photo.is-placeholder, .quest-focus-photo.is-placeholder { background-size: cover; background-position: center; } .qline-thumb.is-placeholder .qline-emoji, .qline-photo.is-placeholder .qbig-emoji, .qbig-photo.is-placeholder .qbig-emoji, .quest-focus-photo.is-placeholder .qf-emoji { position: static; background: none; width: auto; height: auto; } .quest-focus-photo .img-credit { padding: 12px 12px 8px; font-size: 0.72rem; } /* ---------- 景點頁的任務列（唯一該做的事＝加照片）---------- */ /* 實測長輩看到任務旁的「編輯」會下意識按下去，以為那是加照片的入口， 所以這一列現在只剩兩顆加照片的按鈕，改任務移到「調整每天的行程」。 */ .qrow { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 14px; } .qrow.done { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); } .qrow-head { display: flex; align-items: flex-start; gap: 12px; } .qrow-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--bg-elev-2); display: grid; place-items: center; font-size: 1.3rem; } .qrow.done .qrow-icon { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); } .qrow-main { flex: 1; min-width: 0; } .qrow-title { font-weight: 800; font-size: 1.08rem; line-height: 1.4; } .qrow-status { font-size: 0.9rem; font-weight: 700; color: var(--muted); margin-top: 6px; } .qrow-status.is-done { color: var(--ok); } .qrow-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .qrow-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--bg-elev-2); cursor: pointer; display: block; } /* 兩顆並排，總高度跟一顆大按鈕一樣 —— 少一層選單，字面上就說清楚各自會做什麼 */ .addphoto-row { display: flex; gap: 10px; margin-top: 12px; } .addphoto-row .btn { flex: 1; min-width: 0; min-height: 56px; font-size: 1.05rem; padding: 10px 8px; } /* 景點頁底部的管理區（預設收合，長輩不會誤觸） */ .manage-box { margin-top: 30px; border-top: 1px solid var(--line); } .manage-head { appearance: none; width: 100%; background: none; border: 0; color: var(--muted); display: flex; align-items: center; justify-content: space-between; padding: 18px 2px; font: inherit; font-weight: 800; cursor: pointer; min-height: var(--tap); } .manage-body { padding-bottom: 8px; } /* ---------- 照片標記 ---------- */ .untag-dot { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 800; pointer-events: none; } .untag-cta { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-elev); border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 16px; padding: 14px 16px; margin-top: 14px; min-height: var(--tap); } .untag-cta:active { transform: scale(0.99); } .untag-cta-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .fi-photo-btn { appearance: none; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; } .tagger-overlay { align-items: center; padding: 10px; } .tagger { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); width: 100%; max-width: var(--maxw); max-height: 92vh; overflow-y: auto; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); } .tagger-head { position: sticky; top: 0; z-index: 2; background: var(--bg-elev); display: flex; align-items: center; justify-content: space-between; padding: 12px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; } .tagger-count { font-weight: 800; color: var(--muted); } .tagger-close { appearance: none; border: 1px solid var(--line); background: var(--bg-elev-2); color: var(--text); border-radius: 12px; width: 48px; height: 48px; font-size: 1.2rem; cursor: pointer; flex: none; } .tagger-photo { width: 100%; max-height: 42vh; object-fit: contain; background: #000; border-radius: 14px; display: block; } .tagger-where { font-weight: 800; margin-top: 10px; } .tagger-saved { font-size: 0.9rem; font-weight: 700; color: var(--muted); margin-top: 2px; } .tagger-label { font-weight: 800; font-size: 1.05rem; margin: 20px 0 10px; } .tagger-sub { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-top: 3px; } .tagger-chips { display: flex; flex-wrap: wrap; gap: 10px; } .tagger-chip { appearance: none; cursor: pointer; font: inherit; border: 2px solid var(--line); background: var(--bg-elev-2); color: var(--text); border-radius: 14px; padding: 12px 18px; font-weight: 800; font-size: 1.05rem; min-height: 54px; min-width: 88px; } .tagger-chip:active { transform: scale(0.96); } .tagger-chip.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 22%, transparent); } .tagger-chip.ghost { font-weight: 700; color: var(--muted); } .tagger-chip.ghost.on { color: var(--text); } .tagger-nav { display: flex; gap: 10px; margin-top: 24px; } .tagger-nav .btn { flex: 1; min-height: 54px; } .tagger-more { display: flex; gap: 10px; margin-top: 18px; justify-content: center; } /* ---------- 「調整每天的行程」裡的任務編輯 ---------- */ .plan-row { display: block; } .plan-row-top { display: flex; align-items: stretch; gap: 10px; } .plan-ghost { display: block; } .plan-row-actions { flex-wrap: wrap; } .plan-quests { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); } .pq-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bg-elev-2); } .pq-main { flex: 1; min-width: 0; } .pq-title { font-weight: 700; line-height: 1.4; } .pq-btns { display: flex; gap: 8px; flex: none; } .badge-who { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; } .badge-who-btn { appearance: none; border: 2px solid var(--line); background: var(--bg-elev); color: var(--text); border-radius: 999px; padding: 6px 14px 6px 6px; display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; flex: none; } .badge-who-btn.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); } .badge-count { font-size: 1.1rem; font-weight: 800; margin-bottom: 12px; } .badge-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; } .badge-stat { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 10px 4px; text-align: center; } .badge-stat b { display: block; font-size: 1.3rem; } .badge-stat span { font-size: 0.75rem; color: var(--muted); } .badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .badge-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 16px 12px; text-align: center; opacity: 0.55; } .badge-card.got { opacity: 1; border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev)); } .badge-emoji { font-size: 2.4rem; } .badge-name { font-weight: 800; margin: 6px 0 3px; } .badge-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.5; } /* ---------- 行程回顧 ---------- */ .recap-head { text-align: center; padding: 10px 0 18px; } .recap-title { font-size: 1.7rem; font-weight: 900; line-height: 1.3; } /* v1.73.5：使用者實機回報「2026-09-05 – 2026-09-07 · 3 天 · 4 人」折行後 「3」孤立在行尾、「天 · 4 人」跑到第二行。原因是整串是一個字串，日期那一段 又是不可斷行的數字串 —— 特大字級下比容器寬，只能在奇怪的地方斷。 改成每一段各自 nowrap、整體可換行：日期一行、天數人數一行，數字和量詞永遠不分家。 */ .recap-sub { color: var(--muted); margin-top: 6px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 10px; } .recap-sub > span { white-space: nowrap; } /* 日期本身在 320px×特大字級仍然可能比整列寬 —— 讓它跟著視窗縮，不要溢出 */ .recap-sub .recap-dates { font-size: min(1em, 4.4vw); } .recap-opening { font-size: 1.05rem; line-height: 1.7; margin: 0 0 16px; text-align: center; } .recap-closing { font-size: 1.05rem; line-height: 1.6; margin: 16px 0 0; text-align: center; color: var(--muted); font-style: italic; } /* AI 生成內容的小標記 —— 明顯但不吵 */ .ai-mark { color: #d4a017; font-size: 0.85em; vertical-align: 2px; } .spot-blurb { line-height: 1.7; margin: 12px 0 4px; color: var(--fg); } /* v1.73.5：欄寬下限本來是固定的 90px，但數字字級是 1.6rem —— 特大字級下變成 40px， 「51/51」要 110px，直接畫出格子撞到隔壁（使用者截圖是「51/51117.3」黏在一起）。 下限改成**跟著字級走**（em），特大字級時格子自然變少變寬，一列排不下就換行。 */ .recap-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.6em, 1fr)); gap: 10px; margin-bottom: 18px; } .recap-num { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 14px 6px; text-align: center; min-width: 0; } .recap-num-ic { font-size: 1.5rem; } /* 再加一道：數字本身也受格子寬度封頂，並允許在任何位置斷 —— 「117.3」這種還是可能比 5.6em 寬（單位不同、位數不同）。 */ .recap-num-n { font-size: min(1.6rem, 9vw); font-weight: 900; margin: 2px 0; overflow-wrap: anywhere; } .recap-num-l { font-size: 0.78rem; color: var(--muted); } .recap-line { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; } .recap-line-ic { font-size: 1.2rem; flex: none; } .recap-foods { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } .recap-food { text-align: center; } .recap-food-ph { width: 100%; aspect-ratio: 1; border-radius: 12px; background: var(--bg-elev-2) center/cover no-repeat; display: grid; place-items: center; font-size: 1.8rem; } .recap-food-t { font-size: 0.8rem; margin-top: 4px; line-height: 1.4; } .recap-person { display: flex; align-items: center; gap: 12px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; } .recap-person-main { flex: 1; min-width: 0; } .recap-badges { display: flex; flex-wrap: wrap; gap: 8px; } .recap-badge { background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 0.9rem; } /* ---------- 匯入行程表 ---------- */ /* 來源選擇：三顆大按鈕，長輩一眼看得出差別 */ .imp-src { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--bg-elev); border: 2px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; color: var(--text); min-height: var(--tap); cursor: pointer; } .imp-src:active { background: var(--bg-elev-2); } .imp-src-i { font-size: 1.8rem; flex: none; } .imp-src-t { display: block; font-weight: 800; font-size: 1.05rem; } .imp-src-s { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 2px; } .imp-note { background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 12px; padding: 12px 14px; font-size: 0.9rem; line-height: 1.6; } /* 建立頁的「已匯入」提示條 */ .imp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: color-mix(in srgb, var(--ok) 14%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); border-radius: 12px; padding: 10px 12px; margin-top: 8px; font-weight: 700; font-size: 0.9rem; } /* 確認清單 */ .imp-sum { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 8px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; } .imp-warn-c { color: var(--accent); font-weight: 700; } .imp-day { font-weight: 800; font-size: 0.95rem; margin: 14px 0 8px; color: var(--muted); } .imp-row { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; } .imp-row.off { opacity: 0.45; } .imp-r1 { display: flex; align-items: center; gap: 6px; } /* 三個窄欄位排成等寬三欄。擠在同一行會被截成「第 1 ラ」「-- --:-」那種樣子 */ .imp-r2 { display: grid; grid-template-columns: 78px 1.35fr 1fr; gap: 6px; margin-top: 8px; } .imp-chk-w { display: grid; place-items: center; width: 38px; height: 44px; flex: none; } .imp-chk { width: 26px; height: 26px; accent-color: var(--primary); } .imp-in { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 9px 4px; font-size: 0.9rem; min-height: 44px; min-width: 0; max-width: 100%; } .imp-name { flex: 1 1 auto; min-width: 0; font-weight: 700; padding: 9px 10px; font-size: 1rem; } .imp-badge { flex: none; width: 16px; font-size: 1rem; color: var(--ok); font-weight: 900; } .imp-del { flex: none; width: 44px; height: 44px; border-radius: 10px; background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: 1.1rem; } .imp-warn { font-size: 0.82rem; color: var(--accent); margin-top: 6px; line-height: 1.5; } .imp-add { width: 100%; background: transparent; border: 2px dashed var(--line); color: var(--muted); border-radius: 12px; padding: 12px; font-weight: 700; min-height: 48px; margin-bottom: 4px; } .imp-bad { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--bg-elev); border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; } .imp-bad-t { font-size: 0.85rem; color: var(--muted); word-break: break-all; } .btn-sm { padding: 8px 14px; font-size: 0.85rem; min-height: 40px; border-radius: 10px; } .wait-box { flex-direction: column; gap: 12px; } .wait-text { margin: 0; font-weight: 700; font-size: 1.05rem; text-align: center; } /* ---------- 加到主畫面的引導 ---------- */ .ig-wrap { display: block; } .ig-warn { background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 0.95rem; line-height: 1.6; } .ig-step { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 10px; } .ig-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; font-weight: 900; font-size: 1rem; } .ig-ic { flex: none; width: 34px; display: grid; place-items: center; color: var(--primary); } .ig-emoji { font-size: 1.5rem; line-height: 1; } .ig-txt { flex: 1; min-width: 0; } .ig-t { display: block; font-weight: 800; font-size: 1.02rem; line-height: 1.5; } .ig-s { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 3px; line-height: 1.5; } .ig-after { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 14%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); font-size: 0.92rem; line-height: 1.6; } .ig-banner { display: flex; align-items: center; gap: 10px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 10px 0; } .ig-banner-ic { font-size: 1.4rem; flex: none; } .ig-banner-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; } .ig-banner-x { flex: none; width: 40px; height: 40px; border-radius: 10px; background: transparent; border: none; color: var(--muted); font-size: 1.3rem; } /* 邀請頁：iPhone 要先裝再加入 */ .join-install { background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev)); border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 16px; padding: 16px; margin: 14px 0; } .join-install-t { font-weight: 900; font-size: 1.08rem; margin-bottom: 8px; } .join-install-p { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.65; color: var(--text); } /* 首頁：裝好之後是空的 → 直接給貼上邀請的入口 */ .join-hint { background: color-mix(in srgb, var(--primary) 14%, var(--bg-elev)); border: 2px solid color-mix(in srgb, var(--primary) 50%, transparent); border-radius: 16px; padding: 16px; margin-bottom: 16px; } .join-hint-t { font-weight: 900; font-size: 1.08rem; margin-bottom: 6px; } .join-hint-p { margin: 0 0 14px; font-size: 0.92rem; line-height: 1.6; color: var(--muted); } .ig-help { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--bg-elev-2); border: 1px dashed var(--line); font-size: 0.9rem; line-height: 1.6; color: var(--muted); } /* ---------- 任務列（收合 88px，點開才給大圖） ---------- */ /* 之前每張卡固定 414px，一個螢幕只放得下 1.7 個任務，五個任務的景點要滑 2300px。*/ .qline { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head act" "more more"; align-items: center; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; overflow: hidden; } .qline-head { grid-area: head; appearance: none; border: 0; background: transparent; color: inherit; font: inherit; display: flex; align-items: center; gap: 10px; padding: 8px 2px 8px 8px; min-height: 64px; text-align: left; cursor: pointer; min-width: 0; } .qline-head:active { background: var(--bg-elev-2); } .qline-thumb { flex: none; width: 56px; height: 56px; border-radius: 12px; background: var(--bg-elev-2) center/cover no-repeat; display: grid; place-items: center; position: relative; overflow: hidden; } .qline-emoji { font-size: 1.5rem; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); } .qline-thumb.has-img .qline-emoji { display: none; } .qline-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } /* 字級不縮 —— 縮的是圖與留白。 一行放不下就折第二行，不要截斷：「必吃：包心…／必吃：阿灶…／必吃：當歸…」 三個長得幾乎一樣，等於沒有名字。短名字仍然只佔一行。 */ .qline-title { font-size: 1.05rem; font-weight: 800; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; } /* v1.73.5：使用者實機回報「❤️ 2」的數字被藍色相機按鈕蓋掉一半。 原因是這一列 nowrap —— 特大字級下「✓ 已完成　1 張　❤️ 3」要 211px， 但它的框只有 58px，文字就畫到右邊的按鈕區底下（實測 107→318）。 狀態列本來就短，折成兩行完全可以接受；蓋住數字不行。 */ .qline-sub { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; } .qline.done .qline-sub { color: var(--ok); } .qline-chev { flex: none; color: var(--muted); font-size: 0.8rem; width: 10px; text-align: center; } .qline.open .qline-chev { transform: rotate(90deg); } .qline-act { grid-area: act; display: flex; align-items: center; padding-right: 6px; } .addphoto-icons { display: flex; gap: 5px; } .apx { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 1.35rem; line-height: 1; border: 1px solid var(--line); cursor: pointer; } .apx-cam { background: var(--primary); border-color: var(--primary); } .apx-lib { background: var(--bg-elev-2); } .apx:active { transform: scale(0.94); } /* 展開的部分：預設整塊不佔高度 */ .qline-more { grid-area: more; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.18s ease; } .qline.open .qline-more { grid-template-rows: 1fr; } .qline-more > * { min-height: 0; } .qline-inner { overflow: hidden; } .qline-photo { width: 100%; height: 190px; position: relative; background: var(--bg-elev-2) center/cover no-repeat; display: grid; place-items: center; } .qline-photo.has-img .qbig-emoji { display: none; } .qline-detail { padding: 12px 12px 14px; } .qline-hint { margin: 0 0 10px; color: var(--muted); font-size: 0.95rem; line-height: 1.6; } .qline-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .qline-likes { color: var(--muted); font-size: 0.9rem; font-weight: 700; } .qline-link { appearance: none; border: 0; background: transparent; color: var(--primary); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 4px; margin-left: auto; } /* 景點標題列右邊的地圖小圖示（原本是整寬一顆大按鈕，每個景點省 64px） */ /* 只有一個地圖圖示，很多人不知道那是導航 —— 一定要有字 */ .qc-map { flex: none; width: 46px; height: 48px; align-self: center; margin-right: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 12px; background: var(--bg-elev-2); border: 1px solid var(--line); text-decoration: none; color: var(--text); } .qc-map-ic { font-size: 1.05rem; line-height: 1; } .qc-map-t { font-size: 0.62rem; font-weight: 800; line-height: 1; } .qc-map:active { transform: scale(0.94); } /* ---------- 投稿照片：blob 還沒到時的狀態 ---------- */ /* 之前 blobURL() 抓不到就回空字串， 在畫面上是 0px —— 使用者看到的是「照片消失了」，連載入中都沒有。 */ .ph { display: block; width: 100%; } .ph-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 180px; padding: 24px 16px; background: var(--bg-elev-2); border-radius: 12px; text-align: center; } .ph-state-t { font-weight: 700; font-size: 1rem; } .ph-state-s { font-size: 0.85rem; color: var(--muted); line-height: 1.5; } .ph-retry { min-height: 44px; padding: 10px 18px; background: var(--bg-elev); border: 1px solid var(--line); color: var(--text); } .photo-cell-btn { appearance: none; border: 0; padding: 0; background: none; width: 100%; display: block; cursor: pointer; } .photo-cell-btn .ph-state { min-height: 0; aspect-ratio: 1; padding: 12px; gap: 6px; } .photo-cell-btn .ph-state-t { font-size: 0.9rem; } .photo-cell-btn .ph-state-s { font-size: 0.75rem; } /* ---------- 景點設定頁（只剩改名、時間、停留、刪除） ---------- */ .spot-time-row { display: flex; gap: 8px; align-items: stretch; } .spot-time-row .btn { white-space: nowrap; flex: none; padding: 0 14px; } .spot-time { flex: 1 1 auto; min-width: 0; } .spot-stay { width: 100%; } .del-warn { background: color-mix(in srgb, var(--danger) 14%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: 12px; padding: 14px; line-height: 1.7; font-size: 0.98rem; } /* 調整行程／景點設定：這兩頁多半是年輕人在操作，可以比日常畫面緊湊。 長輩導向的尺寸要求仍然適用於任務頁、照片牆、SOS、加入流程。 */ .page.compact { padding-top: 12px; } .page.compact .form-field { margin-bottom: 12px; } .page.compact .form-label { font-size: 0.95rem; } .page.compact .field { min-height: 46px; padding: 10px 12px; } /* ---- 回憶影片：長度選項與分享網址 ---- */ .len-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; } .len-btn { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; min-height: 62px; padding: 10px 8px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg-elev-2); color: var(--text); font: inherit; cursor: pointer; text-align: center; } .len-btn.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); } .len-t { font-weight: 800; font-size: 1.02rem; } .len-s { font-size: 0.85rem; color: var(--muted); } .share-box { display: flex; flex-direction: column; gap: 10px; } .share-live { font-weight: 700; color: var(--ok, #3fb27f); margin: 0; } .share-url { font-size: 0.86rem; line-height: 1.5; word-break: break-all; user-select: all; padding: 10px 12px; border-radius: 12px; background: var(--bg-elev-2); border: 1px solid var(--line); color: var(--muted); } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* ---- 搜尋景點加入（規劃行程・第 1 批）---- */ .fs-bar { display: flex; gap: 8px; } .fs-bar .field { flex: 1; min-width: 0; } .fs-results { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .fs-row { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--bg-elev-1, var(--bg-elev-2)); } .fs-row.fs-done { opacity: 0.66; } .fs-head { display: flex; align-items: center; gap: 10px; } .fs-main { flex: 1; min-width: 0; } .fs-name { font-weight: 800; font-size: 1.05rem; overflow-wrap: anywhere; } .fs-meta { font-size: 0.85rem; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; } .fs-add { min-height: 42px; white-space: nowrap; flex: none; } .fs-panel { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; } /* 標題與欄位一一對齊的三欄格線：每欄「標題在正上方、欄位撐滿該欄」。 實機回報過標題等距但欄位寬度不一、整個錯位 —— 欄位一律 width:100%、min-width:0。 */ /* v1.51.4：iOS 原生 time input 實寬遠大於 Chrome，三欄同列實機重疊（回報兩次）。 改成「哪一天/停留多久」兩欄一列＋「幾點到」整列 —— 寧可多佔高度也不重疊。 */ .fs-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; } .fs-grid2 > label, .fs-timerow { display: block; min-width: 0; } .fs-grid2 .form-label, .fs-timerow .form-label { display: block; font-size: 0.82rem; color: var(--muted); margin: 0 0 4px; white-space: nowrap; } .fs-grid2 .field { width: 100%; min-width: 0; padding: 10px 6px; font-size: 0.95rem; } .fs-timerow { margin-bottom: 10px; } .fs-timerow .field { width: 100%; min-width: 0; box-sizing: border-box; } .fs-manual .field { margin-bottom: 4px; } .fs-time { position: relative; display: block; min-width: 0; } .fs-time .field:not(.hasval) { color: transparent; } /* 沒值時把 --:-- 也藏掉，只留提示 */ .fs-time-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; padding-left: 10px; color: var(--muted); pointer-events: none; font-size: 0.95rem; } .plan-addrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .plan-addrow .plan-search { white-space: nowrap; } /* ---- 規劃第 2 批：時刻鏈、移動時間、排順序 ---- */ .plan-travel-note { font-size: 0.82rem; color: var(--muted); padding: 2px 0 4px 54px; pointer-events: none; } .plan-travel-note.far { color: #ffb14e; padding-right: 8px; line-height: 1.45; } /* 大眾運輸（v1.68）：實際班次，跟「開車估算」要看得出差別 —— 所以給底色與正常字級， 開車那一行縮成附註。長輩看的是「幾點的車、在哪上車」，那一行不能小。 */ .plan-travel-note.transit { color: var(--text); padding: 8px 10px 8px 54px; line-height: 1.5; background: color-mix(in srgb, var(--primary) 10%, transparent); border-radius: 10px; margin: 2px 0 6px; } .plan-transit-line { font-size: 0.9rem; margin-top: 3px; } .plan-transit-drive { font-size: 0.8rem; color: var(--muted); margin-top: 3px; } .plan-transit-note { font-size: 0.8rem; color: var(--muted); line-height: 1.45; padding: 2px 8px 6px 8px; } /* 行程檢查（v1.69）。一次最多三條、依當天時間先後排（不依嚴重度）： 長輩是照順序讀一天的行程的，而且修最早的那一條通常會連帶解掉後面的。 */ .pd-check { min-height: 40px; padding: 4px 12px; white-space: nowrap; flex: 0 0 auto; } .pd-check.has-issue { border-color: #ffb14e; color: #ffb14e; font-weight: 700; } .pd-start { min-height: 44px; padding: 4px 10px; white-space: nowrap; font-size: 0.85rem; flex: 0 0 auto; } .chk-item { padding: 10px 12px; border-radius: 12px; margin-bottom: 10px; background: color-mix(in srgb, #ffb14e 12%, transparent); } .chk-item.note { background: color-mix(in srgb, var(--muted) 12%, transparent); } .chk-item.done { background: color-mix(in srgb, var(--ok, #4caf50) 12%, transparent); } .chk-t { font-weight: 700; line-height: 1.5; } .chk-a { color: var(--muted); line-height: 1.5; margin-top: 4px; } .chk-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .chk-btns .btn { min-height: 44px; } .plan-eta { font-size: 0.85rem; color: var(--muted); margin-top: 2px; } .plan-eta.warn { color: #ffb14e; font-weight: 700; } /* 使用者自己填的時間打架（v1.67）。比 .plan-eta.warn 更明顯：它是「確定有問題」， 不像遲到推算那樣建立在估算上。字級不縮 —— 長輩要看得到。 */ .plan-conflict { font-size: 0.85rem; line-height: 1.45; color: #ffb14e; font-weight: 700; margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, #ffb14e 14%, transparent); } .plan-pin.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, transparent); } .pd-opt { min-height: 44px; padding: 4px 12px; white-space: nowrap; flex: 0 0 auto; } .opt-list { margin: 0; line-height: 1.9; /* 用 em 不用 px：標記寬度是跟著字級走的。固定 22px 在特大字級下只夠放一位數， 兩位數的「18.」會被 .modal-body 的 overflow 裁掉，畫面上看起來像「8.」或「0.」。 */ padding-left: 2.8em; } .opt-list li { padding-left: 2px; } /* 金鑰卡的「調整上限／清除」並排，特大字級放不下就換行 */ /* 「文案沿用上一版」的一行說明（相簿／海報頁）。刻意低調：這不是錯誤， 是「為什麼沒更新」的解釋，長輩看到紅色警告只會緊張。 */ .ai-stale { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; line-height: 1.5; color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); } .ai-stale .btn { flex: 0 0 auto; white-space: nowrap; } .key-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .key-acts .btn { flex: 0 0 auto; white-space: nowrap; } /* 區塊標題底下的小標（AI 加值／地圖加值），比 .section-label 輕一級 */ .sub-label { font-weight: 700; margin: 14px 2px 6px; color: var(--muted); } .plan-src-note { margin-top: 10px; } /* 名稱沒填時的視覺提示（只捲動＋toast 在手機上常被忽略） */ .field-attn { outline: 3px solid #ffb14e; outline-offset: 2px; animation: attn 0.5s ease 2; } @keyframes attn { 50% { outline-color: transparent; } } /* 調整行程工具區：兩層、全部不折行 */ .plan-day-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; } .plan-tools2 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: stretch; } .plan-tools2 > .btn { flex: 1 1 auto; } .plan-modeseg { flex: 0 0 auto; } .plan-day-tools .btn, .plan-tools2 .btn, .plan-modeseg button { white-space: nowrap; } .plan-modeseg { display: flex; } .plan-modeseg button { min-height: 48px; padding: 6px 10px; font-size: 0.98rem; } /* modal 右上關閉（手動輸入等） */ .modal-card { position: relative; } .modal-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; border-radius: 10px; cursor: pointer; } .modal-x:active { background: var(--bg-elev-2); } /* 幾點到＝雙下拉（時/分），不再用原生 time input —— iOS 上空值會被畫成當下時間 */ .fs-hm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* 景點卡壓扁：名稱列右側放 📌 */ .plan-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; } .plan-name-row .plan-name { flex: 1; min-width: 0; } .plan-pin.compact { flex: none; min-width: 46px; min-height: 44px; padding: 2px 8px; } /* ---------- 找附近（v1.59） ---------- */ .nl-center { margin-bottom: 2px; } .nl-centerline { margin: 2px 2px 8px; } .nl-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; } .nl-cat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 2px 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--fg); } .nl-cat.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--card)); } .nl-cat-emoji { font-size: 26px; line-height: 1.1; } .nl-cat-label { font-size: 13px; } .nl-note { font-size: 14px; line-height: 1.55; color: var(--muted); background: var(--card); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; } .nl-loading { display: flex; align-items: center; gap: 10px; padding: 14px 4px; color: var(--muted); font-size: 15px; } .nl-count { margin: 2px 2px 6px; } .nl-card { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; } .nl-card-main { flex: 1; min-width: 0; } .nl-name { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; } .nl-dist { font-size: 15px; color: var(--muted); margin-top: 1px; } .nl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .nl-chip { font-size: 13.5px; background: color-mix(in srgb, var(--fg) 8%, var(--card)); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .nl-go { flex: none; text-decoration: none; padding: 10px 14px; font-size: 15px; } /* ---------- 旅伴位置分享（v1.60） ---------- */ .sos-crew { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 12px; padding: 10px 12px; } .sos-crew-alert { border: 2px solid var(--danger); } .sc-main { flex: 1; min-width: 0; } .sc-name { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sc-line { font-size: 14.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; } .pos-banner { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 16%, var(--card)); font-size: 14.5px; } .pos-banner span { flex: 1; } .pos-banner-off { border: none; background: transparent; color: var(--primary); font-weight: 700; font-size: 14.5px; padding: 4px 6px; } .pc-lead { margin: 0 0 10px; font-size: 15px; line-height: 1.6; } .pc-row { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); } .pc-k { flex: none; width: 5.6em; font-weight: 700; font-size: 14.5px; } .pc-v { flex: 1; font-size: 14.5px; line-height: 1.55; color: var(--muted); } /* ---------- 「旅伴還看不到你」提示卡（v1.64） ---------- */ .claim-nudge { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 14%, var(--card)); border: 1.5px solid var(--primary); } .claim-nudge-t { font-size: 17px; font-weight: 700; margin-bottom: 4px; } .claim-nudge-p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 10px; }