:root {
  --bg: #faf8f2;             /* 霧感奶白底色 */
  --fg: #222;                /* 深灰主文字（漫畫描邊風格） */
  --muted: #888;             /* 次要文字 */
  --accent: #222;            /* 強調色，漫畫描邊黑 */
  --card: #fffdfa;           /* 卡片底色，淡奶白 */
  --border: #222;            /* 明確黑色邊線 */
  --link: #222;              /* 連結黑色 */
}

/* 卡通樹林背景：漫畫風格、輪廓明確，使用 SVG 色塊與描邊 */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', 'Noto Sans TC', Arial, sans-serif;
  min-height: 100vh;
  margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='1200' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23faf8f2' width='100%25' height='100%25'/%3E%3Cellipse fill='%23e5ecc8' stroke='%23222' stroke-width='4' cx='200' cy='550' rx='70' ry='120'/%3E%3Cellipse fill='%23d8dca5' stroke='%23222' stroke-width='4' cx='350' cy='530' rx='85' ry='130'/%3E%3Cellipse fill='%23e5ecc8' stroke='%23222' stroke-width='4' cx='600' cy='580' rx='110' ry='140'/%3E%3Cellipse fill='%23d8dca5' stroke='%23222' stroke-width='4' cx='900' cy='570' rx='80' ry='120'/%3E%3Cellipse fill='%23e5ecc8' stroke='%23222' stroke-width='4' cx='1050' cy='540' rx='60' ry='110'/%3E%3Crect fill='%239cac80' stroke='%23222' stroke-width='4' x='185' y='580' width='15' height='40' rx='5'/%3E%3Crect fill='%239cac80' stroke='%23222' stroke-width='4' x='335' y='560' width='15' height='60' rx='5'/%3E%3Crect fill='%239cac80' stroke='%23222' stroke-width='4' x='590' y='600' width='20' height='30' rx='7'/%3E%3Crect fill='%239cac80' stroke='%23222' stroke-width='4' x='890' y='590' width='15' height='40' rx='5'/%3E%3Crect fill='%239cac80' stroke='%23222' stroke-width='4' x='1040' y='570' width='10' height='30' rx='5'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: bottom;
}

/* 保持原本排版，強調描邊 */
.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header - Comics style border */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 242, 0.93);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 3px solid var(--border);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2em;
  letter-spacing: 0.5px;
  border: 3px solid transparent;
  border-radius: 8px;
  padding: 2px 6px;
}
.top-nav {
  margin-left: auto;
  display: flex;
  gap: 16px;
}
.top-nav a {
  color: var(--fg);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  border: 2px solid transparent;
  font-weight: 600;
  transition: border-color 0.18s, background 0.18s;
}
.top-nav a:hover {
  background: #ede8d9;
  color: var(--accent);
  border-color: var(--border);
}
.top-nav a.active {
  color: var(--accent);
  background: #ede8d9;
  border-color: var(--border);
}

/* Sections */
.section {
  position: relative;
  padding: 64px 0;
  border-top: 3px solid var(--border);
  background: transparent;
}
.intro-section {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-top: 96px;
}
.content-section {
  background: linear-gradient(180deg, rgba(250,248,242,0.5), rgba(250,248,242,0.1));
  border-top-color: var(--border);
}

.intro-content {
  text-align: center;
  max-width: 840px;
}
.intro-content h1 {
  font-size: 36px;
  margin: 0 0 8px;
  letter-spacing: 0.2px;
  color: var(--fg);
  text-shadow: 0 1px 0 #fff, 0 0px 2px #d8d8d8;
}
.subtitle {
  color: var(--muted);
  margin-bottom: 28px;
  font-size: 1.12em;
}

/* Road grid */
.road-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 8px;
}
.road-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 3px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  color: var(--fg);
  background: var(--card);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
  box-shadow: 0 2px 0 #f5f2e7;
  font-weight: 600;
}
.road-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: #ede8d9;
}

.site-header .header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 1400px;    /* 可選：若想把內部內容寬度上限設回來 */
  margin: 0 auto;       /* 若設了 max-width，這行會把內容置中 */
}

/* 1. 左上角顯示位置與路徑 */
.site-header .position-indicator {
  position: static;
  margin-right: 16px;
  background: #fffdfa;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 7px 14px;
  font-size: 15px;
  font-weight: 600;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 2px 0 #f5f2e7;
}
.position-indicator .path {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  word-break: break-all;
}

/* 2. 右上角 menu 按鈕 */
.site-header .tree-menu-toggle {
  margin-left: 16px;
  margin-right: 0px;
  background: #fffdfa;
  border: 2px solid var(--border);
  border-radius: 30px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 0 #f5f2e7;
  transition: border-color 0.18s, background 0.18s;
  position: relative;
  z-index: 3;
}
.tree-menu-toggle:hover {
  border-color: var(--accent);
  background: #ede8d9;
}

/* Menu icon (三條線/樹狀圖標) */
.tree-menu-toggle svg {
  width: 28px;
  height: 28px;
  fill: var(--border);
}

.you-are-here {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 6px 12px;
  border: 2px solid var(--border);
  background: #faf8f2;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* Cards/list/contact sections */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 16px;
  margin-top: 12px;
}
.card {
  background: var(--card);
  border: 3px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 0 #f5f2e7;
}
.card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--accent);
  font-weight: 700;
}

.list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.list li {
  padding: 12px 12px;
  border: 2px solid var(--border);
  background: var(--card);
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
}
.list small {
  color: var(--muted);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 12px;
  margin-top: 12px;
}
.contact-item {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  color: var(--fg);
  text-decoration: none;
  background: var(--card);
  font-weight: 700;
  font-size: 1.05rem;
  transition: border-color 0.15s, background 0.15s;
}
.contact-item:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #ede8d9;
}

/* Footer */
.site-footer {
  border-top: 3px solid var(--border);
  padding: 24px 0;
  color: var(--muted);
  background: #faf8f2;
  text-align: center;
}

main {
  position: relative;
  z-index: 1;
}

/* 霧幕動畫樣式（漫畫描邊） */
.smoke {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 60vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  background: url('src/fog5.png') center center/120% 120% no-repeat;
  opacity: 1;
  filter: none;
  transition: transform 2.2s cubic-bezier(.73,.02,.32,1.02), opacity 2.2s cubic-bezier(.73,.02,.32,1.02);
  will-change: transform, opacity;
}
.smoke-left {
  left: 0;
}
.smoke-right {
  right: 0;
}

/* 動畫：左右煙霧往外移動並淡出 */
body.ready .smoke-left {
  transform: translateX(-80vw);
  opacity: 0;
}
body.ready .smoke-right {
  transform: translateX(80vw);
  opacity: 0;
}



/* 3. Tree Menu 彈出清單 */
.tree-menu-list {
  position: fixed;
  top: 68px;
  right: 22px;
  z-index: 130;
  background: #fffdfa;
  border: 2px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 16px #e3e3e3;
  min-width: 220px;
  max-width: 90vw;
  max-height: 60vh;
  overflow-y: auto;
  padding: 18px 18px 10px;
  display: none;
  transition: box-shadow 0.2s;
}
.tree-menu-list.open {
  display: block;
}
.tree-menu-list h4 {
  font-size: 15px;
  margin: 0 0 10px 0;
  color: var(--accent);
  font-weight: 700;
}
.tree-menu-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tree-menu-list li {
  padding: 7px 0 7px 0;
  font-size: 15px;
  color: var(--fg);
  cursor: pointer;
  border-bottom: 1px solid #ececec;
  transition: background 0.18s;
}
.tree-menu-list li:last-child {
  border-bottom: none;
}
.tree-menu-list li.active {
  color: var(--accent);
  font-weight: 700;
  background: #ede8d9;
}
.tree-menu-list li:hover {
  background: #f6f1e7;
}

/* 響應式，手機上重疊區域放大 */
@media (max-width: 700px) {
  .smoke {
    width: 80vw;
    background-size: 140% 140%;
  }
  .intro-content h1 {
    font-size: 28px;
  }
  .road-grid {
    grid-template-columns: 1fr;
  }
}