:root{
    --bg:#dedede;
    --surface:#ffffff;
    --surface-2:#ededed;
    --ink:#222222;
    --text-secondary:#666666;
    --text-tertiary:#8f8f8f;
    --border:rgba(34,34,34,0.14);
    --accent:#ff2f00;
    --accent-ink:#ffffff;
    --dock-border:rgba(255,255,255,0.12);
    --dock-text:#b8b8b8;
    --dock-text-strong:#ffffff;
  }
  /* 跟 index.html 同一套色票，取自 Figma pc_dark frame 實測色值。 */
  html[data-theme="dark"]{
    --bg:#1f1c1c;
    --surface:#262626;
    --surface-2:#353535;
    --ink:#ffffff;
    --text-secondary:#b0b0b0;
    --text-tertiary:#8a8a8a;
    --border:rgba(255,255,255,0.14);
    --dock-bg:rgba(255,255,255,0.8);
    --dock-text:#6b6b6b;
    --dock-text-strong:#111111;
  }
  html{transition:background-color .7s ease;}
  body{transition:background-color .7s ease,color .7s ease;}
  *,*::before,*::after{
    transition:background-color .7s ease,color .7s ease,border-color .7s ease,box-shadow .7s ease,fill .7s ease,stroke .7s ease;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    padding-top:51px; /* 補回 fixed topnav 的高度，避免內容一開始就被蓋住 */
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter Tight',sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  /* 選取反白：品牌橘底白字（與首頁一致） */
  ::selection{background:var(--accent);color:#fff;}
  ::-moz-selection{background:var(--accent);color:#fff;}
  /* 學名一律斜體；命名者維持正體 */
  .sci{font-style:italic;}
  .sci .author{font-style:normal;}
  a{color:inherit;}

  /* ---------- topnav（跟主頁共用同一套：固定在頂部、半透明毛玻璃）---------- */
  /* 放棄漸層淡出的嘗試，改回跟 dock-wrap 同樣的作法：實色底＋blur，邊界清楚不曖昧，跟 index.html 保持一致。 */
  .topnav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:55;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 52px;
    background:rgba(222,222,222,0.85);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  html[data-theme="dark"] .topnav{
    background:rgba(31,28,28,0.85);
  }
  .topnav-list{display:flex;align-items:center;gap:23px;list-style:none;margin:0;padding:0;}
  .topnav-list a{
    font-family:'Inter Tight',sans-serif;
    font-size:14px;
    letter-spacing:0.02em;
    color:var(--ink);
    text-decoration:none;
  }
  .topnav-list a:hover{color:var(--accent);}
  .topnav-list a.current{color:var(--accent);}
  /* Collections 目前還沒有內容，先用刪除線標示「未開放」，不能點擊。 */
  .nav-disabled{
    text-decoration:line-through;
    color:var(--text-tertiary);
    cursor:not-allowed;
    pointer-events:none;
    user-select:none;
  }
  .collections-nav{display:inline-flex;align-items:center;gap:6px;}
  .collections-label{font-family:'Inter Tight',sans-serif;font-size:14px;letter-spacing:0.02em;color:var(--ink);white-space:nowrap;}
  .collection-links{display:inline-flex;align-items:center;gap:1px;}
  .collection-links .col-link{font-size:20px;line-height:1;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:8px;margin:-8px 0;border-radius:8px;transition:transform .15s ease, filter .15s ease, opacity .15s ease;}
  .collection-links .col-snake{position:relative;top:-2px;}
  .collection-links .col-turtle{font-size:21px;position:relative;top:-3px;}
  .collection-links .col-frog{font-size:19px;}
  .collection-links .col-link:hover{transform:scale(1.12);}
  .collection-links .col-link.is-soon{filter:grayscale(0.15);opacity:.2;cursor:help;}
  .collection-links .col-link.is-soon:hover{transform:none;opacity:.4;}
  .col-div{color:var(--text-tertiary);opacity:.4;font-size:12px;user-select:none;margin:0 -1px;}
  .theme-toggle{
    display:flex;align-items:center;justify-content:center;
    width:19px;height:19px;color:var(--ink);background:none;border:none;cursor:pointer;padding:0;
  }
  .theme-toggle .icon-sun{display:none;}
  .theme-toggle .icon-moon{display:block;}
  html[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
  html[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

  /* ---------- about hero（照 pc_about／sp_about 稿：eyebrow + 兩行大標）---------- */

  /* ---------- about content row（左：說明文字／右：資料來源 pill，照稿是兩欄有上框線＋分隔線）---------- */

  /* ---------- footer（跟主頁共用同一套樣式）---------- */
  footer{
    padding:60px 52px 140px;
    background:var(--bg);
    color:var(--text-tertiary);
    font-size:12.5px;
    line-height:1.8;
  }
  .footer-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-links{display:flex;align-items:center;gap:20px;}
  .footer-links a{
    font-family:'Inter Tight',sans-serif;font-size:14px;color:var(--ink);text-decoration:none;
  }
  .footer-links a:hover{color:var(--accent);}
  .footer-links a.current{color:var(--accent);}
  .footer-links .nav-disabled{font-family:'Inter Tight',sans-serif;font-size:14px;}
  .footer-connect{
    display:flex;align-items:center;gap:24px;
    font-family:'Inter Tight',sans-serif;font-size:14px;color:var(--ink);
  }
  .footer-connect span:last-child{font-size:12px;letter-spacing:0.02em;}

  /* ---------- dock（跟主頁同款深色膠囊；這裡沒有物種資料可篩，
     所以搜尋／排序／篩選／清除都直接導回主頁的對應功能）---------- */
  .dock-wrap{
    position:fixed;
    left:0; right:0; bottom:18px;
    display:flex;
    justify-content:center;
    z-index:50;
    padding:0 16px;
    pointer-events:none;
  }
  .dock{
    pointer-events:auto;
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(34,34,34,0.8);
    backdrop-filter:blur(8px);
    border:1px solid var(--dock-border);
    border-radius:999px;
    padding:7px;
    box-shadow:0 12px 40px rgba(0,0,0,0.35);
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .dock::-webkit-scrollbar{display:none;}
  html[data-theme="dark"] .dock{background:var(--dock-bg);}
  html[data-theme="dark"] .dock-item:hover{background:rgba(0,0,0,0.06);}
  .dock-item{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:7.65px;
    height:40px;
    padding:0 15px;
    border-radius:20px;
    border:1px solid transparent;
    background:transparent;
    color:var(--dock-text);
    font-family:'Inter Tight',sans-serif;
    font-size:12.4px;
    cursor:pointer;
    transition:all .15s ease;
    white-space:nowrap;
    user-select:none;
    text-decoration:none;
  }
  .dock-item:hover{background:rgba(255,255,255,0.08);color:var(--dock-text-strong);}
  .dock-divider{width:1px;height:22px;background:var(--dock-border);flex-shrink:0;}
  .dock-search{
    display:flex;align-items:center;gap:8px;
    height:40px;padding:0 17px 0 15px;border-radius:999px;
    background:#222;border:1px solid transparent;
    transition:all .15s ease;
  }
  .dock-search:focus-within{border-color:var(--dock-border);}
  .dock-search svg{opacity:.55;flex-shrink:0;color:var(--dock-text);}
  .dock-search input{
    border:none;outline:none;background:transparent;
    width:150px;font-size:13px;font-family:'Inter',sans-serif;color:#ffffff;
  }
  .dock-search input::placeholder{color:#787878;}
  .dock-icon-btn{
    flex-shrink:0;
    width:40px;height:40px;
    border-radius:999px;
    border:none;
    background:rgba(255,255,255,0.2);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    text-decoration:none;
  }
  .dock-icon-btn:hover{background:rgba(255,255,255,0.28);}
  html[data-theme="dark"] .dock-icon-btn{background:rgba(0,0,0,0.1);color:#111111;}
  html[data-theme="dark"] .dock-icon-btn:hover{background:rgba(0,0,0,0.16);}
  .clear-btn.dock-item{color:#fff;border:0.5px solid #fff;background:transparent;}
  .clear-btn.dock-item:hover{background:#c94a1e;border-color:#c94a1e;color:#fff;}
  html[data-theme="dark"] .clear-btn.dock-item{color:#111111;border-color:#111111;}
  html[data-theme="dark"] .clear-btn.dock-item:hover{color:#ffffff;}

  @media (max-width:640px){
    .topnav,.about-hero,.about-content,footer{padding-left:16px;padding-right:16px;}
    footer{padding-top:40px;padding-bottom:110px;}
    .dock-search input{width:110px;}
  }


/* ===================== 全站統一規則 ===================== */
:root{--tag-bg:rgba(255,255,255,0.6);}
html[data-theme="dark"]{--tag-bg:rgba(0,0,0,0.6);}

/* 選取反白：品牌橘底白字（與首頁一致） */
::selection{background:var(--accent);color:#fff;}
::-moz-selection{background:var(--accent);color:#fff;}

/* 學名一律斜體；命名者（author）維持正體 */
.sci,.sp-sci{font-style:italic;}
.sci .author,.sp-sci .author{font-style:normal;}

/* ===================== 下層頁面共同版面 ===================== */
.topnav{padding-left:52px;padding-right:52px;}
footer{padding:60px 52px 24px;background:var(--bg);color:var(--text-tertiary);font-size:12.5px;line-height:1.8;}
.footer-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-bottom:32px;}
@media (min-width:1270px){.footer-row{padding-bottom:10px;}}
.footer-links{display:flex;align-items:center;gap:20px;}
.footer-links a{font-family:'Inter Tight',sans-serif;font-size:14px;color:var(--ink);text-decoration:none;}
.footer-links a:hover{color:var(--accent);}
.footer-connect{display:flex;align-items:center;gap:24px;font-family:'Inter Tight',sans-serif;font-size:14px;color:var(--ink);}
.footer-connect span:last-child{font-size:12px;letter-spacing:0.02em;}
.dock .dock-icon-btn{font-family:'Inter Tight',sans-serif;font-size:17px;font-weight:400;line-height:1;}

.sp-head{padding:150px 52px 0;}
.sp-eyebrow{font-family:'Noto Sans TC',sans-serif;font-size:12px;letter-spacing:.02em;
  color:var(--text-secondary);display:inline-block;border-bottom:2px solid var(--accent);
  padding-bottom:4px;margin-bottom:16px;}
.sp-section{padding:44px 52px 0;}

/* ---- contents_02：地圖 ---- */
.sp-c2{display:flex;gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-top:0;}
.sp-c2-label{flex:0 0 136px;padding:24px 12px 40px 0;
  font-family:'Noto Sans TC',sans-serif;font-weight:700;font-size:10.5px;color:var(--ink);}
.sp-map-area{flex:1;min-width:0;border-left:1px solid var(--ink);height:800px;
  display:flex;flex-direction:column;padding:0 0 8px;}
.map-wrap{flex:1;min-height:0;position:relative;width:100%;overflow:hidden;
  border-bottom:1px solid var(--ink);}
.tw-map{display:block;width:100%;height:100%;overflow:hidden;cursor:grab;touch-action:pan-y;}
.tw-map.grabbing{cursor:grabbing;}
.tw-map path{stroke:var(--map-ink,rgba(34,34,34,.5));fill:none;stroke-width:1;vector-effect:non-scaling-stroke;}
html[data-theme="dark"] .tw-map path{stroke:rgba(255,255,255,.42);}
.obs-dot{fill:var(--accent);stroke:var(--bg);stroke-width:1.2;opacity:.72;cursor:pointer;
  vector-effect:non-scaling-stroke;transition:opacity .15s ease;}
.obs-dot:hover,.obs-dot.is-active{opacity:1;}
@media (prefers-reduced-motion:no-preference){
  .obs-dot.pulse{animation:dotIn .5s ease both;}
  @keyframes dotIn{from{opacity:0;}to{opacity:.72;}}
}
/* 地標 pin（權重需高過 .tw-map path 的 fill:none） */
.map-pin{pointer-events:none;}
.tw-map .pin-shape{fill:var(--ink);stroke:none;}
.tw-map .pin-hole{fill:var(--bg);stroke:none;}
.pin-label{font-family:'Noto Sans TC',sans-serif;font-weight:500;fill:var(--ink);}
.pin-underline{fill:var(--accent);}

.map-status{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
  font-family:'Noto Sans TC',sans-serif;font-size:12px;color:var(--text-secondary);
  background:var(--surface);padding:6px 12px;border-radius:999px;box-shadow:0 2px 10px rgba(128,128,128,.18);
  pointer-events:none;}
.map-status[hidden]{display:none;}
.map-tooltip{position:fixed;z-index:60;pointer-events:none;max-width:230px;
  background:var(--ink);color:var(--bg);font-family:'Noto Sans TC',sans-serif;font-size:12px;
  line-height:1.5;padding:8px 11px;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.28);
  transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity .12s ease;}
html[data-theme="dark"] .map-tooltip{background:#000;color:#fff;}
.map-tooltip.show{opacity:1;}
.map-tooltip .tt-place{font-weight:600;}
.map-tooltip .tt-meta{opacity:.7;font-family:'Inter Tight',sans-serif;font-size:11px;margin-top:2px;}
.map-caption{font-family:'Noto Sans TC',sans-serif;font-size:12px;color:var(--text-tertiary);
  margin:18px 0 0;padding-left:24px;}
.map-caption a{color:var(--accent);text-decoration:none;}
.map-caption a:hover{text-decoration:underline;}

@media (max-width:760px){
  .sp-c2{flex-direction:column;}
  .sp-c2-label{display:none;}
  .sp-map-area{border-left:none;padding:0;height:auto;display:block;}
  .map-wrap{display:block;}
  .tw-map{width:100%;height:auto;}
  .map-caption{padding-left:0;}
}
@media (max-width:640px){
  .topnav,.sp-head,.sp-section,footer{padding-left:16px;padding-right:16px;}
  .sp-head{padding-top:96px;}
  footer{padding-top:70px;padding-bottom:110px;}
}