/* ========================================================== 디자인 스킨 (A안=기존 slides.css 는 손대지 않는다) #frame[data-dsn="x"] = 어두운 배경 테마용 #frame.light[data-dsn="x"] = 밝은 배경 테마용 (둘 다 시인성 확보) data-dsn 없음/"a" → 어떤 규칙도 안 걸림 = 기존 A안 그대로. ========================================================== */ /* ---- 영상 무대 색 기준선 (툴 화면과 분리) ---- ⚠️ 기본 디자인(a)은 스킨 오버라이드가 없어 **:root 값을 그대로 물려받았다.** 그래서 툴 화면 테마를 바꾸면 완성 영상의 강조색까지 따라 바뀐다. 지금까지 나가던 값을 여기 못박아 무대를 격리한다 — 앞으로 툴 테마를 어떻게 바꾸든 영상은 그대로다. ※ 스킨(#frame[data-dsn=…])과 밝은 테마(#frame.light)는 선택자가 더 세서 그대로 이긴다. */ #frame{ --deep:#080D16; --bg:#0B1220; --panel:#0E1520; --ui2:#151E2C; --card:#16202F; --card2:#1A2536; --line:#22304A; --line2:#2E3F5C; --tx:#EFF4FA; --mut:#B6C4D6; --dim:#8DA0B8; --gold:#F5B942; --gold2:#FFD470; --cyan:#35D7E8; --red:#FF4D4D; --grn:#3DDC97; --vio:#B78CF7; --up:#F0464B; --dn:#3E7BE8; } /* ---- 렌더 캡처 보정 (모든 디자인 공통) ---- rendermode 는 인트로 애니메이션을 얼려서, base 가 opacity:0 인 키커·제목·소제목이 영상에서 사라진다. 최종 상태로 고정한다. */ body.rendermode .slide.on .kicker, body.rendermode .slide.on .stitle, body.rendermode .slide.on .ssub{opacity:1!important;transform:none!important} /* ══════════════════════════════════════════════════════════ B · 뉴스 속보형 — 방송 뉴스. 빨강·각진·로워서드 자막띠 ══════════════════════════════════════════════════════════ */ #frame[data-dsn="news"]{--red:#E4322B;--gold:#E8B24B;--cyan:#3B82D6} /* 배경 */ #frame[data-dsn="news"] .slide{background:linear-gradient(180deg,#0C1521 0%,#0A0F18 100%)} #frame.light[data-dsn="news"] .slide{background:linear-gradient(180deg,#FFFFFF 0%,#EEF3F9 100%)} /* 상단바 = 방송 빨강 단색 */ #frame[data-dsn="news"] .topbar,#frame.light[data-dsn="news"] .topbar{background:var(--red);height:5px} /* 키커 = 빨간 "속보" 태그 (양쪽 동일) */ #frame[data-dsn="news"] .kicker,#frame.light[data-dsn="news"] .kicker{ color:#fff;background:var(--red);padding:5px 13px;border-radius:3px;font-weight:800;letter-spacing:.4px; width:max-content;box-shadow:0 3px 12px rgba(228,50,43,.35)} #frame[data-dsn="news"] .kicker::before,#frame.light[data-dsn="news"] .kicker::before{ width:0;height:14px;border-radius:0;background:none;border-left:3px solid #fff;margin-right:2px} /* 제목 = 좌측 빨간 바 + 각진 */ #frame[data-dsn="news"] .stitle,#frame.light[data-dsn="news"] .stitle{ padding-left:18px;border-left:6px solid var(--red);margin-top:10px;line-height:1.16;letter-spacing:-1.4px} #frame[data-dsn="news"] .stitle{color:#F4F8FD} #frame.light[data-dsn="news"] .stitle{color:#12203A} #frame[data-dsn="news"] .stitle em,#frame.light[data-dsn="news"] .stitle em{color:var(--red)} #frame[data-dsn="news"] .stitle b,#frame.light[data-dsn="news"] .stitle b{color:var(--cyan);text-shadow:none} #frame[data-dsn="news"] .ssub{color:#A7B8CE} #frame.light[data-dsn="news"] .ssub{color:#44546E} /* 카드류 = 각지고 좌측 빨간 바 */ #frame[data-dsn="news"] .cards .cd,#frame[data-dsn="news"] .steps .st,#frame[data-dsn="news"] .vs .col, #frame[data-dsn="news"] .ctaL,#frame[data-dsn="news"] .ctaR,#frame[data-dsn="news"] .article{ background:#111C2C;border:1px solid #26374F;border-left:4px solid var(--red);border-radius:5px;box-shadow:none} #frame.light[data-dsn="news"] .cards .cd,#frame.light[data-dsn="news"] .steps .st,#frame.light[data-dsn="news"] .vs .col, #frame.light[data-dsn="news"] .ctaL,#frame.light[data-dsn="news"] .ctaR,#frame.light[data-dsn="news"] .article{ background:#fff;border:1px solid #E1E8F2;border-left:4px solid var(--red);border-radius:5px;box-shadow:0 4px 16px rgba(20,33,61,.06)} #frame[data-dsn="news"] .cards .cd h3,#frame[data-dsn="news"] .steps h3{color:#F0F5FB} #frame.light[data-dsn="news"] .cards .cd h3,#frame.light[data-dsn="news"] .steps h3{color:#12203A} #frame[data-dsn="news"] .cards .cd li,#frame[data-dsn="news"] .steps p{color:#BAC9DC;font-size:16px;line-height:1.6} #frame.light[data-dsn="news"] .cards .cd li,#frame.light[data-dsn="news"] .steps p{color:#42526B;font-size:16px;line-height:1.6} /* 헤더 = 빨간 포인트로 본문과 구분 */ #frame[data-dsn="news"] .cards .cd h3{color:#FF8A82} #frame.light[data-dsn="news"] .cards .cd h3{color:#D62B22} #frame[data-dsn="news"] .badges span,#frame.light[data-dsn="news"] .badges span{border-radius:4px} /* ══════════════════════════════════════════════════════════ 밝은 배경 테마 공통 — 하단 자막을 검정 글씨로 (흰 글씨는 안 보인다) ※ 기존 A안 포함 모든 디자인에 적용. 어두운 배경은 기존대로 흰 글씨. ══════════════════════════════════════════════════════════ */ #frame.light .subtxt{color:#141C2B;text-shadow:0 1px 2px rgba(255,255,255,.75),0 0 2px rgba(255,255,255,.6)} #frame.light .subtxt .g{color:#B47300} #frame.light .subtxt .c{color:#0E7490} #frame.light .subtxt .r{color:#C81E1E} /* ══════════════════════════════════════════════════════════ C · 자극형 — 유튜브 썸네일급. 거대 그라데이션 제목·글로우·컬러블록 ══════════════════════════════════════════════════════════ */ #frame[data-dsn="punch"]{--gold:#FFC531;--gold2:#FFE58A;--cyan:#22E0C0;--red:#FF3D6E} #frame[data-dsn="punch"] .slide{background:radial-gradient(125% 95% at 50% -8%,#2A1146 0%,#160A28 42%,#0C0518 100%)} #frame.light[data-dsn="punch"] .slide{background:radial-gradient(125% 95% at 50% -8%,#FFF0DE 0%,#FDEAF2 55%,#FFFFFF 100%)} #frame[data-dsn="punch"] .topbar,#frame.light[data-dsn="punch"] .topbar{ height:6px;background:linear-gradient(90deg,#FFC531,#FF8A00,#FF3D6E,#B14BFF,#22E0C0)} /* 키커 */ #frame[data-dsn="punch"] .kicker{color:#FFD34D;font-weight:900;text-shadow:0 0 16px rgba(255,197,49,.6)} #frame.light[data-dsn="punch"] .kicker{color:#E0600A;font-weight:900;text-shadow:none} #frame[data-dsn="punch"] .kicker::before{background:#FFC531;box-shadow:0 0 12px #FFC531} #frame.light[data-dsn="punch"] .kicker::before{background:#E0600A;box-shadow:none} /* 제목 = 거대 */ #frame[data-dsn="punch"] .stitle,#frame.light[data-dsn="punch"] .stitle{ font-size:50px;font-weight:900;letter-spacing:-1.8px;line-height:1.08} #frame[data-dsn="punch"] .stitle{color:#fff;text-shadow:0 4px 22px rgba(0,0,0,.5)} #frame.light[data-dsn="punch"] .stitle{color:#241033;text-shadow:0 2px 0 rgba(255,255,255,.6)} #frame[data-dsn="punch"] .stitle em{color:transparent;background:linear-gradient(92deg,#FFD34D,#FF9A2E 60%,#FF6A00); -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 18px rgba(255,160,40,.45))} #frame.light[data-dsn="punch"] .stitle em{color:transparent;background:linear-gradient(92deg,#F0490B,#E0006E); -webkit-background-clip:text;background-clip:text} #frame[data-dsn="punch"] .stitle b{color:#22E0C0;text-shadow:0 0 22px rgba(34,224,192,.7)} #frame.light[data-dsn="punch"] .stitle b{color:#0C8F7C;text-shadow:none} #frame[data-dsn="punch"] .ssub{color:#FFE58A;font-weight:700} #frame.light[data-dsn="punch"] .ssub{color:#8A3D00;font-weight:700} /* 카드 = 굵은 좌측 컬러 + 글로우(다크) / 굵은 좌측 + 진한 그림자(라이트) */ #frame[data-dsn="punch"] .cards .cd,#frame[data-dsn="punch"] .steps .st,#frame[data-dsn="punch"] .vs .col{ background:#1B1030;border:1px solid #3C2560;border-left:6px solid #FFC531;border-radius:16px; box-shadow:0 0 0 1px rgba(255,197,49,.12),0 14px 40px rgba(0,0,0,.45)} #frame.light[data-dsn="punch"] .cards .cd,#frame.light[data-dsn="punch"] .steps .st,#frame.light[data-dsn="punch"] .vs .col{ background:#fff;border:1px solid #F3D9C6;border-left:6px solid #FF8A00;border-radius:16px; box-shadow:0 10px 30px rgba(220,90,20,.14)} /* 헤더(수급/실적/차트) = 포인트 색, 본문 = 더 밝고 크게 */ #frame[data-dsn="punch"] .cards .cd h3{color:#FFD34D} #frame.light[data-dsn="punch"] .cards .cd h3{color:#D6006E} #frame[data-dsn="punch"] .cards .cd li,#frame[data-dsn="punch"] .steps p{color:#E7DEF5;font-size:16px;line-height:1.6} #frame.light[data-dsn="punch"] .cards .cd li,#frame.light[data-dsn="punch"] .steps p{color:#4A3A55;font-size:16px;line-height:1.6} #frame[data-dsn="punch"] .badges span{border-radius:20px;font-weight:800} #frame.light[data-dsn="punch"] .badges span{border-radius:20px;font-weight:800;background:#fff} #frame.light[data-dsn="punch"] .subtxt{color:#241033;text-shadow:0 1px 3px rgba(255,255,255,.7)} /* ══════════════════════════════════════════════════════════ D · 미니멀 — 여백·헤어라인·단일 포인트. 채움 없는 카드 ══════════════════════════════════════════════════════════ */ #frame[data-dsn="min"]{--gold:#CDB06A;--cyan:#6FB5C0} #frame.light[data-dsn="min"]{--gold:#A9862E;--cyan:#2E8A98} #frame[data-dsn="min"] .slide{background:#0B0F16;padding:58px 66px 0} #frame.light[data-dsn="min"] .slide{background:#FFFFFF;padding:58px 66px 0} #frame[data-dsn="min"] .topbar,#frame.light[data-dsn="min"] .topbar{height:2px;background:var(--gold);opacity:.8} /* 키커 = 얇은 대문자 + 대시 */ #frame[data-dsn="min"] .kicker,#frame.light[data-dsn="min"] .kicker{ color:var(--gold);font-weight:600;letter-spacing:2.5px;font-size:12.5px;text-transform:uppercase} #frame[data-dsn="min"] .kicker::before,#frame.light[data-dsn="min"] .kicker::before{ width:16px;height:2px;border-radius:0;background:var(--gold)} /* 제목 = 가벼운 웨이트 + 얇은 밑줄 */ #frame[data-dsn="min"] .stitle,#frame.light[data-dsn="min"] .stitle{ font-weight:600;letter-spacing:-.6px;line-height:1.26;display:inline-block;padding-bottom:12px;border-bottom:2px solid var(--gold)} #frame[data-dsn="min"] .stitle{color:#EEF2F7} #frame.light[data-dsn="min"] .stitle{color:#1A2230} #frame[data-dsn="min"] .stitle em,#frame.light[data-dsn="min"] .stitle em{color:var(--gold);font-weight:700} #frame[data-dsn="min"] .stitle b{color:var(--cyan);text-shadow:none;font-weight:700} #frame.light[data-dsn="min"] .stitle b{color:var(--cyan);text-shadow:none;font-weight:700} #frame[data-dsn="min"] .ssub{color:#93A2B5;font-weight:400} #frame.light[data-dsn="min"] .ssub{color:#5A6678;font-weight:400} /* 카드 = 채움 없이 헤어라인만, 여백 크게 */ #frame[data-dsn="min"] .cards .cd,#frame[data-dsn="min"] .steps .st,#frame[data-dsn="min"] .vs .col, #frame[data-dsn="min"] .ctaL,#frame[data-dsn="min"] .ctaR,#frame[data-dsn="min"] .article{ background:transparent;border:1px solid #232E3D;border-radius:10px;box-shadow:none;padding:28px 24px} #frame.light[data-dsn="min"] .cards .cd,#frame.light[data-dsn="min"] .steps .st,#frame.light[data-dsn="min"] .vs .col, #frame.light[data-dsn="min"] .ctaL,#frame.light[data-dsn="min"] .ctaR,#frame.light[data-dsn="min"] .article{ background:transparent;border:1px solid #E4E8EF;border-radius:10px;box-shadow:none;padding:28px 24px} /* 헤더 = 금색 포인트, 본문 = 더 밝고 크게 */ #frame[data-dsn="min"] .cards .cd h3,#frame[data-dsn="min"] .steps h3{color:#E7CE8A;font-weight:700} #frame.light[data-dsn="min"] .cards .cd h3,#frame.light[data-dsn="min"] .steps h3{color:#9A7B1E;font-weight:700} #frame[data-dsn="min"] .cards .cd li,#frame[data-dsn="min"] .steps p{color:#B8C3D2;font-size:16px;line-height:1.6} #frame.light[data-dsn="min"] .cards .cd li,#frame.light[data-dsn="min"] .steps p{color:#46536A;font-size:16px;line-height:1.6} #frame[data-dsn="min"] .badges span{background:transparent;border-radius:6px;font-weight:600} #frame.light[data-dsn="min"] .badges span{background:transparent;border-radius:6px;font-weight:600} #frame.light[data-dsn="min"] .subtxt{color:#1A2230;text-shadow:0 1px 2px rgba(255,255,255,.7)} #frame[data-dsn="min"] .stitle b,#frame[data-dsn="min"] .hookR h3 b{text-shadow:none} /* ══════════════════════════════════════════════════════════ E · 키움차트형 — HTS 트레이딩 터미널. 그래파이트/모노·차트 주인공 ══════════════════════════════════════════════════════════ */ #frame[data-dsn="kiwoom"]{--gold:#E8B24B;--cyan:#4FB0E8;--red:#F0464B;--grn:#37B87A} #frame.light[data-dsn="kiwoom"]{--gold:#B07C00;--cyan:#0E7FA8;--red:#E23A3A;--grn:#1E9E68} #frame[data-dsn="kiwoom"] .slide{background:linear-gradient(180deg,#2C333B 0%,#242A31 60%,#20252C 100%);padding:30px 34px 0} #frame.light[data-dsn="kiwoom"] .slide{background:linear-gradient(180deg,#EEF1F5 0%,#E6EAF0 100%);padding:30px 34px 0} #frame[data-dsn="kiwoom"] .topbar,#frame.light[data-dsn="kiwoom"] .topbar{height:3px;background:linear-gradient(90deg,var(--red),#C9942F,var(--cyan))} /* 종목 헤더 */ #frame[data-dsn="kiwoom"] .kicker{color:var(--gold);background:#1A1F26;border:1px solid #3A434F;padding:4px 10px;border-radius:3px;font-weight:700;width:max-content;max-width:100%} #frame.light[data-dsn="kiwoom"] .kicker{color:#8A6410;background:#fff;border:1px solid #CED5DF;padding:4px 10px;border-radius:3px;font-weight:700;width:max-content;max-width:100%} #frame[data-dsn="kiwoom"] .kicker::before{background:var(--red);box-shadow:0 0 8px var(--red)} #frame.light[data-dsn="kiwoom"] .kicker::before{background:var(--red)} #frame[data-dsn="kiwoom"] .stitle,#frame.light[data-dsn="kiwoom"] .stitle{font-size:36px;letter-spacing:-1px;margin-top:8px;margin-bottom:4px;font-variant-numeric:tabular-nums} #frame[data-dsn="kiwoom"] .stitle{color:#E7EBF0} #frame.light[data-dsn="kiwoom"] .stitle{color:#1A2230} #frame[data-dsn="kiwoom"] .stitle em,#frame.light[data-dsn="kiwoom"] .stitle em{color:var(--red)} /* 상승 빨강(한국식) */ #frame[data-dsn="kiwoom"] .stitle b{color:var(--cyan);text-shadow:none} #frame.light[data-dsn="kiwoom"] .stitle b{color:var(--cyan);text-shadow:none} #frame[data-dsn="kiwoom"] .ssub{color:#A9B2BD;font-size:15px;margin-bottom:14px;font-variant-numeric:tabular-nums} #frame.light[data-dsn="kiwoom"] .ssub{color:#4A586C;font-size:15px;margin-bottom:14px;font-variant-numeric:tabular-nums} /* 차트박스 = HTS 플롯창, 더 크게 */ #frame[data-dsn="kiwoom"] .chartbox{background:linear-gradient(180deg,#222831,#1C2129);border:1px solid #454F5B;border-radius:4px;height:480px;padding:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 6px 22px rgba(0,0,0,.4)} #frame.light[data-dsn="kiwoom"] .chartbox{background:#FFFFFF;border:1px solid #CED5DF;border-radius:4px;height:480px;padding:3px;box-shadow:0 4px 16px rgba(20,33,61,.08)} /* 첨부 이미지는 차트박스를 꽉 채운다 (여백 최소) */ #frame[data-dsn="kiwoom"] .chartbox img,#frame.light[data-dsn="kiwoom"] .chartbox img{width:100%;height:100%;object-fit:contain} /* 종목 헤더를 조금 컴팩트하게 해 차트에 자리를 더 준다 */ #frame[data-dsn="kiwoom"] .stitle,#frame.light[data-dsn="kiwoom"] .stitle{font-size:32px;margin-top:6px;margin-bottom:2px} #frame[data-dsn="kiwoom"] .ssub,#frame.light[data-dsn="kiwoom"] .ssub{margin-bottom:10px} /* 정보 스트립(차트 note) */ #frame[data-dsn="kiwoom"] .note{background:#1A1F26;border:1px solid #3A434F;border-left:4px solid var(--red);border-radius:3px;color:#E7EBF0;font-size:14.5px;padding:8px 14px;font-variant-numeric:tabular-nums} #frame.light[data-dsn="kiwoom"] .note{background:#fff;border:1px solid #CED5DF;border-left:4px solid var(--red);border-radius:3px;color:#1A2230;font-size:14.5px;padding:8px 14px;font-variant-numeric:tabular-nums} /* 지표 범례(배지) */ #frame[data-dsn="kiwoom"] .badges span{background:#1A1F26;border:1px solid #3A434F;border-radius:3px;padding:6px 11px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums} #frame.light[data-dsn="kiwoom"] .badges span{background:#fff;border:1px solid #CED5DF;border-radius:3px;padding:6px 11px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums} /* 카드류 = 트레이딩 패널 */ #frame[data-dsn="kiwoom"] .cards .cd,#frame[data-dsn="kiwoom"] .steps .st,#frame[data-dsn="kiwoom"] .vs .col{ background:#232A33;border:1px solid #3A434F;border-radius:4px} #frame.light[data-dsn="kiwoom"] .cards .cd,#frame.light[data-dsn="kiwoom"] .steps .st,#frame.light[data-dsn="kiwoom"] .vs .col{ background:#fff;border:1px solid #CED5DF;border-radius:4px} #frame[data-dsn="kiwoom"] .cards .cd h3,#frame[data-dsn="kiwoom"] .steps h3{color:#E7EBF0} #frame.light[data-dsn="kiwoom"] .cards .cd h3,#frame.light[data-dsn="kiwoom"] .steps h3{color:#1A2230} #frame[data-dsn="kiwoom"] .cards .cd li,#frame[data-dsn="kiwoom"] .steps p{color:#C2CAD4;font-size:15.5px;line-height:1.6} #frame.light[data-dsn="kiwoom"] .cards .cd li,#frame.light[data-dsn="kiwoom"] .steps p{color:#46546A;font-size:15.5px;line-height:1.6} #frame[data-dsn="kiwoom"] .cards .cd h3{color:#F2C766} #frame.light[data-dsn="kiwoom"] .cards .cd h3{color:#B07C00} #frame[data-dsn="kiwoom"] .statwrap .big,#frame[data-dsn="kiwoom"] .subtxt, #frame.light[data-dsn="kiwoom"] .statwrap .big{font-variant-numeric:tabular-nums} #frame.light[data-dsn="kiwoom"] .subtxt{color:#1A2230;text-shadow:0 1px 2px rgba(255,255,255,.7);font-variant-numeric:tabular-nums} /* ══════════════════════════════════════════════════════════ 어두운 배경 공통 가독성 — 작은 본문은 흰색에 가깝게. 큰 글씨/포인트(제목·수치)는 각 디자인의 금·빨강 그대로. ══════════════════════════════════════════════════════════ */ #frame[data-dsn="news"] .cards .cd li,#frame[data-dsn="news"] .steps p,#frame[data-dsn="news"] .cards .cd, #frame[data-dsn="punch"] .cards .cd li,#frame[data-dsn="punch"] .steps p, #frame[data-dsn="min"] .cards .cd li,#frame[data-dsn="min"] .steps p, #frame[data-dsn="kiwoom"] .cards .cd li,#frame[data-dsn="kiwoom"] .steps p{color:#E9EFF7} #frame[data-dsn="news"] .ssub,#frame[data-dsn="punch"] .ssub,#frame[data-dsn="kiwoom"] .ssub,#frame[data-dsn="min"] .ssub{color:#CAD5E3} /* 본문 안 강조 숫자/단어는 밝은 금색 */ #frame[data-dsn="news"] .cards .cd li b,#frame[data-dsn="punch"] .cards .cd li b, #frame[data-dsn="min"] .cards .cd li b,#frame[data-dsn="kiwoom"] .cards .cd li b, #frame[data-dsn="news"] .cards .cd li em,#frame[data-dsn="punch"] .cards .cd li em{color:#FFD36A;font-style:normal} /* stat/큰 수치는 어두운 배경에서 확실히 밝게 */ #frame[data-dsn="news"] .statwrap .big,#frame[data-dsn="punch"] .statwrap .big,#frame[data-dsn="min"] .statwrap .big{filter:brightness(1.12)} /* ══════════════════════════════════════════════════════════ 밝은 배경 공통 — 슬라이드 보조 텍스트 변수를 진하게. (원인: 무대가 밝은데 --mut/--dim 이 다크 테마값 그대로라 회색으로 흐렸다) 기존 A안 포함 모든 템플릿에 적용. 어두운 배경은 그대로. ══════════════════════════════════════════════════════════ */ #frame.light{--mut:#3F4D64;--dim:#5E6C82} /* ---- 키움차트형: 수급·공매도·대차 표 (HTS 우측 패널) ---- */ .flowwrap{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} .fwbox{border:1px solid #3A434F;border-radius:4px;background:#1A1F26;overflow:hidden} #frame.light .fwbox{border-color:#CED5DF;background:#fff} .fwh{font-size:11.5px;font-weight:800;padding:5px 8px;background:#232A33;color:#E8B24B;border-bottom:1px solid #3A434F} #frame.light .fwh{background:#F2F4F6;color:#8A6410;border-bottom-color:#CED5DF} .fwr{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:2px;padding:3px 8px;font-size:11px; font-variant-numeric:tabular-nums;border-bottom:1px solid rgba(255,255,255,.05)} #frame.light .fwr{border-bottom-color:#EDF0F4} .fwbox .fwr:last-child{border-bottom:0} .fwr span{text-align:right;color:#C2CAD4} #frame.light .fwr span{color:#46546A} .fwr span:first-child{text-align:left;color:#8B95A1} .fwr.fwhd span{color:#8B95A1;font-weight:700;font-size:10px} .fwr span.up{color:#F0464B;font-weight:700} .fwr span.dn{color:#4FB0E8;font-weight:700} /* 공매도 표는 3칸 */ .fwbox:nth-child(2) .fwr{grid-template-columns:1fr 1.2fr 1fr} /* 표가 붙으면 차트를 조금 줄여 자리 확보 */ #frame[data-dsn="kiwoom"] .slide:has(.flowwrap) .chartbox, #frame.light[data-dsn="kiwoom"] .slide:has(.flowwrap) .chartbox{height:330px} /* 표가 붙으면 차트를 그만큼 줄인다 — 어느 디자인이든(표는 키움 전용이 아니다) */ .slide:has(.flowwrap) .chartbox{height:300px} .slide:has(.flowwrap) .statchart .chartbox{height:230px} /* ══════════════════════════════════════════════════════════ 배경 이미지가 깔린 슬라이드 — 글씨가 사진에 묻히지 않게 (Pexels 자동배경이 들어오면서 인용문·제목이 안 보이는 일이 생겼다) ══════════════════════════════════════════════════════════ */ /* 스크림은 **테마를 따라간다**. 어두운 테마 = 어둡게 깔고 흰 글씨 / 밝은 테마 = 밝게 깔고 원래 검은 글씨. (예전엔 밝은 테마에서도 검은 스크림을 강제해서, 밝은 화면 중간에 시커먼 슬라이드가 끼었다) */ .slidebg i{background:linear-gradient(180deg,rgba(6,10,18,.72),rgba(6,10,18,.86))!important} .slidebg img,.slidebg svg{opacity:.30!important} #frame.light .slidebg i{background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(244,247,251,.92))!important} #frame.light .slidebg img,#frame.light .slidebg svg{opacity:.14!important} .slide:has(.slidebg) .stitle, .slide:has(.slidebg) .ssub, .slide:has(.slidebg) .foot, .slide:has(.slidebg) .quote div, .slide:has(.slidebg) .statwrap .lb, .slide:has(.slidebg) .cards .cd h3, .slide:has(.slidebg) .cards .cd li{color:#FFFFFF!important; text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.7)} .slide:has(.slidebg) .kicker{color:#FFD98A!important;text-shadow:0 2px 8px rgba(0,0,0,.8)} /* 인용 박스는 반투명 검정 판을 깔아 확실히 읽히게 */ .slide:has(.slidebg) .quote div{background:rgba(8,12,20,.72)!important; border-color:rgba(255,255,255,.55)!important;box-shadow:0 10px 40px rgba(0,0,0,.55)!important} /* 밝은 테마 — 배경을 밝게 깔았으니 글씨는 원래대로 진하게 되돌린다 */ #frame.light .slide:has(.slidebg) .stitle, #frame.light .slide:has(.slidebg) .foot, #frame.light .slide:has(.slidebg) .statwrap .lb, #frame.light .slide:has(.slidebg) .cards .cd h3{color:#151B24!important;text-shadow:none!important} #frame.light .slide:has(.slidebg) .ssub, #frame.light .slide:has(.slidebg) .cards .cd li{color:#3C4757!important;text-shadow:none!important} #frame.light .slide:has(.slidebg) .kicker{color:#B4342E!important;text-shadow:none!important} #frame.light .slide:has(.slidebg) .quote div{color:#151B24!important;text-shadow:none!important; background:rgba(255,255,255,.92)!important;border-color:rgba(20,33,61,.22)!important; box-shadow:0 10px 34px rgba(20,33,61,.16)!important} /* ══════════════════════════════════════════════════════════ ▣ 콜아웃 위치를 손으로 잡기 (미리보기 전용) 자동 계산은 자동생성 차트에서만 정확하다. 키움 캡처 첨부본은 봉 위치를 알 수 없어, 끌어다 놓아 좌표를 못박는다. 렌더(rendermode)에서는 잡히지 않게 다시 꺼 둔다. ══════════════════════════════════════════════════════════ */ #frame:not(.rendermode) .callayer{pointer-events:none} #frame:not(.rendermode) .callout.show{pointer-events:auto;cursor:grab} #frame:not(.rendermode) .callout.show:hover .ctext{outline:2px dashed rgba(49,130,246,.8);outline-offset:3px} #frame:not(.rendermode) .callout.dragging{cursor:grabbing;opacity:.85} #frame.rendermode .callout,#frame.rendermode .callayer{pointer-events:none!important} .cohint{margin-top:8px;font-size:11.5px;color:var(--dim)} .cohint b{color:var(--gold)} /* 말풍선 글씨가 3줄로 쪼개지던 문제 — .ctext 는 절대위치라 "부모(.callout ≈ 120px)의 남은 폭"만큼만 잡혀 강제 줄바꿈됐다. 자연 폭(max-content)을 쓰되 520px 를 넘으면 그때 줄을 바꾼다. */ .callout .ctext{width:max-content;max-width:min(520px,44vw)} .callout.arrow .ctext{width:max-content;max-width:min(460px,40vw)} /* 동그라미 높이 — 매물대처럼 두께가 정해진 대상은 그 두께에 맞춘다. 기본값(가로의 55%)을 쓰면 옆 밴드까지 덮어 어느 구간인지 헷갈린다. */ .callout .ring{height:var(--crh,calc(var(--cr,120px)*.55))} /* ══════════════════════════════════════════════════════════ ▣ 후킹 — 문자 안내형 (소통방 캡처가 없는 전문가용) 월가황소처럼 "문자로 미리 안내드렸다"가 근거인 채널은 캡처 자체가 없다. 빈 캡처 상자를 내보내는 대신 문자 화면을 그려 준다. ══════════════════════════════════════════════════════════ */ .hookg.solo .hookR{flex:1;max-width:none} .smsbox{display:flex;flex-direction:column;gap:12px;padding:18px 16px;width:100%} .smsrow{display:flex;flex-direction:column;gap:5px} .smsd{font-size:12px;color:var(--dim);letter-spacing:.2px} .smsb{align-self:flex-start;max-width:94%;background:#2B6FF0;color:#fff; padding:11px 15px;border-radius:15px 15px 15px 4px;font-size:15.5px;line-height:1.5; font-weight:600;box-shadow:0 6px 16px rgba(43,111,240,.28)} #frame.light .smsb{background:#3182F6} #frame.light .smsd{color:#6B7684} /* 캡처 자리 안내문은 렌더 영상에 나가면 안 된다 */ #frame.rendermode .hookL .ph,body.rendermode .hookL .ph{display:none!important} /* ══════════════════════════════════════════════════════════ ▣ 슬라이드 팔레트를 툴 화면에서 떼어낸다 슬라이드 내부(.hookR/.cards/.stitle …)가 툴의 --card/--tx 를 그대로 쓰고 있었다. 툴을 밝게 쓰면서 영상은 어둡게 뽑는 게 정상 사용인데, 그러면 어두운 슬라이드 위에 흰 카드 + 검은 글씨가 나왔다. → #frame 안에서는 슬라이드 자신의 테마만 따른다. (색 강조는 원래 슬라이드 색 그대로) ══════════════════════════════════════════════════════════ */ #frame{ --card:#16202F; --card2:#1A2536; --line:#22304A; --line2:#2E3F5C; --tx:#EFF4FA; --mut:#B6C4D6; --dim:#8DA0B8; --gold:#F5B942; --gold2:#FFD470; --cyan:#35D7E8; --red:#FF4D4D; --grn:#3DDC97; --vio:#B78CF7; /* 변수만 바꾸면 안 된다 — color 는 body 에서 이미 계산돼 내려오므로 여기서 다시 건다 */ color:var(--tx); } #frame.light{ --card:#FFFFFF; --card2:#F2F5F9; --line:#E1E7F0; --line2:#CBD5E4; --tx:#16202F; --mut:#44546E; --dim:#7A879B; --gold:#C98600; --gold2:#A96F00; --cyan:#0E7490; --red:#D63A3A; --grn:#0E8F63; --vio:#6D4FD0; color:var(--tx); } /* ══════════════════════════════════════════════════════════ ▣ 배경 스크림이 글씨를 덮던 문제 .slidebg 는 position:absolute(z-index:0)이고 제목·인용문은 static 이다. CSS 페인트 순서상 **배치된 요소가 나중에(=위에)** 그려지므로, 80~92% 불투명한 스크림이 본문 위를 덮어 전체가 흐릿하게 보였다. (밝은 테마=하얗게 뜸 / 어두운 테마=검게 뜸 — 둘 다 같은 원인) → 슬라이드에 스택 컨텍스트를 만들고 배경을 본문 뒤로 내린다. ══════════════════════════════════════════════════════════ */ .slide{isolation:isolate} .slidebg{z-index:-1!important} /* 캡처가 없으면 CTA 오른쪽 칸을 없애고 왼쪽을 넓게 쓴다 */ .cta2.solo{display:block} .cta2.solo .cta2L{max-width:none;width:100%} /* ══════════════════════════════════════════════════════════ ▣ 매물대 표시 — 가로 띠(B안) 매물대는 "가격 구간"이라 동그라미보다 띠가 실제 모양에 맞는다. 배지·표를 덮지 않고, 구간 폭을 그대로 살릴 수 있다. ══════════════════════════════════════════════════════════ */ .callout.bandmark .ring{ border:0;border-radius:5px;transform:none; height:var(--crh,26px); background:linear-gradient(90deg,rgba(255,42,42,.16),rgba(255,42,42,.30),rgba(255,42,42,.16)); box-shadow:inset 0 0 0 2.5px rgba(255,42,42,.9),0 0 18px rgba(255,42,42,.35); animation:calpop .4s cubic-bezier(.3,1.4,.5,1) both} .callout.bandmark .ctext{transform:translate(-50%,-100%) rotate(0)} /* ══════════════════════════════════════════════════════════ ▣ F · 코인 다크 — 코인 전망 채널 레퍼런스 반영 검정 바탕 + 노란 형광 라벨(하이라이트 박스) + 하단 상시 면책 고지. 기존 디자인은 건드리지 않는다 — data-dsn="coin" 일 때만 걸린다. ══════════════════════════════════════════════════════════ */ #frame[data-dsn="coin"] .slide{background:radial-gradient(120% 95% at 50% -10%,#16161E 0%,#0D0D13 55%,#08080C 100%)} #frame[data-dsn="coin"] .topbar{background:linear-gradient(90deg,#FFE14D,#F7B500);height:6px} /* 킥커 = 노란 형광 라벨 상자 (레퍼런스의 "오늘의 주제" 스타일) */ #frame[data-dsn="coin"] .kicker{display:inline-block;background:#FFE14D;color:#141414; padding:5px 14px;border-radius:3px;font-weight:800;letter-spacing:-.3px; box-shadow:3px 3px 0 rgba(0,0,0,.55)} #frame[data-dsn="coin"] .stitle{color:#F4F5F7} /* 제목 강조 = 형광펜 (노란 배경에 검정 글씨) */ #frame[data-dsn="coin"] .stitle em{background:#FFE14D;color:#141414;padding:0 8px; border-radius:3px;font-style:normal} #frame[data-dsn="coin"] .ssub{color:#B9BEC9} #frame[data-dsn="coin"] .statwrap .big{color:#FFE14D} #frame[data-dsn="coin"] .quote div{border-color:#FFE14D;color:#F4F5F7; background:rgba(255,225,77,.06);box-shadow:0 0 34px rgba(255,225,77,.16)} #frame[data-dsn="coin"] .statsrow .sc{background:#13131A;border-color:#26262F} #frame[data-dsn="coin"] .cards .cd{background:#13131A;border-color:#26262F} #frame[data-dsn="coin"] .tip{border-color:rgba(255,225,77,.4);background:rgba(255,225,77,.07)} /* 하단 상시 면책 고지 — 레퍼런스 공통 요소이자 가상자산 규제 대응 */ #frame[data-dsn="coin"]::after{ content:'본 영상에서 제공하는 정보는 투자 판단을 위한 참고 자료이며, 특정 가상자산의 매수·매도 권유가 아닙니다. 가상자산은 변동성이 크며 투자에 대한 책임은 이용자 본인에게 있습니다.'; position:absolute;left:0;right:0;bottom:0;z-index:60;text-align:center; font-size:11px;line-height:20px;color:#8F96A3;background:rgba(6,6,10,.88); letter-spacing:-.2px;pointer-events:none} /* 코인 스킨 — 차트 위 노트(제목 라벨)가 어두운 금색이라 묻힘 → 밝게 */ #frame[data-dsn="coin"] .note{color:#F5ECC8;border-color:rgba(255,225,77,.55);background:rgba(255,225,77,.08)} /* ── 코인 다크 v2 — 화려한 팔레트(레퍼런스: 노랑 라벨·초록 상승·빨강 경고·시안 포인트) ── */ #frame[data-dsn="coin"]{--gold:#FFE14D;--gold2:#FFD21E;--cyan:#00E5FF;--red:#FF4D5A;--grn:#00E08A; --tx:#F2F5FA;--mut:#C2CBD8;--dim:#93A0B2;--card:#15161E;--card2:#1A1C26;--line:#282B38;--line2:#343848} /* ── 코인 라이트 — 밝은 테마도 정식 지원(사용자 요청). 노란 라벨(검정 글씨)·초록 상승·빨강 하락은 유지하되, 밝은 바탕에서 잘 보이게 전부 어두운 글씨·짙은 색조로 다시 잡는다. ── */ #frame.light[data-dsn="coin"]{--gold:#F5B800;--gold2:#C98F00;--cyan:#0086AD;--red:#E5313E;--grn:#00915A; --tx:#171A21;--mut:#4C5666;--dim:#7A8494;--card:#FFFFFF;--card2:#F4F6FA;--line:#E1E5EE;--line2:#CBD2E0} #frame.light[data-dsn="coin"] .slide{background:linear-gradient(160deg,#FAFBFD 0%,#EEF1F7 55%,#F5F7FB 100%)} #frame.light[data-dsn="coin"] .subtxt{color:#101521;text-shadow:0 2px 10px rgba(255,255,255,.9),0 0 3px rgba(255,255,255,.9)} #frame.light[data-dsn="coin"] .subtxt .g{color:#C98F00} #frame.light[data-dsn="coin"] .subtxt .c{color:#0086AD} #frame.light[data-dsn="coin"] .stitle{color:#171A21} #frame.light[data-dsn="coin"] .stitle em{background:#FFDF43;color:#171A21} #frame.light[data-dsn="coin"] .ssub{color:#4C5666} #frame.light[data-dsn="coin"] .kicker{background:#FFDF43;color:#171A21;box-shadow:2px 2px 0 rgba(23,26,33,.18)} #frame.light[data-dsn="coin"] .quote div{border-color:#F5B800;color:#171A21;background:rgba(245,184,0,.07);box-shadow:0 0 24px rgba(245,184,0,.18)} #frame.light[data-dsn="coin"] .statsrow .sc{background:#FFFFFF;border-color:#E1E5EE} #frame.light[data-dsn="coin"] .cards .cd{background:#FFFFFF;border-color:#E1E5EE} #frame.light[data-dsn="coin"] .statwrap .big{color:#C98F00} #frame.light[data-dsn="coin"] .statwrap .big.red,#frame.light[data-dsn="coin"] .scBig.red{color:#E5313E} #frame.light[data-dsn="coin"] .statwrap .big.grn,#frame.light[data-dsn="coin"] .scBig.grn{color:#00915A} #frame.light[data-dsn="coin"] .statwrap .big.cyan,#frame.light[data-dsn="coin"] .scBig.cyan{color:#0086AD} #frame.light[data-dsn="coin"] .statsrow .sc .sv{color:#171A21} #frame.light[data-dsn="coin"] .statsrow .sc.r .sv{color:#E5313E} #frame.light[data-dsn="coin"] .statsrow .sc.g .sv{color:#00915A} #frame.light[data-dsn="coin"] .statsrow .sc.c .sv{color:#0086AD} #frame.light[data-dsn="coin"] .cards .cd.up h3{color:#E5313E} #frame.light[data-dsn="coin"] .cards .cd.dn h3{color:#0086AD} #frame.light[data-dsn="coin"] .note{color:#6B5A12;border-color:rgba(201,143,0,.5);background:rgba(245,184,0,.09)} #frame.light[data-dsn="coin"] .badges span{background:#FFFFFF;border-color:#CBD2E0;color:#171A21} #frame.light[data-dsn="coin"] .badges span.up{color:#00915A;border-color:rgba(0,145,90,.5)} #frame.light[data-dsn="coin"] .badges span.dn{color:#E5313E;border-color:rgba(229,49,62,.5)} #frame.light[data-dsn="coin"]::after{color:#5B6472;background:rgba(255,255,255,.92)} /* 색 클래스 — 상승 초록 · 하락/경고 빨강 · 포인트 시안 (코인판 배색) */ #frame[data-dsn="coin"] .statwrap .big.red,#frame[data-dsn="coin"] .scBig.red{color:#FF4D5A} #frame[data-dsn="coin"] .statwrap .big.grn,#frame[data-dsn="coin"] .scBig.grn{color:#00E08A} #frame[data-dsn="coin"] .statwrap .big.cyan,#frame[data-dsn="coin"] .scBig.cyan{color:#00E5FF} #frame[data-dsn="coin"] .statsrow .sc .sv{color:#F2F5FA} #frame[data-dsn="coin"] .statsrow .sc.r .sv,#frame[data-dsn="coin"] .cards .cd.up h3{color:#FF4D5A} #frame[data-dsn="coin"] .statsrow .sc.g .sv{color:#00E08A} #frame[data-dsn="coin"] .statsrow .sc.c .sv{color:#00E5FF} #frame[data-dsn="coin"] .cards .cd.dn h3{color:#00E5FF} #frame[data-dsn="coin"] .bars .bar.pos .bi{background:linear-gradient(180deg,#00E08A,#00A868)} #frame[data-dsn="coin"] .bars .bar.neg .bi{background:linear-gradient(180deg,#FF6B76,#FF4D5A)} #frame[data-dsn="coin"] .tl .v.red{color:#FF4D5A} #frame[data-dsn="coin"] .tl .v.grn{color:#00E08A} /* 배지·칩도 네온 톤 */ #frame[data-dsn="coin"] .badges span{background:#15161E;border-color:#343848;color:#F2F5FA} #frame[data-dsn="coin"] .badges span.up{color:#00E08A;border-color:rgba(0,224,138,.5)} #frame[data-dsn="coin"] .badges span.dn{color:#FF4D5A;border-color:rgba(255,77,90,.5)}