/* ============================================================
   synfamily.xyz — 表哥家庭旅遊沉浸式網站(通用版型)
   風格取自個人品牌站 00-integrated 的 hut8 式低彩度油墨/紙色調,
   但範圍收斂:無 PWA / i18n / 客服聊天,只有 3D 旅程 + 筆記卡片 + 小地圖。
   ============================================================ */
:root{
  --ink:#141414; --ink2:#1c1c1c; --paper:#f1efe9; --paper2:#e7e4da;
  --sage:#bcbfb0; --sage-d:#8f9384; --line:#d8d3c7; --line-d:#2a2a2a;
  --accent:#6f7560; --accent-soft:#aab09c;
  --sans:"Helvetica Neue","Microsoft JhengHei","PingFang TC",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:var(--paper)}
body{font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font-family:inherit;cursor:pointer}

/* 3D 場景固定滿版當背景,捲動不會移動它本身,由 journey3d.js 依捲動進度算相機位置 */
#stage3d{position:fixed;inset:0;z-index:0}
#stage3d canvas{display:block;width:100%;height:100%}

/* 撐出捲動高度的透明軌道,站數 * 每站高度,實際內容都是疊加在上面的固定元素 */
#scrollTrack{position:relative;z-index:1;pointer-events:none}

/* 頂部進度條 */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent-soft);z-index:60;transition:width .08s linear}

/* 頂部標題列 */
header.top{position:fixed;top:0;left:0;right:0;z-index:50;padding:22px 30px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
header.top .brand{font-weight:700;font-size:18px;letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.5)}
header.top .brand small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);font-weight:400;margin-top:4px}
header.top .idx{font-family:var(--mono);font-size:12px;color:var(--accent-soft);text-align:right;text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* 開場提示 */
#hint{position:fixed;bottom:26px;left:0;right:0;z-index:40;display:flex;justify-content:center;pointer-events:none;transition:opacity .6s ease}
#hint span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);background:rgba(20,20,20,.5);border:1px solid rgba(241,239,233,.28);border-radius:999px;padding:9px 18px;backdrop-filter:blur(6px)}
#hint.hide{opacity:0}

/* 站點筆記卡片(Notion 式區塊卡片) */
#noteCard{position:fixed;top:96px;right:26px;bottom:120px;width:340px;max-width:calc(100vw - 40px);z-index:45;
  background:rgba(241,239,233,.96);color:var(--ink);border-radius:16px;border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.4);overflow-y:auto;padding:22px 22px 26px;
  opacity:0;transform:translateX(24px);pointer-events:none;transition:opacity .35s ease,transform .35s ease}
#noteCard.open{opacity:1;transform:none;pointer-events:auto}
#noteCard .noteClose{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--paper2);color:var(--ink);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}
#noteCard .noteDate{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
#noteCard .notePlace{font-family:var(--mono);font-size:11px;color:var(--sage-d);margin-top:4px}
#noteCard h3{font-size:22px;margin:10px 0 4px;line-height:1.2}
#noteCard .noteSummary{font-size:13px;color:var(--sage-d);margin-bottom:14px}
#noteCard .noteBody p{font-size:14px;margin-bottom:10px}
#noteCard .noteHighlights{list-style:none;margin:6px 0 16px;padding:0}
#noteCard .noteHighlights li{font-size:13px;padding:6px 0 6px 18px;border-bottom:1px solid var(--line);position:relative}
#noteCard .noteHighlights li::before{content:"·";position:absolute;left:4px;color:var(--accent)}
#noteCard .notePhotos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
#noteCard .notePhotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--line);filter:grayscale(.15) contrast(1.05)}
#noteCard .noteLinks{display:flex;flex-wrap:wrap;gap:8px}
#noteCard .linkChip{font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:8px 12px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);background:transparent}
#noteCard .linkChip:hover{background:var(--accent);color:var(--paper)}

@media(max-width:760px){
  #noteCard{left:12px;right:12px;top:auto;bottom:0;width:auto;max-width:none;max-height:58vh;border-radius:18px 18px 0 0;transform:translateY(24px)}
  #noteCard.open{transform:none}
}

/* 右下角小地圖(Obsidian graph view 隱喻) */
#minimap{position:fixed;right:26px;bottom:26px;z-index:45;width:190px;background:rgba(20,20,20,.66);border:1px solid rgba(241,239,233,.2);border-radius:12px;padding:10px;backdrop-filter:blur(6px)}
#minimap .mmTitle{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:6px}
#minimap svg{width:100%;height:110px;display:block}
#minimap .node{fill:var(--paper2);stroke:rgba(20,20,20,.5);stroke-width:1.5;transition:fill .25s,r .25s}
#minimap .node.active{fill:var(--accent-soft)}
#minimap .edge{stroke:rgba(241,239,233,.35);stroke-width:1}
#minimap .nodeLabel{font-family:var(--mono);font-size:7px;fill:var(--paper2);opacity:.85}

@media(max-width:760px){
  #minimap{display:none} /* 手機螢幕太窄,小地圖與底部卡片會打架,先隱藏,不影響核心體驗 */
}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}