// 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: "當『股價 > 月線 > 季線 > 年線』由上往下整齊排好 → 多頭排列,代表短中長期買進者都在賺、趨勢向上;完全相反(股價 < 月 < 季 < 年)→ 空頭排列,趨勢向下。三條交纏在一起 → 盤整、方向未明。多頭排列順勢操作勝率較高,但別追到末端;盤整時均線參考度低。" },
        { name: "黃金交叉 / 死亡交叉", gist: "短均線穿越長均線", desc: "短期均線『由下往上』穿過長期均線 → 黃金交叉(轉強的訊號);『由上往下』穿過 → 死亡交叉(轉弱)。常被當作進出參考,但它是落後訊號:等你看到交叉,行情往往已經走一段了。盤整時會頻繁假交叉,別當必買必賣。" },
        { name: "支撐 / 壓力", gist: "跌不太下去 / 漲不太上去的價位", desc: "股價跌到某個區間常常止跌反彈 → 那裡是『支撐』(下方有人想買);漲到某個區間常常賣壓湧現 → 那裡是『壓力』(上方有人想解套或獲利了結)。前波低點、整數關卡、重要均線都常成為支撐壓力。『有效突破壓力』或『跌破支撐』常伴隨變盤,但假突破也很多,要看量能配合。" },
      ],
    },
    {
      icon: "ph-gauge", title: "動能 · 超買超賣", items: [
        { name: "KD 指標", gist: "0~100 短線溫度計", desc: "衡量近期收盤價落在這段高低區間的相對位置。低於 20 偏冷(超賣、可能跌過頭)、高於 80 偏熱(超買、可能漲過頭)。K 值上穿 D 值偏多、下穿偏空。⚠️『鈍化』:強勢股可以一直 >80 還繼續噴、弱股一直 <20 還繼續探底,所以 KD 高/低不等於該賣/該買。" },
        { name: "RSI 指標", gist: "0~100 漲跌力道占比", desc: "把近期『上漲的力道』占總波動的比例算成 0~100。一般 >70 視為超買、<30 超賣,概念跟 KD 類似但算法不同,常一起對照。同樣會鈍化:強趨勢中 RSI 可長期高檔。RSI 與股價的『背離』(股價創新高但 RSI 沒有)有時是動能轉弱的提醒,但不是必然。" },
        { name: "MACD 指標", gist: "中期動能與多空方向", desc: "由兩條不同長度的指數均線相減而來,看『中期動能』。MACD 在零軸之上偏多、之下偏空;快線(DIF)上穿慢線 → 金叉(動能轉強)、下穿 → 死叉(轉弱);中間的柱狀體(柱子)由負轉正代表動能回升、由正轉負代表轉弱。比 KD 慢、雜訊較少,適合抓中期方向,但轉折也較慢。" },
      ],
    },
    {
      icon: "ph-chart-bar", title: "量能 · 買賣熱度", items: [
        { name: "成交量", gist: "這檔有多少人在交易", desc: "成交量=當期買賣的張數,反映關注度與買賣力道。突然『爆量』通常代表有題材、有大單進出、或要變盤;『量縮』代表大家在觀望。量是價的先行/確認訊號之一,但要跟價格一起讀,單看量意義有限。" },
        { name: "量價關係", gist: "價漲要配量增才健康", desc: "『價漲量增』=越漲越多人想買,較健康;『價漲量縮』=往上追的人變少,要留意是否無力;『低檔爆量止跌』可能是落底訊號;『高檔爆量但價漲不動』可能是有人趁機出貨。記住:量價背離(價量走相反)常是轉折的提醒。" },
      ],
    },
    {
      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%,或跌破關鍵均線/支撐就出),並且真的執行。沒有停損紀律,一次大賠就吃掉很多次小賺。" },
        { name: "部位大小 · 只用閒錢", gist: "別壓太重、別動到核心", desc: "短線嘗試的部位要小,單一檔別壓太重;用的是『輸了不影響生活的閒錢』,不要動到你正在建立的核心長期持股、緊急預備金或要用的錢。先把基本盤(分散的長期部位+預備金)顧好,再拿一小部分玩。" },
        { 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%(有期限的優惠、用前查最新規定),一趟來回仍有成本,進出越頻繁被吃越多。⑤ 工具限制——日線收盤級、沒有即時/分時/籌碼,突破與接刀尤其受限,需另尋資料。以上全是教材、不是買賣訊號或明牌,要不要動、自己判斷自己承擔。";

  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">
                <p className="prot-sum__note">
                  <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>

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

  window.TechScreen = TechScreen;
})();
