:root{
  --bg:#0d1117; --panel:#0f141b; --border:#21262d; --text:#c9d1d9; --head:#e6edf3;
  --muted:#8b949e; --green:#3ddc97; --green-b:#26a69a; --red:#ff6b6b; --red-b:#ef5350;
  --blue:#5aa9ff; --gold:#f0b90b;
}
*{box-sizing:border-box;}
/* word-break:keep-all — 한글은 기본적으로 **음절 사이**에서 줄바꿈이 허용된다.
   칸이 좁아지면 '복기' 가 '복'/'기' 로 조용히 쪼개진다(2026-09-10 모바일 회귀).
   keep-all 은 어절(띄어쓰기) 단위로만 끊게 하고, 끊을 수 없는 긴 토큰은
   overflow-wrap 이 받아 넘침을 막는다. */
body{margin:0;background:var(--bg);color:var(--text);line-height:1.55;
 word-break:keep-all;overflow-wrap:break-word;
 font-family:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans CJK KR',-apple-system,Arial,sans-serif;}
a{color:inherit;text-decoration:none;}
/* 좌우 여백에 safe-area 를 섞는다 - 노치/펀치홀 단말의 가로 모드에서 본문이
   깎이지 않게. 값이 0 인 기기에서는 max() 가 기존 여백을 그대로 고른다. */
.wrap{max-width:860px;margin:0 auto;
 padding:24px max(18px,env(safe-area-inset-right)) 60px max(18px,env(safe-area-inset-left));}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
 max-width:860px;margin:0 auto;
 padding:16px max(18px,env(safe-area-inset-right)) 16px max(18px,env(safe-area-inset-left));
 border-bottom:1px solid var(--border);}
/* 브랜드 행. 데스크톱에서는 메뉴 버튼이 감춰져 있어 예전의 <a class="brand"> 하나와
   똑같이 그려진다(폭도 위치도 동일). */
.navbar{display:flex;align-items:center;gap:12px;}
/* 워드마크: 'OMNISIGHT REPORT' 한 이름을 굵기·색 대비로 묶는다.
   REPORT 를 가늘게 두면 로고처럼 읽히면서도 이름 전체가 유지된다. */
.nav .brand{font-weight:800;font-size:19px;color:var(--head);display:inline-flex;
 align-items:baseline;gap:6px;letter-spacing:.5px;}
.wm-main{font-weight:800;}
.wm-sub{font-weight:500;font-size:15px;color:var(--muted);letter-spacing:1.6px;}
.nav .brand:hover .wm-sub{color:var(--head);}
.navmenu{display:flex;align-items:center;gap:16px;font-size:15px;color:var(--muted);}
.navmenu a:hover{color:var(--head);}
/* 모바일 메뉴 버튼. 데스크톱에서는 없는 것과 같다(display:none → 접근성 트리에서도 빠진다). */
.navtoggle{display:none;align-items:center;gap:9px;background:none;color:var(--head);
 border:1px solid var(--border);border-radius:10px;padding:0 14px;
 font:inherit;font-size:15px;font-weight:700;cursor:pointer;}
.navtoggle:hover{border-color:#3d444d;background:#161b22;}
.navtoggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
/* 햄버거 3선. 이미지 없이 border 로만 그린다(관리할 애셋을 늘리지 않는다). */
.navtoggle-b{position:relative;display:block;width:17px;height:2px;background:currentColor;}
.navtoggle-b::before,.navtoggle-b::after{content:"";position:absolute;left:0;
 width:17px;height:2px;background:currentColor;}
.navtoggle-b::before{top:-6px;} .navtoggle-b::after{top:6px;}
/* 언어 전환 박스. 해외 유입의 핵심 진입점이라 회색 텍스트로 묻히면 안 되지만,
   2칸 스위치는 자리를 너무 먹었다(2026-08-11) — 목표 언어만 적은 작은 박스로 되돌린다. */
.nav .lang{border:1px solid var(--border);border-radius:8px;padding:3px 10px;
 font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--head);}
.nav .lang:hover{border-color:#3d444d;background:#161b22;}
.auth{font-size:14px;}
h1{color:var(--head);font-size:30px;margin:0 0 8px;line-height:1.25;}
h2{color:var(--head);font-size:21px;margin:32px 0 12px;}
.hero .intro,.intro{color:var(--muted);font-size:16px;}
.badge{display:inline-block;font-weight:800;letter-spacing:.5px;padding:3px 14px;border-radius:10px;font-size:15px;}
.long{background:#0f2e24;color:var(--green);border:2px solid var(--green-b);}
.short{background:#2e1416;color:var(--red);border:2px solid var(--red-b);}
.neutral{background:#231a0f;color:var(--gold);border:2px solid #b0870b;}
.prem{background:#231a0f;color:var(--gold);border:1px solid #b0870b;border-radius:8px;
 font-size:12px;font-weight:800;padding:2px 8px;letter-spacing:.5px;white-space:nowrap;}
/* 회원 전용 글: 배경 톤을 바꿔 페이지에 들어가자마자 구분되게 한다.
   색만으로 구분하지 않도록 .prem 배지 텍스트를 항상 함께 표기한다. */
body.premium{--bg:#141009; --panel:#1b1509; --border:#3a2f14;
 background:var(--bg);
 background-image:radial-gradient(1200px 400px at 50% -120px,rgba(240,185,11,.10),transparent 70%);}
body.premium .nav{border-bottom-color:#3a2f14;}
body.premium::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;
 background:linear-gradient(90deg,#b0870b,var(--gold),#b0870b);z-index:10;}
@media (prefers-reduced-motion:no-preference){body.premium{transition:background-color .2s;}}
/* 디스코드 로그인 버튼 (브랜드 컬러 #5865F2) */
.dlogin{display:inline-block;background:#5865F2;color:#fff;border-radius:10px;
 padding:6px 14px;font-weight:700;font-size:14px;}
.dlogin:hover{background:#4752c4;}
.dlogin.big{padding:12px 22px;font-size:16px;border-radius:12px;}
/* Patreon 로그인 (브랜드 컬러 #FF424D). 디스코드 버튼과 같은 줄에 둔다. */
.plogin{display:inline-block;background:#FF424D;color:#fff;border-radius:10px;
 padding:6px 14px;font-weight:700;font-size:14px;}
.plogin:hover{background:#e03a44;}
.plogin.big{padding:12px 22px;font-size:16px;border-radius:12px;}
.loginrow{display:inline-flex;gap:10px;flex-wrap:wrap;align-items:center;}
.searchbar{margin:8px 0 14px;}
.searchbar input{width:100%;box-sizing:border-box;background:var(--panel);
 border:1px solid var(--border);border-radius:12px;padding:14px 16px;color:var(--head);
 font-size:17px;outline:none;}
.searchbar input:focus{border-color:var(--blue);}
.searchbar input::placeholder{color:var(--muted);}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;
 display:flex;flex-direction:column;gap:6px;transition:border-color .15s;}
.card:hover{border-color:#3a4657;}
.card-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
/* 회원 전용 카드: 금색 테두리 + 자물쇠 텍스트(색만으로 구분하지 않는다). */
.card.locked{border-color:#4a3a10;}
.card.locked:hover{border-color:var(--gold);}
.lock{background:#231a0f;color:var(--gold);border:1px solid #b0870b;border-radius:8px;
 font-size:11px;font-weight:800;padding:2px 8px;letter-spacing:.4px;white-space:nowrap;}
/* 잠긴 회차: 진입·손절·목표 자리를 안내 문구로 대체(수치 노출 금지). */
.locked-line{color:var(--gold)!important;font-size:13px;}
/* 무료 회차도 수치는 감추되, 잠긴 게 아니라 '열면 보인다' 는 신호를 준다. */
.open-line{color:var(--blue)!important;font-size:13px;}
.card-sym{font-size:22px;font-weight:800;color:var(--head);}
.card-meta{font-size:13px;color:var(--muted);}
.card-line{font-size:14px;color:var(--blue);}
/* 카드 공개판 페이지: 진입·목표·손절 한 줄 + 3줄 요약 */
.clevels{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;margin:20px 0 4px;
 padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.clv{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;}
.clv .k{font-size:13px;font-weight:800;letter-spacing:.5px;}
.clv .v{font-size:21px;font-weight:800;color:var(--head);font-variant-numeric:tabular-nums;}
.clv.e .k{color:var(--green);} .clv.t .k{color:var(--blue);} .clv.s .k{color:var(--red);}
.csum{margin:0;padding-left:20px;}
.csum li{margin:10px 0;color:#dce4ec;font-size:15.5px;line-height:1.65;}
.cmore{background:var(--panel);border:1px solid #3a2f14;border-radius:16px;
 padding:20px 22px;margin:26px 0 8px;}
.cmore h2{margin:0 0 10px;font-size:18px;color:var(--gold);}
.cmore p{margin:0 0 14px;font-size:14.5px;color:var(--muted);}
/* 복기 카드: 맨 아랫줄 = 아티클 제목(밝게, 살짝 크게). */
.card-title{color:var(--head);font-weight:700;font-size:15px;margin-top:2px;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card.review{border-color:#5a4410;}
.card.review:hover{border-color:var(--gold);}
/* 주황 배경 REVIEW 배지(리포트의 LONG/SHORT 배지와 구분). */
.badge.review{background:var(--gold);color:#1a1205;border:2px solid #b0870b;}
.review-sec .sec-sub,.sec-sub{color:var(--muted);font-size:14px;margin:-4px 0 12px;}
/* 탑라인 복기 섹션: 홈 최상단이라 첫 h2 의 위쪽 여백을 줄인다. */
.review-sec.topline{margin-top:26px;}
.review-sec.topline h2{margin-top:0;}
/* 전용 목록 페이지 진입 카드 */
.portals{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
.portal{background:var(--panel);border:1px solid var(--border);border-radius:16px;
 padding:20px 22px;display:flex;flex-direction:column;gap:4px;transition:border-color .15s;}
.portal:hover{border-color:#3a4657;}
.portal-kicker{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
 color:var(--muted);}
.portal-title{font-size:20px;font-weight:800;color:var(--head);}
.portal-sub{font-size:13.5px;color:var(--muted);}
.portal.prem{border-color:#4a3a10;white-space:normal;}
.portal.prem:hover{border-color:var(--gold);}
.portal.prem .portal-kicker{color:var(--gold);}
.portal.free .portal-kicker{color:var(--green);}
.portal.free:hover{border-color:var(--green-b);}
.portal.join{border-color:#2a3b57;}
.portal.join .portal-kicker{color:var(--blue);}
.portal.join:hover{border-color:var(--blue);}
/* nav 의 이용 안내는 전환 동선이라 살짝 밝게 둔다(다른 항목보다 한 단계). */
/* 이용 안내 = 전환 CTA. 상단에서 유일하게 채워진 컨트롤이라 시선이 여기서 멈춘다.
   파란 텍스트 링크였던 것을 금색 박스로 되돌렸다(2026-08-12) — 다른 메뉴와 같은
   생김새면 CTA 로 읽히지 않는다. 금색은 사이트에서 '돈과 관련된 것'에만 쓴다. */
.nav .nav-join{color:var(--gold);font-weight:700;border:1px solid var(--gold);
 border-radius:8px;padding:4px 13px;}
.nav .nav-join:hover{background:rgba(240,185,11,.12);color:#ffc824;border-color:#ffc824;}
/* ── 우상단 로그인 + 로그인 방법 선택 UI (2026-09-10) ── */
.nav .navlogin{color:var(--text);border:1px solid var(--border);border-radius:8px;
 padding:4px 13px;font-weight:700;cursor:pointer;}
.nav .navlogin:hover{border-color:var(--blue);color:var(--head);}
.nav .navlogin:focus-visible,.lmodal a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.auth a[data-logout]{color:var(--muted);}
/* 기본은 닫힘. JS 가 .open 을 얹고, JS 가 없을 때는 :target 으로 열린다. */
.lmodal{display:none;position:fixed;inset:0;z-index:60;align-items:center;justify-content:center;
 padding:18px;}
.lmodal.open,.lmodal:target{display:flex;}
.lmodal-bd{position:absolute;inset:0;background:rgba(2,6,12,.72);}
.lmodal-box{position:relative;width:100%;max-width:400px;background:var(--panel);
 border:1px solid var(--border);border-radius:16px;padding:26px 24px 20px;
 display:flex;flex-direction:column;gap:10px;box-shadow:0 24px 60px rgba(0,0,0,.55);}
.lmodal-box h2{margin:0;font-size:20px;color:var(--head);}
.lmodal-sub{margin:0 0 6px;color:var(--muted);font-size:14px;}
.lmodal-box .dlogin,.lmodal-box .plogin{text-align:center;}
.lmodal-x{position:absolute;top:10px;right:12px;color:var(--muted);font-size:16px;
 line-height:1;padding:8px;border-radius:8px;}
.lmodal-x:hover{color:var(--head);background:#161b22;}
.lmodal-note{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.6;}
@media(max-width:560px){
  .lmodal{align-items:flex-end;padding:0;}
  .lmodal-box{max-width:none;border-radius:16px 16px 0 0;
   padding:22px 18px max(26px,env(safe-area-inset-bottom));}
}
@media(prefers-reduced-motion:no-preference){.lmodal.open .lmodal-box{animation:lmodalin .14s ease-out;}}
@keyframes lmodalin{from{transform:translateY(8px);opacity:.6;}to{transform:none;opacity:1;}}
/* ── 이용 안내(/join) ── */
.join-lead{color:var(--muted);font-size:14px;font-weight:700;letter-spacing:.4px;margin:0 0 4px;}
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.perk{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 18px;}
.perk strong{display:block;color:var(--head);font-size:16px;margin-bottom:6px;}
.perk p{margin:0;color:var(--muted);font-size:14px;}
.path{background:var(--panel);border:1px solid var(--border);border-radius:16px;
 padding:20px 22px;margin:0 0 16px;}
.path h3{margin:4px 0 14px;color:var(--head);font-size:19px;}
.path-kicker{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
 color:var(--blue);}
.steps{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:12px;}
.step{display:flex;gap:12px;align-items:flex-start;}
.step-n{flex:0 0 26px;height:26px;border-radius:50%;background:#16202e;color:var(--blue);
 border:1px solid #2a3b57;font-size:13px;font-weight:800;display:flex;align-items:center;
 justify-content:center;}
.step-b strong{display:block;color:var(--head);font-size:15px;}
.step-b p{margin:2px 0 0;color:var(--muted);font-size:14px;}
.join-btn{display:inline-block;border-radius:12px;padding:12px 22px;font-weight:800;font-size:16px;}
.join-btn.pt{background:#FF424D;color:#fff;}
.join-btn.pt:hover{background:#e03a44;}
/* 기존 회원(디스코드 역할) 호환 각주. 신규 가입 동선이 아니라 조용히 둔다. */
.path-legacy{margin:14px 0 0;font-size:13px;color:#6e7681;line-height:1.6;}
.join-inline{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.join-inline:hover{color:#8cc4ff;}
.join-fallback{color:var(--muted);font-size:14px;}
/* 경로 부가 설명(예: 한국어 채널 + 영어 자막 안내) */
.path-note{margin:0 0 14px;font-size:13.5px;color:var(--muted);border-left:3px solid var(--border);
 border-radius:0;padding:2px 0 2px 12px;}
/* 리포트 실물 샘플 카드 */
.sample{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--panel);
 border:1px solid var(--border);border-radius:14px;padding:16px 18px;transition:border-color .15s;}
.sample:hover{border-color:var(--blue);}
.sample-sym{font-size:20px;font-weight:800;color:var(--head);}
.sample-meta{font-size:13px;color:var(--muted);}
.sample-cta{margin-left:auto;font-size:14px;font-weight:700;color:var(--blue);}
/* 목록 페이지의 날짜 구분 헤딩 */
/* ── 랜딩 히어로 (홈 전용) ───────────────────────────────────────────── */
.lhero{padding:64px 0 48px;text-align:center;}
.lkick{font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:11.5px;
 letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin:0 0 20px;}
.lhero h1{margin:0 auto 18px;font-size:44px;line-height:1.2;color:var(--head);
 font-weight:800;letter-spacing:-.025em;max-width:14em;text-wrap:balance;}
.llede{margin:0 auto;font-size:15px;color:var(--muted);max-width:40em;text-wrap:balance;}
.llede i{font-style:normal;color:#39414c;margin:0 9px;}
.lstats{display:flex;justify-content:center;margin:38px auto 0;max-width:500px;}
.lstats .stat{flex:1;padding:0 18px;}
.lstats .stat + .stat{border-left:1px solid var(--border);}
.lstats .sn{font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:30px;
 font-weight:600;color:var(--head);font-variant-numeric:tabular-nums;line-height:1.1;}
.lstats .sn.up{color:var(--green);}
.lstats .sl{font-size:12.5px;color:#6e7681;margin-top:5px;}
.lfeat{padding-top:30px;border-top:1px solid var(--border);}
.lfeat-h{display:flex;align-items:baseline;gap:11px;margin:0 0 16px;}
.lfeat-h h2{margin:0;font-size:18px;}
.lfeat-h p{margin:0;font-size:13px;color:#6e7681;}
.lfeat-h a{margin-left:auto;font-size:13px;color:#6e7681;}
.lfeat-h a:hover{color:var(--head);}
.cards.feat{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* 복기 고정 카드: 금색 테두리 = '리포트대로 해서 벌었다'는 증거. 클릭 유인 1순위. */
.card.feat-gold{border-color:rgba(240,185,11,.45);}
.card.feat-gold:hover{border-color:var(--gold);}
/* 상단 메뉴: '종목 분석'(유료 관문)만 밝게 두고 나머지는 회색으로 눌러 둔다. */
.nav .nav-key{color:var(--head);font-weight:700;}
@media (max-width:760px){
  .lhero{padding:44px 0 34px;}
  .lhero h1{font-size:30px;}
  .lstats .sn{font-size:24px;}
  .cards.feat{grid-template-columns:1fr;}
}
/* ── 모바일 헤더 (2026-09-10 회귀 수정) ───────────────────────────────────
   증상: ~360px 안드로이드에서 상단 메뉴가 압축돼 한글이 음절 단위로 세로로
   쪼개지고('복'/'기', 실측 폭 22px·높이 47px), '멤버십' 이 세로로 늘어난 깨진
   상자가 되고, 영어판은 `Membership` 을 쪼갤 수 없어 **문서가 통째로 넘쳤다**
   (320/360/390/412 전부 scrollWidth 451px).

   원인은 하나다 - 항목 6개를 줄바꿈 없는 flex 한 줄에 두면 flex 가 항목을
   min-content 아래로 압축한다. 폰트를 줄이거나 gap 을 좁혀 미루는 대신,
   좁은 화면에서는 **다른 배치**를 쓴다: 브랜드 행 + 메뉴 버튼 + 세로 목록.
   데스크톱(>760px) 규칙은 위쪽에 그대로 있고 여기서 건드리지 않는다. */
@media (max-width:760px){
  .nav{flex-direction:column;align-items:stretch;gap:0;
   padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));}
  .navbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
   min-height:56px;}
  .nav .brand{display:inline-flex;align-items:center;min-height:44px;font-size:18px;}
  .wm-sub{font-size:14px;letter-spacing:1.2px;}
  .navtoggle{min-height:44px;min-width:44px;}
  /* 접히는 것은 JS 가 확인된 뒤뿐이다. has-js 가 없으면(=JS 꺼짐/실패) 메뉴는
     펼쳐진 평범한 목록으로 남아 모든 링크가 그대로 눌린다. */
  .has-js .navtoggle{display:inline-flex;justify-content:center;}
  .has-js .navmenu{display:none;}
  .has-js .navmenu.open{display:flex;}
  .navmenu{flex-direction:column;align-items:stretch;gap:2px;font-size:16px;
   padding:2px 0 12px;}
  .navmenu > a,.navmenu > .auth,.navmenu .navlogin,.navmenu > .auth > a{
   display:flex;align-items:center;min-height:48px;width:100%;white-space:nowrap;}
  .navmenu > .auth > a{min-width:0;white-space:normal;overflow-wrap:anywhere;}
  .navmenu > a,.navmenu .navlogin,.navmenu > .auth > a{padding:0 12px;border-radius:10px;}
  .navmenu > .auth{padding:0;}
  .navmenu > a:hover,.navmenu > a:focus-visible{background:#161b22;}
  /* 데스크톱에서 작은 박스였던 항목들: 폭을 강제하지 않고 행 전체를 쓴다. */
  .nav .lang{font-size:14px;letter-spacing:.04em;}
  /* ── 탭 타깃 44px (모바일 공통) ── */
  .dlogin,.plogin,.join-btn,.login button,.lmodal-x,.searchbar input{min-height:44px;}
  .dlogin,.plogin,.join-btn{display:inline-flex;align-items:center;justify-content:center;
   text-align:center;}
  .lmodal-x{display:flex;align-items:center;justify-content:center;min-width:44px;
   top:6px;right:6px;padding:0;}
  /* 로그인 버튼 두 개는 좁은 화면에서 나란히 두면 글자가 쪼개진다 - 쌓는다. */
  .loginrow{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;}
  .loginrow > a{width:100%;}
  .login{flex-direction:column;align-items:stretch;}
  .login input{min-width:0;width:100%;min-height:44px;}
  .login button{width:100%;}
}
/* 메뉴가 열릴 때의 미세한 등장 효과는 모션 축소 선호를 따른다. */
@media (prefers-reduced-motion:no-preference){
  .has-js .navmenu.open{animation:navin .16s ease-out;}
}
@keyframes navin{from{opacity:.45;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.daygroup{margin-top:26px;}
.dayhead{display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:700;
 color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:8px;margin:0 0 14px;
 font-variant-numeric:tabular-nums;}
.daycount{font-size:13px;color:#6e7681;font-weight:600;}
/* 복기 아티클 페이지: 손익/진입/청산 스트립. */
.result-strip{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0;}
.rescell{flex:1 1 140px;background:var(--panel);border:1px solid var(--border);
 border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:4px;}
.rescell .reslab{font-size:12px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;}
.rescell .resval{font-size:22px;font-weight:800;color:var(--head);font-variant-numeric:tabular-nums;}
.rescell.pos .resval{color:var(--green);}
.rescell.neg .resval{color:var(--red);}
/* 스샷에서 읽은 건별 매매 내역 표 */
.tradewrap{overflow-x:auto;margin:8px 0 6px;}
table.trades{width:100%;border-collapse:collapse;font-size:15px;
 font-variant-numeric:tabular-nums;min-width:520px;}
table.trades th,table.trades td{padding:9px 12px;border-bottom:1px solid var(--border);
 text-align:left;white-space:nowrap;}
table.trades th{color:var(--muted);font-weight:700;font-size:13px;letter-spacing:.5px;}
table.trades td{color:#dce4ec;}
table.trades td.pos{color:var(--green);font-weight:700;}
table.trades td.neg{color:var(--red);font-weight:700;}
table.trades .pct{color:var(--muted);font-size:13px;font-weight:400;}
table.trades tr.sum td{border-top:2px solid var(--border);border-bottom:none;
 font-weight:800;color:var(--head);padding-top:12px;}
.tnote{color:var(--muted);font-size:14px;line-height:1.5;margin:6px 0 0;}
/* 시장 국면 표 — 현재 구간을 강조해 한눈에 위치를 읽게 한다 */
.regime-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:4px 0 12px;
 padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:12px;}
.regime-now .rn-k{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.regime-now .rn-v{font-size:17px;color:var(--head);font-variant-numeric:tabular-nums;}
.regime-now .rn-t{margin-left:auto;font-size:14px;font-weight:700;color:var(--gold);}
table.regime-tb{width:100%;border-collapse:collapse;font-size:15px;min-width:420px;
 font-variant-numeric:tabular-nums;}
table.regime-tb th,table.regime-tb td{padding:9px 12px;border-bottom:1px solid var(--border);
 text-align:left;white-space:nowrap;}
table.regime-tb th{color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.5px;}
table.regime-tb td{color:#dce4ec;}
table.regime-tb td.num,table.regime-tb th.num{text-align:right;}
table.regime-tb tr.cur td{background:#231a0f;color:var(--gold);font-weight:800;}
table.regime-tb tr.base td{border-top:2px solid var(--border);border-bottom:none;
 color:var(--muted);font-weight:700;}
.regime-note{color:#dce4ec;font-size:15px;line-height:1.6;margin:12px 0 0;
 padding-left:12px;border-left:3px solid var(--border);}
.rows{display:flex;flex-direction:column;gap:8px;}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--panel);
 border:1px solid var(--border);border-radius:12px;padding:12px 16px;}
.row:hover{border-color:#3a4657;} .row-t{color:var(--muted);font-size:14px;}
.row-i{color:var(--muted);font-size:13px;} .row-line{font-size:14px;color:var(--blue);margin-left:auto;}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:14px;}
.crumbs a:hover{color:var(--head);}
.rhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:16px;}
.rhead h1{margin:0;flex:1 1 auto;min-width:200px;}
.rhead time{width:100%;color:var(--muted);font-size:14px;}
.stbadge{display:inline-block;font-weight:700;font-size:13px;padding:3px 12px;border-radius:9px;letter-spacing:.3px;}
.st-win{background:rgba(38,166,154,.16);color:#26a69a;border:1px solid rgba(38,166,154,.45);}
.st-loss{background:rgba(239,83,80,.14);color:#ef5350;border:1px solid rgba(239,83,80,.45);}
.st-open{background:rgba(41,121,255,.12);color:#5b96ff;border:1px solid rgba(41,121,255,.4);}
.st-nofill{background:rgba(139,148,158,.14);color:var(--muted);border:1px solid rgba(139,148,158,.4);}
.stats{width:100%;border-collapse:collapse;margin:20px 0;}
.stats th,.stats td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);font-size:16px;}
.stats th{color:var(--muted);font-weight:700;width:120px;}
.stats td{color:var(--head);font-weight:700;}
.v-entry{color:var(--green)!important;} .v-stop{color:var(--red)!important;} .v-tgt{color:var(--blue)!important;}
.chart img{width:100%;border:1px solid var(--border);border-radius:12px;}
figure.chart{margin:20px 0;}
figure.chart img{width:100%;height:auto;border:1px solid var(--border);border-radius:12px;display:block;}
figure.chart figcaption{margin-top:6px;font-size:13px;color:var(--muted);text-align:center;}
.reasons{margin:0;padding-left:20px;}
.reasons li{margin:8px 0;color:#dce4ec;}
.block p{color:#dce4ec;}
/* 관점별 상세 분석 카드 */
.persp-list{display:flex;flex-direction:column;gap:12px;}
.persp{min-width:0;overflow-wrap:anywhere;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;}
.persp-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.persp .p-name{font-weight:800;color:var(--head);font-size:16px;}
.persp .p-bias{font-size:13px;padding:2px 10px;}
.persp .p-rr{font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:1px 8px;}
.persp-detail{margin:0;color:#dce4ec;font-size:14.5px;line-height:1.6;}
.persp-points{margin:0;padding-left:18px;color:#dce4ec;font-size:14.5px;line-height:1.65;}
.persp-points li{margin-bottom:7px;}
.persp-points li:last-child{margin-bottom:0;}
/* 관점 6개는 넓은 화면에서 2열로 — 세로로 6개 늘어지면 스크롤이 너무 길다 */
@media (min-width:900px){.persp-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}}
.block ul{margin:0;padding-left:20px;color:#dce4ec;line-height:1.7;}
.block ul li{margin-bottom:9px;}
.why-k{color:var(--gold);margin-right:4px;}
.caveat ul{margin:6px 0 0;padding-left:20px;}
.caveat ul li{margin-bottom:7px;}
.caveat{background:#231a0f;border-left:5px solid var(--gold);color:#e9cf9a;
 padding:14px 18px;border-radius:10px;margin:24px 0;font-size:15px;}
.paywall{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px;margin:24px 0;text-align:center;}
.hook{color:#dce4ec;font-size:17px;}
.login{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0 8px;}
.login input{background:#0d1117;border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px 14px;font-size:15px;min-width:220px;}
.login button{background:var(--green-b);color:#04231a;border:0;border-radius:10px;padding:10px 20px;font-weight:800;font-size:15px;cursor:pointer;}
.paywall-note{color:var(--muted);font-size:13px;}
/* app.js 가 열어주기 전까지 확실히 감춘다(.paywall 등 display 지정을 이긴다). */
[hidden]{display:none!important;}
.member-note{color:var(--green);font-size:14px;background:#0f2e24;border:1px solid var(--green-b);
 border-radius:10px;padding:10px 14px;margin:18px 0;}
.doc p{color:#dce4ec;margin:14px 0;} .doc a{color:var(--blue);text-decoration:underline;}
.muted{color:var(--muted);} .small{font-size:13px;}
.score-hero{text-align:center;background:var(--panel);border:1px solid var(--border);
 border-radius:16px;padding:28px 18px;margin:20px 0;}
.score-big{font-size:64px;font-weight:800;line-height:1;color:var(--head);}
.score-big.wr-pos{color:var(--green);} .score-big.wr-neg{color:var(--red);}
.score-sub{color:var(--muted);font-size:15px;margin-top:10px;}
table.score{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px;}
table.score th,table.score td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--border);}
table.score thead th{color:var(--muted);font-weight:700;font-size:13px;}
table.score tbody th{text-align:left;color:var(--head);font-weight:700;}
table.score td.muted{color:var(--muted);}
table.score td.wr-pos{color:var(--green);font-weight:800;}
table.score td.wr-neg{color:var(--red);font-weight:800;}
/* 제휴 거래소 각주 — 배너가 아니라 본문 끝 주석 톤. 브랜드 컬러·로고 없음. */
.ref{border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin:28px 0 12px;
 background:rgba(255,255,255,.012);}
.ref-kicker{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
 color:#6e7681;}
.ref-text{margin:6px 0 12px;font-size:14px;color:var(--muted);}
.ref-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;}
.ref-link{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:700;
 color:var(--muted);border:1px solid var(--border);border-radius:9px;padding:6px 12px;
 transition:color .15s,border-color .15s;}
.ref-link:hover{color:var(--head);border-color:#3a4657;}
.ref-arrow{font-size:11px;opacity:.6;}
/* 수수료 리베이트 배지. 링크 안에서 %가 초록으로 또렷하게 읽혀야 한다 -
   사용자가 거래소를 고르는 기준이라 이 숫자가 정보의 핵심이다.
   거래소명은 회색이므로 색 대비만으로 구분되고, 크기는 본문보다 작게 두어
   광고처럼 튀지는 않게 한다. 의미는 .ref-linklabel 라벨이 설명한다. */
.ref-rebate{font-size:12px;font-weight:800;color:var(--green);background:#10352a;
 border:1px solid var(--green-b);border-radius:6px;padding:1.5px 6px;letter-spacing:.2px;}
.ref-link:hover .ref-rebate{background:#144535;color:#5ef0b0;}
.ref-rebate-note{margin:0 0 8px;font-size:12px;color:#6e7681;line-height:1.5;}
/* 링크 묶음 바로 위 라벨 - 배지 %가 무엇인지 여기서 밝힌다. */
.ref-linklabel{margin:0 0 7px;font-size:12.5px;color:var(--muted);}
/* 본문 끝 저작권 고지. 읽는 흐름을 방해하지 않도록 가장 약한 톤으로 둔다. */
.copyright{border-top:1px solid var(--border);margin:30px 0 0;padding:16px 0 0;}
.copyright p{margin:0 0 7px;font-size:12.5px;color:#6e7681;line-height:1.6;}
.copyright p:last-child{margin-bottom:0;}
.copyright .cr-mark{font-weight:700;color:var(--muted);letter-spacing:.2px;}
.copyright a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
.copyright a:hover{color:var(--head);}
.ref-src{margin:0 0 8px;font-size:12.5px;color:#6e7681;}
.ref-disc{margin:0;font-size:12px;color:#6e7681;}
/* ── 좌/우 여백 하우스 배너 ──
   본문은 860px 고정이라 넓은 화면에서 양옆 여백이 남는다. 그 여백에만 놓고,
   좁아지면 숨기고 .rail-inline 이 대신 나온다.
   calc(50% + 446px) = 본문 절반(430) + 간격(16).
   브레이크포인트 1320px: 이 폭에서 레일 바깥 여백이 약 34px 남는다. 겹치지 않는
   최소폭은 1260px 쯤이지만 그때는 여백이 5px 라 화면 끝에 붙어 옹색해 보인다. */
.rail{position:fixed;top:104px;width:172px;z-index:5;}
.rail-l{right:calc(50% + 446px);}
.rail-r{left:calc(50% + 446px);}
.rail-inline{display:none;}
.railcard{display:flex;flex-direction:column;gap:5px;background:var(--panel);
 border:1px solid var(--border);border-radius:14px;padding:15px 16px;
 transition:border-color .15s;}
.railcard:hover{border-color:#3a4657;}
.rail-kick{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
 color:#6e7681;}
.rail-head{font-size:15.5px;font-weight:800;color:var(--head);line-height:1.3;}
.rail-body{font-size:12.5px;color:var(--muted);line-height:1.5;}
.rail-cta{font-size:13px;font-weight:700;margin-top:2px;}
.railcard.join .rail-kick{color:var(--gold);}
.railcard.join .rail-cta{color:var(--gold);}
.railcard.join:hover{border-color:#b0870b;}
.railcard.free .rail-kick{color:var(--green);}
.railcard.free .rail-cta{color:var(--green);}
.railcard.free:hover{border-color:var(--green-b);}
@media(max-width:1319px){
  .rail{display:none;}
  .rail-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
   gap:12px;max-width:860px;margin:8px auto 0;padding:0 18px;}
}
@media print{.rail,.rail-inline{display:none;}}
.adsbygoogle{margin:20px 0;display:block;}
.foot{max-width:860px;margin:40px auto 0;
 padding:24px max(18px,env(safe-area-inset-right))
  max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
 border-top:1px solid var(--border);color:var(--muted);font-size:13px;}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px;}
.foot-links a:hover{color:var(--head);} .disc{margin:6px 0;} .copy{color:#6e7681;}
.foot .src{margin:6px 0;color:#8b949e;}
@media(max-width:560px){h1{font-size:24px;}
 .wrap{padding:18px max(14px,env(safe-area-inset-right)) 48px max(14px,env(safe-area-inset-left));}}