/* Dive Console — 潛水儀表 v3 淺色 = 海面光；深色 = 下潛（背景由海面往深處的縱向漸層） 深海藍主色 × 浮球橘紅警示 × JetBrains Mono 數據 × 潛繩時間軸 */ /* 色調（howt 拍板 2026-07-07）：日間米紙×墨綠×銅金；夜間 assettrack 同款深墨綠 */ :root { --bg: #F5F1E8; --bg-deep: #EFE9DB; --card: #FFFFFF; --surface: #F0EBDF; --line: #E3DCCB; --ink: #1E2A24; --dim: #6E7A6F; --deep: #9A7B45; --deep-soft: rgba(154, 123, 69, .10); --brand-logo: #2E7D5B; --buoy: #C2473C; --buoy-soft: rgba(194, 71, 60, .08); --warn: #B45D2A; --warn-soft: rgba(180, 93, 42, .09); --ok: #2E7D5B; --ok-soft: rgba(46, 125, 91, .09); --shadow: 0 1px 2px rgba(30, 42, 36, .05), 0 4px 14px rgba(30, 42, 36, .05); --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --serif: "Fraunces", "Noto Serif TC", Georgia, serif; /* 間距刻度（sp-1 微調 → sp-6 區塊間） */ --sp-1: 4px; --sp-2: 8px; --sp-3: 10px; --sp-4: 14px; --sp-5: 16px; --sp-6: 26px; /* 圓角刻度：卡片／輸入框／chip */ --r: 14px; --r-sm: 10px; --r-xs: 6px; /* 字級刻度：統計數字／卡片標題／內文／補充／標籤 */ --fs-stat: 24px; --fs-title: 16px; --fs-body: 14px; --fs-sub: 13px; --fs-label: 12px; } /* 深淺由 控制（head inline script 依 localStorage/系統設定） */ :root[data-theme="dark"] { --bg: #0F1613; --bg-deep: #0A100D; --card: #161F1A; --surface: #1C2620; --line: #26332B; --ink: #E9E3D5; --dim: #8B9288; --deep: #B08D4F; --deep-soft: rgba(176, 141, 79, .13); --brand-logo: #93DCBB; --buoy: #D4574A; --buoy-soft: rgba(212, 87, 74, .12); --warn: #D98E3B; --warn-soft: rgba(217, 142, 59, .10); --ok: #43B37E; --ok-soft: rgba(67, 179, 126, .11); --shadow: 0 6px 18px rgba(0, 0, 0, .3); } * { margin: 0; padding: 0; box-sizing: border-box; } button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } body { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%) fixed; color: var(--ink); font-family: "Noto Sans TC", "Inter", -apple-system, "PingFang TC", sans-serif; min-height: 100vh; line-height: 1.6; overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .mono, .stat .num, .sea-day .wave, .tide-table td:nth-child(2), .tide-table td:nth-child(3) { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* ---------- icons ---------- */ .ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; flex: none; } .ic-lg { width: 20px; height: 20px; } .ic-danger { color: var(--buoy); } .ic-warn { color: var(--warn); } .ic-primary { color: var(--ok); } .ic-info { color: var(--deep); } /* ---------- top ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(16px + env(safe-area-inset-top)) 18px 8px; position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); } .brand { display: flex; align-items: center; gap: 9px; } .brand .logo { color: var(--brand-logo); } .brand h1 { font-size: 18px; font-weight: 700; letter-spacing: .2px; font-family: var(--serif); } .topbar-right { display: flex; align-items: center; gap: 8px; } .today-label { color: var(--dim); font-size: 13px; } .icon-btn { background: none; border: none; color: var(--dim); cursor: pointer; padding: 6px 8px; border-radius: 9px; } .icon-btn:hover { color: var(--ink); background: var(--surface); } .tabs { display: flex; gap: 4px; padding: 6px 14px 12px; position: sticky; top: calc(54px + env(safe-area-inset-top)); z-index: 19; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { flex: 1; min-width: 54px; background: none; border: none; color: var(--dim); font-size: 14.5px; padding: 8px 10px; cursor: pointer; font-family: inherit; white-space: nowrap; border-radius: 999px; } .tabs button:hover { color: var(--ink); } .tabs button.active { background: var(--deep); color: var(--bg); font-weight: 700; } main { padding: 14px 16px 56px; max-width: 860px; margin: 0 auto; } /* 字級：整體等比縮放內容區（topbar／tabs 不動），研究上比純放大字體更不易撐破版面 */ /* overflow-x:clip 夾住放大後的次像素水平溢出，避免整頁可被左右拖曳（不影響垂直捲動） */ #main { zoom: var(--appzoom, 1); overflow-x: clip; } /* 設定：AAAA 字級選取 */ .asel { display: inline-flex; gap: 6px; } .asel button { width: 40px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--dim); border: 1px solid var(--line); border-radius: 8px; font-weight: 700; font-family: inherit; cursor: pointer; line-height: 1; } .asel button.on { background: var(--deep-soft); color: var(--deep); border-color: color-mix(in srgb, var(--deep) 40%, var(--line)); } .loading { color: var(--dim); text-align: center; padding: 48px 0; } /* ---------- hero ---------- */ .hero { padding: 6px 2px 18px; } .hero-date { display: flex; align-items: baseline; gap: 10px; } .hero-date .mono { font-family: var(--serif); font-size: 46px; font-weight: 600; letter-spacing: -.5px; line-height: 1.05; font-variant-numeric: normal; } .hero-wd { color: var(--dim); font-size: 15px; } .hero-next { color: var(--dim); font-size: 15px; margin-top: 4px; } .hero-next b { color: var(--ink); font-weight: 700; } .hero-next .mono { color: var(--deep); font-weight: 700; } /* ---------- section ---------- */ .section-title { font-size: var(--fs-label); color: var(--dim); letter-spacing: 1px; font-weight: 700; margin: var(--sp-6) 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); } .section-title::before { content: ''; width: 14px; height: 2px; background: var(--deep); opacity: .6; flex: none; } .section-title:first-child { margin-top: 6px; } .section-title a { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 500; letter-spacing: 0; } .section-title > .btn { margin-left: auto; letter-spacing: 0; } /* 週末房況「看更多」：置中的次要按鈕，與列表分開 */ .wk-more { display: block; width: 100%; margin-top: 6px; } .done-more { display: block; width: 100%; margin-top: 6px; } /* 常用聯絡人：原地展開的編輯列 */ .ppl-edit-row { outline: 1px solid var(--deep); border-radius: 10px; padding: 8px 10px; margin: 4px 0; } /* 船潛名單：姓名＋等級＋身分證三欄 */ .manifest-row { display: grid; grid-template-columns: .9fr .9fr 1.2fr; gap: 6px; align-items: center; margin-bottom: 6px; } .manifest-row .mf-name { font-size: 14px; min-width: 0; overflow-wrap: anywhere; } .manifest-row input { min-width: 0; } /* ---------- cards ---------- */ .card { background: var(--card); border-radius: var(--r); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3); border: 1px solid var(--line); box-shadow: var(--shadow); } .card.flush { margin: 0; } .card.stack-top { margin-top: var(--sp-3); margin-bottom: 0; } :root[data-theme="dark"] .card { border-color: transparent; } .card.clickable { cursor: pointer; transition: transform .12s ease, border-color .12s ease; } .card.clickable:hover { border-color: color-mix(in srgb, var(--deep) 55%, transparent); transform: translateY(-1px); } .card.alert { display: flex; align-items: center; gap: 12px; } .alert-red { border-left: 4px solid var(--buoy); background: color-mix(in srgb, var(--buoy-soft) 55%, var(--card)); } .alert-amber { border-left: 4px solid var(--warn); background: color-mix(in srgb, var(--warn-soft) 55%, var(--card)); } .alert .days { text-align: center; min-width: 52px; } .alert .days .n { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; } .alert-red .days .n { color: var(--buoy); } .alert-amber .days .n { color: var(--warn); } .alert .days .u { font-size: 11px; color: var(--dim); } .card-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); } .card-row .card-title { min-width: 0; } .card-row.foot { margin-top: var(--sp-2); } .card-title { font-weight: 700; font-size: var(--fs-title); display: flex; align-items: center; gap: 7px; font-family: var(--serif); } .card-title.wrap { flex-wrap: wrap; row-gap: 0; } .nowrap { white-space: nowrap; } .card-sub { color: var(--dim); font-size: var(--fs-sub); margin-top: var(--sp-1); line-height: 1.6; } /* 通用間距 modifier：卡下註解／表單網格／動作列共用同一節奏 */ .gap-top { margin-top: var(--sp-2); } .fab-row.gap-top, .form-grid.gap-top { margin-top: var(--sp-4); } .form-grid.flush { margin-top: 0; } .form-grid.tight { margin: 2px 0 var(--sp-2); } .inline-tools { display: inline-flex; gap: 6px; } .push-right { margin-left: auto; } .stat-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); } .stat { flex: 1; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--r); padding: var(--sp-4) var(--sp-5); } :root[data-theme="dark"] .stat { border-color: transparent; } .stat .num { font-size: var(--fs-stat); font-weight: 700; color: var(--ink); } .stat .lbl { font-size: var(--fs-label); color: var(--dim); margin-top: 2px; } /* ---------- 潛繩時間軸 ---------- */ .tl { position: relative; } .tl-row { display: grid; grid-template-columns: 44px 18px 1fr; align-items: stretch; } .tl-date { color: var(--dim); font-size: 12px; padding-top: 16px; text-align: right; } .tl-line { position: relative; } .tl-line::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--line); } .tl-row:first-child .tl-line::before { top: 18px; } .tl-row:last-child .tl-line::before { bottom: auto; height: 22px; } .tl-node { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--deep); } .tl-node.now { background: var(--deep); box-shadow: 0 0 0 4px var(--deep-soft); } .tl-body { min-width: 0; padding-left: 6px; } /* ---------- chips ---------- */ .chip { display: inline-block; font-size: var(--fs-label); padding: 1px 8px; border-radius: var(--r-xs); background: var(--surface); color: var(--dim); border: 1px solid var(--line); margin-right: 5px; margin-top: 2px; white-space: nowrap; } .chip.type { color: var(--deep); border-color: color-mix(in srgb, var(--deep) 35%, var(--line)); background: var(--deep-soft); } .chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--ok-soft); } .chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: var(--warn-soft); } .chip.bad { color: var(--buoy); border-color: color-mix(in srgb, var(--buoy) 35%, var(--line)); background: var(--buoy-soft); } .chip.info { color: var(--deep); border-color: color-mix(in srgb, var(--deep) 30%, var(--line)); background: var(--deep-soft); } .chip.master { color: #7a5f34; border-color: color-mix(in srgb, var(--deep) 55%, var(--line)); background: color-mix(in srgb, var(--deep) 18%, var(--card)); font-weight: 700; } :root[data-theme="dark"] .chip.master { color: var(--deep); } /* ---------- buttons & forms ---------- */ .btn { background: var(--deep); color: var(--bg); border: none; border-radius: var(--r-sm); padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .btn:hover { filter: brightness(1.08); } .btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .btn.danger { background: none; color: var(--buoy); border: 1px solid color-mix(in srgb, var(--buoy) 40%, var(--line)); } .btn.small { padding: 5px 11px; font-size: 13px; border-radius: 8px; } .btn-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } input, select, textarea { width: 100%; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); padding: 9px 12px; font-size: 16px; font-family: inherit; /* 16px 起跳：iOS Safari 聚焦 <16px 輸入框會強制整頁放大 */ /* min-width:0：iOS date input 內在寬度會撐爆 grid 欄位，導致入住/退房重疊 */ } /* iOS date input 需明確去掉原生外觀＋允許收縮，才不會溢出欄位； 但拔掉外觀後值會變小、日曆圖示消失，所以下面重新把它做成一個像樣的日期選擇器 */ input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; min-height: 48px; display: flex; align-items: center; } /* 值文字放大置中、佔滿寬度，避免看起來又小又空 */ input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; font-size: 16px; } input[type="date"]::-webkit-datetime-edit, input[type="time"]::-webkit-datetime-edit { flex: 1; padding: 0; } /* 補回右側日曆圖示，讓人一看就知道可點選日期 */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { margin-left: auto; opacity: .55; font-size: 1.15em; cursor: pointer; } input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: .9; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--deep); } label { display: block; font-size: 13px; color: var(--dim); margin: 12px 0 5px; font-weight: 500; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .form-grid > div { min-width: 0; } /* 讓欄位可收縮，避免 date input 撐爆造成重疊 */ .form-grid .full { grid-column: 1 / -1; } /* 住宿日期：入住／退房 並排成一個區塊，各自有標籤，欄寬足夠不擁擠 */ .date-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .date-range .date-field { min-width: 0; } .date-range .date-field label { margin-top: 0; } input.derived { background: var(--bg); color: var(--dim); } /* 由單位加總、唯讀 */ /* 床位／機車認領單位 */ .bu-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .bu-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-top: 8px; background: var(--card); } .bu-head { display: flex; align-items: center; gap: 8px; } .bu-kind-sel { flex: none; width: auto; padding: 6px 8px; font-size: 14px; } .bu-head .bu-label { flex: 1; min-width: 0; } .bu-del { flex: none; width: 30px; height: 30px; padding: 0; border: none; background: none; color: var(--dim); font-size: 16px; cursor: pointer; } .bu-meta { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; margin-top: 8px; } .bu-meta > label { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 12px; color: var(--dim); } .bu-meta input { min-width: 0; } .bu-claims { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } /* 整單收模式：不逐名額認領，隱藏認領人列（DOM 保留，切回逐名額不掉資料） */ .whole-mode .bu-claims { display: none; } .bu-claim-line { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 6px; align-items: start; } .bu-claim-line input, .bu-claim-line select { min-width: 0; } .bu-cl-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .bu-group { border: 1px dashed var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .bu-group-hd { font-size: 12px; font-weight: 600; color: var(--dim); } /* 數量步進器：[−] 數字 [+]（iOS number 沒箭頭，改自訂按鈕） */ .stepper { display: flex; align-items: stretch; gap: 0; } .stepper input { text-align: center; border-radius: 0; } .stepper .st-minus, .stepper .st-plus { flex: none; width: 40px; padding: 0; font-size: 20px; line-height: 1; background: var(--card); border: 1px solid var(--line); color: var(--ink); cursor: pointer; } .stepper .st-minus { border-radius: 10px 0 0 10px; border-right: none; } .stepper .st-plus { border-radius: 0 10px 10px 0; border-left: none; } .bu-chip { display: inline-block; font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; margin: 2px 4px 2px 0; } /* 訂購卡認領人：每人一列，左「品項tag＋認領人」右對齊收款狀態 */ .bu-claims-list { margin-top: 8px; border-top: 1px solid var(--line); } .bu-claim-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .bu-claim-row:last-child { border-bottom: none; } .bu-claim-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bu-tag { flex: none; font-size: 11px; color: var(--dim); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; } .bu-st { flex: none; font-size: 12px; white-space: nowrap; } .bu-st.done { color: var(--ok); font-weight: 600; } .bu-st.due { color: var(--warn); } /* 個別收款按鈕：卡片上每個未收的人各一顆，一鍵結清 */ .bu-pay { flex: none; display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 12px; font-weight: 600; color: var(--deep); background: var(--deep-soft); border: 1px solid color-mix(in srgb, var(--deep) 30%, var(--line)); border-radius: 7px; padding: 3px 9px; cursor: pointer; white-space: nowrap; } .bu-pay:hover { background: color-mix(in srgb, var(--deep) 18%, var(--card)); } .bu-pay .ic { width: 13px; height: 13px; } /* 收合摘要列：訂單太長時「已收 N 人・待認領 M（展開）」，點開露出隱藏的認領人 */ .bu-expand { display: flex; align-items: center; gap: 4px; width: 100%; padding: 6px 0 2px; margin: 0; background: none; border: none; font: inherit; font-size: 12px; color: var(--dim); cursor: pointer; } .bu-expand:hover { color: var(--ink); } .bu-expand .ic { width: 13px; height: 13px; opacity: .7; } /* 金額摺疊區：預設收合成一行摘要，加了項目才展開 */ .bk-money { margin-top: 14px; } .bk-money > summary { font-size: 13px; color: var(--dim); cursor: pointer; padding: 4px 0; list-style: none; } .bk-money > summary::-webkit-details-marker { display: none; } .bk-money > summary::before { content: '▸ '; color: var(--deep); } .bk-money[open] > summary::before { content: '▾ '; } .warn-text { color: var(--warn, #b5761f); } .bed-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* 週末房況明細：名稱左、剩餘/價格右對齊、單行不換行 */ .wk-detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); } .wk-detail-row:last-child { border-bottom: none; } .wk-detail-row .mono { white-space: nowrap; flex: none; } /* 週末房況列表：日期固定寬，讓「剩 N 床」對齊起始位置 */ .wk-line { display: flex; align-items: baseline; gap: 8px; } .wk-date { flex: none; min-width: 82px; } .checkline { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; } .checkline input { width: auto; } .search-bar { margin-bottom: 8px; display: flex; gap: 8px; } .filter-row { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .fchip { background: var(--surface); border: 1px solid var(--line); color: var(--dim); font-size: 13px; padding: 4px 12px; border-radius: 999px; cursor: pointer; font-family: inherit; } .fchip:hover { color: var(--ink); } .fchip.on { background: var(--deep); border-color: var(--deep); color: var(--bg); font-weight: 700; } /* ---------- modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(8, 17, 26, .55); z-index: 50; display: flex; align-items: flex-end; justify-content: center; } .modal { background: var(--bg); border-radius: 18px 18px 0 0; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; padding: 20px 20px 32px; } @media (min-width: 700px) { .modal-backdrop { align-items: center; } .modal { border-radius: 18px; } } .hidden { display: none !important; } .modal h2 { font-size: 19px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; font-family: var(--serif); } .modal-actions { display: flex; gap: var(--sp-3); margin-top: 20px; justify-content: flex-end; flex-wrap: wrap; } .modal-actions.left { justify-content: flex-start; } .modal-actions.flush { margin-top: 0; } .modal-actions.snug { margin-top: var(--sp-3); } .modal-actions.stack { flex-direction: column; align-items: stretch; justify-content: flex-start; } /* 設定 modal 分區塊標題（深淺色跟 --line/--dim 變數走） */ .set-group { margin: 20px 0 2px; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-label); font-weight: 700; color: var(--dim); letter-spacing: 1px; } .modal h2 + .set-group { margin-top: 8px; padding-top: 0; border-top: none; } /* ---------- lists ---------- */ .list-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); gap: 8px; } .list-item:last-child { border-bottom: none; } .list-item .grow { flex: 1; min-width: 0; } .row-actions { display: flex; gap: 6px; flex-shrink: 0; } .muted { color: var(--dim); font-size: var(--fs-sub); } .hint { color: var(--dim); font-size: var(--fs-label); margin-bottom: var(--sp-2); } .right { text-align: right; } .good { color: var(--ok); } .warn-text { color: var(--warn); } .bad-text { color: var(--buoy); } /* ---------- 考核清單 ---------- */ .ck-bar-wrap { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; } .ck-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface); overflow: hidden; } .ck-bar-fill { height: 100%; border-radius: 999px; background: var(--ok); } .ck-group { font-size: 11.5px; color: var(--dim); letter-spacing: 1px; font-weight: 700; margin: 12px 0 4px; text-transform: uppercase; } .ck-row { display: grid; grid-template-columns: 22px 1fr auto 24px; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; } .ck-row:last-child { border-bottom: none; } .ck-mark { text-align: center; color: var(--dim); background: none; border: 1px solid transparent; cursor: pointer; border-radius: 6px; padding: 2px 0; font-size: 13px; font-family: inherit; } .ck-mark:hover { border-color: var(--line); background: var(--surface); } .ck-row.ok .ck-mark { color: var(--ok); } .ck-row.redo .ck-mark { color: var(--buoy); font-weight: 700; } .ck-row.redo .ck-name { color: var(--buoy); } .ck-row:not(.ok):not(.redo) .ck-name { color: var(--dim); } .ck-note { color: var(--deep); font-size: 12.5px; background: none; border: 1px solid transparent; cursor: pointer; border-radius: 6px; padding: 2px 6px; text-align: right; } .ck-note:hover { border-color: var(--line); background: var(--surface); } .ck-del { background: none; border: none; color: var(--line); cursor: pointer; font-size: 12px; } .ck-del:hover { color: var(--buoy); } /* ---------- sea ---------- */ .sea-grid { display: grid; gap: 12px; } @media (min-width: 700px) { .sea-grid { grid-template-columns: 1fr 1fr; } } .sea-now { display: flex; align-items: baseline; gap: 2px; } .sea-now .mono { font-size: 24px; font-weight: 700; } .sea-unit { font-size: 12px; color: var(--dim); } .spark-wrap { margin: 6px 0 2px; position: relative; touch-action: pan-y; cursor: crosshair; } .spark { width: 100%; height: 30px; display: block; } /* 手機加高觸控範圍，比較好按 */ @media (pointer: coarse) { .spark { height: 44px; } } .spark-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: 0; pointer-events: none; transition: opacity .12s ease; } .spark-tip { position: absolute; bottom: calc(100% + 4px); z-index: 5; padding: 2px 9px; border-radius: 8px; white-space: nowrap; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); font-size: 12px; font-family: var(--mono); opacity: 0; pointer-events: none; transition: opacity .12s ease; } .spark-tip b { margin-left: 6px; } .scrubbing .spark-cursor, .scrubbing .spark-tip { opacity: 1; } .sea-map { position: relative; height: 180px; margin-top: 10px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); } .sea-map img { position: absolute; width: 256px; height: 256px; max-width: none; } /* 深色模式：淺灰底圖輕微降亮，不刺眼但保留原色相（不做 invert） */ :root[data-theme="dark"] .sea-map img { filter: brightness(0.9); } .map-spot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--buoy); border: 2px solid var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--buoy) 30%, transparent); transform: translate(-50%, -50%); pointer-events: none; } .map-wind-chip { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line); color: var(--ink); backdrop-filter: blur(4px); pointer-events: none; } .map-wind-chip svg { color: var(--deep); } .map-attr { position: absolute; right: 5px; bottom: 3px; font-size: 9px; color: var(--dim); background: color-mix(in srgb, var(--card) 70%, transparent); padding: 0 4px; border-radius: 4px; pointer-events: none; } .sea-days { display: flex; gap: 6px; margin-top: 10px; } .sea-day { flex: 1; background: var(--surface); border-radius: 9px; padding: 8px 4px; text-align: center; border: 1px solid var(--line); } .sea-day .d { font-size: 11.5px; color: var(--dim); white-space: nowrap; letter-spacing: -0.2px; } .sea-day .d .wd { margin-left: 3px; opacity: 0.7; } .sea-day .wave { font-size: 15px; font-weight: 700; margin: 3px 0; } .sea-day .wind { font-size: 11.5px; color: var(--dim); } .wave-ok { color: var(--ok); } .wave-mid { color: var(--warn); } .wave-bad { color: var(--buoy); } .sea-day .wind .wind-arrow { vertical-align: -1px; margin-left: 2px; color: var(--deep); } .tide-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; margin-top: 14px; color: var(--dim); } .tide-curve-wrap { position: relative; margin-top: 4px; color: var(--deep); touch-action: pan-y; cursor: crosshair; } .tide-curve { width: 100%; height: 100%; display: block; } .tide-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%); pointer-events: none; } .tide-lbl { position: absolute; font-size: 10px; font-family: var(--mono); color: var(--dim); white-space: nowrap; pointer-events: none; } .tide-lbl.hi { transform: translate(-50%, -100%); } .tide-lbl.lo { transform: translate(-50%, 0); } .tide-sep { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--line); pointer-events: none; } .tide-sep span { position: absolute; bottom: 0; left: 3px; font-size: 9px; color: var(--dim); } .tide-now { position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--buoy); opacity: .55; pointer-events: none; } /* ---------- 住宿/訂購 ---------- */ .room-line { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; } .room-line .rn { color: var(--ink); } .room-line.pickable { cursor: pointer; border-radius: 6px; padding: 5px 6px; } .room-line.pickable:hover { background: var(--deep-soft); } /* ---------- 裝備品項編輯器 ---------- */ .gi-row { border: 1px solid var(--line); border-radius: 10px; padding: 9px; margin-top: 8px; background: var(--surface); } .gi-grid { display: grid; grid-template-columns: 1.3fr .6fr .85fr .85fr; gap: 6px; margin-top: 6px; } .gi-grid input { padding: 7px 9px; } /* ---------- 月曆 ---------- */ .seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .seg button { background: none; border: none; padding: 7px 16px; font-size: 14px; color: var(--dim); cursor: pointer; font-family: inherit; } .seg button.on { background: var(--deep); color: var(--bg); font-weight: 700; } /* 訂購 tab 頂端子分頁（住宿｜船潛｜裝備）：等寬撐滿，好點 */ .orders-seg { display: flex; margin-bottom: 14px; } .orders-seg button { flex: 1; } .cal-card { padding: 12px; } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cal-title { font-weight: 700; font-size: 17px; font-family: var(--serif); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-week { margin-bottom: 4px; } .cal-week div { text-align: center; font-size: 12px; color: var(--dim); padding: 2px 0; } .cal-cell { min-height: 64px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 3px 4px; cursor: pointer; overflow: hidden; } .cal-cell.pad { background: none; border: none; cursor: default; } .cal-cell.today { border-color: var(--deep); box-shadow: inset 0 0 0 1px var(--deep); } .cal-num { font-size: 11.5px; color: var(--dim); font-family: var(--mono); } .cal-cell.today .cal-num { color: var(--deep); font-weight: 700; } .cal-ev { font-size: 10.5px; line-height: 1.35; border-radius: 4px; padding: 1px 4px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .ev-pool { background: var(--deep-soft); color: var(--deep); } .ev-sea { background: var(--ok-soft); color: var(--ok); } .ev-other { background: var(--surface); color: var(--dim); border: 1px solid var(--line); } .cal-more { font-size: 10px; color: var(--dim); margin-top: 1px; } .empty { color: var(--dim); text-align: center; padding: var(--sp-6) 0; font-size: var(--fs-body); } .empty.compact { padding: var(--sp-4) 0; } .fab-row { margin: var(--sp-1) 0 var(--sp-4); display: flex; justify-content: flex-end; } .fab-row.split { justify-content: space-between; } a { color: var(--deep); } /* ---------- toast ---------- */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--ok); color: #fff; padding: 10px 20px; border-radius: 12px; font-weight: 600; z-index: 99; font-size: 14px; max-width: calc(100vw - 40px); box-shadow: var(--shadow); text-align: center; } .toast.err { background: var(--buoy); } /* ---------- 手機（<700px）：導覽移到底部 tab bar ---------- */ .tab-ic { width: 20px; height: 20px; } @media (min-width: 700px) { .tab-ic { display: none; } } @media (max-width: 699.9px) { .tabs { position: fixed; top: auto; bottom: 0; left: 0; right: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line); z-index: 30; gap: 0; /* 提升為獨立合成層：修 iOS Safari 初次載入時 fixed+backdrop-filter 定位錯亂 （視口高度未穩定前 bar 會跑到畫面中間，滑一下才歸位） */ transform: translateZ(0); will-change: transform; } .tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; line-height: 1; padding: 5px 2px 4px; border-radius: 10px; min-width: 0; /* 7 格也擠得下（390/7 ≈ 55px） */ } .tabs button.active { background: none; color: var(--deep); } main { padding-bottom: calc(86px + env(safe-area-inset-bottom)); } .modal { max-height: 84vh; padding-bottom: calc(28px + env(safe-area-inset-bottom)); } .toast { bottom: calc(88px + env(safe-area-inset-bottom)); } } /* 窄螢幕：多按鈕列表允許換行、統計數字縮小 */ @media (max-width: 480px) { .list-item { flex-wrap: wrap; } .list-item .grow { min-width: 62%; } .stat { padding: 11px 12px; } .stat .num { font-size: 19px; } .cal-cell { min-height: 56px; padding: 2px 3px; } .cal-ev { font-size: 10px; } .hero-date .mono { font-size: 38px; } } @media (prefers-reduced-motion: reduce) { .card.clickable { transition: none; } } /* ---------- 進入畫面（splash）---------- 模式 class 在 （head inline script 於 first paint 前決定）： splash-first＝初次歡迎（描述＋按鈕、不自動消失）；splash-quick＝回訪快速 splash。 無 class（inline script 失效）時外觀退回 quick。淡出/隱藏由 splash.js 控制。 */ #splash { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; text-align: center; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%); opacity: 1; transition: opacity .3s ease; } #splash.splash-hide { opacity: 0; pointer-events: none; } .splash-logo { width: 96px; height: 96px; color: var(--brand-logo); animation: splash-fadein .5s ease both; } /* 描繪動畫：pathLength="100" 正規化 path 長度（circle 渲染周長與 getTotalLength 有誤差）， dasharray 101 略大於全長確保收尾無縫；緩入緩出、波浪在圓圈收尾前提早起筆（略重疊）避免硬切 */ .splash-circle { stroke-dasharray: 101; stroke-dashoffset: 101; animation: splash-draw .9s cubic-bezier(.45,.05,.35,1) both; } .splash-wave { stroke-dasharray: 101; stroke-dashoffset: 101; animation: splash-draw .6s .65s cubic-bezier(.45,.05,.35,1) both; } @keyframes splash-draw { to { stroke-dashoffset: 0; } } @keyframes splash-fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes splash-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* 文案分層上浮（animation fill both 保底，JS 失效也可讀）： 品牌名（兩種模式都顯示）在描繪近尾聲浮現 → 初次的描述＋按鈕接續 → 回訪的點擊提示最後浮現＋呼吸 */ .splash-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; animation: splash-rise .5s 1.05s ease both; } .splash-first-text { display: none; } html.splash-first .splash-first-text { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: splash-rise .5s 1.35s ease both; } .splash-title { font-family: var(--serif); font-size: 32px; font-weight: 600; color: var(--ink); line-height: 1.2; } .splash-sub { color: var(--dim); font-size: 15px; letter-spacing: .12em; } .splash-desc { color: var(--dim); font-size: 14px; max-width: 300px; line-height: 1.8; } html.splash-first #splash .btn { margin-top: 10px; padding: 11px 30px; font-size: 15px; } html.splash-first .splash-hint { display: none; } .splash-hint { color: var(--dim); font-size: 13px; letter-spacing: .08em; animation: splash-fadein .6s 1.7s ease both, splash-pulse 2.4s 2.5s ease-in-out infinite; } @keyframes splash-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* reduced-motion 降級：不播描繪與浮現，logo 與文案直接完整顯示（淡出 transition 保留，屬低度動態） */ @media (prefers-reduced-motion: reduce) { .splash-circle, .splash-wave { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } .splash-logo, .splash-brand, html.splash-first .splash-first-text, .splash-hint { animation: none; opacity: 1; } }