/* TradingDNA · 交易者筆記「個案筆記」皮（2026-09-21，WO_20260921_notes-casefile）
   用在 /notes 列表頁＋7 篇文章。取代原本每篇各自內嵌、三個版本的 574–654 行 CSS。
   全站原則：同一份檔案、每站不同房間、每頁一個招牌效果。
   這裡的房間＝「個案筆記」：每一篇是一份針對反覆出現的交易問題寫的紀錄，而且已經有人讀過、劃過線。
   招牌效果只有一個：正文粗體核心句捲進視窗時，底下畫出一條金色底線（由 notes-casefile.js 觸發）。
   其餘刻意安靜：髮線分段、無框、無卡片、無陰影、無漸層、無閃爍。

   色票與字族：變數名與值照抄 casefile-pages.css 的 :root（不 @import、不改那份檔）。
   ⚠ 刻意沒抄四語字族補丁：筆記只有繁中，loader 走 landing fallback 時可能把 <html lang> 換成 en／ko，
     若跟著換字族，中文正文會被韓文／英文字型接手。所以這裡的字族永遠是 TC。 */

:root{--ink:#0a0b0d;--bone:#e9e3d5;--ash:#a6a296;--v2gold:#c9a24a;--v2gold2:#e8c874;--v2line:rgba(233,227,213,.18);--v2gut:24px;--v2serif:'TDNA Punct','Noto Serif TC','PMingLiU',serif;--v2sans:'TDNA Punct Sans','Noto Sans TC',sans-serif;--v2mono:'IBM Plex Mono',monospace;color-scheme:dark}

/* 筆記自己的語意色與尺寸 */
.nc-page{--nc-text:#c6c1b6;--nc-col:626px;--nc-mark:var(--v2gold)}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;max-width:100%;background:var(--ink)}
body.nc-page{margin:0;background:var(--ink);color:var(--nc-text);font-family:var(--v2serif);font-size:17px;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;position:relative}
:where(.nc-page) :where(h1,h2,h3,p,ul){margin:0;padding:0} /* :where＝零權重，不蓋掉下面各元件自己的 margin */
:where(.nc-page) a{color:inherit} /* 零權重：不能蓋掉 .cta-btn／.header-logo 自己的顏色 */
.nc-page ::selection{background:var(--v2gold);color:var(--ink)}
.nc-page :focus-visible{outline:2px solid var(--v2gold2);outline-offset:4px}

/* ── 頁首：左 ◆ TRADINGDNA，右一條回列表（列表頁＝開始診斷） ───────────── */
.site-header{max-width:var(--nc-col);margin:0 auto;padding:28px var(--v2gut) 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.header-logo{display:inline-flex;align-items:center;gap:10px;padding:10px 0;color:var(--v2gold2);text-decoration:none;white-space:nowrap}
.header-logo .logo-icon{width:22px;height:22px;flex:none}
@media(max-width:360px){.header-logo .logo-icon{width:18px;height:18px}}
.header-logo-text{font:500 11px/1 var(--v2mono);letter-spacing:.24em}
.header-logo-text span{color:inherit}
.header-back,.header-cta{font:400 12px/1.6 var(--v2mono);letter-spacing:.04em;color:var(--ash);text-decoration:none;padding:10px 0;white-space:nowrap}
.header-cta{color:var(--v2gold2)}
.header-back:hover,.header-logo:hover,.header-cta:hover{color:var(--v2gold2)}
.header-cta:hover{text-decoration:underline;text-underline-offset:5px}

/* ═════════════════════ 文章頁 ═════════════════════ */
.article-shell{max-width:var(--nc-col);margin:0 auto;padding:64px var(--v2gut) 24px;display:flex;flex-direction:column}
/* 表頭視覺順序：眉標 → 髮線 → h1 → meta（DOM 裡 meta 在 h1 前面，只用 order 換位，不搬節點） */
.nc-eyebrow{order:-2;font:400 11px/1.6 var(--v2mono);letter-spacing:.24em;color:var(--v2gold);text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--v2line)}
.article-title{order:-1;margin-top:26px;font:900 clamp(28px,7.2vw,42px)/1.35 var(--v2serif);color:var(--bone);letter-spacing:.01em;text-wrap:balance}
.article-meta{margin:16px 0 40px;font:400 11px/1.8 var(--v2mono);letter-spacing:.14em;color:var(--ash)}

/* TL;DR：不做框，上金線、下灰線夾住（同退款頁保證句）。它是 AI snippet 的來源，位置與文字不動 */
.article-tldr{margin:0 0 48px;padding:22px 0 20px;border-top:1px solid var(--v2gold);border-bottom:1px solid var(--v2line)}
.article-tldr-body p{font:500 19px/1.8 var(--v2serif);color:var(--bone)}
.article-tldr-body p+p{margin-top:4px}

/* 正文：讀的頁面——襯線 17px／行高 1.9／欄寬 ≤ 34em */
.article-body{max-width:34em;font-size:17px;line-height:1.9;color:var(--nc-text)}
.article-body p{margin-bottom:18px}
.article-body h2{margin:0 0 20px;font:700 23px/1.5 var(--v2serif);color:var(--bone);text-wrap:balance}
.article-body>h2:first-child{margin-top:8px}
.article-body h3{margin:44px 0 14px;font:700 19px/1.6 var(--v2serif);color:var(--bone);text-wrap:balance}
.article-body ul{list-style:none;margin:0 0 22px}
.article-body li{padding:10px 0;border-top:1px solid var(--v2line)}
.article-body li:last-child{border-bottom:1px solid var(--v2line)}
.article-body a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--v2gold);text-underline-offset:5px}

/* 分段：大段＝整條髮線；小場景＝一小截金色髮線 */
.nc-page hr{border:0;margin:0}
.nc-page .section-divider{height:1px;background:var(--v2line);margin:56px 0}
.nc-page .scene-divider{width:36px;height:1px;background:var(--v2gold);opacity:.55;margin:34px 0}

/* ★ 招牌效果：劃線
   預設＝已經畫好（100%）。只有 notes-casefile.js 在場、而且沒有 reduced-motion 時，
   才先把句子收成 0%（.nc-pending），捲進視窗再畫（.nc-drawn）。順序不能反——沒 JS 時重點不能消失。
   粗體本身不再又粗又金：bone 色、500 字重，重點交給那條線。 */
.article-body strong,.article-body b{color:var(--bone);font-weight:500;background-image:linear-gradient(var(--nc-mark),var(--nc-mark));background-repeat:no-repeat;background-position:0 100%;background-size:100% 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:3px}
.article-body strong.nc-plain,.article-body b.nc-plain{background-image:none;padding-bottom:0}
.article-body strong.nc-pending,.article-body b.nc-pending{background-size:0% 2px}
.article-body strong.nc-drawn,.article-body b.nc-drawn{background-size:100% 2px;transition:background-size 1000ms cubic-bezier(.22,.61,.36,1)}

/* CTA：拿掉卡片框；上下髮線、置中、全頁唯一實心金鈕 */
.article-cta-block{margin:64px 0 0;padding:44px 0 48px;border-top:1px solid var(--v2line);border-bottom:1px solid var(--v2line);text-align:center}
.cta-headline{margin:0 0 22px;font:700 clamp(22px,5.6vw,27px)/1.55 var(--v2serif);color:var(--bone);text-wrap:balance}
.cta-body{font-size:16px;line-height:1.85;color:var(--nc-text);margin-bottom:30px}
.cta-body p{margin-bottom:12px}
.cta-body ul{list-style:none;display:inline-block;margin:6px 0 0;padding:0;text-align:left}
.cta-body li{position:relative;padding:8px 0 8px 22px;border-top:1px solid var(--v2line)}
.cta-body li:last-child{border-bottom:1px solid var(--v2line)}
.cta-body li::before{content:'◆';position:absolute;left:2px;top:13px;font-size:8px;line-height:1;color:var(--v2gold)}
.cta-body strong{color:var(--bone);font-weight:500}
.cta-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;max-width:100%;padding:14px 32px;color:#17120a;background:linear-gradient(180deg,var(--v2gold2),var(--v2gold));font:900 18px/1.5 var(--v2serif);letter-spacing:.02em;text-decoration:none;border:0;border-radius:0}
.cta-btn:hover{background:var(--v2gold2)}

/* FAQ：從「終端機」改成檔案裡的問答紀錄。開合行為與 DOM 不動，只換樣式 */
.faq-section{padding:64px 0 8px}
.faq-header{margin-bottom:18px}
.faq-header .overline{display:block;font:400 11px/1.6 var(--v2mono);letter-spacing:.24em;color:var(--v2gold);text-transform:uppercase;margin-bottom:10px}
.faq-header h2{font:700 24px/1.5 var(--v2serif);color:var(--bone)}
.faq-console-frame{border:0;background:none;padding:0}
.faq-console-header{padding:0 0 14px;border-bottom:1px solid var(--v2line);font:400 11px/1.6 var(--v2mono);letter-spacing:.18em;color:var(--ash);text-transform:uppercase}
.faq-console-header .gold{color:var(--v2gold)}
.protocol{border-bottom:1px solid var(--v2line)}
.protocol-row{display:grid;grid-template-columns:22px 40px 1fr 20px;align-items:baseline;column-gap:14px;width:100%;min-height:44px;padding:18px 0;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.protocol-status{font:400 10px/1 var(--v2mono);color:var(--ash);opacity:.7;white-space:pre}
.protocol-num{font:500 12px/1 var(--v2mono);letter-spacing:.08em;color:var(--v2gold)}
.protocol-num::before{content:'Q.'}
.protocol-title{font:500 17px/1.6 var(--v2serif);color:var(--bone)}
.protocol-toggle{font:400 16px/1 var(--v2mono);color:var(--ash);text-align:right;transition:transform .3s ease}
.protocol-row:hover .protocol-title,.protocol.expanded .protocol-title{color:var(--v2gold2)}
.protocol.expanded .protocol-toggle{transform:rotate(45deg)}
.protocol-content{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.25,.1,.25,1)}
.protocol.expanded .protocol-content{max-height:2000px}
.protocol-content-inner{margin:0 0 24px 90px;padding:2px 0 2px 18px;border-left:1px solid var(--v2gold)}
.protocol-q{margin-bottom:10px;font:400 14px/1.8 var(--v2serif);color:var(--ash)}
.protocol-a{font-size:16px;line-height:1.9;color:var(--nc-text);white-space:pre-wrap}
.protocol-a strong{color:var(--bone);font-weight:500}
.protocol-a::after{content:none}

/* closing：無框、不斜體（中文斜體是假斜），兩條髮線之間一段安靜的話 */
.article-closing{margin:56px 0 0;padding:32px 0;border-top:1px solid var(--v2line);border-bottom:1px solid var(--v2line);text-align:center;font-size:17px;line-height:1.9;color:var(--nc-text)}
.article-closing p+p{margin-top:14px}
.article-closing strong{color:var(--bone);font-weight:500}

/* Note 07 起的「帶走的三個問題」：上金線、下灰線 */
.article-take-home{margin:48px 0 0;padding:26px 0 22px;border-top:1px solid var(--v2gold);border-bottom:1px solid var(--v2line)}
.article-take-home p{font:500 17px/1.95 var(--v2serif);color:var(--bone);margin-bottom:12px}
.article-take-home p:first-child{font:400 11px/1.6 var(--v2mono);letter-spacing:.24em;color:var(--v2gold);text-transform:uppercase;margin-bottom:16px}
.article-take-home p:last-child{margin:18px 0 0;font:400 14px/1.9 var(--v2serif);color:var(--ash)}

/* care line：一個人輕聲說的一句話——上一條髮線、ash 小字、電話數字 bone。不像廣告、不像警告 */
.article-care-note{margin:40px 0 0;padding:20px 0 0;border-top:1px solid var(--v2line);text-align:center;font:400 13.5px/1.95 var(--v2sans);color:var(--ash);text-wrap:pretty}
.article-take-home+.article-care-note,.article-closing+.article-care-note{margin-top:0;border-top:0} /* 上一塊已有下髮線，不疊兩條 */
.article-care-note strong{color:var(--bone);font-weight:500}

.article-footer-note{margin-top:32px;text-align:center;font:400 11px/1.8 var(--v2mono);letter-spacing:.14em;color:var(--ash)}

/* 繼續看：三張卡 → 髮線清單 */
.related-notes{margin:56px 0 0}
.related-notes-header{margin-bottom:10px;font:400 11px/1.6 var(--v2mono);letter-spacing:.24em;color:var(--v2gold);text-transform:uppercase}
.related-notes-grid{display:block}
.related-note-card{display:grid;grid-template-columns:76px 1fr;column-gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--v2line);text-decoration:none}
.related-note-card:last-child{border-bottom:1px solid var(--v2line)}
.related-note-num{font:400 11px/1.6 var(--v2mono);letter-spacing:.12em;color:var(--v2gold)}
.related-note-title{font:500 16px/1.7 var(--v2serif);color:var(--bone)}
.related-note-card:hover .related-note-title{color:var(--v2gold2)}

/* ═════════════════════ 頁尾（照附錄頁殼：髮線一列） ═════════════════════ */
.site-footer{max-width:var(--nc-col);margin:64px auto 0;padding:0 var(--v2gut) 56px}
.site-footer::before{content:'';display:block;height:1px;background:var(--v2line);margin-bottom:24px}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:18px}
.footer-links a{font:400 12px/2 var(--v2mono);letter-spacing:.04em;color:var(--ash);text-decoration:none}
.footer-links a:hover{color:var(--v2gold2)}
.footer-copyright{font:400 11px/1.8 var(--v2mono);letter-spacing:.08em;color:var(--ash)}
.footer-disclaimer{margin-top:8px;font:400 12px/1.8 var(--v2sans);color:var(--ash);opacity:.85}

/* ═════════════════════ 列表頁：檔案索引 ═════════════════════ */
.notes-hero{max-width:var(--nc-col);margin:0 auto;padding:64px var(--v2gut) 0}
.notes-overline{font:400 11px/1.6 var(--v2mono);letter-spacing:.24em;color:var(--v2gold);text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--v2line)}
.notes-title{margin-top:26px;font:900 clamp(32px,8vw,44px)/1.3 var(--v2serif);color:var(--bone);letter-spacing:.02em}
.notes-subtitle{margin-top:16px;font-size:17px;line-height:1.9;color:var(--nc-text)}
.notes-ornament{margin-top:20px;font-size:11px;line-height:1;color:var(--v2gold);opacity:.6}

.notes-list-shell{max-width:var(--nc-col);margin:0 auto;padding:44px var(--v2gut) 0}
.notes-list-header{padding-bottom:14px;border-bottom:1px solid var(--v2line);font:400 11px/1.6 var(--v2mono);letter-spacing:.18em;color:var(--ash);text-transform:uppercase}
.notes-list-header .gold{color:var(--v2gold)}
.note-card{display:grid;grid-template-columns:1fr;padding:26px 0 24px;border-bottom:1px solid var(--v2line);text-decoration:none;color:inherit}
.note-card-meta{font:400 11px/1.8 var(--v2mono);letter-spacing:.1em;color:var(--ash)}
.note-card-num{color:var(--v2gold);letter-spacing:.14em}
.note-card-title{margin-top:8px;font:700 clamp(19px,4.8vw,22px)/1.55 var(--v2serif);color:var(--bone);text-wrap:balance;transition:color .2s ease}
.note-card:hover .note-card-title{color:var(--v2gold2)}
.note-card-excerpt{margin-top:10px;font:400 15px/1.85 var(--v2serif);color:var(--ash)}
.note-card-footer{margin-top:12px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.note-card-tags{display:flex;flex-wrap:wrap;gap:4px 14px}
.note-card-tag{font:400 11px/1.8 var(--v2mono);letter-spacing:.04em;color:var(--ash);opacity:.8}
.note-card-arrow{font:400 13px/1 var(--v2mono);color:var(--v2gold)}

.brand-line{max-width:var(--nc-col);margin:0 auto;padding:48px var(--v2gut) 0}
.brand-line p{padding:28px 0;border-top:1px solid var(--v2gold);border-bottom:1px solid var(--v2line);font:500 17px/1.9 var(--v2serif);color:var(--nc-text);text-align:center}
.brand-line strong{color:var(--bone);font-weight:500}

/* ═════════════════════ 窄螢幕／系統偏好 ═════════════════════ */
@media (max-width:420px){
  .notes-hero{padding-top:44px}
  /* 手機：正文回到舊版的閱讀密度（16px／1.85）——17px／1.9 在 390 寬會讓整頁比舊版長 8–9%（判準 8），
     ≥421 仍是 17px／1.9。 */
  .article-body{font-size:16px;line-height:1.85}
  .article-body p{margin-bottom:16px}
  .article-body h2{font-size:21px}
  .article-body h3{margin-top:36px}
  .article-closing,.article-take-home p{font-size:16px}
  .nc-page .section-divider{margin:40px 0}
  .nc-page .scene-divider{margin:26px 0}
  .article-shell{padding-top:36px}
  .article-meta{margin-bottom:32px}
  .article-tldr{margin-bottom:36px}
  .article-cta-block{margin-top:48px;padding:36px 0 40px}
  .faq-section{padding-top:48px}
  .article-closing,.related-notes{margin-top:44px}
  .site-footer{margin-top:48px}
  .protocol-row{grid-template-columns:20px 34px 1fr 18px;column-gap:10px}
  .protocol-content-inner{margin-left:0}
  .related-note-card{grid-template-columns:64px 1fr}
}
@supports (padding:env(safe-area-inset-top)){
  .site-header{padding-top:max(28px,env(safe-area-inset-top))}
  .site-footer{padding-bottom:max(56px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .article-body strong,.article-body b{transition:none!important;background-size:100% 2px!important}
  .protocol-content,.protocol-toggle,.note-card-title{transition:none}
}