/* ============================================
   旅遊隨身工具 Travel Tool — style.css
   ============================================ */

:root{
  --ink:#1B1A18;
  --ink2:#3B3933;
  --muted:#94918B;
  --faint:#BBB8B2;
  --line:rgba(20,18,16,.08);
  --bg:#EFEEEC;
  --card:#FFFFFF;
  --fill:#F4F2EF;
  --nav:#1B1A18;
  --accent:#5E7782;      /* 由 data.json 的 accentColor 覆寫 */
  --accent-soft:#E7EDF0;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:'Hanken Grotesk','Noto Sans TC',sans-serif}
input,select,textarea,button{font-family:inherit}
::placeholder{color:#BBB8B2}
.noscroll::-webkit-scrollbar{display:none}
.noscroll{scrollbar-width:none}

@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---- 版面 ---- */
.app{height:100vh;height:100dvh;background:var(--bg);display:flex;flex-direction:column}

/* ---- 頁首 ---- */
.header{padding:20px 22px 14px;flex-shrink:0}
.header-top{display:flex;justify-content:space-between;align-items:flex-start}
.header-info{min-width:0}
.eyebrow{font-family:'Newsreader',serif;font-style:italic;font-size:14px;color:var(--accent);margin-bottom:1px;letter-spacing:.01em}
.title{font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.12;color:var(--ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subtitle{font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:500}
.round-add{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;margin-left:12px}
.round-add:active{transform:scale(.93)}

/* ---- 旅程切換 chips ---- */
.chips-row{display:flex;gap:8px;overflow-x:auto;margin-top:15px}
.chip-trip{padding:7px 14px;border-radius:20px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--muted);white-space:nowrap;flex-shrink:0}
.chip-trip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.chip-add{padding:7px 14px;border-radius:20px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px dashed var(--faint);background:transparent;color:var(--faint);white-space:nowrap;flex-shrink:0}

/* ---- 內容捲動區 ---- */
.content{flex:1;overflow-y:auto;padding:2px 18px 122px}

/* ---- 空狀態 ---- */
.empty{text-align:center;padding:54px 24px 30px;color:var(--faint)}
.empty-icon{width:66px;height:66px;border-radius:21px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--accent)}
.empty-title{font-size:15px;font-weight:700;color:var(--ink2)}
.empty-sub{font-size:13px;margin-top:5px;color:var(--muted)}

/* ---- 行程：下一站 hero 卡 ---- */
.hero-card{background:var(--card);border-radius:28px;padding:9px;margin-bottom:16px;box-shadow:0 6px 22px -6px rgba(20,18,16,.12)}
.hero-photo{position:relative;height:194px;border-radius:21px;overflow:hidden;background:repeating-linear-gradient(135deg,#D9D4CC 0 11px,#E2DDD5 11px 22px)}
.hero-photo-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:#A6A097}
.hero-photo-center .dim{opacity:.65;display:flex}
.hero-photo-label{font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.16em}
.hero-tag{position:absolute;top:13px;left:13px;display:inline-flex;align-items:center;padding:7px 13px;border-radius:20px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);font-size:10.5px;font-weight:800;color:var(--ink);letter-spacing:.1em}
.hero-icons{position:absolute;top:13px;right:13px;display:flex;gap:8px}
.hero-circle{width:37px;height:37px;border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.hero-body{padding:15px 11px 8px}
.hero-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.hero-head .hh-main{min-width:0}
.hero-name{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0;line-height:1.15}
.hero-type{font-size:11.5px;font-weight:700;color:var(--accent);margin-top:4px;letter-spacing:.06em}
.hero-date{flex-shrink:0;text-align:right}
.hero-date-label{font-size:9.5px;color:var(--faint);letter-spacing:.1em;font-weight:700}
.hero-date-val{font-size:15px;font-weight:800;color:var(--ink);margin-top:1px}
.hero-meta{display:flex;flex-direction:column;gap:7px;margin-top:13px}
.meta-row{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink2);min-width:0}
.meta-row .mi{flex-shrink:0;display:flex;color:var(--muted)}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-note{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.55}
.btn-map{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--nav);color:#fff;text-decoration:none;padding:14px;border-radius:15px;font-size:14px;font-weight:700;margin-top:15px}
.btn-map:active{transform:scale(.985)}

/* ---- 行程：日期分隔與地點卡 ---- */
.day-header{display:flex;align-items:center;gap:11px;padding:6px 2px 11px}
.day-label{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.01em}
.day-line{flex:1;height:1px;background:var(--line)}

.item-card{display:flex;gap:13px;background:var(--card);border-radius:20px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px var(--line)}
.item-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.item-body{flex:1;min-width:0}
.item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.item-head .ih-main{min-width:0}
.item-name{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3}
.item-type{font-size:11px;font-weight:700;color:var(--accent);margin-top:3px;letter-spacing:.05em}
.item-meta{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:8px;min-width:0}
.item-meta + .item-meta{margin-top:5px}
.item-meta .mi{flex-shrink:0;display:flex}
.item-note{font-size:12.5px;color:var(--faint);margin-top:7px;line-height:1.5}
.item-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none;margin-top:10px}

.del-btn{flex-shrink:0;width:30px;height:30px;border-radius:9px;border:none;background:transparent;color:var(--faint);display:flex;align-items:center;justify-content:center;cursor:pointer}
.del-btn:hover{background:#F4E2E0;color:#B14A40}

/* ---- 主要按鈕 ---- */
.btn-primary{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--nav);color:#fff;border:none;padding:16px;border-radius:17px;font-size:15px;font-weight:700;cursor:pointer;margin-top:6px}
.btn-primary:active{transform:scale(.985)}
.btn-secondary{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--ink2);border:1px solid var(--line);padding:14px;border-radius:15px;font-size:14px;font-weight:700;cursor:pointer;margin-top:6px}
.btn-secondary:active{transform:scale(.985)}

/* ---- 記帳 ---- */
.sum-card{background:#fff;border-radius:24px;padding:18px;margin-bottom:16px;box-shadow:0 1px 3px var(--line)}
.serif-label{font-family:'Newsreader',serif;font-style:italic;font-size:14px;color:var(--accent)}
.cur-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cur-pill{display:inline-flex;align-items:center;gap:8px;background:var(--fill);border-radius:13px;padding:9px 13px}
.cur-pill .flag{font-size:17px}
.cur-pill .amt{font-size:14px;font-weight:800;color:var(--ink)}
.sum-note{font-size:12px;color:var(--muted);margin-top:14px;font-weight:500}
.section-label{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--faint);margin:4px 4px 11px}

.exp-row{display:flex;align-items:center;gap:13px;background:#fff;border-radius:18px;padding:13px 14px;margin-bottom:9px;box-shadow:0 1px 3px var(--line)}
.exp-icon{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.exp-body{flex:1;min-width:0}
.exp-desc{font-size:14.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-date{font-size:12px;color:var(--muted);margin-top:2px}
.exp-amt{font-size:14.5px;font-weight:800;color:var(--ink);flex-shrink:0;white-space:nowrap}

/* ---- 結算 ---- */
.status-pill{display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:13px;font-size:12.5px;font-weight:600;margin-bottom:14px}
.status-pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.status-pill.ok{background:#E4EDE7;color:#4E7A5E}
.status-pill.warn{background:#F3E9D6;color:#9A7327}

.total-card{background:var(--ink);color:#fff;border-radius:26px;padding:22px;margin-bottom:18px}
.total-label{font-family:'Newsreader',serif;font-style:italic;font-size:14px;color:rgba(255,255,255,.62)}
.total-amt{font-size:42px;font-weight:800;letter-spacing:-.03em;margin-top:6px;line-height:1}
.total-sub{font-size:11.5px;color:rgba(255,255,255,.5);margin-top:10px;font-weight:500}

.settle-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:18px;padding:14px 16px;margin-bottom:9px;box-shadow:0 1px 3px var(--line)}
.settle-left{display:flex;align-items:center;gap:12px;min-width:0}
.settle-flag{font-size:24px;flex-shrink:0}
.settle-main{min-width:0}
.settle-amt{font-size:15px;font-weight:800;color:var(--ink)}
.settle-rate{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settle-twd{font-size:15px;font-weight:800;color:var(--ink);flex-shrink:0;margin-left:10px}
.disclaimer{font-size:11px;color:var(--faint);text-align:center;margin-top:14px}

/* ---- 優惠提醒卡 ---- */
.promo-card{background:#fff;border-radius:20px;padding:16px;margin-bottom:11px;box-shadow:0 1px 3px var(--line);border-left:3px solid var(--line)}
.promo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.promo-name{font-size:15px;font-weight:700;color:var(--ink);line-height:1.35;flex:1}
.promo-desc{font-size:13px;color:var(--ink2);margin-top:8px;line-height:1.55}
.promo-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.promo-deadline{font-size:12px;color:var(--muted);font-weight:500;white-space:nowrap}
.badge{padding:4px 11px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:.02em;white-space:nowrap;flex-shrink:0}
.badge.danger{background:#F4E2E0;color:#B14A40}
.badge.warn{background:#F3E9D6;color:#9A7327}
.badge.ok{background:#E4EDE7;color:#4E7A5E}
.promo-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none;margin-top:12px}

/* ---- 底部導覽 ---- */
.nav-wrap{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:0 0 20px;pointer-events:none}
.nav-pill{display:flex;align-items:center;gap:3px;background:var(--nav);border-radius:25px;padding:7px 9px;box-shadow:0 10px 30px -6px rgba(20,18,16,.45);pointer-events:auto}
.nav-btn{border:none;cursor:pointer;display:flex;align-items:center;gap:7px;padding:11px 12px;border-radius:15px;font-size:13px;font-weight:700;transition:padding .2s,background .2s;background:transparent;color:#8C8983}
.nav-btn.active{padding:11px 16px;background:var(--accent);color:#fff}

/* ---- 底部彈出表單（modal）---- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(20,18,16,.42);display:flex;align-items:flex-end;animation:fadeIn .2s ease}
.sheet{width:100%;max-height:90%;overflow-y:auto;background:#fff;border-radius:28px 28px 0 0;padding:9px 20px 24px;animation:sheetUp .3s cubic-bezier(.2,.85,.25,1)}
.grab{width:38px;height:4px;border-radius:2px;background:#E4E1DC;margin:6px auto 16px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.sheet-title{font-size:18px;font-weight:800;color:var(--ink)}
.close-btn{width:34px;height:34px;border-radius:50%;border:none;background:var(--fill);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}

.field{margin-bottom:15px}
.field.last{margin-bottom:18px}
.field label{font-size:12.5px;color:var(--muted);margin-bottom:7px;display:block;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;font-size:15px;border:1px solid var(--line);border-radius:14px;background:var(--fill);color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.field textarea{min-height:70px;resize:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:#fff}
.row-2{display:flex;gap:11px}
.row-2 .field{flex:1}

.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-opt{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:13px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--line);white-space:nowrap;background:#fff;color:var(--ink2)}
.chip-opt.selected{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- 設定檔載入失敗 ---- */
.load-error{margin:auto;text-align:center;padding:32px;color:var(--muted);font-size:14px;line-height:1.8}
.load-error b{color:var(--ink)}