/* 九州行程 App — 旅行慵懶風（warm / relaxed vacation） */
:root{
  /* 暖沙背景 */
  --bg:#F4ECE0; --bg-soft:#FAF4EA;
  --card:#FFFDF8;
  /* 文字（暖棕，比純黑柔和） */
  --ink:#4A4039; --ink-soft:#90826F; --ink-faint:#B6A693;
  /* 主色：陶土 terracotta；副色：海沙鼠尾草 sage */
  --clay:#C57B57; --clay-deep:#A85638; --clay-tint:#F1E2D2;
  --sage:#5E8771; --sage-tint:#E7EFE7;
  /* 線條與陰影 */
  --line:#EADDCB;
  --shadow-sm:0 2px 8px rgba(120,90,60,.06);
  --shadow:0 8px 24px rgba(120,90,60,.10);
  --note-bg:#FBEEDA; --note-ink:#8A5A36; --note-line:#E7A85C;
  --radius:20px; --radius-sm:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
  /* Fraunces 用於拉丁字大標（日期數字），CJK 自動回退到系統字 */
  --display:"Fraunces",Georgia,"Songti TC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Hiragino Sans","Noto Sans TC","Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  /* 暖色環境光 + 細緻顆粒，讓沙色背景不再死板 */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(125% 80% at 100% -5%, rgba(197,123,87,.12), transparent 58%),
    radial-gradient(110% 70% at -5% 105%, rgba(94,135,113,.10), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  display:flex; flex-direction:column; overflow:hidden;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none!important}

/* 鍵盤使用者：跳到內容 */
.skip-link{
  position:fixed; top:8px; left:8px; z-index:1100;
  background:var(--clay-deep); color:#fff; font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:12px; box-shadow:var(--shadow);
  transform:translateY(-150%); transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}

/* 可見焦點框（鍵盤導覽，非滑鼠） */
:focus-visible{outline:2.5px solid var(--clay); outline-offset:2px; border-radius:6px}
.tab:focus-visible,.datechip:focus-visible{outline-offset:-2px}

/* ---------- App bar：暖陶土漸層 ---------- */
.appbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 18px 13px;
  background:linear-gradient(135deg,#D2916C 0%,#C57B57 55%,#A85638 100%);
  color:#fff; box-shadow:var(--shadow-sm);
}
.appbar-title{font-weight:700; font-size:17px; letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(90,50,30,.25)}
.lang-toggle{
  background:rgba(255,255,255,.22); color:#fff;
  border:1px solid rgba(255,255,255,.5); border-radius:22px;
  padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer;
  transition:background .25s ease, transform .15s ease;
}
.lang-toggle:hover{background:rgba(255,255,255,.32)}
.lang-toggle:active{transform:scale(.95)}

/* ---------- 日期條 ---------- */
.datestrip{
  flex:0 0 auto; display:flex; gap:8px; overflow-x:auto;
  padding:11px 14px; background:var(--bg-soft);
  border-bottom:1px solid var(--line); scrollbar-width:none;
}
.datestrip::-webkit-scrollbar{display:none}
.datechip{
  flex:0 0 auto; min-width:50px; text-align:center; font-size:12px; line-height:1.35;
  color:var(--ink-soft); background:var(--clay-tint); border:1px solid transparent;
  border-radius:14px; padding:7px 6px; cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:background .25s ease, color .25s ease, transform .15s ease;
}
.datechip:hover{background:#EBD7C3}
.datechip:active{transform:scale(.94)}
.datechip.on{
  background:linear-gradient(135deg,#C57B57,#A85638); color:#fff; font-weight:700;
  box-shadow:0 4px 12px rgba(168,86,56,.32);
}

/* ---------- 視圖容器 ---------- */
#views{flex:1 1 auto; position:relative; overflow:hidden}
.view{position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; animation:fadeIn .35s ease both}

/* 行程水平翻頁 */
.pager{display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
.pager::-webkit-scrollbar{display:none}
.daypage{flex:0 0 100%; scroll-snap-align:start; overflow-y:auto; padding:20px 16px 96px}

.day-head{display:flex; align-items:baseline; gap:12px; margin-bottom:6px}
.day-n{font-family:var(--display); font-optical-sizing:auto;
  font-size:52px; font-weight:600; color:var(--clay); line-height:.9;
  letter-spacing:-.025em; font-variant-numeric:lining-nums}
.day-meta{font-size:13px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.day-area{
  display:inline-block; font-size:14px; font-weight:600; color:var(--sage);
  background:var(--sage-tint); border-radius:20px; padding:6px 14px; margin-bottom:18px;
}

/* 步驟卡 */
.step{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 16px; margin-bottom:14px; box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .25s ease;
  animation:rise .4s ease both;
}
.step:active{transform:scale(.99)}
.step-cat{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--clay-deep); background:var(--clay-tint); border-radius:20px;
  padding:3px 11px; margin-bottom:8px;
}
.step-text{font-size:15.5px; line-height:1.72; color:var(--ink); text-wrap:pretty}
.step-text a.inlink{color:var(--clay-deep); text-decoration:underline; text-decoration-color:var(--clay); text-underline-offset:3px; font-weight:600}
.step-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{
  font-size:12.5px; color:var(--clay-deep); background:var(--bg);
  border:1px solid var(--line); border-radius:20px; padding:5px 12px;
  text-decoration:none; cursor:pointer; transition:background .2s ease, transform .15s ease;
}
.chip:hover{background:var(--clay-tint)}
.chip:active{transform:scale(.95)}
.step-imgs{display:flex; gap:10px; overflow-x:auto; margin-top:12px; scrollbar-width:none}
.step-imgs::-webkit-scrollbar{display:none}
.step-imgs img{height:140px; border-radius:var(--radius-sm); object-fit:cover; cursor:zoom-in;
  box-shadow:var(--shadow-sm)}

.note{
  font-size:13.5px; line-height:1.7; color:var(--note-ink);
  background:var(--note-bg); border-left:4px solid var(--note-line);
  border-radius:12px; padding:11px 14px; margin-top:10px;
}

/* ---------- 通用卡片（住宿/交通/備忘/地圖） ---------- */
.list{padding:20px 16px 96px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 17px; margin-bottom:14px; box-shadow:var(--shadow-sm);
  animation:rise .4s ease both;
}
.card h3{font-size:16.5px; font-weight:700; margin-bottom:7px; color:var(--ink); letter-spacing:.01em; text-wrap:balance}
.card h3 small{font-weight:500; color:var(--ink-soft); font-size:12.5px; font-variant-numeric:tabular-nums}
.card .sub{font-size:13.5px; color:var(--ink-soft); line-height:1.75; font-variant-numeric:tabular-nums}
.card .chip{margin-top:10px; display:inline-block}
.card .maps-img,.gallery img{width:100%; border-radius:var(--radius-sm); margin-top:10px; cursor:zoom-in; box-shadow:var(--shadow-sm)}
.prose p{font-size:14.5px; line-height:1.85; margin-bottom:9px; color:var(--ink)}
.prose p:first-child{color:var(--clay-deep); font-weight:600}

/* ---------- iOS 安裝提示 ---------- */
.install-hint{
  flex:0 0 auto; position:relative;
  display:flex; align-items:center; gap:10px;
  margin:0; padding:11px 40px 11px 16px;
  background:linear-gradient(135deg,#FBEEDA,#F1E2D2);
  border-top:1px solid var(--note-line);
  color:var(--note-ink); animation:rise .4s ease both;
}
.install-body{display:flex; flex-direction:column; gap:2px; line-height:1.5}
.install-body strong{font-size:14px; color:var(--clay-deep); font-weight:700}
.install-body span{font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:3px; flex-wrap:wrap}
.install-body b{color:var(--clay-deep)}
.install-body svg{vertical-align:-2px; color:var(--clay-deep)}
.install-x{
  position:absolute; top:8px; right:10px; width:26px; height:26px;
  border:0; border-radius:50%; background:rgba(168,86,56,.10); color:var(--note-ink);
  font-size:13px; line-height:1; cursor:pointer; transition:background .2s ease;
}
.install-x:hover{background:rgba(168,86,56,.18)}

/* ---------- 底部分頁 ---------- */
.tabbar{
  flex:0 0 auto; display:flex; background:var(--bg-soft);
  border-top:1px solid var(--line); padding-bottom:var(--safe-b);
  box-shadow:0 -2px 12px rgba(120,90,60,.06);
}
.tab{
  flex:1; background:none; border:0; padding:9px 0 7px; color:var(--ink-faint);
  font-size:11px; display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; transition:color .25s ease;
}
.tab span{font-size:21px; filter:grayscale(1); opacity:.55; transition:opacity .25s ease, transform .2s ease}
.tab i{font-style:normal; letter-spacing:.02em}
.tab.active{color:var(--clay-deep); font-weight:600}
.tab.active span{filter:none; opacity:1; transform:translateY(-1px)}

/* ---------- 圖片放大 ---------- */
.lightbox{position:fixed; inset:0; background:rgba(58,40,28,.92); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:14px;
  z-index:1000; padding:max(20px,env(safe-area-inset-top)) 20px 20px;
  animation:fadeIn .25s ease both}
.lightbox img{max-width:96%; max-height:84%; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:rise .3s ease both}
.lightbox-cap{color:rgba(255,255,255,.82); font-size:13px; text-align:center; max-width:80%; line-height:1.5}
.lightbox-cap:empty{display:none}
.lightbox-close{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 12px); right:16px;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.14); color:#fff; font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px);
  transition:background .2s ease, transform .15s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,.26)}
.lightbox-close:active{transform:scale(.92)}

/* ---------- 動態（慵懶、柔和；尊重 reduced-motion） ---------- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:translateY(0)}}
/* 進場錯落：卡片依序浮現，而非一次全部冒出 */
.step,.card{animation-delay:calc(var(--i,0) * 55ms)}
.daypage .step:nth-child(1){--i:0} .daypage .step:nth-child(2){--i:1}
.daypage .step:nth-child(3){--i:2} .daypage .step:nth-child(4){--i:3}
.daypage .step:nth-child(5){--i:4} .daypage .step:nth-child(6){--i:5}
.daypage .step:nth-child(7){--i:6} .daypage .step:nth-child(n+8){--i:7}
.list .card:nth-child(1){--i:0} .list .card:nth-child(2){--i:1}
.list .card:nth-child(3){--i:2} .list .card:nth-child(4){--i:3}
.list .card:nth-child(5){--i:4} .list .card:nth-child(n+6){--i:5}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}