/* ============================================================
   tx-rwd.css - 個人網群主樣式表 (2026-02-19 版)
   整合項目：原始視覺遺產 + 現代定錨修正 + 變數管理系統
   ============================================================ */

/* --- [1] 根目錄變數與行為定義 --- */
:root {
  /* 定義變數必須使用 -- 開頭 */
  --color-strong-yellow: #FFFF00; /* 強黃：用於邊框、方框、Banner 文字 */
  --color-soft-yellow:   #FFFFF0; /* 淺黃：用於表格底色，保護視力 */
  --brand-orange:        #FF5722; /* 品牌橘：用於定錨左側指引線 */
  
  /* 核心行為：修正定錨跳轉位移 (90px) */
  scroll-padding-top: 90px;
  scroll-behavior: smooth;
}

/* --- [2] 定錨跳轉動畫劇本 --- */
@keyframes flash-and-fade {
  0%   { background-color: var(--color-strong-yellow); } /* 跳轉瞬間強黃閃爍 */
  100% { background-color: transparent; }
}

/* 當標題成為定錨目標時自動執行 */
:target {
  animation: flash-and-fade 2s ease-out;
  border-left: 5px solid var(--brand-orange);
}

/* --- [3] 基礎元素設定 (完整保留) --- */
body { 
  font-family: "Times New Roman", "標楷體"; 
  font-size: 18px; 
  background-image: url('-cache/TxBackG.gif'); 
}
p { 
  font-size: 18px; 
  font-family: "Times New Roman", "標楷體"; 
}

/* --- [4] 標題系統 (原始設定與自適應字級) --- */
h1 { font-size: clamp(18px, 2.5vw, 40px); color: #000080; font-weight: bold; font-family:"Arial Narrow","Trebuchet MS","微軟正黑體"; margin-bottom: 4px; margin-top: 0; font-stretch: condensed; }
h2 { font-size: clamp(18px, 2.25vw, 36px); color: #000099; font-weight: bold; font-family:"Arial Narrow","Trebuchet MS","微軟正黑體"; margin-bottom: 4px; margin-top: 0; }
h3 { font-size: clamp(18px, 2vw, 32px); color: #0000b3; font-weight: bold; font-family:"Arial Narrow","Trebuchet MS","微軟正黑體"; margin-bottom: 4px; margin-top: 0; }
h4 { font-size: clamp(18px, 1.75vw, 28px); color: #0000cc; font-weight: bold; font-family:"Arial Narrow","Trebuchet MS","微軟正黑體"; margin-bottom: 4px; margin-top: 0; }
h5 { font-size: clamp(18px, 1.5vw, 24px); color: #0000e6; font-weight: bold; font-family:"Arial Narrow","Trebuchet MS","微軟正黑體"; margin-bottom: 4px; margin-top: 0; }
h6 { font-size: clamp(18px, 1.25vw, 20px); color: #0000ff; font-weight: bold; font-family:"Arial Narrow","Trebuchet MS","微軟正黑體"; margin-bottom: 4px; margin-top: 0; }

/* --- [5] 表格自動化系統 --- */
table { margin-top:10px; margin-bottom:10px; border-collapse: collapse; }
th { font-size: 20px; font-family:"Arial Narrow","Trebuchet MS","微軟正黑體"; color: #202020; }

/* 自動隔行變色：奇數行白，偶數行淺黃 (#FFFF99) 
   此規則適用於所有普通表格以及帶有 .double 的表格 
*/
table tr:nth-child(odd)  { background-color: #FFFFFF; }
table tr:nth-child(even) { background-color: var(--color-soft-yellow); }

/* --- [6] 原始 Class 樣式系統 (完整保留) --- */
.present  { font-family:"Arial Narrow","Trebuchet MS","微軟正黑體"; margin-top: 0px; margin-bottom: 8px; margin-right: 2px; color: #202020; }
.hilite   { color: #800080; }
.normal   { font-size:18px; }
.twelve   { font-size:16px; }
.small    { font-size:14px; margin-top: 0; margin-bottom: 0; }

.author   { font-size: 26px; font-family:"Arial Narrow","Trebuchet MS","微軟正黑體"; color: #800080; font-weight: bold; margin-top: 0; margin-bottom: 4px; margin-right:2px; }
.note     { font-size: 16px; font-family:"Arial Narrow","Trebuchet MS","微軟正黑體"; color: #000080; margin-top: 0; margin-bottom: 0px; margin-right:1px; }
.credit   { font-family:"Arial Narrow","Trebuchet MS","微軟正黑體"; font-size: 12px; margin-top: 0px; margin-bottom: 0px; }
.verse    { font-weight: bold; font-style:italic; color: #3300CC; margin-top: 0; margin-bottom: 4px; }
.verse-en { font-family: "Comic Sans MS"; font-style:italic; color: #3300CC; margin-top: 0; margin-bottom: 4px; }
.caption  { font-size: 16px; color: #000080; font-family: "Times New Roman", "標楷體"; margin-top: 0; margin-bottom: 0; }

.tb-0     { margin-top: 0; margin-bottom: 0; }
.tb       { margin-top: 6px; margin-bottom: 6px; }
.top      { margin-top: 6px; margin-bottom: 0; }
.bottom   { margin-top: 0px; margin-bottom: 6px; }
.center   { text-align:center; }
.left     { float: left; }
.right    { float: right; }
.space    { font-size: 10px; margin-top: 0; margin-bottom: 0; }
.devide   { background-image: url('-cache/TxRule.gif'); font-size: 8px; }

.ming     { font-family: 新細明體; }
.kai      { font-family: "標楷體"; }
.Arial    { font-family: Arial; }
.narrow   { font-family: "Arial Narrow"; }
.ABlack   { font-family: Arial Black; }
.bold     { font-weight: bold; color: #666666; }
.black    { font-family:"Arial Narrow","Trebuchet MS","微軟正黑體"; }

/* --- [7] 框線與方框系統 (使用強黃 #FFFF00) --- */
.border0  { border: 0px; padding:2px; text-align:left; vertical-align: top; }
.border1  { border: 1px solid var(--color-strong-yellow); padding:2px; text-align:left; vertical-align: top; }
.bordery  { border: 4px solid var(--color-strong-yellow); padding:2px; text-align:left; vertical-align: top; }
.borderb  { border: 4px solid #00CCFF; padding:2px; text-align:left; vertical-align: top; }
.borderp  { border: 4px solid #CC00FF; padding:2px; text-align:left; vertical-align: top; }

.backgreen  { background-color: #D9FFB3; }
.backpink   { background-color: #FFCCFF; }
.backyellow { background-color: var(--color-strong-yellow); }

.boxb { border-style: ridge; border-width: 10px; border-color: #00ccff; }
.boxp { border-style: ridge; border-width: 10px; border-color: #cc00ff; }
.boxy { border-style: ridge; border-width: 10px; border-color: var(--color-strong-yellow); }

/* --- [8] 導覽、連結與 Banner (強黃強調) --- */
.navi-text   { font-family: "Arial Narrow","Trebuchet MS","微軟正黑體"; font-size: 18px; font-weight: bold; text-align: center; }
.navi-text.s { font-family: "Arial Narrow","Trebuchet MS","微軟正黑體"; font-size: 14px; font-weight: bold; text-align: center; }

a:visited { color: #0080FF; }
a:hover   { color: #FF9900; }
a:active  { color: #800080; }
a.navi:link    { color: var(--color-strong-yellow); text-decoration:none; }
a.navi:visited { color:#FFFFFF; text-decoration:none; }
a.navi:hover   { color:#D2FF78; text-decoration:none; }
a.navi:active  { color:#800080; text-decoration:none; }

/* --- [9] 結構性 ID 與列表 --- */
ol, ul, li { font-family: "Times New Roman", "標楷體"; font-size: 20px; }

#banner {
  font-family: "Arial Narrow","Trebuchet MS","微軟正黑體";
  font-size: clamp(18px, 2.5vw, 40px); 
  color: var(--color-strong-yellow); 
  font-weight: bold; margin: 0; font-stretch: condensed; text-align: center;
}

#container { width: 1000px; background-image: url('-cache/TxBackG.gif'); background-attachment: fixed; } 
#top_navi  { height:35px; }
#left_navi { width:140px; float:left; margin-right:10px; } 
#center    { width:600px; float:left; } 
#top_pic   { width:600px; } 
#content   { width:600px; background-image: url('-cache/TxBackG.gif'); background-attachment: fixed; }