/* =========================================================
   Chaovisual Gallery 2.0 · 識別系統層（chaovisual-gallery-2.css）
   跟著主題 2.0 走：紙色／暮色雙主題、製圖桌語言、圖說列、直角、一個色相（路條橙）。
   只在任一區塊的樣式被載入時才跟著載入，排在所有區塊樣式之後（見 chaovisual-gallery.php）。
   規則：
     1. 顏色全部改讀主題的 tokens（--ink、--ink-2、--ink-3、--line、--ribbon…）；主題沒載入時有後備值，
        後備值就是紙色主題。
     2. 路條橙只做記號（刻度、焦點框、目前狀態、hover 底線），不做小字底下的填色。
        原本金色底黑字的按鈕（篩選、地圖、購買）改成墨色底紙色字。
     3. 說明文字一律走圖說列的語言：IBM Plex Mono 12px、字距 .06em、--ink-3。
     4. 圓角 0（照片、卡片、按鈕）；只有標籤 2px。
   ========================================================= */

/* ---------- 共用 token（主題不在時的後備） ---------- */
.cvf,.kg,.kg-panel,.kg-modal-box,.cg,.cchap,.cv-toc,.cv-video,.cw-info{
  --g-ground:var(--ground-000,#f4f1ea);--g-ground-1:var(--ground-100,#ebe7de);--g-ground-2:var(--ground-200,#d9d4c8);
  --g-ink:var(--ink,#1b1b1a);--g-ink-2:var(--ink-2,#4a4946);--g-ink-3:var(--ink-3,#68655d);
  --g-line:var(--line,#d6d1c5);--g-line-strong:var(--line-strong,#85817a);
  --g-ribbon:var(--ribbon,#d9522b);--g-ribbon-ink:var(--ribbon-ink,#b3401d);--g-on-ink:var(--on-ink,#f4f1ea);
  --g-mono:var(--font-mono,"IBM Plex Mono","SFMono-Regular",Menlo,monospace);
  --g-sans:var(--font-sans,"Archivo","Noto Sans TC","PingFang TC",system-ui,sans-serif);
  --g-serif:var(--font-serif,"Noto Serif TC","Songti TC",serif);
}

/* ---------- 作品影像 .cvf ---------- */
.cvf-img{border-radius:0;background:var(--g-ground-2)}
.cvf-hasbg{border-radius:0}
.cvf-cap{font-family:var(--g-mono);font-size:12px;letter-spacing:.06em;line-height:1.6;color:var(--g-ink-3);text-align:center;max-width:620px;font-variant-numeric:tabular-nums}
.cvf-cap-bl .cvf-cap,.cvf-cap-br .cvf-cap{color:var(--on-photo,#fff);text-shadow:none;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));padding:40px 16px 12px;max-width:min(60ch,60%)}
.cvf-cap-br .cvf-cap{text-align:right}
.cvf-lb .cvf-cell:focus-visible{outline:2px solid var(--g-ribbon);outline-offset:4px;border-radius:0}
.cvf-lb .cvf-cell:hover .cvf-img{opacity:1}
html .cvf-img{filter:none}

/* ---------- 地點導覽 .kg ---------- */
.kg,.kg-panel{--kg-accent:var(--g-ink);--kg-ink:var(--g-ink);--kg-muted:var(--g-ink-3);--kg-card:var(--g-ground-1);
  --kg-line:var(--g-line);--kg-r-img:0;--kg-r-card:0;--kg-r-pill:2px;--kg-sticky:calc(72px + 8px);
  font-family:var(--g-sans);color:var(--g-ink);max-width:none;padding:0}
.kg-head{margin:0 0 var(--space-8,32px)}
.kg-head h2{font-family:var(--g-serif);font-weight:500;font-size:28px;line-height:1.4;letter-spacing:.01em;color:var(--g-ink)}
.kg-head h2 b{color:var(--g-ink);font-style:normal;font-weight:500}
.kg-head p{color:var(--g-ink-2);font-size:16px;line-height:1.9;max-width:34em}
/* 目錄與工具列：髮線、mono */
.kg-index{border:0;border-top:1px solid var(--g-line);border-bottom:1px solid var(--g-line);padding:16px 0 8px;margin:0 0 24px;background:none}
.kg-index-title{font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;color:var(--g-ink-3)}
.kg-index-sum,.kg-index-city,.kg-jump i,.kg-count,.kg-fsum-v,.kg-fval,.kg-rate .kg-rl{font-family:var(--g-mono);letter-spacing:.06em;color:var(--g-ink-3);font-variant-numeric:tabular-nums}
.kg-index-group{border-bottom:1px solid var(--g-line)}
.kg-jump{border:1px solid var(--g-line-strong);border-radius:2px;color:var(--g-ink-2);background:none}
.kg-jump:hover{color:var(--g-ink);border-color:var(--g-ink);background:none}
.kg-jump.is-current{border-color:var(--g-ink);background:var(--g-ink);color:var(--g-on-ink)}
.kg-jump.is-current i{color:var(--g-on-ink);opacity:.7}
.kg-index-top:focus-visible,.kg-fsum:focus-visible,.kg-flabel:focus-visible,.kg-f:focus-visible,.kg-link:focus-visible,.kg-more-sum:focus-visible,.kg-folio:focus-visible,.kg-modal-x:focus-visible{outline:2px solid var(--g-ribbon);outline-offset:2px;border-radius:0}
.kg.has-sticky .kg-tools{background:var(--g-ground);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--g-line)}
.kg-q{background:var(--g-ground);border:1px solid var(--g-line-strong);border-radius:2px;color:var(--g-ink);font-family:var(--g-sans)}
.kg-q:focus{border-color:var(--g-ink);background:var(--g-ground);outline:2px solid var(--g-ribbon);outline-offset:2px}
.kg-q::placeholder{color:var(--g-ink-3)}
.kg-qclear{border-radius:0}
.kg-qclear:hover{background:var(--g-ink);color:var(--g-on-ink)}
.kg-fsum{color:var(--g-ink-2);border-color:var(--g-line-strong);border-radius:2px}
.kg-fsum:hover{color:var(--g-ink);border-color:var(--g-ink)}
.kg-fsum-v.on,.kg-fval.on{color:var(--g-ribbon-ink)}
.kg-fgroup{border-bottom:1px solid var(--g-line)}
.kg-flabel{color:var(--g-ink-2);font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.kg-f{border:1px solid var(--g-line-strong);border-radius:2px;color:var(--g-ink-2);font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px}
.kg-f:hover{color:var(--g-ink);border-color:var(--g-ink)}
.kg-f.on,.kg-f.on[data-v="all"]{background:var(--g-ink);color:var(--g-on-ink);border-color:var(--g-ink)}
.kg-allbtn,.kg-backidx{border:1px solid var(--g-line-strong);border-radius:2px;color:var(--g-ink-2);font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.kg-allbtn:hover,.kg-backidx:hover{color:var(--g-ink);border-color:var(--g-ink)}
.kg-noresult{border:1px solid var(--g-line);border-radius:0;color:var(--g-ink-2)}
/* 卡片：紙上一格，髮線框，不浮起 */
.kg-grid{gap:24px}
.kg-card{background:var(--g-ground);border:1px solid var(--g-line);border-radius:0;transition:opacity .4s var(--kg-ease),transform .4s var(--kg-ease),border-color .12s}
.kg-card:hover,.kg-card.is-target{border-color:var(--g-line-strong)}
.kg-card.is-target{outline:2px solid var(--g-ribbon);outline-offset:-2px}
.kg-media{background:var(--g-ground-2)}
.kg-media img{filter:none;transition:none}
.kg-card:hover .kg-media img{transform:none}
.kg-media.kg-noimg{font-family:var(--g-mono);letter-spacing:.08em;color:var(--g-ink-3)}
.kg-body{padding:16px 16px 20px;gap:12px}
.kg-badges{gap:6px}
.kg-city{font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;color:var(--g-on-ink);background:var(--g-ink);border-radius:2px;padding:4px 8px}
.kg-era,.kg-type{font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--g-line-strong);border-radius:2px;padding:4px 8px;color:var(--g-ink-2);background:none}
.kg-era.modern,.kg-era.heritage{border-color:var(--g-line-strong);color:var(--g-ink-2)}
.kg-era.heritage{color:var(--g-ribbon-ink);border-color:var(--g-ribbon)}   /* 老東西：唯一上橙的徽章，文章本來就在講「舊的怎麼被留下來」 */
.kg-name{font-family:var(--g-sans);font-stretch:112%;font-weight:500;font-size:20px;line-height:1.2;color:var(--g-ink)}
.kg-name span{font-family:var(--g-sans);font-stretch:100%;font-size:14px;color:var(--g-ink-2);margin-top:4px}
.kg-attrs{gap:6px}
.kg-attrs li{font-size:13px;color:var(--g-ink-2);font-family:var(--g-sans)}
.kg-attrs li b{font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-ink-3);min-width:64px;padding-top:2px}
.kg-sum{font-size:14px;line-height:1.8;color:var(--g-ink-2)}
.kg-ratings{border-top:1px solid var(--g-line);padding-top:12px;gap:8px}
.kg-dot{border-radius:0;width:8px;height:8px;background:var(--g-ground-2)}
.kg-dot.f{background:var(--g-ink)}
.kg-tip{font-size:13px;line-height:1.7;color:var(--g-ink-2);background:var(--g-ground-1);border-left:2px solid var(--g-ribbon);border-radius:0;padding:10px 12px}
.kg-tip b{color:var(--g-ribbon-ink);font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.kg-link{font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-ink-2);border:1px solid var(--g-line-strong);border-radius:2px;padding:6px 10px;transition:border-color .12s,color .12s}
.kg-link:hover{color:var(--g-ink);border-color:var(--g-ink)}
.kg-link .kg-pin{color:var(--g-ink-3)}
.kg-works{color:var(--g-ink);border-color:var(--g-ink)}
.kg-works:hover{color:var(--g-on-ink);background:var(--g-ink);border-color:var(--g-ink)}
.kg-empty{color:var(--g-ink-3);font-family:var(--g-mono);letter-spacing:.06em}
.kg-more{border-top:1px solid var(--g-line)}
.kg-more-sum{font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-ink-2)}
.kg-more-sum:hover{color:var(--g-ribbon-ink)}
/* 路線包（GPX 下載）：不再是金色漸層方塊，改成髮線框、價格用橙色文字 */
.kg-pack{margin:0 0 32px;padding:20px 0;border:0;border-top:1px solid var(--g-line);border-bottom:1px solid var(--g-line);border-radius:0;background:none}
.kg-pack-eyebrow{font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;color:var(--g-ink-3)}
.kg-pack-note{color:var(--g-ink-2);font-size:14px;line-height:1.8;opacity:1}
.kg-pack-btn{background:var(--g-ink);color:var(--g-on-ink);border-radius:0;padding:12px 16px;font-family:var(--g-sans);font-size:14px;font-weight:500;letter-spacing:.02em;transition:background .12s}
.kg-pack-btn:hover{transform:none;filter:none;background:var(--g-ink-2)}
.kg-pack-price{font-family:var(--g-mono);font-size:12px;letter-spacing:.06em;border-left:1px solid var(--g-line-strong);color:var(--g-on-ink);font-variant-numeric:tabular-nums}
.kg-folio{border:1px solid var(--g-line);border-radius:0;background:none}
.kg-folio:hover,.kg-folio:focus-visible{border-color:var(--g-ink);background:none}
.kg-folio-t{font-family:var(--g-sans);font-stretch:112%;font-weight:500;letter-spacing:0;font-size:16px}
.kg-folio-n{font-family:var(--g-mono);font-size:12px;letter-spacing:.06em}
.kg-folio-a{color:var(--g-ink-3)}
.kg-play{color:var(--g-ribbon-ink);font-family:var(--g-mono)}
/* 側欄面板與彈窗 */
.kg-panel.is-side .kg-tools{background:none;border:0}
.kg-modal::backdrop{background:rgba(0,0,0,.6);backdrop-filter:none}
.kg-modal-box{background:var(--ground-000,#f4f1ea);border:1px solid var(--line,#d6d1c5);border-radius:0;font-family:var(--font-sans,"Archivo","Noto Sans TC",sans-serif);color:var(--ink,#1b1b1a)}
.kg-modal-media{background:var(--ground-200,#d9d4c8)}
.kg-modal-x{border-radius:0;background:var(--ink,#1b1b1a);color:var(--on-ink,#f4f1ea)}
.kg-modal-x:hover{background:var(--ribbon,#d9522b);color:var(--on-ribbon,#f4f1ea)}
@media(max-width:640px){.kg.has-sticky .kg-tools{border-bottom:0}}

/* ---------- 圖庫 .cg ---------- */
.cg{--cg-accent:var(--g-ink);--cg-ink:var(--g-ink);--cg-muted:var(--g-ink-3);--cg-card:var(--g-ground-1);--cg-line:var(--g-line);--cg-r-img:0;--cg-r-card:0;--cg-r-pill:2px}
.cg-f{font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--g-line-strong);border-radius:2px;color:var(--g-ink-2);padding:6px 10px}
.cg-f:hover{color:var(--g-ink);border-color:var(--g-ink)}
.cg-f.active{background:var(--g-ink);color:var(--g-on-ink);border-color:var(--g-ink)}
.cg-item{border-radius:0}
.cg-item img{border-radius:0}
.cg-nav button{border-radius:0;border-color:var(--g-line-strong);color:var(--g-ink)}
.cg-nav button:hover{background:var(--g-ink);color:var(--g-on-ink);border-color:var(--g-ink)}
/* 燈箱與投影模式永遠是暮色（看照片），只換字型與記號色 */
.cg-lightbox,.cg-flow{background:rgba(22,22,21,.97)}
.cg-lb-fig img,.cg-flow-slide img{border-radius:0;box-shadow:none}
.cg-lb-cap,.cg-flow-cap .cg-flow-title{font-family:var(--g-sans);color:#b9b5ac}
.cg-lb-cap b,.cg-flow-cap .cg-flow-title{color:#edeae3;font-weight:500}
.cg-lb-exif,.cg-flow-cap .cg-flow-exif,.cg-lb-count,.cg-flow-count{font-family:var(--g-mono);font-size:12px;letter-spacing:.06em;color:#8a877e;font-variant-numeric:tabular-nums}
.cg-lb-buy{border:1px solid #edeae3;border-radius:0;color:#edeae3;font-family:var(--g-sans)}
.cg-lb-buy:hover,.cg-lb-buy:focus-visible{background:#edeae3;color:#161615}
.cg-flow-nav{border-radius:0;background:rgba(22,22,21,.6);border:1px solid #6e6b64;color:#edeae3}
.cg-flow-nav:hover{background:#edeae3;color:#161615;border-color:#edeae3}
.cg-ph-note{border:1px solid var(--g-line);border-radius:0;background:var(--g-ground-1);color:var(--g-ink-2);font-family:var(--g-mono);letter-spacing:.06em}

/* ---------- 章節對開 .cchap ---------- */
.cchap{--cchap-ink:var(--g-ink);--cchap-muted:var(--g-ink-3);--cchap-accent:var(--g-ribbon);--cchap-line:var(--g-line);--cchap-bg:var(--g-ground);--cchap-contra:var(--g-on-ink)}
.cchap-tone-light{--cchap-bg:var(--ground-000,#f4f1ea);--cchap-ink:var(--ink,#1b1b1a);--cchap-muted:var(--ink-3,#68655d);--cchap-line:var(--line,#d6d1c5);--cchap-contra:var(--on-ink,#f4f1ea)}
.cchap-tone-dark{--cchap-bg:#161615;--cchap-ink:#edeae3;--cchap-muted:#8a877e;--cchap-line:#2c2c2a;--cchap-contra:#161615;--cchap-accent:#e8683f}
.cchap-label,.cchap-code,.cchap-cap,.cchap-side span,.cchap-no{font-family:var(--g-mono);letter-spacing:.08em;text-transform:uppercase}
.cchap-label{font-size:12px;font-weight:400;color:var(--cchap-ink)}
.cchap-no{color:var(--cchap-muted);margin-right:.8em}
.cchap-code,.cchap-cap{font-size:12px;letter-spacing:.06em;color:var(--cchap-muted);font-variant-numeric:tabular-nums}
.cchap-rule{width:32px;height:2px;background:var(--cchap-accent);opacity:1}
.cchap-intro{font-family:var(--g-serif);font-weight:500;font-size:clamp(22px,2.4vw,28px);line-height:1.5;letter-spacing:.01em;color:var(--cchap-ink)}
.cchap-note{font-family:var(--g-sans);font-size:16px;line-height:1.9;color:var(--g-ink-2);max-width:34em}
.cchap-tone-dark .cchap-note{color:#b9b5ac}
.cchap-img,.cchap-cell .cchap-img,.cchap-cell .cchap-empty,.cchap-frame{border-radius:0}
.cchap-cell:hover .cchap-img{transform:none}
.cchap.is-mono .cchap-img{filter:none}
.cchap-lb{background:rgba(22,22,21,.96)}
.cchap-lb-cap,.cchap-lb-meta,.cchap-lb-chap,.cchap-lb-count{font-family:var(--g-mono);font-size:12px;letter-spacing:.06em;color:#8a877e;font-variant-numeric:tabular-nums}
.cchap-lb-chap{color:#b9b5ac}
.cchap-lb-btn{color:#edeae3;border-radius:0}
.cchap-lb-btn:focus-visible{outline:2px solid #e8683f;outline-offset:2px}

/* ---------- 目錄 .cv-toc ---------- */
.cv-toc{font-family:var(--g-sans);border-top:1px solid var(--g-line);border-bottom:1px solid var(--g-line)}
.cv-toc-sum,.cv-toc-title{color:var(--g-ink-3);font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.cv-toc-sum:hover{color:var(--g-ink)}
.cv-toc-a{color:var(--g-ink-2);border-left:2px solid transparent;font-size:14px;line-height:1.6;padding-left:12px}
.cv-toc-a:hover,.cv-toc-a:focus-visible{color:var(--g-ink);border-left-color:var(--g-line-strong)}
.cv-toc-i.is-current > .cv-toc-a{color:var(--g-ink);border-left-color:var(--g-ribbon)}
.cv-toc.is-numbered .cv-toc-a::before{font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;color:var(--g-ink-3)}
.cv-toc-a:focus-visible{outline:2px solid var(--g-ribbon);outline-offset:2px}
.cv-toc.is-rail{scrollbar-color:var(--g-line-strong) transparent}

/* ---------- 影片 .cv-video ---------- */
.cv-video-btn,.cv-video-frame{border-radius:0}
.cv-video-btn{background:var(--g-ground-2)}
.cv-video.is-blank .cv-video-btn{background:var(--g-ground-2);border:1px solid var(--g-line)}
.cv-video-btn:hover img{transform:none}
.cv-video-play-bg{fill:var(--g-ink)}
.cv-video-play-tri{fill:var(--g-on-ink)}
.cv-video-btn:hover .cv-video-play-bg{fill:var(--g-ribbon)}
.cv-video-btn:hover .cv-video-play-tri{fill:var(--on-ribbon,#f4f1ea)}
.cv-video-btn:focus-visible{outline:2px solid var(--g-ribbon);outline-offset:3px}
.cv-video-title{font-family:var(--g-sans);font-weight:500;letter-spacing:.02em}
.cv-video figcaption{font-family:var(--g-mono);font-size:12px;letter-spacing:.06em;color:var(--g-ink-3);margin-top:8px}
.cv-video-warn{color:var(--g-ink-3);border:1px dashed var(--g-line-strong);border-radius:0;font-family:var(--g-mono);letter-spacing:.06em}

/* ---------- 作品介紹 .cw-info ---------- */
.cw-info{grid-template-columns:5fr 7fr;gap:48px;margin:0 0 var(--space-12,48px)}
.cw-title{font-family:var(--g-serif);font-weight:500;font-size:28px;line-height:1.4;letter-spacing:.01em;color:var(--g-ink);margin:0 0 24px}
.cw-meta{gap:12px;border-top:1px solid var(--g-line);padding-top:16px}
.cw-row{grid-template-columns:96px 1fr;gap:16px}
.cw-row dt{font-family:var(--g-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-ink-3);padding-top:3px}
.cw-row dd{font-family:var(--g-sans);font-size:14px;line-height:1.6;color:var(--g-ink-2)}
.cw-desc{font-family:var(--g-sans);font-size:18px;line-height:1.9;color:var(--g-ink-2);max-width:34em}
.cw-info .cw-desc p{margin:0 0 var(--space-6,24px)}
@media(max-width:760px){.cw-info{grid-template-columns:1fr;gap:32px}.cw-row{grid-template-columns:88px 1fr}}