/* ─────────────────────────────────────────────────────────────
   CJ33 部落格 · 讀者端「結構層」
   這支只管版面骨架與元件排列；所有顏色/字體/特色都由版型皮檔
   （/assets/theme-*.css）用 CSS 變數覆蓋。換版型不必動這支、也不必重烘文章。
   ───────────────────────────────────────────────────────────── */
:root{
  --bg:#faf7f1; --surface:#fffdf9; --panel:#f2ece1;
  --ink:#2b2622; --ink2:#6f665a; --faint:#9a9080;
  --accent:#9c7a3c; --accent-2:#c9b892; --line:#e7dece;
  --font-display:"Noto Serif TC",Georgia,serif;
  --font-body:"Noto Sans TC",-apple-system,"PingFang TC",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:10px; --card-bg:transparent; --shadow:none;
  --label-tt:none; --label-ls:.04em;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:18px;line-height:1.85;-webkit-font-smoothing:antialiased}
.serif{font-family:var(--font-display)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%}

/* ── 站頭 ── */
.site-head{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:10}
.site-head .in{max-width:960px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-name{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.site-nav a{color:var(--ink2);font-size:14px;margin-left:20px}
.site-nav a:hover{color:var(--ink)}

/* ── 文章頁 ── */
.article{max-width:680px;margin:0 auto;padding:46px 24px 40px}
.breadcrumb{font-size:13px;color:var(--faint);margin-bottom:22px}
.breadcrumb a{color:var(--ink2)}
.article-series{display:inline-block;font-size:13px;color:var(--accent);border:1px solid var(--accent-2);
  border-radius:20px;padding:3px 13px;margin-bottom:16px}
.article-title{font-family:var(--font-display);font-size:34px;line-height:1.3;font-weight:700;letter-spacing:-.01em;margin-bottom:14px}
.article-meta{color:var(--ink2);font-size:14px;margin-bottom:8px}
.article-meta .sep{color:var(--accent-2);margin:0 8px}
.article-cover{width:100%;border-radius:var(--radius);margin:26px 0 8px;display:block}
.article-excerpt{font-size:19px;color:var(--ink2);font-style:italic;border-left:2.5px solid var(--accent-2);
  padding-left:18px;margin:22px 0}
.article-tags{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.article-tags a{font-size:13px;color:var(--ink2);background:var(--panel);border-radius:20px;padding:4px 12px}
.article-tags a:hover{color:var(--accent);text-decoration:none}

/* ── 內文 ── */
.content{font-size:18.5px}
.content p{margin:0 0 1.15em}
.content h2{font-family:var(--font-display);font-size:25px;margin:1.7em 0 .5em;font-weight:700}
.content h3{font-family:var(--font-display);font-size:21px;margin:1.4em 0 .4em;font-weight:700}
.content h4{font-family:var(--font-display);font-size:18px;margin:1.3em 0 .35em;font-weight:700}
.content a{text-decoration:underline;text-underline-offset:3px}
.content img{height:auto;border-radius:var(--radius);margin:.6em 0}
.content blockquote{border-left:2.5px solid var(--accent-2);margin:1.3em 0;padding:2px 0 2px 18px;color:var(--ink2);font-style:italic}
.content ul,.content ol{margin:0 0 1.15em 1.4em}
.content li{margin:.2em 0}
.content hr{border:0;height:1px;background:var(--line);margin:2.2em auto;max-width:120px}
.content code{background:var(--panel);padding:1px 6px;border-radius:5px;font-family:var(--font-mono);font-size:.9em}
.content pre{background:var(--panel);padding:14px 16px;border-radius:var(--radius);overflow-x:auto;
  font-family:var(--font-mono);font-size:14px;line-height:1.65;margin:1.2em 0;white-space:pre-wrap}
.content .hl{background:linear-gradient(transparent 55%,var(--accent-2) 55%);padding:0 2px}
.content figure{margin:1.4em 0}.content figure img{margin:0}
.content figcaption{font-size:14px;color:var(--ink2);text-align:center;margin-top:8px}
.content table{border-collapse:collapse;width:100%;margin:1.3em 0;font-size:16px}
.content th,.content td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.content th{background:var(--panel);font-weight:700}
.content .text-center{text-align:center}.content .text-right{text-align:right}
.content .callout-note,.content .callout-warn,.content .callout-tip{border-radius:var(--radius);padding:15px 18px;
  margin:1.3em 0;font-size:16.5px;line-height:1.75;border:1px solid var(--line);background:var(--panel)}
.content .video-embed{position:relative;padding-bottom:56.25%;height:0;margin:1.4em 0}
.content .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--radius);border:0}

/* ── 列表頁 ── */
.list-wrap{max-width:960px;margin:0 auto;padding:44px 24px 20px}
.list-head{margin-bottom:30px}
.list-kicker{font-size:12px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:8px}
.list-title{font-family:var(--font-display);font-size:30px;font-weight:700}
.list-desc{color:var(--ink2);margin-top:8px;font-size:15.5px}
.cards{display:grid;grid-template-columns:1fr;gap:0}
.card{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);
  background:var(--card-bg);border-radius:var(--radius)}
.card:last-child{border-bottom:0}
.card .thumb{flex:0 0 190px;height:120px;border-radius:var(--radius);object-fit:cover;background:var(--panel)}
.card .body{flex:1;min-width:0}
.card .c-cat{font-size:12px;color:var(--accent);letter-spacing:var(--label-ls);text-transform:var(--label-tt)}
.card .c-title{font-family:var(--font-display);font-size:21px;font-weight:700;line-height:1.4;margin:6px 0;color:var(--ink)}
.card .c-title a{color:inherit}
.card .c-title a:hover{color:var(--accent);text-decoration:none}
.card .c-excerpt{color:var(--ink2);font-size:15px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .c-meta{font-size:13px;color:var(--faint);margin-top:9px}
@media(max-width:640px){.card{flex-direction:column;gap:12px}.card .thumb{flex-basis:auto;width:100%;height:180px}}

.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin:36px 0 10px}
.pager a,.pager span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;border:1px solid var(--line);font-size:14px;color:var(--ink2);background:var(--surface)}
.pager a:hover{border-color:var(--accent);color:var(--ink);text-decoration:none}
.pager .cur{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pager .disabled{opacity:.4}
.list-empty{padding:40px 0;color:var(--faint);text-align:center}

/* ── 搜尋 ── */
.search-box{max-width:560px;margin:0 auto 26px}
.search-box input{width:100%;font:inherit;font-size:16px;padding:13px 16px;border:1px solid var(--line);
  border-radius:12px;outline:none;background:var(--surface);color:var(--ink)}
.search-box input:focus{border-color:var(--accent)}
.search-result{border-bottom:1px solid var(--line);padding:18px 0}
.search-result .r-title{font-family:var(--font-display);font-size:19px;font-weight:700}
.search-result .r-meta{font-size:13px;color:var(--faint);margin-top:4px}

/* ── 留言 ── */
.comments{max-width:680px;margin:44px auto 0;border-top:1px solid var(--line);padding-top:30px}
.comments-title{font-family:var(--font-display);font-size:20px;margin-bottom:18px}
.clist{margin-bottom:26px}
.c-empty{color:var(--faint);padding:8px 0}
.citem{padding:14px 0;border-bottom:1px solid var(--line)}
.citem:last-child{border-bottom:0}
.c-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.c-name{font-weight:700;font-size:15px}
.verified{font-size:11px;color:var(--accent);background:var(--panel);border:1px solid var(--accent-2);border-radius:20px;padding:1px 8px}
.c-date{color:var(--faint);font-size:12.5px;margin-left:auto}
.c-body{font-size:15.5px;line-height:1.75;color:var(--ink)}
.c-reply{font-size:12.5px;color:var(--accent);background:none;border:0;cursor:pointer;padding:4px 0;margin-top:2px}
.c-kids{margin:10px 0 0 22px;padding-left:16px;border-left:2px solid var(--line)}
.cform{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cf-row{display:flex;gap:10px;margin-bottom:10px}
.cf-row input{flex:1}
.cform input,.cform textarea{width:100%;font:inherit;font-size:14.5px;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;outline:none;background:var(--bg);color:var(--ink)}
.cform input:focus,.cform textarea:focus{border-color:var(--accent)}
.cform textarea{min-height:88px;resize:vertical}
.cf-actions{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:10px}
.cmsg{color:var(--ink2);font-size:13px}
.cform button{font:inherit;font-size:14px;padding:9px 20px;border:0;border-radius:8px;background:var(--ink);color:var(--bg);cursor:pointer}
.reply-hint{font-size:13px;color:var(--ink2);margin-bottom:10px;background:var(--panel);padding:7px 12px;border-radius:8px}

/* ── 頁尾 ── */
.site-foot{max-width:960px;margin:60px auto 0;padding:30px 24px;border-top:1px solid var(--line);color:var(--faint);font-size:13px;text-align:center}

/* ── Cookie 告知 ── */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:16px;
  justify-content:center;flex-wrap:wrap;background:var(--ink);color:var(--bg);
  padding:14px 20px;font-size:13.5px;line-height:1.7}
.cookie-bar a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;margin-left:6px}
.cookie-bar button{font:inherit;font-size:13.5px;padding:7px 18px;border:0;border-radius:20px;
  background:var(--accent);color:var(--bg);cursor:pointer;white-space:nowrap}

/* ═══ 無障礙（三個版型共用，各版型只需要改顏色）═══ */

/* 用鍵盤（Tab 鍵）瀏覽的人要看得到自己現在選到哪裡。
   用 :focus-visible 而不是 :focus → 用滑鼠點的時候不會出現框，只有鍵盤操作才出現。 */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent, #a07c3f);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 「跳到主要內容」：用鍵盤的人不必每次都 Tab 過整排選單才進到文章。
   平常藏起來，被 Tab 選到才滑出來。 */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--ink, #2b2723); color: var(--bg, #fff);
  padding: 10px 18px; border-radius: 0 0 8px 8px; font-size: 14px;
  transition: top .18s;
}
.skip-link:focus { top: 0; }

/* 有些人（前庭系統敏感、暈動症）會被大幅度動畫弄到不舒服，
   系統設定裡有「減少動態效果」時就把動畫關掉。這是作業系統層級的設定，我們要尊重。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* 視差（背景固定不動）也是動態效果的一種，一併退回一般捲動 */
  .rs-hero, .rs-scene, .rs-ahero { background-attachment: scroll !important; }
}

/* ═══ 站內搜尋覆蓋層（三個版型共用；顏色全部吃版型變數）═══ */
html.sx-lock { overflow: hidden; }          /* 打開時背景不要跟著捲 */

.sx-scrim{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(0,0,0,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:12vh 16px 16px;overflow-y:auto}
.sx-scrim.on{display:block;animation:sxIn .16s ease-out}
@keyframes sxIn{from{opacity:0}to{opacity:1}}

.sx-panel{max-width:640px;margin:0 auto;background:var(--bg,#fff);color:var(--ink,#222);
  border:1px solid var(--line,#e5e5e5);border-radius:var(--radius,14px);
  box-shadow:0 24px 70px rgba(0,0,0,.45);overflow:hidden;
  animation:sxUp .18s cubic-bezier(.2,.8,.2,1)}
@keyframes sxUp{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* 搜尋列 */
.sx-bar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line,#e5e5e5)}
.sx-ic{flex:0 0 18px;width:18px;height:18px;border:2px solid var(--faint,#999);border-radius:50%;position:relative}
.sx-ic::after{content:"";position:absolute;right:-5px;bottom:-4px;width:8px;height:2px;
  background:var(--faint,#999);transform:rotate(45deg)}
.sx-input{flex:1;font:inherit;font-size:17px;background:none;border:0;color:var(--ink,#222);padding:4px 0}
.sx-input:focus{outline:0}
.sx-input::placeholder{color:var(--faint,#999)}
.sx-input::-webkit-search-cancel-button{display:none}
.sx-esc{font:inherit;font-size:10px;letter-spacing:.12em;color:var(--ink2,#666);cursor:pointer;
  background:none;border:1px solid var(--line,#e5e5e5);border-radius:6px;padding:5px 9px}
.sx-esc:hover{border-color:var(--accent,#888);color:var(--ink,#222)}

/* 分類籤 */
.sx-chips{display:flex;flex-wrap:wrap;gap:7px;padding:13px 18px 0}
.sx-chip{font:inherit;font-size:12.5px;cursor:pointer;padding:5px 13px;border-radius:999px;
  background:none;border:1px solid var(--line,#e5e5e5);color:var(--ink2,#666)}
.sx-chip:hover{border-color:var(--accent,#888);color:var(--ink,#222)}
.sx-chip.on{background:var(--accent,#333);border-color:var(--accent,#333);color:var(--bg,#fff)}

.sx-count{padding:12px 18px 0;font-size:11.5px;letter-spacing:.1em;color:var(--faint,#999)}
.sx-recent{padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sx-rl{font-size:12px;color:var(--faint,#999)}
.sx-rq{font:inherit;font-size:12.5px;cursor:pointer;padding:4px 11px;border-radius:999px;
  background:var(--panel,rgba(128,128,128,.1));border:0;color:var(--ink2,#666)}
.sx-rq:hover{color:var(--ink,#222)}

/* 結果 */
.sx-list{max-height:52vh;overflow-y:auto;padding:8px 8px 12px}
.sx-item{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;color:inherit}
.sx-item:hover,.sx-item.on{background:var(--panel,rgba(128,128,128,.12))}
.sx-item .sx-t{display:block;font-family:var(--font-display,inherit);font-size:16.5px;line-height:1.5;color:var(--ink,#222)}
.sx-item .sx-m{display:block;font-size:11px;letter-spacing:.1em;color:var(--accent,#888);margin-top:5px}
.sx-item .sx-e{display:block;font-size:13px;line-height:1.7;color:var(--ink2,#666);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sx-item mark{background:transparent;color:var(--accent,#a07c3f);font-weight:700;padding:0}

/* 找不到時 */
.sx-empty{padding:0 18px}
.sx-empty:not(:empty){padding:18px}
.sx-empty p{font-size:14px;line-height:1.8;color:var(--ink2,#666);margin:0 0 10px}
.sx-sugl{font-size:12px;color:var(--faint,#999)}
.sx-sugs{display:flex;flex-wrap:wrap;gap:8px}
.sx-sug{font-size:12.5px;padding:5px 13px;border-radius:999px;text-decoration:none;
  border:1px solid var(--line,#e5e5e5);color:var(--ink2,#666)}
.sx-sug:hover{border-color:var(--accent,#888);color:var(--ink,#222)}

@media(max-width:600px){
  .sx-scrim{padding:0}
  .sx-panel{max-width:none;min-height:100vh;border:0;border-radius:0}
  .sx-list{max-height:none}
}