:root{
  --bg:#0b0e14; --panel:#121722; --panel2:#0f141d; --line:#222b3a;
  --tx:#e6edf3; --mut:#a7b1c0; --acc:#ff6020; --up:#ff6020; --dn:#3b82f6;
  --pp:#a371f7; --or:#ff8c00; --ye:#e3b341;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* [2026-07-26 사용자요청] 지수바 아래에 남던 검정 띠 제거 — 페이지 전체 배경을
   첫 화면(광고) 배경과 동일한 따뜻한 그라데이션으로 통일한다(헤더 아래부터 자연스럽게 이어짐). */
body{background:var(--bg) radial-gradient(900px 380px at 50% 0,rgba(255,96,32,.16),transparent 70%) no-repeat fixed;
  color:var(--tx);
  font-family:"Pretendard","Apple SD Gothic Neo",Segoe UI,Roboto,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}

/* [2026-07-02] 기종·폰트배율 대응 — 텍스트 자동확대 방지·가로잘림 방지·긴텍스트 줄바꿈·미디어 축소 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:hidden;max-width:100%}
/* [2026-07-03 근본수정] word-break:break-word(한글·숫자를 아무 글자에서나 세로로 쪼갬)가
   폰마다 평단가·아이디·LIVE 등을 깨뜨림 → keep-all(한글은 띄어쓰기 단위 줄바꿈)+overflow-wrap(긴 문자열만 최후 처리)로 전역 해결. */
body{overflow-wrap:break-word;word-break:keep-all}
img,svg,video,canvas{max-width:100%}

/* nav */
/* [2026-07-28 사용자요청] 페이지 이동 로딩화면(.navload, z-index 1100)이 떠도 상단바는 계속 보이게 → 1150.
   드로어/팝업(99999대)보다는 낮아 그쪽이 항상 위에 온다. */
.nav{position:sticky;top:0;z-index:1150;display:flex;align-items:center;gap:18px;
  padding:env(safe-area-inset-top,0px) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));
  /* [2026-07-26 사용자요청] 헤더도 페이지 배경(따뜻한 그라데이션)과 같은 톤 — 불투명은 유지(스크롤 시 글자 겹침 방지).
     radial-gradient 원점을 헤더 자기 박스 상단 중앙에 두면 아래 body 그라데이션과 정확히 이어진다. */
  min-height:58px;background:#0b0e14 radial-gradient(900px 380px at 50% 0,rgba(255,96,32,.16),transparent 70%);
  backdrop-filter:blur(8px);
  border-bottom:0}   /* [2026-07-27 사용자요청] 지수바 위 회색 구분선 제거 — 배경이 이어지게 */
.brand{font-weight:800;font-size:20px;letter-spacing:.5px;display:flex;align-items:baseline;gap:8px;flex-shrink:0;margin-right:auto}
/* [2026-07-26 사용자요청] 브랜드 로고 — 글자(브러시체)와 눈높이를 맞추려 align-self:center 로 세로 중앙,
   남색 배경 아이콘이라 라운드+옅은 테두리로 헤더에 자연스럽게 얹는다. */
/* [2026-07-26 사용자요청] 배경 투명 로고(흰 파형+Talk) — 헤더 배경색에 그대로 녹아든다.
   정사각 아이콘이 아니라 가로형이라 높이로만 제어하고 폭은 자동. 라운드/테두리/그림자는 불필요. */
.brand .brandlogo{align-self:center;height:26px;width:auto;flex:none;margin-right:2px;opacity:.95}
/* 헤더 아래 지수 패널(바) */
.mktbar{display:flex;align-items:center;column-gap:8px;padding:5px 24px;background:transparent}   /* [2026-07-27] LIVE↔지수 공백 8px(공지 없는 날에도 동일하게) */   /* [2026-07-26] 검정 띠 제거 → 페이지 배경 그대로 */   /* [2026-07-26] 시세바 아래 불필요한 구분선 제거 */
/* 코스피·코스닥 지수 (아주 작게) */
.mktidx{display:inline-flex;align-items:center;gap:14px;font-size:11px;line-height:1.1;min-width:0;overflow:hidden}
.mktidx .mi{display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap}
.mktidx .mi i{font-style:normal;color:#a7b1c0;font-weight:700}
.mktidx .mi b{font-weight:700;color:#c9d1d9;font-variant-numeric:tabular-nums}
.mktidx .mr{font-style:normal;font-variant-numeric:tabular-nums;color:#a7b1c0}
.mktidx .mr.up{color:#f85149}
.mktidx .mr.dn{color:#4aa3df}
@media(max-width:560px){ .mktbar{padding:5px 12px} .mktidx{gap:10px;font-size:11px} }
/* [2026-07-27 사용자요청] 앱: 지수 줄 좌측 여백이 넓어 보임 → 왼쪽으로 더 붙인다(12→5px). 웹은 그대로. */
html.is-app .mktbar{padding-left:5px}
.brand .brandname{font-family:'Nanum Brush Script','Apple SD Gothic Neo',cursive;font-weight:400;font-size:34px;line-height:1.35;letter-spacing:1px;padding-top:2px;
  background:linear-gradient(90deg,#8fd4ff,#dcc4ff);-webkit-background-clip:text;background-clip:text;color:#dcc4ff;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.brand small{font-family:'Nanum Pen Script',cursive;font-size:18px;font-weight:400;letter-spacing:.5px;
  margin-left:6px;position:relative;top:7px;
  background:linear-gradient(90deg,#8ff2a0,#8fd4ff);-webkit-background-clip:text;background-clip:text;color:#8fd4ff;-webkit-text-fill-color:transparent}
.menu{display:flex;align-items:center;gap:4px;margin-left:0}
/* [2026-07-17] 드로어 딤 — 기본 숨김. 모바일(max-900) 블록에서만 켠다.
   ※전역에서 안 숨기면 데스크톱에서 '스타일 없는 빈 div'가 header(flex, gap:18px)의 아이템이 되어 간격이 벌어짐. */
.menu-scrim{display:none}
/* [2026-07-17] 드로어 전용 부속(아이콘·설명·섹션제목·구분선)은 데스크톱 가로 메뉴에선 숨김 → 헤더는 기존 그대로 '제목'만 */
.menu .mi-ico,.menu .mi-d,.menu .mi-sec,.menu .mi-div{display:none}
.menu a{padding:8px 11px;border-radius:8px;color:var(--mut);font-size:14px;font-weight:600;transition:color .12s,background .12s}
.menu a:hover{color:var(--tx);background:#1a2130}
.menu a.on{color:#fff;background:#222b3a;box-shadow:inset 0 -2px 0 var(--acc)}
.menu a.loginbtn{margin-left:10px;color:#fff;font-weight:800;letter-spacing:.3px;
  background:linear-gradient(90deg,#4aa3df,#a371f7);padding:9px 20px;border-radius:999px;
  box-shadow:0 6px 16px rgba(110,120,255,.3);transition:filter .12s,box-shadow .12s,transform .12s}
.menu a.loginbtn:hover{filter:brightness(1.1);box-shadow:0 9px 22px rgba(110,120,255,.45);transform:translateY(-1px)}
.mlogin{display:none}   /* 데스크톱 숨김 — 모바일 상단바에서만 노출(☰ 왼쪽) */
.menu a.gosub{margin-left:8px;color:#fff;font-weight:800;background:linear-gradient(90deg,#ff8c00,#ff6020);
  box-shadow:0 0 0 0 rgba(255,96,32,.5);animation:subpulse 2s ease-out infinite;
  min-width:122px;text-align:center}   /* [2026-07-13 사용자요청] 구독하기·신호확인권 텍스트 길이가 달라 가로폭이 어긋나던 것 → 더 긴 쪽(신호확인권)에 맞춰 폭 통일 */
.menu a.gosub:hover{filter:brightness(1.08);animation:none}
@keyframes subpulse{0%{box-shadow:0 0 0 0 rgba(255,96,32,.5)}70%{box-shadow:0 0 0 8px rgba(255,96,32,0)}100%{box-shadow:0 0 0 0 rgba(255,96,32,0)}}
/* 로그인 시 상단 좌측(브랜드 다음) 접속정보 */
.navacct{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
  font-size:13px;color:var(--mut);background:var(--panel);border:1px solid var(--line);border-radius:9px;white-space:nowrap;min-width:0;
  flex:0 1 auto}
/* overflow:hidden 은 무료회원 칩에만 — 구독회원 칩(.sub)에 걸면 좁은 폰에서 '구독회원' 배지가 통째로 잘림(실측).
   구독 칩은 기존 동작(삐져나옴) 유지 = 이번 변경으로 인한 회귀 없음. 근본개선은 아래 주석 참조. */
.navacct:not(.sub){overflow:hidden}
/* ★[2026-07-17] 확인권 배지 상시노출 대응 — 좁은 폰에서 칩 내용이 박스 밖으로 삐져나와 '로그아웃' 위에 겹치던 문제.
   (nowrap인데 overflow 처리가 없어, flex가 박스를 줄이면 글자가 그대로 넘쳐 흘렀음. nav 자체는 안 넘쳐 감지도 안 됐음)
   규칙: 브랜드/로그아웃/☰ 는 고정, 배지들도 고정, **아이디만 …로 줄어든다**. */
.navacct b{color:var(--tx);overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.navacct .freebadge,.navacct .subbadge,.navacct .subperiod,.navacct .gdday,.navacct .gsig{flex:0 0 auto}
/* 무료회원 상단 구독하기 버튼 (아이디/1신호 칩 자리) */
.navsubbtn{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;border-radius:999px;
  font-size:13px;font-weight:800;text-decoration:none;color:#1a1a1a;white-space:nowrap;
  background:linear-gradient(90deg,#ffd54a,#ffb300);box-shadow:0 4px 12px rgba(255,179,0,.35);transition:filter .12s,transform .12s}
.navsubbtn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.navacct .na-time{font-size:11px;color:var(--mut);cursor:pointer}   /* [2026-07-26] 클릭 시 내정보 패널 열림(아이디와 동일) */
/* [2026-07-17] 확인권 배지 축약: 좁은 폰에선 '확인권'/'장' 글자를 빼고 '🎫 1 ·+1' 로 (짤림 방지) */
/* [2026-07-17 사용자요청] '지급 예정' 문구는 어필 대상이 아님 → 강조색(#e3b341) 빼고 확인권 텍스트와 같은 색으로 */
.pl-soon{color:inherit;font-weight:400}
/* [2026-07-26] 헤더 배지 "1일 구독권 2장, 1달 구독권 1장" — 좁은 폰에서 라벨이 숨어도 구분자는 남긴다 */
.pl-sep{opacity:.6;margin:0 2px}
/* 좁은 폰에선 라벨이 숨어 "🎫 2,1" 로만 남는다 → 한달 구독권 수량은 금색으로 구분(내정보 행 색과 동일) */
#plNum2{color:#ffd86b;font-weight:800}
/* 배지 클릭 시 아래에 뜨는 안내 패널 (앱/모바일: 인라인 문구 대신 이걸로) */
/* [2026-07-17 사용자요청] 잘 안 보인다 → 테두리 색감(파랑)+글자 파랑+은은한 글로우. 5초 뒤 JS가 자동으로 닫음.
   글자색 #9ec5ff = 어두운 배경(#101826) 대비 충분(가독성 가드레일 하한 준수). */
/* [2026-07-17 사용자요청] 클릭한 배지 아래에 뜨게 — left 는 JS(togglePassMsg)가 클릭지점 기준으로 계산해 넣는다.
   ※기존 right:12px 고정이라 웹에서 배지 위치와 무관하게 헤더 우측 끝에 붙어 있었음(이번 지적).
   ※right 기본값은 남겨둠 — JS 계산 전(첫 프레임)이나 JS 실패 시 폴백. */
/* width:max-content — left 만 주면 '남은 공간'만큼 폭이 쪼그라들어(실측 186px) 글이 뭉개지고 위치보정도 어긋난다.
   폭을 내용 기준으로 고정해야 아래 JS 의 화면밖 보정이 정확히 먹는다. */
.passmsg{display:none;position:absolute;top:52px;right:12px;z-index:60;
  width:max-content;max-width:min(88vw,320px);
  background:#101826;border:1px solid #4aa3df;border-radius:10px;padding:11px 14px;
  font-size:12.5px;line-height:1.7;color:#9ec5ff;font-weight:600;white-space:normal;
  box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 0 3px rgba(74,163,223,.16)}
body.passmsgopen .passmsg{display:block}
/* [2026-07-17] '지급 예정' 안내는 폭에 따라 3단계 축약: 데스크톱=풀문구 / 모바일='· 장 시작 +1' / ≤370=거기서 '확인권·장'만 더 뺌 */
.navacct.guest b{color:#9aa4b2}
/* [2026-07-04] 좁은 폰: 브랜드 부제 '주식과 소통하다'를 숨기지 않고 축소해 유지(사용자 요청 복원). 계정칩은 간격/폭 조정으로 눌림 방지 */
@media(max-width:440px){ .brand small{font-size:13px;margin-left:4px;top:6px} .nav{gap:8px} .navacct b{max-width:130px} }
.gdday{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--acc);color:#fff;white-space:nowrap}
.gsig{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.gsig.used{cursor:pointer}
.subbadge{font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;white-space:nowrap;margin-left:2px;
  color:#ff8f5e;background:#3a1610;box-shadow:0 0 0 1px rgba(255,104,60,.45)}
/* [2026-07-01] 무료회원 배지 */
.freebadge{font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;white-space:nowrap;margin-left:2px;
  color:#8fb3e0;background:#243247;box-shadow:0 0 0 1px rgba(143,179,224,.3)}
.navacct.sub b{color:var(--tx)}   /* [2026-07-03] 구독중 아이디도 일반색(무료회원처럼 깔끔) */
.subperiod{font-size:11px;font-weight:600;color:#9aa3b2;white-space:nowrap}
.sigtipbubble{position:absolute;z-index:1000;background:#0b0e14;border:1px solid var(--line);
  color:var(--tx);font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;
  white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.45);pointer-events:none}
/* 실시간 포착 신호 확인 팝업 */
.sigov{position:fixed;inset:0;z-index:1200;background:rgba(2,5,11,.72);
  display:flex;align-items:center;justify-content:center;padding:18px}
.sigbox{width:100%;max-width:330px;background:linear-gradient(180deg,#141a26,#0e131d);
  border:1px solid var(--line);border-radius:18px;padding:24px 22px 18px;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.6);animation:sigpop .22s ease}
@keyframes sigpop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.sig-ic{font-size:38px;line-height:1;margin-bottom:6px;animation:hotpulse 1.2s infinite}
.sig-h{margin:0 0 6px;font-size:18px;font-weight:800;color:var(--tx)}
.sig-name{margin:0 0 4px;font-size:20px;font-weight:800;color:#3fb950}
.sig-time{margin:0 0 10px;font-size:13px;font-weight:600;color:#e3b341}
.sig-msg{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--mut)}
.sig-msg .hl{color:#e3b341}
.sig-btns{display:flex;gap:8px}
.sig-btns button{flex:1;padding:12px 8px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;border:0}
.sig-no{background:#1a2130;color:var(--mut);border:1px solid var(--line)!important}
.sig-no:hover{background:#222b3d}
.sig-yes{background:linear-gradient(90deg,#2ea043,#3fb950);color:#fff}
.sig-yes:hover{filter:brightness(1.08)}
.sig-fine{margin:12px 0 0;font-size:11px;color:#9aa4b4}
/* 구독 결제 화면 */
.sub-wrap{max-width:980px;margin:0 auto;padding:clamp(14px,3vw,26px) 16px 40px;position:relative}
.free-mini{position:absolute;top:14px;right:16px;font-size:12.5px;font-weight:700;color:#cdd6e2;
  background:#1f2733;border:1px solid #2a3550;border-radius:999px;padding:7px 13px;text-decoration:none;z-index:2}
.free-mini:hover{background:#273140;border-color:#3a4660}
@media(max-width:620px){.free-mini{position:static;display:inline-block;margin:0 0 14px}}
.sub-head{text-align:center;margin-bottom:26px}
.sub-badge{display:inline-block;font-size:13px;font-weight:800;padding:6px 14px;border-radius:999px;
  color:#1a1205;background:linear-gradient(90deg,#f5c542,#ffd86b);margin-bottom:14px}
.sub-h1{font-size:30px;font-weight:900;margin:0 0 10px;color:var(--tx)}
.sub-h1 span{color:#ffd86b}
.sub-sub{font-size:15px;line-height:1.55;color:var(--mut);margin:0}
.sub-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.sub-benefits{background:var(--card,#11161f);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.sub-bt{margin:0 0 14px;font-size:17px;font-weight:800;color:var(--tx)}
.sub-blist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.sub-blist li{position:relative;padding-left:28px}
.sub-blist li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(90deg,#2ea043,#3fb950);color:#fff;font-size:12px;font-weight:900;
  display:flex;align-items:center;justify-content:center}
.sub-blist li b{display:block;font-size:15px;color:var(--tx);font-weight:800;margin-bottom:2px}
.sub-blist li span{font-size:13px;color:var(--mut);line-height:1.4}
.sub-rightcol{display:flex;flex-direction:column;gap:18px}
.sub-pricecard{background:linear-gradient(180deg,#161d2b,#0f1420);border:1px solid #2a3550;
  border-radius:16px;padding:24px 22px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.sub-freecard{background:var(--card,#11161f);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;text-align:center}
.sub-freecard .fc-h{font-size:24px;font-weight:800;color:var(--tx);margin:6px 0 8px}
.sub-freecard .fc-h b{color:#3fb950}
.sub-freecard .fc-desc{font-size:13px;color:var(--mut);line-height:1.55;margin:0 0 16px}
.sub-cta.free{background:#1f2733;color:#cdd6e2;border:1px solid #2a3550;box-shadow:none}
.sub-cta.free:hover{background:#273140;filter:none}
.pc-plan{font-size:14px;font-weight:700;color:#9aa3b2;margin-bottom:10px}
.pc-list{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.3px}
.pc-list .pc-list-lbl{font-size:13px;font-weight:700;color:#a7b1c0;vertical-align:middle;margin-right:4px}
.pc-list s{color:#fff;text-decoration-thickness:2.5px;text-decoration-color:#fff}
.pc-saverow{margin:10px 0;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.pc-off{display:inline-block;font-size:13px;font-weight:800;padding:4px 12px;border-radius:999px;
  background:#3a1d22;color:#ff6b6b;border:1px solid rgba(255,107,107,.35)}
.pc-savewon{display:inline-block;font-size:13px;font-weight:800;padding:4px 12px;border-radius:999px;
  background:#3a2f12;color:#e3b341;border:1px solid rgba(227,179,65,.35)}
.pc-now{margin:6px 0 4px;line-height:1}
.pc-now b{font-size:46px;font-weight:900;color:#ff6b6b}
.pc-now span{font-size:16px;color:var(--mut);margin-left:4px}
.pc-perday{font-size:12.5px;color:#e3b341;margin-bottom:18px}
.sub-cta{display:block;width:100%;padding:15px;border:0;border-radius:12px;cursor:pointer;
  font-size:16px;font-weight:800;color:#fff;background:linear-gradient(90deg,#2ea043,#3fb950);
  text-decoration:none;box-shadow:0 6px 18px rgba(46,160,67,.35)}
.sub-cta:hover{filter:brightness(1.08)}
.pc-fine{font-size:11.5px;color:#9aa4b4;margin:12px 0 0;line-height:1.45}
.paybox{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);text-align:left}
.paybox h4{margin:0 0 8px;font-size:15px;font-weight:800;color:var(--tx)}
.pay-line{font-size:13.5px;color:var(--mut);line-height:1.5;margin:0 0 12px}
.pay-acc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.pay-acc>div{background:#0b0e14;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px}
.pay-acc span{color:#9aa4b4;margin-right:6px}
.pay-acc b{color:var(--tx)}
.pay-confirm{display:block;text-align:center;padding:12px;border-radius:10px;font-weight:700;font-size:14px;
  color:var(--tx);background:#1a2130;border:1px solid var(--line);text-decoration:none}
.pay-confirm:hover{background:#222b3d}
.sub-disc{text-align:center;font-size:11.5px;color:#9aa4b4;margin:24px auto 0;max-width:680px;line-height:1.5}
.sub-already{max-width:520px;margin:40px auto;text-align:center;background:var(--card,#11161f);
  border:1px solid var(--line);border-radius:16px;padding:36px 26px}
.sub-already .sa-ic{font-size:46px;margin-bottom:10px}
.sub-already h2{font-size:22px;margin:0 0 8px;color:var(--tx)}
.sub-already h2 b{color:#ffd86b}
.sub-already p{color:var(--mut);margin:0 0 20px}
.sub-already .sub-cta{max-width:280px;margin:0 auto}
.sub-already .sub-cta+.sub-cta{margin-top:12px}
/* [2026-07-26 사용자요청] 구독중이어도 구매(연장)를 열어 뒀다 → 기존 '전체화면 안내'를
   구매 화면 위에 얹는 얇은 배너로 축소(아래 구매 UI가 주인공이 되게). */
.sub-already-slim{max-width:560px;margin:14px auto 4px;padding:12px 18px;
  display:flex;align-items:center;gap:11px;text-align:left;border-radius:12px;
  background:#141d2b;border-color:#27364b}
.sub-already-slim .sa-ic{font-size:22px;margin:0;flex:none}
.sub-already-slim h2{font-size:14px;margin:0}
.sub-already-slim p{font-size:12px;margin:2px 0 0;line-height:1.45}
.sub-cta.tg{background:linear-gradient(90deg,#229ED9,#2aabee);box-shadow:0 6px 18px rgba(34,158,217,.35)}
.sub-cta.tg.on{background:linear-gradient(90deg,#2ea043,#3fb950);box-shadow:0 6px 18px rgba(46,160,67,.32)}   /* [2026-07-05] 텔레그램 채널 연결됨 */
@media(max-width:760px){.sub-grid{grid-template-columns:1fr}.sub-h1{font-size:25px}.pc-now b{font-size:40px}}
.gsig.ok{background:#16331f;color:#3fb950}
.gsig.used{background:#2a2f38;color:#a7b1c0}
.logoutbtn{padding:6px 11px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--tx);border:1px solid var(--line)}
.logoutbtn:hover{background:#1a2130}
.navtoggle{display:none;margin-left:auto;background:none;border:0;color:var(--tx);font-size:22px;cursor:pointer}

/* PWA 설치 버튼 (홈 화면 추가) */
.installbtn{position:fixed;right:16px;bottom:16px;z-index:80;display:inline-flex;align-items:center;gap:6px;
  background:var(--acc);color:#fff;border:0;border-radius:24px;padding:11px 17px;font-size:14px;font-weight:700;
  box-shadow:0 8px 22px rgba(0,0,0,.45);cursor:pointer}
.installbtn:hover{filter:brightness(1.08)}

/* [2026-07-27 사용자요청] 내용이 짧은 페이지(로그인 등)에서 한 화면 높이를 강제하던 min-height 제거.
   → 아래 여백이 뜨지 않고 푸터(약관·사업자정보)가 내용 바로 밑으로 올라온다.
   ※ 차트 등 전체높이가 필요한 화면은 main.full 이 따로 100vh 를 잡으므로 영향 없음. */
main{min-height:0}
main.full{min-height:calc(100vh - 58px)}
.disclaimer{max-width:900px;margin:26px auto 0;padding:18px 20px 0;border-top:1px solid var(--line);
  font-size:11px;line-height:1.7;color:#9aa4b4;text-align:center}
.disclaimer b{color:#a7b1c0;font-weight:700}
.foot{padding:12px 20px calc(20px + env(safe-area-inset-bottom,0px));color:var(--mut);font-size:12px;text-align:center}
/* [2026-06-30] 푸터 사업자정보(전자상거래법 제10조) */
.bizinfo{max-width:860px;margin:0 auto 10px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);text-align:center;line-height:1.7}
.biz-links{margin-bottom:8px}
.biz-links a{color:#8fb3e0;font-weight:700;text-decoration:none}
.biz-links a:hover{text-decoration:underline}
.biz-links span{margin:0 7px;opacity:.4}
.biz-detail{font-size:11.5px;color:var(--mut);line-height:1.8}
.biz-detail b{color:#a7b1c0}
.biz-disc{margin-top:9px;font-size:11px;color:#7a8494;line-height:1.6}
.foot-copy{color:var(--mut);font-size:12px}
@media(max-width:560px){ .bizinfo{padding:11px 12px;line-height:1.6} .biz-detail{font-size:11px} }
/* 첫페이지 구독 프로모션 팝업 */
.promo-ov{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.66);display:flex;align-items:center;justify-content:center;padding:20px}
.promo{position:relative;width:100%;max-width:380px;background:linear-gradient(180deg,#1a212e,#0d1117);
  border:1px solid #2a3445;border-radius:18px;padding:26px 22px 18px;box-shadow:0 24px 70px rgba(0,0,0,.6);text-align:center}
.promo-x{position:absolute;top:0;right:0;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--mut);font-size:17px;line-height:1;cursor:pointer;border-radius:12px;z-index:3}
.promo-x:hover{background:#1f2735;color:var(--tx)}
.promo-badge{display:inline-block;background:var(--acc);color:#fff;font-size:12px;font-weight:800;padding:5px 13px;border-radius:999px;margin-bottom:14px;
  align-self:center}   /* [2026-07-15] 아래 .promo-slide가 flex column이 돼도 이 배지만은 늘어나지 않게(원래 크기 유지) + 가운데정렬(flex-start였다가 좌측정렬 되던 버그 수정) */
.promo-h{font-size:18px;font-weight:800;margin:0 0 22px;color:var(--tx);line-height:1.45;letter-spacing:-.3px}   /* [2026-07-14] 2줄 헤드라인 줄간격+아래여백 늘림(너무 붙어있음) */
.promo-h span{color:var(--acc)}
.promo-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:11px;text-align:left}
.promo-list li{position:relative;padding-left:27px;font-size:14px;color:var(--mut);line-height:1.45}
.promo-list li::before{content:"✓";position:absolute;left:3px;top:0;color:#3fb950;font-weight:900}
.promo-list b{color:var(--tx);font-weight:700}
.promo-list b.hl{color:var(--acc)}
.promo-cta{display:block;background:var(--acc);color:#fff;font-weight:800;font-size:15px;padding:14px;border-radius:12px;text-decoration:none;margin-bottom:9px;
  margin-top:auto}   /* [2026-07-15 사용자요청] 슬라이드마다 상단 문구 길이가 달라 버튼 위치가 다르던 것 → 항상 슬라이드 하단에 고정(다음 페이지 버튼과 위치·크기 통일) */
.promo-cta:hover{filter:brightness(1.08)}
.promo-skip{display:block;width:100%;background:transparent;border:1.5px solid var(--acc);color:#fff;font-weight:800;font-size:15px;padding:14px;border-radius:12px;cursor:pointer;margin-bottom:13px}
.promo-skip:hover{background:rgba(255,255,255,.06)}
.promo-skip .ppfree{color:var(--acc);font-weight:800}
.promo-noshow{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);cursor:pointer}
.promo-slides{position:relative;overflow:hidden;touch-action:pan-y}
.promo-track{display:flex;transition:transform .35s ease}
.promo-slide{flex:0 0 100%;min-width:0;display:flex;flex-direction:column}   /* [2026-07-15] CTA 버튼 하단고정용(margin-top:auto). 배지는 align-self로 예외처리(위) */
.promo-fine{font-size:11px;color:#9aa4b4;margin:16px 0 14px;line-height:1.5}
.promo-urgent{background:rgba(255,96,32,.12);border:1px solid rgba(255,96,32,.35);border-radius:10px;
  padding:9px 12px;margin:0 0 14px;font-size:12.5px;font-weight:700;color:#ffb454;line-height:1.45;text-align:center}
.promo-urgent b{color:var(--acc)}
.promo-dots{display:flex;justify-content:center;gap:7px;margin:14px 0 2px}
.promo-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:background .25s}
.promo-dots i.on{background:var(--acc)}
/* 구독 잠금 월(추천 전용 / 일일한도) */
.lockwall{position:fixed;inset:0;z-index:150;background:rgba(8,11,16,.82);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.lockcard{width:100%;max-width:400px;background:linear-gradient(180deg,#1a212e,#0d1117);border:1px solid #2a3445;border-radius:18px;padding:30px 24px 22px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.lockicon{font-size:38px;margin-bottom:10px}
.lockcard h3{font-size:19px;font-weight:800;margin:0 0 10px;color:var(--tx);line-height:1.35}
.lockcard h3 span{color:var(--acc)}
.lockcard h3 span.lockrec{color:#4aa3df}
.lockcard p{font-size:13.5px;color:var(--mut);line-height:1.5;margin:0 0 20px}
.lockcard p b{color:var(--acc);font-weight:700}
.lockback{display:inline-block;margin-top:12px;font-size:13px;color:var(--mut);text-decoration:none}
.lockback:hover{color:var(--tx)}

/* home hero */
.hero{padding:56px 24px 16px;text-align:center;background:transparent}   /* [2026-07-26] 그라데이션은 body 로 이동(중복 방지) */
.hero h1{font-size:46px;line-height:1.18;margin:0 0 34px;font-weight:800;letter-spacing:-.5px;overflow-wrap:break-word;word-break:keep-all}
.hero h1 .hl1{font-family:'Nanum Brush Script','Apple SD Gothic Neo',cursive;font-weight:400;font-size:.5em;letter-spacing:.5px;
  color:#fff;-webkit-text-fill-color:#fff}
.hero h1 .hl3 .ai{font-weight:900;background:linear-gradient(90deg,#ffa24d,#ff8185);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 .hl2{display:inline-block;margin-top:10px;font-family:'Nanum Brush Script','Apple SD Gothic Neo',cursive;font-weight:400;font-size:1.28em;line-height:1.05;letter-spacing:1px;
  background:linear-gradient(90deg,#7cc8ff,#cdaaff);-webkit-background-clip:text;background-clip:text;color:#cdaaff;-webkit-text-fill-color:transparent}
.hero h1 .hl2 .brandpop{background:linear-gradient(90deg,#ffa24d,#ff8185);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 .hl3{display:inline-block;margin-top:8px;font-family:'Nanum Brush Script','Apple SD Gothic Neo',cursive;
  font-weight:400;font-size:.58em;line-height:1.4;letter-spacing:.5px;color:#eaf1f9}
.hero h1 .hl3 .kw{font-size:1.12em;padding:0 .1em;border-radius:6px}
.hero h1 .hl3 .kw-a{color:#9bf0ad;background:linear-gradient(transparent 56%, rgba(63,185,80,.24) 0)}
.hero h1 .hl3 .kw-b{color:#ffc79a;background:linear-gradient(transparent 56%, rgba(255,123,84,.26) 0)}
@media(max-width:600px){
  .hero{padding:44px 14px 12px}
  .hero h1{font-size:29px}
  .hero h1 .hl2{font-size:1.18em}
}
@media(max-width:380px){ .hero h1{font-size:25px} }
.herobtns{display:flex;gap:10px;justify-content:center;align-items:stretch;flex-wrap:wrap;margin:8px 0 10px}   /* [2026-07-06] align-items:stretch → 한 버튼이 2줄로 접혀도 두 버튼 높이 동일(폰트 큰 기기 대응). 단일버튼(:only-child)은 폭 다르므로 영향 없음 */
.herobtn-cap{font-size:11px;font-weight:600;color:inherit;opacity:.82}
/* [2026-07-05] 버튼 2개(알람+텔레그램)로 늘어나 한 줄에 맞게 살짝 축소 */
.herobtn{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:10px 20px;border-radius:12px;font-weight:800;font-size:14px;text-decoration:none}
.herobtns .herobtn{flex:1 1 0;min-width:0;max-width:145px;width:145px;text-align:center;padding:14px 6px;min-height:60px;line-height:1.2;box-sizing:border-box;justify-content:center;font-size:13px;white-space:normal;word-break:keep-all}   /* [2026-07-06] 폰트 큰 기기서 글자 잘림(…) 근본수정: 고정 height→min-height + nowrap/overflow/ellipsis 제거 → 안 잘리고 필요시 2줄로 접힘(왼쪽 기기는 1줄 그대로). align-items:stretch로 두 버튼 높이 동일 */
.herobtns .herobtn .herobtn-cap{font-size:10px;white-space:nowrap}
/* [2026-07-25] 알림 권한 거부 상태 — 앱 알람 버튼 비활성화 표시(회색·눌러도 설정 안내만). */
.herobtn.watch.alarm-off{background:#1c232e;color:#7a8698;border:1px solid #2c3a4f;box-shadow:none;opacity:.85}
.herobtn.watch.alarm-off .herobtn-cap{color:#6b7688}
/* [2026-07-06] 버튼 1개(:only-child) 확대 규칙. [2026-07-17] 앱도 함께 확대하도록 변경(아래 주석 참조) */
/* ★[2026-07-17 사용자요청] 버튼이 1개일 때는 2버튼 레이아웃(145px 고정)을 쓰지 말고 위아래·양옆 공간을 활용해 크게.
   ※2개일 때(.herobtns .herobtn = 145px/60px/13px)는 기존 그대로 — :only-child 라 자동으로 갈린다.
   ※이전엔 아래 html.is-app 규칙이 단독버튼을 다시 2버튼 크기로 되돌려서, 앱에서만 작게 보였음.
   ※폭은 기종별 화면폭의 52% 비율 — 고정px 대신 비율이라 큰폰/작은폰 모두 같은 비중으로 보인다.
     (2버튼 합계폭 145*2+gap10=300 보다 작게 = 단독일 때 과하지 않게. 66%→58% 로 재조정 2026-07-17)
     데스크톱/태블릿은 비율이 과해지므로 260px 상한. */
.herobtns .herobtn:only-child{flex:0 0 auto;max-width:240px;width:min(52%,240px);height:auto;min-height:68px;
  padding:13px 12px;font-size:14.5px;gap:3px}
.herobtns .herobtn:only-child .herobtn-cap{font-size:12px}
html.is-app .herobtns .herobtn:only-child{flex:0 0 auto;max-width:240px;width:min(52%,240px);min-height:68px;
  padding:13px 12px;font-size:14.5px}
html.is-app .herobtns .herobtn:only-child .herobtn-cap{font-size:12px}
/* [2026-07-05] 버튼 아래 2줄 광고문구(화살표 링크, 칩 스타일) — 무료회원 신호확인권/구독가입 */
.herobox{display:flex;flex-direction:column;align-items:stretch;gap:7px;flex:1 1 0;max-width:145px}
.herobox .herobtn{flex:none;width:100%;max-width:none}
.herolink{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:40px;box-sizing:border-box;
  font-size:10.5px;line-height:1.3;text-align:center;text-decoration:none;font-weight:800;
  padding:6px 8px;border-radius:10px;transition:filter .12s,transform .12s}   /* [2026-07-05] min-height+세로중앙정렬로 좌(신호확인권)·우(구독가입) 버튼 크기 균일화 */
.herolink:hover{filter:brightness(1.12);transform:translateY(-1px)}
.herolink.pass{background:rgba(74,163,223,.14);border:1px solid rgba(74,163,223,.4);color:#9cd0f5}
.herolink.sub{background:rgba(255,140,0,.14);border:1px solid rgba(255,140,0,.4);color:#ffc79a}
.herobtn.free{background:#161c27;color:#e6edf3;border:1.5px solid #2ea043}
.herobtn.free:hover{background:#15251a}
.herobtn.sub{background:linear-gradient(90deg,#ffa24d,#ff8185);color:#fff;box-shadow:0 8px 22px rgba(255,96,32,.32)}
.herobtn.sub:hover{filter:brightness(1.07)}
.herobtn.watch{font-family:inherit;cursor:pointer;background:#161c27;color:#e6edf3;border:1.5px solid #3a4660}
.herobtn.watch:hover{background:#1a2230}
/* [2026-07-17 사용자요청] 활성(.on) 배경 — 기존 초록채움은 흐르는 테두리(파랑·보라·주황)와 따로 놀아 교체.
   테두리가 주인공이 되도록 배경은 '테두리 색을 머금은 깊은 톤'으로: 남색→보라 그라디언트 + 테두리색 글로우.
   글자는 #eef3ff (어두운 배경 대비 충분 — 가독성 가드레일 준수). */
/* [2026-07-19 사용자요청] 활성(알람 받는 중) — 라벨은 녹색, 하단 캡션은 회색 유지.
   테두리는 홈 '단기' 탭 활성(.term-tab.on)과 동일한 파랑(#2d8cff) 단색으로 통일.
   두께는 비활성(1.5px)과 동일하게 둬서 켜고 끌 때 버튼 크기가 흔들리지 않게 함. */
.herobtn.watch.on{background:linear-gradient(135deg,#16203a 0%,#241d40 55%,#2b1f34 100%);color:#3fb950;
  border:1.5px solid #2d8cff;
  box-shadow:0 8px 22px rgba(74,163,223,.24), 0 0 26px rgba(163,113,247,.14)}
.herobtn.watch.on .herobtn-cap{color:#a7b1c0;opacity:1}   /* 아래 안내문은 회색 유지(라벨 녹색 상속 차단) */
.herobtn.watch.result{background:#16263a;color:#79c0ff;border:1.5px solid #1f6feb;cursor:pointer}
.herobtn.watch.result:hover{background:#19314d}
.hero p{font-size:18px;color:var(--mut);max-width:600px;margin:0 auto 30px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 24px;border-radius:10px;font-weight:700;font-size:15px;
  background:var(--acc);color:#fff}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--tx)}
.btn.ghost:hover{background:#161c28}
/* 히어로 서브 멘트 (특징 4줄) */
.herosub{list-style:none;padding:0;margin:18px auto 30px;max-width:560px;display:flex;flex-direction:column;gap:11px;text-align:left}
.herosub li{position:relative;padding:9px 14px 9px 38px;font-size:15px;color:var(--mut);line-height:1.35;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;
  word-break:keep-all;overflow-wrap:break-word}   /* [2026-07-03] 좁은 폰에서 '트레이딩'이 '트레이/딩'으로 쪼개지던 것 방지: 한글 단어단위 줄바꿈 */
@media(max-width:440px){ .herosub li{font-size:12.5px;padding:8px 11px 8px 30px} .herosub li::before{left:11px} .hotbadge{margin-left:3px} }
.herosub li::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(255,96,32,.15)}
.herosub b{color:var(--tx);font-weight:700}
.hotbadge{display:inline-block;margin-left:5px;padding:1px 5px;font-size:8px;font-weight:800;
  line-height:1.4;letter-spacing:.5px;color:#fff;background:linear-gradient(135deg,#ff3d2e,#ff7a18);
  border-radius:6px;vertical-align:top;box-shadow:0 0 8px rgba(255,61,46,.5);animation:hotpulse 1.3s ease-in-out infinite}
@keyframes hotpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.85}}
/* 주식 캘린더 (홈, 가이드 이미지 하단) */
.calsec .sec-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.calsec .cal-nav{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font-size:13px;font-weight:600}
.calsec .cal-nav button{background:var(--panel);border:1px solid var(--line);color:var(--tx);border-radius:7px;
  width:26px;height:26px;cursor:pointer;font-size:15px;line-height:1;padding:0}
.calsec .cal-nav .cal-today{width:auto;padding:0 9px;font-size:12px;font-weight:700}
.calsec .cal-nav button:hover{border-color:#3a465b}
/* [2026-07-18] 라벨 실제내용은 항상 'YYYY.MM'(7자) 고정폭 — 기존 min-width:90px는 실제 필요폭(~50px)보다 커서
   .cal-nav 전체(atomic flex item)의 필요폭을 불필요하게 키워, 남는 공간이 있어도 통째로 다음 줄로 넘어가는 원인이었음. */
.calsec .cal-nav b{min-width:50px;text-align:center;font-variant-numeric:tabular-nums;color:var(--tx)}
/* 달력형 월 그리드 */
.calwrap{max-width:760px;margin:0 auto}
.cal-grid{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 10px 12px}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px;font-weight:700;color:var(--mut);margin-bottom:6px}
.cal-head .sun{color:#f85149}.cal-head .sat{color:#4aa3df}
.cal-cells{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cell{min-height:52px;border-radius:9px;padding:5px 0 0;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:3px;border:1px solid transparent;transition:background .12s,border-color .12s}
.cal-cell.empty{cursor:default}
.cal-cell:not(.empty):hover{background:rgba(255,255,255,.05)}
.cal-cell .cal-d{font-size:13px;font-weight:700;color:var(--tx)}
.cal-cell.sun .cal-d{color:#f85149}.cal-cell.sat .cal-d{color:#4aa3df}
.cal-cell.today{background:rgba(74,163,223,.12)}
.cal-cell.today .cal-d{color:#7cc1ef}
.cal-cell.sel{border-color:#3a8ddb;background:rgba(58,141,219,.18)}
.cal-dots{display:flex;gap:3px;min-height:7px}
.cal-dots i,.cal-legend i{width:6px;height:6px;border-radius:50%;display:inline-block}
.cal-dots .d-sec,.cal-legend .d-sec{background:#ff8c00}
.cal-dots .d-sch,.cal-legend .d-sch{background:#2ecc71}
.cal-dots .d-ev,.cal-legend .d-ev{background:#e3b341}
.cal-dots .d-sig,.cal-legend .d-sig{background:#4aa3df}
.cal-legend{max-width:760px;margin:7px auto 0;display:flex;justify-content:center;gap:14px;font-size:11.5px;color:var(--mut)}
.cal-legend span{display:inline-flex;align-items:center;gap:4px}
.caldetail{max-width:760px;margin:26px auto 0}
.cal-dethead{font-size:14px;font-weight:800;color:var(--tx);margin-bottom:4px}
.calcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  display:flex;flex-direction:column;gap:13px;max-width:760px;margin:0 auto}
/* [2026-07-26 사용자요청] 주식 달력은 이미 섹션 패널(.secpanel) 안이라 안쪽 카드 2개(달력 그리드·상세)를
   또 박스로 그리면 '패널 속 패널'이 되어 답답하다 → 안쪽 박스는 걷어내고 '구분선 + 여백'으로만 나눈다. */
.sec.secpanel.calsec .cal-grid{background:transparent;border:0;border-radius:0;padding:2px 0 4px}
.sec.secpanel.calsec .calcard{background:transparent;border:0;border-radius:0;padding:0}
.sec.secpanel.calsec .cal-legend{margin-top:12px;padding-top:11px;border-top:1px solid #1e2a3d}
.sec.secpanel.calsec .caldetail{margin-top:14px;padding-top:14px;border-top:1px solid #1e2a3d}
.sec.secpanel.calsec .cal-cell{border-radius:10px}
/* 상세 안의 항목들도 줄 사이 옅은 구분선으로 정리 */
.sec.secpanel.calsec .calcard > .cal-row + .cal-row{padding-top:12px;border-top:1px dashed #1b2536}
.sec.secpanel.calsec .calcard{gap:12px}
.cal-loading{color:var(--mut);text-align:center;padding:14px}
.cal-row{display:flex;gap:10px;align-items:flex-start}
.cal-row .cal-ic{font-size:18px;line-height:1.35;flex:none}
.cal-body{flex:1;min-width:0}
.cal-lbl{font-size:12px;font-weight:800;color:var(--mut);margin-bottom:6px}
.cal-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cal-tags.cal-idx-row{flex-wrap:nowrap;overflow-x:auto;margin-bottom:6px}  /* [2026-06-25] 당일 주요지수=한 줄(코스피+코스닥), 주도섹터는 다음 줄 */
.cal-tag{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;
  background:rgba(255,140,0,.16);color:#ffb86b;border:1px solid rgba(255,140,0,.35)}
/* [2026-07-04] 좁은 폰에서 지수 pill 내부 '코스피 8,088 (+5.76%)'가 두 줄로 쪼개지던 것 방지 → 한 줄 고정(넘치면 행 전체가 가로 스크롤) */
.cal-tag.cal-tag-idx{flex:0 0 auto}
.cal-tag.adm{cursor:pointer}
.cal-tag.cal-tag-idx{background:rgba(74,163,223,.16);color:#79c0ff;border-color:rgba(74,163,223,.4)}  /* [2026-06-25] 당일 주요지수(섹터=주황과 구분) */
.cal-tag.cal-tag-idx.idx-up{background:rgba(248,81,73,.16);color:#f85149;border-color:rgba(248,81,73,.42)}   /* 상승=빨강 */
.cal-tag.cal-tag-idx.idx-dn{background:rgba(74,163,223,.16);color:#4aa3df;border-color:rgba(74,163,223,.42)} /* 하락=파랑 */
.sectag.idxtag{background:rgba(74,163,223,.16);color:#79c0ff}
.cal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.cal-list li{font-size:13px;color:var(--tx);line-height:1.5}
.cal-list-sch li:not(.cal-empty){color:#2ecc71;position:relative;padding-left:14px}
.cal-list-sch li:not(.cal-empty)::before{content:'';position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:#2ecc71}
.cal-memo{color:var(--mut);font-size:12px}
.cal-empty{color:var(--mut);font-size:12.5px}
.cal-del{color:#a7b1c0;cursor:pointer;font-size:11px;margin-left:5px}
.cal-del:hover{color:#f85149}
.cal-add{margin-top:7px;background:transparent;border:1px dashed var(--line);color:var(--mut);
  border-radius:8px;padding:4px 11px;font-size:12px;cursor:pointer}
.cal-add:hover{color:var(--tx);border-color:#3a465b}

/* 홈 가이드 캐러셀 (3초 자동 전환) — '실시간 신호 확인하기' 버튼 자리 */
.guidecar{position:relative;max-width:760px;margin:10px auto 0;aspect-ratio:900/520;cursor:pointer;
  border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45);user-select:none;touch-action:pan-y}
.gtrack{display:flex;height:100%;transition:transform .4s ease}
.guidecar .gimg{flex:0 0 100%;width:100%;height:100%;object-fit:contain;
  user-select:none;-webkit-user-drag:none;pointer-events:none}
.gdots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px;z-index:2}
.gdots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);transition:background .3s;cursor:pointer}
.gdots i.on{background:var(--acc)}
.gdots i:hover{background:rgba(255,255,255,.6)}
/* 좌우 이동 화살표(프로모션·가이드 공통) */
.gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:30px;height:30px;border-radius:50%;
  border:0;background:rgba(18,24,36,.4);color:#9aa3b2;font-size:20px;line-height:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.gnav:hover{background:rgba(18,24,36,.8);color:#c9d1de}
.gnav.prev{left:1px} .gnav.next{right:1px}

.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px auto 40px;max-width:1000px;padding:0 20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;cursor:pointer;transition:border-color .15s,transform .15s}
.card:hover{border-color:#a371f7;transform:translateY(-2px)}
.card .chead{display:flex;align-items:center;gap:8px}
.card .ic{font-size:24px;line-height:1}
.card h3{margin:0;font-size:17px}
.card .hot{font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;background:#1ea54e;color:#fff;white-space:nowrap;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:hotpulse 1.8s ease-out infinite}
@keyframes hotpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.card .go{margin-left:auto;font-size:22px;color:var(--mut);font-weight:700}
.card:hover .go{color:#a371f7}
.card p{margin:10px 0 0;color:var(--mut);font-size:14px}

.sec{max-width:1000px;margin:0 auto;padding:30px 20px}
.sec h2{font-size:22px;margin:0 0 14px}
.sec-h{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;word-break:keep-all}
/* [2026-07-26 사용자요청] 섹션 제목 앞 이모지(🔔·📅) 제거 → 대신 '패널'로 영역을 구분한다.
   ▸카드 배경 + 테두리로 실시간 신호 / 주식 달력 블록이 서로 확실히 나뉘게.
   ▸제목 왼쪽 강조 바(::before)로 이모지 자리를 대신해 시선 고정. */
.sec.secpanel{background:#101826;border:1px solid #223047;border-radius:14px;
  padding:20px 18px;margin:22px auto;box-shadow:0 6px 18px rgba(0,0,0,.22)}
/* [2026-07-26 사용자요청] 위 홍보 영역과 '실시간 신호' 패널 사이 간격을 더 넓게 */
.sec.secpanel:first-of-type{margin-top:42px}
.sec.secpanel > .sec-h{position:relative;padding-left:12px;margin-bottom:14px}
.sec.secpanel > .sec-h::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:1em;border-radius:2px;background:linear-gradient(180deg,#8fd4ff,#5b8def)}
@media(max-width:640px){
  /* 모바일은 화면 폭을 꽉 채우면 카드처럼 안 보여 좌우 여백을 준다 */
  .sec.secpanel{padding:15px 12px;margin:14px 10px;border-radius:12px}
  .sec.secpanel:first-of-type{margin-top:28px}
  .sec.secpanel > .sec-h{padding-left:9px}
}
.hsigtime{white-space:nowrap;font-size:13px;font-weight:600;color:var(--mut)}
.hcnt{white-space:nowrap;font-size:11px;font-weight:800;padding:3px 9px;border-radius:24px;
  background:var(--acc);color:#fff;display:inline-flex;align-items:center;gap:4px}
.hcnt b{color:#fff;font-weight:800}
.hcnt::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;display:inline-block}
/* 홈 좌측 접속정보 */
.homeacctwrap{max-width:1000px;margin:14px auto 0;padding:0 20px}
.homeacct{display:inline-flex;align-items:center;gap:4px;padding:9px 14px;font-size:13px;color:var(--mut);
  background:var(--panel);border:1px solid var(--line);border-radius:10px}
.homeacct b{color:var(--tx)}
.tiles{display:flex;gap:10px;overflow-x:auto;padding-top:10px;padding-bottom:8px;scroll-behavior:smooth}   /* [2026-07-05] padding-top: 카드 밖으로 튀어나온 Click 배지가 안 잘리게 여유 */
.tiles::-webkit-scrollbar{height:8px}
.tiles::-webkit-scrollbar-thumb{background:#2a3445;border-radius:8px}
.tile{flex:0 0 150px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 14px;cursor:pointer}   /* [2026-07-05] 세로 여백 축소 */
.tile:hover{border-color:#3a465b}
.tile .c{font-size:13px;color:var(--mut)}
.tile .p{font-size:18px;font-weight:700;margin-top:2px}
.up{color:var(--up)} .dn{color:var(--dn)}

/* viewer */
.vwrap{display:grid;grid-template-columns:300px 1fr;gap:12px;padding:12px;height:calc(100vh - 58px)}
.col{background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
.col h4{margin:0;padding:12px 14px;font-size:13px;color:var(--mut);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px}
.center{background:transparent;border:0}
.phead{display:flex;flex-direction:column;gap:9px;padding:6px 2px 12px}
.prow1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.prow2{display:flex;gap:8px;flex-wrap:wrap}
.m{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 14px;min-width:94px}
.m .ml{font-size:11px;color:var(--mut)}
.m .mv{font-size:18px;font-weight:700;margin-top:2px;color:var(--tx)}
.m .mv.big{font-size:25px}
.m .mv.up{color:var(--up)} .m .mv.dn{color:var(--dn)}
.amtrk{font-size:11px;font-weight:800;color:#3fb950;margin-left:7px}
.search{display:flex;gap:8px}
.search input{background:var(--panel2);border:1px solid var(--line);color:var(--tx);
  padding:9px 11px;border-radius:9px;width:120px;font-size:15px}
.search button{background:#222b3a;border:1px solid #313d52;color:var(--tx);padding:9px 15px;border-radius:9px;
  cursor:pointer;font-weight:700;transition:background .12s,border-color .12s}
.search button:hover{background:#2a3548;border-color:#3f4d66}
.search button:active{background:#1c2531}
.pxrow{display:flex;align-items:flex-end;gap:10px}
.pxwrap{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1.05}
.badges{display:flex;flex-wrap:nowrap;gap:4px}
.badges:empty{display:none}
.pxline{display:flex;align-items:baseline;gap:8px}
.px{font-size:24px;font-weight:800}
.mkt{font-size:10px;font-weight:800;padding:2px 7px;border-radius:7px;letter-spacing:.5px;align-self:flex-start}
.mkt:empty{display:none}
.mkt.kospi{background:#16252e;color:#4aa3df}
.mkt.kosdaq{background:#2a2416;color:#e3b341}
.codebadge{font-size:10px;font-weight:800;padding:2px 7px;border-radius:7px;letter-spacing:.5px;align-self:flex-start;background:#1f2733;color:#cdd6e2;font-variant-numeric:tabular-nums}
.codebadge:empty{display:none}
.exch{font-size:10px;font-weight:800;padding:2px 7px;border-radius:7px;letter-spacing:.5px;align-self:flex-start;cursor:help;min-width:46px;text-align:center;box-sizing:border-box}
.exch:empty{display:none}
.exch.unified,.exch.krx{background:#1c2e1f;color:#56d364}
.dr{font-size:16px;font-weight:700}
.code{font-size:18px;font-weight:700}
.live{font-size:11px;font-weight:800;padding:3px 8px;border-radius:10px;background:#3a1d1d;color:#ff6b6b;white-space:nowrap}   /* [2026-07-03] 'LIVE'가 'LI/VE'로 세로 쪼개지던 것 방지 */
.live.on{background:#16331f;color:#3fb950}
/* [2026-07-06] 웹(데스크톱)에선 '실시간 신호' 옆 LIVE를 기본 .live(11px) 크기 그대로 — 축소는 모바일(≤900px)에서만(아래 미디어쿼리). */
#chart{flex:1;min-height:0;position:relative}
/* 신호·결과 오버레이 — 캔들 왼쪽 빈 공간에 라벨(신호가 높이 유지), 라벨오른끝~캔들만 점선 */
.sig-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.sig-overlay .sig-tick{position:absolute;height:0;border-top:1px dotted currentColor;opacity:.9;transform:translateY(-50%)}
.sig-overlay .sig-lbl{position:absolute;font-size:11px;font-weight:800;line-height:1.1;white-space:nowrap;transform:translateY(-50%);background:rgba(11,14,20,.92);padding:2px 6px;border-radius:5px;border:1px solid rgba(255,255,255,.92);box-shadow:0 0 5px rgba(0,0,0,.65);text-shadow:0 0 2px #0b0e14}
.sig-overlay .sig-box{position:absolute;font-size:10.5px;font-weight:700;line-height:1.42;white-space:nowrap;transform:translateY(-50%);background:rgba(11,14,20,.93);padding:3px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.92);box-shadow:0 0 6px rgba(0,0,0,.6);text-shadow:0 0 2px #0b0e14}
.sig-overlay .sig-box>div{white-space:nowrap}
.sig-overlay .sig-box b{font-weight:800;font-variant-numeric:tabular-nums}
.sig-overlay .score-mark{position:absolute;font-size:10.5px;font-weight:800;line-height:1;white-space:nowrap;transform:translateX(-50%);font-variant-numeric:tabular-nums;text-shadow:0 0 3px #0b0e14,0 0 2px #0b0e14;pointer-events:none}
.sig-overlay .score-arrow{position:absolute;font-size:9px;line-height:1;color:rgba(175,175,175,.9);transform:translateX(-50%);pointer-events:none;text-shadow:0 0 2px #0b0e14}
.sig-overlay .day-line{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(255,255,255,.32);pointer-events:none;z-index:3}
.sig-overlay .day-line-lab{position:absolute;top:3px;left:4px;font-size:10px;font-weight:700;color:rgba(255,255,255,.5);white-space:nowrap}
/* [2026-07-05] 우측 현재가 박스(주황/파랑, 가격/등락률 2줄) — 라이브러리 축라벨은 1줄 고정이라 커스텀 오버레이로 대체 */
.cur-px-box{position:absolute;right:2px;z-index:5;pointer-events:none;padding:3px 7px;border-radius:5px;text-align:right;color:#fff;box-shadow:0 0 5px rgba(0,0,0,.55);display:none}
.cur-px-box .l1{display:block;font-size:12px;font-weight:800;font-style:normal;line-height:1.2;font-variant-numeric:tabular-nums}
.cur-px-box .l2{display:block;font-size:10.5px;font-weight:700;font-style:normal;line-height:1.2;font-variant-numeric:tabular-nums}
/* [2026-07-19] 크로스헤어 가격라벨 아래 등락률(당일종가 대비) */
.xh-pct-box{position:absolute;right:2px;z-index:5;pointer-events:none;padding:1px 6px;border-radius:4px;color:#fff;
  font-size:10.5px;font-weight:700;line-height:1.35;text-align:right;font-variant-numeric:tabular-nums;
  box-shadow:0 0 5px rgba(0,0,0,.55);display:none}
.chartbox{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.chartbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;min-height:24px}
.legend{display:flex;align-items:center;gap:11px;font-size:12px;color:var(--mut);flex:1;min-width:0;flex-wrap:wrap}
.legend .lg-o b{color:var(--tx);font-weight:700;margin-left:2px}
.legend .lg-ma{font-weight:700}
.ctoggles{display:flex;align-items:center;gap:5px;flex:none;flex-wrap:wrap;margin-left:auto}
.tfgroup{display:flex;gap:3px;flex:none}
.ctg{font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);color:var(--tx)}
.ctg:hover{border-color:#3a465b}
.ctg.ma5{color:#ff5db1} .ctg.ma10{color:#787878} .ctg.ma20{color:#e3b341}
.ctg.ma60{color:#56d364} .ctg.ma120{color:#a0522d}
.ctg.on{background:var(--acc);border-color:var(--acc);color:#fff!important}
.ctg.off{color:var(--mut)!important;opacity:.45}
/* [2026-07-06] '전체' 버튼: 일/주/월(분봉 아님)일 때 비활성 — 흐리게+클릭 불가 */
.ctg.dis,.ctg:disabled{opacity:.35;cursor:not-allowed;color:var(--mut)!important;
  background:var(--panel2)!important;border-color:var(--line)!important}
.ctg.dis:hover,.ctg:disabled:hover{border-color:var(--line)}
/* ============================================================
   [2026-07-26 사용자요청] 봉주기 드롭다운 (앱 전용) — 버튼(pill)을 누르면 그 아래로 패널이 펼쳐진다.
   ★브라우저 기본 <select> 는 쓰지 않는다(기기마다 제각각인 시스템 UI가 그대로 노출돼 조악함).
   구조: .tfdd > button.tfdd-btn + div.tfdd-panel > button.tfdd-it
   웹(데스크톱)은 기존 .tfbtn 버튼을 그대로 쓰므로 .tfdd 는 기본 숨김.
   ============================================================ */
.tfdd{display:none;position:relative}
.tfdd-btn{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.tfdd-btn .tfdd-lb{font-weight:800}
/* 화살표: 열리면 180° 회전 */
.tfdd-ar{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.75;transition:transform .18s ease;position:relative}
/* [2026-07-28] 화살표가 곧 '목록 열기' 버튼이 됐다(라벨 클릭은 즉시 전환) → 4px 삼각형은 너무 작아
   클릭/터치 영역을 가상요소로 넓힌다. 가상요소는 이벤트 타깃이 부모(.tfdd-ar)라 판정에 영향 없음. */
.tfdd-ar::after{content:'';position:absolute;top:-11px;right:-9px;bottom:-11px;left:-9px}
.tfdd.open .tfdd-ar{transform:rotate(180deg)}
/* .cur = 지금 차트가 쓰는 쪽(분봉 or 일주월). 웹 버튼의 .on 과 같은 톤으로 채움 */
.tfdd.cur .tfdd-btn{background:var(--acc);border-color:var(--acc);color:#fff}
/* [2026-07-26 사용자요청] .dim = 지금 안 쓰는 쪽 — 비활성처럼 흐리게.
   ※진짜 disabled 로 막으면 그쪽으로 전환할 방법이 없어지므로 클릭은 그대로 살려둔다. */
.tfdd.dim .tfdd-btn{opacity:.42;color:var(--mut)}
.tfdd.dim .tfdd-btn:hover{opacity:.7;border-color:#3a465b}
/* .open = 펼쳐진 상태. 채움 대신 테두리만 강조해 .cur 와 구분(열면 흐림도 해제) */
.tfdd.open .tfdd-btn{border-color:var(--acc)}
.tfdd.dim.open .tfdd-btn{opacity:1;color:var(--tx)}
/* 펼쳐지는 패널 — 버튼 바로 아래(left 정렬). 닫힘=투명·hidden, 열림=자연높이로 늘어남.
   [2026-07-26 사용자요청] ★패널 폭은 버튼 폭을 넘지 않게(width:100%) — 예전 min-width 는 내용에 따라
   버튼보다 넓어져 지저분했다. 항목도 촘촘히(가운데 정렬) 해서 전체를 작게 유지. */
.tfdd-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:70;
  width:100%;box-sizing:border-box;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:3px;
  box-shadow:0 10px 24px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(-6px) scaleY(.94);transform-origin:top center;
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.9,.3,1),visibility .18s}
.tfdd.open .tfdd-panel{opacity:1;visibility:visible;transform:none}
.tfdd-it{display:block;width:100%;text-align:center;white-space:nowrap;cursor:pointer;
  background:transparent;border:0;border-radius:6px;padding:6px 2px;
  font-family:inherit;font-size:11.5px;font-weight:700;color:var(--tx);line-height:1.15}
.tfdd-it:hover,.tfdd-it:focus{background:#1c2636;outline:none}
/* [2026-07-26 사용자요청] 단일선택이라 체크(✓) 불필요 — 배경 강조만으로 현재 항목을 표시 */
.tfdd-it.on{background:var(--acc);color:#fff}

/* ---- 표시 범위 ----
   [2026-07-26] 분봉 드롭다운(#tfddM)을 웹·앱 공통으로 전환(분봉 버튼 7개 폐기).
   [2026-07-28 사용자요청] ★일/주/월도 웹·앱 공통 드롭다운(#tfddD)으로 통일 — 웹에 남아있던 버튼 3개 폐기.
     이제 봉주기 UI = 드롭다운 2개(분봉 / 일주월)뿐. 버튼 라벨을 누르면 그 봉으로 바로 전환되고,
     화살표를 눌러야 목록이 열린다(viewer.js tfddBtn).
   ※body.embed 는 앱/embed 진입에서만 붙는다. viewer.html 의 embed 규칙은 @media(max-width:900px)
     안이라 태블릿처럼 넓은 앱 화면에서 안 먹으므로 폭 조건 없는 여기서 처리한다. */
#tfddM,#tfddD{display:inline-block}   /* 분봉·일주월 드롭다운 — 웹·앱 공통 표시 */
.tfbtn.tfmin,.tfbtn.tfday{display:none}   /* 분봉·일주월 버튼 — 드롭다운으로 대체(웹 포함 숨김) */

/* [2026-07-26 사용자요청] 앱은 개별 보조지표 버튼을 쓰지 않고 '지표' 드롭다운 하나로 통합했다.
   (아래 body.embed .subbtn{display:none} 로 일괄 숨김 — 웹은 개별 버튼 그대로)
   봉주기별 노출 제한은 드롭다운 '항목'에 .sub-hide 로 적용된다(viewer.js syncSubBtns).
   분봉=거래대금·순매수금·프로그램 / 일주월=거래대금·당일수급 */
.tfdd-it.sub-hide{display:none}

/* [2026-07-26 사용자요청] 앱: 보조지표 버튼을 봉주기(3분봉) 줄과 같은 라인에 배치.
   모바일 규칙이 .chartbar 를 column 으로 세워 두 줄로 갈라져 있었다 → 앱만 한 줄(row)로 되돌린다.
   좁은 폭에 5~6개가 들어가야 하므로 버튼 여백·글자를 조금 줄이고, 그래도 넘치면 다음 줄로 접힌다
   (가로 스크롤은 쓰지 않는다 — 드롭다운 패널이 잘리기 때문). */
body.embed .chartbar{flex-direction:row;align-items:center;flex-wrap:wrap;gap:2px}
/* ★display:contents — 그룹(.tfgroup/.ctoggles)을 하나의 flex 아이템이 아니라 '없는 것처럼' 만들어
   그 안의 버튼들이 .chartbar 의 직접 아이템으로 흐르게 한다. 그룹째 다음 줄로 밀리던 것 해결
   (남은 공간이 그룹 전체 폭보다 좁으면 통째로 개행됐다). */
body.embed .chartbar .tfgroup,
body.embed .chartbar .ctoggles{display:contents}
/* 375px 폭에 봉주기2 + 전체 + 보조지표3 + 지수 = 7개가 들어가야 해 여백·글자를 최소로 */
body.embed .chartbar .ctg{padding:5px 5px;font-size:10.5px}
/* ★버튼 폭 고정 — 라벨이 '3분'→'120분'으로 길어지면 그만큼 넓어져 한 줄을 넘겨 두 줄이 됐다.
   가장 긴 라벨(120분/월봉) 기준으로 고정해 어떤 봉주기를 골라도 줄바꿈이 생기지 않게 한다.
   375px 기준 실측: 버튼 7개 합 313 + gap 12 = 325 < 툴바 내부폭 337 (여유 12px). */
body.embed .chartbar .tfdd-btn{padding:5px 5px;gap:3px;justify-content:center}
body.embed .chartbar #tfddM .tfdd-btn{width:52px}
body.embed .chartbar #tfddD .tfdd-btn{width:46px}
body.embed .chartbar .ctoggles .sep{display:none}   /* 줄 분리용 sep — 한 줄로 붙일 땐 불필요 */

/* [2026-07-26 사용자요청] 앱 툴바 배치:
     좌측 = 일봉 · 분봉 · 지표(드롭다운 3개)   /   우측 = 전체(당일) · 지수
   가운데를 비우기 위해 '전체' 버튼에 margin-left:auto 를 줘 그 뒤 요소들을 오른쪽 끝으로 민다.
   (display:contents 덕에 이 버튼들이 .chartbar 의 직접 flex 아이템이라 auto 마진이 먹는다) */
body.embed #rstbtn{margin-left:auto}
/* 개별 보조지표 버튼은 '지표' 드롭다운으로 대체 — 앱에서는 전부 숨김(웹은 그대로 유지) */
body.embed .subbtn{display:none}
body.embed #tfddI{display:inline-block}
/* 지표 패널은 항목 글자가 길어 버튼 폭(‘지표’)보다 넓어야 한다 — 여기만 내용 폭 허용 */
body.embed #tfddI .tfdd-panel{width:auto;min-width:82px}
body.embed #tfddI .tfdd-it{padding:7px 10px;text-align:left}
/* 켜진 지표 개수 배지 — '지표 2' 처럼 몇 개 켰는지 버튼에서 바로 보이게 */
.tfdd-cnt{display:inline-block;min-width:15px;height:15px;line-height:15px;text-align:center;
  background:rgba(255,255,255,.22);border-radius:8px;font-size:9.5px;font-weight:800;padding:0 4px;margin-left:1px}
.sep{width:1px;height:16px;background:var(--line);margin:0 3px}
.legend .lg-tf{font-weight:800;color:var(--tx);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
.charttip{position:absolute;z-index:6;pointer-events:none;display:none;background:rgba(15,20,29,.96);
  border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12px;min-width:128px;
  box-shadow:0 6px 20px rgba(0,0,0,.45)}
.charttip .tt-t{font-weight:800;margin-bottom:5px;color:var(--tx)}
.charttip .tt-r{display:flex;justify-content:space-between;gap:16px;line-height:1.55}
.charttip .tt-r span{color:var(--mut)}
.charttip .tt-r b{font-weight:700;color:var(--tx)}
/* [2026-07-19] 시/고/저/종 = 숫자·등락률 고정폭 우측정렬 슬롯(세로줄 맞춤). tabular-nums로 자릿수 폭도 균일 */
.charttip .tt-v,.charttip .tt-p{display:inline-block;font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.charttip .tt-v{min-width:62px}
.charttip .tt-p{min-width:52px;margin-left:9px;font-weight:600;font-size:11px}
.charttip .tt-sep{height:1px;background:var(--line);margin:5px 0}
/* 신호발생이력 박스 (차트 위) */
/* [2026-06-27] 신호 조건충족 %게이지 (임박도) */
.sigscore{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 6px;padding:3px 2px}
.sigscore:empty{display:none}
.ssg{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700}
.ssg-l{min-width:26px}
.ssg-bar{position:relative;width:72px;height:7px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.ssg-bar i{position:absolute;left:0;top:0;height:100%;border-radius:4px;transition:width .4s ease}
.ssg-p{min-width:30px;text-align:right;font-variant-numeric:tabular-nums}
.ssg.on{filter:brightness(1.2)}
.ssg.on .ssg-p::after{content:'★'}
/* [2026-06-27] 신호 임박 레이더 탭 */
.radarwrap{max-width:880px;margin:0 auto;padding:8px 12px}
.radar-head h2{font-size:18px;margin:8px 0 2px}
.radar-sub{font-size:12.5px;color:var(--mut);margin:0 0 10px;line-height:1.5}
.radar-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.radar-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px}
.radar-table th,.radar-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.radar-table th{font-size:11.5px;color:var(--mut);font-weight:700;position:sticky;top:0;background:var(--panel)}
.radar-table tr.hot{background:rgba(248,81,73,.07)}
.radar-loading{text-align:center;color:var(--mut);padding:18px}
.rt-nm a{font-weight:700;color:var(--tx);text-decoration:none}
.rt-nm a:hover{text-decoration:underline}
.rt-cd a{color:var(--mut);font-size:12px;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
.rt-cd a:hover{text-decoration:underline;color:var(--tx)}
.radar-ctrl{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 12px}
.radar-ctrl label{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:5px}
.radar-ctrl select{background:var(--panel);color:var(--tx);border:1px solid var(--line);border-radius:7px;padding:4px 8px;font-size:12.5px}
.rt-tm{color:var(--mut);font-variant-numeric:tabular-nums}
.rt-mx{font-weight:800}
.rt-mx.on{color:#f85149}
.rt-mx.on::after{content:' ★'}
.rg{display:inline-flex;align-items:center;gap:5px}
.rg-bar{position:relative;width:56px;height:7px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.rg-bar i{position:absolute;left:0;top:0;height:100%;border-radius:4px}
.rg-p{min-width:30px;font-weight:700;font-variant-numeric:tabular-nums}
.rg-na{color:var(--mut)}
.sigrow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sigrow .livetm{flex:none;font-size:11px;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums}
.sigrow .sighist{flex:1;min-width:0;margin-bottom:0}
.sighist{display:flex;align-items:center;gap:6px;overflow-x:auto;white-space:nowrap;
  margin-bottom:6px;padding:6px 8px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;scrollbar-width:thin}
.sighist::-webkit-scrollbar{height:6px}
.sighist::-webkit-scrollbar-thumb{background:#2a3445;border-radius:6px}
.sighist .sh-ttl{flex:none;font-size:11px;font-weight:800;color:var(--mut);padding-right:4px}
.sighist .sh-empty{font-size:12px;color:var(--mut)}
.sighist .sh-date{flex:none;font-size:11px;font-weight:800;color:var(--mut);
  padding:3px 8px;border-radius:7px;background:#10141d;border:1px solid var(--line)}
.sighist .sh-date.cur{color:var(--tx);border-color:#3a465b}
.sh-chip{flex:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  font-size:11px;font-weight:700;color:var(--tx);background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:4px 9px}
.sh-chip:hover{border-color:#3a465b}
.sh-chip.on{border-color:var(--acc);background:#1f2735}
.sh-chip .dot{width:7px;height:7px;border-radius:50%}
/* [2026-07-07] 보조지표 영역 배경 틴트 — 메인 차트와 구분(투명 차트 뒤에 깔려 비침). #chart 앞 형제로 배치 */
#subbg{position:absolute;pointer-events:none;display:none;border-radius:8px;background:rgba(88,120,180,.07);border-top:1px solid rgba(120,150,205,.28)}
.sublabels{position:absolute;inset:0;pointer-events:none;z-index:4}
.slbl{position:absolute;font-size:10px;font-weight:800;letter-spacing:.2px;
  background:rgba(11,14,20,.55);padding:0 5px;border-radius:5px;white-space:nowrap}
.slbl i{font-style:normal;font-weight:600;opacity:.6;font-size:9px}
.slbl b.slbl-cum{font-weight:800;margin-left:4px;font-variant-numeric:tabular-nums}
.sldiv{position:absolute;pointer-events:none;height:0;border-top:1px dashed rgba(120,150,205,.35)}
.scroll{overflow:auto;flex:1}
/* [2026-07-03] AI 피드: 우측 스크롤바 항상 보이게(모바일 오버레이 스크롤 대비) */
.col.side .scroll{scrollbar-width:thin;scrollbar-color:#3a465b transparent}
.col.side .scroll::-webkit-scrollbar{width:7px}
.col.side .scroll::-webkit-scrollbar-track{background:transparent}
.col.side .scroll::-webkit-scrollbar-thumb{background:#3a465b;border-radius:4px;border:1px solid #0d121b}
.col.side .scroll::-webkit-scrollbar-thumb:hover{background:#4c5a72}
.feeditem{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid #1a212e;cursor:pointer;font-size:13px}
.feeditem:hover{background:#161c28}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.feeditem .cd{font-weight:700}
.feeditem .meta{margin-left:auto;color:var(--mut);font-size:12px;text-align:right}
.tag{font-size:11px;font-weight:800;padding:1px 6px;border-radius:6px;background:#1c2433}
.rk{display:flex;align-items:flex-start;gap:8px;padding:9px 14px;border-bottom:1px solid #1a212e;cursor:pointer;font-size:13px}
.rk:hover{background:#161c28}
.rk .n{display:none}
.rktop .rec{margin-left:auto}
.rec{flex:none;font-family:'Nanum Pen Script',cursive;font-size:16px;font-weight:400;line-height:1;letter-spacing:.5px;
  background:linear-gradient(90deg,#ffd24a,#ff8c00);-webkit-background-clip:text;background-clip:text;color:#ffb02e;-webkit-text-fill-color:transparent}
/* [2026-07-20 사용자요청] '확인권' 배지(확인권 사용해 열람) — '추천'과 같은 .rec 클래스라 -webkit-text-fill-color:transparent 가
   inline color 를 덮어써 똑같은 주황 그라데이션으로 보이던 문제. 그라데이션 해제하고 녹색 단색으로. */
.rec.rec-ok{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:#3fb950;color:#3fb950}
.rkmain{flex:1;min-width:0}
.rktop{display:flex;align-items:center;gap:7px}
.rktop .cd{font-weight:700}
.rktop .cres{margin-left:auto;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.rktop .cres.up{color:var(--up)} .rktop .cres.dn{color:var(--dn)}
.rktop .cres.be{color:#e3b341}
.rktop .cres.pend{color:var(--mut)}
.rkevs{display:flex;flex-direction:column;gap:2px;margin-top:5px}
.ev{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--mut)}
.ev .et{font-weight:800}

/* 실시간 신호 — 종목 그룹 + 발생시각순 이력 */
.siglist{display:flex;flex-direction:column;gap:10px}
.siggrp{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;cursor:pointer}
.siggrp:hover{border-color:#3a465b}
.sg-head{display:flex;align-items:center;gap:10px;font-size:14px}
.sg-head .dot{width:10px;height:10px;border-radius:50%;flex:none}
.sg-head .nm{flex:1;min-width:0;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-head .px{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.sg-head .dr{flex:none;width:74px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.sg-head .dr.up{color:var(--up)} .sg-head .dr.dn{color:var(--dn)}
.sg-head .sg-rhead{flex:none;margin-left:auto;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-head .sg-rhead b{font-weight:800;margin-left:2px}
.sg-head .sg-rhead.up{color:var(--up)} .sg-head .sg-rhead.dn{color:var(--dn)} .sg-head .sg-rhead.be{color:#a9b2c0}
.sg-head .sg-rhead .sg-rel{color:var(--mut);font-weight:600;font-size:11px;margin-left:3px}
.sg-evs{margin-top:7px;border-top:1px solid #1a212e;padding-top:6px;display:flex;flex-direction:column;gap:3px}
/* [2026-07-03] 폰마다 평단가(.av)가 글자단위로 깨지던 문제 근본수정:
   ①숫자 nowrap(전역 word-break 무력화)로 세로 쪼개짐 제거 ②좁은 화면은 미디어쿼리로 폭·폰트 축소해 5열 유지.
   .av는 남은폭 채우되 min-width:0+ellipsis(최악에도 안 깨지고 잘림). */
.sg-ev{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut);white-space:nowrap}
.sg-ev>span{white-space:nowrap}
.sg-ev .t{flex:none;width:60px;font-variant-numeric:tabular-nums}
.sg-ev .et{flex:none;width:32px;font-weight:800}
.sg-ev .p{flex:none;width:78px;text-align:right;font-variant-numeric:tabular-nums;color:var(--tx)}
.sg-ev .rt{flex:none;width:62px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.sg-ev .rt.up{color:var(--up)} .sg-ev .rt.dn{color:var(--dn)}
.sg-ev .av{flex:1;min-width:0;text-align:right;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
@media(max-width:400px){ .sg-ev{gap:6px;font-size:11px} .sg-ev .t{width:52px} .sg-ev .et{width:28px} .sg-ev .p{width:66px} .sg-ev .rt{width:54px} }
@media(max-width:340px){ .sg-ev{gap:5px;font-size:10px} .sg-ev .t{width:47px} .sg-ev .p{width:58px} .sg-ev .rt{width:48px} }
.sg-resbox{margin-top:7px;border-top:1px dashed #1a212e;padding-top:6px;display:flex;flex-direction:column;gap:3px}
.sg-res{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700}
.sg-res .t{flex:none;width:60px;font-size:11px;color:var(--mut);font-weight:600;font-variant-numeric:tabular-nums}
.sg-res b{font-weight:800}
.sg-res.up{color:var(--up)} .sg-res.dn{color:var(--dn)}

/* [2026-07-27 사용자요청] 단독 페이지(소개·고객센터·공지·약관 등)도 위 여백 축소 */
.stub{max-width:820px;margin:0 auto;padding:clamp(16px,3.2vw,28px) 20px 44px}
.stub h1{font-size:30px;margin:0 0 8px}
.stub .lead{color:var(--mut);font-size:16px;margin-bottom:26px}
.stub .block{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:14px}
.stub .block h3{margin:0 0 6px}
.stub .block p{margin:0;color:var(--mut)}
.badge{display:inline-block;font-size:11px;font-weight:700;color:var(--acc);border:1px solid var(--acc);
  border-radius:20px;padding:2px 10px;margin-bottom:14px}
/* [2026-07-05] 소개·고객지원 페이지: 섹션 구획선 + 기능 3열 그리드 + 넘버 배지 */
.stub .sechd{margin:0 0 6px;font-size:23px}
.stub .sec+.sec{margin-top:46px;padding-top:34px;border-top:1px solid var(--line)}
.stub .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.stub .feat .block{margin-bottom:0}
.stub .block .no{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:8px;background:rgba(255,96,32,.14);color:var(--acc);font-weight:800;font-size:14px;margin-bottom:9px}
.stub .qa{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:14px}
.stub .qa details{border-bottom:1px solid var(--line)}
.stub .qa details:last-child{border-bottom:0}
.stub .qa summary{list-style:none;cursor:pointer;padding:15px 0;font-weight:700;font-size:15px;display:flex;align-items:center;gap:9px}
.stub .qa summary::-webkit-details-marker{display:none}
.stub .qa summary::before{content:'Q';flex:none;width:22px;height:22px;border-radius:6px;background:rgba(255,96,32,.14);
  color:var(--acc);font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.stub .qa summary::after{content:'+';margin-left:auto;color:var(--mut);font-weight:400;font-size:20px;line-height:1}
.stub .qa details[open] summary::after{content:'−'}
.stub .qa .ans{margin:0 0 15px 31px;color:var(--mut);font-size:14px;line-height:1.65}
.stub .contact{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.stub .contact a{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:12px 16px;color:var(--tx);text-decoration:none;font-weight:600;font-size:14px}
.stub .contact a:hover{border-color:var(--acc)}
.stub .contact a small{color:var(--mut);font-weight:400}
@media(max-width:640px){.stub .feat{grid-template-columns:1fr}}
/* [2026-07-27 사용자요청] 로그인·가입 페이지 위 여백 축소(60px 고정 → 화면폭에 따라 자동). */
.loginbox{max-width:380px;margin:clamp(14px,3.2vw,28px) auto 40px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px}
.loginbox h1{font-size:22px;margin:0 0 14px}   /* [2026-07-26] 타이틀 아래 여백 확보(4→14) */
.loginbox p{color:var(--mut);font-size:13px;margin:0 0 20px}
.loginbox p.ltop{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--acc)}
.loginbox h1.titlerow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.loginbox h1.titlerow .subt{font-size:13px;font-weight:600;color:var(--mut)}
.lerr{background:#3a1d1d;color:#ff8c8c;border:1px solid #5a2a2a;border-radius:9px;padding:9px 12px;font-size:13px;margin:14px 0 0}
.lnote{color:var(--mut);font-size:12px;margin-top:12px;line-height:1.5}
.sbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:13px;border-radius:10px;font-weight:700;font-size:15px;margin-bottom:10px}
.sbtn .si{font-size:17px}
.sbtn.kakao{background:#FEE500;color:#191600}
.sbtn.google{background:#fff;color:#1f1f1f;border:1px solid #dadce0}
.sbtn:hover{filter:brightness(.96)}
.sbtn.dim{opacity:.55}
.loginbox small{color:var(--mut);font-weight:400}
.phrow{display:flex;gap:8px;align-items:stretch;margin-bottom:2px}
.phrow input{flex:1}
.phrow .btn{flex:none;padding:11px 14px;white-space:nowrap;text-align:center}
.smsg{font-size:12px;margin-top:8px;min-height:15px}
.smsg.ok{color:#3fb950} .smsg.no{color:#ff8c8c}
.lfoot{margin-top:18px;font-size:13px;color:var(--mut);text-align:center}
.lfoot a{color:var(--acc);font-weight:600}
.sepdot{margin:0 6px;color:var(--line)}
.loginbox label{display:block;font-size:13px;color:var(--mut);margin:12px 0 5px}
.loginbox input{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--tx);padding:11px;border-radius:9px}
.loginbox .btn{width:100%;margin-top:20px;text-align:center;border:0;cursor:pointer}
.roles{display:flex;gap:8px;margin-top:16px}
.roles span{flex:1;text-align:center;font-size:12px;color:var(--mut);border:1px dashed var(--line);border-radius:9px;padding:8px}

@media(max-width:900px){
  .feat{grid-template-columns:1fr}
  .vwrap{grid-template-columns:1fr;height:auto;gap:10px;padding:10px}
  .col.side{order:2;max-height:600px}              /* 피드는 차트 아래로 · [2026-07-03] 약 10종목 보이게 높이 확대(초과분 내부스크롤) */
  .center{order:1}
  .phead{padding:2px 0 8px}
  /* 모바일: 종목코드 뱃지 추가로 가격줄이 검색창 옆에서 줄바꿈되던 것 방지(여백 확보) */
  .prow1{gap:8px}
  .search input{width:96px}
  .exch{min-width:0}
  .chartbox{flex:none;height:420px;min-height:0;padding:8px}   /* 모바일 고정 높이(축소) */
  .subbtn{display:none}   /* 모바일: 보조지표(거래량/거래대금/순매수/프로그램) 버튼 전부 숨김 */
  #chart{flex:1 1 auto;min-height:200px;height:auto}   /* 툴바(분봉+이평) 아래 남은 공간 채움 */
  /* 툴바: 한 줄에 안 들어가면 여러 줄로 줄바꿈 */
  .chartbar{flex-direction:column;align-items:stretch;gap:7px}
  .tfgroup,.ctoggles{flex-wrap:wrap;max-width:100%;margin-left:0;gap:6px}
  .ctg{padding:6px 11px;font-size:12px}            /* 터치 타깃 확대 */
  .sep{display:none}                               /* tfgroup 구분선 숨김 */
  .ctoggles .sep{display:block;flex-basis:100%;width:auto;height:0;margin:0;background:none} /* 이평/보조지표/옵션 줄 분리 */
  /* 모바일: VWAP·고저·%·전체·이평·보조지표 버튼 숨김 (거래량 고정 표시) */
  #vwapbtn,#hlbtn,#pctbtn,#rstbtn,#ma5,#ma10,#ma20,#ma60,#ma120,.subbtn{display:none}
  .nav{padding:0 12px;gap:10px}                    /* 모바일: 상단바 여백·간격 축소(공간 확보) */
  .brand .brandname{font-size:27px}                /* [2026-07-03] 모바일: 최상단 '주톡' 로고 축소 */
  .brand .brandlogo{height:22px;width:auto}   /* [2026-07-26] 모바일: 로고 높이 축소 */
  .navacct{padding:4px 7px;gap:5px;font-size:11px}   /* 모바일: 컴팩트 (우측정렬은 .brand margin-right:auto) */
  .subbadge{font-size:10px;padding:2px 7px}        /* [2026-07-03] 모바일: 구독회원 배지 축소 */
  .navsubbtn{padding:4px 9px;font-size:11px;gap:3px;box-shadow:0 2px 7px rgba(255,179,0,.28)}  /* [2026-06-29] 모바일: 구독/확인권 버튼 축소(상단 여백 확보) */
  .gdday,.gsig{font-size:10px;padding:2px 6px}     /* 모바일: 배지 축소(☰까지 들어가게) */
  .navacct.guest b{display:none}                   /* 모바일: 'Guest' 글자 숨김(👤만) → ☰ 공간 확보 */
  .navacct .na-time{display:none}                  /* 모바일: 상단바 혼잡 방지로 시각 숨김 */
  .pl-lbl{display:none}                            /* [2026-07-17] 모바일: '확인권'·'장' 숨김 → '🎫 1' 로 축약 */
  .navacct b{max-width:92px}                       /* [2026-07-17] 확인권 배지 자리 확보(아이디는 …처리) */
  .navtoggle{display:block;margin-left:6px}        /* ☰ 는 칩 오른쪽 옆 */
  .mlogin{display:inline-block;color:#fff;font-weight:800;font-size:11.5px;text-decoration:none;
    background:linear-gradient(90deg,#4aa3df,#a371f7);padding:5px 12px;border-radius:999px;
    box-shadow:0 4px 12px rgba(110,120,255,.32)}   /* 모바일: ☰ 왼쪽 로그인 버튼 [2026-07-05] 살짝 축소 */
  .menu a.loginbtn{display:none}                    /* 모바일: 드롭다운 내 중복 로그인 숨김 */
  /* ★[2026-07-17] 드로어 전제조건 — .nav 의 backdrop-filter 제거(모바일).
     backdrop-filter 가 걸린 요소는 position:fixed 자손의 '기준(containing block)'이 되어버려,
     헤더 안에 있는 .menu/.menu-scrim 이 뷰포트가 아니라 헤더(높이 58px)에 갇혔었음(실측: 드로어 높이 57px).
     .nav 배경이 불투명(#0b0e14)이라 이 blur 는 원래 시각효과가 없으므로 꺼도 보이는 변화는 없다. */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none}
  /* ★[2026-07-17 사용자요청] 메뉴 = 상단에서 줄단위로 내려오던 드롭다운 → 왼쪽에서 밀려나오는 패널(드로어).
     ▸display 토글이 아니라 transform 으로 여닫아야 슬라이드 모션이 생긴다(display:none 은 트랜지션 불가).
     ▸위치 fixed + 화면 전체 높이. 폭은 기종별 78%(상한 320px).
     ▸열림 상태는 기존과 동일하게 body.navopen 이라, 기존 여닫기 JS(하단바 버튼·바깥클릭·뒤로가기)를 그대로 쓴다. */
  .menu{display:flex;position:fixed;top:0;bottom:0;left:0;right:auto;width:min(78%,320px);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;
    background:linear-gradient(180deg,#18202f 0%,#121926 55%,#0e1520 100%);
    border-right:1px solid #2a3549;border-bottom:0;
    padding:calc(env(safe-area-inset-top,0px) + 14px) 10px calc(env(safe-area-inset-bottom,0px) + 16px);
    z-index:80;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(-100%);visibility:hidden;
    transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s linear .28s;
    box-shadow:0 0 0 rgba(0,0,0,0)}
  body.navopen .menu{transform:translateX(0);visibility:visible;
    transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s;
    box-shadow:12px 0 34px rgba(0,0,0,.5)}
  /* ★[2026-07-17] 드로어 내부 — 아이콘 + 제목 + 설명 + 구분선. 앱 톤(딥 네이비)에 맞춘 차분한 스타일.
     ※이 미디어쿼리(max-900) 안에서만 → 데스크톱 헤더 가로 메뉴는 기존 다크 유지. */
  .menu .mi-sec{display:block;padding:6px 12px 8px;font-size:11px;font-weight:800;letter-spacing:.08em;
    color:#6f7d96;text-transform:none}
  .menu .mi-div{display:block;height:1px;margin:10px 8px;background:linear-gradient(90deg,#2a3549,rgba(42,53,73,0))}
  .menu a{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:11px;
    align-items:center;padding:11px 12px;border-radius:12px;min-height:58px;
    color:#dbe4f0;background:transparent;box-shadow:none;font-size:15px;font-weight:700;
    transition:background .14s,color .14s}
  .menu a + a{margin-top:1px}
  .menu .mi-ico{display:block;grid-row:1 / span 2;width:34px;height:34px;padding:7px;box-sizing:border-box;
    border-radius:10px;background:#212c40;color:#8fb6e8;
    fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
    transition:background .14s,color .14s}
  .menu .mi-t{grid-column:2;grid-row:1;line-height:1.25}
  .menu .mi-d{display:block;grid-column:2;grid-row:2;font-size:11.5px;font-weight:500;color:#8b98ad;
    line-height:1.35;margin-top:2px;white-space:normal;word-break:keep-all}
  .menu a:hover,.menu a:active{background:#1e293c}
  /* 현재 페이지 — 파랑 강조 + 왼쪽 인디케이터 */
  /* [2026-07-17 사용자요청] 현재페이지 표시 = '하단 주황라인'(전역 51행: box-shadow:inset 0 -2px 0 var(--acc), --acc=#ff6020) 폐기.
     ※box-shadow:none 으로 명시적으로 꺼야 함 — 안 끄면 전역 규칙이 그대로 살아 주황선이 남는다(이번 지적).
     대체: 파란 배경 + 아이콘 타일 채움 + 왼쪽 세로 인디케이터(행 안쪽, 둥근모서리 따라 깔끔하게). */
  .menu a.on{position:relative;overflow:hidden;background:#1b2942;color:#eaf3ff;box-shadow:none}
  .menu a.on .mi-ico{background:#2b60a8;color:#ffffff}
  .menu a.on .mi-d{color:#9dc0ea}
  .menu a.on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#4aa3df}
  /* 계정 영역 버튼 */
  .menu a.logoutbtn{color:#c6cfdd}
  .menu a.logoutbtn .mi-ico{background:#2b2230;color:#e0908f}
  /* 위쪽 778행에서 '드롭다운 내 중복 로그인 숨김'으로 display:none 걸어둔 걸 되살림 —
     드로어는 제대로 된 메뉴라 로그인 항목이 있어야 하고, 없으면 구분선만 남아 어색함. */
  .menu a.loginbtn{display:grid;margin:2px 0 0;color:#fff;background:linear-gradient(90deg,#2f6fb5,#7a53c7);
    box-shadow:0 8px 20px rgba(74,120,220,.22);padding:12px;border-radius:12px}
  .menu a.loginbtn .mi-ico{background:rgba(255,255,255,.16);color:#fff}
  .menu a.loginbtn .mi-d{color:rgba(255,255,255,.82)}
  .menu a.gosub{color:#e8eefb;animation:none;box-shadow:none}
  .menu a.gosub .mi-ico{background:#2d3a52;color:#9db6dc}
  /* 뒷배경 딤 — 드로어 뒤를 어둡게(클릭하면 기존 '바깥클릭 닫기' 핸들러가 닫음) */
  /* ★[2026-07-17 사용자요청] 드로어 열림 중 '뒤 배경이 같이 스크롤'되던 문제.
     ▸body 스크롤 잠금: 뒤 본문이 안 움직임(스크롤 위치는 유지됨).
     ▸.menu 는 overscroll-behavior:contain → 메뉴 끝까지 스크롤해도 뒤로 넘어가지(체이닝) 않음.
       지금은 항목이 적어 스크롤이 없지만, 항목이 늘어나면 메뉴만 스크롤된다.
     ▸딤은 touch-action:none → 딤을 잡고 끌어도 뒤가 안 움직임. */
  body.navopen{overflow:hidden}
  .menu{overscroll-behavior:contain}
  .menu-scrim{display:block;position:fixed;inset:0;z-index:79;background:rgba(4,7,13,.55);touch-action:none;
    opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}
  body.navopen .menu-scrim{opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s}
  .menu a.loginbtn{margin:6px 0 0}
  .hero h1{font-size:34px}
  .hcnt{display:none}   /* 모바일: '건 포착' 배지 숨김(헤더 짤림 방지) */
  /* [2026-07-04] 복구: '실시간 신호 ●LIVE 최근신호[날짜시각]'을 같은(윗) 줄로 유지(사용자 요청). 넘치면 시각만 …처리 */
  #hlive{font-size:8px;padding:1px 5px;border-radius:7px}   /* [2026-07-06] LIVE 축소는 모바일에서만(한 줄 유지). 웹은 기본 크기. */
  .sec .sec-h{font-size:19px}
  .sec-h{flex-wrap:nowrap;white-space:nowrap;min-width:0;gap:7px}
  .hsigtime{font-size:11px;min-width:0;overflow:hidden;text-overflow:ellipsis}
}
/* [2026-07-03] 좁은 폰: 히어로 '주톡!'이 '트레이딩!'과 한 줄에 오게(900px블록의 34px가 좁은폰에까지 새던 것 오버라이드) */
@media(max-width:440px){ .hero h1{font-size:30px} .hero h1 .hl2{font-size:1.16em} }
@media(max-width:400px){ .hero h1{font-size:27px} }
@media(max-width:360px){ .hero h1{font-size:25px} }

/* ─────────────────────────────────────────────────────────────
   [2026-07-25 근본수정·유동 타이포] 폰 글자/화면 확대 설정에서 고정 px 텍스트가 안 줄어
   전 화면이 꽉 차고(실시간포착 시각 '최·' 잘림, 히어로 여백 없음) 삐져나오던 문제.
   → 핵심 텍스트를 화면폭 비율(vw) 기반 clamp 로 통합. 넓은 폰은 상한값(현재크기) 그대로,
     좁은/확대된 폰에서만 자동 축소돼 '여백까지 되는 폰'과 같은 비율을 유지.
   html body 접두사 = 위 흩어진 미디어쿼리 고정값들보다 우선(특이도↑). 모바일(≤600)만 적용, 웹 무관.
   ───────────────────────────────────────────────────────────── */
@media(max-width:600px){
  /* 히어로 메인 타이틀 — 자식(hl2·hl3·kw)은 em 상대라 h1 만 유동이면 통째로 스케일 */
  html body .hero h1{font-size:clamp(20px,7vw,32px)}
  /* 섹션 헤더(실시간 포착) + 시각 — 유동 축소로 '제목+최근신호'가 한 줄에 들어가고 우측 여백 확보.
     ★한 줄 유지(sec-h 원래 nowrap 그대로) — 2줄로 흘리지 않음. 폰트만 줄여 공간 확보. */
  html body .sec .sec-h{font-size:clamp(13px,4vw,19px)}
  html body .hsigtime{font-size:clamp(9px,2.7vw,13px);min-width:0}
  /* 히어로 서브 불릿 */
  html body .herosub li{font-size:clamp(11px,3.6vw,15px)}
}

/* ★[2026-07-17] 좁은 폰 헤더 — 확인권 배지 상시노출 대응.
   ※반드시 파일 끝(=@media 900px 블록보다 뒤)에 둘 것 — 같은 우선순위라 뒤에 있어야 이긴다.
   ★[수정 이력] 처음엔 360px 하네스 측정을 믿고 아이디·'무료회원'·👤 를 모두 숨겼으나,
     사용자 실기기 스크린샷에서 브랜드~배지 사이 여백이 크게 남음이 확인됨(=하네스가 브랜드 폭을 과대측정).
     → 숨김을 걷어내고, 부족할 때만 아이디가 …로 줄어드는 방식으로 변경(공간 남으면 다 보임).
   배지는 절대 안 줄고(flex:0 0 auto), 아이디만 줄어든다. 겹침 방지는 .navacct:not(.sub){overflow:hidden}. */
@media(max-width:480px){
  .navacct{padding:4px 7px;gap:5px}
  .navacct b{max-width:76px}          /* 아이디는 좀 더 짧게 … 처리(배지 자리 양보) */
}
@media(max-width:560px){
  .pl-long{display:none}
  .pl-sig{display:none}               /* [2026-07-17] 모바일: '신호 ' 빼고 '확인권' — 웹은 여백 넉넉하니 '신호 확인권' 풀표기(사용자 요청) */
  .pl-soon{display:none}              /* ★[2026-07-17 사용자요청] 앱/모바일은 인라인 안내 아예 제거 → 배지 클릭 시 .passmsg 패널로 안내 */
}
@media(max-width:370px){
  .pl-lbl{display:none}               /* 아주 좁은 폰에서만 '확인권/장' 빼고 '🎫 1' 로 축약 */
  .navacct b{max-width:56px}
}

/* ★[2026-07-17 사용자요청] 히어로 CTA 버튼 — ①내용 완전 중앙정렬 ②테두리에 흐르는 모션(제일 중요한 버튼 강조).
   .herobtns .herobtn.watch = 이 자리에 상황별로 뜨는 버튼 전부(비로그인/무료회원/체험·구독/텔레그램) → 한 규칙으로 커버.
   링은 ::after + mask 합성으로 만든다(배경이 단색이든 그라디언트(.on)든 상관없이 테두리만 칠해짐).
   pointer-events:none 필수 — 안 그러면 링이 클릭을 먹는다. */
.herobtns .herobtn.watch{position:relative;isolation:isolate;
  justify-content:center;align-items:center;text-align:center}      /* 내용 세로·가로 중앙 */
.herobtns .herobtn.watch > *{width:100%;text-align:center}
.herobtns .herobtn.watch::after{
  content:'';position:absolute;inset:-2px;border-radius:14px;padding:2px;pointer-events:none;
  /* [2026-07-17 사용자요청] 비활성(알람 꺼짐)= 어두운 톤으로 은은하게. 활성(.on)일 때만 아래에서 컬러로.
     ※background 단축이 아니라 background-image 로 지정 — 단축을 쓰면 background-size(300%)가 리셋돼 모션이 죽는다. */
  background-image:linear-gradient(90deg,#2c3a4f,#46536e,#63739a,#46536e,#2c3a4f);
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:herobtnflow 3.2s linear infinite}
/* [2026-07-19 사용자요청] 활성(알람 켜짐)은 무지개 흐르는 링을 쓰지 않는다 —
   '단기' 탭 활성과 같은 파랑 단색 테두리(위 .herobtn.watch.on의 border)로 통일했으므로 링은 숨김.
   비활성(꺼짐)의 은은한 링은 그대로 유지. */
.herobtns .herobtn.watch.on::after{display:none}
@keyframes herobtnflow{to{background-position:300% 0}}
/* 접근성: 모션 최소화 설정이면 흐름 정지(테두리는 유지) */
@media (prefers-reduced-motion:reduce){ .herobtns .herobtn.watch::after{animation:none} }