// Helm — 技術面入門。教材型:把常見技術指標白話講清楚「是什麼/怎麼讀/陷阱」+ 誠實的風險與部位管理。
//   非投資建議、不報買賣訊號。個人自用教學。配合「個股健檢」的技術面一起看。
(function () {
  const NS = window.HelmDesignSystem_9613a7;
  const { Button } = NS;

  const GROUPS = [
    {
      icon: "ph-trend-up", title: "趨勢 · 均線", items: [
        { name: "均線(MA)", gist: "大家的平均成本", desc: "把過去 N 天的收盤價平均,連成一條線——其實就是「這 N 天買進的人,平均成本在哪」。常用:5日(週線)看極短線、20日(月線)看短期、60日(季線)看中期、240日(年線)看長期。股價站上某條均線,代表這段期間買的人平均是賺的;跌破則平均套牢。均線是『落後指標』(用過去算的),轉折時會慢半拍。📖 在「個股健檢」的『趨勢』那格會用一句話(多頭排列／空頭排列／盤整)告訴你方向,並列出股價、月線、季線、年線的數值讓你自己對照站上或跌破——對應這裡說的「站上=這段期間買的人平均在賺、跌破=平均套牢」。把『趨勢』當你判斷偏多偏空的第一格。" },
        { name: "多頭 / 空頭排列", gist: "短中長線的相對位置", desc: "當『股價 > 月線 > 季線 > 年線』由上往下整齊排好 → 多頭排列,代表短中長期買進者都在賺、趨勢向上;完全相反(股價 < 月 < 季 < 年)→ 空頭排列,趨勢向下。三條交纏在一起 → 盤整、方向未明。多頭排列順勢操作勝率較高,但別追到末端;盤整時均線參考度低。📖 健檢的『趨勢』會列出股價、月線(20)、季線(60)、年線(240)的數值:由大到小整齊排(現價最高、年線最低)=多頭、完全反過來=空頭、糾纏在一起=盤整;直接對照就知道現在站在哪一邊,不用自己畫線。" },
        { name: "黃金交叉 / 死亡交叉", gist: "短均線穿越長均線", desc: "短期均線『由下往上』穿過長期均線 → 黃金交叉(轉強的訊號);『由上往下』穿過 → 死亡交叉(轉弱)。常被當作進出參考,但它是落後訊號:等你看到交叉,行情往往已經走一段了。盤整時會頻繁假交叉,別當必買必賣。" },
        { name: "支撐 / 壓力", gist: "跌不太下去 / 漲不太上去的價位", desc: "股價跌到某個區間常常止跌反彈 → 那裡是『支撐』(下方有人想買);漲到某個區間常常賣壓湧現 → 那裡是『壓力』(上方有人想解套或獲利了結)。前波低點、整數關卡、重要均線都常成為支撐壓力。『有效突破壓力』或『跌破支撐』常伴隨變盤,但假突破也很多,要看量能配合。" },
        { name: "趨勢四階段(Weinstein)", gist: "一檔股票在週期的哪一段", desc: "把一檔股票的長期週期分成四段(Stan Weinstein 的經典方法),用年線(MA240)＋它的斜率＋量來判斷現在大概在哪:①底部打底——年線走平、量縮,在等方向(觀望、別猜底);②上升——站上『上揚的年線』,趨勢向上(這是順勢者的主要進場區間);③頭部——年線轉平、量價背離、股價離均線太遠,開始居高思危、分批減碼;④下跌——跌破『下彎的年線』,嚴格停損、絕不攤平。用途是幫你看懂『現在站在週期哪一段』——別在第④段去接刀、也別在第②段一直怕高而錯過;但這是機率不是預言,對新手最重要的仍是長抱分散核心、別把全部賭在單一檔。📖 對照健檢『趨勢』那格:多頭排列 ≈ 第②段、盤整 ≈ ① 或 ③、空頭排列 ≈ 第④段。" },
      ],
    },
    {
      icon: "ph-gauge", title: "動能 · 超買超賣", items: [
        { name: "KD 指標", gist: "0~100 短線溫度計", desc: "衡量近期收盤價落在這段高低區間的相對位置。低於 20 偏冷(超賣、可能跌過頭)、高於 80 偏熱(超買、可能漲過頭)。K 值上穿 D 值偏多、下穿偏空。⚠️『鈍化』:強勢股可以一直 >80 還繼續噴、弱股一直 <20 還繼續探底,所以 KD 高/低不等於該賣/該買。📖 在「個股健檢」看到實際數字時這樣讀:<20=偏冷區、20~80=中性、>80=偏熱區;但偏熱不代表該賣,強勢股會在高檔『鈍化』續強。" },
        { name: "RSI 指標", gist: "0~100 漲跌力道占比", desc: "把近期『上漲的力道』占總波動的比例算成 0~100。一般 >70 視為超買、<30 超賣,概念跟 KD 類似但算法不同,常一起對照。同樣會鈍化:強趨勢中 RSI 可長期高檔。RSI 與股價的『背離』(股價創新高但 RSI 沒有)有時是動能轉弱的提醒,但不是必然。📖 在「個股健檢」看到實際數字時這樣讀:>70=超買、<30=超賣;一樣,強勢股會鈍化,別一看超買就放空。另一個眉角:RSI『首次』突破 70,常是趨勢剛啟動、不一定是賣訊;若第二次到頂、股價還更高,反而可能續強。RSI < 30 也不是自動買、要先確認跌勢止穩了沒。" },
        { name: "MACD 指標", gist: "中期動能與多空方向", desc: "由兩條不同長度的指數均線相減而來,看『中期動能』。MACD 在零軸之上偏多、之下偏空;快線(DIF)上穿慢線 → 金叉(動能轉強)、下穿 → 死叉(轉弱);中間的柱狀體(柱子)由負轉正代表動能回升、由正轉負代表轉弱。比 KD 慢、雜訊較少,適合抓中期方向,但轉折也較慢。📖 在「個股健檢」會看到三個數字:快線 DIF、慢線(也叫訊號線/MACD 線)、柱狀體。讀法:柱 > 0(紅柱)且越來越長=多方動能增強、柱 < 0(綠柱)變長=空方轉強;DIF 由下往上穿過 MACD=金叉(動能轉強)、由上往下=死叉;兩條線都在 0 軸之上整體偏多、之下偏空。它落後,看到訊號時行情常已走一段,別當即時買賣鈕。進階眉角:柱狀體『縮短』通常比『交叉』更早反映動能轉弱;0 軸『之上』的死叉,比 0 軸之下的死叉更該當回事;會看週線的話,週線 MACD 的方向優先於日線。" },
      ],
    },
    {
      icon: "ph-chart-bar", title: "量能 · 買賣熱度", items: [
        { name: "成交量", gist: "這檔有多少人在交易", desc: "成交量=當期買賣的張數,反映關注度與買賣力道。突然『爆量』通常代表有題材、有大單進出、或要變盤;『量縮』代表大家在觀望。量是價的先行/確認訊號之一,但要跟價格一起讀,單看量意義有限。📏『量大量小』是相對的——要跟這檔自己最近的平均量(例如近 5 日或近月均量)比:明顯高於均量=放量/爆量、明顯低於=量縮。所以同一個張數,在大型股算量縮、在小型股可能已是爆量,永遠跟它自己比。" },
        { name: "量價關係", gist: "價漲要配量增才健康", desc: "『價漲量增』=越漲越多人想買,較健康;『價漲量縮』=往上追的人變少,要留意是否無力;『低檔爆量止跌』可能是落底訊號;『高檔爆量但價漲不動』可能是有人趁機出貨。記住:量價背離(價量走相反)常是轉折的提醒。📖 健檢的『量能』那格會把「近 5 日均量」跟「月均量」比,告訴你是放量、量縮還是正常;至於「爆量配價漲不動=出貨、低檔爆量止跌=落底」這種量+價連動,健檢不會幫你下結論,要你自己搭配上面的『股價走勢』一起判斷。量在這 App 是你唯一能看到的『有多少人參與』,但只是輔助——一定要跟價一起讀。兩個常見訊號:『縮量回檔後又放量上漲』常是強勢延續;『高檔放量大跌、收長黑』常是大戶趁機出貨。" },
      ],
    },
    {
      icon: "ph-arrows-vertical", title: "位階 · 相對高低", items: [
        { name: "52週高低 / 距高距低", gist: "在一年區間的位置", desc: "現價落在過去一年最高、最低之間的哪裡。接近高點=強勢,但追高萬一回檔就套在頂部;接近低點=相對便宜,但要先確認不是『基本面變差才跌的』。位階高低 ≠ 貴或便宜,要配合本益比與公司體質一起看。" },
        { name: "乖離率(BIAS)", gist: "股價偏離均線多少 %", desc: "股價跟某條均線距離多遠(百分比)。短時間漲太兇 → 正乖離過大、跌太凶 → 負乖離過大,股價常有『回到均線附近』的均值回歸傾向,所以乖離過大時短線追高殺低風險高。但強勢股可以維持高正乖離很久,別純看乖離就反向操作。📖 在「個股健檢」看到實際數字時這樣讀:正乖離越大=短線漲多、容易回;負乖離越大=跌深、可能反彈;但這只是『拉太開會想回到平均』的傾向,不是訊號。" },
      ],
    },
    {
      icon: "ph-chart-line", title: "K 線基礎", items: [
        { name: "紅 K / 黑 K", gist: "當期收高還是收低", desc: "一根 K 棒記錄一段時間(日/週)的開、高、低、收。收盤 > 開盤 → 紅 K(收高、買方占優);收盤 < 開盤 → 黑 K(收低、賣方占優)。注意台股習慣『紅漲綠跌』,跟歐美相反。實體越長代表當期買賣方力道差距越大。" },
        { name: "上下影線", gist: "衝高被壓 / 殺低被買", desc: "K 棒實體上下那兩條細線。『上影線長』=盤中衝高但被壓回來,上方有賣壓;『下影線長』=盤中被殺低但又被買上來,下方有支撐。長下影線出現在低檔,有時是止跌訊號;長上影線出現在高檔,有時是高點警訊——但都要配合量與位置看,不能單看一根。" },
      ],
    },
    {
      icon: "ph-shield-warning", title: "風險管理(最重要)", danger: true, items: [
        { name: "先想好停損再進場", gist: "錯了在哪出場", desc: "短線操作真正的核心不是『買在哪』,而是『錯了怎麼跑』。進場前就先設好停損點(例如 -7%~-10%,或跌破關鍵均線/支撐就出),並且真的執行。沒有停損紀律,一次大賠就吃掉很多次小賺。⚠️ 補充:-7%~-10% 只是新手好記的起點、不是鐵律——波動大的中小型股用固定 % 容易被正常震盪掃掉;比較穩的做法是『跌破你當初進場依據的那條關鍵均線/支撐就走』,讓「為什麼進」和「為什麼出」是同一個理由。" },
        { name: "部位大小 · 只用閒錢", gist: "別壓太重、別動到核心", desc: "短線嘗試的部位要小,單一檔別壓太重;用的是『輸了不影響生活的閒錢』,不要動到你正在建立的核心長期持股、緊急預備金或要用的錢。先把基本盤(分散的長期部位+預備金)顧好,再拿一小部分玩。🧮 可直接算的機械規則「單筆最多虧多少 → 反推能買多少」:先決定這一筆最多賠掉短線資金的 X%(新手建議 1~2%),部位 =(短線總資金 × X%)÷ 停損距離%。舉例:短線資金 10 萬、單筆最多虧 2%(=2000 元)、停損設 -8% → 最多買 2000 ÷ 8% = 2.5 萬。白話:停損抓越鬆、能買的部位越小,這樣每次最多就只虧得起那 2%。" },
        { name: "不凹單、不無限攤平", gist: "跌破停損就執行", desc: "最常見的賠大錢方式:跌破停損卻不甘心,一直加碼想攤平凹回來,結果越套越深。技術面操作的前提是『順勢、控制單筆風險』,看錯就認小錯出場,留資金等下一次。" },
        { name: "技術面會失靈", gist: "它是機率,不是公式", desc: "技術指標反映的是過去價格與群眾心理的機率傾向,不是必然。遇到突發消息、法人大單、財報變化時常常失準;同一個訊號在不同股、不同盤勢效果差很多。把它當『提高勝算的參考之一』,不是『照做就會賺』的公式。" },
        { name: "交易成本與長期勝率", gist: "少做、做有把握的", desc: "每筆買賣都有手續費+證交稅,頻繁進出會被成本一點一點吃掉獲利。學術研究與券商統計都顯示:多數頻繁交易的散戶,長期報酬其實跑輸『買進並持有大盤(如 0050)』。所以方向是『少做、只做相對有把握的』,而不是越做越多。" },
      ],
    },
  ];

  // ── 技術面流派(8 個 agent 辯論+審查歸納;教材、非建議)。從「最該先學/低頻」排到「高難度/新手先別碰」。──
  const SCHOOLS_INTRO = "分流派不是要你「全部學會」,而是因為不同的賺錢邏輯需要看不同指標——學某個指標是為了服務某一種操作邏輯(順勢看方向、區間看高低、突破看發動、回歸看跌過頭)。把方向用的指標拿去抓轉折,或把抓轉折的指標當方向,就會用錯。所以重點不是每個都學,而是先想清楚你想用哪種邏輯賺錢,再學那一套對應的指標就好。兩個根本限制先講:本 App 只有「日線收盤級」指標,沒有即時報價、分時/分鐘K、也沒有籌碼面(法人買賣超、融資融券、分點),所以任何要盤中即時判斷進出的打法(當沖、搶突破那一刻)本工具做不到,訊號最快也是收盤後才確認、本質偏落後。";
  const SCHOOLS = [
    { name: "長線年線順勢(站上 240 日線才偏多)",
      logic: "把年線(240日線)當這檔的「多空分界線」——股價站穩在向上的年線之上才偏多,趨勢沒壞就一直抱、跌破走平的年線就退場;賺一整段大趨勢的錢,不猜頭、不摸底。",
      indicators: ["均線240日(核心:看年線向上/走平/向下、股價在線上或線下,直接決定偏多偏空)", "均線多頭排列(5>20>60>240 且都向上,確認是真長多而非跌深反彈)", "均線60日(跌破季線或季線下彎當『趨勢轉弱』退場警示)", "量能/量價(站上或跌破年線時要有量,才像有效突破/跌破)", "位階(距52週高低,判斷是初升段還是追在末端高點)"],
      horizon: "數月到一年以上,極低頻、很少進出;比較像「替長期部位做擇時加減碼的紀律」,不是另開的短線賭局。",
      suits: "沒時間盯盤、受不了每天看紅綠跳動、想順大趨勢慢慢抱的新手;個性上和「核心分散、長期持有」最接近的人。",
      risk: "年線是落後指標、訊號很慢,真跌時你會先吃一段回檔才反應;盤整時在年線上下被假站上/假跌破甩動。單一個股的年線比大盤雜訊更大、假訊號更多。台股單日漲跌10%,真跌破時不一定賣得到。注意:App 顯示的「黃金/死亡交叉」用哪兩條均線以工具為準,別跟你自己用 60/240 判讀的長線轉折混為一談。",
      beginnerNote: "這幾派裡最適合新手起步的一派,但要和你「核心長期持有」的部位在心理上分開——別拿核心倉位追年線進出;起步只用很小的閒錢,在「年線向上+股價站穩線上」時先觀察,把它當紀律訓練、不是賺快錢。" },
    { name: "波段順勢(多頭排列,回檔靠均線、跌破就走)",
      logic: "只做「均線多頭排列」的股票,趨勢明確時等回檔到月線/季線守住不破再關注續強,跌破關鍵均線(常用20日線)或死亡交叉就離場;賺波段主趨勢,刻意不買最低、不賣最高。",
      indicators: ["均線5/20/60(核心:多頭排列=趨勢向上,只做多邊的依據)", "均線多頭排列(趨勢成立才做,不在均線糾結的盤整硬做)", "均線(出場:收盤跌破20日線當減碼/離場線,讓進場『方向』和出場『停損』對稱,別只學進不學出)", "乖離率(對月線:正乖離太大=漲太兇追高風險高,等回檔貼近均線)", "量能/量價(上漲量增、回檔量縮才是健康洗盤)"],
      horizon: "數週到數月;趨勢不轉空(沒跌破關鍵均線、沒死叉)就續抱。「回檔不破再上/沿均線回測再起」都是同一招的進出細節,不是不同流派。",
      suits: "願意每天或每週花點時間看圖、能接受買不到最低賣不到最高、想練最正統順勢操作的進階一點新手;這是新手最該認真練的『主課』。",
      risk: "盤整盤會被假突破、假交叉來回甩動磨損——常是勝率不高、靠少數幾段大波段把多次小賠賺回來(賺賠比要>1),紀律抱住對的單比高勝率更重要,這也是多數散戶做短線反而長期跑輸大盤的原因。台股漲跌10%,跌破停損時遇跳空或跌停鎖死可能成交不到預設價。新手階段先不要做『回測不破就加碼』。",
      beginnerNote: "順勢主課,但先用紙上模擬或事後回看把「收盤跌破20日線就減碼」練熟,再用極小閒錢實作;一次只練這一派、別同時開好幾個。" },
    { name: "帶量突破(壓力/平台/創新高,強者恆強)",
      logic: "悶很久或逼近前高時,某天『帶明顯放量』站上關鍵壓力或創52週新高,代表上方賣壓被吃掉、可能展開新一波;順著突破方向關注「沒有壓力、一路往上」那段。",
      indicators: ["壓力/支撐(核心:被突破的壓力/前高是焦點,突破後由壓力轉支撐;又跌回去就是假突破)", "量能/量價(命門:突破一定要量增確認,無量假突破最危險;量是本 App 唯一能看到的『參與度』替代品)", "位階(52週高/距高:分辨『低檔第一次突破』還是『高檔追新高』,風險不同)", "均線(要在向上均線之上才算順勢;底部第一次突破可放寬為站上上彎的20日線,不必硬等 5>20>60)", "K線(長紅、收最高、上影線短=攻擊力強;MACD 紅柱只是事後動能輔助,落後又和量同源,別把量增和 MACD 當兩個獨立確認)"],
      horizon: "數週到數月;但突破隔天就跌回原區間(假突破)要很快認錯出場。",
      suits: "願意承擔波動、追求強勢股、且能嚴守停損的人;不適合看到帳面上下波動就睡不著的純新手。",
      risk: "陷阱最多的一派。最大盲點是看不到籌碼——『真突破 vs 誘多出貨』高度依賴主力/法人是否進場,本 App 沒有法人買賣超/融資券/分點,只能用量當唯一參考、判斷打折,認真做需另尋籌碼。本 App 只有日K收盤,看不到『突破那一刻』,你看到訊號時常已走完一截。台股T+1,今天追最快明天才能賣;隔天開低或跌停鎖死當天出不掉,追在長紅或近漲停尤其危險。假突破(騙線)極多。",
      beginnerNote: "最容易追高被套的一派,新手請「只觀察、不進場」,用紙上模擬看過幾十次、能分清真假突破再說;真要練只用最小閒錢,且突破隔天就跌破突破點一定走。" },
    { name: "區間來回(支撐壓力 + KD/RSI 低買高賣)",
      logic: "鎖定一段時間在固定箱型震盪、沒明顯趨勢的股票,接近『支撐』(下緣)偏多看、接近『壓力』(上緣)偏空看,賺區間反覆的價差;一旦有效跌破支撐就認錯,把「支撐買」變「破撐砍」。",
      indicators: ["支撐與壓力(核心:畫出區間上下緣,是判斷高低的骨架)", "KD(高檔死叉提醒近上緣超買;低檔要黃金交叉或背離才算賣壓稍緩,單純『低檔鈍化』不是買訊、反而常是跌破支撐續跌的特徵)", "RSI(偏高→近壓力、偏低→近支撐,情緒過熱/過冷的輔助溫度計)", "K線(支撐區長下影/紅K=有買盤承接、壓力區上影/黑K=有賣壓,反轉旁證)", "量能(驗證假突破:區間邊緣的突破常量不足)"],
      horizon: "數天到兩三週,做完一趟區間就了結,不期待大行情。",
      suits: "想在『盤整盤』也有事做、能嚴守紀律、不貪心的人;適合成交量穩定的中大型股。",
      risk: "最大風險是『區間被突破』:KD/RSI 在強趨勢會鈍化黏在高/低檔,你以為超買去空它一路噴、以為超賣去接它跌破支撐變崩盤,絕不能只靠 KD/RSI 抓最高最低。中小型股箱型常因量不足而『畫得出來卻買不到/賣不到』。跌停鎖死時『破撐砍』也可能賣不掉。區間操作天生交易次數多,每趟來回都有手續費+證交稅,做越勤成本拖累越重。",
      beginnerNote: "概念好懂但實戰最容易『接刀』,新手起步以觀察+紙上模擬為主;真要做只在明確箱型、只做量穩的中大型股,進場前先想好「跌破哪裡就走」,寧可少賺也不要凹。" },
    { name: "均值回歸(跌過頭的反彈,進階高風險、新手先別碰)",
      logic: "股價短時間跌得又快又深、對月線出現很大負乖離時,賭『跌過頭、鐘擺盪太遠會盪回來』,搶一段回歸均線的反彈;從純搶反彈(極短、最危險)到『在自己本來就敢長抱的好公司上趁恐慌分批接』都有。",
      indicators: ["乖離率(對月線:核心,直接量『跌過頭的幅度』,負乖離拉到極端代表超跌)", "RSI(落到超賣區是『賣壓衰竭』的情緒旁證,但低檔可以更低、別當保證)", "KD(低檔黃金交叉只是賣壓稍緩旁證,急跌常出現假金叉,不能單獨當進場鈕)", "支撐(看『接』的位置在不在合理防守線附近)", "均線20/60日(看反彈目標大概在哪、位置還算不算合理防守範圍)"],
      horizon: "數天到數週的反彈;若標的是你本來就想長抱的好公司,接到後可轉長期持有。",
      suits: "已有區間/順勢基礎、心臟夠大、紀律極嚴的進階者;『買在下跌中的股票』違反人性,最不適合純新手單獨使用。",
      risk: "全清單最危險——『接刀』:跌深不代表會反彈,基本面或籌碼壞掉的會一路向下,乖離可以更大、RSI/KD 可以鈍化更久。關鍵:純技術面分不出這次下跌是『暫時被錯殺』還是『基本面/籌碼崩壞』,而判斷需要本 App 以外的財報/籌碼,本工具只能量『跌多深』、量不出『該不該接』。台股10%跌幅讓你接到的便宜隔天可能更便宜;真崩跌常連續跌停鎖死,既接不到計畫的量也砍不掉部位,停損價可能完全失效。",
      beginnerNote: "新手階段明確『不建議實作』,列出來只是讓你看懂為什麼危險;真要試也只用體質好的大型權值股、絕不接基本面有問題或一直破底的個股,絕不越攤越多,把『反彈不如預期就立刻認賠』寫死成規則。" },
    { name: "動能/背離 輔助儀表(不是獨立流派、不進場、不放空)",
      logic: "它不找買點,而是替你『手上已有的』長期或波段部位量火力有沒有衰退:價格還創高但動能/量能跟不上(背離),常是上漲後繼無力的早期警訊,幫你想『要不要分批減碼』,不是叫你進場。",
      indicators: ["MACD(動能視角:零軸上+紅柱擴大=動能仍強;股價創高但 MACD 沒同步創高=頂背離。它是均線衍生的落後指標、和均線派高度重複,多項一起成立不等於多重獨立確認)", "RSI(股價創高但 RSI 沒跟上=背離;強趨勢中 RSI 高檔鈍化代表『強勢』不代表『沒風險』,別純因 RSI>80 出場、也別把鈍化當護身符)", "量能/量價(價漲量縮=越漲越沒人追,動能轉弱旁證)", "乖離率(對月線:正乖離拉到極端提醒漲過頭、可考慮分批獲利了結)"],
      horizon: "沒有獨立持有週期——它是搭配你既有部位的『持有期間監控工具』。",
      suits: "已經有部位、想學『何時該居高思危、分批獲利了結』的人;當順勢/長線的輔助,不適合單獨成派。",
      risk: "上面幾個指標都來自同一組價/量資料、彼此高度相關,『一起背離』不是『多重保險』,只是同一件事的不同畫法。背離最大陷阱是『早鳴』:強勢股可以背離很多次還續漲,把背離當賣訊常太早下車——它是機率提醒、不是準時鬧鐘。另外:台股放空(融券/借券)對新手風險極高(借券成本、平盤下不得放空、除權息前強制回補),而本 App 看不到籌碼/借券資料,直接把『放空』排除在使用範圍外。",
      beginnerNote: "可以學、但只當『輔助儀表』別當主武器;用它提醒自己『漲多了該不該分批減碼』就好,絕不拿背離猜頭、更不要拿來放空。" },
  ];
  const SCHOOLS_RISK = "六派共通、也是核心提醒:① 先後順序——你的『核心分散、長期持有』倉位都還在建立、緊急預備金也還沒到位之前,以上短線流派一律建議停在『只觀察、紙上模擬』,先把核心站穩才是重點。② 只用閒錢、低頻、一次一派——真要實作,總額限縮在『全部虧光也不影響生活』的小錢,一次只練一派,別把核心部位拿來擇時。③ 進場前先想好怎麼出——每派都先寫死『跌破哪裡/什麼情況就走』,把停損練成肌肉記憶;但台股單日漲跌10%,遇跳空或跌停鎖死時停損單可能根本成交不了,別假設停損價一定守得住。④ 交易成本會吃掉報酬——買進手續費約0.1425%(常可打折)、賣出再加證交稅0.3%;現股當沖賣出證交稅減半到0.15%(有期限的優惠、用前查最新規定),一趟來回仍有成本,進出越頻繁被吃越多。⑤ 工具限制——日線收盤級、沒有即時/分時/籌碼,突破與接刀尤其受限,需另尋資料。以上全是教材、不是買賣訊號或明牌,要不要動、自己判斷自己承擔。";

  // ── 指標示意圖(schematic、非真實個股;台股紅漲綠跌)。讓抽象指標「看得到形狀」。──
  function Dgm({ id }) {
    const FR = { display: 'block', width: '100%', maxWidth: 380, background: 'var(--surface-sunken)', borderRadius: 8, margin: '10px 0 2px' };
    const RED = '#d9534f', GRN = '#3a9e72', BRS = '#b08d57', BLU = '#3d7fd9';
    const T3 = 'var(--text-tertiary)', LN = 'var(--line)', NEU = 'var(--text-secondary)';
    const VB = "0 0 300 150";
    switch (id) {
      case 'ma': return (
        <svg viewBox={VB} style={FR} role="img" aria-label="均線:站上與跌破示意">
          <text x="14" y="15" fontSize="9" fill={T3}>股價在均線上/下 = 這段期間買的人 平均賺/套</text>
          <polyline points="14,108 70,100 126,90 182,80 238,72 286,66" fill="none" stroke={BRS} strokeWidth="2.5" />
          <text x="286" y="60" fontSize="8.5" fill={BRS} textAnchor="end">均線=平均成本</text>
          <polyline points="14,120 44,92 74,110 104,74 134,98 164,60 194,94 224,56 254,86 286,52" fill="none" stroke="var(--text-secondary)" strokeWidth="1.6" />
          <circle cx="104" cy="74" r="3.5" fill={RED} /><text x="104" y="44" fontSize="8.5" fill={RED} textAnchor="middle">站上→賺</text>
          <circle cx="134" cy="98" r="3.5" fill={GRN} /><text x="150" y="124" fontSize="8.5" fill={GRN}>跌破→套</text>
        </svg>
      );
      case 'align': return (
        <svg viewBox={VB} style={FR} role="img" aria-label="多頭排列示意">
          <text x="14" y="15" fontSize="9" fill={T3}>由上往下「股價&gt;5&gt;20&gt;60」整齊排 = 多頭(趨勢向上)</text>
          <polyline points="14,70 90,58 166,46 242,34 286,30" fill="none" stroke="var(--text-secondary)" strokeWidth="2" /><text x="290" y="30" fontSize="8.5" fill="var(--text-primary)" textAnchor="end">股價</text>
          <polyline points="14,84 90,72 166,60 242,48 286,44" fill="none" stroke={RED} strokeWidth="1.6" /><text x="290" y="50" fontSize="8" fill={RED} textAnchor="end">5</text>
          <polyline points="14,100 90,90 166,78 242,66 286,62" fill="none" stroke={BRS} strokeWidth="1.6" /><text x="290" y="70" fontSize="8" fill={BRS} textAnchor="end">20</text>
          <polyline points="14,118 90,110 166,100 242,90 286,86" fill="none" stroke={BLU} strokeWidth="1.6" /><text x="290" y="96" fontSize="8" fill={BLU} textAnchor="end">60</text>
          <text x="14" y="140" fontSize="8.5" fill={T3}>全部往上、不交纏 → 短中長期買的人都在賺</text>
        </svg>
      );
      case 'cross': return (
        <svg viewBox={VB} style={FR} role="img" aria-label="黃金交叉與死亡交叉示意">
          <polyline points="14,96 76,80 138,66 200,72 262,88 286,96" fill="none" stroke={BRS} strokeWidth="2.5" /><text x="20" y="110" fontSize="8" fill={BRS}>長均線(慢)</text>
          <polyline points="14,118 76,96 138,56 200,52 262,98 286,116" fill="none" stroke={BLU} strokeWidth="1.8" /><text x="20" y="44" fontSize="8" fill={BLU}>短均線(快)</text>
          <circle cx="104" cy="71" r="4" fill={RED} /><text x="104" y="28" fontSize="9" fill={RED} textAnchor="middle">黃金交叉(轉強)</text>
          <circle cx="232" cy="92" r="4" fill={GRN} /><text x="246" y="78" fontSize="9" fill={GRN}>死亡交叉(轉弱)</text>
          <text x="14" y="15" fontSize="9" fill={T3}>短均線「由下穿上」=黃金、「由上穿下」=死亡(都落後)</text>
        </svg>
      );
      case 'sr': return (
        <svg viewBox={VB} style={FR} role="img" aria-label="支撐與壓力示意">
          <line x1="14" y1="42" x2="286" y2="42" stroke={RED} strokeDasharray="4 3" strokeWidth="1.3" /><text x="120" y="36" fontSize="8.5" fill={RED}>壓力</text>
          <line x1="14" y1="112" x2="286" y2="112" stroke={GRN} strokeDasharray="4 3" strokeWidth="1.3" /><text x="256" y="125" fontSize="8.5" fill={GRN}>支撐</text>
          <polyline points="14,100 50,46 86,108 122,44 158,110 194,46 230,108 262,42 286,24" fill="none" stroke="var(--text-secondary)" strokeWidth="1.6" />
          <text x="266" y="20" fontSize="8.5" fill={RED}>↑突破</text>
          <text x="14" y="15" fontSize="9" fill={T3}>跌到支撐常彈、漲到壓力常回;帶量站穩突破才像變盤</text>
        </svg>
      );
      case 'kd': case 'rsi': {
        const isK = id === 'kd', hi = isK ? '80' : '70', lo = isK ? '20' : '30';
        return (
          <svg viewBox="0 0 300 158" style={FR} role="img" aria-label={(isK ? 'KD' : 'RSI') + " 超買超賣與鈍化示意"}>
            <text x="14" y="14" fontSize="9" fill={T3}>{isK ? 'KD' : 'RSI'} 0~100;強勢股會「鈍化」黏在高檔還漲</text>
            <rect x="14" y="28" width="248" height="20" fill={RED} opacity="0.12" /><text x="266" y="42" fontSize="8.5" fill={RED}>超買{hi}</text>
            <rect x="14" y="112" width="248" height="20" fill={GRN} opacity="0.12" /><text x="266" y="126" fontSize="8.5" fill={GRN}>超賣{lo}</text>
            <line x1="14" y1="48" x2="262" y2="48" stroke={LN} strokeDasharray="2 3" /><line x1="14" y1="112" x2="262" y2="112" stroke={LN} strokeDasharray="2 3" />
            <polyline points="14,124 44,118 74,86 104,46 134,36 164,34 194,38 224,35 250,40" fill="none" stroke={BLU} strokeWidth="2" />
            <circle cx="44" cy="118" r="3.5" fill={GRN} /><text x="40" y="146" fontSize="8" fill={GRN}>低檔轉折(偏多)</text>
            <text x="150" y="26" fontSize="8.5" fill={RED} textAnchor="middle">↑ 鈍化:別當「超買該賣」</text>
          </svg>
        );
      }
      case 'macd': return (
        <svg viewBox="0 0 300 158" style={FR} role="img" aria-label="MACD 示意">
          <text x="14" y="14" fontSize="9" fill={T3}>柱由綠翻紅、DIF 上穿 MACD = 金叉(中期動能轉強)</text>
          <line x1="14" y1="86" x2="286" y2="86" stroke={LN} /><text x="289" y="84" fontSize="8" fill={T3} textAnchor="end">0軸</text>
          <rect x="30" y="86" width="9" height="22" fill={GRN} opacity="0.7" /><rect x="46" y="86" width="9" height="14" fill={GRN} opacity="0.7" /><rect x="62" y="86" width="9" height="6" fill={GRN} opacity="0.7" />
          <rect x="92" y="78" width="9" height="8" fill={RED} opacity="0.8" /><rect x="108" y="68" width="9" height="18" fill={RED} opacity="0.8" /><rect x="124" y="58" width="9" height="28" fill={RED} opacity="0.8" /><rect x="140" y="62" width="9" height="24" fill={RED} opacity="0.8" /><rect x="156" y="70" width="9" height="16" fill={RED} opacity="0.8" />
          <polyline points="20,104 50,98 80,90 110,72 140,60 170,58 200,64 240,74" fill="none" stroke={BLU} strokeWidth="1.8" /><text x="243" y="74" fontSize="8" fill={BLU} textAnchor="end">DIF</text>
          <polyline points="20,96 50,94 80,92 110,86 140,76 170,68 200,66 240,70" fill="none" stroke={BRS} strokeWidth="1.8" /><text x="243" y="92" fontSize="8" fill={BRS} textAnchor="end">MACD</text>
          <circle cx="70" cy="93" r="4" fill={RED} /><text x="70" y="132" fontSize="8.5" fill={RED} textAnchor="middle">金叉</text>
        </svg>
      );
      case 'vol': return (
        <svg viewBox={VB} style={FR} role="img" aria-label="成交量:放量與量縮示意">
          <text x="14" y="14" fontSize="9" fill={T3}>跟「它自己的均量」比:明顯高=放量/爆量、明顯低=量縮</text>
          <line x1="14" y1="120" x2="286" y2="120" stroke={LN} />
          <line x1="14" y1="74" x2="286" y2="74" stroke={BRS} strokeDasharray="3 3" strokeWidth="1.2" /><text x="289" y="72" fontSize="8" fill={BRS} textAnchor="end">均量</text>
          {[['30',96],['54',88],['78',100],['102',46],['126',38],['150',92],['174',104],['198',62],['222',110],['246',102]].map(function(b,i){var x=Number(b[0]),top=b[1],big=top<74;return <rect key={i} x={x} y={top} width="16" height={120-top} fill={big?RED:GRN} opacity={big?0.85:0.55} />;})}
          <text x="118" y="30" fontSize="8.5" fill={RED} textAnchor="middle">爆量(有事)</text>
          <text x="222" y="98" fontSize="8" fill={GRN} textAnchor="middle">量縮</text>
        </svg>
      );
      case 'volprice': return (
        <svg viewBox={VB} style={FR} role="img" aria-label="量價關係示意">
          <text x="14" y="14" fontSize="9" fill={T3}>價漲量增=健康;高檔爆量卻漲不動=小心出貨</text>
          <polyline points="14,70 70,60 126,48 182,40 238,44 286,46" fill="none" stroke={RED} strokeWidth="2" /><text x="60" y="38" fontSize="8.5" fill={RED}>價漲</text>
          <line x1="14" y1="120" x2="286" y2="120" stroke={LN} />
          {[['30',104],['58',96],['86',84],['114',74],['142',64],['170',58],['210',92],['250',100]].map(function(b,i){var x=Number(b[0]),top=b[1];return <rect key={i} x={x} y={top} width="16" height={120-top} fill={i>=6?GRN:RED} opacity="0.7" />;})}
          <text x="100" y="138" fontSize="8" fill={RED}>量增(追的人多)</text>
          <text x="232" y="100" fontSize="8" fill={GRN} textAnchor="middle">量縮·無力</text>
        </svg>
      );
      case 'range52': return (
        <svg viewBox="0 0 300 120" style={FR} role="img" aria-label="52週位階示意">
          <text x="14" y="16" fontSize="9" fill={T3}>現價落在一年高低之間的哪裡(位階高 ≠ 貴)</text>
          <rect x="20" y="50" width="260" height="14" rx="7" fill="var(--line)" />
          <rect x="20" y="50" width="234" height="14" rx="7" fill={RED} opacity="0.35" />
          <circle cx="254" cy="57" r="7" fill={RED} />
          <text x="20" y="84" fontSize="8.5" fill={GRN}>52週低 80</text>
          <text x="280" y="84" fontSize="8.5" fill={RED} textAnchor="end">52週高 120</text>
          <text x="246" y="44" fontSize="8.5" fill={RED} textAnchor="middle">現價116·位階高</text>
          <text x="14" y="106" fontSize="8.5" fill={T3}>接近高點=強勢但追高易套;接近低點先確認不是基本面壞掉</text>
        </svg>
      );
      case 'bias': return (
        <svg viewBox={VB} style={FR} role="img" aria-label="乖離率示意">
          <text x="14" y="14" fontSize="9" fill={T3}>股價拉太離均線 → 常有「盪回均線」的均值回歸傾向</text>
          <polyline points="14,96 70,90 126,82 182,74 238,68 286,64" fill="none" stroke={BRS} strokeWidth="2.5" /><text x="286" y="58" fontSize="8.5" fill={BRS} textAnchor="end">月線</text>
          <polyline points="14,100 60,86 100,40 132,32 164,58 210,72 256,70 286,66" fill="none" stroke="var(--text-secondary)" strokeWidth="1.6" />
          <line x1="120" y1="34" x2="120" y2="80" stroke={RED} strokeDasharray="2 2" /><text x="120" y="28" fontSize="8.5" fill={RED} textAnchor="middle">正乖離過大</text>
          <text x="210" y="90" fontSize="8.5" fill={GRN}>拉回貼近均線</text>
        </svg>
      );
      case 'candle': return (
        <svg viewBox={VB} style={FR} role="img" aria-label="紅K黑K示意">
          <text x="14" y="14" fontSize="9" fill={T3}>台股紅漲綠跌:收盤&gt;開盤=紅K(買方強)、收&lt;開=黑K</text>
          <line x1="70" y1="40" x2="70" y2="120" stroke={RED} strokeWidth="1.2" /><rect x="58" y="58" width="24" height="50" fill={RED} /><text x="70" y="136" fontSize="9" fill={RED} textAnchor="middle">紅K·收高</text>
          <line x1="200" y1="44" x2="200" y2="124" stroke={GRN} strokeWidth="1.2" /><rect x="188" y="56" width="24" height="52" fill={GRN} /><text x="200" y="138" fontSize="9" fill={GRN} textAnchor="middle">黑K·收低</text>
          <text x="135" y="74" fontSize="8" fill={T3} textAnchor="middle">實體越長</text><text x="135" y="86" fontSize="8" fill={T3} textAnchor="middle">力道差越大</text>
        </svg>
      );
      case 'shadow': return (
        <svg viewBox={VB} style={FR} role="img" aria-label="上下影線示意">
          <text x="14" y="14" fontSize="9" fill={T3}>影線=盤中衝到／殺到又被拉回的痕跡(顏色不分漲跌,看影線長短)</text>
          <line x1="80" y1="34" x2="80" y2="92" stroke={NEU} strokeWidth="1.4" />
          <line x1="80" y1="34" x2="80" y2="62" stroke={BRS} strokeWidth="3.5" />
          <rect x="68" y="78" width="24" height="14" fill={NEU} />
          <text x="98" y="40" fontSize="8" fill={BRS}>← 衝高被壓回</text>
          <text x="80" y="116" fontSize="8.5" fill="var(--text-primary)" textAnchor="middle">長上影</text>
          <text x="80" y="128" fontSize="8" fill={T3} textAnchor="middle">上方有賣壓</text>
          <line x1="216" y1="48" x2="216" y2="116" stroke={NEU} strokeWidth="1.4" />
          <line x1="216" y1="88" x2="216" y2="116" stroke={BRS} strokeWidth="3.5" />
          <rect x="204" y="48" width="24" height="14" fill={NEU} />
          <text x="234" y="114" fontSize="8" fill={BRS}>← 殺低被買回</text>
          <text x="216" y="134" fontSize="8.5" fill="var(--text-primary)" textAnchor="middle">長下影·下方有支撐</text>
        </svg>
      );
      case 'stage': return (
        <svg viewBox={VB} style={FR} role="img" aria-label="趨勢四階段示意">
          <text x="14" y="14" fontSize="9" fill={T3}>用年線(brass)＋斜率分四段:底部→上升→頭部→下跌</text>
          <line x1="82" y1="22" x2="82" y2="128" stroke={LN} strokeDasharray="2 3" />
          <line x1="150" y1="22" x2="150" y2="128" stroke={LN} strokeDasharray="2 3" />
          <line x1="218" y1="22" x2="218" y2="128" stroke={LN} strokeDasharray="2 3" />
          <polyline points="14,110 82,110 150,54 218,50 286,108" fill="none" stroke={BRS} strokeWidth="2.5" />
          <polyline points="14,114 48,106 82,112 116,82 150,50 184,42 218,56 252,92 286,114" fill="none" stroke="var(--text-secondary)" strokeWidth="1.5" />
          <text x="48" y="142" fontSize="8.5" fill={T3} textAnchor="middle">①底部</text>
          <text x="116" y="142" fontSize="8.5" fill={RED} textAnchor="middle">②上升</text>
          <text x="184" y="142" fontSize="8.5" fill="#d98a3d" textAnchor="middle">③頭部</text>
          <text x="252" y="142" fontSize="8.5" fill={GRN} textAnchor="middle">④下跌</text>
          <text x="116" y="34" fontSize="8" fill={RED} textAnchor="middle">主升段</text>
          <text x="252" y="40" fontSize="8" fill={GRN} textAnchor="middle">嚴格停損</text>
        </svg>
      );
      default: return null;
    }
  }
  // 指標 → 示意圖 id + 一句具體數字舉例(name 對應 GROUPS 的 it.name)
  const META = {
    "均線(MA)": { dgm: 'ma', eg: "台積電收 1000、月線(20日)在 980 → 股價站上月線,代表這 20 天買的人平均在賺;跌到 970 跌破月線,就是平均開始套牢。" },
    "多頭 / 空頭排列": { dgm: 'align', eg: "現價 1000 > 5日 990 > 20日 970 > 60日 940,由大到小排好 = 多頭排列;反過來(現價最低)就是空頭。" },
    "黃金交叉 / 死亡交叉": { dgm: 'cross', eg: "5日線從下方往上穿過 20日線 = 黃金交叉(偏轉強);由上往下穿 = 死亡交叉(偏轉弱)。盤整時會一直假交叉;而且交叉是落後的,確認時行情常已走一段。" },
    "支撐 / 壓力": { dgm: 'sr', eg: "某股在 100 元附近跌好幾次都守住 → 100 是支撐;漲到 120 都被打回 → 120 是壓力。帶量站穩突破 120 才像真變盤。" },
    "KD 指標": { dgm: 'kd', eg: "K=12、D=18 在 20 以下黃金交叉 → 偏多的參考(不是買進訊號);但若 K 一直黏在 85 以上(鈍化),別當『超買該賣』,強勢股會續噴。" },
    "RSI 指標": { dgm: 'rsi', eg: "RSI=75 屬超買;但強趨勢中可一路 70 以上不回頭,別一看 75 就放空。低於 30 才偏超賣。" },
    "MACD 指標": { dgm: 'macd', eg: "柱狀體由綠翻紅、DIF 由下穿過 MACD = 金叉,中期動能轉強;但你看到時往往已漲一段(它落後)。" },
    "成交量": { dgm: 'vol', eg: "平常一天成交 1000 張,某天突然 5000 張 = 爆量(有題材/大單);掉到 300 張 = 量縮(大家觀望)。要跟它自己比。" },
    "量價關係": { dgm: 'volprice', eg: "價漲量增=越漲越多人買、較健康;漲到高檔爆大量卻漲不動,小心是有人趁機出貨。" },
    "52週高低 / 距高距低": { dgm: 'range52', eg: "一年最高 120、最低 80,現價 116 → 位階很高(接近高點),強勢但追高風險也高。位階高 ≠ 貴。" },
    "乖離率(BIAS)": { dgm: 'bias', eg: "股價 3 天衝到比月線高 20%(正乖離過大)→ 短線常拉回貼近月線;但強勢股可以維持高乖離很久,別純看乖離反向做。" },
    "紅 K / 黑 K": { dgm: 'candle', eg: "開 100、收 105 = 紅K(收高、買方強);開 100、收 96 = 黑K(收低、賣方強)。台股紅漲綠跌,跟歐美相反。" },
    "上下影線": { dgm: 'shadow', eg: "長上影線(盤中衝到 110 又被打回收 102)= 上方有賣壓;長下影線(殺到 95 又拉回收 103)= 下方有買盤承接。" },
    "趨勢四階段(Weinstein)": { dgm: 'stage', eg: "假設 A 股:年線從走平開始上揚、股價站上 → 進入②上升段(順勢者的主場);之後年線轉平、股價衝高卻量縮背離 → 接近③頭部,該居高思危;等到跌破下彎的年線 → ④下跌段,嚴格停損、別越攤越多。" },
  };

  function TechScreen({ onClose, onOpenStock }) {
    const [openKey, setOpenKey] = React.useState(null);

    return (
      <div className="fpage" role="dialog" aria-modal="true" aria-label="技術面入門">
        <div className="fpage__panel">
          <header className="fpage__bar">
            <button className="fpage__cancel" onClick={onClose}><i className="ph ph-arrow-left" aria-hidden="true" />返回</button>
            <span className="fpage__title">技術面入門</span>
            <span aria-hidden="true" />
          </header>
          <div className="fpage__scroll">
            <div className="fpage__body">
              {/* 開場:技術面 vs 基本面 */}
              <section className="fpage__card">
                {/* 先自我檢查(機械式三題)*/}
                <div style={{ border: "2px solid var(--value-negative, #c1503b)", borderRadius: 12, padding: "12px 14px", marginBottom: 14, background: "rgba(193,80,59,0.06)" }}>
                  <div style={{ fontWeight: 700, marginBottom: 8 }}><i className="ph ph-list-checks" aria-hidden="true" /> 先自我檢查(三題全是 Yes 才考慮碰短線)</div>
                  <ol style={{ margin: 0, paddingLeft: 20, lineHeight: 1.6 }}>
                    <li>我的<b>緊急預備金</b>(3~6 個月生活費)已經到位?</li>
                    <li>我的<b>核心長期部位</b>(分散 / 0050 類)已經開始建立、而且不會去動它?</li>
                    <li>這筆要拿來短線的錢,<b>全部賠光也不影響我的生活</b>?</li>
                  </ol>
                  <div style={{ marginTop: 8, fontWeight: 600 }}>三題只要有一個 No,先回去把那塊顧好,技術線型晚點再學。</div>
                </div>
                <p className="prot-sum__note">
                  <b>基本面</b>看「這家公司好不好、值不值得長期持有」;<b>技術面</b>看「現在的價格與時機」,偏短線。
                  技術面是<b>機率與群眾心理,不是預言</b>——同樣訊號有時準有時不準。它適合『用閒錢、嚴設停損』地嘗試,
                  別拿來重壓或預測漲跌。下面先講<b>流派</b>(誰用哪些指標、為什麼),再逐一講指標;<b>教材型、非投資建議,不報買賣訊號</b>。下面每個指標的「舉例」與示意圖都是<b>虛構數字、只為說明形狀</b>,不是對任何個股的判斷。
                </p>
              </section>

              {/* 技術面流派:哪一派用哪些指標(辯論歸納)*/}
              <section className="fpage__card">
                <div className="fpage__card-head"><span className="t-overline"><i className="ph ph-strategy" aria-hidden="true" /> 技術面流派 · 誰用哪些指標</span><span className="fpage__card-hint">點看詳情</span></div>
                <p className="tech-schools__intro">{SCHOOLS_INTRO}</p>
                <div className="tech-schools">
                  {SCHOOLS.map(function (s, i) {
                    const k = "sch:" + i, open = openKey === k;
                    const tags = s.indicators.map(function (x) { return x.split(/[(（]/)[0].trim(); });
                    return (
                      <div key={i} className="tech-school">
                        <button type="button" className={"tech-school__btn" + (open ? " tech-school__btn--open" : "")} onClick={function () { setOpenKey(open ? null : k); }}>
                          <span className="tech-school__head">
                            <span className="tech-school__name">{(i + 1) + ". " + s.name}</span>
                            <i className={"ph " + (open ? "ph-caret-up" : "ph-caret-down")} aria-hidden="true" />
                          </span>
                          <span className="tech-school__logic">{s.logic}</span>
                          <span className="tech-school__tags">{tags.map(function (t, j) { return <span key={j} className="tech-tag">{t}</span>; })}</span>
                        </button>
                        {open && (
                          <div className="tech-school__detail">
                            <div className="tech-row"><b>主要指標</b><ul className="tech-inds">{s.indicators.map(function (ind, j) { return <li key={j}>{ind}</li>; })}</ul></div>
                            <div className="tech-row"><b>操作週期</b><span>{s.horizon}</span></div>
                            <div className="tech-row"><b>適合誰</b><span>{s.suits}</span></div>
                            <div className="tech-row tech-row--risk"><b>主要風險</b><span>{s.risk}</span></div>
                            <div className="tech-row tech-row--note"><b>新手提醒</b><span>{s.beginnerNote}</span></div>
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
                <p className="tech-schools__risk">{SCHOOLS_RISK}</p>
              </section>

              {/* 指標互相矛盾時聽誰的(新手最卡的點)*/}
              <section className="fpage__card">
                <div className="fpage__card-head"><span className="t-overline"><i className="ph ph-intersect" aria-hidden="true" /> 指標互相矛盾時,聽誰的?</span></div>
                <p className="stk-item__desc" style={{ marginTop: 0 }}>
                  新手最容易卡在「均線說多、KD 卻說超買,到底聽誰?」——別把指標當平等投票,記這個<b>三層順序</b>:
                </p>
                <ol className="stk-item__desc" style={{ marginTop: 6, paddingLeft: 20, lineHeight: 1.7 }}>
                  <li><b>方向先看「趨勢類」(均線 / 多空排列):</b>先用它決定現在是偏多、偏空、還是盤整。這是大方向,優先級最高。</li>
                  <li><b>時機才看「擺盪類」(KD / RSI / 乖離):</b>它們只管「在已決定的方向裡,現在相對高還低」。<b>趨勢盤裡 KD/RSI 會鈍化</b>——別拿「超買」去逆勢放空、拿「超賣」去接刀,這是它們最會騙人的地方。</li>
                  <li><b>「量能」是確認、不是方向:</b>突破/跌破有沒有帶量,決定那個訊號可不可信。</li>
                </ol>
                <p className="stk-item__desc" style={{ marginTop: 6 }}>
                  <b>白話結論:趨勢明確時聽方向(均線)、區間盤整時才聽擺盪(KD/RSI);兩邊講不清楚,本身就代表「在盤整、別硬做」。</b>還有一個常見誤會:一堆指標同時喊同一件事,<b>不一定是「多重保險」</b>——它們常出自同一組價量資料(例如 MACD 本來就是均線算出來的),只是同一件事的不同畫法,別把它當成好幾個獨立證據。
                </p>
              </section>

              {GROUPS.map(function (g, gi) {
                return (
                  <section key={gi} className={"fpage__card" + (g.danger ? " tech-card--danger" : "")}>
                    <div className="fpage__card-head">
                      <span className={"t-overline" + (g.danger ? " tech-head--danger" : "")}><i className={"ph " + g.icon} aria-hidden="true" /> {g.title}</span>
                      <span className="fpage__card-hint">點看說明</span>
                    </div>
                    <div className="stk-items">
                      {g.items.map(function (it, ii) {
                        const k = gi + ":" + ii, open = openKey === k;
                        return (
                          <div key={ii} className="stk-item">
                            <button type="button" className="stk-item__btn" onClick={function () { setOpenKey(open ? null : k); }}>
                              <span className="stk-item__name">{it.name}</span>
                              <span className="stk-item__val">{it.gist}</span>
                              <i className={"ph " + (open ? "ph-caret-up" : "ph-question")} aria-hidden="true" />
                            </button>
                            {open && (
                              <div className="stk-item__desc">
                                {META[it.name] && META[it.name].dgm && <Dgm id={META[it.name].dgm} />}
                                {META[it.name] && META[it.name].eg && <p className="tech-eg"><b>舉例:</b>{META[it.name].eg}</p>}
                                {it.desc}
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  </section>
                );
              })}

              {/* 去個股健檢套用 */}
              {onOpenStock && (
                <section className="fpage__card">
                  <p className="prot-sum__note" style={{ marginBottom: 12 }}>想看實際數字?「個股健檢」最下面的<b>技術面</b>已經幫你算好趨勢、位階、動能、KD、RSI、MACD、乖離、量能,點任一項也有同樣的白話說明。</p>
                  <Button variant="primary" onClick={function () { onOpenStock(); }}><i className="ph ph-chart-line-up" aria-hidden="true" /> 去個股健檢看實際指標</Button>
                </section>
              )}

              {/* 白話走查範例(虛構、純教學)*/}
              <section className="fpage__card">
                <details>
                  <summary style={{ cursor: "pointer", fontWeight: 700 }}><i className="ph ph-path" aria-hidden="true" /> 白話走查範例(虛構,純教學)</summary>
                  <div className="stk-item__desc" style={{ marginTop: 10 }}>
                    用口語演一次完整思路(以「波段順勢」那派為例):<br />
                    假設 A 股:<b>年線(240日)向上</b>、且 <b>5&gt;20&gt;60 多頭排列</b> → 方向偏多。<br />
                    回檔到月線(20日)時<b>量縮、沒破</b> → 像健康洗盤,我「<b>觀察</b>」而不是追高。<br />
                    如果<b>跌破月線又帶量</b> → 訊號轉弱,我會<b>降低關注</b>。<br />
                    <span style={{ display: "block", marginTop: 8, fontWeight: 600 }}>這是教你「看懂市場在說什麼」,不是叫你照這個進出。</span>
                  </div>
                </details>
              </section>

              {/* 一句話總結(獨立醒目條)*/}
              <section className="fpage__card" style={{ borderLeft: "4px solid var(--accent-brass, #b08d57)", background: "rgba(176,141,87,0.08)" }}>
                <p className="stk-note" style={{ fontWeight: 600 }}><i className="ph ph-seal-check" aria-hidden="true" /> <b>一句話總結:</b>對絕大多數新手,長期最可靠的不是學會這些技術指標去進出,而是把錢放進<b>分散的核心部位長抱</b>;這頁的指標主要價值是讓你「看懂市場在說什麼、別被人唬」,不是把你變成當沖客。</p>
              </section>

              {/* 免責 */}
              <section className="fpage__card stk-disclaim">
                <p className="stk-note">本頁為技術分析的<b>教育說明</b>,不構成投資建議、不推薦任何買賣時機或標的。技術面僅供短線參考且常失靈,投資前請自行判斷並嚴格控管風險(停損、部位、用閒錢)。長期而言,顧好分散的核心部位與紀律,比頻繁進出更可靠。</p>
              </section>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.TechScreen = TechScreen;
})();