/* ========================================== 0. 팔레트 (2026-07-27 퍼플 → 블루 교체) ------------------------------------------ 현재 파일 곳곳의 색은 아직 hex로 직접 박혀 있다(치환 방식으로 바꿨기 때문). 아래는 그 hex들이 각각 무슨 역할인지에 대한 정본이다. 새 코드를 쓸 땐 hex 대신 이 변수를 쓸 것 - 그래야 다음 색상 변경이 여기 한 곳으로 끝난다. ========================================== */ :root { --bg: #070a10; /* 최심부 배경 (body) */ --bg-deep: #0b0e14; /* 전체 배경 */ --panel: #0e1219; /* 패널 */ --card: #131925; /* 카드 면 */ --card-alt: #161b26; /* 카드 면(밝은 쪽) */ --border: #222d3d; /* 카드 테두리 */ --border-hi: #2e3b4e; /* 강조 테두리 */ --border-sub: #1b2534; /* 옅은 구분선 */ --text: #f1f5f9; /* 제목 */ --text-body: #e8eef5; /* 본문 */ --text-2: #dce4ee; /* 기본 */ --text-3: #cbd5e1; /* 보조 */ --text-dim: #94a3b8; /* 흐린 텍스트 */ --text-mute: #64748b; /* 비활성/타임스탬프 */ --accent: #00a3ff; /* 메인 액센트 (구 #a78bfa) */ --accent-dp: #0088ff; /* 진한 액센트 */ --accent-lt: #38bdf8; /* 밝은 액센트 / 서브 라인 */ --accent-deep:#1d4ed8; /* 딥 블루 */ --pos: #5cb894; /* 상승/양수 (구 #34d399·#10b981) */ --neg: #d97d7a; /* 하락/음수 (구 #fb7185·#ef4444) */ --warn: #e3b063; /* 경고/PRO (구 #f59e0b) */ --brand-tg: #229ed9; /* 텔레그램 브랜드색 - 팔레트와 무관하니 바꾸지 말 것 */ /* 서체 (2026-07-27 모노 → 산세리프 전환). 원래 'JetBrains Mono'를 지정했지만 폰트 링크가 없어 실제로는 로드된 적이 없고 시스템 monospace로 표시되고 있었다. 외부 폰트를 새로 붙이지 않고 시스템 산세리프를 쓴다. */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', 'Malgun Gothic', Arial, sans-serif; --font-num: var(--font-ui); /* 숫자도 같은 서체 + tabular-nums로 자릿수 정렬 */ } /* ========================================== 1. 기본 리셋 및 전역 스타일 ========================================== */ *, *::before, *::after { box-sizing: border-box !important; } /* 폰트 통일(2026-08-07 실측) - button/input은 브라우저 기본 UA 스타일시트가 폰트를 상속 안 시키고 자체 기본값(Chrome 기준 Arial)을 강제한다. body에 --font-ui를 걸어놔도 이 요소들만 따로 논다 - getComputedStyle로 실측 확인함(button.nav-btn이 Arial로 나왔음). */ button, input, select, textarea { font-family: inherit; } /* 모바일 크롬의 "텍스트 자동 확대(font boosting)" 방지 - 좁은 컬럼 안의 긴 텍스트를 브라우저가 임의로 12px→17.6px처럼 키워서, CSS로 지정한 크기와 실제 화면 크기가 어긋나는 원인이었다 (2026-07-30, Liquidation Radar 카드 제목 실측으로 확인). 이 한 줄이 없으면 요소마다 다른 비율로 커져서 폰트 크기를 아무리 맞춰도 모바일에서 제각각으로 보인다. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Smart Money Flow 수급에 따라 색이 바뀌는 화면 테두리 앰비언트 (JS가 --ambient-color만 갱신). 항상 아주 옅게 - 카드/텍스트 가독성과 절대 경쟁하지 않는 수준으로 유지할 것. */ #ambient-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.16; transition: background-color 1.2s ease, opacity 1.2s ease; background-color: transparent; box-shadow: inset 0 0 140px 0 var(--ambient-color, transparent); } body { background-color: #070a10; color: #e8eef5; font-family: var(--font-ui); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; top: 0px !important; position: static !important; } /* ========================================== 2. 레이아웃 컨테이너 (메인 터미널 중앙 고정) ========================================== */ .layout-container { display: flex; justify-content: center; width: 100%; max-width: 1600px; margin: 0 auto; padding: 10px 20px; box-sizing: border-box; } .main-terminal { width: 100% !important; max-width: 100% !important; flex: 1; } .dashboard-wrapper { max-width: 100% !important; width: 100% !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; } .side-banner { display: none !important; /* 좌우 배너 비활성화 */ } /* ========================================== 3. Gridstack 대시보드 테마 및 카드 박스 ========================================== */ .grid-stack { width: 100% !important; min-width: 100% !important; display: block !important; margin-top: 2px !important; } .grid-stack-item-content { background: transparent !important; overflow: hidden !important; } /* 🔥 [오타 교정 완료] !direction ➔ !important 정상화 */ .grid-stack-item-content .card, .grid-stack-item-content .alpha-box, .grid-stack-item-content .liq-radar-box, .grid-stack-item-content .unified-whale-box { height: 100% !important; width: 100% !important; margin: 0 !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 6px !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin !important; /* Firefox: 웹킷 전용 스크롤바 스타일이 안 먹혀서 별도 대응 */ scrollbar-color: #222d3d transparent !important; } .card, .alpha-box, .liq-radar-box, .unified-whale-box, .table-sub-box { background: #131925; border-radius: 3px; border: 1px solid #2e3b4e; box-sizing: border-box; min-height: 0 !important; min-width: 0 !important; } /* 타이포/여백 가이드 3단계: 카드에 입체감만 살짝(모서리는 그대로, 레이아웃에 영향 없는 box-shadow만 추가) */ .card, .alpha-box, .liq-radar-box, .unified-whale-box { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; } .card { padding: 10px 12px; display: flex; flex-direction: column; justify-content: flex-start; } .card .period-compare { margin-top: auto; } .card-header, .matrix-cell-title, .table-sub-header span, th, td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 제목이 회색이면 카드 안의 어떤 글자보다도 약해 보인다. 색만 흰색으로 올린다(크기는 그대로). */ .card-header { font-size: 11px; color: #f1f5f9; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: inline-block; } .card-value { font-size: 17px; font-weight: 600; font-family: var(--font-num); color: #dce4ee; margin-bottom: 6px; } .card-stats { border-top: 1px dashed #222d3d; border-bottom: 1px dashed #222d3d; padding: 5px 0; margin-bottom: 6px; font-size: 10px; font-family: var(--font-num); display: flex; flex-direction: column; gap: 2px; } /* 스파크라인이 없는 카드(LONG/SHORT, ORDERBOOK, SMART MONEY FLOW)는 본문이 짧아 margin-top:auto로 밀린 1D/1W/1M 행 위에 빈 공간이 크게 남는다. 내용을 지어내는 대신 기존 행 사이 여백만 넓혀 자연스럽게 채운다. */ .card-stats.card-stats-roomy { padding: 18px 0 !important; gap: 14px !important; } .stat-row { display: flex; justify-content: space-between; color: #cbd5e1; } .up { color: #5cb894; font-weight: bold; } .down { color: #d97d7a; font-weight: bold; } /* 모노에서 산세리프로 바꾸면 숫자 폭이 제각각이라 값이 갱신될 때마다 자릿수가 흔들린다. tabular-nums로 폭을 고정해 모노를 쓰던 때의 정렬감을 유지한다. */ .card-value, .card-stats, .stat-row, .pc-val, .ticker-item, .matrix-cell-value, .taker-bar-label, .liq-level-row, .fng-score-val, .whale-metric-value, th, td { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* 원본 테두리는 흐린 퍼플(=액센트를 죽인 색)이었는데 중성 회색으로 치환되면서 PRO 유도 영역이 밋밋해졌다. 액센트를 머금은 파랑으로 되돌린다. */ .pro-teaser { background: rgba(0, 163, 255, 0.05); border: 1px dashed rgba(0, 163, 255, 0.45); border-radius: 3px; padding: 4px; text-align: center; cursor: pointer; transition: 0.2s; } .pro-teaser:hover { background: rgba(0, 163, 255, 0.15); border-color: #00a3ff; } .pro-teaser-title { font-size: 10.5px !important; color: #94a3b8; font-weight: bold; } /* 1층 6종 카드 - PRO 버튼 자리를 대체하는 1D/1W/1M 미니 비교 */ .period-compare { border-top: 1px dashed #222d3d; padding-top: 1px; margin-top: 0px; } .pc-row { display: grid; grid-template-columns: repeat(3, 1fr); } .pc-row > div { display: flex; flex-direction: column; align-items: center; gap: 1px; border-left: 1px solid #1b2534; padding: 0 2px; } .pc-row > div:first-child { border-left: none; } .pc-title { font-size: 8.5px; line-height: 1.1; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 0px; text-align: center; } .pc-label { font-size: 9px; color: #64748b; font-weight: 700; letter-spacing: 0.3px; } .pc-val { font-size: 11px; font-weight: 700; font-family: var(--font-num); color: #cbd5e1; } .pc-val.up { color: #5cb894; } .pc-val.down { color: #d97d7a; } /* 1층 카드 30일 스파크라인. 카드가 gridstack 고정 높이라 높이를 "더하면" 스크롤이 생긴다. 그래서 flex로 남는 공간만 차지하게 둔다 - 원래 비어 있던 자리를 채우는 셈이다. 색은 전부 currentColor로 흐르므로 팔레트를 바꿀 땐 아래 .up/.down 두 줄만 고치면 된다. */ .spark { display: block; width: 100%; flex: 1 1 auto; min-height: 2px; max-height: 16px; overflow: visible; } .spark.up { color: #5cb894; } .spark.down { color: #d97d7a; } .spark .spark-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; } .spark .spark-end { fill: currentColor; } .spark .spark-zero { stroke: #222d3d; stroke-width: 1; stroke-dasharray: 3 3; } /* 1층 6개 카드 밀착 가독성 최적화 */ /* 2026-07-28: 이전 값(padding 6px)은 여유가 정확히 0px라, 브라우저 확대·폰트 렌더링 차이만으로도 FUNDING RATE 카드에 스크롤바가 뜨는 문제가 있었다. 상하 패딩을 2px 줄여 안전 여백 확보(실측 19px 여유). */ .grid-stack-item[gs-w="2"] .card { padding: 4px 8px !important; gap: 2px !important; } .grid-stack-item[gs-w="2"] .card-header { font-size: 10.5px !important; margin-bottom: 0px !important; } .grid-stack-item[gs-w="2"] .card-value { font-size: 14px !important; margin-bottom: 1px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* 스파크라인이 붙은 3장(BTC PRICE/OI/FUNDING)이 gridstack 고정 높이를 12~25px 초과해 1D/1W/1M 값이 카드 밖으로 밀려 안 보이던 문제 - 브라우저에서 실측하며 값을 좁혔다. */ .grid-stack-item[gs-w="2"] .card-stats { font-size: 11px !important; padding: 1px 0 !important; margin-bottom: 1px !important; gap: 1px !important; } /* 드래그 및 리사이즈 시 강조 */ .grid-stack-item.ui-draggable-dragging .grid-stack-item-content { border: 2px solid #00a3ff !important; } /* 스크롤바 세부 디테일 */ .grid-stack-item-content .card::-webkit-scrollbar, .grid-stack-item-content .alpha-box::-webkit-scrollbar, .grid-stack-item-content .liq-radar-box::-webkit-scrollbar, .grid-stack-item-content .unified-whale-box::-webkit-scrollbar { width: 3px; } .grid-stack-item-content .card::-webkit-scrollbar-thumb, .grid-stack-item-content .alpha-box::-webkit-scrollbar-thumb, .grid-stack-item-content .liq-radar-box::-webkit-scrollbar-thumb, .grid-stack-item-content .unified-whale-box::-webkit-scrollbar-thumb { background: #222d3d; border-radius: 3px; } /* ========================================== 4. 상단 헤더 & 컨트롤 영역 ========================================== */ .header-wrap { display: flex !important; justify-content: space-between !important; align-items: flex-end !important; padding: 10px 4px !important; border-bottom: 1px solid rgba(46, 59, 78, 0.3) !important; margin-bottom: 8px !important; } .header-title { display: flex; flex-direction: column; justify-content: center; text-align: left !important; } .header-title h1 { font-size: 36px !important; font-weight: 900 !important; letter-spacing: -0.5px !important; line-height: 1.1 !important; margin: 0 !important; /* 목업은 타이틀이 흰색이고 파란색은 별도 로고 박스에만 쓴다. 이 사이트엔 로고 박스가 없어 h1 텍스트가 로고를 겸하고 있었고, 그라디언트 때문에 제목 전체가 파랗게 보이던 게 "화면이 너무 파랗다"는 인상의 큰 원인이었다. */ color: #f1f5f9; display: flex; align-items: center; gap: 8px; } .header-sub { font-size: 13px !important; color: #94a3b8 !important; font-weight: 500 !important; margin: 4px 0 0 0 !important; letter-spacing: 0.6px; opacity: 0.9; } .header-controls { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 4px !important; } .header-user-bar { display: flex; align-items: center; gap: 8px; } .calc-nav-btns { display: flex !important; align-items: center !important; gap: 8px !important; } /* 헤더 우측 버튼군 - 예전엔 기본 상태부터 전부 파란(혹은 초록) 테두리라 한 줄에 색 있는 버튼이 5개 넘게 몰려 "화면이 너무 파랗다"는 인상의 핵심 원인이었다. 이제 파란색은 Sign Up 한 곳(.nav-btn-primary)에만 쓰고 나머지는 중립으로 낮췄다. 호버 시에만 파랑이 살짝 비치도록 해서 "상호작용 피드백"으로만 남긴다. (2026-07-28) */ .nav-btn { background: #0e1219; border: 1px solid #2e3b4e; color: #94a3b8; padding: 6px 12px !important; border-radius: 3px !important; font-size: 11px !important; font-weight: 700; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important; display: flex; align-items: center; gap: 4px; } .nav-btn:hover { background: #161b26; color: #f1f5f9; border-color: #00a3ff; } /* Sign Up - .pro-lock-badge(🔒 PRO ONLY)와 동일한 배색: 어두운 배경 + 빨강 테두리 + 초록 텍스트(2026-07-30). */ .nav-btn-primary { background: rgba(19, 25, 37, 0.9) !important; border-color: rgba(184, 106, 104, 0.55) !important; color: #4e9c7e !important; } .nav-btn-primary:hover { background: rgba(19, 25, 37, 1) !important; border-color: #b86a68 !important; color: #4e9c7e !important; } .pro-vip-btn { background: #0e1219 !important; color: #e3b063 !important; border-color: #e3b063 !important; font-weight: 900 !important; } .pro-vip-btn:hover { background: #e3b063 !important; color: #070a10 !important; } .telegram-btn { background: #0e1219 !important; border-color: #2e3b4e !important; color: #94a3b8 !important; text-decoration: none !important; } .telegram-btn:hover { background: #229ED9 !important; color: #ffffff !important; border-color: #229ED9 !important; } /* 데스크톱 전용 헤더 줄 - PRO REPORT ... Login/Sign Up(확대) ... ⋯(Contact Telegram/Reports/Weapons Guide). 모바일에서는 아래 max-width:768px 블록에서 통째로 숨기고, 기존 header-user-bar-desktop-hide로 대체한다. */ .header-desktop-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; width: 100%; } .header-desktop-row-right { display: flex; align-items: center; gap: 8px; position: relative; } .header-desktop-auth { display: flex; flex-direction: row; gap: 6px; align-items: center; } .header-desktop-more-btn { font-size: 14px !important; font-weight: 700; padding: 6px 14px !important; } .header-desktop-dropdown { display: none; position: absolute; top: 38px; right: 0; z-index: 50; flex-direction: column; align-items: stretch; gap: 6px; width: 200px; background: #131925; border: 1px solid #2e3b4e; border-radius: 4px; padding: 10px; } .header-desktop-dropdown.desktop-open { display: flex; } .header-desktop-calc-row { display: flex; gap: 8px; align-items: center; } /* 데스크톱에서는 위 header-desktop-row/header-desktop-dropdown/header-desktop-calc-row로 대체되므로 기존 1단(로그인/텔레그램문의/Reports/Weapons Guide)과 2단(calc-nav-btns)은 기본(데스크톱)에서 숨긴다. 모바일은 아래 max-width:768px 블록에서 다시 켠다(calc-nav-btns는 이미 그 블록에 display:grid !important로 재정의되어 있어 별도 규칙이 필요 없다). */ .header-user-bar-desktop-hide { display: none; } .calc-nav-btns { display: none !important; } /* 모바일 전용 "⋯" 더보기 버튼 / 텔레그램 문의 링크 / 리포트 버튼 - 데스크톱에선 숨김. .report-open-btn 기본 스타일(아래, display:flex)이 이 규칙보다 뒤에 나와서 같은 우선순위면 그쪽이 이겨버려(데스크톱에도 노출) - !important로 확실히 숨긴다. */ .more-btn, .mobile-telegram-inquiry, .mobile-report-free, .mobile-report-pro, .mobile-bottom-report-row { display: none !important; } /* 번역된 문단이 어두운 배경에서 흰 블록으로 뜨는 것을 막는다. 크롬·엣지의 내장 번역은 번역한 텍스트를 태그로 감싸면서 배경색을 얹는다 - 페이지 내 번역 위젯을 걷어낸 뒤(2026-08-10)에도 이 규칙은 계속 필요하다. 지우지 말 것. */ font { background-color: transparent !important; box-shadow: none !important; } /* ========================================== 5. 풀사이즈 Ticker Bar (전광판) ========================================== */ .ticker-bar-container { display: flex; align-items: center; background: #070a10; border: 1px solid rgba(22, 27, 38, 0.7); border-radius: 3px; height: 32px !important; margin-bottom: 6px !important; overflow: hidden; width: 100%; } .ticker-track-wrap { flex: 1; overflow: hidden; position: relative; display: flex; align-items: center; height: 100%; } .ticker-track { display: flex; align-items: center; gap: 40px; white-space: nowrap; will-change: transform; animation: marquee-right 75s linear infinite; opacity: 0.85; transition: opacity 0.25s ease; } .ticker-track:hover { opacity: 1.0; animation-play-state: paused; } .ticker-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-num); font-size: 12.5px; } .coin-symbol { font-weight: bold; font-size: 13px; color: #94a3b8; } .coin-price { font-weight: 700; color: #dce4ee; margin-right: 4px; } .change-tag { font-size: 10.5px; font-weight: bold; padding: 2px 6px; border-radius: 3px; } .change-tag.up { background: transparent; color: #5cb894; border: none; padding: 2px 4px; } .change-tag.down { background: transparent; color: #d97d7a; border: none; padding: 2px 4px; } .change-tag.neutral { background: transparent; color: #94a3b8; border: none; padding: 2px 4px; } @keyframes marquee-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } } /* ========================================== 6. 알파 박스 (Matrix, CVD, Diagnosis) ========================================== */ .alpha-box { padding: 10px 12px !important; display: flex; flex-direction: column; } .alpha-title { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222d3d; padding-bottom: 4px; margin-bottom: 6px; } .alpha-title h3 { margin: 0; color: #f1f5f9; font-size: 12px; font-weight: 700; letter-spacing: -0.3px; } .liq-radar-box .alpha-title h3 { font-size: 13.5px; } /* 2026-07-28: 헤더에 신뢰도 배지(추정치) 추가 후 1px 오버플로우 발생 - 이 카드만 여백 살짝 축소 */ .liq-radar-box .alpha-title { padding-bottom: 2px; margin-bottom: 3px; } .status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #94a3b8; background: rgba(148, 163, 184, 0.08); border: 1px solid #222d3d; padding: 3px 9px; border-radius: 3px; white-space: nowrap; } /* Whale Stream 모바일 전용 TOP 3 EXCHANGES 배지 - 데스크톱에서는 숨김(모바일 미디어쿼리에서 켬) */ .mobile-top3-badge { display: none; } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #5cb894; flex-shrink: 0; } .scale-btns { display: flex; gap: 3px; align-items: center; } .scale-btn { background: #0b0e14; border: 1px solid #222d3d; color: #94a3b8; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: bold; cursor: pointer; transition: 0.2s; font-family: var(--font-num); } .scale-btn:hover { background: #161b26; color: #e3b063; } .scale-btn.active { background: #1b2534; color: #e3b063; border-color: #e3b063; } .q-tf-btn { background: #0b0e14; border: 1px solid #222d3d; color: #94a3b8; padding: 1px 4px; border-radius: 2px; font-size: 7.5px; font-weight: bold; cursor: pointer; transition: 0.2s; font-family: var(--font-num); } .q-tf-btn:hover { background: #161b26; color: #e3b063; } .q-tf-btn.active { background: #1b2534; color: #e3b063; border-color: #e3b063; } .q-tf-select { background: #0b0e14; border: 1px solid #222d3d; color: #94a3b8; padding: 1px 2px; border-radius: 2px; font-size: 7.5px; font-weight: bold; cursor: pointer; font-family: var(--font-num); outline: none; transition: 0.2s; } .q-tf-select.active { background: #1b2534; color: #e3b063; border-color: #e3b063; } .scale-select { background: #0b0e14; border: 1px solid #222d3d; color: #94a3b8; padding: 2px 3px; border-radius: 3px; font-size: 10px; font-weight: bold; cursor: pointer; font-family: var(--font-num); outline: none; transition: 0.2s; } #box-matrix { padding: 8px 10px !important; justify-content: space-between !important; overflow: hidden !important; } .matrix-status-banner { background: #161b26; border-radius: 3px; padding: 4px 6px !important; border-left: 4px solid #2e3b4e; margin-bottom: 4px !important; min-height: 0 !important; } .matrix-status-title { font-size: 11px; font-weight: 650; margin-bottom: 2px; display: flex; justify-content: space-between; align-items: center; } .matrix-status-desc { font-size: 10.5px; color: #94a3b8; line-height: 1.2; } .matrix-quad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px !important; margin-bottom: 4px !important; } .quad-cell { background: #0b0e14; border: 1px solid #161b26; border-radius: 3px; padding: 3px !important; text-align: center; font-size: 10px !important; color: #64748b; font-weight: bold; } .quad-cell.active-quad { border-color: #2e3b4e; background: rgba(255, 255, 255, 0.03); color: #dce4ee; } .matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px !important; margin-bottom: 4px !important; } .matrix-cell { background: #0b0e14; border: 1px solid #161b26; padding: 3px !important; border-radius: 3px; text-align: center; } .matrix-cell-title { font-size: 10.5px; color: #64748b; margin-bottom: 2px; } .matrix-cell-value { font-size: 12px; font-weight: bold; font-family: var(--font-num); } .taker-bar-container { background: #0b0e14; padding: 4px 6px !important; border-radius: 3px; border: 1px solid #161b26; margin-top: 0 !important; } .taker-bar-label { display: flex; justify-content: space-between; font-size: 10.5px; margin-bottom: 4px; font-family: var(--font-num); } .taker-progress { height: 6px; background: #d97d7a; border-radius: 3px; overflow: hidden; display: flex; } .taker-progress-fill { height: 100%; background: #5cb894; transition: width 0.5s ease; } #box-cvd { padding: 8px 10px !important; justify-content: space-between !important; overflow: hidden !important; } #box-cvd .alpha-title h3 { font-size: 11.5px !important; } /* 진단 문구 길이가 API 응답마다 달라져 간헐적으로 카드 높이를 9px 넘기던 문제. 브라우저에서 실제 응답으로 실측해 여백을 좁혔다(2026-07-28). */ /* Orderbook now 줄을 지우면서(2026-08-04) 카드 안에 여유가 생겨, 그만큼 글자를 키워 채운다. 처음엔 여백 스페이서(20px)를 남겨둔 채로 글자까지 키워서 34px 넘쳐 하단 버튼이 스크롤 밖으로 밀렸다 - 스페이서를 없애고 글자 크기도 다시 조금 줄여서 실측으로 안 넘치는 걸 확인했다. */ #box-analysis .diag-item { background: #0b0e14; border: 1px solid #161b26; border-radius: 3px; padding: 5px 10px !important; margin-bottom: 4px; } #box-analysis .diag-item:last-child { margin-bottom: 0; } #box-analysis .diag-item-tag { font-weight: 650; font-size: 11.5px !important; color: #94a3b8; display: flex; justify-content: space-between; margin-bottom: 2px; } #box-analysis .diag-item-text { color: #f1f5f9 !important; line-height: 1.22 !important; font-size: 12px !important; } .report-open-btn-row { margin-top: auto; width: 100%; display: flex; gap: 8px; } .report-open-btn { flex: 1; background: #161b26; color: #dce4ee; border: 1px solid #2e3b4e; padding: 8px; border-radius: 3px; font-weight: 700; font-size: 11px; cursor: pointer; transition: all 0.2s ease; display: flex; justify-content: center; align-items: center; gap: 6px; } .report-open-btn:hover { border-color: #3a4658; color: #f1f5f9; } .report-open-btn.pro { background: rgba(227, 176, 99, 0.07); border-color: rgba(227, 176, 99, 0.32); color: #e3b063; } .report-open-btn.pro:hover { background: rgba(227, 176, 99, 0.12); border-color: rgba(227, 176, 99, 0.5); } /* Institutional Diagnosis 카드의 FREE/PRO REPORT 버튼만 PC에서 살짝 키우고, FREE 쪽 테두리를 밝혀달라는 요청(2026-08-04) - PC 전용이라 모바일에서는 아래에서 원복한다. */ #box-analysis .report-open-btn-row .report-open-btn { padding: 10px 8px; } #box-analysis .report-open-btn-row .report-open-btn:not(.pro) { border-color: #4a5b73; } /* modal-free 하단 3버튼 - 카드 이미지(build_free_report_card_image) 안 버튼 그림과 같은 배색 톤 */ .free-modal-btn { display: flex; justify-content: center; align-items: center; padding: 13px; border-radius: 6px; font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none; transition: all 0.2s ease; box-sizing: border-box; } .free-modal-btn-primary { border: 2px solid #cdd4de; color: #f3f6fa; background: transparent; } .free-modal-btn-primary:hover { border-color: #f3f6fa; background: rgba(243, 246, 250, 0.06); } .free-modal-btn-pro { border: 1px solid #c49e5e; color: #c49e5e; background: rgba(26, 22, 15, 0.6); } .free-modal-btn-pro:hover { background: rgba(196, 158, 94, 0.14); } .free-modal-btn-admin { border: 1px solid #7d8ea3; color: #7d8ea3; background: transparent; } .free-modal-btn-admin:hover { border-color: #9aa8ba; color: #b7c2d0; } /* ========================================== 7. 청산 레이더 & FNG & 고래 센서 ========================================== */ .liq-radar-box { padding: 4px 12px !important; } .grid-stack-item-content .liq-radar-box { gap: 4px !important; } /* liq-radar-box가 gridstack 고정 높이를 18px 초과해 카드 밖으로 내용이 밀리던 문제. 브라우저에서 실측하며 이 블록과 아래 관련 규칙들의 여백을 좁혔다(2026-07-28, 2026-07-29 배너 여백 추가 축소). */ /* 원래 justify-content:space-between으로 본문·안내문이 한 줄을 나눠 썼는데, 컨테이너 폭이 딱 1px 아래로 모자라 "Downward Long" 다음에서 단어 중간에 줄바꿈되던 문제(2026-07-30 실측). 두 줄로 쌓아 각자 전체 폭을 쓰게 하고, 본문 폰트도 안내문(10px)에 맞춰 살짝 줄였다. */ .liq-banner { background: #0b0e14; border-radius: 3px; padding: 4px 10px; border-left: 4px solid #2e3b4e; margin-bottom: 2px; font-size: 11px; font-weight: bold; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .liq-radar-container { display: grid; grid-template-columns: 1.8fr 1fr; gap: 8px !important; } .liq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .liq-card { background: #161b26; padding: 6px 12px; border-radius: 3px; border: 1px solid #222d3d; } .liq-card-title { font-size: 13px; font-weight: bold; margin-bottom: 4px; display: flex; justify-content: space-between; } .liq-level-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; font-family: var(--font-num); padding: 3px 0; border-bottom: 1px dashed #222d3d; } .fng-card { background: #161b26; padding: 6px 10px !important; border-radius: 3px; border: 1px solid #222d3d; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; } .fng-header { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; } .fng-badge { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.3px; } .fng-score-val { font-size: 22px; font-weight: 700; font-family: var(--font-num); color: #dce4ee; } .fng-meter-bg { height: 6px; background: #0b0e14; border-radius: 3px; overflow: hidden; margin-bottom: 4px; border: 1px solid #222d3d; } /* 가운데는 원래 액센트색(퍼플)이었다. 그대로 #00a3ff를 쓰면 양옆보다 너무 튀어서 한 단계 눌렀다. */ /* 공포~탐욕 게이지는 빨강~앰버~초록 스펙트럼이라 중간에 브랜드 파랑이 들어갈 자리가 없다. 예전엔 여기 액센트(퍼플→파랑)가 있었는데 배경 로직(app.py의 fng_color)과 맞춰 앰버로 통일했다. */ .fng-meter-fill { height: 100%; background: linear-gradient(90deg, #d97d7a 0%, #e3b063 50%, #5cb894 100%); } .fng-diag-box { background: #0b0e14; border: 1px solid #222d3d; padding: 4px 8px !important; border-radius: 3px; border-left: 3px solid #2e3b4e; } .fng-diag-title { font-size: 10.5px; font-weight: 700; color: #94a3b8; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.3px; } .fng-diag-desc { font-size: 10.5px; line-height: 1.3; color: #cbd5e1; } /* ========================================== 8. 모달창 & 툴팁 & 유틸리티 ========================================== */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(7, 10, 16, 0.88); backdrop-filter: blur(8px); z-index: 9999; display: flex; justify-content: center; align-items: center; padding: 10px; box-sizing: border-box; } .modal-content { background: #131925; border: 1px solid #2e3b4e; border-radius: 3px; width: 100%; max-width: 440px; padding: 20px; box-sizing: border-box; } .modal-content-large { max-width: 740px; max-height: 90vh; overflow-y: auto; } /* Futures/Spot 계산기 모달 스타일은 static/css/calc-modal.css로 옮겼다(2026-08-12). 메인 페이지(landing.html)는 이 파일을 링크하지 않아서 계산기가 스타일 없이 열렸다. */ /* 내부 스크롤 영역의 브라우저 기본 스크롤바(밝은 회색)가 다크 테마와 안 어울려서 옆에 붙은 "사이드바"처럼 튀어 보였다 - 얇고 테마에 맞는 색으로 커스텀. */ .modal-content-large { scrollbar-width: thin; scrollbar-color: #2e3b4e transparent; } .modal-content-large::-webkit-scrollbar { width: 6px; } .modal-content-large::-webkit-scrollbar-track { background: transparent; } .modal-content-large::-webkit-scrollbar-thumb { background: #2e3b4e; border-radius: 3px; } .modal-content-large::-webkit-scrollbar-thumb:hover { background: #3a4658; } .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222d3d; padding-bottom: 10px; margin-bottom: 14px; } .close-btn { color: #94a3b8; font-size: 20px; cursor: pointer; transition: 0.2s; } .close-btn:hover { color: #e8eef5; } /* 로그인/회원가입 전용 - 나머지 계산기 모달과 스타일이 섞이지 않게 별도 클래스 사용 */ .auth-modal { max-width: 400px; padding: 34px 30px; position: relative; } .auth-close { position: absolute; top: 16px; right: 18px; } .auth-head { text-align: center; margin-bottom: 22px; } .auth-head h3 { margin: 0 0 6px 0; font-size: 21px; font-weight: 800; color: #e8eef5; } .auth-head p { margin: 0; font-size: 12.5px; color: #94a3b8; line-height: 1.5; } .auth-field { margin-bottom: 15px; } .auth-field label { display: block; font-size: 11.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; } .auth-field input { width: 100%; box-sizing: border-box; background: #0b0e14; border: 1px solid #222d3d; color: #e8eef5; padding: 11px 13px; border-radius: 3px; font-size: 14px; transition: border-color 0.15s; } .auth-field input:focus { outline: none; border-color: #38bdf8; } .auth-btn { width: 100%; background: #00a3ff; color: #fff; border: none; padding: 12px; border-radius: 3px; font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 6px; transition: background 0.15s; } .auth-btn:hover { background: #38bdf8; } .auth-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: #64748b; font-size: 10.5px; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #222d3d; } .auth-foot { text-align: center; margin-top: 16px; font-size: 14px; color: #94a3b8; } .auth-foot a { color: #38bdf8; font-weight: 700; cursor: pointer; text-decoration: none; } .auth-foot a:hover { text-decoration: underline; } .calc-btn { width: 100%; background: #00a3ff; color: white; border: none; padding: 9px; border-radius: 3px; font-weight: bold; cursor: pointer; margin-top: 8px; transition: background 0.15s; } .calc-btn:hover { background: #38bdf8; } /* .report-open-btn.pro(PRO REPORT →)와 동일한 배색 - 로그인/회원가입 모달의 제출 버튼 대상. .auth-btn은 다른 곳과도 공유되는 클래스라 기본 규칙은 안 건드리고 모달 범위로 한정한다 (2026-07-30, 회원가입은 2026-07-31 추가). 같은 배색의 계산기 버튼은 calc-modal.css에 있다. */ #modal-login .auth-btn, #modal-signup .auth-btn { background: rgba(227, 176, 99, 0.07); color: #e3b063; border: 1px solid rgba(227, 176, 99, 0.32); } #modal-login .auth-btn:hover, #modal-signup .auth-btn:hover { background: rgba(227, 176, 99, 0.12); border-color: rgba(227, 176, 99, 0.5); } /* 계산기 입력·버튼·결과창 규칙은 static/css/calc-modal.css로 옮겼다(2026-08-12). */ /* 페이지 최하단 면책조항+제휴고지(그리드 밖). 데스크톱은 한 문단당 한 줄로 쭉 이어지게 nowrap - 충분히 넓은 화면이라 줄바꿈 없이도 안 잘림. 모바일은 아래 @media 768px 블록에서 다시 줄바꿈 허용. margin-bottom을 넉넉히 둬서(2026-08-04) 뷰포트 높이가 근소하게 다른 환경에서도 스크롤 여유가 있게. */ .site-disclaimer { margin: 10px auto 40px; text-align: center; font-size: 9px; color: #64748b; line-height: 1.4; padding: 0 16px; } .site-disclaimer p { margin: 0 0 4px; white-space: nowrap; } .site-disclaimer p:last-child { margin-bottom: 0; } /* 계산 버튼 바로 아래 거래소 레퍼럴 카드 3개(바이낸스 활성 + OKX/비트겟 제휴예정) - 나란히 배치. 위아래로 점선 구분선을 둬서 버튼/결과 영역 사이에 끼어도 붕 떠 보이지 않게 한다. */ .exchange-ref-row { display: flex; gap: 8px; margin: 16px 0 14px 0; padding: 12px 0; border-top: 1px dashed #222d3d; border-bottom: 1px dashed #222d3d; } .exchange-ref-banner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; background: #0d1420; min-width: 0; text-decoration: none; border: 1px solid #2e3b4e; border-radius: 4px; transition: border-color 0.2s; } a.exchange-ref-banner:hover { border-color: #f0b90b; } .exchange-ref-banner img { height: 26px; width: auto; display: block; } /* 바이낸스/OKX 로고 실제 높이가 서로 달라(26px vs 16px) 그 아래 이름·랭킹 줄이 카드마다 다른 높이에서 시작했다 - 아이콘을 항상 26px짜리 틀 안에서 세로 가운데 정렬한다. */ .exchange-ref-icon-slot { height: 26px; display: flex; align-items: center; justify-content: center; } .exchange-ref-soon { opacity: 0.55; cursor: default; } .exchange-ref-name { font-size: 12px; font-weight: 700; color: #94a3b8; letter-spacing: 0.5px; } .exchange-ref-rank { font-size: 9px; font-weight: 600; color: #94a3b8; margin-top: 1px; } .exchange-ref-soon-badge { font-size: 9px; font-weight: 700; color: #64748b; letter-spacing: 0.3px; padding: 1px 6px; border: 1px solid #2e3b4e; border-radius: 8px; } .report-section { background: #0b0e14; border: 1px solid #161b26; border-radius: 3px; padding: 12px 14px; margin-bottom: 10px; font-size: 12px; } .report-sec-title { font-weight: 800; font-size: 12px; color: #dce4ee; border-bottom: 1px dashed #222d3d; padding-bottom: 6px; margin-bottom: 8px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; } .report-line { margin: 4px 0; color: #cbd5e1; line-height: 1.5; font-size: 11px; } .pro-blur { filter: blur(2px); cursor: pointer; user-select: none; transition: filter 0.2s ease; display: inline-block; } body.pro-unlocked .pro-blur { filter: none; cursor: text; user-select: text; } .pro-lock-badge { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; color: #4e9c7e; background: rgba(19, 25, 37, 0.9); border: 1px solid rgba(184, 106, 104, 0.55); padding: 2px 7px; border-radius: 3px; cursor: pointer; white-space: nowrap; } body.pro-unlocked .pro-lock-badge { display: none; } /* Liquidation Radar 25x 단계 전용 - 값 색상을 그대로 물려받는 인라인 자물쇠(박스형 .pro-lock-badge와 별개) */ .pro-hidden-value { display: none; } body.pro-unlocked .pro-hidden-value { display: inline; } .pro-lock-badge-inline { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; cursor: pointer; } .pro-lock-badge-inline svg { width: 10px; height: 10px; flex-shrink: 0; } body.pro-unlocked .pro-lock-badge-inline { display: none; } /* 카드 전체(또는 카드 하위 블록) 잠금 - CVD/스마트머니/MM 발자국/옵션표준지표/기관진단에 공통 사용 */ .pro-section-wrap { position: relative; } .pro-section-blur { filter: blur(2px); user-select: none; pointer-events: none; transition: filter 0.2s ease; } body.pro-unlocked .pro-section-blur { filter: none; user-select: text; pointer-events: auto; } /* 잠금 배지는 항상 "자신이 덮고 있는 잠금 영역"의 우측 상단에 고정한다(모니터 기준 절대좌표가 아니라 카드마다 다른 내부 구조를 그대로 따름) - 카드 정중앙에 뜨던 이전 방식 대신 이 규칙 하나로 전체 통일. */ .pro-section-overlay { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 8px 10px; background: linear-gradient(180deg, rgba(19,25,37,0) 0%, rgba(19,25,37,0.5) 45%, rgba(19,25,37,0.85) 100%); border-radius: 3px; cursor: pointer; } body.pro-unlocked .pro-section-overlay { display: none; } /* 예외 1: CVD 카드는 헤더 밑에 "Diagnosing..." 안내 줄이 따로 있어서(다른 두 카드엔 없음) 기본 위치대로 두면 그 줄과 겹친다 - 그 줄 아래로 배지를 살짝 더 내림. */ #box-cvd .pro-lock-badge { margin-top: -14px; } /* 예외 2: Whale Stream 카드는 잠금 영역 우측 상단에 이미 "1D Window" 태그가 있어서 배지를 거기 겹치지 않게 가운데로 되돌림. */ #box-whale-stream .pro-section-overlay { align-items: center; justify-content: center; } /* 예외 3/4: QUANT MM FOOTPRINT / OPTIONS STD 카드는 gridstack 고정 높이 여유가 원래 거의 없어서 (16절 참고) 기본 padding(8px 10px)만 더해도 스크롤바가 생긴다 - 배지 여백을 좁게. */ #box-quant-mm .pro-section-overlay, #box-options-std .pro-section-overlay { padding: 3px 6px; } /* table-layout:auto(기본값)는 셀 안의 가장 긴 텍스트("Options Standard Metrics (P/C · DVol · Skew)" 같은)를 기준으로 열 폭을 정해서, 좁은 화면에서 표 전체가 컨테이너보다 넓어져 PRO 열이 오른쪽으로 밀려나갔다(2026-07-30, 모바일 PRO 안내 모달 실측). fixed로 폭을 퍼센트로 고정하고 줄바꿈을 강제해서 컨테이너 폭 안에 항상 들어오게 한다. */ .plan-compare-table { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: 11px; table-layout: fixed; } /* 전역 규칙(위 "th, td { white-space:nowrap; text-overflow:ellipsis; }")이 이 표에도 적용돼 내용이 말줄임표로 잘려나갔다 - 여기서만 되돌려서 줄바꿈이 실제로 일어나게 한다. */ .plan-compare-table th { background: #161b26; padding: 8px 4px; color: #dce4ee; text-align: center; word-break: break-word; white-space: normal; overflow: visible; text-overflow: clip; } .plan-compare-table td { padding: 8px 4px; border-bottom: 1px solid #222d3d; text-align: center; word-break: break-word; white-space: normal; overflow: visible; text-overflow: clip; } .plan-compare-table th:first-child, .plan-compare-table td:first-child { width: 40%; text-align: left; } .plan-compare-table th:not(:first-child), .plan-compare-table td:not(:first-child) { width: 30%; } .pay-option-btn { width: 100%; background: #e3b063; color: #070a10; font-weight: 900; padding: 12px; border-radius: 3px; border: none; font-size: 14px; cursor: pointer; transition: background 0.15s; } .pay-option-btn:hover { background: #eec27d; } /* modal-pro의 "PARTNER EXCHANGE" 버튼을 누르면 펼쳐지는 바이낸스/OKX 선택 카드 2개 */ #partner-exchange-picker.visible { display: flex !important; } .exchange-pick-card { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px; background: #0d1420; min-width: 0; text-decoration: none; border: 1px solid #2e3b4e; border-radius: 6px; transition: border-color 0.2s; } .exchange-pick-card:hover { border-color: #f0b90b; } .exchange-pick-name { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; } .exchange-pick-rank { font-size: 10px; color: #94a3b8; font-weight: 600; } .exchange-pick-fee { font-size: 10px; color: #5cb894; font-weight: 700; margin-top: 2px; } #modal-pro { position: fixed !important; z-index: 9990 !important; } #modal-payment { position: fixed !important; z-index: 10000 !important; } .modal-blurred { filter: blur(6px) brightness(0.6) !important; pointer-events: none; } /* data-tooltip 요소들이 .card/.grid-stack-item-content의 overflow:hidden 안에 있어서 원래 쓰던 ::after 방식(부모 기준 절대좌표)은 조상의 overflow에 그대로 잘려 항상 안 보였다. position:fixed + JS로 뷰포트 기준 좌표를 직접 계산해 body 바로 아래 렌더링하는 방식으로 교체. */ [data-tooltip] { cursor: help; } .global-tooltip { position: fixed; z-index: 99999; pointer-events: none; background: #161b26; color: #dce4ee; border: 1px solid #2e3b4e; padding: 6px 10px; border-radius: 3px; font-size: 11px; font-weight: 600; line-height: 1.4; max-width: 280px; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; } .global-tooltip.visible { opacity: 1; visibility: visible; } /* ========================================== */ /* 📱 모바일 레이아웃 (768px 이하) */ /* 예전 규칙은 실제 마크업에 없는
태그를 대상으로 해서 전혀 적용되지 않던 죽은 코드였다 - .header-wrap 등 실제 클래스로 재작성. 순서: 1)타이틀+⋯ 2)Wisdom(한 줄) 3)텔레그램FREE/PRO 4)선물/현물계산기 5)카드들 회원가입/로그인/텔레그램문의는 ⋯ 버튼으로 열리는 드롭다운(header-user-bar 재사용)으로 뺌 */ /* ========================================== */ @media screen and (max-width: 768px) { /* 터치 화면엔 진짜 hover가 없어서, 탭하면 mouseover가 합성 이벤트로 뜨고 mouseout은 안 와서 툴팁이 화면에 그대로 눌러붙는 문제가 있었다. 모바일에서는 툴팁 자체를 끈다. */ .global-tooltip { display: none !important; } /* 좁은 화면에서 nowrap을 그대로 두면 가로 스크롤이 생기므로 다시 줄바꿈 허용. */ .site-disclaimer p { white-space: normal; } .site-disclaimer { font-size: 8px; color: #475569; } /* modal-pro 비교표 - 390px 폭에서 셀 내용이 2~3줄로 깨져 읽기 힘들었다(2026-08-06 실측). 내용도 줄였지만(템플릿 쪽) 여기서 폭·폰트도 한 번 더 좁힌다. */ .plan-compare-table { font-size: 9.5px; } .plan-compare-table th, .plan-compare-table td { padding: 6px 2px; } /* Institutional Diagnosis FREE/PRO REPORT 버튼 확대+테두리 밝게는 PC 전용 요청이라 모바일은 원래대로. */ #box-analysis .report-open-btn-row .report-open-btn { padding: 8px !important; } #box-analysis .report-open-btn-row .report-open-btn:not(.pro) { border-color: #2e3b4e !important; } /* TOP 3 EXCHANGES 배지가 버튼 줄과 안 맞아 다음 줄로 넘어갈 때 margin-left:auto 때문에 혼자 오른쪽 끝에 붕 떠서 왼쪽에 빈 공간만 남았다 - 줄바꿈되면 자연스럽게 왼쪽부터 붙게. */ .whale-sub-row .mobile-top3-badge { margin-left: 0 !important; } /* LONG/SHORT RATIO, ORDERBOOK, SMART MONEY FLOW 3개 카드 - .stat-row가 기본 justify-content:space-between이라 값이 카드 오른쪽 끝에 몰려 보였다(2026-08-04 지적). 라벨을 고정폭으로 왼쪽에 두고, 값은 남은 공간 안에서 중앙 정렬 - 라벨 길이가 카드마다 달라도(Retail All:/Bids Depth:/Coinbase Premium:) 값이 항상 같은 상대 위치에 오게 된다. */ #box-ls-ratio .stat-row, #box-orderbook-ratio .stat-row, #box-smart-money-flow .stat-row { justify-content: flex-start !important; } #box-ls-ratio .stat-row > span:first-child, #box-orderbook-ratio .stat-row > span:first-child, #box-smart-money-flow .stat-row > span:first-child { flex: 0 0 130px !important; } #box-ls-ratio .stat-value-group, #box-orderbook-ratio .stat-value-group, #box-smart-money-flow .stat-value-group { flex: 1 !important; text-align: center !important; } /* Liquidation Radar 100x/50x/25x 라벨 - 실기기에서 "100x (+0.8%)"만 두 줄로 줄바꿈되면서 옆 칸 "$64,706"과 높이가 어긋났다(2026-08-04, 데스크톱폭 테스트로는 재현 안 됐지만 실기기 스크린샷으로 확인). 폰트를 줄이고 라벨을 강제 한 줄로 고정해 줄바꿈 자체를 없앤다. */ .liq-level-row { font-size: 11px !important; } .liq-level-row > span:first-child { white-space: nowrap !important; } /* modal-free 안 카드 이미지가 CSS로 축소되면서 글자가 작아지는 문제 - 모달 좌우 여백을 줄여 이미지가 쓸 수 있는 폭을 조금이라도 더 늘린다(이미지 자체도 모바일 폭 감안해서 재생성함). */ #modal-free.modal-overlay { padding: 4px; } #modal-free .modal-content { padding: 0; max-width: 100%; } #modal-free .modal-header { padding: 12px 14px 8px 14px; margin-bottom: 0; } #modal-free .modal-header + div { padding: 12px !important; } #modal-free .modal-header + div + div { padding: 4px 12px 14px 12px !important; } /* Liquidation Radar & Crypto Fear & Greed - 제목이 길어서 좁은 화면에서 2~3줄로 줄바꿈되는데, ESTIMATE 배지가 가로 정렬(align-items:center)로 같이 있으면 줄바꿈된 제목 중간에 배지가 겹쳐 보였다. 배지를 제목 아래 줄로 내려서 겹침을 없앤다(2026-07-30). */ .liq-radar-box .alpha-title { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; } .liq-radar-box .alpha-title .status-badge { align-self: flex-start !important; } /* 계산기 버튼 모바일 규칙은 static/css/calc-modal.css의 @media 블록으로 옮겼다(2026-08-12). */ .header-wrap { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 12px !important; padding: 10px !important; width: 100% !important; box-sizing: border-box !important; } .header-title { width: 100% !important; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; } .header-title-text { display: flex; flex-direction: column; } .header-title h1 { font-size: 21px !important; line-height: 1.3 !important; } .header-sub { font-size: 10px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .more-btn { display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px !important; font-weight: 700; padding: 2px 10px !important; } .mobile-telegram-inquiry { display: block !important; } /* ⋯ 로 토글되는 드롭다운 - 기본은 숨김, .mobile-open일 때만 패널로 표시 */ #mobile-more-dropdown { display: none !important; position: absolute !important; top: 46px !important; right: 10px !important; z-index: 50; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; width: 220px !important; background: #131925 !important; border: 1px solid #2e3b4e !important; border-radius: 4px !important; padding: 10px !important; } #mobile-more-dropdown.mobile-open { display: flex !important; } #mobile-more-dropdown #auth-buttons { flex-direction: column !important; align-items: stretch !important; width: 100%; } .header-controls { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; } /* 데스크톱 전용 헤더 블록은 모바일에서 통째로 숨기고, 기존 1단 서브래퍼(로그인/텔레그램문의/ Reports/Weapons Guide)는 ⋯ 드롭다운 안에서 세로로 쌓이도록 되살린다. */ .header-desktop-row, .header-desktop-dropdown, .header-desktop-calc-row { display: none !important; } .header-user-bar-desktop-hide { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; width: 100%; } .calc-nav-btns { order: 2 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 6px !important; row-gap: 10px !important; /* 버튼이 커지면서 위아래 오터치 위험 - 세로 간격만 넉넉하게(2026-07-31) */ width: 100% !important; } /* 1층 = REPORT FREE/PRO, 2층 = 선물/현물계산기 (Telegram/PRO($15) 버튼은 이제 calc-nav-btns에 없음 - 데스크톱 전용 header-desktop-row/⋯ 드롭다운으로 옮겨감). */ .calc-nav-btns .mobile-report-free { display: flex !important; order: 1 !important; } .calc-nav-btns .mobile-report-pro { display: flex !important; order: 2 !important; } /* 2026-08-12에 선물·현물 버튼이 Calculator 하나로 합쳐졌다. 2열 그리드에 홀수 개가 남아 한 칸이 비므로 두 칸을 다 쓰게 한다. */ .calc-nav-btns .calc-open-btn { order: 3 !important; grid-column: 1 / -1 !important; } /* 4층 계산기 버튼 - 아이콘이 눈에 띄도록 살짝 키움 */ .calc-nav-btns .calc-open-btn { gap: 6px !important; padding: 15px 4px !important; font-size: 13px !important; border-radius: 8px !important; } /* 상단 4개 버튼(REPORT FREE/PRO, 계산기 2종) + 하단 REPORT 2개 - 아래 데이터 카드와 무게감을 맞추려고 확대(2026-07-31). 테두리 색은 기존 그대로 두고 은은한 그림자로만 살짝 뜬 느낌을 줌("테두리6" 시안, 사용자 확인받은 그대로 적용) - PRO는 그림자만 옅은 골드톤. */ .calc-nav-btns .mobile-report-free, .calc-nav-btns .mobile-report-pro, .mobile-bottom-report-row .report-open-btn { font-size: 13px !important; padding: 15px 8px !important; border-radius: 8px !important; } .calc-nav-btns .mobile-report-free, .calc-nav-btns .calc-open-btn, .mobile-bottom-report-row .report-open-btn:not(.pro) { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35) !important; } .calc-nav-btns .mobile-report-pro, .mobile-bottom-report-row .report-open-btn.pro { border-color: rgba(227, 176, 99, 0.6) !important; box-shadow: 0 3px 10px rgba(227, 176, 99, 0.12) !important; } .header-controls button, .header-controls select, .header-controls a { font-size: 0.72rem !important; padding: 6px 4px !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* 위 white-space:nowrap이 계산기 버튼 글자를 잘라내서(text-overflow:ellipsis) 예외 처리 */ .calc-nav-btns .calc-open-btn { white-space: normal !important; } /* 카드값 위 움직이는 전광판(7종 코인 티커) 제거 */ .ticker-bar-container { display: none !important; } /* Liquidation Radar & Crypto Fear/Greed: 데스크톱은 2단(1.8fr/1fr) 그리드인데 모바일 전체폭에서는 우측 FNG 카드가 눌려 잘리는 문제 - 세로 1열로 변경 */ .liq-radar-container { grid-template-columns: 1fr !important; } /* Whale Stream 헤더 - 제목+타임프레임버튼+배지가 한 줄에 몰려 3줄로 깨지던 문제. 제목을 한 줄 차지하게 하고, 버튼/배지는 다음 줄로 자연스럽게 넘어가게 함 */ .whale-card-header { flex-wrap: wrap !important; row-gap: 6px !important; } .whale-title-group { flex-wrap: wrap !important; width: 100% !important; row-gap: 6px !important; } .whale-title-group h3 { white-space: normal !important; width: 100% !important; } /* (≥$75K/US ET) 문구를 타임프레임 버튼과 한 줄로 붙여서, 버튼이 제목 줄에서 빠진 만큼 생긴 여유 공간을 그대로 활용 - 예전엔 버튼이 통째로 다음 줄에 혼자 있어 줄 수가 하나 더 늘어났었다(2026-07-31). */ .whale-sub-row { flex-wrap: wrap !important; row-gap: 4px !important; } /* TOP 3 EXCHANGES를 데스크톱용(헤더 맨 오른쪽) 대신 모바일 전용 배지로 교체 - 버튼 옆(whale-sub-row 안)에 붙여서 한 줄 아낌. 데스크톱 배지는 숨김(2026-07-31, mobile-report-free/pro와 같은 "데스크톱/모바일 배지 분리" 패턴 재사용). */ .desktop-top3-badge { display: none !important; } .mobile-top3-badge { display: inline-flex !important; } /* 상태 배지 전반(LIVE FILTER, LIVE, REPORT LIVE, ESTIMATE, MEASURED, DERIBIT, GRADE 3, TOP 3 EXCHANGES 등)을 모바일에서만 축소 - 데스크톱은 그대로 유지(2026-07-31). */ .status-badge { font-size: 8px !important; padding: 2px 6px !important; gap: 3px !important; } /* QUANT MM FOOTPRINT 헤더 여백 - MEASURED 배지와 타임프레임 줄이 너무 붙어 보이지 않게(2026-07-31) */ .qmm-header-block { gap: 4px !important; } /* 맨 아래 REPORT FREE/PRO 버튼 (요청) */ .mobile-bottom-report-row { display: flex !important; gap: 8px !important; margin-top: 12px !important; margin-bottom: 12px !important; padding: 0 10px !important; } /* 카드 그리드: gridstack의 데스크톱용 절대좌표/고정높이를 무시하고 세로 1열로 쌓는다. gs-x/gs-y 좌표 없이 DOM 순서 그대로 배치되는 구조라 순서가 꼬일 걱정은 없다. */ .grid-stack { height: auto !important; } .grid-stack-item { position: static !important; width: 100% !important; height: auto !important; transform: none !important; inset: auto !important; margin-bottom: 10px !important; } .grid-stack-item-content { position: static !important; height: auto !important; width: 100% !important; inset: auto !important; } .grid-stack-item-content .card, .grid-stack-item-content .alpha-box, .grid-stack-item-content .liq-radar-box, .grid-stack-item-content .unified-whale-box { height: auto !important; } } /* 리포트 코너 공통 상단 링크. 2026-08-11 이전에는 이 4줄이 템플릿 4곳에 복사돼 있었고 margin-bottom만 20px/24px로 미묘하게 어긋나 있었다. _report_nav.html이 마크업을 가져갔으므로 스타일도 여기 한 곳에 둔다. margin-bottom이 14px로 작은 건 바로 아래 .rpt-tabs가 붙기 때문이다 - 둘이 한 덩어리로 읽혀야 한다. 떼어 놓으면 탭이 페이지 제목에 딸린 것처럼 보인다. */ .report-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; } .report-nav-links { display: flex; gap: 16px; flex-wrap: wrap; } .report-nav a { color: var(--accent); text-decoration: none; font-size: 14px; } .report-nav a:hover { text-decoration: underline; } /* ── 리포트 코너 공통 탭 (Bitcoin Report / Stock Report) ────────────────────── 두 리포트가 "리포트"라는 한 카테고리 안에 있다는 걸 보여주는 자리다. 2026-08-11 이전에는 BTC 페이지에서 Stock Report로 가는 링크가 0개라 한쪽에서 다른 쪽이 아예 보이지 않았다. 여기(전역 CSS)에 두는 이유: 이 탭을 쓰는 템플릿이 5개다. 각 템플릿의