/* =====================================================================
器傳 QICHUAN — Base Theme (純 HTML 工具用)
---------------------------------------------------------------------
依賴 tokens.css，請在它之後載入：
提供：reset、基本排版、共用元件 class（.qc-*）。
所有顏色一律取自 token → 自動支援深色模式（）。
===================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--qc-font-sans);
background: var(--qc-bg);
color: var(--qc-text);
line-height: 1.6;
font-size: 16px;
transition: background-color .25s ease, color .25s ease;
}
/* 數字、單位、程式碼用等寬字 */
.qc-mono, code, kbd { font-family: var(--qc-font-mono); }
/* ---- 版面容器 ---- */
.qc-container {
width: 100%;
max-width: var(--qc-container);
margin: 0 auto;
padding: 0 var(--qc-space-6);
}
/* ---- 頁首（每個工具頁都放這個，含返回主頁）---- */
.qc-header {
background: var(--qc-header-bg);
color: var(--qc-header-fg);
padding: var(--qc-space-4) 0;
box-shadow: var(--qc-shadow);
}
.qc-header .qc-container {
display: flex;
align-items: center;
gap: var(--qc-space-4);
}
.qc-brand {
display: flex;
align-items: center;
gap: var(--qc-space-3);
color: var(--qc-header-fg);
text-decoration: none;
font-weight: 700;
}
.qc-brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
background: #fff;
color: var(--qc-header-bg);
border-radius: var(--qc-radius-sm);
font-size: 22px;
font-weight: 700;
}
.qc-header h1 { font-size: 18px; font-weight: 600; }
.qc-header .qc-sub { color: var(--qc-header-accent); font-size: 13px; font-family: var(--qc-font-mono); letter-spacing: 2px; }
.qc-header-spacer { margin-left: auto; }
/* 返回主頁連結（藍色舊頁首用）*/
.qc-back {
color: var(--qc-header-accent);
text-decoration: none;
font-size: 14px;
}
.qc-back:hover { color: #fff; }
/* =====================================================================
輕量頁首 qc-topbar（主頁同款，**推薦工具頁使用**，取代藍色 .qc-header）
結構：左邊「器傳 / QICHUAN」浮水印，右邊 chip(工具名) + 切換鈕 + 回工具集。
===================================================================== */
.qc-topbar { background: var(--qc-bg); border-bottom: 1px solid var(--qc-border); }
.qc-topbar .qc-container { display: flex; align-items: center; gap: var(--qc-space-4); padding-top: var(--qc-space-4); padding-bottom: var(--qc-space-4); }
.qc-wm { display: flex; align-items: baseline; gap: var(--qc-space-3); text-decoration: none; }
.qc-wm .mark { font-size: 24px; font-weight: 700; letter-spacing: .04em; color: var(--qc-text); }
.qc-wm .en { font-family: var(--qc-font-mono); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--qc-text-subtle); }
.qc-actions { margin-left: auto; display: flex; align-items: center; gap: var(--qc-space-3); }
.qc-chip { font-family: var(--qc-font-mono); font-size: 12px; color: var(--qc-text-muted); border: 1px solid var(--qc-border); border-radius: var(--qc-radius-pill); padding: 6px 13px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.qc-chip .qc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--qc-primary); display: inline-block; }
.qc-linkback { font-family: var(--qc-font-mono); font-size: 13px; color: var(--qc-text-muted); text-decoration: none; }
.qc-linkback:hover { color: var(--qc-primary); }
/* 深淺色切換鈕（搭配 index.html 的 inline script 與 toggle 邏輯）*/
.qc-toggle { font-family: var(--qc-font-mono); font-size: 12px; color: var(--qc-text-muted); background: transparent; border: 1px solid var(--qc-border); border-radius: var(--qc-radius-pill); padding: 7px 12px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; transition: border-color .15s, color .15s; }
.qc-toggle:hover { border-color: var(--qc-primary); color: var(--qc-primary); }
.qc-toggle svg { width: 14px; height: 14px; }
.qc-toggle .moon { display: none; }
html[data-theme="dark"] .qc-toggle .sun { display: none; }
html[data-theme="dark"] .qc-toggle .moon { display: inline; }
/* ---- 主內容區 ---- */
.qc-main { padding: var(--qc-space-8) 0; }
/* ---- 卡片 / 面板 ---- */
.qc-card {
background: var(--qc-surface);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius);
box-shadow: var(--qc-shadow-sm);
padding: var(--qc-space-6);
transition: background-color .25s ease, border-color .25s ease;
}
.qc-card + .qc-card { margin-top: var(--qc-space-6); }
.qc-card-title { font-size: 18px; font-weight: 600; margin-bottom: var(--qc-space-4); }
/* ---- 表單 ---- */
.qc-field { margin-bottom: var(--qc-space-4); }
.qc-label { display: block; font-size: 14px; color: var(--qc-text-muted); margin-bottom: var(--qc-space-2); }
.qc-input, .qc-select {
width: 100%;
font-family: var(--qc-font-mono);
font-size: 15px;
color: var(--qc-text);
background: var(--qc-surface);
border: 1px solid var(--qc-border);
border-radius: var(--qc-radius-sm);
padding: 10px 12px;
transition: border-color .15s, box-shadow .15s;
}
.qc-input:focus, .qc-select:focus {
outline: none;
border-color: var(--qc-primary);
box-shadow: 0 0 0 3px rgba(43, 84, 212, 0.15);
}
/* ---- 按鈕 ---- */
.qc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--qc-space-2);
font-family: var(--qc-font-sans);
font-size: 15px;
font-weight: 600;
padding: 10px 20px;
border: 1px solid transparent;
border-radius: var(--qc-radius-sm);
cursor: pointer;
transition: background .15s, border-color .15s;
}
.qc-btn-primary { background: var(--qc-primary); color: #fff; }
.qc-btn-primary:hover { background: var(--qc-primary-hover); }
.qc-btn-ghost { background: transparent; color: var(--qc-primary); border-color: var(--qc-border); }
.qc-btn-ghost:hover { border-color: var(--qc-primary); }
/* ---- 結果 / 數據顯示 ---- */
.qc-result {
background: var(--qc-primary-soft);
color: var(--qc-primary-ink);
border-radius: var(--qc-radius);
padding: var(--qc-space-4) var(--qc-space-6);
}
.qc-result-value { font-family: var(--qc-font-mono); font-size: 28px; font-weight: 700; }
.qc-result-label { font-size: 13px; color: var(--qc-text-muted); }
/* ---- 標籤 ---- */
.qc-tag {
display: inline-block;
background: var(--qc-primary-soft);
color: var(--qc-primary-ink);
font-size: 12px;
font-family: var(--qc-font-mono);
padding: 2px 10px;
border-radius: var(--qc-radius-pill);
}
/* ---- 圖示磚（線條 SVG 專用容器；禁用外來圖片，見 DESIGN.md）---- */
.qc-tile {
width: 54px; height: 54px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--qc-primary-tint);
border: 1px solid var(--qc-primary-tint-2);
border-radius: 13px;
color: var(--qc-primary);
}
.qc-tile svg { width: 28px; height: 28px; }
/* ---- 頁尾 ---- */
.qc-footer {
text-align: center;
color: var(--qc-text-muted);
font-size: 13px;
padding: var(--qc-space-8) 0;
}
/* ---- RWD ---- */
@media (max-width: 640px) {
.qc-container { padding: 0 var(--qc-space-4); }
.qc-header h1 { font-size: 16px; }
.qc-card { padding: var(--qc-space-4); }
}