/* ============================================================
 * 青州 + 济南 5天4晚攻略 · 「冷调宣纸」版式（v3 · 单日视图）
 * 结构：吸附导航 / 卷首 / 日期切换器 / 当日面板（主栏+侧注）/ 全局板块
 * 设计令牌：冷调宣纸底 + 墨色文字 + 朱砂点缀 + 青黛结构色
 * ============================================================ */

:root{
  /* 纸面（冷调，非暖米） */
  --paper:#f2f3f1;
  --paper-2:#e7e9e6;
  --card:#fbfbfa;
  /* 墨色 */
  --ink:#1c1e1d;
  --ink-2:#5d6360;
  --faint:#9ba19c;
  /* 线 */
  --line:#dcdeda;
  --line-2:#c6c9c4;
  /* 点缀 */
  --cinnabar:#a8382a;
  --qingdai:#35505e;
  /* 语义 */
  --ok-fg:#4f6349;
  --warn-fg:#8a6420;
  --danger-fg:#8c3b2e;
  --note-fg:#6f6135;
  --pend-fg:#9c6a2e;
  /* 圆角 3 档 */
  --r-sm:3px;
  --r-md:6px;
  --r-lg:10px;
  /* 间距 5 档 */
  --s1:6px;
  --s2:12px;
  --s3:20px;
  --s4:32px;
  --s5:52px;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --kai:"Kaiti SC","STKaiti","KaiTi",var(--serif);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);background:var(--paper);color:var(--ink);
  line-height:1.9;font-size:15px;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:920px;margin:0 auto;padding:0 24px 56px}

::selection{background:rgba(168,56,42,.14)}
a{color:var(--qingdai)}
a:focus-visible,button:focus-visible{outline:2px solid var(--cinnabar);outline-offset:2px;border-radius:var(--r-sm)}

/* ---------- 吸附导航 ---------- */
.topnav{
  position:sticky;top:0;z-index:50;
  background:rgba(242,243,241,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:920px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:2px;height:52px;
  overflow-x:auto;scrollbar-width:none;
}
.nav-in::-webkit-scrollbar{display:none}
.nav-brand{
  font-family:var(--kai);color:var(--cinnabar);font-size:16px;
  letter-spacing:3px;margin-right:14px;flex-shrink:0;
}
.topnav a{
  color:var(--ink-2);text-decoration:none;font-size:13px;letter-spacing:1.5px;
  padding:5px 10px;border-radius:var(--r-sm);flex-shrink:0;white-space:nowrap;
  transition:color .18s ease;
}
.topnav a:hover{color:var(--ink)}
.topnav a.on{color:var(--cinnabar)}
.topnav a.on::after{
  content:"";display:block;height:2px;background:var(--cinnabar);
  margin-top:1px;border-radius:1px;
}

/* ---------- 卷首 ---------- */
.hero{position:relative;padding:56px 0 40px;margin-bottom:var(--s2);text-align:center}
.hero::after{
  content:"行策";position:absolute;top:60px;right:0;width:32px;height:32px;
  background:var(--cinnabar);color:#fbfbfa;font-family:var(--kai);font-size:13px;
  line-height:1.1;display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;letter-spacing:2px;border-radius:var(--r-sm);
}
.hero-kicker{font-size:12px;letter-spacing:7px;text-indent:7px;color:var(--ink-2);margin-bottom:12px}
.hero h1{
  font-size:38px;font-weight:600;letter-spacing:9px;text-indent:9px;line-height:1.3;
}
.hero h1 em{font-style:normal;color:var(--cinnabar)}
.hero-sub{
  font-family:var(--kai);color:var(--ink-2);font-size:14.5px;
  max-width:38em;margin:12px auto 0;
}

/* 路线带 */
.route{display:flex;align-items:center;justify-content:center;margin:26px 0 4px;flex-wrap:wrap}
.route-node{position:relative;font-size:13.5px;letter-spacing:1px;padding:5px 2px}
.route-node small{display:block;font-size:10.5px;color:var(--faint);letter-spacing:2px;margin-top:1px}
.route-node::before{
  content:"";display:inline-block;width:7px;height:7px;
  border:1.5px solid var(--cinnabar);border-radius:50%;background:var(--paper);
  margin-right:8px;vertical-align:1px;
}
.route-lk{width:44px;height:1px;background:var(--line-2);margin:0 10px;position:relative}
.route-lk::after{
  content:attr(data-m);position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  font-size:10px;color:var(--faint);letter-spacing:0;white-space:nowrap;
}

/* 关键数据 */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
.stats>div{padding:14px 8px;border-left:1px solid var(--line)}
.stats>div:first-child{border-left:none}
.stats .k{font-size:11.5px;color:var(--ink-2);letter-spacing:1.5px}
.stats .v{font-size:16px;font-weight:600;margin-top:3px;letter-spacing:.5px}
.stats .v.hl{color:var(--cinnabar)}

/* ---------- 章节（无序号） ---------- */
.sec{padding:var(--s5) 0 8px;scroll-margin-top:66px}
.sec-h{display:flex;align-items:center;gap:14px;margin-bottom:var(--s3)}
.sec-h::before{
  content:"";width:26px;height:2px;background:var(--cinnabar);flex-shrink:0;
}
.sec-h h2{font-size:22px;font-weight:600;letter-spacing:2.5px}
.sec-h::after{content:"";flex:1;height:1px;background:var(--line-2)}
.sec-sub{font-family:var(--kai);color:var(--ink-2);font-size:13px;letter-spacing:1px;margin:-10px 0 18px}

/* ---------- 日期切换器 ---------- */
.switcher{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-bottom:var(--s3);padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);
}
.sw-btn{
  font-family:var(--serif);cursor:pointer;background:transparent;
  border:1px solid var(--line-2);border-radius:999px;
  padding:5px 14px;display:flex;align-items:baseline;gap:8px;
  color:var(--ink-2);transition:border-color .18s ease,color .18s ease;
}
.sw-btn:hover{border-color:var(--cinnabar);color:var(--ink)}
.sw-btn .sw-n{font-size:13px;font-weight:600;letter-spacing:1px}
.sw-btn .sw-d{font-size:11.5px;color:var(--faint);letter-spacing:.5px}
.sw-btn .sw-y{font-family:var(--kai);font-size:11.5px;color:var(--faint)}
.sw-btn.is-on{
  border-color:var(--cinnabar);color:var(--cinnabar);
  background:rgba(168,56,42,.055);
}
.sw-btn.is-on .sw-n{font-weight:700}
.sw-btn.is-on .sw-d,.sw-btn.is-on .sw-y{color:var(--cinnabar);opacity:.75}
.sw-hint{
  margin-left:auto;font-size:11.5px;color:var(--faint);letter-spacing:1px;
}

/* ---------- 当日面板 ---------- */
.panel{padding-top:var(--s2)}
.panel.is-in{animation:panelIn .34s cubic-bezier(.22,.7,.3,1) both}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.panel-h{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:var(--s2);border-bottom:1px solid var(--line-2);
}
.ph-l{display:flex;align-items:baseline;gap:12px;flex:1;min-width:0}
.ph-day{
  font-family:var(--kai);font-size:19px;font-weight:700;color:var(--cinnabar);
  letter-spacing:1px;white-space:nowrap;flex-shrink:0;
}
.ph-title{font-size:17px;font-weight:700;letter-spacing:.8px;line-height:1.5}
.ph-cost{
  font-family:var(--kai);font-size:13.5px;color:var(--cinnabar);
  border:1px solid var(--cinnabar);border-radius:999px;
  padding:2px 12px;white-space:nowrap;opacity:.85;flex-shrink:0;
}
.panel-sub{
  font-family:var(--kai);color:var(--ink-2);font-size:13px;
  letter-spacing:.6px;margin:var(--s2) 0;
}

/* 主栏 + 侧注 双栏 */
.panel-grid{display:grid;grid-template-columns:1fr 244px;gap:var(--s4);align-items:start}
.panel-main{min-width:0}
.panel-side{display:flex;flex-direction:column;gap:10px;position:sticky;top:70px}

.side-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s2) 14px;
}
.side-card h4{
  font-size:12px;letter-spacing:2px;color:var(--qingdai);
  margin-bottom:var(--s1);font-weight:600;
}
.side-card p{font-size:12.5px;color:var(--ink-2);line-height:1.8}
.side-card.is-warn h4{color:var(--warn-fg)}
.side-card.is-pend h4{color:var(--pend-fg)}
.side-card.is-note{background:var(--paper-2);border-color:var(--line)}
.side-card.is-note h4{color:var(--note-fg)}

/* ---------- 时间轴（单日） ---------- */
.tl{list-style:none;position:relative;padding-left:0}
.tl-item{
  position:relative;display:grid;grid-template-columns:96px 1fr;
  column-gap:18px;padding:0 0 20px 22px;
}
.tl-item::before{
  content:"";position:absolute;left:3.5px;top:8px;bottom:-2px;
  width:1px;background:var(--line-2);
}
.tl-item:last-child::before{display:none}
.tl-dot{
  position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;
  background:var(--card);border:1.5px solid var(--cinnabar);
}
.tl-t{
  font-size:12px;color:var(--cinnabar);font-weight:600;letter-spacing:.8px;
  padding-top:2px;text-align:right;white-space:nowrap;
}
.tl-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tl-p{font-size:15px;font-weight:600;letter-spacing:.4px}
.tl-d{font-size:13.5px;color:var(--ink-2);margin-top:3px}
.chip{
  font-family:var(--kai);font-size:11.5px;color:var(--qingdai);
  background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:999px;padding:0 10px;white-space:nowrap;
}

/* ---------- 提示条 ---------- */
.ok,.warn,.pend{
  background:var(--card);border:1px solid var(--line);
  border-left:2px solid var(--ink-2);border-radius:var(--r-sm);
  padding:10px 16px;font-size:13.5px;margin:12px 0;font-family:var(--kai);
}
.ok{color:var(--ok-fg);border-left-color:var(--ok-fg)}
.warn{color:var(--warn-fg);border-left-color:var(--warn-fg)}
.pend{color:var(--pend-fg);border-left-color:var(--pend-fg)}
.note{
  background:var(--paper-2);color:var(--note-fg);
  border-left:2px solid var(--note-fg);border-radius:var(--r-sm);
  padding:10px 16px;font-size:13.5px;margin:12px 0;font-family:var(--kai);
}
.note-plain{background:var(--card);color:var(--ink);border:1px solid var(--line)}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0 18px}
th{
  color:var(--ink-2);font-weight:600;font-size:12px;letter-spacing:1.5px;
  padding:10px;text-align:left;border-bottom:1px solid var(--line-2);
}
td{padding:10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tbody tr{transition:background-color .15s ease}
tbody tr:hover{background:rgba(53,80,94,.035)}
td.ok{color:var(--ok-fg);font-weight:600}
tr.sub td{background:var(--paper-2);border-bottom:1px solid var(--line-2)}
tr.sub:hover td{background:var(--paper-2)}
tr.total td{
  background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;
  letter-spacing:1px;border-bottom:none;
}
tr.total:hover td{background:var(--ink)}

/* ---------- 预算条形图 ---------- */
.bar-row{display:flex;align-items:center;gap:14px;margin:10px 0}
.bar-lb{width:76px;font-size:13px;flex-shrink:0;letter-spacing:1px}
.bar-track{flex:1;background:var(--paper-2);height:10px;border-radius:5px;overflow:hidden}
.bar{height:10px;background:var(--qingdai);border-radius:5px}
.bar-vl{width:92px;text-align:right;font-size:13px;font-weight:600;flex-shrink:0}

/* ---------- 清单 / 矩阵 ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ck-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px 18px;
}
.ck-card .v{font-size:14.5px;font-weight:700;letter-spacing:1px;margin-bottom:8px}
.ck-card ul{margin-left:0;list-style:none}
.ck-card li{
  font-size:13px;color:var(--ink-2);margin:6px 0;
  padding-left:20px;position:relative;
}
.ck-card li::before{content:"▢";position:absolute;left:0;top:0;color:var(--faint);font-size:12px}
.gap-top{margin-top:14px}

/* ---------- 避坑矩阵 ---------- */
.pit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pit{
  display:flex;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 15px;font-size:13px;line-height:1.75;
}
.pit-m{
  flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;
  justify-content:center;border-radius:var(--r-sm);font-size:12px;margin-top:2px;
}
.pit-x .pit-m{background:rgba(140,59,46,.09);color:var(--danger-fg)}
.pit-w .pit-m{background:rgba(138,100,32,.09);color:var(--warn-fg)}
.pit-i .pit-m{background:rgba(53,80,94,.09);color:var(--qingdai)}
.pit b{color:var(--ink)}

/* ---------- 应急矩阵 ---------- */
.emg-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.emg{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 20px;
}
.emg h4{font-size:15px;color:var(--warn-fg);margin-bottom:8px;letter-spacing:1px}
.emg p{font-size:13px;color:var(--ink-2);margin:5px 0}
.emg p b{color:var(--ink)}

/* ---------- 通用 ---------- */
ul{margin-left:20px}
li{font-size:13.5px;margin:6px 0}
h3{font-size:15.5px;font-weight:600;letter-spacing:1.5px;color:var(--qingdai);margin:22px 0 8px}
.foot{
  text-align:center;font-size:12px;color:var(--ink-2);
  padding:40px 0 8px;letter-spacing:1px;line-height:2;
}
.foot::before{
  content:"❖";display:block;color:var(--cinnabar);font-size:13px;margin-bottom:10px;
}

/* ---------- 响应式 ---------- */
@media(max-width:820px){
  .panel-grid{grid-template-columns:1fr;gap:var(--s3)}
  .panel-side{position:static;flex-direction:row;flex-wrap:wrap}
  .panel-side .side-card{flex:1 1 200px}
}
@media(max-width:640px){
  .wrap{padding:0 16px 40px}
  .hero{padding:40px 0 32px}
  .hero::after{top:44px}
  .hero h1{font-size:27px;letter-spacing:6px;text-indent:6px}
  .hero-kicker{letter-spacing:4px;text-indent:4px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats>div:nth-child(3){border-left:none}
  .stats>div{border-top:1px solid var(--line)}
  .stats>div:nth-child(-n+2){border-top:none}
  .route-lk{width:20px;margin:0 4px}
  .sec{padding:40px 0 4px}
  .sec-h h2{font-size:17px;letter-spacing:1px}
  .sw-hint{display:none}
  .sw-btn{padding:4px 11px;gap:6px}
  .sw-btn .sw-d{display:none}
  .grid2,.pit-grid,.emg-grid{grid-template-columns:1fr}
  .tl-item{grid-template-columns:1fr;column-gap:0;padding-left:20px}
  .tl-t{text-align:left;padding-top:0;margin-bottom:2px}
  .tl-dot{top:6px}
  .ph-title{font-size:15.5px}
  .panel-side{flex-direction:column}
}

/* ---------- 打印 ---------- */
@media print{
  .topnav,.switcher{display:none}
  .panel[hidden]{display:block !important}
  .panel-grid{grid-template-columns:1fr}
  .sec{padding:24px 0 4px}
}

/* ---------- 动效降级 ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}