/*
 * 給客人的頁面共用樣式「墨」（2026-11-03）。
 *
 * 照原研哉派設計基礎學系的介面規範（AI資料庫/原研哉派設計基礎學系/08_介面規範.html）。
 * 2026-11-03 站長選白色：紙是米白、字是墨，規範的其他規則不變。
 *   減到不能再減：沒有卡片陰影、沒有圓角、沒有第二種按鈕、沒有第二種彩色。
 *   留白是結構：不用框線把東西包起來，用間距和一條罫線分開。
 *   紙和字：底是白紙，輸入欄比紙深一階，正在寫的那一格再深一階。
 *   一枚朱印：朱色只標「現在」與出錯，其他地方不准出現。
 * 字型用 jf 金萱 4.0（站長 2026-11-03 指定，跟後台一致），缺字退思源黑體。
 * 主站（首頁、文章）不套用這一份。
 *
 * 用法：<link href="/assets/fonts/jinxuan/jinxuan.css" rel="stylesheet"><link href="/assets/ink.css" rel="stylesheet">
 * 頁面自己的樣式寫在後面，只用這裡的變數，不要再寫色碼。
 */
:root{
  --paper:#F7F6F2; --paper-2:#EEEDE8; --paper-3:#E4E3DD;
  --ink:#1B1B1A; --ink-2:#45443F; --ink-3:#73726C; --ink-4:#A2A19A; --on-ink:#F7F6F2;
  --line:#E1E0DA; --line-2:#CBCAC3;
  --seal:#C0442E;
  --font:"jf-jinxuan","Noto Sans TC","PingFang TC",sans-serif;
  --t-3xl:44px; --t-2xl:30px; --t-xl:22px; --t-lg:18px; --t-md:15.5px; --t-base:14.5px; --t-sm:12.5px; --t-xs:11px;
  color-scheme:light;
}
html{background:var(--paper)}
/* 各頁原本為黑底把黑色 logo 反白（filter:invert），白底不用 */
.ink img[src*="logo-mark"]{filter:none!important}
@media (max-width:560px){:root{--t-3xl:32px;--t-2xl:26px;--t-xl:20px}}

.ink, body.ink{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--t-base);font-weight:400;
  line-height:1.95;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
.ink .num,.ink .mono{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}

/* 章節眉：小字、字距大、墨三 */
.ink .eyebrow{font-size:var(--t-xs);letter-spacing:.24em;color:var(--ink-3)}
/* 標題：細、加字距，不靠粗體 */
.ink .title{font-size:var(--t-2xl);font-weight:400;letter-spacing:.06em;line-height:1.45}

/* 主要按鈕：墨底紙字，方角，一頁最多一個 */
.ink .btn-main{display:block;width:100%;text-align:center;background:var(--ink);color:var(--on-ink);border:1px solid var(--ink);border-radius:0;
  font-family:inherit;font-size:var(--t-md);font-weight:400;letter-spacing:.14em;padding:16px 18px;text-decoration:none;cursor:pointer}
.ink .btn-main:hover{background:#000;border-color:#000}
.ink .btn-main:active{transform:translateY(1px)}
.ink .btn-main:disabled{background:transparent;color:var(--ink-4);border-color:var(--line-2);cursor:not-allowed;transform:none}
/* 文字動作：導覽、次要的事。滑過出現底線，不變色 */
.ink .btn-text{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;color:var(--ink-2);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:5px}
.ink .btn-text:hover{text-decoration-color:var(--ink-3);color:var(--ink)}
.ink :focus-visible{outline:1px solid var(--ink);outline-offset:3px}
/* 輸入欄的焦點靠「紙三底＋下緣字色線」表現，不再加外框（規範：整頁只有正在寫的那一格是亮的） */
.ink input:focus-visible,.ink textarea:focus-visible,.ink select:focus-visible{outline:none}
.ink .btn-main,.ink .in,.ink .opt{box-sizing:border-box}

/* 輸入欄：紙二底，只有下緣一條罫線。正在寫的那一格紙三底、下緣變字色 */
.ink .in{width:100%;background:var(--paper-2);color:var(--ink);border:0;border-bottom:1px solid var(--line-2);border-radius:0;
  font-family:inherit;font-size:16px;letter-spacing:.04em;padding:12px 14px;outline:none;transition:background .15s,border-color .15s}
.ink .in:hover{background:var(--paper-3)}
.ink .in:focus{background:var(--paper-3);border-bottom-color:var(--ink)}
.ink .in.bad{border-bottom-color:var(--seal)}
.ink ::placeholder{color:var(--ink-4)}
.ink .lbl{display:block;font-size:var(--t-sm);color:var(--ink-3);letter-spacing:.08em;margin-bottom:4px}
.ink .err{color:var(--seal);font-size:var(--t-sm)}

/* 選項：方框，選到的那個字變亮、下緣一條字色線 */
.ink .opt{border:1px solid var(--line-2);background:transparent;color:var(--ink-3);border-radius:0;font-family:inherit;cursor:pointer}
.ink .opt:hover{color:var(--ink-2);background:var(--paper-2)}
.ink .opt.on{color:var(--ink);background:var(--paper-3);border-color:var(--ink-3)}

/* 勾選：13px 方框，墨三邊；已勾墨底 */
.ink input[type=checkbox],.ink input[type=radio]{accent-color:var(--ink)}

/* 罫線 */
.ink hr,.ink .rule{border:0;border-top:1px solid var(--line);margin:48px 0}

/* LINE 綠：會打開 LINE 的按鈕一律用 LINE 的綠色（站長 2026-11-03：客人要一眼認得出是 LINE） */
:root{--line-green:#06C755}
.ink .btn-line,.ink .btn-main.btn-line,.ink .btn.submit.btn-line,.ink .btn-go.btn-line{background:var(--line-green)!important;border-color:var(--line-green)!important;color:#fff!important;text-decoration:none!important}
.ink .btn-line:hover{background:#05B04C!important;border-color:#05B04C!important}
.ink a.btn-line.manual{display:flex;align-items:center;justify-content:center;padding:14px 20px;margin-top:16px}
.ink a.btn-line.manual span{color:#fff!important;text-decoration:none!important}


/* 格子裡的提示字（ex: …）是全頁最小的字，一定比題目說明小（站長 2026-11-03）。
   輸入框本身維持 16px，iPhone 才不會自動放大畫面；只縮提示字。 */
.ink ::placeholder,.ink ::-webkit-input-placeholder{font-size:var(--t-xs)!important;letter-spacing:.04em;line-height:1.9}