/* [V16-FONT, 2026-08-20] 이전엔 @import(렌더링 차단 — 이 파일 전체가 외부 jsdelivr 왕복이 끝날 때까지 적용 안 돼, 아래 [data-theme="light"] 오버라이드까지 함께 막혀서 라이트 모드 선택 중에도 순간적으로 다크 기본값이 보이는 원인이었음, [[고도화]] §3)였던 Pretendard 로딩을 @font-face(+font-display:swap)로 교체 — 폰트 자체는 로드 전엔 폴백 폰트로 즉시 보이고 나중에 스왑될 뿐, 이 파일의 다른 규칙(테마 오버라이드 포함)은 더 이상 폰트 네트워크 요청에 막히지 않는다. Pretendard Variable 단일 파일(wght 45~920 전 구간 커버)이라 정적 다중 웨이트 CSS(9개 @font-face)보다 요청 수도 적다. */ @font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations'); } :root { /* [V16-FONT-TOKEN, 2026-08-20] 참고 sorce/stock-design/index.html의 폰트 스택을 그대로 채택 — Inter는 대부분 기기에 없어 실제로는 다음 순번인 위 Pretendard Variable로 자연히 폴백된다([[테마]] §2-1-1, [[고도화]] §3). */ --font-sans: 'Inter', 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bg-deep: #030712; --bg-card: #0f172a; --accent-blue: #3b82f6; --accent-cyan: #06b6d4; --text-main: #f8fafc; --text-dim: #94a3b8; --border: rgba(255, 255, 255, 0.08); /* [V15-TOKEN, 2026-08-01] 공용 시그널 색 — hit/miss/pending은 브랜드 accent(페이지마다 다른 --primary)와 달리 "상승/하락/대기"라는 보편적 의미라 모든 페이지가 같은 값을 써야 일관돼 보인다([[테마]] 문서 §2 참고, backend/templates/{accuracy,diary_view}.html이 이미 완전히 동일한 값을 각자 하드코딩하고 있었음을 확인 후 여기로 승격). */ --hit: #10b981; --miss: #ef4444; --pending: #f59e0b; /* [V16-THEME-LIGHT-BRAND, 2026-08-16] 브랜드(StockBanana) 강조색 — 등락(hit/miss)과 무관하게 "호재성 뉴스 강조/브랜드 포인트" 용도로만 쓰는 별도 토큰. 뉴스카드 좌측 강조바가 기존엔 --hit(#10b981, 등락 상승과 동일한 초록)을 하드코딩값으로 재사용해 "상승/호재"를 시각적으로 뭉뚱그리고 있었는데, 사람이 전달.md로 이 부분만 콕 집어 브랜드 노랑으로 바꾸라고 지시 — 등락 표시(▲/▼ 등, 이 파일과 무관한 JS 하드코딩 다수)는 그대로 두고 이 신규 토큰만 브랜드색으로 분리. 다크/라이트 동일값 고정 (hit/miss/pending과 같은 이유 — 채도 있는 신호색이라 두 테마 모두 대비 충분). */ --brand-accent: #facc15; /* [V16-THEME-BRAND, 2026-08-24] StockBanana 2차 브랜드 강조색(teal) — sorce/stock-design 의 --teal과 동일값. "S급 후보"(아직 미승격) 뉴스카드 좌측 테두리/태그에 사용해 진짜 S-Class(--brand-accent 골드)와 명확히 구분한다. 다크/라이트 공통 고정값 (--brand-accent와 같은 이유 — 채도 있는 신호색이라 두 테마 모두 대비 충분). 사람이 "차콜은 예전 주력색 재사용일 뿐 의도된 토큰이 아니다, 바꿔라"고 지적해 하드코딩 차콜(#374151)/흰색(#ffffff)을 이 토큰으로 교체(기존엔 --brand-accent만 정의돼 있고 실제 적용처가 0곳이었던 것도 이번에 같이 발견). */ --brand-accent-secondary: #18b9ab; /* [V16-THEME-BRAND, 2026-08-17] --brand-accent의 짙은 짝색 — 그라데이션 등 2톤이 필요한 자리용(예: guide.html "SENTINEL GUIDE" 제목). amber-700, --accent-cyan의 라이트 오버라이드와 동일 값이지만 --accent-cyan은 다크에서 cyan(#06b6d4)으로 바뀌는 테마-의존 토큰이라 재사용 불가 — 이 토큰은 --brand-accent와 마찬가지로 다크/라이트 공통 고정값이다. */ --brand-accent-deep: #b45309; /* [V15-TOKEN, 2026-08-01] "S-Class란?"/"Live Feed란?" 안내 배지(v12_layout_engine.js가 h3.section-title에 JS로 직접 주입, injectGuideLinks 계열) 색상 — 사람이 전달.md로 지적("이건 그냥 짙은 회색으로해", S-급 핵심 전략 타이틀+배지가 라이트에서 원색 앰버로 튐). 다크는 원래 색 그대로 유지, 라이트만 아래에서 회색으로. */ --guide-badge-sclass-color: #fcd34d; --guide-badge-sclass-border: rgba(245, 158, 11, 0.35); --guide-badge-feed-color: #f8fafc; --guide-badge-feed-border: rgba(148, 163, 184, 0.35); /* 홈 피드 "🛡️ 보유 포트폴리오 방어 (Defense)" 섹션 타이틀 — 사람 지시: "포트폴리오 방어도 색상 변경해"(S-급 핵심 전략과 동일하게 라이트에서 짙은 회색으로). 다크는 원래 에메랄드 그대로 유지. */ --section-title-defense-color: #10b981; /* S급 카드 캐러셀(화살표/활성 점/"1 / 5" 카운터) — 사람 지적: "검정과 회색으로". 다크는 원래 앰버 그대로, 라이트만 중립톤. */ --carousel-accent-color: #f59e0b; /* 실시간 핫 테마 타이틀/화살표/알약(pill) — 사람 지적: "보라색 계열 색상으로". 다크는 원래 빨강 계열 그대로, 라이트만 퍼플([[테마]] §1-1 액센트) 적용. */ --hot-theme-color: #ef4444; --hot-theme-pill-text: #fca5a5; --hot-theme-pill-bg: rgba(239, 68, 68, 0.1); --hot-theme-pill-border: rgba(239, 68, 68, 0.3); } /* [V15-THEME] 낮/시스템/다크 3단 테마 — data-theme는 v12_layout_engine.js가 localStorage(v13_theme_pref)를 읽어 에 세팅한다. 속성이 없으면(기본값) 위 :root 값 그대로라 기존 다크 화면은 변경 없음 — 라이트일 때만 아래로 덮어씀. */ [data-theme="light"] { --bg-deep: #f8fafc; --bg-card: #ffffff; --text-main: #0f172a; --text-dim: #64748b; --border: rgba(15, 23, 42, 0.08); /* hit/miss/pending은 채도 있는 신호색이라 흰 배경에서도 대비가 충분해 그대로 유지 (Phase 1 때 .price-pulse-box에서 이미 검증됨, [[고도화]] §2) — 페이지 실측 중 예외가 나오면 이 블록에서 조정. */ --guide-badge-sclass-color: #0f172a; --guide-badge-sclass-border: rgba(71, 85, 105, 0.3); --guide-badge-feed-color: #475569; --guide-badge-feed-border: rgba(71, 85, 105, 0.3); --section-title-defense-color: #475569; --carousel-accent-color: #334155; --hot-theme-color: #645791; --hot-theme-pill-text: #645791; --hot-theme-pill-bg: rgba(100, 87, 145, 0.1); --hot-theme-pill-border: rgba(100, 87, 145, 0.3); /* [V16-THEME-LIGHT-BRAND, 2026-08-16] --accent-cyan은 라이트 오버라이드가 아예 없어 다크값(#06b6d4)이 그대로 새고 있었음(신규 발견) — 사용처 5곳(.nav-pill 텍스트/보더, .theme-switch-btn.active 배경, .mobile-nav-item:hover/:active 텍스트, .mobile-divider 보더) 중 텍스트/보더가 다수라 순색 노랑(#facc15)은 흰 배경 대비 실패 — 글로우배지와 동일한 amber-700(#b45309)으로 통일해 "노랑 계열"을 유지하면서 대비 확보. --accent-blue는 이 파일 안에서 실사용처가 없어(React 번들 쪽 별도 스코프, 하드코딩 토큰화 단계에서 다룰 대상) 이번엔 미변경. */ --accent-cyan: #b45309; } /* [GLOBAL] */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg-deep); color: var(--text-main); font-family: var(--font-sans); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; width: 100%; } /* [HEADER] */ .layout-header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; background: rgba(3, 7, 18, 0); backdrop-filter: none; border-bottom: none; z-index: 9999 !important; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .layout-header.scrolled { background: rgba(3, 7, 18, 0.8) !important; backdrop-filter: blur(20px) !important; border-bottom: 1px solid var(--border) !important; height: 70px; /* 스크롤 시 약간 슬림하게 변경 */ } .header-inner { width: 100%; max-width: 1400px; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; } .logo-box { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 12px rgba(250, 204, 21, 0.3)); } .logo-mark { width: 100%; height: 100%; display: block; } .brand-name { font-size: 1.25rem; font-weight: 900; color: white; letter-spacing: -0.02em; } .nav-links { display: flex; gap: 2.5rem; align-items: center; } .nav-item { color: var(--text-dim); text-decoration: none; font-size: 13px; font-weight: 700; transition: color 0.2s; } .nav-item:hover { color: white; } .nav-pill { padding: 0.6rem 1.4rem; background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 999px; color: var(--accent-cyan); font-size: 13px; font-weight: 800; } /* [V15-THEME-SWITCH] 낮/시스템/다크 3단 토글 — 멤버스(.actions) 바로 앞에 배치 */ .theme-switch { display: flex; align-items: center; gap: 2px; padding: 3px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 999px; } .theme-switch-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 999px; background: transparent; color: var(--text-dim); font-size: 13px; cursor: pointer; transition: all 0.2s ease; } .theme-switch-btn:hover { color: var(--text-main); } .theme-switch-btn.active { background: var(--accent-cyan); color: #030712; } /* [USER-PROFILE-POPUP] V12-PREMIUM UI */ .user-action-group { display: flex; align-items: center; gap: 1.2rem; position: relative; user-select: none; } .user-trigger-box { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.8rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .user-trigger-box:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(6, 182, 212, 0.4); transform: translateY(-1px); } .user-trigger-box:active { transform: scale(0.98); } .profile-icon-circle { width: 28px; height: 28px; background: #3b82f6; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; } .user-info-text { display: flex; flex-direction: column; align-items: flex-start; } .user-name { color: white; font-size: 13px; font-weight: 800; line-height: 1.2; } .user-role-badge { color: #fbbf24; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } /* Dropdown Menu */ .user-dropdown-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 200px; background: rgba(255, 255, 255, 0.92); /* 가독성을 위한 높은 불투명도 */ backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); overflow: visible; /* 가상 요소를 보여주기 위해 visible로 변경 */ display: none; z-index: 100000 !important; /* 배경 텍스트 위로 강제 노출 */ animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* [V12-UX-BRIDGE] 트리거와 메뉴 사이의 12px 간격을 메우는 투명 브릿지 */ .user-dropdown-menu::before { content: ""; position: absolute; top: -15px; /* 간격보다 넓게 위로 확장 */ left: 0; right: 0; height: 20px; background: transparent; z-index: -1; } .user-dropdown-menu.active { display: block; } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .dropdown-user-header { background: #f8fafc; padding: 0.8rem 1.2rem; border-bottom: 1px dotted #e2e8f0; text-align: center; } .dropdown-user-name { color: #1e293b; font-size: 14px; font-weight: 850; letter-spacing: -0.01em; } .dropdown-items-group { padding: 0.5rem 0; } .dropdown-link-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 1.2rem; color: #475569; text-decoration: none; font-size: 13px; font-weight: 700; transition: all 0.2s; } .dropdown-link-item:hover { background: #f1f5f9; color: #1e293b; } .dropdown-link-item svg { width: 16px; height: 16px; color: #64748b; } .dropdown-link-item.logout { border-top: 1px solid #f1f5f9; color: #ef4444; } .dropdown-link-item.logout:hover { background: #fef2f2; color: #dc2626; } .dropdown-link-item.logout svg { color: inherit; } /* [V15-THEME-SWITCH-IN-MENU] 회원/게스트 드롭다운 안의 테마 토글 — 이 드롭다운은 사이트 테마(다크/라이트)와 무관하게 항상 밝은 유리질감 배경(rgba(255,255,255,0.92)) 이라, .theme-switch-btn의 기본 색(var(--text-dim), 다크일 땐 밝은 회색)을 그대로 쓰면 밝은 배경 위에 밝은 글자가 겹쳐 또 안 보이는 문제가 생긴다 — 이 드롭다운 안에서만 항상 어두운 톤으로 고정 오버라이드(사이트 테마 상태와 무관). */ .dropdown-theme-row { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1.2rem; border-bottom: 1px dotted #e2e8f0; } .dropdown-theme-label { font-size: 12px; font-weight: 700; color: #64748b; } .user-dropdown-menu .theme-switch { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); } .user-dropdown-menu .theme-switch-btn { color: #64748b; } .user-dropdown-menu .theme-switch-btn:hover { color: #1e293b; } .user-dropdown-menu .theme-switch-btn.active { color: #0f172a; } /* [CONTENT GAP] */ .main-content { flex: 1; margin-top: 80px; padding: 100px 2rem; display: flex; align-items: center; justify-content: center; } .gap-box { width: 100%; max-width: 1400px; height: 600px; border: 2px dashed var(--border); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 1.5rem; font-weight: 300; letter-spacing: 0.1em; } /* [FOOTER] */ .layout-footer { background: #010409; padding: 5rem 0 3rem; border-top: none; } .footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 2rem; display: flex; flex-direction: column; align-items: center; gap: 3rem; } .footer-links { display: flex; gap: 3rem; } @media (max-width: 768px) { .footer-links { flex-wrap: wrap; justify-content: center; gap: 1.5rem; } } .footer-link { color: var(--text-dim) !important; text-decoration: none !important; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.2s ease; } .footer-link:hover { color: var(--text-main) !important; } .footer-disclaimer { max-width: 800px; text-align: center; font-size: 10px; color: #4b5563; line-height: 1.8; } .copyright { font-size: 11px; font-weight: 900; color: #374151; letter-spacing: 0.2em; text-transform: uppercase; } /* [V12-UI-CLEANUP] 전역 레거시 요소 강제 은폐 */ .dashboard-header, .header-v15, .sentiment-stats-v28, .character-wrapper, .app-header, .auth-nav-group, .user-profile:not(#v12_header_loader *), .dashboard-controls, .search-container, .btn-auth-v15, .v15-header-inner, header:not(.layout-header), footer:not(.layout-footer), #root header, #root nav, #root footer { display: none !important; visibility: hidden !important; height: 0 !important; padding: 0 !important; margin: 0 !important; pointer-events: none !important; opacity: 0 !important; overflow: hidden !important; } /* [V12-FORCE-HIDE-OVERLAP] */ .modal-footer { display: none !important; height: 0 !important; visibility: hidden !important; } /* [V12-CONTAINER] 전역 서브페이지 표준 컨테이너 */ .v12-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 120px 2rem 5rem; /* 헤더 80px + 여백 40px */ flex: 1; } /* [V12-UI-COMPONENTS] GLASSMORPHISM UTILITY */ .glass { background: rgba(15, 23, 42, 0.6) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; } /* [V12-CMS-ADJUST] CMS 대시보드 전용 예외 처리 */ .v12-cms-body .main-content { margin-top: 0 !important; padding-top: 30px !important; } /* [V12-CLEANUP] Ensure no scrollbar on body */ body { overflow-x: hidden !important; } /* [V12-DESKTOP-HIDE] Hide mobile elements by default on desktop (>900px) */ .mobile-menu, .mobile-user-info, .hamburger-btn { display: none !important; } /* [V12-MOBILE-RESPONSIVE] 900px Breakpoint */ @media (max-width: 900px) { .layout-header { height: 60px !important; background: rgba(3, 7, 18, 0.95) !important; backdrop-filter: blur(15px) !important; border-bottom: 1px solid var(--border) !important; } /* [V15-THEME-LIGHT-FIX, 2026-08-01] 모바일 헤더는 데스크톱과 달리 스크롤 여부와 무관하게 항상 위 불투명 다크 배경을 강제한다(따라서 :not(.scrolled) 예외가 적용되는 데스크톱 로직과는 별개 버그였음 — 사람 지적: "모바일 화면 확인해 로그인시 테마가 안나오고 상단레이아웃이 이상해"). Phase 2로 마이그레이션된 페이지(body.v15-theme-ready)는 브랜드명/햄버거 바가 이미 var(--text-main)로 정상적으로 어두워지는데, 배경은 여전히 위 강제 다크값 그대로라 다크 배경 위 다크 글자로 안 보였음 — 마이그레이션된 페이지만 배경도 밝게 뒤집는다(안 된 페이지는 기존처럼 다크 배경+흰 글자 조합이 이미 정상 작동 중이라 건드리지 않음). */ [data-theme="light"] body.v15-theme-ready .layout-header { background: rgba(238, 242, 247, 0.95) !important; border-bottom-color: rgba(15, 23, 42, 0.08) !important; } .header-inner { padding: 0 1.5rem !important; } /* [V12-HARDENING] High specificity to prevent desktop menu leakage */ header#v12_header_loader .nav-links, header#v12_header_loader .actions { display: none !important; } /* Show hamburger */ .hamburger-btn { display: flex !important; flex-direction: column; gap: 6px; cursor: pointer; padding: 5px; z-index: 10001; } .hamburger-btn .bar { width: 24px; height: 2px; background-color: var(--text-main); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Hamburger Animation to 'X' */ .hamburger-btn.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger-btn.active .bar:nth-child(2) { opacity: 0; } .hamburger-btn.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobile Menu Overlay */ /* [2026-07-20 SIMPLE-CONCEPT] 기존엔 폰트 1.5rem/800weight + gap 1.5rem 로 항목 하나하나가 거대한 히어로 타이포처럼 떠 있어서 "너무 크다"는 사람 피드백(2026-07-20) — 리스트형 컴팩트 메뉴로 축소. 큰 gap 대신 항목별 얇은 구분선, 폰트 1.5rem→1.05rem, 800→600. */ .mobile-menu { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100vh !important; background: rgba(3, 7, 18, 0.98) !important; backdrop-filter: blur(20px) !important; z-index: 10000 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; padding-top: 72px !important; padding-bottom: 24px !important; opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(-100%); overflow-y: auto !important; /* ENABLE SCROLLING */ } .mobile-menu.active { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; } .mobile-menu-inner { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; width: 100% !important; padding: 0.5rem 1.5rem !important; flex-shrink: 0; } /* [V13-MOBILE-LABEL] Unified Section Label Style */ .mobile-nav-label { font-size: 0.7rem !important; font-weight: 800 !important; color: var(--sk-primary) !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; margin-top: 0.75rem !important; margin-bottom: 0.25rem !important; opacity: 0.9 !important; text-align: center !important; width: 100% !important; } /* [V12-ACCORDION] Mobile User Submenu */ .mobile-user-accordion { text-align: center; background: rgba(255, 255, 255, 0.03); border-radius: 16px; padding: 1.1rem; border: 1px solid rgba(255, 255, 255, 0.05); margin-top: 0.75rem; } .mobile-user-profile-header { transition: transform 0.2s; } .mobile-user-profile-header:active { transform: scale(0.98); } .mobile-user-submenu { max-height: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; gap: 0.9rem; padding-top: 0; opacity: 0; } .mobile-user-submenu.active { max-height: 300px; /* Expand on click */ padding-top: 1.25rem; opacity: 1; } .submenu-item { font-size: 0.95rem !important; font-weight: 500 !important; opacity: 0.8; } .mobile-nav-item { color: var(--text-main) !important; text-decoration: none !important; font-size: 1.05rem !important; font-weight: 600 !important; letter-spacing: normal !important; transition: color 0.15s !important; text-align: center !important; width: 100% !important; padding: 13px 2px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; } .mobile-nav-item:hover { color: var(--accent-cyan) !important; } .mobile-nav-item:active { color: var(--accent-cyan) !important; opacity: 0.7; } .mobile-divider { width: 100px !important; border: none !important; border-top: 2px solid var(--accent-cyan) !important; margin: 1rem auto !important; /* Centered as requested */ opacity: 0.3 !important; } .mobile-actions { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; } .mobile-user-info { display: block !important; width: 100% !important; padding: 1.1rem !important; background: rgba(255, 255, 255, 0.05) !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } } /* [2026-07-20 CLEANUP] 아래 두 개의 중복 @media(max-width:900px) 모바일메뉴 블록(구버전, !important 없어 위 블록에 항상 밀리던 죽은 코드) 제거 — 파일 크기만 3배로 늘리고 유지보수 함정이었음. */ /* [V12-UPDATE] Header Scroll Style & Log Removal */ .layout-header.scrolled { background: rgba(2, 6, 23, 0.95) !important; backdrop-filter: blur(15px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } div:has(> a[style*='blur(12px)']), a[style*='blur(12px)'], div[style*='blur(12px)'] { display: none !important; } /* [V12-FINAL-NUKE] 모든 로그 관련 div 강제 삭제 */ div:has(> div > span:contains('SYSTEM LOGS')), .system-logs-live-wrapper, #system-logs-live { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; visibility: hidden !important; } /* --- [V12-HOTFIX-MENU-FINAL] --- */ .nav-links { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 25px !important; } .nav-item { color: var(--text-dim); text-decoration: none; font-size: 13.5px; font-weight: 700; transition: all 0.2s ease; display: flex !important; align-items: center !important; height: 38px !important; white-space: nowrap; } .nav-item:hover { color: white; } .nav-item.dropdown { position: relative; cursor: pointer; } .dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(15px); background: #1e293b; border: 1px solid var(--border); border-radius: 12px; padding: 10px; min-width: 200px; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); box-shadow: 0 10px 40px rgba(0,0,0,0.6); z-index: 10000; } .dropdown-menu::after { content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -8px; border-width: 8px; border-style: solid; border-color: transparent transparent #1e293b transparent; } .dropdown-bridge { position: absolute; top: -20px; left: 0; right: 0; height: 20px; } .nav-item.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(10px); } .dropdown-item { display: flex; align-items: center; padding: 12px 15px; color: var(--text-dim); text-decoration: none; font-size: 0.85rem; border-radius: 8px; transition: 0.2s; } .dropdown-item:hover { background: rgba(255,255,255,0.05); color: var(--text-main); } /* ========================================================================== [V14-HOT-BADGE] S급 뉴스 주가 상승률(%) 표시 반응형 UI/UX 스타일 정의 ========================================================================== */ /* 카드 기본 레이아웃 변형 (반응형 Flex - S급 전용) */ .news-card-pro.glow-s-class { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; position: relative !important; transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1) !important; } /* [2026-08-24] 좌측 테두리 토큰화 — React가 critical/priority/score 기준으로 칠하는 기존 인라인 borderLeft(red/orange/emerald/slate)와 별개로, 진짜 S-Class만은 --brand-accent(골드)로 명확히 고정한다(사람 지시: "S급을 노란색으로"). */ .news-card-pro.glow-s-class { border-left-color: var(--brand-accent) !important; } /* 등락율 박스 (우측 고정 영역) */ .price-pulse-box { flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 140px !important; height: 100px !important; background: transparent !important; border: none !important; border-left: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: none !important; border-radius: 0 !important; position: relative !important; transition: all 0.3s ease !important; user-select: none !important; } /* 등락율 박스 내부 텍스트 스타일 */ .price-pulse-box .pulse-time { font-size: 0.72rem !important; color: #64748b !important; margin-bottom: 4px !important; font-weight: 600 !important; } .price-pulse-box .pulse-percentage { font-size: clamp(1.25rem, 3.5vw, 1.65rem) !important; font-weight: 900 !important; letter-spacing: -0.5px !important; line-height: 1.1 !important; } .price-pulse-box .pulse-label { font-size: 0.7rem !important; color: #94a3b8 !important; margin-top: 5px !important; font-weight: 700 !important; opacity: 0.8 !important; } /* 🟢 [Mild Hot] 등락률 +1.0% ~ +4.9% */ .price-pulse-box.hot-mild { border-left-color: rgba(16, 185, 129, 0.4) !important; } .price-pulse-box.hot-mild .pulse-percentage { color: #10b981 !important; } /* 🟡 [Super Hot] 등락률 +5.0% ~ +9.9% */ .price-pulse-box.hot-super { border-left-color: rgba(245, 158, 11, 0.6) !important; animation: v14-super-border-pulse 2.5s infinite ease-in-out !important; } .price-pulse-box.hot-super .pulse-percentage { color: #f59e0b !important; text-shadow: 0 0 10px rgba(245, 158, 11, 0.2) !important; } /* 🟠 [Ultra Hot] 등락률 +10.0% 이상 (골드 네온 그라데이션) */ /* [2026-07-24, 전달.md — "s급은 빨간색 없애... 촌스러워 보여"] 상승률이 가장 높은 구간(=가장 좋은 소식)이 정작 빨강(위험/하락을 연상시키는 색)이었던 걸 사이트 골드 톤 안에서 더 진하고 강한 그라데이션으로 교체 — 색상군 이탈 없이 "더 핫함"만 표현. */ .price-pulse-box.hot-ultra { border-left-color: rgba(245, 158, 11, 0.8) !important; animation: v14-ultra-border-pulse 2s infinite ease-in-out !important; } .price-pulse-box.hot-ultra .pulse-percentage { background: linear-gradient(135deg, #f59e0b, #fcd34d) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* 🔵 [Down/Hedge] 마이너스 등락률 (하락 수렴 시 파란색/하늘색 차분하게 처리) */ .price-pulse-box.hot-down { border-left-color: rgba(59, 130, 246, 0.4) !important; } .price-pulse-box.hot-down .pulse-percentage { color: #3b82f6 !important; } /* ⚪ [Normal] 보통 상태 (0% 근방) */ .price-pulse-box.hot-normal { border-left-color: rgba(148, 163, 184, 0.3) !important; } .price-pulse-box.hot-normal .pulse-percentage { color: #cbd5e1 !important; } @keyframes v14-super-border-pulse { 0%, 100% { border-left-color: rgba(245, 158, 11, 0.3); } 50% { border-left-color: rgba(245, 158, 11, 0.85); } } @keyframes v14-ultra-border-pulse { 0%, 100% { border-left-color: rgba(245, 158, 11, 0.4); } 50% { border-left-color: rgba(245, 158, 11, 1.0); } } /* 📱 모바일 디바이스 반응형 최적화 (Breakpoint: 768px 미만) */ @media (max-width: 768px) { .news-card-pro.glow-s-class { flex-direction: column !important; /* 세로 배열로 변경 */ align-items: stretch !important; gap: 15px !important; } .price-pulse-box { width: 100% !important; /* 가로폭 전체로 확장 */ height: 54px !important; /* 띠 형태의 슬림한 높이 */ flex-direction: row !important; /* 가로 레이아웃 */ justify-content: space-between !important; padding: 0 20px !important; background: transparent !important; border: none !important; border-left: none !important; border-top: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 0 !important; } /* 모바일 상태별 상단 보더 컬러 매핑 */ .price-pulse-box.hot-mild { border-top-color: rgba(16, 185, 129, 0.4) !important; } .price-pulse-box.hot-super { border-top-color: rgba(245, 158, 11, 0.6) !important; } .price-pulse-box.hot-ultra { border-top-color: rgba(245, 158, 11, 0.8) !important; } .price-pulse-box.hot-down { border-top-color: rgba(59, 130, 246, 0.4) !important; } .price-pulse-box.hot-normal { border-top-color: rgba(148, 163, 184, 0.3) !important; } .price-pulse-box .pulse-time { margin-bottom: 0 !important; } .price-pulse-box .pulse-label { margin-top: 0 !important; order: -1 !important; /* 주가 변동 문구가 제일 앞으로 오게 조정 */ } .price-pulse-box .pulse-percentage { font-size: 1.25rem !important; /* 모바일에서 폰트 살짝 조정 */ } } /* ========================================================================== [V15-THEME-LIGHT] 라이트 모드 — 공유 레이아웃(헤더/푸터/모바일메뉴/등락뱃지) 전용 오버라이드. 위쪽 :root/[data-theme="light"] 변수 치환만으로는 안 되는 하드코딩 색상들(흰 텍스트, rgba(255,255,255,*) 반투명 오버레이, #1e293b 등)을 여기서 개별적으로 뒤집는다. 파일 맨 끝에 몰아둔 이유: 위쪽 규칙 다수가 !important를 쓰고 있어(특히 모바일 미디어쿼리) 동일 우선순위일 때 소스 순서가 이기므로, 항상 마지막에 오는 이 블록이 안전하게 최종 적용되도록 하기 위함. 본문(각 페이지 자체