:root{
  /* 배치 21 — 바다 팔레트로 통일 (TOM: 골드 아웃, 하늘하늘한 배경, 플랫).
     --gold 변수명은 그대로 두고 값만 딥오션 틸로 바꿨다 — 참조하는 곳이 많아서. */
  /* 배치 31 (접근성) — --dim 8B95A0 은 흰 배경 대비 3.04:1 로 기준(4.5) 미달.
     67717D 는 흰 배경 4.96:1 · --bg 4.64:1 로 작은 글씨에도 통과한다. */
  /* 배치 G4 — TOM: "회색 글씨는 안 보인다". 실측 결과 화면 글자의 40%가
     회색이었다. 쓰는 자리를 줄이는 것과 별개로, 회색 자체를 읽히게 낮춘다
     (배경 최저 대비 --mut 5.38→7.51 · --dim 4.56→6.32, 색조는 유지). */
  --ink:#1C2A36; --body:#2C3540; --mut:#48505A; --dim:#535B65;
  --line:#DEE6EC; --soft:#F1F6FA; --paper:#FFFFFF; --bg:#F4F8FB;
  --up:#C0392B; --dn:#2C6FBB; --gold:#0E7490;
  --sell:#B3352E; --grn:#1F6B4A; --or:#A95518;
  /* 배치 G1 — '--ink 배경 위 글자'와 '--cta 배경 위 글자'를 변수로 못 박는다.
     여태 #fff 를 직접 썼는데, 다크에서 --ink 가 밝은색으로 뒤집히면 흰 바탕에
     흰 글자가 된다. F2 에서 6곳 고쳤는데도 9곳이 더 남아 재발했다.
     앞으로 --ink/--cta 배경에는 반드시 이 두 변수를 쓴다. */
  --onink:#FFFFFF; --oncta:#FFFFFF; --onsolid:#FFFFFF;
  /* 배치 34 (다크 모드) — 파생 변수: 반투명 배경·네비 배경 */
  --navbg:rgba(248,252,254,.92);
  --paper-tr:rgba(255,255,255,.86);
  --shadow:rgba(28,42,54,.08);
  --scrollhint:rgba(28,42,54,.30);   /* 배치 35 — 표 가로 스크롤 그림자 (잘 보이게) */
  /* 배치 35 (디자인) — "눌러야 할 것"의 색. 브랜드 틸을 CTA 로 승격 —
     제목(잉크)과 버튼이 같은 색이면 시선이 갈 곳을 잃는다. */
  --cta:#0E7490; --cta-hover:#0C6480;
}
/* ── 배치 34 — 다크 모드. 트레이딩 도구는 밤에 쓴다.
   기본은 시스템 설정을 따르고, 네비의 🌙/☀️ 버튼으로 고정할 수 있다. ── */
html[data-theme="dark"]{
  --ink:#E9EEF3; --body:#C9D2DB; --mut:#BCC5CC; --dim:#A9B2B9;
  --line:#2C3843; --soft:#222D38; --paper:#1A232C; --bg:#11181F;
  /* 배치 G1 — 대비 검사기(tools/contrast.py)로 실측해 미달분을 올렸다.
     이전값은 --paper/--soft 위에서 3.77~4.42:1 로 WCAG AA(4.5) 미달이었다.
     아래는 세 배경(bg/paper/soft) 최저 대비가 모두 5.0 이상이 되도록 계산한 값. */
  --up:#E77C71; --dn:#6A9EDB; --gold:#35B5CF;
  --sell:#E77C71; --grn:#45AD7A; --or:#E08A3C;
  --onink:#11181F; --oncta:#11181F; --onsolid:#11181F;
  --navbg:rgba(17,24,31,.92);
  --paper-tr:rgba(26,35,44,.88);
  --shadow:rgba(0,0,0,.4);
  --scrollhint:rgba(0,0,0,.65);
  --cta:#1996B5; --cta-hover:#22A8C8;
  color-scheme:dark;
}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{
  background:var(--paper);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .navbtn{background:var(--gold);}
/* 경고·안내 박스(인라인 색) — 다크에서 톤 다운 */
html[data-theme="dark"] .stalewarn{background:#3A2320;color:#F0A79C}
html[data-theme="dark"] .msg.ok{background:#1E3328;color:#7ED2A5}
html[data-theme="dark"] .msg.err{background:#3A2320;color:#F0A79C}
html[data-theme="dark"] [style*="background:#FBF8EF"]{background:#332E1E !important;border-color:#4E4630 !important}
html[data-theme="dark"] [style*="background:#FDF4EC"]{background:#33291E !important;color:#E0A96E !important}
html[data-theme="dark"] [style*="background:#FBEDEC"]{background:#3A2320 !important}
html[data-theme="dark"] [style*="background:#EAF6EF"]{background:#1E3328 !important}
html[data-theme="dark"] [style*="background:#EDF5F8"]{background:#1E3038 !important;border-color:#2E4A56 !important}
html[data-theme="dark"] [style*="background:#F0F1F3"]{background:var(--soft) !important}
/* 얼리버드·실적경고 크림 박스 (plans·my) — 다크에서 읽히게 */
html[data-theme="dark"] [style*="background:#FBF6E9"]{background:#332E1E !important;border-color:#4E4630 !important}
/* learn 첫 그림 배경 — 다크에서 밝은 하늘색 카드가 뜨지 않게 */
html[data-theme="dark"] svg rect[fill="#EAF3FA"]{fill:#1E3038}
/* report — 모델 보유 칩·후보 주의 박스 (inline) */
html[data-theme="dark"] [style*="background:#EAF3EC"]{background:#1E3328 !important;border-color:#2E4A3A !important;color:#7ED2A5 !important}
html[data-theme="dark"] [style*="background:#FBF6EA"]{background:#332E1E !important}
/* 차트 SVG — 정확한 색 값을 가진 요소만 뒤집는다 (색깔 있는 선·글자는 그대로) */
html[data-theme="dark"] svg text[fill="#1C2A36"]{fill:#E9EEF3}
html[data-theme="dark"] svg text[fill="#14181D"]{fill:#E9EEF3}
html[data-theme="dark"] svg text[fill="#40474F"]{fill:#C9D2DB}
html[data-theme="dark"] svg text[fill="#5A626B"]{fill:#9AA7B2}
html[data-theme="dark"] svg line[stroke="#F1F3F5"]{stroke:#26313C}
html[data-theme="dark"] svg rect[fill="#F7F8F9"]{fill:#222D38}
html[data-theme="dark"] svg rect[fill="#F0F1F3"]{fill:#222D38}
html[data-theme="dark"] svg path[fill="#F7F8F9"]{fill:#222D38}
html[data-theme="dark"] svg path[stroke="#14181D"]{stroke:#E9EEF3}
html[data-theme="dark"] svg path[stroke="#1C2A36"]{stroke:#E9EEF3}
html[data-theme="dark"] svg circle[fill="#1C2A36"]{fill:#E9EEF3}
/* 홈 파도 배경 — 다크에선 밤바다로 */
html[data-theme="dark"] svg path[fill="#E4EFF7"]{fill:#182634}
html[data-theme="dark"] svg path[fill="#D4E6F2"]{fill:#1D3040}
html[data-theme="dark"] svg path[fill="#C3DCEC"]{fill:#24404F}
html[data-theme="dark"] svg path[fill="#DEE6ED"]{fill:#243240}
html[data-theme="dark"] svg rect[fill="#F4F8FB"]{fill:#222D38}
*{box-sizing:border-box;margin:0;padding:0}
/* 배치 31 (접근성) — 키보드 초점 표시. 예전엔 :focus-visible 규칙이 0개라
   탭 키로 다니는 사람은 지금 어디에 있는지 알 수 없었다. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
/* 배치 35 — 페이지 진입 페이드 (opacity 만 — 합성 단계라 60fps) */
@media (prefers-reduced-motion: no-preference){
  body{animation:tgPageIn .3s ease}
}
@keyframes tgPageIn{from{opacity:.35}to{opacity:1}}
.searchbox input:focus-visible,.qbox input:focus-visible{outline:none}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"Pretendard","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  color:var(--body);background:var(--bg);font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
  /* 배치 36 — 한국어 단어가 중간에서 잘려 줄바꿈되던 것("옵니 다") 금지.
     긴 영단어·URL 은 overflow-wrap 이 안전하게 자른다. */
  word-break:keep-all;overflow-wrap:break-word;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}
.narrow{max-width:680px}

/* nav */
nav{border-bottom:1px solid var(--line);position:sticky;top:0;
    background:var(--navbg);backdrop-filter:blur(8px);z-index:50}
/* 가로 스크롤(overflow-x:auto)로 버티던 것을 걷어냈다. 페이지가 10개로 늘면
   스크롤은 해결책이 아니라 '메뉴가 화면 밖에 있다'는 뜻이 된다.
   대신 좁아지면 우선순위가 낮은 링크부터 접고, 전부는 메뉴 패널에 둔다. */
nav .navbar{display:flex;align-items:center;gap:20px;height:58px}
.logo{font-weight:800;letter-spacing:.14em;font-size:14px;color:var(--ink);flex:none}
nav a.t{font-size:14px;color:var(--mut);padding:4px 0;border-bottom:2px solid transparent;
        white-space:nowrap;flex:none}
nav a.t:hover{color:var(--ink)}
nav a.t.on{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}
nav .sp{flex:1}
.navbtn{font-size:14.5px;font-weight:700;color:#fff;background:var(--cta);
        padding:7px 14px;border-radius:8px;flex:none;white-space:nowrap;
        transition:background .15s ease}
.navbtn:hover{background:var(--cta-hover)}

/* 메뉴 버튼 */
.menubtn{display:flex;align-items:center;gap:8px;font:inherit;font-size:15.5px;
  font-weight:800;color:var(--ink);background:none;border:0;cursor:pointer;
  padding:7px 6px;margin-right:4px;flex:none;white-space:nowrap;line-height:1}
.menubtn:hover,.menubtn.on{color:var(--ink)}
.mbars{width:18px;height:13px;flex:none;position:relative}
.mbars::before,.mbars::after{content:"";position:absolute;left:0;right:0;height:2px;
  background:currentColor;border-radius:2px}
.mbars::before{top:1px}
.mbars::after{bottom:1px}
.menubtn.on .mbars::before{top:6px}
.menubtn.on .mbars::after{bottom:5px}

/* ── 메뉴 (H3, TOM) — 오른쪽 세로 드로어 ─────────────────────
   예전: nav 안 absolute + 가로 5열 그리드 + 기본 접힘.
   열이 좁아 글자를 못 키웠고(제목 13px / 소제목 10.5px / 링크 14.5px 회색),
   기본이 접힘이라 메뉴를 열어도 탭이 하나도 안 보였다.
   지금: 화면 오른쪽에 붙는 세로 목록. 전부 펼친 채로 열리고,
   계층을 2단으로 줄여 제목 17px · 링크 16.5px 로 키웠다. */
.navscrim{position:fixed;inset:0;background:rgba(10,14,19,.46);z-index:60;
  opacity:0;transition:opacity .18s ease}
.navscrim.on{opacity:1}
.navscrim[hidden]{display:none}

.navpanel{position:fixed;top:0;right:0;bottom:0;width:min(400px,88vw);z-index:61;
  background:var(--paper);border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .2s cubic-bezier(.22,.61,.36,1);
  box-shadow:-20px 0 48px rgba(10,14,18,.18)}
.navpanel.on{transform:none}
.navpanel[hidden]{display:none}

.nphead{display:flex;align-items:center;gap:10px;flex:none;
  padding:15px 20px 12px;border-bottom:1px solid var(--line)}
.nphead b{font-size:17px;font-weight:800;color:var(--ink)}
.npclose{margin-left:auto;font:inherit;font-size:20px;line-height:1;color:var(--ink);
  background:none;border:0;cursor:pointer;padding:8px 10px;border-radius:9px}
.npclose:hover{background:var(--soft)}

.navpanel-in{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:2px 0 30px}
.ng{border-bottom:1px solid var(--line)}
.ng:last-child{border-bottom:0}
/* 그룹 제목 — 13px 대문자 자간 .11em 이던 것을 17px 굵은 본문색으로 */
.ngh{display:flex;align-items:center;gap:9px;width:100%;font:inherit;font-size:17px;
  font-weight:800;color:var(--ink);letter-spacing:0;text-transform:none;
  background:none;border:0;cursor:pointer;padding:13px 20px 7px;text-align:left}
.ngh:hover{color:var(--gold)}
/* 세모 — 11px --dim 이던 것을 19px 본문색으로 (TOM) */
.ngh .ngar{margin-left:auto;font-size:19px;line-height:1;color:var(--ink);
  transition:transform .16s ease}
.ngh.open .ngar{transform:rotate(180deg)}
.nghere{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.ngbody{padding:0 0 8px}
.ngbody[hidden]{display:none}
/* 링크 — 14.5px 회색이던 것을 16.5px 본문색 · 최소 44px 높이로 */
a.ngl{display:flex;align-items:center;min-height:40px;font-size:16.5px;
  color:var(--ink);padding:5px 20px;line-height:1.35;
  border-left:3px solid transparent}
a.ngl:hover{background:var(--soft)}
a.ngl.on{font-weight:800;border-left-color:var(--gold);background:var(--soft)}

/* ── 배치 K — 오늘의 관문 깔때기 (SVG → HTML) ────────────────────
   SVG 로 그리면 좁은 화면에서 그림째로 줄어들어 글자가 6~8px 로 찍혔다.
   HTML 로 그리면 막대만 줄고 글자는 제 크기를 지킨다. */
.funnel2{max-width:660px;margin:6px 0 14px}
.fnrow{display:grid;grid-template-columns:1fr;gap:5px;padding:11px 0;
  border-top:1px solid var(--line)}
.fnrow:first-child{border-top:0}
/* 배치 M56 — dataviz 마크 규격: 두꺼운 통짜(30px) → 얇은 막대(14px),
   데이터 끝만 둥글게. 숫자가 주인공이고 막대는 보조다. */
.fnbar{position:relative;display:flex;align-items:center;gap:10px;height:20px}
.fnbar i{display:block;height:14px;border-radius:0 7px 7px 0;min-width:5px;transition:width .3s ease}
.fnbar .fnn{font-size:17px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fntx .fnnm{font-size:16px;font-weight:800;color:var(--ink);line-height:1.4}
.fntx .fnsub{font-size:14.5px;color:var(--body);line-height:1.65;margin-top:2px}
.fnfoot{font-size:14px;color:var(--body);margin:10px 0 0;line-height:1.6}
@media (min-width:620px){
  .fnrow{grid-template-columns:minmax(180px,44%) 1fr;gap:16px;align-items:center}
}

/* 데이터가 멎었을 때. 눈에 띄어야 하지만 페이지를 가리지는 않는다 —
   낡은 값이라도 '낡았다고 알고 보는 것'이 아무 표시 없이 보는 것보다 낫다. */
.stalewarn{display:block;margin-bottom:12px;padding:10px 13px;border-radius:8px;
  background:#FBEDEC;color:var(--sell);font-size:14.5px;line-height:1.5;font-weight:700}

/* type */
h1{font-size:34px;line-height:1.32;color:var(--ink);font-weight:800;letter-spacing:-.02em}
h2{font-size:25px;line-height:1.38;color:var(--ink);font-weight:800;letter-spacing:-.01em;
   margin-bottom:12px}
/* H4 (TOM 2번) — 제목 등급표. 예전 h3 는 12.5px 회색 대문자 자간 .14em 짜리
   '머리말표(eyebrow)' 였는데 실제로는 섹션 제목으로 29곳에 쓰였다. 기본값이
   틀리니 페이지마다 인라인 font-size 로 덧칠했고(report.html 만 15~16px 네 종류),
   같은 등급 제목이 화면마다 다른 크기가 됐다. 등급을 여기 한 곳에 정한다.
   h1 34 · h2 25 · h3 20 · h4 17 · h5 15.5 */
h3{font-size:20px;line-height:1.42;letter-spacing:-.005em;font-weight:800;
   color:var(--ink);margin-bottom:10px}
h4{font-size:17px;line-height:1.45;letter-spacing:-.003em;font-weight:800;
   color:var(--ink);margin:0 0 8px}
h5{font-size:15.5px;line-height:1.5;font-weight:800;color:var(--ink);margin:0 0 6px}
.lead{margin-top:14px;color:var(--mut);font-size:16.5px}
.sec{padding:64px 0;border-top:1px solid var(--line)}
.sec:first-child{border-top:0}

/* search */
.hero{padding:56px 0 40px}
.searchbox{margin-top:26px;position:relative}
.searchbox input{width:100%;font-size:18px;padding:17px 52px 17px 18px;
  border:1.5px solid var(--ink);border-radius:10px;font-family:inherit;
  color:var(--ink);outline:none;background:var(--paper)}
.searchbox input::placeholder{color:var(--dim);font-size:16px}
.searchbox button{position:absolute;right:7px;top:7px;bottom:7px;width:40px;
  border:0;border-radius:7px;background:var(--cta);color:#fff;font-size:17px;cursor:pointer;
  transition:background .15s ease}
.searchbox button:hover{background:var(--cta-hover)}
.sugg{margin-top:11px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sugg span.l{font-size:13px;color:var(--dim);margin-right:2px}
.chip{font-size:14px;padding:5px 11px;border:1px solid var(--line);border-radius:99px;
      color:var(--mut);cursor:pointer;background:var(--paper);font-family:inherit}
.chip:hover{border-color:var(--ink);color:var(--ink)}

/* market strip */
.strip{margin-top:30px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
       display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;background:var(--soft)}
.badge{font-size:14px;font-weight:800;padding:4px 11px;border-radius:99px;color:var(--onsolid);flex:none}
.b-up{background:var(--grn)} .b-mid{background:var(--or)} .b-dn{background:var(--sell)}
.strip .txt{font-size:14.5px;color:var(--mut);flex:1;min-width:220px}

/* card / result */
.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.card .top{padding:22px 22px 18px;border-bottom:1px solid var(--line)}
.tkline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tk{font-size:26px;font-weight:800;color:var(--ink)}
.cname{font-size:14px;color:var(--mut)}
.thm{font-size:13px;color:var(--mut);border:1px solid var(--line);padding:2px 8px;border-radius:99px}
.pxline{margin-top:9px;font-size:15px;font-variant-numeric:tabular-nums}
.pos{color:var(--up);font-weight:700} .neg{color:var(--dn);font-weight:700}
.verdict{padding:24px 22px}
.vlabel{font-size:12.5px;letter-spacing:.14em;font-weight:800;color:var(--dim);margin-bottom:9px}
.vbig{font-size:25px;font-weight:800;line-height:1.4}
.v-hold{color:var(--ink)} .v-buy{color:var(--grn)} .v-sell{color:var(--sell)}
.v-half{color:var(--or)} .v-none{color:var(--mut)}
.vwhy{margin-top:11px;font-size:15px;color:var(--mut)}
.blk{padding:20px 22px;border-top:1px solid var(--line)}
.rows{font-size:14.5px}
.row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
     border-bottom:1px dashed var(--line)}
.row:last-child{border-bottom:0}
.row .k{color:var(--mut)}
.row .v{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.replay{background:var(--soft)}
.rbig{font-size:21px;font-weight:800;color:var(--ink);line-height:1.45}
.rbig .g{color:var(--grn)} .rbig .r{color:var(--sell)}
.rnote{margin-top:9px;font-size:14px;color:var(--mut)}
.chart{padding:6px 10px 16px}
/* 배치 24 — 차트 좌상단 고정 봉 정보 (트레이딩뷰식). 커서 이동 시 숫자만 바뀐다 */
.chart .ohlc{position:absolute;left:12px;top:4px;z-index:4;pointer-events:none;
  font-size:13px;line-height:1.5;color:var(--body);font-variant-numeric:tabular-nums;
  background:var(--paper-tr);border-radius:6px;padding:1px 7px;white-space:nowrap;
  max-width:calc(100% - 80px);overflow:hidden;text-overflow:ellipsis}
.chart .ohlc b{color:var(--ink)}
.chart .ohlc .d{font-weight:800;color:var(--ink);margin-right:2px}
svg{display:block;width:100%;height:auto}
.empty{padding:34px 22px;text-align:center}
.empty .e1{font-size:19px;font-weight:800;color:var(--ink)}
.empty .e2{margin-top:9px;font-size:14.5px;color:var(--mut)}

/* locked (유료) */
.lock{margin-top:0;border-top:1px solid var(--line);padding:24px 22px;
      background:var(--soft)}   /* 플랫 (배치 21) */
.lock .lk{font-size:12.5px;letter-spacing:.14em;font-weight:800;color:var(--gold);
          margin-bottom:10px}
.lock .lt{font-size:18px;font-weight:800;color:var(--ink);line-height:1.45}
.lock .ls{margin-top:8px;font-size:14px;color:var(--mut)}
.blurbox{margin-top:14px;border:1px dashed var(--line);border-radius:8px;padding:14px 16px;
         background:var(--paper);position:relative;overflow:hidden}
.blurbox .bl{filter:blur(4.5px);user-select:none;font-size:14.5px;color:var(--ink)}
.btn{display:inline-block;background:var(--cta);color:var(--oncta);font-size:15px;font-weight:700;
     padding:12px 22px;border-radius:10px;cursor:pointer;border:0;font-family:inherit;
     margin-top:14px;transition:background .15s ease,transform .1s ease}
.btn:hover{background:var(--cta-hover)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--soft);border-color:var(--ink)}
.alt{display:block;margin-top:11px;font-size:14.5px;color:var(--mut);text-decoration:underline}

/* video slot */
.video{margin-top:34px;border:1px solid var(--line);border-radius:12px;
       background:var(--soft);aspect-ratio:16/9;display:flex;align-items:center;
       justify-content:center;flex-direction:column;gap:10px;color:var(--dim)}
.video .play{width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--onink);
             display:flex;align-items:center;justify-content:center;font-size:20px}
.video .vt{font-size:14px}

/* 3 cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.gcard{border:1px solid var(--line);border-radius:12px;padding:20px 18px;display:block;background:var(--paper);
       transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
a.gcard:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 6px 16px var(--shadow)}
div.gcard:hover{border-color:var(--ink)}
.gcard .gh{font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:7px}
.gcard .gs{font-size:14.5px;color:var(--mut)}
.gcard .go{margin-top:12px;font-size:14px;color:var(--gold);font-weight:700}

/* plans */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.plan{border:1px solid var(--line);border-radius:12px;padding:24px 22px;background:var(--paper)}
.plan.hi{border:1.5px solid var(--ink)}
.plan .pn{font-size:12.5px;letter-spacing:.14em;font-weight:800;color:var(--dim)}
.plan .pp{margin-top:8px;font-size:26px;font-weight:800;color:var(--ink)}
.plan ul{margin-top:16px;list-style:none;font-size:14.5px}
.plan li{padding:7px 0;border-bottom:1px dashed var(--line);color:var(--body)}
.plan li:last-child{border-bottom:0}
/* 배치 31 — 무료 칼럼의 '빠진 기능'이 포함처럼 읽히던 것: ✓/✗ 를 그린다 */
.plan li::before{content:"✓ ";color:var(--grn);font-weight:800}
.plan li.no{color:var(--dim)}
.plan li.no::before{content:"✗ ";color:#B3564E;font-weight:800}

/* mail sample w/ annotations */
.mailwrap{display:grid;grid-template-columns:1fr 300px;gap:22px;margin-top:26px;
          align-items:start}
.mailscale{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#F0F1F3;min-width:0}
.notes{position:sticky;top:78px}
.note{border-left:3px solid var(--gold);padding:10px 0 10px 14px;margin-bottom:18px}
.note .nt{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:4px}
.note .nb{font-size:14px;color:var(--mut);line-height:1.6}

/* misc */
.q{border-left:3px solid var(--ink);padding-left:16px;font-size:17px;color:var(--ink);
   font-weight:700;line-height:1.6;margin:22px 0}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:14px}
/* 배치 H2 — 표 머리는 '이 열이 뭔지' 말하는 유일한 단서인데 가장 흐렸다.
   13px 회색 + 넓은 자간 → 14.5px 잉크. 자간도 정상으로 (벌어진 자간은
   짧은 라벨에는 멋있지만 읽는 속도를 떨어뜨린다). */
.tbl th{text-align:left;font-size:15px;letter-spacing:.01em;color:var(--ink);
        font-weight:800;padding:10px 10px;border-bottom:2px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
p+p{margin-top:14px}
.body p{font-size:15.5px;color:var(--body)}
.tag{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.1em;
     color:var(--gold);margin-bottom:10px}

/* ── 게시판·토론방 공통 (배치 24-3차) ─────────────────────── */
.fimgs{display:flex;gap:8px;margin:8px 0}
.fthumb{position:relative;display:inline-block}
.fthumb img{width:86px;height:86px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.fthumb button{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  border:0;background:var(--ink);color:var(--onink);font-size:11px;cursor:pointer;line-height:1}
.fvote{font-size:14px;font-weight:700;padding:8px 16px;border-radius:99px;border:1px solid var(--line);
  background:var(--paper);color:var(--body);cursor:pointer;font-family:inherit}
.fvote:hover{border-color:#9CC3D6}
.fvote b{font-variant-numeric:tabular-nums}
.flink{font-size:12px;color:var(--dim);background:none;border:0;cursor:pointer;
  font-family:inherit;padding:2px 4px}
.flink:hover{color:var(--ink);text-decoration:underline}
.fcm-h{font-size:15px;font-weight:800;color:var(--ink);margin:18px 0 6px}
.fcm{padding:10px 0;border-top:1px solid var(--line)}
.fcm-a{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--dim);flex-wrap:wrap}
.fcm-a b{color:var(--ink);font-size:13px}
.fcm-b{font-size:14.5px;line-height:1.7;margin-top:3px;white-space:pre-wrap;word-break:break-word}
.fcm-v{margin-top:2px}
.fcm-write{margin-top:12px}
.fcm-write textarea{width:100%;font-size:14.5px;padding:10px 13px;border:1px solid var(--line);
  border-radius:10px;font-family:inherit;outline:none;resize:vertical;line-height:1.7}
.fcm-write textarea:focus{border-color:var(--ink)}
.fpimg{max-width:100%;border-radius:12px;border:1px solid var(--line);margin-top:12px;display:block}

footer{border-top:1px solid var(--line);padding:28px 0 44px;font-size:13.5px;color:var(--dim)}
footer p{margin-bottom:6px}
/* 배치 36 — 폰에서만 보이는 안내: 큰 화면이 더 편하다는 한 줄 */
footer .mobilenote{display:none}
@media (max-width:700px){
  footer .mobilenote{display:block;color:var(--mut);font-weight:700;
    border:1px dashed var(--line);border-radius:10px;padding:9px 12px;margin-bottom:12px}
}

/* 네비가 좁아질 때 — 링크를 줄이지 않고 접는다. 전부 메뉴 패널에 있으므로
   접혀도 도달 못 하는 페이지는 없다. 숫자가 큰(=덜 급한) 것부터 사라진다. */
@media (max-width:700px){
  nav a.t[data-pri="3"]{display:none}
}
@media (max-width:560px){
  nav a.t[data-pri="2"]{display:none}
}
@media (max-width:440px){
  nav a.t{display:none}
  .navbtn{display:none}          /* CTA 는 메뉴 패널의 '시작하기'로 대체된다 */
}
/* 배치 35 (접근성) — 터치 기기에서 탭 타겟을 44px 급으로 키운다.
   마우스에선 지금의 밀도를 유지하고, 손가락일 때만 여유를 준다. */
@media (pointer:coarse){
  .chip{padding:10px 15px;font-size:14.5px}
  .flink{padding:10px 8px;font-size:13px}
  .fvote{padding:11px 18px}
  .tkc{padding:8px 11px}
  .langbtn,.thmbtn{padding:9px 12px !important}
  .menubtn{padding:12px 6px}
  a.ngl{min-height:46px;padding:8px 20px}
  .pager button{min-width:42px;height:42px}
  .rmbtn,.cdel{padding:10px 12px}
  /* 배치 38 ① — iOS 사파리는 입력칸 글자가 16px 미만이면 포커스할 때 화면을
     강제로 확대한다(줌인). 폰에서만 모든 입력칸을 16px 이상으로 올려 막는다.
     페이지별 <style> 이 더 구체적이라 !important 가 필요하다. */
  input,textarea,select{font-size:16px !important}
  .searchbox input{font-size:18px !important}   /* 종목 검색창의 큰 글씨는 유지 */
  .qbox input{font-size:17px !important}        /* 홈 검색창도 원래 크기대로 */
}

/* 배치 34 — 테마 버튼이 추가되며 좁은 화면에서 네비가 25px 넘치던 것 */
@media (max-width:520px){
  nav .navbar{gap:10px}
  .logo{letter-spacing:.08em;font-size:13px}
  .langbtn,.thmbtn{margin-right:2px !important;padding:4px 7px !important}
  .menubtn{margin-right:0;padding:6px 2px}
}

@media (max-width:760px){
  .grid3,.plans,.mailwrap{grid-template-columns:1fr}
  .notes{position:static}
  h1{font-size:26px} h2{font-size:20.5px}
  .vbig{font-size:21px} .rbig{font-size:18px} .tk{font-size:22px}
  nav .navbar{gap:14px} nav a.t{font-size:14px}
  /* 배치 36 — 폰 리듬: 섹션 간격·본문 크기를 화면에 맞게 */
  .sec{padding:40px 0}
  .hero{padding:36px 0 26px}
  body{font-size:16px}
  .lead{font-size:15.5px}
}

/* ── F4 — 용어 팝오버 ── */
.termref{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:help;
  border-bottom:1.5px dotted var(--gold);line-height:inherit}
.termref:hover{color:var(--gold)}
#tgTermPop{position:absolute;z-index:90;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;box-shadow:0 10px 26px var(--shadow);font-size:13.5px;line-height:1.65}
#tgTermPop b{display:block;font-size:14px;color:var(--ink);margin-bottom:4px}
#tgTermPop p{margin:0;color:var(--body)}
#tgTermPop .tp-links{display:flex;gap:14px;margin-top:9px;flex-wrap:wrap}
#tgTermPop .tp-links a{font-size:12.5px;font-weight:700;color:var(--gold);text-decoration:none}
#tgTermPop .tp-links a:hover{text-decoration:underline}
/* ── F4 — 이어가기 카드 ── */
.onward{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:26px 0 8px;background:var(--paper)}
.onward h4{font-size:16px;letter-spacing:.02em;font-weight:800;color:var(--ink);margin:0 0 10px}
.onward .ow{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px dashed var(--line);text-decoration:none}
.onward .ow:first-of-type{border-top:0}
.onward .ow b{font-size:14.5px;color:var(--gold);white-space:nowrap}
.onward .ow span{font-size:13.5px;color:var(--mut)}
@media(max-width:560px){.onward .ow{flex-direction:column;gap:2px}}

/* ── 만들어 가는 중 고지 (배치 G3) ─────────────────────────────
   얕게 — 화면을 가리지 않되 처음 오신 분이 완제품으로 오해하지 않게. */
#tgBeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:9px 18px;font-size:13.5px;line-height:1.6;
  background:var(--soft);border-bottom:1px solid var(--line);color:var(--body)}
#tgBeta .bdot{width:7px;height:7px;border-radius:50%;background:var(--or);flex:none}
#tgBeta b{color:var(--ink);font-weight:800}
#tgBeta a{color:var(--gold);font-weight:700;text-decoration:underline;white-space:nowrap}
#tgBeta button{margin-left:auto;border:0;background:none;cursor:pointer;
  color:var(--mut);font-size:14px;line-height:1;padding:4px 6px;flex:none}
#tgBeta button:hover{color:var(--ink)}
@media(max-width:560px){#tgBeta{padding:8px 14px;font-size:12.5px}}

/* ── 실적 숫자 커버리지 안내 (배치 G3 → M12: 관문 아님) ────── */
/* ── 배치 M5 — 「정보가 없을 때」 부품 ────────────────────────────
   빈 칸은 사과문이 아니라 안내문이어야 한다. 경고색(주황)을 옅게 깔되
   본문 글자는 본문 색 그대로 — 읽으라고 만든 칸이지 겁주는 칸이 아니다. */
.fillit{margin-top:10px;border:1px solid color-mix(in srgb,var(--or) 34%,transparent);
        background:color-mix(in srgb,var(--or) 7%,transparent);
        border-radius:12px;padding:13px 15px}
.fillit .ft{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.6}
.fillit .fw{margin-top:6px;font-size:15px;line-height:1.72;color:var(--body)}
.fillit .fw b{color:var(--or)}
.fillit .fk{margin-top:11px;padding-top:10px;border-top:1px dashed color-mix(in srgb,var(--or) 34%,transparent);
        font-size:15px;font-weight:800;color:var(--ink)}
.fillit .fk span{font-weight:600;color:var(--mut)}
.fillit ol.fs{margin:7px 0 0;padding-left:20px}
.fillit ol.fs li{font-size:15px;line-height:1.7;color:var(--body);margin:0 0 7px}
.fillit ol.fs a{color:var(--gold);font-weight:700;text-decoration:none}
.fillit ol.fs a:hover{text-decoration:underline}
.fillit .fh{font-size:14.5px;line-height:1.7;color:var(--body);margin-top:2px}
.fillit .fh b{color:var(--ink)}
.fillit .fr{margin-top:8px;font-size:15px;line-height:1.72;color:var(--ink);font-weight:700}
.fillit .fn{margin-top:9px;padding-top:9px;border-top:1px dashed color-mix(in srgb,var(--or) 34%,transparent);
        font-size:14.5px;line-height:1.7;color:var(--mut)}
.fillit .fn b{color:var(--body)}

/* 배치 M8 — 티커 옆 회사 이름. 티커를 가리지 않도록 한 급 낮은 무게로 붙는다.
   좁은 화면에서는 줄바꿈 없이 잘라낸다 (이름 때문에 숫자가 밀리면 안 된다). */
.cnm{margin-left:7px;font-size:13px;font-weight:600;color:var(--mut);
     letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
     max-width:16em;display:inline-block;vertical-align:baseline}
@media (max-width:430px){ .cnm{max-width:10em;font-size:12.5px} }

.covnote{margin-top:12px;padding:12px 15px;border-radius:10px;
  background:var(--soft);border-left:3px solid var(--or);
  font-size:15px;line-height:1.75;color:var(--body)}
.covnote b{color:var(--ink);font-weight:800}
/* 배치 M4 — 자가 점검이 뭔가 잡았을 때. 조용히 지나가지 않게 색을 준다. */
.covnote.warn{background:#FBF4E7;border-color:#E5CE9E}
.covnote.warn b{color:#8A5A12}
[data-theme=dark] .covnote.warn{background:rgba(224,138,60,.10);border-color:rgba(224,138,60,.34)}
[data-theme=dark] .covnote.warn b{color:#E8A85C}


/* ── 글자 규칙 (배치 G4 · TOM) ─────────────────────────────────
   측정으로 확인된 문제: 화면 글자의 40%가 회색, 제목인데 회색인 것 158건,
   읽는 글이 15px 미만인 것 145건. 페이지마다 손보면 또 재발하므로 규칙으로 둔다.

     ① 제목은 회색이 아니라 잉크다 (h1~h4·summary·dt·th·.tl 류).
     ② 읽는 글(p·li·dd)의 최소 크기는 15px.
     ③ 회색(--mut/--dim)은 각주 자리에만 — 출처·단위·기준일·보조 한 줄.
     ④ 13px 미만은 라벨·각주만. 문장에는 쓰지 않는다.
   ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,summary,dt,th,legend{color:var(--ink)}
.tl,.tn,b.tn,.hlab,.klab{color:var(--ink)}
/* 읽는 글 최소 크기 — 인라인 style 로 더 작게 지정된 것까지 끌어올린다 */
.wrap p,.wrap li,.wrap dd,.card p,.card li,.blk p,.blk li,.sec p,.sec li{
  font-size:max(15px, 1em)}
/* 각주 자리는 예외 — 여기서만 작고 흐릴 수 있다.
   H5 수정 — p.nd 를 여기 넣은 건 잘못이었다. .nd 는 '아직 데이터 없음'을
   알리는 읽는 글이지 각주가 아니다. 게다가 !important 라서 엔진 페이지에서
   15px 로 올려도 13px 로 되돌려졌다. (.ps 때와 같은 실수) */
.wrap p.note,.wrap p.src,.card p.note,.card p.src,
.blk p.note,.sec p.note,figcaption,.foot-note{font-size:13px !important;color:var(--dim)}

/* ── 관제실 요약 (배치 G7) ─────────────────────────────────────── */
.dbrief{margin-top:10px;padding:14px 16px;border-radius:12px;
  background:var(--soft);border:1px solid var(--line)}
.dbrief .di{margin:0;font-size:15.5px;line-height:1.72;color:var(--ink);font-weight:600}
.dbrief .di.none{color:var(--mut);font-weight:400}
.dbrief .dr{margin:9px 0 0;font-size:15px;line-height:1.75;color:var(--or)}
/* 배치 M12 — 관제실 요약의 「참고 — 관문 아님」 줄. 관문 줄(✓/✕)과 확실히
   달라 보여야 해서 표식 없이 흐린 배경 한 칸으로 둔다. */
.dbrief .dfd{margin:10px 0 0;padding:8px 12px;border-radius:9px;
             background:color-mix(in srgb,var(--mut) 10%,transparent);
             font-size:14.5px;line-height:1.7;color:var(--body)}
.dbrief .dfd b{color:var(--mut);font-weight:800;font-size:13px;
               letter-spacing:.02em;text-transform:none}
.dbrief .dr b{color:var(--or)}
/* 4칸이므로 2열 또는 4열만 쓴다 — auto-fit 은 3열이 되면서 한 칸이 혼자 남는다
   (내 종목 표에서 TOM 이 지적한 그 문제) */
.dbrief .dg{display:grid;grid-template-columns:repeat(2,1fr);
  gap:0;margin-top:13px;background:var(--paper);
  border:1px solid var(--line);border-radius:9px;overflow:hidden}
@media(min-width:1120px){.dbrief .dg{grid-template-columns:repeat(4,1fr)}}
.dbrief .dgr{display:flex;align-items:center;gap:9px;padding:9px 12px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px}
.dbrief .dmk{font-style:normal;font-weight:800;flex:none;width:15px}
.dbrief .dmk.y{color:var(--grn)} .dbrief .dmk.n{color:var(--dn)}
.dbrief .dgn{font-weight:800;color:var(--ink)}
.dbrief .dgv{margin-left:auto;color:var(--body);font-variant-numeric:tabular-nums}
.dbrief .dern{margin-top:10px;font-size:14px;font-weight:700;color:var(--ink)}
.dbrief .dmore{display:inline-block;margin-top:11px;font-size:14px;font-weight:700;
  color:var(--gold);text-decoration:underline}

/* ── 시장 교실 뼈대 (배치 G8) ─────────────────────────────────── */
.stbadge{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.stbadge b{font-size:14px;font-weight:800;color:var(--onsolid);background:var(--gold);
  padding:3px 11px;border-radius:99px}
.stbadge span{font-size:14px;color:var(--body)}
.glance{margin:14px 0 20px;padding:15px 18px;border-radius:13px;
  background:var(--soft);border-left:4px solid var(--gold)}
.glance h3{margin:0 0 8px;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.02em}
.glance ol{margin:0;padding-left:20px}
.glance li{font-size:16px;line-height:1.75;color:var(--ink);font-weight:600;margin:4px 0}
.seehere{margin-top:24px;padding:15px 18px;border-radius:13px;
  background:var(--paper);border:1px solid var(--line)}
.seehere h3{margin:0 0 9px;font-size:16px;font-weight:800;color:var(--ink)}
.seehere a{display:block;font-size:15.5px;font-weight:700;color:var(--gold);
  text-decoration:underline;padding:4px 0}
.tgrp{margin-bottom:14px}
.tgrp h4{margin:0 0 7px;font-size:15.5px;font-weight:800;color:var(--ink);letter-spacing:.02em}
.tgl{display:flex;gap:8px;flex-wrap:wrap}

/* ── 백테스트 '왜 이렇게 정했나' 펼침 (배치 G9) ─────────────────── */
.btwhy{margin-top:14px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);padding:13px 17px}
.btwhy summary{cursor:pointer;font-size:15px;font-weight:800;color:var(--ink);list-style:none}
.btwhy summary::-webkit-details-marker{display:none}
.btwhy summary::after{content:' ▾';color:var(--mut)}
.btwhy[open] summary::after{content:' ▴'}
.btwhy p{font-size:15px;line-height:1.8;color:var(--body);margin:11px 0 0}
.btwhy p b{color:var(--ink)}

/* ── 배치 M16 — 「다음 걸음」 카드 (사용자 여정 안내) ─────────────
   어느 페이지에 있든 다음 한 걸음이 눈앞에 있게 한다. 순서를 읽으라고
   써 두는 대신, 그 페이지를 다 본 사람 앞에 다음 문을 놓는다. */
.nextstep{margin:26px auto 34px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:560px;padding:15px 20px;border:1.5px solid var(--line);border-left:4px solid var(--cta);
  border-radius:14px;text-decoration:none;color:var(--ink);background:var(--paper);
  transition:border-color .12s,transform .12s}
.nextstep:hover{border-color:var(--cta);transform:translateY(-1px)}
.nextstep small{display:block;font-size:12px;font-weight:800;color:var(--dim);letter-spacing:.06em;margin-bottom:2px}
.nextstep b{font-size:16.5px;font-weight:800;line-height:1.5}
.nextstep .arr{font-size:20px;font-weight:800;color:var(--cta);flex:none}