/* =========================================================
   Chaovisual Gallery — 地點導覽（建築對話）前台樣式

   1.10.0 起有兩種密度，同一份 HTML：
     ‧ 精簡（預設）：橫式卡片，只留圖、名稱、摘要兩行與兩個評分，
       其餘收進原生 <details>。15 個地點的頁長約剩三分之一。
     ‧ 完整：1.9.0 的直式卡片，全部欄位攤開。

   另外新增地點索引（可點的錨點清單）與黏性工具列（搜尋＋篩選＋計數）。
   ========================================================= */
.kg{--kg-accent:#c9a35b;--kg-ink:#f4f4f2;--kg-muted:#8a8a92;--kg-card:#141418;
  --kg-r-img:var(--r-img,4px);--kg-r-card:var(--r-card,6px);--kg-r-pill:var(--r-pill,100px);
  --kg-line:rgba(255,255,255,.10);--kg-ease:cubic-bezier(.22,.61,.36,1);
  --kg-sticky:96px;
  max-width:1180px;margin:0 auto;padding:16px;color:var(--kg-ink);
  font-family:"Helvetica Neue","PingFang TC","Noto Sans TC",system-ui,sans-serif}
.kg *{box-sizing:border-box}
.kg-head{margin:8px 4px 26px}
.kg-head h2{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:300;letter-spacing:.04em;margin:0 0 10px}
.kg-head h2 b{color:var(--kg-accent);font-weight:500;font-style:italic}
.kg-head p{color:var(--kg-muted);font-size:14px;line-height:1.7;margin:0;max-width:760px}

/* ---------------------------------------------------------
   地點索引
   伺服器端就輸出，沒有 JS 也能跳，也讓搜尋引擎看得到頁內結構。
   --------------------------------------------------------- */
.kg .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.kg-index{margin:0 4px 20px;padding:16px 18px 6px;border:1px solid var(--kg-line);border-radius:var(--kg-r-card);
  background:rgba(255,255,255,.02);scroll-margin-top:calc(var(--kg-sticky) + 16px)}
.kg-index:not([open]){padding-bottom:16px}
.kg-index-top{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding-bottom:12px;border-bottom:1px solid var(--kg-line)}
.kg-index-top::-webkit-details-marker{display:none}
.kg-index:not([open]) .kg-index-top{padding-bottom:0;border-bottom:0}
.kg-index-top:focus-visible{outline:1px solid var(--kg-accent);outline-offset:4px;border-radius:var(--kg-r-img)}
.kg-index-sum{margin-left:auto}
.kg-index-top .kg-caret{color:var(--kg-muted);flex:none}
.kg-index[open] .kg-caret{transform:rotate(-135deg) translate(-1px,-1px)}
.kg-index-body{padding-top:6px}
.kg-index-title{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--kg-accent)}
.kg-index-sum{font-size:11.5px;color:var(--kg-muted);letter-spacing:.04em;white-space:nowrap}
.kg-index-group{display:flex;gap:14px;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.07)}
.kg-index-group:last-child{border-bottom:0}
.kg-index-city{flex:none;width:64px;padding-top:5px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--kg-accent)}
.kg-index-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.kg-index-list li{display:flex}
.kg-jump{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;
  padding:5px 12px;border:1px solid var(--kg-line);border-radius:var(--kg-r-pill);
  font-size:13px;line-height:1.4;color:#d8d8d5;text-decoration:none;
  transition:color .25s var(--kg-ease),border-color .25s var(--kg-ease),background-color .25s var(--kg-ease)}
.kg-jump i{font-style:normal;font-size:11.5px;color:var(--kg-muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kg-jump:hover{color:#fff;border-color:rgba(201,163,91,.55);background:rgba(201,163,91,.08)}
.kg-jump.is-current{border-color:var(--kg-accent);color:#fff}
.kg-jump.is-current i{color:var(--kg-accent)}
.kg-jump.hide{display:none}
.kg-index-group.hide{display:none}
@media(max-width:640px){
  .kg-index{padding:14px 14px 4px}
  .kg-index-group{flex-direction:column;gap:6px}
  .kg-index-city{width:auto;padding-top:0}
}

/* ---------------------------------------------------------
   工具列：搜尋 ＋ 篩選 ＋ 計數（桌機黏在頁首下方）
   --------------------------------------------------------- */
.kg-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  margin:0 4px;padding:12px 0}
.kg.has-sticky .kg-tools{position:sticky;top:var(--kg-sticky);z-index:6;
  padding:12px 10px;margin:0 -6px;border-radius:var(--kg-r-card);
  background:rgba(14,14,17,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--kg-line);
  /* 保險：黏住的工具列最多只能吃掉半個螢幕，再多就自己捲。 */
  max-height:min(52vh,440px);overflow-y:auto;overscroll-behavior:contain}
.kg-search{position:relative;display:flex;align-items:center;flex:1 1 240px;min-width:200px;max-width:340px}
.kg-search-ico{position:absolute;left:12px;font-size:15px;color:var(--kg-muted);pointer-events:none;line-height:1}
.kg-q{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--kg-line);border-radius:var(--kg-r-pill);
  color:var(--kg-ink);font-family:inherit;font-size:13.5px;padding:9px 34px 9px 32px;
  transition:border-color .25s var(--kg-ease),background-color .25s var(--kg-ease)}
.kg-q::placeholder{color:var(--kg-muted)}
.kg-q:focus{outline:none;border-color:var(--kg-accent);background:rgba(255,255,255,.06)}
.kg-q::-webkit-search-cancel-button{display:none}
/* 圓點維持 22px 的視覺，但命中框補到 28×28（原本 22×22 低於 WCAG 2.2 的 24）。
   用透明 outline 的方式撐開會破壞圓形，這裡直接放大盒子並用 background-clip
   把可見的底色收回 22px。 */
.kg-qclear{position:absolute;right:5px;width:28px;height:28px;border:0;border-radius:50%;
  background:rgba(255,255,255,.10);background-clip:content-box;padding:3px;
  color:var(--kg-ink);font-size:14px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.kg-qclear:hover{background:var(--kg-accent);color:#111}
/* 作者樣式的 display 會蓋掉瀏覽器對 [hidden] 的預設，必須自己補回來 */
.kg-qclear[hidden],.kg-noresult[hidden]{display:none}
/* 篩選外層：可收合。展開時佔整行，收合時只剩一顆摘要按鈕。
   工具列在桌機是黏住的，五組維度攤開會擋掉太多內容，
   所以另外加一道高度上限當保險，超過就在工具列內部捲動，
   不會出現「按鈕列比卡片還高」這種事。 */
.kg-fwrap{flex:1 1 100%;min-width:0}
.kg-fsum{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-size:12px;letter-spacing:.14em;color:var(--kg-muted);
  border:1px solid var(--kg-line);border-radius:var(--kg-r-pill);padding:5px 13px;
  transition:.3s var(--kg-ease);margin-bottom:2px}
.kg-fsum::-webkit-details-marker{display:none}
.kg-fsum:hover{color:var(--kg-ink);border-color:rgba(255,255,255,.32)}
.kg-fsum:focus-visible{outline:1px solid var(--kg-accent);outline-offset:2px}
.kg-fsum-t::after{content:"▾";display:inline-block;margin-left:6px;font-size:10px;
  transition:transform .3s var(--kg-ease)}
.kg-fwrap[open] .kg-fsum-t::after{transform:rotate(180deg)}
/* 收合時仍看得出目前篩掉了什麼；沒篩就是低調的「全部」。 */
.kg-fsum-v{font-size:11.5px;letter-spacing:.04em;color:var(--kg-muted)}
.kg-fsum-v.on{color:var(--kg-accent)}
.kg-fwrap[open] .kg-fsum-v{display:none}
@media(prefers-reduced-motion:reduce){
  .kg-fsum,.kg-fsum-t::after{transition:none}
}

/* 維度從兩組長到五組，橫著排會擠成一團看不出哪顆屬於哪一組，
   所以改成一組一列、標籤靠左對齊，掃視時眼睛只要往下走。 */
.kg-filters{display:flex;flex-direction:column;gap:2px;padding-top:8px}

/* 1.12.0：每一組維度自己是一個 <details>。
   橫排時只要按鈕數量一多就會換行，換行後的按鈕跑到標籤正下方、
   看起來像是屬於上一組——標籤獨立成一行就沒有這個歧義了。
   同時這也是「側欄只有 260px」的前提條件：五組全部攤開太長。 */
.kg-fgroup{display:block;border-bottom:1px solid rgba(255,255,255,.06)}
.kg-fgroup:last-child{border-bottom:0}
/* 標籤改中性色：一排五個金色標籤只是裝飾，金色留給「目前選了哪顆」。 */
.kg-flabel{display:flex;align-items:center;justify-content:space-between;gap:10px;
  cursor:pointer;list-style:none;user-select:none;padding:8px 0;
  font-size:11px;letter-spacing:.2em;color:var(--kg-muted);
  transition:color .3s var(--kg-ease)}
.kg-flabel::-webkit-details-marker{display:none}
.kg-flabel:hover{color:var(--kg-ink)}
.kg-flabel:focus-visible{outline:1px solid var(--kg-accent);outline-offset:2px;border-radius:var(--kg-r-img)}
.kg-flabel-t{display:inline-flex;align-items:center;gap:7px}
.kg-flabel-t::after{content:"";width:5px;height:5px;display:inline-block;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-1px) rotate(45deg);transition:transform .3s var(--kg-ease)}
.kg-fgroup[open] .kg-flabel-t::after{transform:translateY(1px) rotate(-135deg)}
/* 收起來的那幾組，標題右邊要說出目前選了什麼，
   否則卡片明明變少了，讀者卻找不到是哪一組在作用。 */
.kg-fval{font-size:11.5px;letter-spacing:.04em;color:var(--kg-muted);text-align:right}
.kg-fval.on{color:var(--kg-accent)}
.kg-fgroup[open] .kg-fval{opacity:0}
.kg-fbtns{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 12px}
@media(prefers-reduced-motion:reduce){
  .kg-flabel,.kg-flabel-t::after{transition:none}
}
.kg-f{background:transparent;border:1px solid var(--kg-line);color:var(--kg-muted);
  padding:6px 14px;border-radius:var(--kg-r-pill);font-size:13px;cursor:pointer;transition:.3s var(--kg-ease);font-family:inherit}
.kg-f:hover{color:var(--kg-ink);border-color:rgba(255,255,255,.32)}
.kg-f.on{background:var(--kg-accent);color:#111;border-color:var(--kg-accent)}
/* 「全部」是預設值，五組維度同時亮金色只是噪音。
   金色留給「使用者真的縮小了範圍」，一眼就知道哪幾組動過。 */
.kg-f.on[data-v="all"]{background:rgba(255,255,255,.10);color:var(--kg-ink);
  border-color:rgba(255,255,255,.22)}
.kg-f:focus-visible{outline:1px solid var(--kg-accent);outline-offset:2px}
.kg-tools-end{display:flex;align-items:center;gap:12px;margin-left:auto}
.kg-count{color:var(--kg-muted);font-size:12px;letter-spacing:.04em;white-space:nowrap}
.kg-allbtn,.kg-backidx{background:transparent;border:1px solid var(--kg-line);color:var(--kg-muted);
  padding:6px 13px;border-radius:var(--kg-r-pill);font-size:12.5px;cursor:pointer;text-decoration:none;
  font-family:inherit;white-space:nowrap;transition:.3s var(--kg-ease)}
.kg-allbtn:hover,.kg-backidx:hover{color:var(--kg-ink);border-color:var(--kg-accent)}
.kg-noresult{color:var(--kg-muted);font-size:13.5px;line-height:1.8;text-align:center;
  margin:34px 4px;padding:26px 20px;border:1px dashed var(--kg-line);border-radius:var(--kg-r-card)}
@media(max-width:640px){
  .kg.has-sticky .kg-tools{position:static;backdrop-filter:none;background:transparent;padding:12px 0;margin:0}
  .kg-tools-end{margin-left:0;width:100%;justify-content:space-between}
  .kg-search{max-width:none}
}

/* ---------------------------------------------------------
   卡片格線
   --------------------------------------------------------- */
.kg-grid{display:grid;grid-template-columns:repeat(var(--kg-cols,3),1fr);gap:22px;margin-top:12px;align-items:start}
@media(max-width:900px){.kg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kg-grid{grid-template-columns:1fr}}
.kg-card{background:var(--kg-card);border:1px solid var(--kg-line);border-radius:var(--kg-r-card);overflow:hidden;
  display:flex;flex-direction:column;opacity:0;transform:translateY(20px);
  scroll-margin-top:calc(var(--kg-sticky) + 74px);
  transition:opacity .6s var(--kg-ease),transform .6s var(--kg-ease),border-color .3s}
.kg-card.in{opacity:1;transform:none}
.kg-card.hide{display:none}
.kg-card:hover{border-color:rgba(201,163,91,.4)}
.kg-card.is-target{border-color:var(--kg-accent)}
.kg-media{aspect-ratio:4/3;overflow:hidden;background:#0f0f12}
/* margin:0 是必要的，不是保險（1.16.3）。
   主題給內文圖片一組 `margin:24px 0`，那條會套到卡片的縮圖上。
   縮圖框是 overflow:hidden，所以上面多出 24px 空白、下面 24px 被裁掉——
   看起來就是「縮圖上方有一條空隙，而且照片位置偏低」。
   實測線上量到 圖距框頂 24px、距框底 −24px，框與圖同高卻整個往下位移。 */
.kg-media img{width:100%;height:100%;object-fit:cover;margin:0;
  filter:grayscale(.12) brightness(.92);transition:transform .8s var(--kg-ease),filter .5s}
.kg-card:hover .kg-media img{transform:scale(1.05);filter:none}
.kg-media.kg-noimg{display:flex;align-items:center;justify-content:center;color:var(--kg-muted);font-size:12px;letter-spacing:.1em}

/* 展開之後：照片移到上方、佔滿寬度，比例不合就裁（1.16.3）。
   ─────────────────────────────────────────────────────────
   1.16.2 這裡是 object-fit:contain（完整不裁切），改回 cover 是刻意的決定：
   contain 之下直幅照片會在左右留下兩條黑帶，卡片看起來像破了一個洞，
   而「展開」要的是一個有份量的主視覺，不是一張被留白包住的縮圖。

   固定 16/10 同時解掉一整串麻煩事：
     ‧ 框有確定的比例 → 圖片還在下載時就有正確高度，
       不會塌成 0（塌成 0 會 self-lock：框 0 高 → 永遠不進視窗 →
       lazy 永遠不觸發 → 那張照片再也不會被下載）。
     ‧ 不需要為「沒有 width/height 屬性的圖」另外寫 aspect-ratio 備援。
     ‧ 載入前後尺寸一致，不跳版。
     ‧ 跟手機那一段（同樣 16/10）對齊，兩個斷點行為一致。

   代價是直幅照片會被裁掉上下。這是站主要的取捨：佔滿優先於完整。 */
.kg-card.is-open .kg-media,
.kg-card:has(.kg-more[open]) .kg-media{aspect-ratio:16/10;height:auto}
.kg-card.is-open .kg-media img,
.kg-card:has(.kg-more[open]) .kg-media img{
  display:block;width:100%;max-width:none;height:100%;max-height:none;
  object-fit:cover;margin:0;transform:none}

/* 展開狀態下不要再有 hover 放大：圖已經是完整構圖，放大等於又裁掉。 */
.kg-card.is-open:hover .kg-media img,
.kg-card:has(.kg-more[open]):hover .kg-media img{transform:none}
.kg-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.kg-badges{display:flex;flex-wrap:wrap;gap:8px}
.kg-city{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#111;
  background:var(--kg-accent);border-radius:var(--kg-r-img);padding:4px 9px}
.kg-era{font-size:11px;letter-spacing:.08em;border-radius:var(--kg-r-img);padding:4px 9px;border:1px solid var(--kg-line);color:var(--kg-muted)}
.kg-era.modern{border-color:rgba(120,170,255,.5);color:#9fc0ff}
.kg-era.heritage{border-color:rgba(201,163,91,.5);color:var(--kg-accent)}
/* 類型徽章刻意用中性色：金色留給「可以按」與「目前狀態」，
   這一格只是說明，跟旁邊的年代徽章一起發亮反而看不出重點。 */
.kg-type{font-size:11px;letter-spacing:.08em;border-radius:var(--kg-r-img);padding:4px 9px;
  border:1px solid var(--kg-line);color:#b6b6bd;background:rgba(255,255,255,.03)}
.kg-name{margin:2px 0 0;font-size:18px;font-weight:400;line-height:1.3}
.kg-name span{display:block;color:var(--kg-muted);font-size:13px;margin-top:3px}
.kg-attrs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.kg-attrs li{font-size:12.5px;color:#c9c9cf;display:flex;gap:8px}
.kg-attrs li b{color:var(--kg-muted);font-weight:400;min-width:52px;letter-spacing:.06em}
.kg-sum{font-size:13.5px;line-height:1.75;color:#d8d8d5;margin:2px 0}
.kg-ratings{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--kg-line);padding-top:14px;margin-top:auto}
.kg-rate{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kg-rate .kg-rl{font-size:12px;color:var(--kg-muted);letter-spacing:.04em}
.kg-dots{display:inline-flex;gap:4px}
.kg-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.kg-dot.f{background:var(--kg-accent)}
.kg-tip{font-size:12.5px;line-height:1.7;color:#bdbdc4;background:rgba(201,163,91,.07);
  border-left:2px solid var(--kg-accent);padding:9px 12px;border-radius:0 var(--kg-r-card) var(--kg-r-card) 0;margin:0}
.kg-tip b{color:var(--kg-accent);font-weight:500;margin-right:6px}

/* 地圖／作品集／文章：同一排的次要按鈕 */
.kg-links{display:flex;flex-wrap:wrap;gap:8px}
.kg-link{display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--kg-muted);border:1px solid var(--kg-line);border-radius:var(--kg-r-pill);
  padding:6px 13px;text-decoration:none;transition:.3s var(--kg-ease)}
.kg-link:hover{color:var(--kg-ink);border-color:var(--kg-accent)}
.kg-link:focus-visible{outline:1px solid var(--kg-accent);outline-offset:3px}
.kg-link .kg-pin{color:var(--kg-accent);font-size:13px}
/* 作品集是這一區最想被按的動作，所以只有它拿到金色描邊。 */
.kg-works{color:var(--kg-accent);border-color:rgba(201,163,91,.45)}
.kg-works:hover{color:#111;background:var(--kg-accent);border-color:var(--kg-accent)}
.kg-empty{color:var(--kg-muted);text-align:center;padding:40px 0}

/* ---------------------------------------------------------
   精簡密度：橫式卡片

   欄數改用 auto-fill 而不是 --kg-cols：橫式卡片有一個最小可讀寬度，
   讓瀏覽器自己決定塞得下幾欄，比作者猜欄數穩。
   --------------------------------------------------------- */
.kg.is-compact .kg-grid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px}
@media(max-width:900px){.kg.is-compact .kg-grid{grid-template-columns:1fr}}
/* 收合時 3:7（1.16.2）。
   原本是固定 132px，在寬螢幕上那張縮圖小到看不出是什麼。
   改成比例之後，卡片愈寬圖也跟著大，而 3:7 讓文字欄仍然是主角。 */
.kg.is-compact .kg-card{flex-direction:row}
.kg.is-compact .kg-media{flex:0 0 30%;width:auto;aspect-ratio:auto;height:auto;align-self:stretch}

/* 展開時：整張卡片改成直式，圖移到上方並且完整顯示（1.16.2）。
   ─────────────────────────────────────────────────────────
   這一段同時收掉三個舊問題：

   一、側欄縮圖是 align-self:stretch，卡片一展開就變高，那一欄跟著長高、
       寬度不變，object-fit:cover 只好把圖再放大裁切。1.11.0 的修法是把圖
       釘回正方形，治標——圖還是被裁的。
   二、展開面板裡另外放一張完整的原圖（.kg-figure），等於同一張照片出現兩次，
       還把建築師與地圖推到更下面。
   三、展開後左邊那一條窄圖跟下面的資訊清單在視覺上沒有關係。

   改成「展開＝卡片翻成直式」之後：圖自己就在上方、佔滿寬度，
   而且用原始比例顯示（height:auto，不設 aspect-ratio），完全不裁切。
   .kg-figure 因此不再需要，已從 PHP 移除。 */
.kg.is-compact .kg-card.is-open,
.kg.is-compact .kg-card:has(.kg-more[open]){flex-direction:column}
.kg.is-compact .kg-card.is-open .kg-media,
.kg.is-compact .kg-card:has(.kg-more[open]) .kg-media{
  flex:none;width:100%;align-self:auto}
.kg.is-compact .kg-body{padding:14px 16px 15px;gap:8px;min-width:0}
.kg.is-compact .kg-badges{gap:6px}
.kg.is-compact .kg-city,.kg.is-compact .kg-era{font-size:10px;padding:3px 7px}
.kg.is-compact .kg-name{font-size:15.5px;margin:0}
.kg.is-compact .kg-name span{font-size:12px;margin-top:2px}
.kg.is-compact .kg-sum{font-size:12.5px;line-height:1.65;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kg.is-compact .kg-card.is-open .kg-sum,
.kg.is-compact .kg-card:has(.kg-more[open]) .kg-sum{-webkit-line-clamp:unset;overflow:visible}
.kg.is-compact .kg-ratings{flex-direction:row;flex-wrap:wrap;gap:6px 18px;
  border-top:0;padding-top:0;margin-top:2px}
.kg.is-compact .kg-rate{justify-content:flex-start;gap:7px}
.kg.is-compact .kg-rate .kg-rl{font-size:11px}
.kg.is-compact .kg-dot{width:7px;height:7px}
@media(max-width:480px){
  .kg.is-compact .kg-body{padding:12px 13px 13px}
}

/* 手機改成圖片在上（1.16.1）。
   ─────────────────────────────────────────────────────────
   橫式卡片在桌機沒問題：卡片矮，左邊那個正方形縮圖看起來齊整。
   但手機上文字會折很多行，卡片因此變高，而縮圖那一欄是 align-self:stretch
   ——它跟著長高，寬度卻還是 98px，於是變成一條又窄又高的直條。
   object-fit:cover 再把橫幅照片塞進那個比例，兩側就被裁掉一大半。

   實測 375px 寬的手機：顯示框 98×250（比例 0.39），而照片是 1.6 的橫幅，
   **只看得到原圖的 24%**。那已經不是縮圖，是隨機裁下來的一小條。

   所以手機不縮小圖片，而是把它移到卡片上方、佔滿整個寬度。
   同一張照片從看得到 24% 變成看得到 100%（16/10 的框對上 1.6 的橫幅剛好）。 */
@media(max-width:640px){
  .kg.is-compact .kg-card{flex-direction:column}
  .kg.is-compact .kg-media{width:100%;aspect-ratio:16/10;align-self:auto}
}

/* 收合區：原生 <details>，沒有 JS 也能開 */
.kg-more{margin-top:2px;border-top:1px solid var(--kg-line);padding-top:9px}
.kg-more-sum{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:11.5px;letter-spacing:.1em;color:var(--kg-muted);transition:color .25s var(--kg-ease)}
.kg-more-sum::-webkit-details-marker{display:none}
.kg-more-sum:hover{color:var(--kg-accent)}
.kg-more-sum:focus-visible{outline:1px solid var(--kg-accent);outline-offset:3px;border-radius:var(--kg-r-img)}
.kg-caret{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .25s var(--kg-ease)}
.kg-more[open] .kg-caret{transform:rotate(-135deg) translate(-1px,-1px)}
.kg-more .kg-more-close{display:none}
.kg-more[open] .kg-more-open{display:none}
.kg-more[open] .kg-more-close{display:inline}
.kg-more-in{display:flex;flex-direction:column;gap:10px;padding:11px 0 3px;
  animation:kg-reveal .28s var(--kg-ease) both}
.kg.is-compact .kg-more-in .kg-attrs li{font-size:12px}
.kg.is-compact .kg-more-in .kg-tip{font-size:12px;padding:8px 11px}
.kg.is-compact .kg-more-in .kg-link{font-size:12px;padding:5px 11px}
@keyframes kg-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* 離線導覽包 CTA（付費層；填了下載連結才顯示） */
.kg-pack{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin:0 4px 24px;padding:18px 22px;border:1px solid rgba(201,163,91,.4);border-radius:var(--kg-r-card);
  background:linear-gradient(180deg,rgba(201,163,91,.10),rgba(201,163,91,.02))}
.kg-pack-text{min-width:0}
.kg-pack-eyebrow{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--kg-accent);margin-bottom:6px}
.kg-pack-note{margin:0;color:var(--kg-ink);font-size:13.5px;line-height:1.65;opacity:.9}
.kg-pack-btn{flex:none;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:var(--kg-accent);color:#111;border-radius:var(--kg-r-pill);padding:11px 22px;
  font-size:14px;font-weight:500;letter-spacing:.02em;text-decoration:none;
  transition:transform .25s var(--kg-ease),filter .25s var(--kg-ease)}
.kg-pack-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.kg-pack-price{font-size:13px;padding-left:10px;border-left:1px solid rgba(0,0,0,.25)}
@media(max-width:640px){.kg-pack{flex-direction:column;align-items:flex-start}.kg-pack-btn{width:100%;justify-content:center}}

@media(prefers-reduced-motion:reduce){
  .kg-card{transition:none;opacity:1;transform:none}
  .kg-more-in{animation:none}
  .kg-card:hover .kg-media img{transform:none}
}

/* =========================================================
   1.12.0　控制面板（搜尋＋篩選＋索引）搬進佈景主題側欄

   面板在伺服器端是輸出在內文裡的，寬螢幕才由 JS 整組移進右欄。
   移動之後 .kg 不再是它的祖先，所以設計變數、box-sizing、
   螢幕閱讀器專用文字這三樣要在 .kg-panel 上再宣告一次——
   少了這一步，搬過去的面板會失去顏色與間距，變成一堆裸元素。
   面板還在 .kg 裡的時候這些值完全相同，重複宣告沒有副作用。
   ========================================================= */
.kg-panel{--kg-accent:#c9a35b;--kg-ink:#f4f4f2;--kg-muted:#8a8a92;--kg-card:#141418;
  --kg-r-img:var(--r-img,4px);--kg-r-card:var(--r-card,6px);--kg-r-pill:var(--r-pill,100px);
  --kg-line:rgba(255,255,255,.10);--kg-ease:cubic-bezier(.22,.61,.36,1);
  --kg-sticky:96px;color:var(--kg-ink);
  font-family:"Helvetica Neue","PingFang TC","Noto Sans TC",system-ui,sans-serif}
.kg-panel *{box-sizing:border-box}
.kg-panel .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* 掛載點空著的時候完全不佔位置。
   外掛只有在這一篇真的有導覽區塊時才輸出它，但視窗窄到單欄時面板會回到
   內文，掛載點就空了——沒有這一行，側欄會多出一段沒有內容的間距。 */
.kg-mount:empty{display:none}

/* ---- 側欄裡的面板：只有 260px，全部改成單欄直排 ---- */
.kg-panel.is-side{margin:0}
.kg-panel.is-side .kg-tools{display:block;margin:0;padding:0;
  /* 側欄本身已經是 sticky 且會自己捲，這裡再黏一次只會互相打架。
     .kg.has-sticky .kg-tools 在搬走之後本來就不再匹配，這行是保險。 */
  position:static;max-height:none;overflow:visible;background:none;
  backdrop-filter:none;border:0;border-radius:0}
.kg-panel.is-side .kg-search{max-width:none;min-width:0;flex:1 1 auto;margin-bottom:14px}
.kg-panel.is-side .kg-fwrap{margin-bottom:4px}
.kg-panel.is-side .kg-f{padding:5px 11px;font-size:12.5px}
.kg-panel.is-side .kg-tools-end{margin:12px 0 0;flex-wrap:wrap;gap:8px}
.kg-panel.is-side .kg-count{width:100%;font-size:11.5px}
/* 索引就在正下方，回跳連結沒有意義 */
.kg-panel.is-side .kg-backidx{display:none}
.kg-panel.is-side .kg-index{margin:18px 0 0;padding:14px 14px 4px}
.kg-panel.is-side .kg-index-sum{font-size:10.5px}
.kg-panel.is-side .kg-index-group{flex-direction:column;gap:6px}
.kg-panel.is-side .kg-index-city{width:auto;padding-top:0}
/* 索引在 260px 的欄位裡：膠囊改成整列，名稱與副名各佔一行。
   膠囊在窄欄位會每顆都換行，反而比整列更高也更難掃。 */
.kg-panel.is-side .kg-index-list{display:block}
.kg-panel.is-side .kg-index-list li{display:block}
.kg-panel.is-side .kg-jump{display:flex;width:100%;flex-wrap:wrap;gap:2px 8px;
  border:0;border-bottom:1px solid rgba(255,255,255,.06);border-radius:0;
  padding:7px 2px;font-size:12.5px}
.kg-panel.is-side .kg-jump:hover{background:transparent}
.kg-panel.is-side .kg-jump i{font-size:11px}
.kg-panel.is-side .kg-index-group:last-child .kg-jump:last-child{border-bottom:0}

/* ---------------------------------------------------------
   作品集入口（1.13.0）

   整份導覽層級的入口，指向這一整套建築攝影的作品集。
   排在導言之後、工具列之前——讀者剛看完「這是什麼」，
   最可能想的就是「那照片呢」；排在最下面會被十五張地點卡整個蓋過去。

   金色只用在箭頭與 hover，跟站上「金色＝互動或狀態」的用色政策一致；
   靜止時是一塊安靜的橫幅，不跟照片搶注意力。
   --------------------------------------------------------- */
.kg-folio{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:0 4px 20px;padding:16px 20px;border:1px solid var(--kg-line);border-radius:var(--kg-r-card);
  background:rgba(255,255,255,.02);text-decoration:none;color:var(--kg-ink);
  transition:border-color .3s var(--kg-ease),background-color .3s var(--kg-ease)}
.kg-folio:hover,.kg-folio:focus-visible{border-color:var(--kg-accent);background:rgba(201,163,91,.06)}
.kg-folio:focus-visible{outline:1px solid var(--kg-accent);outline-offset:3px}
.kg-folio-t{font-size:14px;letter-spacing:.06em}
.kg-folio-n{font-size:12.5px;color:var(--kg-muted);min-width:0}
.kg-folio-a{margin-left:auto;color:var(--kg-accent);font-size:15px;
  transition:transform .3s var(--kg-ease)}
.kg-folio:hover .kg-folio-a{transform:translateX(4px)}
@media(max-width:640px){
  .kg-folio{gap:6px}
  .kg-folio-a{margin-left:0}
}

/* 影片與相關網站（1.13.0）：沿用既有的 .kg-link 膠囊，只補一個播放記號。 */
.kg-play{color:var(--kg-accent);font-size:11px}

@media(prefers-reduced-motion:reduce){
  .kg-folio,.kg-folio-a{transition:none}
}

/* 面板（手機）裡的控制面板：寬度是整個螢幕，不是 260px 的側欄，
   所以側欄那一套壓縮排版要放開，按鈕與索引恢復正常尺寸。 */
@media(max-width:760px){
  .cv-side .kg-panel.is-side .kg-f{padding:6px 14px;font-size:13px}
  .cv-side .kg-panel.is-side .kg-search{margin-bottom:16px}
  .cv-side .kg-panel.is-side .kg-index{margin-top:20px}
  .cv-side .kg-panel.is-side .kg-index-list{display:flex;flex-wrap:wrap;gap:6px}
  .cv-side .kg-panel.is-side .kg-jump{display:inline-flex;width:auto;
    border:1px solid var(--kg-line);border-radius:var(--kg-r-pill);padding:7px 13px}
  .cv-side .kg-panel.is-side .kg-index-group{flex-direction:column;gap:8px}
}

/* =========================================================
   詳細的彈出視窗（1.17.0）

   內嵌展開換成視窗，理由是內容的份量變了：現在是「大圖 ＋ 屬性 ＋ 建議 ＋
   地圖」，那要專心看，不是順手瞄一眼。內嵌展開會讓卡片從 3:7 橫式翻成
   滿寬直式、高度變三倍，一整排清單的節奏被打斷——那就是「開合造成的混亂」。

   用原生 <dialog>：焦點鎖、Esc、top-layer 都是瀏覽器給的。
   ::backdrop 也是原生的，不必自己疊一層 div。
   ========================================================= */
.kg-modal{border:0;padding:0;background:transparent;max-width:none;max-height:none;
  width:100%;height:100%;overflow:visible;color:var(--kg-ink,#f4f4f2)}
.kg-modal::backdrop{background:rgba(6,6,10,.82);backdrop-filter:blur(6px)}
/* 視窗打開時鎖住背景捲動。dialog 本身不會做這件事。 */
html.kg-modal-on{overflow:hidden}

.kg-modal-box{position:absolute;inset:0;margin:auto;
  width:min(920px,calc(100vw - 32px));max-height:min(88dvh,900px);
  /* 高度跟著內容（1.17.3）。position:absolute 同時給了 top:0 與 bottom:0，
     height:auto 會被解成「撐滿」——短內容的地點於是在下半部留一大塊空框。
     fit-content 讓框縮到內容大小，margin:auto 照樣把它置中。 */
  height:fit-content;
  display:flex;flex-direction:column;
  background:#141418;border:1px solid rgba(255,255,255,.12);
  border-radius:var(--kg-r-card,6px);overflow:hidden;
  font-family:"Helvetica Neue","PingFang TC","Noto Sans TC",system-ui,sans-serif;
  animation:kg-modal-in .28s cubic-bezier(.22,.61,.36,1) both}
@keyframes kg-modal-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

.kg-modal-x{position:absolute;top:10px;right:12px;z-index:3;
  width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(10,10,14,.6);color:#f4f4f2;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;font-family:inherit;
  transition:background .25s}
.kg-modal-x:hover{background:var(--kg-accent,#c9a35b);color:#111}
.kg-modal-x:focus-visible{outline:2px solid var(--kg-accent,#c9a35b);outline-offset:2px}

/* 內容區自己捲，頁尾的上一個／下一個固定在下方，長篇也不會找不到。 */
.kg-modal-in{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.kg-modal-media{aspect-ratio:16/10;overflow:hidden;background:#0f0f12}
.kg-modal-media img{display:block;width:100%;height:100%;object-fit:cover;margin:0;filter:none}
.kg-modal-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:12px}
.kg-modal-body .kg-name{font-size:20px}
.kg-modal-body .kg-sum{font-size:14px;line-height:1.8;-webkit-line-clamp:unset;overflow:visible;display:block}
.kg-modal-body .kg-more-in{padding:0;animation:none}

.kg-modal-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-top:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02)}
.kg-modal-foot button{background:transparent;border:1px solid rgba(255,255,255,.14);
  color:#d8d8d5;font-family:inherit;font-size:12.5px;letter-spacing:.04em;
  padding:7px 14px;border-radius:var(--kg-r-pill,100px);cursor:pointer;
  transition:color .25s,border-color .25s,background-color .25s}
.kg-modal-foot button:hover:not(:disabled){color:#fff;border-color:rgba(201,163,91,.55);
  background:rgba(201,163,91,.08)}
.kg-modal-foot button:disabled{opacity:.35;cursor:default}
.kg-modal-foot button:focus-visible{outline:2px solid var(--kg-accent,#c9a35b);outline-offset:2px}
.kg-modal-count{font-size:11.5px;letter-spacing:.1em;color:var(--kg-muted,#8a8a92)}

@media(max-width:640px){
  .kg-modal-box{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:0}
  .kg-modal-body{padding:16px 16px 20px}
}
@media(prefers-reduced-motion:reduce){
  .kg-modal-box{animation:none}
  .kg-modal-x,.kg-modal-foot button{transition:none}
}

/* 視窗開著時把原生游標還回來（1.17.1）。
   ─────────────────────────────────────────────────────────
   主題把全站的游標換成自訂的圓點＋圓環，做法是 `cursor:none` 加上兩個
   固定定位的元素。那套在一般頁面上沒問題，但**碰到 <dialog> 就必然失效**：
   showModal() 會把視窗提到 top layer，而 top layer 在所有一般堆疊內容之上——
   z-index 再高的元素也上不去。於是圓點被壓在視窗底下，而原生游標又被
   cursor:none 藏著，使用者在視窗上看不到任何指標，等於不知道自己指著哪裡。

   這不是可以靠調 z-index 解決的，是 top layer 的定義。所以反過來做：
   視窗開著的時候把原生游標還給使用者，並把用不到的自訂圓點收起來
   （它在模糊的遮罩後面只會變成一個看起來壞掉的殘影）。

   !important 是必要的：要蓋過主題那組 `html.cv-cursor body,…{cursor:none}`，
   而那組本身的權重就不低。 */
/* 1.17.2 更新：改成把自訂游標搬進視窗，而不是還原原生游標。
   ─────────────────────────────────────────────────────────
   1.17.1 的做法（視窗開著時 cursor:auto、圓點藏起來）能用，但游標長相會變，
   進出視窗等於換了一套指標。腳本改成把 .cursor-dot／.cursor-ring 移進
   <dialog> 裡——它們跟著進 top layer，就畫得到視窗上面了，外觀完全一致。

   所以這裡要做的相反：確保視窗裡仍然是 cursor:none（不然會同時看到
   原生箭頭與自訂圓點），並把搬進來的那兩個元素墊到最上層。

   只有在自訂游標真的存在時才成立。使用者若在自訂器裡把游標關成「一般」，
   .cursor-dot 根本不存在，borrowCursor() 會直接跳過，
   而下面這條 cursor:none 也就不該生效——所以用 html.cv-cursor 限定。 */
html.cv-cursor.kg-modal-on .kg-modal,
html.cv-cursor.kg-modal-on .kg-modal *{cursor:none!important}
.kg-modal > .cursor-dot,
.kg-modal > .cursor-ring{z-index:2147483647}
/* 沒有自訂游標的站台（或使用者關掉了）維持原生游標，按鈕仍要有手指。 */
html:not(.cv-cursor).kg-modal-on .kg-modal a,
html:not(.cv-cursor).kg-modal-on .kg-modal button{cursor:pointer}

/* 整張卡片可以點（1.17.2）：游標要說得出這件事。
   卡片裡真正的連結維持自己的指標，不被這條蓋掉。 */
.kg.is-compact .kg-card{cursor:pointer}
html.cv-cursor .kg.is-compact .kg-card{cursor:none}