/*
Theme Name: Hanwoo Travel
Theme URI: https://hanniu.com.cn/
Description: 以城市为核心、ACF 免費欄位驅動的旅遊指南 WordPress 主題。含城市樞紐頁、景點/美食/酒店/攻略 CPT 與重做的視覺系統。
Version: 1.0.1
Author: 小策 / WorkBuddy
Author URI: https://workbuddy.cn/
Text Domain: hanwoo-travel
Tags: travel, custom-post-type, acf, responsive, blog
Requires at least: 6.0
Tested up to: 6.6
*/

:root{
  --bg:#FBF7F2;
  --surface:#FFFFFF;
  --surface-2:#F4ECE3;
  --ink:#2B2522;
  --ink-soft:#6F635C;
  --line:#E7DDD2;
  --primary:#E8552D;
  --primary-soft:#FCE9E2;
  --teal:#1F6F6B;
  --teal-soft:#E2EFEE;
  --gold:#E0A92E;
  --shadow-sm:0 1px 2px rgba(43,37,34,.06), 0 2px 8px rgba(43,37,34,.05);
  --shadow-md:0 6px 22px rgba(43,37,34,.10);
  --radius:16px;
  --radius-sm:10px;
  --maxw:1120px;
  --ff:'Noto Sans TC', system-ui, -apple-system, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --serif:'Noto Serif TC', Georgia, 'Songti TC', serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--ff); color:var(--ink); background:var(--bg);
  line-height:1.75; -webkit-font-smoothing:antialiased; font-size:16px;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
h1,h2,h3,h4{line-height:1.25;}

/* ===== 頂部品牌條 ===== */
.topbar{
  position:sticky; top:0; z-index:50; background:rgba(251,247,242,.88);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:62px; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.3px;}
.brand .logo{
  width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--primary),var(--gold));
  display:grid; place-items:center; color:#fff; font-weight:900; font-size:16px;
}
.brand small{display:block; font-weight:500; font-size:10px; color:var(--ink-soft); letter-spacing:2px;}
.topnav{display:flex; gap:22px; font-weight:500; font-size:15px;}
.topnav a{color:var(--ink-soft); transition:color .2s;}
.topnav a:hover, .topnav a.active{color:var(--primary);}
.topcta{
  background:var(--primary); color:#fff; padding:9px 16px; border-radius:999px;
  font-weight:700; font-size:14px; box-shadow:var(--shadow-sm); white-space:nowrap;
}
.topcta:hover{background:#cf4320;}
@media(max-width:760px){ .topnav{display:none;} }

/* ===== Hero ===== */
.hero{position:relative; min-height:440px; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:#1c1714;}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05);}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,15,12,.15) 0%, rgba(20,15,12,.5) 55%, rgba(20,15,12,.82) 100%);}
.hero .wrap{position:relative; z-index:2; padding:46px 20px 34px; width:100%;}
.hero .eyebrow{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  color:rgba(255,255,255,.95); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.35);
  padding:5px 11px; border-radius:999px; margin-bottom:12px;}
.hero h1{font-family:var(--serif); font-size:clamp(34px,6vw,56px); margin:0 0 6px; letter-spacing:1px;}
.hero .sub{font-size:16px; opacity:.92; max-width:560px; margin:0 0 22px;}
.hero .facts{display:flex; flex-wrap:wrap; gap:10px;}
.fact{background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:10px 14px; min-width:120px; backdrop-filter:blur(4px);}
.fact b{display:block; font-size:12px; font-weight:500; opacity:.8;}
.fact span{font-size:15px; font-weight:700;}

/* ===== 吸頂分節導航 ===== */
.subnav{position:sticky; top:62px; z-index:40; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm);}
.subnav .wrap{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:6px 20px;}
.subnav .wrap::-webkit-scrollbar{display:none;}
.subnav a{white-space:nowrap; padding:12px 14px; font-weight:600; font-size:15px; color:var(--ink-soft); border-bottom:3px solid transparent; transition:.2s;}
.subnav a:hover{color:var(--ink);}
.subnav a.active{color:var(--primary); border-bottom-color:var(--primary);}
.subnav.is-hidden{display:none;}

section{padding:54px 0;}
.sec-head{margin-bottom:26px;}
.sec-head .kicker{color:var(--primary); font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase;}
.sec-head h2{font-family:var(--serif); font-size:clamp(24px,3.4vw,32px); margin:6px 0 8px;}
.sec-head p{color:var(--ink-soft); margin:0; max-width:640px;}

/* ===== 概覽 / 統計 ===== */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm);}
.stat .n{font-size:28px; font-weight:900; color:var(--teal); font-family:var(--serif);}
.stat .l{color:var(--ink-soft); font-size:14px; margin-top:2px;}
.intro{margin-top:26px; display:grid; grid-template-columns:1.4fr 1fr; gap:24px;}
.intro p{margin:0 0 14px;}
.neigh{background:var(--surface-2); border-radius:var(--radius); padding:20px;}
.neigh h3{margin:0 0 12px; font-size:17px;}
.neigh ul{margin:0; padding:0; list-style:none;}
.neigh li{padding:9px 0; border-bottom:1px dashed var(--line); display:flex; justify-content:space-between; gap:10px;}
.neigh li:last-child{border-bottom:0;}
.neigh .tag{font-size:12px; color:var(--teal); background:var(--teal-soft); padding:2px 8px; border-radius:999px; white-space:nowrap;}

/* ===== 篩選 chips ===== */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;}
.chip{border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); padding:8px 15px; border-radius:999px; font-weight:600; font-size:14px; cursor:pointer; transition:.18s;}
.chip:hover{border-color:var(--primary); color:var(--primary);}
.chip.active{background:var(--primary); border-color:var(--primary); color:#fff;}

/* ===== 卡片網格 ===== */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s; display:flex; flex-direction:column; height:100%;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.card-link{position:absolute; inset:0; z-index:1;}
.card .thumb{position:relative; aspect-ratio:16/10; min-height:140px; background:var(--surface-2); overflow:hidden; pointer-events:none;}
.card .thumb img{width:100%; height:100%; object-fit:cover;}
.card .cat{position:absolute; top:10px; left:10px; font-size:12px; font-weight:700; color:#fff; background:rgba(31,111,107,.92); padding:4px 10px; border-radius:999px; z-index:2; pointer-events:none;}
.card .rate{position:absolute; top:10px; right:10px; font-size:12px; font-weight:800; color:#3a2c12; background:var(--gold); padding:4px 9px; border-radius:999px; z-index:2; pointer-events:none;}
.card .body{position:relative; padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1; pointer-events:none; z-index:2;}
.card h3{margin:0; font-size:18px;}
.card p{margin:0; color:var(--ink-soft); font-size:14px; flex:1;}
.card .meta{display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--ink-soft); gap:8px; flex-wrap:wrap;}
.card .meta .arrow{color:var(--primary); font-weight:700;}
.card .body a{position:relative; z-index:3; pointer-events:auto;}
.card.hide{display:none;}
.empty{padding:40px; text-align:center; color:var(--ink-soft); background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius);}

/* ===== 美食價格帶 ===== */
.price{font-weight:800; color:var(--primary);}

/* ===== 住宿 ===== */
.stay{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.stay .item{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm);}
.stay h3{margin:0 0 6px; display:flex; align-items:center; gap:10px; font-size:17px;}
.stay .who{font-size:13px; color:var(--teal); font-weight:700;}
.stay p{margin:8px 0 0; color:var(--ink-soft); font-size:14px;}

/* ===== 交通 ===== */
.transit{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.tcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm);}
.tcard .ic{width:40px; height:40px; border-radius:10px; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center; font-size:20px; margin-bottom:10px;}
.tcard h3{margin:0 0 6px; font-size:16px;}
.tcard p{margin:0; font-size:13px; color:var(--ink-soft);}

/* ===== 行程時間線 ===== */
.timeline{position:relative; margin-top:10px; padding-left:8px;}
.timeline::before{content:""; position:absolute; left:18px; top:6px; bottom:6px; width:2px; background:var(--line);}
.day{position:relative; padding:0 0 26px 52px;}
.day:last-child{padding-bottom:0;}
.day .dot{position:absolute; left:9px; top:4px; width:20px; height:20px; border-radius:50%; background:var(--primary); border:4px solid #fff; box-shadow:0 0 0 2px var(--primary);}
.day h3{margin:0 0 4px; font-size:18px;}
.day .when{color:var(--primary); font-weight:700; font-size:13px; margin-bottom:8px;}
.day ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:15px;}
.day li{margin:3px 0;}

/* ===== 問答手風琴 ===== */
.faq{display:flex; flex-direction:column; gap:12px; max-width:820px;}
.qa{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;}
.qa button{width:100%; text-align:left; background:none; border:0; padding:18px 20px; font-family:var(--ff); font-size:16px; font-weight:700; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.qa .sign{color:var(--primary); font-size:22px; transition:transform .2s; flex-shrink:0; line-height:1;}
.qa.open .sign{transform:rotate(45deg);}
.qa .ans{max-height:0; overflow:hidden; transition:max-height .28s ease;}
.qa .ans p{margin:0; padding:0 20px 18px; color:var(--ink-soft);}
.qa.open .ans{max-height:800px;}

/* ===== 相關城市 / 卡片列表 ===== */
.related{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.rcity{position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; color:#fff; display:flex; align-items:flex-end;}
.rcity img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.rcity::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(20,15,12,.78));}
.rcity span{position:relative; z-index:2; padding:14px; font-weight:800; font-size:18px;}

/* ===== 首頁 / 列表通用 ===== */
.hero-sm{background:linear-gradient(135deg,#2b2522,#3a2f29); color:#fff; padding:60px 0 50px;}
.hero-sm .wrap{}
.hero-sm h1{font-family:var(--serif); font-size:clamp(28px,4vw,40px); margin:0 0 8px;}
.hero-sm p{opacity:.85; max-width:620px; margin:0;}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.guide-list{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.guide-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); display:flex; gap:14px;}
.guide-item .thumb{width:96px; height:96px; border-radius:12px; object-fit:cover; flex-shrink:0; background:var(--surface-2);}
.guide-item h3{margin:0 0 6px; font-size:16px;}
.guide-item p{margin:0; font-size:13px; color:var(--ink-soft);}

/* ===== 單篇攻略（正文） ===== */
.article{max-width:760px; margin:0 auto;}
.article .entry-meta{color:var(--ink-soft); font-size:14px; margin-bottom:18px;}
.article .entry-content{font-size:17px;}
.article .entry-content h2{font-family:var(--serif); font-size:26px; margin:34px 0 12px;}
.article .entry-content h3{font-size:20px; margin:26px 0 8px;}
.article .entry-content img{border-radius:12px; margin:18px 0;}
.article .entry-content blockquote{margin:18px 0; padding:14px 18px; background:var(--primary-soft); border-left:4px solid var(--primary); border-radius:8px;}
.callout{background:var(--teal-soft); border-left:4px solid var(--teal); border-radius:8px; padding:14px 18px; margin:18px 0;}

/* ===== 頁尾 ===== */
footer{background:#211b18; color:#cdbfb6; padding:40px 0; margin-top:20px; font-size:14px;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;}
footer a{color:#e7d8cd;}
footer .brand{color:#fff;}

/* ===== 響應式 ===== */
@media(max-width:980px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .grid{grid-template-columns:repeat(2,1fr);}
  .transit{grid-template-columns:repeat(2,1fr);}
  .related{grid-template-columns:repeat(2,1fr);}
  .intro{grid-template-columns:1fr;}
  .stay{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .guide-list{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .transit{grid-template-columns:1fr;}
  .related{grid-template-columns:repeat(2,1fr);}
  .feature-grid{grid-template-columns:1fr;}
  section{padding:40px 0;}
}

/* ===== 分頁 ===== */
.pagination{grid-column:1/-1; display:flex; justify-content:center; align-items:center; gap:8px; margin-top:28px; flex-wrap:wrap;}
.pagination .page-numbers{font-weight:700; font-size:14px; min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); transition:.18s;}
.pagination .page-numbers:hover{border-color:var(--primary); color:var(--primary);}
.pagination .page-numbers.current{background:var(--primary); border-color:var(--primary); color:#fff;}
.pagination .page-numbers.dots{border:0; background:transparent; pointer-events:none;}

/* ===== 詳情頁：事實卡 / 店鋪 / 酒店 / FAQ / 推薦 ===== */
.detail-hero{position:relative; min-height:420px; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:#1c1714;}
.detail-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.detail-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,15,12,.2) 0%, rgba(20,15,12,.55) 55%, rgba(20,15,12,.85) 100%);}
.detail-hero .wrap{position:relative; z-index:2; padding:46px 20px 34px; width:100%;}
.detail-hero .eyebrow{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:.5px; color:rgba(255,255,255,.95); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.35); padding:5px 11px; border-radius:999px; margin-bottom:12px;}
.detail-hero h1{font-family:var(--serif); font-size:clamp(30px,5vw,48px); margin:0 0 10px; letter-spacing:1px;}
.detail-hero .sub{font-size:16px; opacity:.92; max-width:620px; margin:0 0 18px;}
.detail-hero .facts{display:flex; flex-wrap:wrap; gap:10px;}
.detail-hero .fact{background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:10px 14px; min-width:110px;}
.detail-hero .fact b{display:block; font-size:12px; font-weight:500; opacity:.8;}
.detail-hero .fact span{font-size:15px; font-weight:700;}

.detail-grid{display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start;}
.detail-main{font-size:17px; line-height:1.8;}
.detail-main h2{font-family:var(--serif); font-size:24px; margin:34px 0 12px;}
.detail-main h3{font-size:19px; margin:26px 0 8px;}
.detail-main p{margin:0 0 18px;}
.detail-main ul{margin:0 0 18px; padding-left:22px;}
.detail-main li{margin:6px 0;}
.detail-main img{border-radius:12px; margin:18px 0;}

.detail-sidebar{position:sticky; top:84px;}
.side-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:16px; box-shadow:var(--shadow-sm);}
.side-card h3{margin:0 0 12px; font-size:16px; display:flex; align-items:center; gap:8px;}
.side-card p, .side-card li{font-size:14px; color:var(--ink-soft); margin:0 0 8px;}
.side-card ul{margin:0; padding:0; list-style:none;}
.side-card li{padding:8px 0; border-bottom:1px dashed var(--line);}
.side-card li:last-child{border-bottom:0;}
.side-card .label{font-size:12px; color:var(--ink-soft); display:block; margin-bottom:2px;}
.side-card .value{font-weight:700; color:var(--ink);}
.side-card a{color:var(--primary); font-weight:700;}

.shop-list, .hotel-list{display:flex; flex-direction:column; gap:14px;}
.shop, .hotel{background:var(--surface-2); border-radius:var(--radius-sm); padding:14px;}
.shop h4, .hotel h4{margin:0 0 4px; font-size:15px;}
.shop p, .hotel p{margin:0; font-size:13px; color:var(--ink-soft);}
.shop .row, .hotel .row{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; font-size:13px; color:var(--ink-soft);}
.shop .row span, .hotel .row span{display:inline-flex; align-items:center; gap:4px;}

.faq-detail{display:flex; flex-direction:column; gap:12px; margin:24px 0;}
.faq-detail .qa{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;}
.faq-detail .qa button{width:100%; text-align:left; background:none; border:0; padding:16px 18px; font-family:var(--ff); font-size:15px; font-weight:700; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq-detail .qa .sign{color:var(--primary); font-size:20px; transition:transform .2s; flex-shrink:0; line-height:1;}
.faq-detail .qa.open .sign{transform:rotate(45deg);}
.faq-detail .ans{max-height:0; overflow:hidden; transition:max-height .28s ease;}
.faq-detail .ans > *{margin:0; padding:0 18px 14px; color:var(--ink-soft); font-size:14px;}
.faq-detail .qa.open .ans{max-height:600px;}

.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px;}
.related-grid .rcard{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; height:100%; transition:transform .18s, box-shadow .18s;}
.related-grid .rcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.related-grid .rcard img{width:100%; aspect-ratio:16/10; object-fit:cover;}
.related-grid .rcard span{display:block; padding:12px 14px; font-weight:700; font-size:15px; flex:1;}

@media(max-width:980px){
  .detail-grid{grid-template-columns:1fr;}
  .detail-sidebar{position:static;}
  .related-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:620px){
  .related-grid{grid-template-columns:1fr;}
  .detail-hero .facts .fact{min-width:auto; flex:1 1 45%;}
}