/* 公開攻略頁（/g/<slug>）。色票、字型跟主站 web/styles/visual-lock.css 同一套：
   米白紙底、深藍字、深青綠按鈕、標題用 Noto Serif TC。以前這頁是另一套紫色系，
   從 LINE 分享出去的人第一眼看到的就是它，跟點進主站後像兩個不同的產品。 */
:root {
  --ink: #07375b;
  --action: #174e5b;
  --action-hover: #103e4a;
  --tint: #fffaf3;
  --muted: #6d6659;
  --line: #dccfb9;
  --accent: #93664d;
  --font-display: "Noto Serif TC", "Noto Serif CJK TC", "Source Han Serif TC", "PMingLiU", serif;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: var(--ink);
  background: #fbf6ec;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: linear-gradient(180deg, #fffaf3 0%, #fbf6ec 100%); }
button { font: inherit; cursor: pointer; }
.reader-shell { width: min(100%, 520px); min-height: 100vh; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 20px max(38px, env(safe-area-inset-bottom)); }
.reader-topbar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(128, 103, 57, .18); }
.wordmark { justify-self: center; display: block; line-height: 0; }
.wordmark img { display: block; height: 34px; width: auto; }
.icon-button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; color: var(--action); background: transparent; }
.icon-button svg, .share-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.icon-button:focus-visible, .share-button:focus-visible, .empty-action:focus-visible { outline: 3px solid rgba(42, 106, 112, .42); outline-offset: 3px; }
.guide-story { padding-top: 36px; }
h1 { margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 8vw, 2.4rem); font-weight: 700; line-height: 1.25; letter-spacing: .01em; }
.starting-point { margin: 24px 0 0; font-family: var(--font-display); font-size: clamp(1.35rem, 6vw, 1.7rem); font-weight: 700; line-height: 1.4; }
.memory-section { margin-top: 56px; }
/* CHU-358：新攻略的實用資訊（地點／停留時間／花費／適合誰）放在標題正下方。 */
.practical-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0 0; }
/* 地點可能很長，自己佔一整列；停留時間／花費／適合誰都很短，兩兩並排省一半高度。 */
.practical-facts div:first-child,
.practical-facts div:last-child:nth-child(even) { grid-column: 1 / -1; }  /* 最後落單的那格也佔整列 */
.practical-facts div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--tint); }
.practical-facts dt { margin: 0 0 4px; color: var(--muted); font-size: .86rem; font-weight: 700; }
.practical-facts dd { margin: 0; color: var(--ink); font-size: 1.12rem; font-weight: 700; line-height: 1.45; }
.practical-facts + .memory-section { margin-top: 40px; }
.section-label { margin: 0 0 14px; color: var(--accent); font-size: .94rem; font-weight: 700; }
blockquote { position: relative; margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 7vw, 2.1rem); font-weight: 700; line-height: 1.4; letter-spacing: .01em; }
blockquote::before { content: "“"; }
blockquote::after { content: "”"; }
.mood-strip { margin: 36px 0 0; padding: 18px 15px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--tint); font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; line-height: 1.4; text-align: center; }
.photo-gallery { display: grid; gap: 22px; margin-top: 36px; }
.photo-gallery-item { margin: 0; }  /* <figure> 預設左右各 40px，照片會縮在中間 */
.photo-gallery-item img { display: block; width: 100%; border-radius: 14px; object-fit: cover; aspect-ratio: 4 / 3; background: var(--tint); }
.photo-gallery-caption { margin: 10px 2px 0; color: var(--ink); font-size: .93rem; line-height: 1.6; }
.photo-gallery-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 2px 0; padding: 0; list-style: none; }
.photo-gallery-tags li { padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--tint); font-size: .8rem; font-weight: 700; }
.share-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 12px; min-height: 54px; margin-top: 36px; border: 0; border-radius: 15px; color: #fff; background: linear-gradient(180deg, #2a6a70 0%, var(--action) 100%); box-shadow: 0 7px 16px rgba(7, 56, 82, .16); font-size: 1.04rem; font-weight: 800; }
.share-button:hover { background: var(--action-hover); }
.share-status { min-height: 22px; margin: 10px 0 0; color: var(--muted); font-size: .83rem; text-align: center; }
/* 公開頁是目前唯一會被分享出去的畫面：點連結進來的朋友看完要有路可以走
   （2026-09-27：原本結尾只有分享按鈕，返回箭頭還會把訪客帶到寫攻略的登入牆）。 */
.reader-next { display: grid; gap: 10px; margin-top: 18px; }
.reader-next a { display: flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid rgba(7, 56, 82, .22); border-radius: 14px; color: var(--action); background: transparent; font-weight: 700; text-decoration: none; }
.reader-next a:hover { background: rgba(42, 106, 112, .06); }
.reader-next a:focus-visible { outline: 3px solid rgba(42, 106, 112, .42); outline-offset: 3px; }
.reader-note { margin: 40px 0 0; padding-top: 16px; border-top: 1px solid rgba(128, 103, 57, .18); color: var(--muted); font-size: .92rem; }
.empty-state { padding: 26vh 4px 0; text-align: center; }
.empty-state h1 { font-size: 1.8rem; }
.empty-state p { margin: 16px auto 28px; color: var(--muted); line-height: 1.7; }
.empty-action { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 0 24px; border-radius: 14px; color: #fff; background: var(--action); font-weight: 800; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* 「以這篇為底稿」的來源標示 */
.based-on { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.based-on a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* 「照這篇走」：地點對得到場域地點的攻略才顯示（API 的 can_follow），打開 QGuide 把站點排進智慧路線。 */
.follow-link { display: flex; min-height: 50px; align-items: center; justify-content: center; margin-top: 18px; padding: 0 16px; border: 1.5px solid var(--action); border-radius: 14px; color: var(--action); background: #fff; font-weight: 800; text-decoration: none; }
.follow-link:hover { background: rgba(42, 106, 112, .06); }
.follow-link:focus-visible { outline: 3px solid rgba(42, 106, 112, .42); outline-offset: 3px; }
/* 「分享給 LINE 好友」：大部分人在 LINE 裡，開 LINE 的分享畫面比複製貼上順。 */
.line-share { display: flex; min-height: 50px; align-items: center; justify-content: center; margin-top: 12px; padding: 0 16px; border: 1.5px solid #06c755; border-radius: 14px; color: #05803a; background: #fff; font-weight: 800; text-decoration: none; }
.line-share[hidden] { display: none; }
.line-share:hover { background: rgba(6, 199, 85, .08); }
.line-share:focus-visible { outline: 3px solid rgba(6, 199, 85, .45); outline-offset: 3px; }