/* ═══════════════════════════════════════════════════════════
FINEYE readability.css
주식 관련 페이지 가시성 통합 스타일 (v1.0)
작성일: 2026-04-20
목적:
- 폰트 크기 1.5배 확대 (기본값, CSS 변수로 조정 가능)
- 글자색 완전 순백 (#FFFFFF) 으로 배경 대비 강화
- 모든 주식 관련 페이지 일괄 적용
적용 대상:
- stock.html (종목 리스트)
- stock_detail.html (종목 상세)
- chart_test.html (차트 검증)
- AI 보고서 뷰어 (#reportMd)
- AI 보고서 미리보기 모달
사용법:
마지막에 아래 1줄 추가:
⚠️ 반드시 다른 CSS 보다 나중에 로드되어야 override 가 작동합니다.
조정 방법:
- 전체 폰트 크기 조정: :root 의 --r-scale 값만 변경
1.5 = 1.5배 (기본)
1.3 = 1.3배 (덜 크게)
1.0 = 원본 크기
═══════════════════════════════════════════════════════════ */
:root {
/* ─────────────────────────────────────────────
폰트 크기 조정 (이 값만 바꾸면 전체 폰트 조정됨)
───────────────────────────────────────────── */
--r-scale: 1.5;
/* ─────────────────────────────────────────────
순백 계열 텍스트 팔레트
(기존보다 밝고 깨끗해서 배경에 먹히지 않음)
───────────────────────────────────────────── */
--r-text-primary: #FFFFFF; /* 최중요 - 순백 */
--r-text-strong: #FAFBFD; /* 강조 본문 */
--r-text-body: #F0F4FC; /* 본문 */
--r-text-sub: #D7DFEA; /* 부가 정보 (기존 #CBD5E1 보다 밝음) */
--r-text-muted: #B0BDD0; /* 흐린 정보 (기존 #8FA3BD 보다 밝음) */
/* 골드 강조색 */
--r-gold-bright: #FFE98A; /* 순금빛 (기존 #F5D96A 보다 밝음) */
--r-gold: #F5D96A;
/* 상승/하락 (한국식 - 상승 빨강) */
--r-up: #FF6B6B;
--r-down: #4488FF;
/* ─────────────────────────────────────────────
폰트 크기 계산값
───────────────────────────────────────────── */
--r-f-xs: calc(12px * var(--r-scale)); /* 18px */
--r-f-sm: calc(13px * var(--r-scale)); /* 19.5 */
--r-f-base: calc(14px * var(--r-scale)); /* 21 */
--r-f-md: calc(16px * var(--r-scale)); /* 24 */
--r-f-lg: calc(19px * var(--r-scale)); /* 28.5 */
--r-f-xl: calc(22px * var(--r-scale)); /* 33 */
--r-f-xxl: calc(28px * var(--r-scale)); /* 42 */
--r-f-3xl: calc(34px * var(--r-scale)); /* 51 */
--r-f-4xl: calc(42px * var(--r-scale)); /* 63 - 로고 등 */
}
/* ═══════════════════════════════════════════════════════════
[1] 전역 body — 기본 폰트 크기
═══════════════════════════════════════════════════════════ */
body {
font-size: var(--r-f-base) !important;
color: var(--r-text-body) !important;
line-height: 1.5 !important;
}
/* ═══════════════════════════════════════════════════════════
[2] 공용 탑바 (topbar.css override)
═══════════════════════════════════════════════════════════ */
/* 로고 */
header.fineye-header .logo {
font-size: var(--r-f-4xl) !important; /* 63px */
}
/* 네비 탭바 */
.fineye-nav-tab {
font-size: var(--r-f-md) !important; /* 24px */
color: rgba(255, 255, 255, 0.85) !important;
}
.fineye-nav-tab:hover {
color: #FFFFFF !important;
}
.fineye-nav-tab.active {
color: var(--r-gold-bright) !important;
}
/* 헤더 버튼 */
.hdr-btn {
font-size: var(--r-f-md) !important; /* 24px */
padding: 16px 24px !important;
}
.hdr-btn-home,
.hdr-btn-nav,
.hdr-btn-stock,
.hdr-btn-logout {
color: var(--r-text-body) !important;
}
.hdr-btn-home:hover,
.hdr-btn-nav:hover,
.hdr-btn-stock:hover {
color: var(--r-gold-bright) !important;
}
.hdr-btn-login {
color: #B4D4FF !important; /* 파란 계열 밝게 */
}
.hdr-btn-login:hover {
color: #FFFFFF !important;
}
#user-name {
font-size: var(--r-f-md) !important;
color: var(--r-text-body) !important;
}
/* ═══════════════════════════════════════════════════════════
[3] 주식 상세 페이지 (stock_detail.html)
═══════════════════════════════════════════════════════════ */
/* 종목 헤더 — 콤팩트 버전 (세로 3단 레이아웃) */
.stock-code {
font-size: var(--r-f-sm) !important; /* 19.5px — 종목명 아래 보조 */
color: var(--r-text-sub) !important;
font-weight: 600 !important;
}
.stock-name {
font-size: var(--r-f-xxl) !important; /* 42px — 51 → 42 축소 */
color: var(--r-text-primary) !important; /* 순백 */
font-weight: 800 !important;
line-height: 1.1 !important;
}
.stock-sector-tag {
font-size: var(--r-f-xs) !important; /* 18px — 배지는 헌법 최소 */
color: var(--r-gold-bright) !important;
padding: 3px 12px !important;
}
.stock-price {
font-size: var(--r-f-xxl) !important; /* 42px — 51 → 42 축소 */
color: var(--r-gold-bright) !important;
line-height: 1.1 !important;
font-weight: 800 !important;
}
.stock-price-change {
font-size: var(--r-f-base) !important; /* 21px */
font-weight: 700 !important;
}
.stock-price-date {
font-size: var(--r-f-xs) !important; /* 18px — 날짜는 최소 */
color: var(--r-text-muted) !important;
}
/* 종목 헤더 — 통합 지표 영역 (stock-header-stats) — 콤팩트 */
.stock-header-stats {
padding-top: 12px !important;
gap: 10px !important;
}
.stock-stat-label {
font-size: var(--r-f-xs) !important; /* 18px */
color: var(--r-text-sub) !important;
font-weight: 600 !important;
}
.stock-stat-unit {
font-size: var(--r-f-xs) !important; /* 18px */
color: var(--r-text-sub) !important;
}
.stock-stat-value {
font-size: var(--r-f-base) !important; /* 21px — 24 → 21 축소 */
color: var(--r-text-primary) !important; /* 순백 */
font-weight: 800 !important;
}
/* 섹션 카드 */
.section-title {
font-size: var(--r-f-xl) !important; /* 33px */
color: var(--r-text-primary) !important;
}
.section-title .icon {
font-size: var(--r-f-xl) !important;
}
/* 엔진 예측 박스 (period-grid / period-card / period-label / period-signal / period-meta) */
.period-card {
padding: 26px 30px !important;
}
.period-label {
font-size: var(--r-f-md) !important; /* 24px */
color: var(--r-text-primary) !important;
font-weight: 700 !important;
margin-bottom: 14px !important;
}
.period-signal {
font-size: var(--r-f-xxl) !important; /* 42px */
font-weight: 800 !important;
margin-bottom: 16px !important;
}
.period-meta {
font-size: var(--r-f-base) !important; /* 21px */
color: var(--r-text-body) !important;
line-height: 2.0 !important;
}
.period-meta b {
color: var(--r-gold-bright) !important; /* 밝은 골드 */
font-weight: 800 !important;
}
/* 뉴스 아이템 */
.news-item {
padding: 18px 16px !important;
}
.news-title {
font-size: var(--r-f-md) !important; /* 24px */
color: var(--r-text-primary) !important;
line-height: 1.5 !important;
}
.news-title a {
color: var(--r-text-primary) !important;
text-decoration: none !important;
}
.news-title a:hover {
color: var(--r-gold-bright) !important;
text-decoration: underline !important;
}
.news-meta {
font-size: var(--r-f-sm) !important;
color: var(--r-text-muted) !important;
}
.news-sentiment {
font-size: var(--r-f-lg) !important;
}
.news-pre {
font-size: var(--r-f-xs) !important;
}
/* AI 보고서 생성 CTA */
.ai-hero-title {
font-size: var(--r-f-xl) !important; /* 33px */
color: var(--r-text-primary) !important;
}
.ai-hero-sub {
font-size: var(--r-f-md) !important; /* 24px */
color: var(--r-text-body) !important;
line-height: 1.6 !important;
}
.ai-hero-price {
font-size: var(--r-f-lg) !important;
color: var(--r-gold-bright) !important;
}
.btn-generate {
font-size: var(--r-f-lg) !important; /* 28.5px */
padding: 18px 36px !important;
}
.gen-status-text {
font-size: var(--r-f-md) !important;
color: var(--r-text-body) !important;
}
/* 로딩/빈 박스 */
.loading-box, .empty-box {
font-size: var(--r-f-base) !important;
color: var(--r-text-muted) !important;
padding: 20px !important;
}
/* Toast */
.toast {
font-size: var(--r-f-base) !important;
padding: 18px 28px !important;
}
/* ═══════════════════════════════════════════════════════════
[4] 주식 리스트 페이지 (stock.html)
═══════════════════════════════════════════════════════════ */
/* 페이지 제목/부제 */
.page-title, h1.page-title {
font-size: var(--r-f-3xl) !important;
color: var(--r-text-primary) !important;
}
.page-subtitle {
font-size: var(--r-f-md) !important;
color: var(--r-text-sub) !important;
}
/* 검색창 */
input[type="text"], input[type="search"] {
font-size: var(--r-f-md) !important;
padding: 14px 18px !important;
color: var(--r-text-body) !important;
}
/* 테이블 (rank 테이블 등) */
table th {
font-size: var(--r-f-base) !important;
color: var(--r-text-sub) !important;
padding: 14px 10px !important;
}
table td {
font-size: var(--r-f-base) !important;
color: var(--r-text-body) !important;
padding: 14px 10px !important;
}
/* ─────────────────────────────────────────────────────────────
⚠️ 차트 라이브러리 내부 table 보호 (2026-04-21 추가)
lightweight-charts 는 내부적으로 레이아웃을 사용해
pane / time-axis-widget 을 row/cell 로 배치함.
위의 전역 `table th/td` 규칙이 라이브러리 내부 셀에까지 먹혀
time axis (x축) 셀 padding 이 14px 로 강제되면서 tick label 이
찌그러지는 증상이 발생함 (예: stock.html #indexChart).
`.tv-lightweight-charts` 는 라이브러리가 최상위 wrapper 에
항상 붙이는 클래스이므로, 그 하위의 모든 th/td 를 원복한다.
───────────────────────────────────────────────────────────── */
.tv-lightweight-charts table th,
.tv-lightweight-charts table td,
.tv-lightweight-charts th,
.tv-lightweight-charts td {
padding: 0 !important;
font-size: initial !important;
line-height: initial !important;
color: initial !important;
}
/* ═══════════════════════════════════════════════════════════
[5] AI 보고서 뷰어 (#reportMd) + 미리보기 모달
═══════════════════════════════════════════════════════════ */
#reportMd,
#reportMd p,
#reportMd li,
.report-preview-content,
.report-preview-content p,
.report-preview-content li {
font-size: var(--r-f-base) !important;
line-height: 1.9 !important;
color: var(--r-text-body) !important;
}
#reportMd h1,
.report-preview-content h1 {
font-size: var(--r-f-3xl) !important;
color: var(--r-text-primary) !important;
margin: 28px 0 18px !important;
}
#reportMd h2,
.report-preview-content h2 {
font-size: var(--r-f-xxl) !important;
color: var(--r-text-primary) !important;
margin: 24px 0 14px !important;
}
#reportMd h3,
.report-preview-content h3 {
font-size: var(--r-f-xl) !important;
color: var(--r-text-primary) !important;
margin: 20px 0 12px !important;
}
#reportMd h4,
.report-preview-content h4 {
font-size: var(--r-f-lg) !important;
color: var(--r-text-strong) !important;
}
#reportMd strong,
.report-preview-content strong {
color: var(--r-gold-bright) !important;
font-weight: 700 !important;
}
#reportMd em,
.report-preview-content em {
color: var(--r-gold) !important;
font-style: normal !important;
}
#reportMd code,
.report-preview-content code {
font-size: calc(var(--r-f-base) * 0.95) !important;
background: rgba(255, 255, 255, 0.08) !important;
color: var(--r-text-primary) !important;
padding: 2px 6px !important;
border-radius: 4px !important;
}
#reportMd pre,
.report-preview-content pre {
font-size: calc(var(--r-f-base) * 0.9) !important;
padding: 18px !important;
color: var(--r-text-body) !important;
line-height: 1.5 !important;
}
#reportMd blockquote,
.report-preview-content blockquote {
font-size: var(--r-f-base) !important;
color: var(--r-text-sub) !important;
border-left: 4px solid var(--r-gold) !important;
padding-left: 18px !important;
}
#reportMd table,
.report-preview-content table {
font-size: var(--r-f-sm) !important;
}
#reportMd table th,
.report-preview-content table th {
color: var(--r-text-strong) !important;
padding: 12px !important;
}
#reportMd table td,
.report-preview-content table td {
color: var(--r-text-body) !important;
padding: 12px !important;
}
/* 보고서 액션 버튼 */
.report-header {
padding: 18px 24px !important;
}
.report-title {
font-size: var(--r-f-xl) !important;
color: var(--r-text-primary) !important;
}
.btn-download, .btn-action-primary {
font-size: var(--r-f-base) !important;
padding: 12px 22px !important;
}
.btn-action-primary {
font-size: var(--r-f-md) !important;
padding: 16px 28px !important;
}
/* ═══════════════════════════════════════════════════════════
[6] 차트 · 기상 캐스터 · 주요 이벤트 (stock_chart.css override)
실제 prefix: .fe-chart-*
═══════════════════════════════════════════════════════════ */
/* ── 차트 헤더 영역 ── */
.fe-chart-stock-name {
font-size: var(--r-f-xxl) !important; /* 42px */
color: var(--r-text-primary) !important; /* 순백 */
font-weight: 800 !important;
}
.fe-chart-stock-code {
font-size: var(--r-f-md) !important; /* 24px */
color: var(--r-text-sub) !important;
}
.fe-chart-sector {
font-size: var(--r-f-sm) !important; /* 19.5px */
color: var(--r-gold-bright) !important;
padding: 6px 16px !important;
}
.fe-chart-price-val {
font-size: var(--r-f-xxl) !important; /* 42px */
color: var(--r-gold-bright) !important;
}
.fe-chart-price-chg {
font-size: var(--r-f-md) !important; /* 24px */
}
.fe-chart-weather-icon { font-size: var(--r-f-xxl) !important; }
.fe-chart-weather-name {
font-size: var(--r-f-md) !important;
color: var(--r-gold-bright) !important;
}
.fe-chart-weather-score {
font-size: var(--r-f-base) !important;
color: var(--r-gold-bright) !important;
}
/* ── 컨트롤 (기간/토글 버튼) ── */
.fe-chart-period-btn {
font-size: var(--r-f-base) !important; /* 21px */
padding: 14px 22px !important;
color: var(--r-text-body) !important;
min-height: 48px !important;
}
.fe-chart-period-btn:hover {
color: var(--r-gold-bright) !important;
}
.fe-chart-period-btn.active {
color: var(--r-gold-bright) !important;
}
.fe-chart-toggle {
font-size: var(--r-f-sm) !important; /* 19.5px */
padding: 12px 18px !important;
color: var(--r-text-body) !important;
min-height: 44px !important;
}
.fe-chart-toggle:hover,
.fe-chart-toggle.active {
color: var(--r-gold-bright) !important;
}
/* ── 시그널 배지 ── */
.fe-chart-signal-badge {
font-size: var(--r-f-base) !important; /* 21px */
padding: 12px 22px !important;
}
.fe-chart-signal-period {
font-size: var(--r-f-sm) !important;
color: var(--r-text-sub) !important;
}
.fe-chart-signal-score {
font-size: var(--r-f-base) !important;
}
/* ── 선행/후행 배지 ── */
.fe-chart-leadlag { font-size: var(--r-f-base) !important; padding: 16px 24px !important; }
.fe-chart-leadlag-label { font-size: var(--r-f-md) !important; color: var(--r-text-primary) !important; }
.fe-chart-leadlag-msg { font-size: var(--r-f-base) !important; color: var(--r-text-body) !important; }
.fe-chart-leadlag-conf { font-size: var(--r-f-sm) !important; color: var(--r-text-sub) !important; }
/* ── Y축 라벨 ── */
.fe-chart-axis-label {
font-size: var(--r-f-sm) !important; /* 19.5px */
color: var(--r-gold-bright) !important;
padding: 6px 14px !important;
}
.fe-chart-axis-label-right {
color: var(--r-text-body) !important;
}
/* ── 범례 ── */
.fe-chart-legend {
font-size: var(--r-f-sm) !important; /* 19.5px */
padding: 18px 26px !important;
}
.fe-chart-legend-item {
font-size: var(--r-f-sm) !important;
color: var(--r-text-body) !important;
}
/* ── 툴팁 ── */
.fe-chart-tooltip {
font-size: var(--r-f-base) !important; /* 21px */
padding: 18px 22px !important;
color: var(--r-text-body) !important;
}
.fe-chart-tooltip-date {
font-size: var(--r-f-sm) !important;
color: var(--r-text-sub) !important;
}
.fe-chart-tooltip-price {
font-size: var(--r-f-xl) !important; /* 33px */
color: var(--r-gold-bright) !important;
}
.fe-chart-tooltip-row { font-size: var(--r-f-sm) !important; }
.fe-chart-tooltip-row-label { color: var(--r-text-sub) !important; }
.fe-chart-tooltip-row-value { color: var(--r-text-body) !important; }
.fe-chart-tooltip-event {
font-size: var(--r-f-base) !important;
color: var(--r-gold-bright) !important;
}
.fe-chart-tooltip-engine {
font-size: var(--r-f-sm) !important;
color: var(--r-text-body) !important;
}
/* ═══════════════════════════════════════════════════════════
[6-1] ⭐ 주요 이벤트 타임라인 (fe-chart-timeline)
═══════════════════════════════════════════════════════════ */
.fe-chart-timeline {
padding: 26px 32px !important;
}
.fe-chart-timeline-title-icon {
font-size: var(--r-f-xl) !important; /* 33px */
}
.fe-chart-timeline-title-label {
font-size: var(--r-f-xl) !important; /* 33px */
color: var(--r-gold-bright) !important;
font-weight: 800 !important;
}
.fe-chart-timeline-title-sub {
font-size: var(--r-f-md) !important; /* 24px (up from 21px) */
color: var(--r-text-body) !important; /* 회색 → 본문 밝기 (순백 계열) */
font-weight: 500 !important;
}
.fe-chart-timeline-item {
padding: 20px 18px !important; /* 살짝 여유 */
font-size: var(--r-f-md) !important; /* 24px (up from 21px) */
min-height: 56px !important;
gap: 22px !important;
}
.fe-chart-timeline-date {
font-size: var(--r-f-base) !important; /* 21px (up from 19.5px) */
color: var(--r-text-primary) !important; /* 회색 → 순백 */
font-weight: 800 !important;
min-width: 150px !important;
}
.fe-chart-timeline-icon {
font-size: var(--r-f-xxl) !important; /* 42px (up from 33px) */
}
.fe-chart-timeline-text {
font-size: var(--r-f-md) !important; /* 24px (up from 21px) */
color: var(--r-text-primary) !important; /* 순백 */
font-weight: 700 !important;
}
.fe-chart-timeline-chg {
font-size: var(--r-f-md) !important; /* 24px (up from 21px) */
font-weight: 800 !important;
}
/* 📑 페이저 override — 헌법 폰트 크기 적용 */
.fe-chart-timeline-pagebtn,
.fe-chart-timeline-pagebtn-nav {
font-size: var(--r-f-md) !important; /* 24px */
min-height: 48px !important;
min-width: 48px !important;
color: var(--r-text-primary) !important; /* 순백 */
font-weight: 800 !important;
}
.fe-chart-timeline-pagebtn.active {
color: #0A0F1E !important; /* 활성 시 금색 배경 + 네이비 글자 */
}
.fe-chart-timeline-pager-info {
font-size: var(--r-f-base) !important; /* 21px */
color: var(--r-text-primary) !important; /* 순백 */
font-weight: 700 !important;
}
/* ═══════════════════════════════════════════════════════════
[6-2] 🛰️ FINEYE 기상 캐스터 박스 (fe-chart-description) — 콤팩트
═══════════════════════════════════════════════════════════ */
/* 🌤 오늘의 기상 헤드라인 — 박스 안 맨 위 큰 배지 */
.fe-chart-weather-headline {
padding: 14px 20px !important;
margin-bottom: 12px !important;
gap: 16px !important;
}
.fe-chart-weather-headline-icon {
font-size: calc(var(--r-f-xxl) * 1.2) !important; /* ~50px */
}
.fe-chart-weather-headline-name {
font-size: var(--r-f-xl) !important; /* 33px */
color: var(--r-text-primary) !important; /* 순백 */
font-weight: 800 !important;
line-height: 1.1 !important;
}
.fe-chart-weather-headline-score {
font-size: var(--r-f-lg) !important; /* 28.5px */
color: var(--r-gold-bright) !important;
font-weight: 800 !important;
padding: 4px 14px !important;
}
.fe-chart-description {
font-size: var(--r-f-base) !important; /* 21px (24 → 21 축소) */
color: var(--r-text-primary) !important; /* 순백 */
line-height: 1.5 !important; /* 1.9 → 1.5 축소 */
padding: 16px 20px 18px !important; /* 32/36/34 → 16/20/18 축소 */
}
.fe-chart-description-title {
/* 기본 모드: 섹션 제목과 중복이므로 박스 안 타이틀 영역 전체 숨김 */
display: none !important;
}
/* 이벤트 모드일 때는 "← 오늘의 기상" 돌아가기 버튼 때문에 타이틀 다시 표시 */
.fe-chart-description-event .fe-chart-description-title {
display: grid !important;
margin-bottom: 10px !important;
padding-bottom: 8px !important;
gap: 12px !important;
}
/* 이벤트 모드에서도 label(FINEYE 기상 캐스터) 은 숨김 유지 */
.fe-chart-description-event .fe-chart-description-label {
display: none !important;
}
.fe-chart-description-label {
/* 섹션 제목과 중복이므로 박스 안에서는 숨김 */
display: none !important;
}
.fe-chart-description-character { font-size: calc(var(--r-f-xxl) * 1.1) !important; }
.fe-chart-description-weather { font-size: calc(var(--r-f-xxl) * 1.1) !important; }
.fe-chart-description-body {
font-size: var(--r-f-md) !important; /* 28.5 → 24 */
color: var(--r-text-primary) !important;
line-height: 1.5 !important; /* 2.0 → 1.5 (핵심!) */
font-weight: 500 !important;
}
/* 본문 연속 br 간격 축소 (빈 줄 효과 제거) */
.fe-chart-description-body br + br { display: none !important; }
/* 이벤트 모드 — 콤팩트 */
.fe-chart-event-icon { font-size: calc(var(--r-f-xxl) * 1.05) !important; }
.fe-chart-event-header {
gap: 14px !important;
margin-bottom: 12px !important;
padding-bottom: 10px !important;
}
.fe-chart-event-type {
font-size: var(--r-f-lg) !important; /* 33 → 28.5 */
color: var(--r-text-primary) !important;
font-weight: 800 !important;
line-height: 1.2 !important;
}
.fe-chart-event-meta {
font-size: var(--r-f-base) !important; /* 24 → 21 */
color: var(--r-text-primary) !important;
gap: 14px !important;
}
.fe-chart-event-date {
color: var(--r-text-primary) !important;
font-weight: 800 !important;
}
.fe-chart-event-chg {
color: var(--r-text-primary) !important;
font-weight: 700 !important;
}
.fe-chart-event-body {
font-size: var(--r-f-md) !important; /* 28.5 → 24 */
color: var(--r-text-primary) !important;
line-height: 1.55 !important; /* 1.9 → 1.55 */
font-weight: 500 !important;
margin-bottom: 10px !important;
}
.fe-chart-event-original {
font-size: var(--r-f-sm) !important;
color: var(--r-text-body) !important;
padding: 8px 12px !important;
margin-top: 8px !important;
line-height: 1.4 !important;
}
.fe-chart-event-footer {
font-size: var(--r-f-sm) !important;
color: var(--r-text-body) !important;
margin-top: 10px !important;
padding-top: 8px !important;
}
.fe-chart-description-back {
font-size: var(--r-f-sm) !important;
padding: 8px 16px !important;
color: var(--r-gold-bright) !important;
min-height: 40px !important;
font-weight: 700 !important;
}
/* ── ⭐ 플래시 멘트 (10초 팝업) — 콤팩트 ── */
.fe-chart-flash-title {
font-size: var(--r-f-lg) !important; /* 33 → 28.5 */
color: var(--r-gold-bright) !important;
margin-bottom: 8px !important;
line-height: 1.2 !important;
}
.fe-chart-flash-body {
font-size: var(--r-f-base) !important; /* 24 → 21 */
color: var(--r-text-primary) !important;
line-height: 1.55 !important;
font-weight: 500 !important;
margin-bottom: 10px !important;
}
.fe-chart-flash-meta {
font-size: var(--r-f-base) !important; /* 21px (up from 19.5px) */
color: var(--r-text-body) !important; /* 회색 → 본문 밝기 */
}
.fe-chart-flash-countdown-text {
font-size: var(--r-f-sm) !important; /* 19.5px (up from 18px) */
color: var(--r-text-body) !important; /* 회색 → 본문 밝기 */
}
/* ── 빈 상태 ── */
.fe-chart-empty {
font-size: var(--r-f-md) !important; /* 24px */
color: var(--r-text-sub) !important;
padding: 100px 20px !important;
}
/* ── 로딩 ── */
.fe-chart-loading {
font-size: var(--r-f-base) !important;
color: var(--r-text-body) !important;
}
/* ═══════════════════════════════════════════════════════════
[7] 모달 (로그인, 크레딧 부족, 보고서 확인 등)
═══════════════════════════════════════════════════════════ */
.modal-title, .modal-header h3, .modal-header h2 {
font-size: var(--r-f-xl) !important;
color: var(--r-text-primary) !important;
}
.modal-body, .modal-content {
font-size: var(--r-f-base) !important;
color: var(--r-text-body) !important;
}
.modal-footer button {
font-size: var(--r-f-base) !important;
padding: 12px 22px !important;
}
/* 이메일 보내기 패널 */
.email-panel input, .email-panel textarea {
font-size: var(--r-f-base) !important;
color: var(--r-text-body) !important;
padding: 12px 16px !important;
}
.email-panel label {
font-size: var(--r-f-sm) !important;
color: var(--r-text-sub) !important;
}
/* ═══════════════════════════════════════════════════════════
[8] 모바일 대응 - 배율 약간 축소
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
:root {
--r-scale: 1.3; /* 모바일은 1.3배로 살짝 축소 */
}
}
@media (max-width: 500px) {
:root {
--r-scale: 1.2; /* 좁은 모바일은 1.2배 */
}
}
/* ═══════════════════════════════════════════════════════════
[9] 프린트 최적화 (브라우저 프린트 시)
═══════════════════════════════════════════════════════════ */
@media print {
:root {
--r-scale: 1.0; /* 프린트는 원본 크기 */
}
body {
color: #000000 !important;
background: #FFFFFF !important;
}
}
/* ═══════════════════════════════════════════════════════════
[10] 📅 날짜 + 요일 색상 (토·일·공휴일)
— 평일 = 순백, 토요일 = 파랑, 일요일/공휴일 = 빨강
═══════════════════════════════════════════════════════════ */
.fe-dow-weekday {
color: var(--r-text-primary) !important; /* 평일 — 순백 */
}
.fe-dow-sat {
color: var(--r-down) !important; /* 토요일 — 파랑 #4488FF */
}
.fe-dow-sun,
.fe-dow-holiday {
color: var(--r-up) !important; /* 일요일 · 공휴일 — 빨강 #FF6B6B */
}
.fe-dow-holiday {
font-weight: 800 !important;
}
/* stock-price-date 와 결합 시 더 높은 specificity — 다른 muted 규칙 이기기 위함 */
.stock-price-date.fe-dow-weekday { color: var(--r-text-primary) !important; }
.stock-price-date.fe-dow-sat { color: var(--r-down) !important; }
.stock-price-date.fe-dow-sun,
.stock-price-date.fe-dow-holiday { color: var(--r-up) !important; }