:root{
  --paper:#F5F2EA; --paper-2:#EDE8DD;
  --ink:#26231E; --ink-2:#453F35; --ink-3:#6A6353; --ink-4:#C3BCA9;
  --rule:#DCD5C6;
  --blue:#1E3E86; --blue-h:#284DA0;
  --serif:"Noto Serif TC",serif;
  --sans:"Noto Sans TC",system-ui,sans-serif;
  --r:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-weight:300;font-size:16px;line-height:1.9;padding:0 24px 40px}
.wrap{max-width:620px;margin:0 auto;display:flex;flex-direction:column;
  min-height:calc(100vh - 40px);min-height:calc(100dvh - 40px)}
.wrap>section{flex:1 0 auto}
a{color:inherit}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.anim-view{animation:fadeUp .2s ease-out}
.anim-card{animation:fadeIn .18s ease-out}
.anim-count{animation:fadeIn .5s ease-out}

/* 頁首 */
.masthead{padding:28px 0 0}
.brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none;
  padding:6px 8px 6px 0;border-radius:var(--r);transition:opacity .15s}
.brand:hover{opacity:.72}
.brand img{width:42px;height:42px;border-radius:50%;flex:none;display:block}
.brand .txt{line-height:1.45}
.brand .n1{font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:.03em;display:block}
.brand .n2{font-size:12.5px;color:var(--ink-3);letter-spacing:.14em;display:block}

/* 開場 */
.intro{padding:64px 0 0}
.intro .lead{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.75;letter-spacing:.02em}
.intro .count{font-family:var(--serif);font-weight:600;font-size:44px;line-height:1;
  color:var(--blue);display:inline-block;margin:0 4px;vertical-align:-3px}
.intro p.sub{margin-top:32px;color:var(--ink-2);font-size:15px;max-width:30em}
.intro .alt{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule);
  color:var(--ink-3);font-size:14px}

/* 按鈕 */
.btn{display:inline-block;background:var(--blue);color:#fff;font-weight:400;font-size:16px;
  padding:16px 40px;border-radius:var(--r);line-height:1;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--blue-h)}
.btn-row{margin-top:40px;display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.lnk{color:var(--ink-2);font-size:14px;padding:6px 0;text-decoration:none;
  border-bottom:1px solid var(--rule)}
.lnk:hover{color:var(--ink);border-color:var(--ink-3)}

/* 問答 */
.step{padding:56px 0 0}
.step .no{font-family:var(--serif);font-size:13px;color:var(--ink-3);letter-spacing:.08em}
.step h2{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.7;
  margin-top:14px;letter-spacing:.02em}
.step .qnote{margin-top:14px;font-size:13px;color:var(--ink-3);line-height:1.75}
.opts{margin-top:36px;border-top:1px solid var(--rule)}
.opt{display:block;width:100%;text-align:left;padding:22px 4px;
  border-bottom:1px solid var(--rule);font-size:18px;transition:padding-left .15s,color .15s}
.opt small{display:block;font-size:13px;color:var(--ink-3);margin-top:4px;line-height:1.6}
.opt:hover{padding-left:14px;color:var(--blue)}

/* 結果 */
.res-head{padding:52px 0 0}
.res-head .cond{font-size:14px;color:var(--ink-3)}
.res-head h2{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.7;margin-top:12px}
.list{margin-top:12px}

/* 卡片 */
.item{padding:42px 0;border-bottom:1px solid var(--rule);display:flex;gap:18px}
.item .num{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.15;
  color:var(--ink-4);flex:none;width:46px}
.item .body{min-width:0;flex:1}
.item .why{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.85;letter-spacing:.02em}
.item .name{margin-top:20px;font-size:15px;font-weight:400;color:var(--ink-2)}
.item .place{margin-top:6px;font-size:14px;color:var(--ink-3)}
.item .place .n{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--ink);
  line-height:1;padding:0 3px}
.tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:12.5px;color:var(--ink-2);background:var(--paper-2);
  padding:5px 11px;border-radius:var(--r);line-height:1.5}
.item .note{margin-top:16px;font-size:13.5px;color:var(--ink-2);
  padding-left:14px;border-left:2px solid var(--rule);line-height:1.75}
.item .go{margin-top:22px}
.item .go .btn{padding:14px 34px;font-size:15px}
/* 整張卡片都可點：把按鈕的可點範圍撐滿卡片 */
.item{position:relative;cursor:pointer}
.item .go .btn::after{content:"";position:absolute;inset:0}
.item .why{transition:color .15s}
@media (hover:hover){
  .item:hover .why{color:var(--blue)}
  .item:hover .go .btn{background:var(--blue-h)}
}
.foot-note{margin-top:26px;font-size:12.5px;color:var(--ink-3);line-height:1.8}

/* 提示區塊 */
.empty{padding:44px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.empty h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.75}
.empty p{margin-top:16px;color:var(--ink-2);font-size:15px}
.alts{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.alt{font-size:14px;padding:11px 17px;border:1px solid var(--rule);
  border-radius:var(--r);transition:border-color .15s,color .15s}
.alt:hover{border-color:var(--blue);color:var(--blue)}

/* 總覽 */
.browse-head{padding:52px 0 0}
.browse-head h2{font-family:var(--serif);font-weight:400;font-size:26px}
.filters{margin-top:30px;padding-top:24px;border-top:1px solid var(--rule)}
.frow{margin-bottom:20px}
.frow .flabel{font-size:13px;color:var(--ink-3);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:14px;padding:9px 15px;border:1px solid var(--rule);border-radius:var(--r);
  line-height:1.4;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.chip:hover{border-color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.count-line{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule);
  font-size:14px;color:var(--ink-3);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.count-line .clear{font-size:13px;color:var(--blue);border-bottom:1px solid var(--rule)}
.more{margin-top:34px;text-align:center}
.more button{font-size:15px;padding:14px 30px;border:1px solid var(--rule);
  border-radius:var(--r);transition:border-color .15s,color .15s}
.more button:hover{border-color:var(--blue);color:var(--blue)}

/* 頁尾 */
footer{margin-top:80px;padding-top:30px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-3);line-height:1.9}
footer .fl{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:14px}
footer .fl button{font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--rule)}
footer .fl button:hover{color:var(--ink)}
footer .fl-title{font-size:13px;color:var(--ink-2);margin-bottom:8px}
.fcities{margin-bottom:22px}
.fcities p{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:6px}
.fcities .fg{color:var(--ink-3);min-width:3em}
.fcities a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.fcities a:hover{color:var(--ink)}

/* 彈窗 */
.mask{position:fixed;inset:0;background:rgba(38,35,30,.44);display:flex;
  align-items:flex-end;justify-content:center;z-index:50}
.modal{background:var(--paper);width:100%;max-width:620px;max-height:86vh;overflow-y:auto;
  border-radius:var(--r) var(--r) 0 0;padding:32px 24px 40px;position:relative}
.modal h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.6;padding-right:44px}
.modal p{margin-top:18px;font-size:14.5px;color:var(--ink-2);line-height:1.95}
.modal .x{position:absolute;top:20px;right:18px;width:38px;height:38px;
  font-size:22px;line-height:1;color:var(--ink-3);border-radius:var(--r)}
.modal .x:hover{color:var(--ink);background:var(--paper-2)}
@media (min-width:620px){
  .mask{align-items:center;padding:24px}
  .modal{border-radius:var(--r);padding:36px 34px 40px}
}

.hide{display:none}
@media (max-width:480px){
  body{padding:0 20px 32px}
  .wrap{min-height:calc(100vh - 32px);min-height:calc(100dvh - 32px)}
  .intro .lead{font-size:25px}
  .intro .count{font-size:38px}
  .step h2{font-size:23px}
  .item{gap:13px}
  .item .num{font-size:28px;width:38px}
  .item .why{font-size:20px}
  .item .place .n{font-size:19px}
  .res-head h2,.browse-head h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .anim-view,.anim-card,.anim-count{animation:none!important}
}

/* ---- 靜態頁補充 ---- */
.crumb{padding-top:40px;font-size:13px;color:var(--ink-3)}
.crumb a{text-decoration:none;border-bottom:1px solid var(--rule)}
.crumb a:hover{color:var(--ink)}
.crumb .sep{padding:0 4px}
.intro.city{padding-top:28px}
.intro.city h1.lead{font-weight:400}
.where-link{margin-top:20px;font-size:15px}
.where-link a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--rule)}
.pick{margin-top:44px;padding:24px 22px;background:var(--paper-2);border-radius:var(--r)}
.pick-h{font-family:var(--serif);font-weight:400;font-size:20px}
.pick ul{list-style:none;margin-top:12px}
.pick li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px}
.pick li:last-child{border-bottom:none}
.pick .who{color:var(--ink-2)}
.pick a{color:var(--blue);text-decoration:none;white-space:nowrap;font-weight:500}
.pick a::after{content:"→";margin-left:3px;font-size:11px;vertical-align:-3px;font-weight:400;color:var(--ink-3)}
.cmp{width:100%;border-collapse:collapse;margin-top:18px;font-size:14px;line-height:1.7}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:1px solid var(--rule)}
.cmp thead th{font-weight:400;color:var(--ink-3);font-size:12.5px;border-bottom:1px solid var(--ink-4)}
.cmp tbody th{font-weight:400;white-space:nowrap}
.cmp tbody th a{color:var(--blue);font-weight:500;text-decoration:none}
.cmp tbody th a::after{content:"→";font-size:11px;font-weight:400;margin-left:3px;vertical-align:-3px;color:var(--ink-3)}
.w-sum{margin-top:18px;font-size:16px;line-height:2}
.w-near{margin-top:12px;font-size:14px;color:var(--ink-2);line-height:1.8}
.w-go{margin-top:20px}
.btn.btn-sm{padding:13px 28px;font-size:15px}
@media (max-width:620px){
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:100%}
  .cmp tr{padding:14px 0;border-bottom:1px solid var(--rule)}
  .cmp th,.cmp td{border:none;padding:3px 0}
  .cmp tbody th{font-size:17px;margin-bottom:4px}
  .cmp td::before{content:attr(data-l);display:inline-block;min-width:3em;margin-right:10px;color:var(--ink-3);font-size:13.5px}
}
.area-intro{margin-top:28px;max-width:34em}
.area-intro p{font-size:16px;line-height:2;color:var(--ink);margin-top:14px}
.area-intro p:first-child{margin-top:0}
.area-intro+.sub{margin-top:26px}
.intro .sub.small{margin-top:14px;font-size:13px;color:var(--ink-3)}
.nav-label{margin-top:36px;font-size:13px;color:var(--ink-3)}
.theme-nav,.area-nav{margin-top:10px}
a.chip,a.alt{text-decoration:none;display:inline-block}
.area-h{font-family:var(--serif);font-weight:400;font-size:24px;margin-top:64px;padding-bottom:6px;
  border-bottom:1px solid var(--ink-4);scroll-margin-top:16px}
.area-h .cnt{font-family:var(--sans);font-size:13px;color:var(--ink-3);margin-left:12px}
.area-h .more-link{float:right;font-family:var(--sans);font-size:13px;color:var(--blue);text-decoration:none;margin-top:8px}
.list>.item:last-child{border-bottom:none}
.wrap>section>.empty:last-child{border-bottom:none}
footer .disc{margin-top:18px}
@media (max-width:480px){.area-h{font-size:21px}.area-h .more-link{float:none;display:block;margin:4px 0 0}}