/* 漲跌顏色（inc/i18n.php 依語言或使用者設定在 <html data-updn> 標 rg／gr／rb）
 * rg＝紅漲綠跌（預設，各頁原本的寫法），gr＝綠漲紅跌（英文），rb＝紅漲藍跌（韓文） */
:root { --U: #f0443a; --D: #16b36b; --UL: #ff8a80; --DL: #6fdcab; --Ub: 240, 68, 58; --Db: 22, 179, 107; }
html[data-updn="gr"] { --U: #16b36b; --D: #f0443a; --UL: #6fdcab; --DL: #ff8a80; --Ub: 22, 179, 107; --Db: 240, 68, 58; }
html[data-updn="rb"] { --D: #3b82f6; --DL: #8ab4ff; --Db: 59, 130, 246; }

/* 各頁用變數的地方：直接蓋掉變數 */
html[data-updn="gr"] *, html[data-updn="rb"] * {
	--sp-up: var(--U) !important; --sp-dn: var(--D) !important;
	--up: var(--U) !important; --dn: var(--D) !important;
	--good: var(--U) !important; --bad: var(--D) !important;
}

/* 寫死顏色的地方 */
html[data-updn="gr"] .sp-ta .sp-ta-legend .up, html[data-updn="rb"] .sp-ta .sp-ta-legend .up,
html[data-updn="gr"] #sp_dca .dca-kv b.up, html[data-updn="rb"] #sp_dca .dca-kv b.up,
html[data-updn="gr"] #sp_hold .up, html[data-updn="rb"] #sp_hold .up,
html[data-updn="gr"] .sp-seas .sp-seas-lv button.up b, html[data-updn="rb"] .sp-seas .sp-seas-lv button.up b,
html[data-updn="gr"] #sp_sy .up, html[data-updn="rb"] #sp_sy .up,
html[data-updn="gr"] #sp_rev .up, html[data-updn="rb"] #sp_rev .up,
html[data-updn="gr"] .sp-news-list .up, html[data-updn="rb"] .sp-news-list .up,
html[data-updn="gr"] .sp-feed .up, html[data-updn="rb"] .sp-feed .up,
html[data-updn="gr"] #sp_wlp .up, html[data-updn="rb"] #sp_wlp .up { color: var(--U) !important; }

html[data-updn="gr"] .sp-ta .sp-ta-legend .dn, html[data-updn="rb"] .sp-ta .sp-ta-legend .dn,
html[data-updn="gr"] #sp_dca .dca-kv b.dn, html[data-updn="rb"] #sp_dca .dca-kv b.dn,
html[data-updn="gr"] #sp_hold .dn, html[data-updn="rb"] #sp_hold .dn,
html[data-updn="gr"] .sp-seas .sp-seas-lv button.dn b, html[data-updn="rb"] .sp-seas .sp-seas-lv button.dn b,
html[data-updn="gr"] #sp_sy .dn, html[data-updn="rb"] #sp_sy .dn,
html[data-updn="gr"] #sp_rev .dn, html[data-updn="rb"] #sp_rev .dn,
html[data-updn="gr"] .sp-news-list .dn, html[data-updn="rb"] .sp-news-list .dn,
html[data-updn="gr"] .sp-feed .dn, html[data-updn="rb"] .sp-feed .dn,
html[data-updn="gr"] #sp_wlp .dn, html[data-updn="rb"] #sp_wlp .dn { color: var(--D) !important; }

html[data-updn="gr"] #sp_hold .hd-t td.im i.up, html[data-updn="rb"] #sp_hold .hd-t td.im i.up,
html[data-updn="gr"] .sp-seas .cells i.u, html[data-updn="rb"] .sp-seas .cells i.u { background: var(--U) !important; }
html[data-updn="gr"] #sp_hold .hd-t td.im i.dn, html[data-updn="rb"] #sp_hold .hd-t td.im i.dn,
html[data-updn="gr"] .sp-seas .cells i.d, html[data-updn="rb"] .sp-seas .cells i.d { background: var(--D) !important; }

/* 有底色的漲跌標籤 */
html[data-updn="gr"] .sp-ik-b.up, html[data-updn="rb"] .sp-ik-b.up { color: var(--UL) !important; border-color: rgba(var(--Ub), .5) !important; background: rgba(var(--Ub), .12) !important; }
html[data-updn="gr"] .sp-ik-b.dn, html[data-updn="rb"] .sp-ik-b.dn { color: var(--DL) !important; border-color: rgba(var(--Db), .5) !important; background: rgba(var(--Db), .12) !important; }
html[data-updn="gr"] .sp-news-list .k-hi, html[data-updn="rb"] .sp-news-list .k-hi,
html[data-updn="gr"] .sp-feed .k-hi, html[data-updn="rb"] .sp-feed .k-hi { background: rgba(var(--Ub), .15) !important; color: var(--U) !important; }
html[data-updn="gr"] .sp-news-list .k-lo, html[data-updn="rb"] .sp-news-list .k-lo,
html[data-updn="gr"] .sp-feed .k-lo, html[data-updn="rb"] .sp-feed .k-lo { background: rgba(var(--Db), .15) !important; color: var(--D) !important; }
html[data-updn="gr"] .sp-news-list .k-lu, html[data-updn="rb"] .sp-news-list .k-lu,
html[data-updn="gr"] .sp-feed .k-lu, html[data-updn="rb"] .sp-feed .k-lu { background: rgba(var(--Ub), .28) !important; color: var(--UL) !important; }
html[data-updn="gr"] .sp-news-list .k-ld, html[data-updn="rb"] .sp-news-list .k-ld,
html[data-updn="gr"] .sp-feed .k-ld, html[data-updn="rb"] .sp-feed .k-ld { background: rgba(var(--Db), .28) !important; color: var(--DL) !important; }
html[data-updn="gr"] .sp-ik-chart rect.u, html[data-updn="rb"] .sp-ik-chart rect.u { fill: var(--U) !important; }
html[data-updn="gr"] .sp-ik-chart rect.d, html[data-updn="rb"] .sp-ik-chart rect.d { fill: var(--D) !important; }

/* 語言切換鈕（header-extras.js） */
.sp-lang { position: relative; }
.sp-lang-btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid rgba(128,128,128,.45); background: rgba(128,128,128,.12); color: #e8e8e8; font-size: 13px; cursor: pointer; white-space: nowrap; box-shadow: none; }
.sp-lang-btn:hover, .sp-lang-btn:focus { background: rgba(128,128,128,.22); color: #fff; border-color: #f5c542; }
.sp-lang-menu { position: absolute; top: 38px; right: 0; z-index: 100001; min-width: 200px; background: #1c1f26; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 6px 0; }
.sp-lang-menu[hidden] { display: none; }
.sp-lang-menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 14px; background: transparent; border: 0; color: #e8e8e8; font-size: 14px; text-align: left; cursor: pointer; box-shadow: none; border-radius: 0; }
.sp-lang-menu button:hover { background: rgba(245,197,66,.15); color: #fff; }
.sp-lang-menu button.on { color: #f5c542; font-weight: 700; }
.sp-lang-menu button.on::after { content: '✓'; margin-left: auto; }
.sp-lang-menu hr { margin: 6px 0; border: 0; border-top: 1px solid rgba(255,255,255,.1); }
.sp-lang-menu small { display: block; padding: 4px 14px 2px; color: #848e9c; font-size: 12px; }
.sp-lang-menu i { font-style: normal; font-weight: 700; }
.sp-hdr-m .sp-lang-btn { height: 30px; padding: 0 8px; }
.sp-hdr-m .sp-lang-btn span { display: none; }

/* 英文等語言：佈景主題按鈕的 text-transform 會把每個字首變大寫，翻譯後改回一般大小寫 */
html:not([data-lang="zh"]) .sp-hd-add, html:not([data-lang="zh"]) .sp-aib-start, html:not([data-lang="zh"]) .sp-aib-start * { text-transform: none !important; }

/* 個股頁白底標頭（stock-head.css 用較深的紅綠） */
html[data-updn="gr"] .sp-hd .up { color: #0b9b5b !important; }
html[data-updn="gr"] .sp-hd .dn { color: #e0262e !important; }
html[data-updn="rb"] .sp-hd .dn { color: #2563eb !important; }