/*
Theme Name: KLab Moral Magazine
Theme URI: https://github.com/liKyle/wp-moral-magazine-child
Description: klab.tw 使用的 Moral Magazine child theme。把原本直接改在 parent theme 裡的客製（閱讀時間、側邊欄廣告位、文章下方廣告、日期格式）搬進 child，讓 parent 可以正常更新而不會被洗掉。
Author: Kyle Li
Author URI: https://klab.tw/
Template: moral-magazine
Version: 0.1.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: klab-moral-magazine
Tags: blog, news, two-columns, right-sidebar, custom-menu, featured-images, translation-ready
⚠ 上面的 Version 是佔位符，不是版號。唯一來源是 VERSION 檔 ＋ bin/version.sh，
打包（bin/build.sh）時才會填上真正的號。理由見 CLAUDE.md「版號怎麼來的」。
── 這份樣式的來源 ──────────────────────────────────────────────
下面「Moral Magazine Lite 的樣式」那一段，取自 Moral Themes 的
Moral Magazine Lite 1.0.3（GPL-3.0-or-later），未經修改：
https://wordpress.org/themes/moral-magazine-lite/
本站原本就跑在那個 child theme 上，換成自己的 child 之後外觀要維持一致，
所以整段沿用。之後的「本站客製」才是自己寫的。
*/
/*--------------------------------------------------------------
# Moral Magazine Lite 的樣式（GPL-3.0-or-later, Moral Themes）
--------------------------------------------------------------*/
/*--------------------------------------------------------------
. Second Design
--------------------------------------------------------------*/
body.second-design {
background-color: #fff;
}
body.second-design ,
.second-design button,
.second-design input,
.second-design select,
.second-design textarea {
color: #1E2E4F;
}
.second-design .social-icons li a svg {
fill: #1E2E4F;
}
.second-design .site-description,
.second-design .site-title a,
.second-design .posted-on a,
.second-design .byline a,
.second-design .post-categories a,
.second-design .entry-title a,
.second-design .trip-type a,
.second-design .comment a,
.second-design #secondary a,
.second-design #secondary li,
.second-design #secondary-sidebar a,
.second-design #secondary-sidebar li,
.second-design #secondary .posted-on a,
.second-design #secondary-sidebar .post-categories a,
{
color: #000;
}
.second-design .main-navigation ul.nav-menu > li.home-icon > a > svg {
fill: #fff;
}
.second-design #secondary .post-categories a {
color: #fff;
}
.second-design .wrapper {
width: 95%;
}
.second-design .post-categories a {
text-transform: uppercase;
font-size: 15px;
}
.second-design .post-categories {
margin-bottom: 15px;
}
.second-design .posted-on a:not(:last-child) {
padding-right: 15px;
}
.second-design .posted-on a,
.second-design .comment a,
.second-design .trip-type,
.second-design .byline a {
display: inline-flex;
align-items: center;
}
.second-design .top-navigation-content p {
margin: 0;
}
.second-design .top-navigation-content {
float: left;
}
.second-design .top-navigation-container .entry-meta {
margin-bottom: 0;
float: right;
}
.byline a:before {
background-image: url(assets/img/user.svg);
}
.second-design #top_navigation {
border-bottom: 1px solid #7c7c7c99;
}
.second-design .top-navigation-container {
padding: 10px 0;
}
.header-two input[type="search"] {
border: unset;
background-color: unset;
}
.header-two form.search-form button.search-submit {
width: 50px;
height: 50px;
}
.second-design .overlay {
opacity: 0.4;
}
.second-design .post-categories a {
color: #fff;
background-color: #e6432a;
padding: 4px 8px;
}
.second-design .post-categories a:hover,
.second-design .post-categories a:focus {
background-color: #fff;
color: #1E2E4F;
}
.second-design .section-title {
font-size: 24px;
position: relative;
}
.second-design .section-title,
.second-design .widget-title,
.second-design .widgettitle {
background-color: unset;
padding: 0;
text-align: center;
color: #1E2E4F;
}
.second-design .section-header,
.second-design .widget-header {
margin: 0 auto;
text-align: center;
position: relative;
}
.second-design .section-title:before,
.second-design .section-title:after,
.second-design .widget-title:before,
.second-design .widget-title:after {
content: "";
background-color: #1E2E4F;
width: 800px;
height: 2px;
position: absolute;
top: 18px;
right: 100%;
margin-right: 15px;
}
.second-design .widget-title {
position: relative;
}
.second-design .widget-title:before,
.second-design .widget-title:after {
height: 2px;
width: 300px;
top: 14px;
background-color: #1E2E4F
}
.second-design .section-title:after,
.second-design .widget-title:after {
right: unset;
left: 100%;
margin-right: 0;
margin-left: 15px;
}
.second-design .same-background {
padding-top: 0;
}
.second-design .main-navigation ul.nav-menu > li.home-icon > a > svg{
fill: #e6432a;
}
.site-title a:hover,
.site-title a:focus,
.byline .author a i:hover,
.byline .author a i:focus,
.second-design .entry-title a:hover,
.second-design .entry-title a:focus,
.second-design .byline a:hover,
.second-design .byline a:focus,
.second-design .posted-on a:hover,
.second-design .posted-on a:focus,
.second-design .posted-on a:hover:before,
.second-design .byline a:hover:before,
.second-design .posted-on a:focus:before,
.second-design .byline a:focus:before,
.second-design .trip-type a:hover,
.second-design .trip-type a:focus,
.second-design .comment a:hover,
.second-design .comment a:focus
.second-design .trip-type a:hover,
.second-design .trip-type a:focus,
.second-design .trip-type:hover:before,
.second-design .trip-type:focus:before {
opacity: 1;
color: #e6432a !important;
}
.second-design .comment a {
text-decoration: none;
}
#colophon .widget-title, #colophon .widgettitle {
font-size: 22px;
}
.lite-version .hero-banner-post .post-categories a, .lite-version .post-categories a{
color: #fff;
}
#magazine_pro_breaking_news_section .entry-title a ,
.lite-version .hero-banner-post .post-categories a:hover,
.lite-version .hero-banner-post .post-categories a:focus,
.lite-version .post-categories a:focus,
.lite-version .post-categories a:hover{
color: #000;
}
.breaking-news-post {
background-color: #ffffff;
position: relative;
border: solid 2px #000;
}
.wp-block-latest-posts a{
text-decoration: none;
}
.site-description,
.site-title a {
color: #fff !important;
}
.second-design .hero-banner-sidebar .section-title{
font-size: 15px;
}
.hero-banner-sidebar ul li.active:after{
bottom: 10px;
}
.second-design .hero-banner-sidebar .section-title:after,
.second-design .hero-banner-sidebar .section-title:before{
content: none;
}
.search .entry-title,
.blog .entry-title,
.archive .entry-title{
font-size: 24px;
}
.widget-title, .widgettitle{
font-size: 18px;
}
.widget-area .widget .entry-title a {
font-size: 15px;
}
.second-design .widget-header{
text-align: left;
}
.wp-block-search__input{
border: 1px solid !important;
}
.posted-on a,
.entry-meta > span{
font-size: 15px;
}
.lite-version #colophon .entry-meta > span:not(:first-child):before,
.lite-version #colophon .entry-meta > span {
color: #fff;
}
.lite-version button.menu-toggle:focus,
.lite-version button.menu-toggle:hover {
background-color: #000;
}
.lite-version button.menu-toggle.active:focus,
.lite-version button.menu-toggle:focus {
border: 4px solid #f00;
position: relative;
z-index: 4;
}
.lite-version svg.icon-close {
fill: #fff;
}
@media screen and (max-width: 567px){
#magazine_pro_you_may_have_missed_section article:not(:last-child) {
margin-bottom: 20px;
}
#magazine_pro_hero_banner_section .hero-banner-post article {
width: 100%;
}
}
@media screen and (min-width: 1025px){
#page-site-header .page-title {
font-size: 48px;
}
.site-title {
font-size: 32px;
}
}
@media screen and (min-width: 1900px){
#magazine_pro_breaking_news_section .entry-title a,
.widget-area .widget .entry-title a {
font-size: 16px;
}
.aft-ripple {
height: 70px;
width: 60px;
}
#magazine_pro_breaking_news_section .news-title {
padding: 27px 16px 29px 70px;
}
#colophon ul li a {
font-size: 16px;
}
}
/*--------------------------------------------------------------
# 本站客製
--------------------------------------------------------------*/
/*
* 取消 reading-time 前的分隔點 —— 換行時那個點會殘留在新行的起首。
*/
.entry-meta > span.reading-time:before {
content: none;
}
/*
* parent 給 mark／ins 上了黃色底（#fff9c0）。原本的做法是直接把 parent 的
* 那條規則註解掉，但 child **不能刪掉 parent 的規則**，只能覆寫回去。
*/
mark,
ins {
background: transparent;
text-decoration: none;
}
/*--------------------------------------------------------------
# 原本放在「外觀 → 自訂 → 額外 CSS」的樣式
#
# 2026-09-09 從 theme_mod 的 custom_css 搬進來，**內容一字未改**。
#
# 為什麼搬：額外 CSS 是**按 theme slug 存**的（`custom_css` 文章），
# 換 theme 時不會跟著走 —— 換成這個 child theme 的當下它就整段失效了，
# 而且畫面不會報錯，只是樣式安靜地不見。放進 style.css 才會跟著 git 走、
# 跟著 theme 一起部署。
#
# ⚠ 之後要調樣式**改這裡**，不要再回去用「額外 CSS」——
# 兩邊都有的話，下次換 theme 又會丟掉其中一半。
--------------------------------------------------------------*/
p > code {
margin-left:3px;
margin-right:3px;
padding-left: 5px;
padding-right:5px;
background-color:#ddddd3;
border-radius:5px;
}
li > a.ez-toc-link {
color: #555 !important;
}
.m-box-shadow {
box-shadow:2px 2px 3px 3px #cccccc;
border-radius:5px;
}
.m-box-shadow figcaption {
border-top: 1px dotted #ddd;
padding-bottom:3px;
padding-left:3px;
}
div {
/* --h2-color: #cacada; */
--h2-color: #97D7E3;
--h3-color: #e1eef7;
}
div.entry-content h2 {
font-size: 40px;
font-weight: bolder;
margin-top: 1em;
margin-bottom: 24px;
padding-left: 0.3em;
padding-top: 0px;
padding-bottom: 5px;
/*border-top: 3px solid #bbc;
border-bottom: 3px solid #bbc;*/
background-color: var(--h2-color);
}
div.entry-content h3 {
font-weight: bolder;
margin-top: 24px;
margin-bottom: 24px;
padding-bottom: 4px;
border-bottom: 1px dashed #bbb;
}
div.entry-content ol {
/* margin-bottom: 16px; */
}
figure.wp-block-table td {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
}
pre.wp-block-code {
padding-top: 5px;
padding-bottom: 5px;
}
pre.wp-block-code.line-numbers > code {
padding-bottom: 0px;
}
hr.wp-block-separator.is-style-dots {
margin-top: -5px;
margin-bottom: 0px;
}
input[type=search]#wp-block-search__input-1 {
width: 150px;
}
#colophon .footer-widgets-area .widget > ul > li:last-child.wp-social-link {
margin-bottom: 15px;
}
article>div.featured-image>img {
max-height: 425px;
}
blockquote.wp-block-quote.is-layout-flow.wp-block-quote-is-layout-flow {
padding-top: 12px;
padding-bottom: 12px;
margin-bottom: 24px;
}
/* Table style */
.my-table > table th {
padding-top: 0.75em;
padding-bottom: 0.75em;
font-weight: bold;
background-color: #D8EFFB;
}
.wp-block-table table thead tr th {
word-break: keep-all;
overflow-wrap: normal;
}
/* main wrapper max width */
@media screen and (min-width: 1024px) {
.wrapper > div.site-branding-wrapper {
max-width: 1280px;
padding-left: 50px;
}
nav#site-navigation.main-navigation > div.wrapper {
max-width: 1280px;
}
div#inner-content-wrapper.wrapper {
max-width: 1280px;
}
}
/* Google */
ins.adsbygoogle {
background-color: white;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
/* fix title width */
@media screen and (min-width: 1025px) {
div.site-branding {
width: 100%;
}
}
/* disable banner hover effect */
.single-wrapper article:hover .featured-image img {
transform: none;
}
article>div.featured-image>img {
max-height: 525px;
}
.wp-block-list {
margin-bottom: 16px;
}
.wp-block-list > li {
margin: 6px 0 6px;
}
/* Blog home banner 尺寸 */
@media screen and (min-width: 567px) {
div.archive-blog-wrapper>article.post.type-post.status-publish {
margin-bottom: 0px;
}
#single-column-news article .featured-image, .archive-blog-wrapper article .featured-image {
margin-top: 43px;
height: 70%;
}
}
/* Post tags */
.entry-meta .tags-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
color: #777;
}
.entry-meta .tags-links a {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 4px 10px;
border: 1px solid #d6d6d6;
border-radius: 999px;
background: #fff;
color: #555;
font-size: 14px;
line-height: 1.4;
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.entry-meta .tags-links a::before {
content: "#";
color: #999;
font-weight: 600;
}
.entry-meta .tags-links a:hover,
.entry-meta .tags-links a:focus {
border-color: #aaa;
background: #f5f5f5;
color: #222;
text-decoration: none;
}
/* 文章內圖片：柔和陰影 */
.single-post .entry-content img {
border-radius: 10px;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
0 8px 12px rgba(0, 0, 0, 0.06);
}
/* 避免圖片連結底線或奇怪邊框 */
.single-post .entry-content a img {
border: none;
}
/* 文章圖片說明 */
.single-post .entry-content figcaption.wp-element-caption {
color: #5a5a5a;
font-size: 14px;
text-align: center;
font-style: normal;
}
/*--------------------------------------------------------------
# 深色模式
#
# 只認 。「跟隨系統」由 functions.php 的 inline script
# 在繪製前決定並寫上屬性，所以這裡**只要一套規則**，不必再寫一份
# @media (prefers-color-scheme: dark)。
#
# ⚠ parent theme 的顏色是寫死的（6000 多行、75 種色），不是 CSS 變數，
# 所以下面是逐個色面覆寫，不是「換一組變數就好」。加新版面時要回來補。
--------------------------------------------------------------*/
html[data-theme="dark"] {
--k-bg: #14171a; /* 頁面底色 */
--k-surface: #1b1f23; /* 內容區、卡片 */
--k-surface-2: #22272c; /* 次層：表頭、程式碼底、標籤 */
/* 頁首那一條（站名／副標）。⚠ 一定要走這個變數 ——
這條橫條是**四個元素疊出來的**（見下面「頁首那一條」那一段），
直接寫色碼的話一定會漏掉其中一兩個，而漏掉的部分只在
視窗某些寬度才露出來（wrapper 有 max-width:1280px）。 */
--k-header: #22272c;
--k-fg: #d7dbdf; /* 內文 */
--k-fg-dim: #9aa3ab; /* 次要文字、說明 */
--k-fg-strong: #f2f5f7; /* 粗體：淺色模式靠「更黑」強調，深色模式靠「更亮」 */
--k-border: #2f353b;
/* ⚠ 這個值不是照「對比夠不夠」挑的 —— 上一版 #7fb3ff 配頁面底色是 8.39，
早就超過 AAA 的 7.0，但**看起來還是暗**。原因 WCAG 量不到：
連結的相對亮度 0.44，而它周圍的內文字（--k-fg）是 0.70 ——
連結比內文字暗 1.6 倍。深色模式裡內文字是頁面上最亮的東西，
連結比它還暗就會讀起來「沉下去」。
#99c5ff 的亮度 0.54（底對比 10.10、卡片上 9.30），提亮但還留得住藍。
⚠ 不要再往 #b3d4ff 那一階去：亮度 0.64 已經接近內文字，藍味會淡掉，
變成「比較亮的白字」而不是連結。 */
--k-link: #99c5ff;
--k-accent: #e6432a; /* 品牌紅，深淺色共用 */
color-scheme: dark; /* 讓捲軸、表單控制項也跟著變深 */
}
/* ── 底層 ─────────────────────────────────────────────── */
html[data-theme="dark"] body,
html[data-theme="dark"] #page,
html[data-theme="dark"] #content,
html[data-theme="dark"] .site-main,
html[data-theme="dark"] .single-wrapper,
html[data-theme="dark"] .archive-blog-wrapper,
html[data-theme="dark"] #inner-content-wrapper {
background-color: var(--k-bg);
color: var(--k-fg);
}
html[data-theme="dark"] article,
html[data-theme="dark"] .widget-area,
html[data-theme="dark"] .comments-area {
background-color: transparent;
color: var(--k-fg);
}
/* ── 頁首與導覽 ───────────────────────────────────────── */
/* ⚠ 頁首與頁尾**刻意分開寫**：頁首那條橫條的顏色會單獨調（走 --k-header），
頁尾維持最深的 #0f1214。原本兩者併在同一條，改頁首時會連頁尾一起變。 */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-branding-wrapper {
background-color: var(--k-header);
color: var(--k-fg);
}
html[data-theme="dark"] #colophon,
html[data-theme="dark"] .site-footer {
background-color: #0f1214;
color: var(--k-fg);
}
html[data-theme="dark"] .main-navigation,
html[data-theme="dark"] .main-navigation ul ul {
background-color: #0f1214;
}
html[data-theme="dark"] .main-navigation a,
html[data-theme="dark"] .site-title a,
html[data-theme="dark"] .site-description {
color: var(--k-fg);
}
html[data-theme="dark"] .search-field,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] textarea {
background-color: var(--k-surface-2);
border-color: var(--k-border);
color: var(--k-fg);
}
html[data-theme="dark"] ::placeholder {
color: var(--k-fg-dim);
}
/* ── 內文 ─────────────────────────────────────────────── */
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .entry-content p,
html[data-theme="dark"] .entry-content li,
html[data-theme="dark"] .entry-title,
html[data-theme="dark"] .entry-title a,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
color: var(--k-fg);
}
html[data-theme="dark"] .entry-meta,
html[data-theme="dark"] .entry-meta a,
html[data-theme="dark"] .reading-time,
html[data-theme="dark"] .posted-on,
html[data-theme="dark"] figcaption,
html[data-theme="dark"] .wp-element-caption {
color: var(--k-fg-dim);
}
/* ⚠⚠ 上面那條在**文章頁打不贏**，所以這條不是重複，不要「順手合併」。
文章圖片說明另外有一條 `.single-post .entry-content figcaption.wp-element-caption`
（style.css 574，從站台的「額外 CSS」整合進來的），特異度 **(0,3,1)**；
上面那條是 `html[data-theme="dark"] .wp-element-caption`，只有 **(0,2,1)** ——
輸了，於是深色模式下圖片說明維持淺色模式的 `#5a5a5a`。
⚠ 症狀是「字還在、位置也對，只是暗到看不清楚」：對比 **2.61**（AA 要 4.5），
而且 grep 得到上面那條，會以為深色已經處理過了。2026-09-12 使用者回報才發現。
→ 要蓋過 (0,3,1)，這條把 `.single-post .entry-content` 也寫進來，成為 (0,4,2)。 */
html[data-theme="dark"] .single-post .entry-content figcaption.wp-element-caption {
/* --k-fg-dim 對 --k-bg 的對比是 7.02（AAA）；註解本來就該比內文暗一階，
但 #5a5a5a 的 2.61 是「看不見」，不是「低調」。 */
color: var(--k-fg-dim);
}
html[data-theme="dark"] .entry-content a {
color: var(--k-link);
}
html[data-theme="dark"] hr,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .comments-area {
border-color: var(--k-border);
}
/* ── 上面「額外 CSS」那一節的對應深色版 ───────────────── */
/*
* h2／h3 的底色。
*
* ⚠⚠ 這裡**必須寫成 `html[data-theme="dark"] div`，不能只寫 `html[data-theme="dark"]`**。
* 上面那段從額外 CSS 搬來的樣式把變數定義在 `div { --h2-color: … }` 上 ——
* 也就是**每一個 div 都自己定義了一次**。CSS 變數是從「最近的、有定義的祖先」
* 繼承的，`div.entry-content` 本身就是 div，所以它拿到的永遠是那個淺藍值，
* 定義在 `html` 上的深色版根本輪不到。
*
* 踩過（2026-09-09）：深色模式下 h2 變成**淺灰字配淺藍底，等於看不見**，
* 而且 CSS 完全合法、devtools 也不會標成被覆寫 —— 是使用者回報才發現。
*/
html[data-theme="dark"] div {
--h2-color: #1e3a45;
--h3-color: #223038;
}
/* 再直接指定一次底色，不依賴變數解析順序 */
html[data-theme="dark"] div.entry-content h2 {
background-color: #1e3a45;
color: #eaf4f8;
}
html[data-theme="dark"] div.entry-content h3 {
border-bottom-color: var(--k-border);
}
/* 行內 code */
html[data-theme="dark"] p > code {
background-color: var(--k-surface-2);
color: #e8c9a0;
}
/* 表格 */
html[data-theme="dark"] .wp-block-table table,
html[data-theme="dark"] figure.wp-block-table td,
html[data-theme="dark"] .wp-block-table th {
border-color: var(--k-border);
color: var(--k-fg);
}
html[data-theme="dark"] .my-table > table th,
html[data-theme="dark"] .wp-block-table table thead tr th {
background-color: var(--k-surface-2);
color: var(--k-fg);
}
/* 引言 */
html[data-theme="dark"] blockquote.wp-block-quote {
border-color: var(--k-border);
color: var(--k-fg-dim);
}
/* 標籤（膠囊） */
html[data-theme="dark"] .entry-meta .tags-links a {
background: var(--k-surface-2);
border-color: var(--k-border);
color: var(--k-fg);
}
html[data-theme="dark"] .entry-meta .tags-links a:hover,
html[data-theme="dark"] .entry-meta .tags-links a:focus {
background: #2b3238;
border-color: #444c53;
color: #fff;
}
/* 目錄外掛 */
html[data-theme="dark"] div#ez-toc-container,
html[data-theme="dark"] .ez-toc-title-container {
background: var(--k-surface);
border-color: var(--k-border);
}
html[data-theme="dark"] li > a.ez-toc-link {
color: var(--k-link) !important;
}
/* 廣告：白底方塊在深色頁面上非常突兀，改成表面色 */
html[data-theme="dark"] ins.adsbygoogle {
background-color: var(--k-surface);
}
html[data-theme="dark"] .m-box-shadow {
box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .m-box-shadow figcaption {
border-top-color: var(--k-border);
}
/* 文章內圖片的柔和陰影在深色下要更深才看得出來 */
html[data-theme="dark"] .single-post .entry-content img {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.45),
0 8px 12px rgba(0, 0, 0, 0.35);
}
/*--------------------------------------------------------------
# 切換鈕（放在主選單最後）
--------------------------------------------------------------*/
/* ⚠ 選擇器要含 tag 與 `.menu-item`：parent 用 `.nav-menu li { display:inline-block }`
之類的規則把 li 釘住，單一 class 的 (0,1,0) 打不贏，`display:flex` 會靜靜地無效。 */
li.menu-item.klab-theme-toggle-item {
display: inline-flex;
align-items: center;
/* 選單列的 高 64px（18px padding ＋ 28px 行高），這個 li 只有鈕的 38px。
inline-block 預設 `vertical-align: baseline`，而沒有行內文字的 inline-block
是拿**下緣**當基線 —— 結果鈕會比鄰居的文字高 2px。
⚠ 2px 說不出哪裡怪，但看起來就是沒對齊。
改成靠上對齊、上下各補 (64 − 38) ÷ 2 = 13px。
⚠ 13 這個數字跟著 parent 的選單 padding 走，parent 改版要回來量一次
（量法：scripts/contrast-audit.js 旁邊那組 CDP 腳本，比鈕與鄰居 的中心 y）。 */
vertical-align: top;
padding: 13px 0;
}
/* ⚠ 選擇器要寫成 `button.klab-theme-toggle`（含 tag），不能只寫 class ——
上面從「額外 CSS」搬進來的那段有 `.second-design button { color:#1E2E4F }`，
特異度 (0,1,1) 比單一 class 的 (0,1,0) 高。只寫 class 的話這裡的 color 不會生效，
而且畫面上只看得出「切換鈕看不見」，看不出是誰蓋的。 */
button.klab-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
/* 圖示本身就是鈕，不畫外框 —— 旁邊都是純文字選單，
多一圈 38px 的圓框只會讓它看起來像個異物。hover 才浮出淡底。 */
border: 0;
border-radius: 10px;
background: transparent;
/* ⚠ 不要寫 `color: inherit`：它繼承的是 ，而選單的白色是設在 上的，
結果會拿到 theme 的預設 #1e2e4f，配 #202020 的選單列對比 1.22，等於看不見。 */
color: #fff;
cursor: pointer;
line-height: 1;
/* ⚠ 不要小於 38px：手指點得到的最小尺寸。圖示只有 18px，
鈕面積跟圖示大小是兩件事，不要因為拿掉框就一起縮。 */
}
button.klab-theme-toggle:hover,
button.klab-theme-toggle:focus-visible {
background: rgba(255, 255, 255, 0.14);
}
/* 點下去會冒出一圈虛線框 —— 那是 parent 的
* `button:focus, …, button:active { border-color:…; outline: thin dotted }`（0,1,1）。
* ⚠ 不是 border：我們的 `border: 0` 已經把寬度壓成 0，畫面上那圈是 **outline**。
* 只盯著 border 找會找不到東西，要量 `outline-style`（見下面的量法）。
* ⚠ `:active` 也要寫。parent 那條把 `:focus` 與 `:active` 併在同一組，
* 而 `:active` 不隱含 `:focus` —— 只關掉 `:focus` 的話，
* **按住滑鼠不放的那一瞬間**虛線框還是會閃出來。
* ⚠ 特異度：`button.klab-theme-toggle:focus` 是 (0,2,1)，贏過 parent 的 (0,1,1)。
* 少寫 tag 的話是 (0,2,0)，跟 parent 同分、靠載入順序決定，很脆。 */
button.klab-theme-toggle:focus,
button.klab-theme-toggle:active {
outline: 0;
}
/* ⚠⚠ 不可以只寫上面那條就收工。 用鍵盤 Tab 的人**只剩焦點框可以看**，
* 拿掉等於他不知道自己選到哪裡。滑鼠點的時候瀏覽器不會讓按鈕符合
* `:focus-visible`，鍵盤過來才會 —— 所以「點了沒框、Tab 有框」是同時成立的。
* ⚠ 只靠上面那個 hover 底色當焦點提示不夠：#202020 疊 14% 白只到 #3F3F3F，
* 前後對比 1.62，WCAG 2.2 的 2.4.11 要 3.0。要真的畫一圈。
* ⚙ 2px 是 2.4.11 的最低厚度，offset 2px 讓它離開鈕面、不跟圖示黏在一起。
* 用 currentColor：桌機選單列是白字 → 白框；手機淺色選單是 #333 → 深框。 */
button.klab-theme-toggle:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* 圖示用 CSS 畫，不依賴字型圖示 —— parent 的 Font Awesome 哪天換掉也不會變空白 */
.klab-theme-toggle__icon {
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
background: currentColor;
transition: box-shadow 0.25s ease, width 0.25s ease, height 0.25s ease;
}
/* 淺色模式時顯示「月亮」＝點了會變深色。
* ⚙ 這邊寫了八道透明的 box-shadow，看起來多餘 —— 它們是給下面太陽光芒插值用的。
* 寫 `none` 的話 `none → 八道陰影` 不能插值，切換會硬跳。 */
html:not([data-theme="dark"]) .klab-theme-toggle__icon {
background: radial-gradient(circle at 70% 35%, transparent 55%, currentColor 56%);
box-shadow:
0 -9.5px 0 -3px transparent, 0 9.5px 0 -3px transparent,
-9.5px 0 0 -3px transparent, 9.5px 0 0 -3px transparent,
6.72px 6.72px 0 -3px transparent, -6.72px 6.72px 0 -3px transparent,
6.72px -6.72px 0 -3px transparent, -6.72px -6.72px 0 -3px transparent;
}
/* 深色模式時顯示「太陽」＝點了會變淺色。
* ⚠ 不要只留實心圓 —— 沒有光芒的圓點讀起來是 radio 鈕，不是太陽，
* 而且跟淺色模式的月牙視覺重量差很多，切換時會「跳」。
* ⚙ 光芒間距要算：圓心直徑 9 → 半徑 4.5；光芒點直徑 = 9 + 2×(-3) = 3，
* 中心距離 9.5 → 內緣 8，空隱 3.5px。拉太近會糊成一團（踩過）。
* 斜向的偏移是 9.5 / √2 = 6.72。 */
html[data-theme="dark"] .klab-theme-toggle__icon {
width: 9px;
height: 9px;
background: currentColor;
box-shadow:
0 -9.5px 0 -3px currentColor, 0 9.5px 0 -3px currentColor,
-9.5px 0 0 -3px currentColor, 9.5px 0 0 -3px currentColor,
6.72px 6.72px 0 -3px currentColor, -6.72px 6.72px 0 -3px currentColor,
6.72px -6.72px 0 -3px currentColor, -6.72px -6.72px 0 -3px currentColor;
}
/* ── 深色模式：第二輪修正（截圖看出來的）───────────────────
* 第一版漏了三片白：html 本身、側邊欄的 widget、以及區塊編輯器產生的
* wp-block-* 容器。⚠ 這些都不是 parent 的 class，是 WordPress 區塊自己的，
* 只覆寫 parent 的選擇器不會蓋到。
* ------------------------------------------------------------ */
html[data-theme="dark"] {
/* 只設 body 的話，捲到底或視窗比內容寬時會露出瀏覽器的預設底色 */
background-color: var(--k-bg);
}
html[data-theme="dark"] .widget,
html[data-theme="dark"] .widget_block,
html[data-theme="dark"] .wp-block-group,
html[data-theme="dark"] .wp-block-group__inner-container,
html[data-theme="dark"] .wp-block-search,
html[data-theme="dark"] div#ez-toc-container {
background-color: var(--k-surface);
color: var(--k-fg);
border-color: var(--k-border);
}
html[data-theme="dark"] .widget-title,
html[data-theme="dark"] .wp-block-heading,
html[data-theme="dark"] .wp-block-search__label {
color: var(--k-fg);
}
html[data-theme="dark"] .widget a,
html[data-theme="dark"] .wp-block-latest-posts a,
html[data-theme="dark"] .wp-block-latest-posts__post-title {
color: var(--k-link);
}
html[data-theme="dark"] .wp-block-search__input {
background-color: var(--k-surface-2);
border-color: var(--k-border);
color: var(--k-fg);
}
html[data-theme="dark"] .wp-block-search__button,
html[data-theme="dark"] .wp-element-button {
background-color: var(--k-surface-2);
border-color: var(--k-border);
color: var(--k-fg);
}
/* 標籤雲：**不要**給它底色。
*
* ⚠⚠ 這裡原本有一組規則，給每個標籤一塊 `var(--k-surface-2)` 的底，
* 註解寫「白底小方塊在深色下最刺眼」—— **那個前提是錯的**。
* parent 根本沒有為標籤雲上任何色（`grep tag-cloud-link parent 的 style.css` 是空的），
* 淺色模式量出來 `background-color` 就是 `transparent`。
* 等於深色模式**自己憑空生出一塊底**，而且 `padding` 是 0 —— 色塊緊貼著字，
* 看起來像沒切乾淨的反白，跟旁邊的連結完全不協調。使用者回報後才發現。
*
* ⚠ 教訓：寫深色覆寫之前，先**量淺色模式實際長什麼樣**，
* 不要照「它在別的 theme 應該是白的」去推。深色模式是覆寫層，
* 沒有東西可覆寫的時候就不該寫。
*
* 顏色與 hover 都不必另外寫：`#secondary .widget a`（連結色）與
* `#secondary .widget a:hover`（深→#fff、淺→品牌紅）本來就蓋得到它們。
*/
/* 目錄外掛的內層與標題 */
html[data-theme="dark"] div#ez-toc-container .ez-toc-title,
html[data-theme="dark"] div#ez-toc-container nav ul li a {
color: var(--k-fg);
}
html[data-theme="dark"] div#ez-toc-container .ez-toc-list ul {
background: transparent;
}
/* 廣告：外框跟著暗，但 ins 本身留白 —— 廣告內容多半是為白底設計的 */
/*
* 廣告：素材多半為白底設計，所以填充到廣告時給白底；
* ⚠ 但**沒填充到的時候不能給白底** —— 深色頁面上會出現一整塊白色大方塊。
* Google 的 script 會在 上標 data-ad-status，用它區分。
*/
html[data-theme="dark"] ins.adsbygoogle[data-ad-status="filled"] {
background-color: #fff;
border-radius: 6px;
}
html[data-theme="dark"] ins.adsbygoogle[data-ad-status="unfilled"] {
display: none;
}
/* ── 深色模式：第三輪修正 ────────────────────────────────
* ① 頁首的灰色不是 .site-header 畫的，是它裡面的 .header-image
* （帶一個空的 inline background-image）與 .site-branding-container 蓋上去的。
* ② 側邊欄仍有零星白色區塊 —— parent 與區塊編輯器的容器太多、
* 一個一個猜會沒完，改成「側邊欄內的容器一律透明，白底只留給 .widget 本身」。
* ------------------------------------------------------------ */
/* ⚠ `header#masthead` (1,1,2) **打不贏** parent 的
* `.lite-version.default-design #masthead { background:#fff }` (1,2,0)：
* 同樣一個 id，但對方多一個 class。所以要補 `body.lite-version` 湊到 (1,2,2)。
* ⚠ 這條在畫面上完全看不出來 —— 桌機時 `.site-branding-container` 疊在上面、
* 剛好也是深色，白底被蓋住了。是量 computed background 才發現它一直沒生效。 */
html[data-theme="dark"] .site-branding-container,
html[data-theme="dark"] .header-image,
html[data-theme="dark"] .site-branding-wrapper,
html[data-theme="dark"] body.lite-version header#masthead,
html[data-theme="dark"] header#masthead {
/* 只覆寫顏色，不動 background-image —— 使用者哪天設了頁首圖還是要顯示 */
background-color: var(--k-header);
}
html[data-theme="dark"] .header-image > .overlay {
background-color: transparent;
}
/* （第三輪的側邊欄掃描已移除，見下方說明）*/
/* ── 深色模式：側邊欄與表單（特異度之戰）──────────────────
* parent 有這條：
* body.single.lite-version #secondary .widget { background-color: #fff }
* 特異度 (1,4,1)。深色模式的規則只有 (0,2,1)，所以側邊欄一直是白的
* —— 而且**畫面上只看得出「白」，看不出是誰畫的**，是逐條比對 parent 的
* CSS 才找到的。
*
* ⚠ 這裡用 !important，不去湊更長的選擇器：對方的選擇器鏈（body.single…、
* body.blog…、.lite-version…）會隨版本變，比特異度是追不完的。
* 深色模式本來就是覆寫層，用 !important 是這一層該有的權重。
* ------------------------------------------------------------ */
html[data-theme="dark"] #secondary .widget,
html[data-theme="dark"] .widget-area .widget {
background-color: var(--k-surface) !important;
color: var(--k-fg) !important;
}
html[data-theme="dark"] #secondary .widget h2,
html[data-theme="dark"] #secondary .widget .wp-block-heading,
html[data-theme="dark"] #secondary .widget .widget-title,
html[data-theme="dark"] #secondary .widget .wp-block-search__label {
color: var(--k-fg) !important;
}
html[data-theme="dark"] #secondary .widget a {
color: var(--k-link) !important;
}
/* parent 也把全站的輸入框、pre、blockquote、留言釘成白底 */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] .wp-block-search__input {
background-color: var(--k-surface-2) !important;
border-color: var(--k-border) !important;
color: var(--k-fg) !important;
}
html[data-theme="dark"] blockquote,
html[data-theme="dark"] .comment-content,
html[data-theme="dark"] .navigation.post-navigation,
html[data-theme="dark"] .navigation.posts-navigation {
background-color: var(--k-surface) !important;
color: var(--k-fg) !important;
}
/* ⚠ 程式碼區塊不要碰 —— 它的底色是 Prism 佈景在管的，
* 覆寫掉的話語法高亮的對比會壞掉。 */
html[data-theme="dark"] pre:not(.wp-block-code) {
background-color: var(--k-surface) !important;
color: var(--k-fg) !important;
}
/* ── 深色模式：第四輪修正（parent 把文字釘成 #000 的地方）──────────
*
* 症狀：深色底上出現**整段黑字**——粗體、作者、日期、上一篇／下一篇標題、
* 瀏覽次數。前三輪修的是「白色的面」，這一輪修的是「黑色的字」。
*
* 原因：parent 有兩條超長的選擇器清單把文字釘死成 #000，例如
* .lite-version, .lite-version h1 … .lite-version b, .lite-version strong … { color:#000 }
* .lite-version .posted-on a, … .lite-version .entry-meta > span { color:#000 }
* ⚠ `lite-version` 這個 body class 是**我們自己加的**（沿用 lite 的版面），
* 所以這些規則一定會命中，不是意外。
*
* 特異度：對方 (0,2,0)～(0,3,1)，而 `html[data-theme="dark"] X` 只有 (0,2,1)，
* 又排在 parent 之後同分時才贏 —— 追不完。照這個檔上面已經定下的做法用
* `!important`：深色模式本來就是覆寫層。
*
* ⚠ 程式碼區塊（`pre.wp-block-code`／`code`／`.token`）一律不碰，
* 那是 Prism 佈景在管的，碰了語法高亮的配色就壞了。
* ------------------------------------------------------------ */
/* ① 粗體 —— 使用者最先看到的那一塊 */
html[data-theme="dark"] b,
html[data-theme="dark"] strong {
color: var(--k-fg-strong) !important;
}
/* 連結裡的粗體要跟著連結的顏色走，不然變成亮白字看起來不像連結 */
html[data-theme="dark"] a b,
html[data-theme="dark"] a strong {
color: inherit !important;
}
/* ② 文章的 meta（作者、日期、分類、瀏覽次數…）
* ⚠ `.entry-meta > span` 這一條也順便蓋掉第三方外掛塞進來的
* ``。 */
html[data-theme="dark"] .entry-meta,
html[data-theme="dark"] .entry-meta > span,
html[data-theme="dark"] .entry-meta a,
html[data-theme="dark"] .entry-meta > span a,
html[data-theme="dark"] .entry-meta time,
html[data-theme="dark"] .byline,
html[data-theme="dark"] .byline a,
html[data-theme="dark"] .byline i,
html[data-theme="dark"] .posted-on,
html[data-theme="dark"] .posted-on a,
html[data-theme="dark"] .author.vcard a,
html[data-theme="dark"] .comments-link a,
html[data-theme="dark"] .reading-time {
color: var(--k-fg-dim) !important;
}
html[data-theme="dark"] .entry-meta a:hover,
html[data-theme="dark"] .entry-meta a:focus,
html[data-theme="dark"] .byline a:hover,
html[data-theme="dark"] .byline a:focus,
html[data-theme="dark"] .posted-on a:hover,
html[data-theme="dark"] .posted-on a:focus,
html[data-theme="dark"] .author.vcard a:hover,
html[data-theme="dark"] .author.vcard a:focus {
color: var(--k-fg) !important;
}
/* ⚠ 標籤膠囊也長在 .entry-meta 底下，會被上面那條 !important 蓋成暗灰。
* 它在這個檔更前面就設過一次（沒有 !important），所以要在這裡再宣告一次。 */
html[data-theme="dark"] .entry-meta .tags-links a {
color: var(--k-fg) !important;
}
html[data-theme="dark"] .entry-meta .tags-links a:hover,
html[data-theme="dark"] .entry-meta .tags-links a:focus {
color: #fff !important;
}
/* ③ 標題連結（首頁／彙整頁的文章標題，parent 釘成 #000） */
html[data-theme="dark"] .entry-title,
html[data-theme="dark"] .entry-title a {
color: var(--k-fg) !important;
}
/* ④ 上一篇／下一篇：黑字寫在 上，標題文字包在裡面的 靠繼承 */
html[data-theme="dark"] .navigation.post-navigation a,
html[data-theme="dark"] .navigation.posts-navigation a,
html[data-theme="dark"] .navigation.post-navigation a span,
html[data-theme="dark"] .navigation.posts-navigation a span {
color: var(--k-fg) !important;
}
/* ⑤ 所有連結的 hover／focus —— parent 寫的是 `a:hover{color:#000}`，
* 深色模式下滑過去等於字消失。這條在截圖上永遠看不到，只有真的滑過才會遇到。 */
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus,
html[data-theme="dark"] a:active {
color: #fff !important;
}
/* ⑥ 主選單：子選單與「目前所在」的項目是 #333，深色頁首上幾乎看不見。
* ⚠ 子選單平常 display:none，截圖與對比度掃描都掃不到。 */
html[data-theme="dark"] .main-navigation a,
html[data-theme="dark"] .main-navigation ul.nav-menu > li > a,
html[data-theme="dark"] .main-navigation ul.sub-menu li a,
html[data-theme="dark"] .main-navigation .current_page_item > a,
html[data-theme="dark"] .main-navigation .current-menu-item > a,
html[data-theme="dark"] .main-navigation .current_page_ancestor > a,
html[data-theme="dark"] .main-navigation .current-menu-ancestor > a {
color: var(--k-fg) !important;
}
/* ⑦ 留言區與留言表單 */
html[data-theme="dark"] .comment-content,
html[data-theme="dark"] .comment-content p,
html[data-theme="dark"] .comment-meta .fn,
html[data-theme="dark"] #respond label,
html[data-theme="dark"] cite {
color: var(--k-fg) !important;
}
html[data-theme="dark"] .comment a,
html[data-theme="dark"] .comment-meta .url,
html[data-theme="dark"] .comment-metadata a,
html[data-theme="dark"] .comment-metadata a time {
color: var(--k-link) !important;
}
/* ⑧ 表格表頭、頁籤、副標 */
html[data-theme="dark"] table th,
html[data-theme="dark"] ul.tabs li a,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .section-subtitle a {
color: var(--k-fg) !important;
}
/* ⑧-2 分頁的數字方塊
*
* ⚠ 這裡**不能只改文字顏色**：parent 把方塊畫成 `background-color:#fff`，
* 只把字改成淺灰就變成「淺灰字配白底」（對比 1.39），比原本的黑字還糟。
* 踩過 —— 第一版只寫了 color，是掃首頁的對比度才發現的，文章頁沒有分頁所以掃不到。
*/
html[data-theme="dark"] .pagination .page-numbers {
background-color: var(--k-surface-2) !important;
border-color: var(--k-border) !important;
color: var(--k-fg) !important;
}
/* 目前這一頁與滑過的那一顆維持品牌紅底白字（跟淺色模式一樣） */
html[data-theme="dark"] .pagination .page-numbers.current,
html[data-theme="dark"] .pagination .page-numbers:hover,
html[data-theme="dark"] .pagination .page-numbers:focus {
background-color: var(--k-accent) !important;
border-color: var(--k-accent) !important;
color: #fff !important;
}
/* ⑨ 側邊欄 widget 裡被單獨釘成 #000 的時間戳與編號
* （`#secondary .widget a` 那條蓋不到，因為黑色是設在