/* ============================================================= 플랜S 디자인 시스템 · theme.css (v2 심야 관제실 · 2026.07.10) ------------------------------------------------------------- '도우콘' 사이버/인텔 단말 톤 단일 원본. 어떤 화면이든 만 하면 같은 톤이 나오도록 토큰 + 컴포넌트 규칙을 모았다. 사용법: ... ← 다크 기본 ... ← 라이트 오버라이드 레이어 규칙(섞지 말 것): · 의미색 = verdict 4종 (--v-ease/tight/neutral/context) · 정보색 = --accent (블루) / --live (그린, 시스템 정상) · 경고색 = --warn-yellow / --warn-red (데이터 신선도) 클래스명은 index.html과 동일 — 변경 금지(화면 깨짐 방지). ============================================================= */ /* ===== 디자인 토큰 — DARK 기본 (사이버/인텔 터미널) ===== */ :root{ /* 기반: 배경·패널 — v2 '심야 관제실': 네이비 기 제거 → 무채 블랙 3층 */ --bg:#050608; /* 페이지 배경 — 딥 무채 블랙 */ --bg-grid:rgba(255,255,255,0.045); /* 배경 34px 그리드 — 관제판 질감 살짝 드러냄 */ --panel:#0A0C10; /* 큰 패널(전광판·면책·empty) */ --card:#0E1118; /* 지표 카드 면 */ --card-hi:#16203400; /* 카드 하이라이트(스켈레톤/로딩 확장용 예약) */ /* 기반: 텍스트 */ --text:#E9EFFA; /* 본문·헤드라인·핵심 수치 */ --text-sub:#8A95AD; /* 보조 설명·라벨 */ --text-micro:#5A6580; /* 기준일·캡션·// 마커 등 최약 정보 */ /* 기반: 테두리 */ --border:rgba(255,255,255,0.075); /* 기본 1px 테두리 — 미묘하게 */ --border-2:rgba(255,255,255,0.16); /* hover·강조 테두리(전광판 외곽 등) */ /* 의미색 = verdict 4종 (본색 / 배경 / 글로우) — 절대 임의 추가 금지 */ --v-ease:#2DE08C; --v-ease-bg:rgba(45,224,140,0.12); --v-ease-glow:rgba(45,224,140,0.55); /* 완화 = 그린(go) */ --v-tight:#FF5C66; --v-tight-bg:rgba(255,92,102,0.12); --v-tight-glow:rgba(255,92,102,0.5); /* 긴축 = 레드(stop) */ --v-neutral:#7E8BA6; --v-neutral-bg:rgba(126,139,166,0.12);--v-neutral-glow:rgba(126,139,166,0.35);/* 중립 = 그레이 */ --v-context:#586079; --v-context-bg:rgba(88,96,121,0.12); /* 맥락 = 딥그레이(참고용) */ /* 경고색 = 데이터 신선도(verdict와 분리) */ --warn-yellow:#F4C95B; --warn-yellow-bg:rgba(244,201,91,0.12); /* stale 8~16일·상단 면책 */ --warn-red:#FF8080; --warn-red-bg:rgba(255,92,102,0.14); /* stale 16일 초과 */ /* 액센트·시스템 — v2: 블루 → 앰버(관제실 백열 램프 톤) */ --arrow:#8A95AD; /* 추세 화살표 — 무채색(verdict 색 입히지 말 것) */ --accent:#FFB454; /* 정보 액센트 앰버 — // 마커·info ⓘ·포커스 링 */ --live:#2DE08C; /* LIVE 점·STATUS — 시스템 '정상'=그린 */ /* 타이포 */ --mono:"JetBrains Mono","SFMono-Regular",Consolas,"D2Coding",ui-monospace,monospace; /* 숫자·라벨·캡션 */ --sans:"Pretendard","Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; /* 한글 본문 */ --radius:6px; /* 기본 라운드 — v2: 각진 관제판(12→6px) */ --ease-out:cubic-bezier(.22,.61,.36,1); /* 모션 공용 이징 */ } /* ===== LIGHT 오버라이드 — 같은 구조에 톤만 교체(글로우 off) ===== */ html[data-theme="light"]{ --bg:#F3F5FA; --bg-grid:rgba(10,20,40,0.025); --panel:#FFFFFF; --card:#FFFFFF; --text:#0E1726; --text-sub:#566076; --text-micro:#9AA6BC; --border:rgba(14,23,38,0.10); --border-2:rgba(14,23,38,0.20); /* 라이트에서는 glow 토큰을 transparent 처리 → 밝은 배경에서 번짐 방지(규칙) */ --v-ease:#0A7D4E; --v-ease-bg:rgba(10,125,78,0.10); --v-ease-glow:transparent; /* 라이트: 흰 배경 AA(4.5:1↑) 위해 진한 그린 */ --v-tight:#DA3742; --v-tight-bg:rgba(218,55,66,0.10); --v-tight-glow:transparent; --v-neutral:#566076; --v-neutral-bg:rgba(86,96,118,0.10); --v-neutral-glow:transparent; --v-context:#9AA6BC; --v-context-bg:rgba(154,166,188,0.12); --warn-yellow:#8A6200; --warn-yellow-bg:rgba(244,201,91,0.20); --warn-red:#C12530; --warn-red-bg:rgba(218,55,66,0.10); --arrow:#566076; --accent:#B8791A; --live:#0E9D63; /* 라이트: 앰버는 어둡게(AA 대비) */ } /* ===== v2 '심야 관제실' 컴포넌트 ===== */ /* 숫자 유틸 — 계기판 목소리(모노 + 표 정렬 숫자) */ .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0; } .num .unit{ font-size:.7em; color:var(--text-sub); margin-left:.15em; } /* 어넌시에이터 램프 패널 — 경고등 N/4를 '실제 램프'로. 켜진 것만 빛난다 */ .lamps{ display:flex; gap:.45rem; margin:.65rem 0 .1rem; } .lamp{ flex:1; min-width:0; min-height:46px; border-radius:4px; border:1px solid var(--border); background:rgba(255,255,255,0.02); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.28rem; padding:.5rem .25rem; } .lamp .ldot{ width:9px; height:9px; border-radius:2px; background:rgba(255,255,255,0.08); } .lamp .lname{ font-family:var(--mono); font-size:.6rem; font-weight:700; color:var(--text-micro); letter-spacing:.04em; text-align:center; line-height:1.25; word-break:keep-all; } .lamp.on{ border-color:rgba(255,92,102,0.55); background:var(--v-tight-bg); box-shadow:0 0 16px rgba(255,92,102,0.18), inset 0 0 12px rgba(255,92,102,0.10); } .lamp.on .ldot{ background:var(--v-tight); box-shadow:0 0 9px var(--v-tight-glow); animation:lampPulse 3.2s ease-in-out infinite; } .lamp.on .lname{ color:var(--text); } @keyframes lampPulse{ 0%,100%{opacity:1;} 50%{opacity:.45;} } html[data-theme="light"] .lamp.on{ box-shadow:none; } @media (prefers-reduced-motion: reduce){ .lamp.on .ldot{ animation:none; } } /* ── v2.1 관찰 원장 사다리(.ldg) — 자산별 블록 + 가격 위치 사다리 + 근거 접기 ── */ .ldg{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); gap:.6rem; margin:.55rem 0 .4rem; } /* min() 캡: 320px급 기기 가로스크롤 방지 */ .ldg-a{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:.55rem .75rem .3rem .85rem; min-width:0; } .ldg-a::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--v-context); opacity:.4; } .ldg-a.hit::before{ background:var(--v-tight); opacity:1; box-shadow:0 0 10px var(--v-tight-glow); } .ldg-head{ display:flex; align-items:baseline; gap:.5rem; padding-bottom:.4rem; border-bottom:1px solid var(--border); } .ldg-name{ font-weight:800; font-size:.9rem; color:var(--text); } .ldg-hit{ margin-left:auto; font-family:var(--mono); font-size:.62rem; font-weight:800; color:var(--v-tight); border:1px solid color-mix(in srgb,var(--v-tight) 45%,transparent); border-radius:4px; padding:.06rem .38rem; background:var(--v-tight-bg); } .lv{ border-top:1px dashed var(--border); } .ldg-head + .lv, .lv-cur + .lv{ border-top:none; } .lv > summary{ list-style:none; display:flex; align-items:baseline; gap:.5rem; padding:.42rem .05rem; cursor:pointer; } .lv > summary::-webkit-details-marker{ display:none; } .lv > summary::after{ content:"▾"; font-size:.58rem; color:var(--text-micro); } .lv[open] > summary::after{ content:"▴"; } .lv-label{ flex:1 1 auto; font-size:.8rem; font-weight:600; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lv-val{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.8rem; color:var(--text-sub); white-space:nowrap; } .lv-d{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.72rem; color:var(--text-micro); min-width:3.2rem; text-align:right; white-space:nowrap; } .lv.met > summary .lv-label{ color:var(--v-tight); font-weight:800; } .lv-hitb{ font-family:var(--mono); font-size:.62rem; font-weight:800; color:var(--v-tight); min-width:3.2rem; text-align:right; } .lv-warnb{ font-family:var(--mono); font-size:.6rem; font-weight:800; color:var(--warn-yellow); } .lv-prov{ font-size:.68rem; color:var(--text-micro); line-height:1.55; padding:.05rem .05rem .45rem; } .lv-cur{ display:flex; align-items:center; gap:.5rem; padding:.32rem 0; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.72rem; font-weight:700; color:var(--accent); white-space:nowrap; } .lv-cur::before, .lv-cur::after{ content:""; flex:1; border-top:1px dashed color-mix(in srgb,var(--accent) 50%,transparent); } /* ── v2.1 그룹 아코디언 요약 칩 ── */ .dgrp > summary.grid-head{ list-style:none; cursor:pointer; user-select:none; } .dgrp > summary.grid-head::-webkit-details-marker{ display:none; } .gchips{ margin-left:auto; display:flex; gap:.3rem; align-items:center; } .gchips::after{ content:"▾"; font-size:.62rem; color:var(--text-micro); margin-left:.15rem; } .dgrp:not([open]) .gchips::after{ content:"▸"; } .gchip{ font-family:var(--mono); font-size:.6rem; font-weight:800; letter-spacing:0; border-radius:4px; padding:.06rem .34rem; border:1px solid var(--border); color:var(--text-sub); background:transparent; } .gchip.bad{ color:var(--v-tight); border-color:color-mix(in srgb,var(--v-tight) 40%,transparent); background:var(--v-tight-bg); } .gchip.warn{ color:var(--warn-yellow); border-color:color-mix(in srgb,var(--warn-yellow) 40%,transparent); background:var(--warn-yellow-bg); } .gchip.good{ color:var(--v-ease); border-color:color-mix(in srgb,var(--v-ease) 40%,transparent); background:var(--v-ease-bg); } /* ── v2.1 마이크로 모션 — 등장 스태거(28ms·8개 캡). 정적 도구라 이 이상 금지 ── */ @keyframes rise{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } } .dgrid > .dc, .ldg > .ldg-a{ animation:rise .3s var(--ease-out) both; } .dgrid > *:nth-child(2), .ldg > *:nth-child(2){ animation-delay:28ms; } .dgrid > *:nth-child(3), .ldg > *:nth-child(3){ animation-delay:56ms; } .dgrid > *:nth-child(4), .ldg > *:nth-child(4){ animation-delay:84ms; } .dgrid > *:nth-child(5), .ldg > *:nth-child(5){ animation-delay:112ms; } .dgrid > *:nth-child(6), .ldg > *:nth-child(6){ animation-delay:140ms; } .dgrid > *:nth-child(7), .ldg > *:nth-child(7){ animation-delay:168ms; } .dgrid > *:nth-child(n+8), .ldg > *:nth-child(n+8){ animation-delay:196ms; } @media (prefers-reduced-motion: reduce){ .dgrid > .dc, .ldg > .ldg-a{ animation:none; } } /* ===== 리셋 · 베이스 ===== */ *{ box-sizing:border-box; } html{ font-size:16px; -webkit-text-size-adjust:100%; } body{ margin:0; color:var(--text); background:var(--bg); /* 배경 미세 그리드(34px) — 단말기 그릴 질감 */ background-image:linear-gradient(var(--bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px); background-size:34px 34px; font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased; } .wrap{ max-width:1080px; margin:0 auto; padding:0 1rem 4rem; } .mono{ font-family:var(--mono); } /* 숫자/라벨을 모노로 강제할 때 */ /* ===== 상단 상태바 (터미널 헤더 — 모든 화면 최상단) ===== */ .statusbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; margin:0 -1rem; padding:.55rem 1rem; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--border); font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; /* 올캡스 트래킹 라벨 */ } .sb-left,.sb-right{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; } .live{ display:inline-flex; align-items:center; gap:.4rem; color:var(--live); font-weight:600; } .live .dot{ width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live); animation:blink 1.6s ease-in-out infinite; } @keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.35} } .sb-sep{ color:var(--text-micro); } .sb-tag{ color:var(--text-sub); } .sb-right .updated{ color:var(--text-sub); } .sb-op{ color:var(--text-micro); } /* ===== 버튼 ===== */ .btn{ appearance:none; border:1px solid var(--border); background:transparent; color:var(--text-sub); border-radius:8px; font-family:var(--mono); font-size:.72rem; cursor:pointer; min-height:30px; padding:0 .55rem; display:inline-flex; align-items:center; gap:.3rem; transition:.15s; } .btn:hover{ border-color:var(--border-2); color:var(--text); } .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .btn.icon{ min-width:34px; justify-content:center; font-size:.9rem; } /* 정사각 아이콘 버튼 */ /* ===== 브랜드 ===== */ .brandblock{ padding:1.6rem 0 1.1rem; } .brand{ margin:0; font-size:1.7rem; font-weight:800; letter-spacing:-0.02em; line-height:1.1; } .brand .brand-sub{ font-family:var(--mono); font-size:.8rem; font-weight:500; letter-spacing:.12em; color:var(--text-sub); text-transform:uppercase; margin-left:.5rem; } .brand-desc{ margin:.5rem 0 0; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--text-micro); text-transform:uppercase; } /* ===== 면책 (상단) — 필수 컴포넌트 ===== */ .disclaimer-top{ display:flex; align-items:center; gap:.5rem; font-size:.76rem; color:var(--warn-yellow); background:var(--warn-yellow-bg); border:1px solid color-mix(in srgb,var(--warn-yellow) 30%,transparent); border-radius:8px; padding:.5rem .75rem; margin:0 0 1.1rem; } /* ===== stale 경고 (데이터 신선도) ===== */ .stale-banner{ display:none; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600; border-radius:8px; padding:.5rem .75rem; margin-bottom:1rem; } .stale-banner.warn{ display:flex; background:var(--warn-yellow-bg); color:var(--warn-yellow); } /* 8~16일 */ .stale-banner.danger{ display:flex; background:var(--warn-red-bg); color:var(--warn-red); } /* 16일 초과 */ /* ===== 전광판 (메인 거시 국면 패널) ===== */ .board{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; padding:1.9rem 1.7rem; margin-bottom:1.9rem; background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 100%,transparent), var(--bg)); border:1px solid var(--border-2); border-radius:18px; position:relative; overflow:hidden; } .board::after{ content:"MACRO REGIME"; position:absolute; top:.85rem; right:1.1rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; color:var(--text-micro); } .light{ flex:0 0 auto; width:96px; height:96px; display:flex; align-items:center; justify-content:center; position:relative; } .light::after{ content:""; position:absolute; inset:12px; border-radius:50%; filter:blur(22px); opacity:.5; z-index:0; } /* verdict 후광 */ .light[data-regime="ease"]::after{ background:var(--v-ease); } .light[data-regime="tight"]::after{ background:var(--v-tight); } .light[data-regime="neutral"]::after{ background:var(--v-neutral); } .light .wx{ position:relative; z-index:1; width:84px; height:84px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)); } /* 날씨 픽토그램 */ .light .wx .bolt{ animation:flash 2.6s ease-in-out infinite; } /* 긴축 번개 점멸 */ @keyframes flash{ 0%,90%,100%{opacity:1} 93%{opacity:.15} 95%{opacity:1} } .board-text{ flex:1 1 280px; min-width:230px; } .board-headline{ font-size:1.65rem; font-weight:800; letter-spacing:-0.02em; margin:0 0 .4rem; } .board-headline .accent-ease{ color:var(--v-ease); text-shadow:0 0 18px var(--v-ease-glow); } /* 강조어 글로우 */ .board-headline .accent-tight{ color:var(--v-tight); text-shadow:0 0 18px var(--v-tight-glow); } .board-headline .accent-neutral{ color:var(--v-neutral); } .board-sub{ font-size:.95rem; color:var(--text-sub); margin:0 0 1rem; } .board-meta{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-family:var(--mono); } .asof{ font-size:.78rem; color:var(--text-sub); letter-spacing:.04em; } .score-chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; font-weight:500; color:var(--text-sub); background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:999px; padding:.28rem .7rem; cursor:help; letter-spacing:.03em; } .score-chip .info{ color:var(--accent); font-weight:700; } /* ===== 그리드 헤더 (섹션 구분) ===== */ .grid-head{ display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-sub); margin:0 0 .9rem; } .grid-head::before{ content:"//"; color:var(--accent); } .grid-head .count{ color:var(--text-micro); } /* ===== 카드 그리드 ===== */ .grid{ display:grid; gap:.85rem; grid-template-columns:repeat(4,1fr); } @media (max-width:880px){ .grid{ grid-template-columns:repeat(2,1fr); } } /* 태블릿 2열 */ @media (max-width:560px){ .grid{ grid-template-columns:1fr; } } /* 모바일 1열 */ /* ===== 지표 카드 (--strip 로 좌측 verdict strip 색 지정) ===== */ .card{ position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem .95rem 1rem 1.05rem; overflow:hidden; cursor:pointer; transition:border-color .15s, transform .15s, background .15s; } .card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--strip,var(--v-neutral)); box-shadow:0 0 14px var(--strip,transparent); } /* verdict strip + glow */ .card:hover{ border-color:var(--border-2); transform:translateY(-2px); } .card:focus-visible{ outline:2px solid var(--strip,var(--accent)); outline-offset:2px; } .card.context{ opacity:.78; } /* 맥락(참고용) 후순위 */ .card.anomaly{ opacity:.65; } /* 값 누락(부분 실패) */ .card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.4rem; } .card-label{ font-size:.8rem; color:var(--text-sub); font-weight:600; line-height:1.3; letter-spacing:.01em; } .card-label .muted{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.05em; color:var(--text-micro); font-weight:500; margin-top:2px; text-transform:uppercase; } .info-btn{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text-micro); font-size:.72rem; font-weight:700; cursor:help; line-height:1; display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); transition:.15s; } .info-btn:hover{ border-color:var(--border-2); color:var(--text); } .info-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; } .card-value{ font-family:var(--mono); font-size:1.45rem; font-weight:700; margin:.65rem 0 .3rem; letter-spacing:-0.01em; color:var(--strip,var(--text)); } /* 핵심 수치 = verdict 색 */ .card-trend{ display:flex; align-items:center; gap:.35rem; font-family:var(--mono); font-size:.78rem; font-weight:600; color:var(--strip,var(--text-sub)); letter-spacing:.02em; } .arrow{ color:inherit; font-weight:700; } .arrow.flat{ color:var(--text-micro); } .card.context .card-value, .card.context .card-trend{ color:var(--text-sub); } /* ===== 배지 4종 ===== */ .badge{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.75rem; padding:.26rem .6rem; font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.03em; border-radius:6px; } .badge.ease{ color:var(--v-ease); background:var(--v-ease-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v-ease) 28%,transparent); } .badge.tight{ color:var(--v-tight); background:var(--v-tight-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v-tight) 28%,transparent); } .badge.neutral{ color:var(--v-neutral); background:var(--v-neutral-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v-neutral) 24%,transparent); } .badge.context{ color:var(--v-context); background:var(--v-context-bg); } .card-date{ font-family:var(--mono); font-size:.64rem; color:var(--text-micro); margin-top:.65rem; letter-spacing:.04em; } /* ===== 툴팁 ===== */ .tip{ position:absolute; z-index:20; left:.9rem; right:.9rem; top:2.4rem; background:#05080F; color:#E9EFFA; border:1px solid var(--border-2); font-size:.74rem; font-weight:500; line-height:1.5; border-radius:8px; padding:.65rem .75rem; box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .12s; } .tip .tip-easy{ display:block; font-weight:700; margin-bottom:.3rem; color:#fff; } .tip .tip-rule{ display:block; color:var(--text-sub); font-family:var(--mono); font-size:.68rem; line-height:1.55; } .info-wrap:hover .tip, .info-wrap:focus-within .tip, .tip.open{ opacity:1; visibility:visible; } .info-wrap{ position:static; } /* ===== 면책 푸터 — 필수 컴포넌트 ===== */ .disclaimer-foot{ margin-top:2.2rem; padding:1.1rem 1.2rem; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); font-size:.82rem; color:var(--text-sub); line-height:1.65; } .disclaimer-foot strong{ color:var(--text); } /* ===== 빈 상태 ===== */ .empty{ text-align:center; padding:3rem 1.5rem; margin:1.5rem 0; background:var(--panel); border:1px dashed var(--border-2); border-radius:16px; } .empty .icon{ font-size:2.5rem; } .empty h2{ font-size:1.1rem; margin:.75rem 0 .5rem; } .empty p{ font-size:.92rem; color:var(--text-sub); margin:0 0 1.25rem; } /* ===== 유틸 ===== */ .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .foot-credit{ margin-top:1.5rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--text-micro); text-align:right; } /* ===== 모바일 = 앱 느낌 ===== */ @media (max-width:560px){ .wrap{ padding:0 .85rem calc(3rem + env(safe-area-inset-bottom)); } .statusbar{ margin:0 -.85rem; padding:.5rem .85rem calc(.5rem); font-size:.66rem; } .sb-op{ display:none; } .brandblock{ padding:1.2rem 0 .9rem; } .brand{ font-size:1.45rem; } .board{ flex-direction:column; align-items:flex-start; gap:1.1rem; padding:1.5rem 1.3rem; border-radius:16px; } .board::after{ top:1rem; } .light{ width:64px; height:64px; } .board-headline{ font-size:1.5rem; } .card{ padding:1rem 1.05rem 1.05rem 1.15rem; border-radius:14px; } .card-value{ font-size:1.55rem; } .card:active{ transform:scale(.99); background:color-mix(in srgb,var(--card) 88%,var(--accent)); } } /* ===== 미니 추세 스파크라인 (지표 카드) ===== */ .spark{ display:block; width:100%; height:24px; margin:.55rem 0 .1rem; opacity:.92; } .spark polyline{ fill:none; stroke:var(--strip,var(--v-neutral)); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; } .card.context .spark{ opacity:.6; } /* ===== 상단 페이지 네비 (전광판·마인드셋·브리핑 이동) ===== */ .topnav{ display:flex; gap:.45rem; flex-wrap:wrap; padding:.85rem 0 .2rem; font-family:var(--mono); } .topnav a{ text-decoration:none; font-size:.72rem; letter-spacing:.05em; color:var(--text-sub); border:1px solid var(--border); border-radius:999px; padding:.42rem .9rem; display:inline-flex; align-items:center; gap:.4rem; transition:.15s; } .topnav a:hover{ border-color:var(--border-2); color:var(--text); } .topnav a.active{ color:var(--text); border-color:color-mix(in srgb,var(--accent) 55%,transparent); background:color-mix(in srgb,var(--accent) 12%,transparent); } .topnav a .ico{ font-size:.85rem; opacity:.9; } /* ===== 공통 패널 섹션 (마인드셋·브리핑 본문) ===== */ .psec{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:1.3rem 1.4rem; margin-bottom:1.1rem; } .psec-head{ display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-sub); margin:0 0 1rem; } .psec-head::before{ content:"//"; color:var(--accent); } .psec-desc{ font-size:.84rem; color:var(--text-sub); margin:-.55rem 0 1rem; line-height:1.6; } /* ===== 마인드셋 체크리스트 ===== */ .checklist{ display:grid; gap:.5rem; } .check-item{ display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .85rem; background:var(--card); border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:.15s; } .check-item:hover{ border-color:var(--border-2); } .check-item input{ margin:.12rem 0 0; width:18px; height:18px; accent-color:var(--v-ease); flex:0 0 auto; cursor:pointer; } .check-item .ci-text{ font-size:.9rem; line-height:1.5; color:var(--text); } .check-item .ci-why{ display:block; font-size:.75rem; color:var(--text-sub); margin-top:.25rem; line-height:1.5; } .check-item.done{ opacity:.5; } .check-item.done .ci-main{ text-decoration:line-through; } .check-bar{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-top:.95rem; font-family:var(--mono); font-size:.72rem; color:var(--text-sub); } .check-bar .progress{ color:var(--v-ease); font-weight:600; } /* ===== 원칙 리스트 ===== */ .principle{ display:flex; gap:.7rem; padding:.65rem 0; border-bottom:1px solid var(--border); font-size:.88rem; line-height:1.6; color:var(--text); } .principle:last-child{ border-bottom:none; } .principle .pn{ font-family:var(--mono); color:var(--accent); font-size:.78rem; flex:0 0 auto; padding-top:.06rem; } .principle b{ color:var(--text); font-weight:700; } /* ===== 연령·상황별 전략 카드 ===== */ .age-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; } @media (max-width:560px){ .age-grid{ grid-template-columns:1fr; } } .age-card{ background:var(--card); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:12px; padding:1rem 1.1rem; } .age-card h3{ margin:0 0 .45rem; font-size:.98rem; } .age-card p{ margin:0; font-size:.83rem; color:var(--text-sub); line-height:1.6; } /* ===== AI 브리핑 ===== */ .brief-meta{ display:flex; gap:.55rem; flex-wrap:wrap; align-items:center; font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--text-micro); margin-bottom:1.1rem; } .brief-meta .chip{ border:1px solid var(--border); border-radius:999px; padding:.25rem .65rem; } .brief-meta .chip.ok{ color:var(--v-ease); border-color:color-mix(in srgb,var(--v-ease) 35%,transparent); } .brief-body{ font-size:.925rem; line-height:1.72; color:var(--text); } .brief-body h2{ font-size:1.02rem; margin:1.5rem 0 .6rem; padding-top:1rem; border-top:1px solid var(--border); } .brief-body h2:first-child{ border-top:none; padding-top:0; margin-top:0; } .brief-body h3{ font-size:.92rem; margin:1rem 0 .4rem; color:var(--text-sub); } .brief-body ul{ margin:.4rem 0 .8rem; padding-left:1.2rem; } .brief-body li{ margin:.25rem 0; } .brief-body p{ margin:.5rem 0; } .brief-body strong{ color:var(--text); font-weight:700; } .guide{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.2rem; } .guide h3{ margin:0 0 .7rem; font-size:.95rem; } .guide ol{ margin:0; padding-left:1.25rem; font-size:.86rem; line-height:1.75; color:var(--text-sub); } .guide ol b{ color:var(--text); } .guide code{ font-family:var(--mono); font-size:.8rem; background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); padding:.1rem .35rem; border-radius:5px; } .guide .note{ margin-top:.85rem; font-size:.78rem; color:var(--warn-yellow); line-height:1.55; } /* ===== AI 브리핑 — 거시 시각요약(스냅샷) ===== */ .brief-snapshot{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; padding:1.2rem 1.4rem; margin-bottom:1rem; background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 100%,transparent), var(--bg)); border:1px solid var(--border-2); border-radius:16px; position:relative; overflow:hidden; } .brief-snapshot::after{ content:"MACRO SNAPSHOT"; position:absolute; top:.85rem; right:1.1rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--text-micro); } .brief-snapshot .snap-wx{ flex:0 0 auto; width:58px; height:58px; filter:drop-shadow(0 5px 10px rgba(0,0,0,.4)); } .brief-snapshot .snap-head{ flex:1 1 200px; min-width:170px; } .snap-regime{ font-size:1.12rem; font-weight:800; letter-spacing:-0.01em; margin:0 0 .25rem; } .snap-score{ font-family:var(--mono); font-size:.72rem; color:var(--text-sub); margin:0; letter-spacing:.02em; } .snap-rail{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; flex:1 1 100%; margin-top:.5rem; } @media (max-width:760px){ .snap-rail{ grid-template-columns:repeat(2,1fr); } } @media (max-width:430px){ .snap-rail{ grid-template-columns:1fr; } } .snap-chip{ background:var(--card); border:1px solid var(--border); border-left:3px solid var(--strip,var(--v-neutral)); border-radius:10px; padding:.5rem .6rem; min-width:0; } .snap-chip .sc-label{ font-size:.64rem; color:var(--text-sub); font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .snap-chip .sc-val{ font-family:var(--mono); font-size:.9rem; font-weight:700; color:var(--strip,var(--text)); margin:.18rem 0 0; } .snap-chip .spark{ height:16px; margin:.18rem 0 0; } /* ===== AI 브리핑 — 카드뉴스 ===== */ .brief-card{ background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:14px; padding:1.05rem 1.3rem; margin-bottom:.8rem; } .brief-card.hero{ border-left-color:var(--strip,var(--accent)); background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 100%,transparent), var(--bg)); } .brief-card.disc{ border-left-color:var(--warn-yellow); } .bc-head{ display:flex; align-items:center; gap:.6rem; margin:0 0 .55rem; } .bc-ico{ font-size:1.05rem; line-height:1; } .bc-title{ font-size:1.15rem; font-weight:700; color:var(--text); letter-spacing:-0.01em; line-height:1.3; word-break:keep-all; overflow-wrap:anywhere; } /* 섹션 일러스트 타일 (인라인 SVG, 테마색 자동) */ .bc-art{ width:42px; height:42px; flex:0 0 auto; border-radius:11px; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg, color-mix(in srgb,var(--accent) 18%,var(--card)), var(--card)); border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border)); } .bc-art.hero{ width:46px; height:46px; } .bc-art svg{ width:26px; height:26px; display:block; } .bc-art .ln{ stroke:var(--accent); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; } .bc-art .dim{ stroke:color-mix(in srgb,var(--accent) 50%,var(--text-sub)); stroke-width:1.5; fill:none; opacity:.55; stroke-linecap:round; stroke-linejoin:round; } .bc-art .fl{ fill:var(--accent); } .bc-art .fl2{ fill:color-mix(in srgb,var(--accent) 55%,var(--text-sub)); opacity:.7; } .bc-art.warn{ background:linear-gradient(150deg, color-mix(in srgb,var(--warn-yellow) 20%,var(--card)), var(--card)); border-color:color-mix(in srgb,var(--warn-yellow) 32%,var(--border)); } .bc-art.warn .ln{ stroke:var(--warn-yellow); } .bc-art.warn .fl{ fill:var(--warn-yellow); } .brief-card.hero .bc-head{ margin-bottom:.4rem; } .brief-card.hero .bc-title{ font-size:.72rem; color:var(--text-sub); font-weight:600; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; } .bc-body{ font-size:.925rem; line-height:1.72; color:var(--text); } .brief-card.hero .bc-body{ font-size:1.22rem; line-height:1.55; font-weight:600; letter-spacing:-0.01em; } .brief-card.disc .bc-body{ font-size:.8rem; color:var(--text-sub); line-height:1.6; } .bc-body p{ margin:.4rem 0; } .bc-body p:first-child{ margin-top:0; } .bc-body p:last-child{ margin-bottom:0; } .bc-body ul{ margin:.4rem 0; padding-left:1.15rem; } .bc-body li{ margin:.3rem 0; } .bc-body strong{ color:var(--text); font-weight:700; } .bc-src-link{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; word-break:break-all; font-size:.86em; } .bc-src-link:hover{ filter:brightness(1.15); } .bc-cite{ font-size:.78rem; color:var(--text-sub); margin:.15rem 0 .5rem; padding-left:.1rem; opacity:.85; } /* ── 통합 네비 (나침반 홈 스타일 · 전 화면 공용) ── */ .home-nav{ position:sticky; top:0; z-index:20; display:flex; gap:.4rem; padding:.55rem 0; margin:.2rem 0 .8rem; background:var(--bg,#0c0f16); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .home-nav::-webkit-scrollbar{ display:none; } .home-nav a{ flex:0 0 auto; text-decoration:none; font-size:.8rem; font-weight:700; color:var(--text-sub); background:var(--card); border:1px solid var(--border); border-radius:20px; padding:.35rem .8rem; white-space:nowrap; } .home-nav a.on{ color:var(--text); border-color:var(--accent); } .home-nav a:hover{ color:var(--text); } .bc-sub{ font-size:1.0rem; font-weight:600; color:var(--text); margin:1.1rem 0 .45rem; padding-top:.6rem; border-top:1px solid var(--border); } /* ── 데이터 콜아웃: 라벨(회색)+수치(굵은 무채색)+증감(등락색)+해석(본문). 파란 볼드 벽 폐기 ── */ .bc-callout{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem .55rem; margin:.55rem 0; padding:.55rem .75rem; border-left:3px solid var(--strip,var(--accent)); background:color-mix(in srgb,var(--card) 92%,var(--strip,var(--accent))); border-radius:0 8px 8px 0; } .bc-callout .co-label{ font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.04em; color:var(--text-sub); } .bc-callout .co-num{ font-family:var(--mono); font-size:.98rem; font-weight:700; color:var(--text); } .bc-callout .co-delta{ font-family:var(--mono); font-size:.9rem; font-weight:700; } .bc-callout .co-delta.up{ color:var(--v-ease); } .bc-callout .co-delta.down{ color:var(--v-tight); } .bc-callout .co-note{ flex:1 1 100%; font-size:.86rem; color:var(--text-sub); line-height:1.6; } .bc-body > .bc-sub:first-child{ margin-top:0; padding-top:0; border-top:none; } /* ============================================================ 인텔 리포트 v2 (방향 C+A) — 배너네비 · 대시보드 · 매트릭스 · 미시 ============================================================ */ /* ===== 인텔 대시보드 (국면 게이지 + 거시 매트릭스) ===== */ .intel-dashboard{ display:grid; grid-template-columns:minmax(220px,290px) 1fr; gap:1.1rem; align-items:stretch; background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 100%,transparent), var(--bg)); border:1px solid var(--border-2); border-radius:18px; padding:1.3rem 1.4rem; margin-bottom:1rem; position:relative; overflow:hidden; } .intel-dashboard::after{ content:"INTEL DASHBOARD"; position:absolute; top:.85rem; right:1.1rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--text-micro); } @media (max-width:820px){ .intel-dashboard{ grid-template-columns:1fr; } } /* 국면 반원 게이지 */ .regime-gauge{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; padding:.4rem 0; } .regime-gauge svg{ width:200px; max-width:100%; height:auto; } .regime-gauge .rg-arc{ fill:none; stroke-width:11; stroke-linecap:round; } .regime-gauge .rg-needle{ stroke:var(--text); stroke-width:3; stroke-linecap:round; } .regime-gauge .rg-hub{ fill:var(--text); } .regime-gauge .rg-score{ font-family:var(--mono); font-weight:800; font-size:1.9rem; fill:var(--text); } .regime-gauge .rg-zlab{ font-family:var(--mono); font-size:.5rem; letter-spacing:.04em; } .regime-gauge .rg-regime{ font-size:1.05rem; font-weight:800; letter-spacing:-0.01em; margin:.1rem 0 0; } .regime-gauge .rg-sub{ font-family:var(--mono); font-size:.66rem; color:var(--text-sub); } /* 거시 7지표 매트릭스 */ .macro-matrix{ display:flex; flex-direction:column; gap:.4rem; } .mx-head{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-sub); margin-bottom:.15rem; } .mx-head::before{ content:"// "; color:var(--accent); } .mx-row{ position:relative; display:grid; grid-template-columns:22px minmax(72px,1.1fr) auto 74px auto; align-items:center; gap:.5rem; background:var(--card); border:1px solid var(--border); border-radius:9px; padding:.42rem .7rem .42rem .7rem; } .mx-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:9px 0 0 9px; background:var(--strip,var(--v-neutral)); box-shadow:0 0 10px var(--strip,transparent); } .mx-ico{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; } .mx-ico svg{ width:18px; height:18px; stroke:var(--text-sub); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .mx-row.context{ opacity:.62; } .mx-label{ font-size:.74rem; color:var(--text-sub); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mx-val{ font-family:var(--mono); font-size:.84rem; font-weight:700; color:var(--strip,var(--text)); text-align:right; white-space:nowrap; } .mx-spark{ height:18px; } .mx-badge{ font-family:var(--mono); font-size:.6rem; font-weight:600; padding:.12rem .35rem; border-radius:5px; white-space:nowrap; color:var(--strip); background:color-mix(in srgb,var(--strip) 14%,transparent); } @media (max-width:480px){ .mx-row{ grid-template-columns:22px 1fr auto auto; } .mx-spark{ display:none; } } /* ===== 미시 스트립 (가격·도미넌스·공포탐욕) ===== */ .micro-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-bottom:1rem; } @media (max-width:760px){ .micro-strip{ grid-template-columns:repeat(2,1fr); } } @media (max-width:430px){ .micro-strip{ grid-template-columns:1fr; } } .micro-chip{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.8rem .9rem; } .micro-chip .mc-label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-sub); } .micro-chip .mc-val{ font-family:var(--mono); font-size:1.2rem; font-weight:800; color:var(--text); margin:.25rem 0 .1rem; } .micro-chip .mc-chg{ font-family:var(--mono); font-size:.72rem; font-weight:700; } .micro-chip .mc-chg.up{ color:var(--v-ease); } .micro-chip .mc-chg.down{ color:var(--v-tight); } .micro-chip .mc-chg.flat{ color:var(--text-sub); } .micro-chip .easy-caption{ margin-top:.35rem; } /* 도미넌스 스택바 (무채색 — 방향성 지표 아님) */ .dominance-bar{ display:flex; height:18px; border-radius:6px; overflow:hidden; margin:.35rem 0 .3rem; border:1px solid var(--border); } .dominance-bar span{ display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.56rem; color:#fff; white-space:nowrap; overflow:hidden; } .dom-legend{ display:flex; flex-wrap:wrap; gap:.5rem; font-family:var(--mono); font-size:.6rem; color:var(--text-sub); } .dom-legend i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:.25rem; vertical-align:middle; } /* 공포탐욕 반원 게이지 */ .fng-gauge{ display:flex; flex-direction:column; align-items:center; } .fng-gauge svg{ width:150px; max-width:100%; height:auto; } .fng-gauge .fg-arc{ fill:none; stroke-width:9; stroke-linecap:round; } .fng-gauge .fg-needle{ stroke:var(--text); stroke-width:2.4; stroke-linecap:round; } .fng-gauge .fg-val{ font-family:var(--mono); font-weight:800; font-size:1.5rem; fill:var(--text); } .fng-gauge .fg-lab{ font-size:.72rem; font-weight:700; color:var(--text); margin-top:-.2rem; } /* ===== Confluence 축 (신호 쏠림) ===== */ .confluence-axis{ position:relative; margin:.6rem 0 .2rem; padding:1.4rem .4rem .2rem; } .cf-track{ position:relative; height:4px; border-radius:2px; background:linear-gradient(90deg,var(--v-tight),var(--v-neutral),var(--v-ease)); } .cf-ends{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.6rem; color:var(--text-sub); margin-top:.4rem; } .cf-dot{ position:absolute; top:50%; width:11px; height:11px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid var(--bg); box-shadow:0 0 8px var(--strip); background:var(--strip); } /* ===== NO DATA 정직 카드/칩 (할루시네이션 가드) ===== */ .nodata-card{ background:transparent; border:1px dashed var(--border-2); border-radius:14px; padding:1.05rem 1.3rem; margin-bottom:.8rem; opacity:.72; } .nodata-card .nd-head{ display:flex; align-items:center; gap:.55rem; margin-bottom:.4rem; } .nodata-card .bc-title{ color:var(--text-sub); } .nodata-card .nd-msg{ font-family:var(--mono); font-size:.74rem; color:var(--text-micro); letter-spacing:.03em; } .nodata-chip{ display:inline-flex; align-items:center; gap:.3rem; font-family:var(--mono); font-size:.64rem; color:var(--text-micro); border:1px dashed var(--border-2); border-radius:6px; padding:.2rem .5rem; } /* ===== 쉬운 말 캡션 (데이터 저널리즘 톤) ===== */ .easy-caption{ font-size:.7rem; color:var(--text-micro); line-height:1.5; } /* ===== 브리핑 본문 표 (마크다운 테이블 렌더) ===== */ .brief-table-wrap{ overflow-x:auto; margin:.65rem 0; border:1px solid var(--border); border-radius:10px; } .brief-table{ width:100%; border-collapse:collapse; font-size:.82rem; } .brief-table th{ font-family:var(--mono); font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-sub); text-align:left; padding:.45rem .7rem; background:color-mix(in srgb,var(--accent) 8%,transparent); border-bottom:1px solid var(--border-2); white-space:nowrap; } .brief-table td{ padding:.45rem .7rem; border-bottom:1px solid var(--border); color:var(--text); vertical-align:top; } .brief-table td:nth-child(n+2){ font-family:var(--mono); font-size:.8rem; } .brief-table tbody tr:last-child td{ border-bottom:none; } .brief-table tbody tr:hover td{ background:rgba(255,255,255,0.02); } /* ============================================================ 브리핑 v3 — 강조 체계(★·==마커==) · TODAY 콜아웃 · 미수집 레이더 ============================================================ */ /* ==마커== 형광펜 하이라이트 (--accent 기반, verdict 색 금지) */ .mark{ background:linear-gradient(180deg, transparent 0 55%, color-mix(in srgb,var(--accent) 24%,transparent) 55% 92%, transparent 92%); box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:0 .12em; color:var(--text); border-radius:2px; } /* ★ 오늘 꼭 볼 것 — TODAY 콜아웃 (결론 1초존) */ .today-callout{ display:flex; gap:.8rem; align-items:flex-start; background:var(--panel); border:1px solid var(--border-2); border-left:3px solid var(--strip,var(--accent)); border-radius:14px; padding:1rem 1.2rem; margin:.2rem 0 1rem; position:relative; overflow:hidden; } .today-callout::after{ content:"오늘 꼭 볼 것"; position:absolute; top:.7rem; right:1rem; font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; color:var(--text-micro); } .tc-star{ color:var(--warn-yellow); font-size:1.3rem; line-height:1.2; flex:0 0 auto; } .tc-body{ min-width:0; } .tc-text{ font-size:1.06rem; font-weight:600; line-height:1.55; color:var(--text); } .tc-text .mark{ font-weight:700; } .stance-badge{ display:inline-block; font-family:var(--mono); font-size:.64rem; font-weight:700; letter-spacing:.05em; padding:.2rem .55rem; border-radius:6px; margin-bottom:.45rem; color:var(--strip,var(--accent)); background:color-mix(in srgb,var(--strip,var(--accent)) 15%,transparent); border:1px solid color-mix(in srgb,var(--strip,var(--accent)) 30%,transparent); } /* 본문 ★ 앵커 문장 */ .key-line{ position:relative; display:flex; gap:.5rem; align-items:flex-start; padding:.5rem .7rem; border-left:3px solid var(--warn-yellow); background:color-mix(in srgb,var(--accent) 6%,transparent); border-radius:0 8px 8px 0; margin:.5rem 0; } .key-line .kl-star{ color:var(--warn-yellow); flex:0 0 auto; font-size:.95rem; line-height:1.5; } .key-line .kl-text{ font-weight:600; color:var(--text); } /* 미수집 레이더 (최하단, NO DATA 통합) */ .coverage{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.9rem 1.1rem; margin:.8rem 0; } .coverage .cv-head{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-sub); margin-bottom:.55rem; } .coverage .cv-head::before{ content:"// "; color:var(--accent); } .coverage .cv-chips{ display:flex; flex-wrap:wrap; gap:.4rem; } /* 날짜갭 경고 스트립 (거시-미시 시점차) */ .date-gap{ display:flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:600; color:var(--warn-yellow); background:var(--warn-yellow-bg); border:1px solid color-mix(in srgb,var(--warn-yellow) 28%,transparent); border-radius:8px; padding:.45rem .7rem; margin-bottom:1rem; } /* ============================================================ 위기 ↔ 기회 스펙트럼 (시장 체온) + 가격 30일 추세 ============================================================ */ .market-temp{ background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 100%,transparent), var(--bg)); border:1px solid var(--border-2); border-radius:16px; padding:1.2rem 1.4rem; margin-bottom:1rem; position:relative; overflow:hidden; } .market-temp::after{ content:"MARKET TEMP"; position:absolute; top:.85rem; right:1.1rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--text-micro); } .mt-head{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-bottom:.85rem; } .mt-title{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-sub); } .mt-verdict{ font-size:1.2rem; font-weight:800; letter-spacing:-0.01em; } .mt-mixed{ font-family:var(--mono); font-size:.62rem; font-weight:700; color:var(--warn-yellow); background:var(--warn-yellow-bg); border:1px solid color-mix(in srgb,var(--warn-yellow) 30%,transparent); border-radius:6px; padding:.15rem .45rem; } .mt-stance{ font-family:var(--mono); font-size:.62rem; font-weight:600; color:var(--text-sub); border:1px solid var(--border); border-radius:6px; padding:.15rem .45rem; } /* 전환 감지: 직전 대비 체온 변화 (관찰 표기) */ .mt-delta{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 0; padding:.55rem .75rem; border-radius:9px; font-size:.84rem; background:var(--card); border:1px solid var(--border); } .mt-delta .md-arrow{ font-family:var(--mono); font-weight:800; font-size:.95rem; color:var(--text-sub); } .mt-delta .md-main{ color:var(--text); } .mt-delta .md-main b{ font-weight:700; } .mt-delta .md-trend{ display:inline-flex; align-items:center; } .mt-delta .md-spark{ width:64px; height:18px; } .mt-delta .md-spark polyline{ fill:none; stroke:var(--text-sub); stroke-width:1.4; } .mt-delta .md-note{ margin-left:auto; font-family:var(--mono); font-size:.6rem; color:var(--text-micro); white-space:nowrap; } .mt-delta.risk{ border-color:color-mix(in srgb,var(--v-tight) 38%,var(--border)); background:color-mix(in srgb,var(--v-tight) 7%,var(--card)); } .mt-delta.risk .md-arrow{ color:var(--v-tight); } .mt-delta.opp{ border-color:color-mix(in srgb,var(--v-ease) 30%,var(--border)); } .mt-delta.opp .md-arrow{ color:var(--v-ease); } .mt-delta.flat .md-arrow{ color:var(--text-sub); } .mt-delta.none{ color:var(--text-sub); font-size:.78rem; background:transparent; border-style:dashed; } /* 위기 트립와이어 상태줄 (브리핑 스펙트럼 카드) */ .mt-trip{ display:flex; align-items:center; gap:.45rem; margin:.6rem 0 0; padding:.45rem .65rem; border-radius:8px; font-size:.78rem; border:1px solid var(--border); } .mt-trip .tw-ico{ flex:0 0 auto; } .mt-trip.ok{ color:var(--text-sub); background:color-mix(in srgb,var(--v-ease) 5%,var(--card)); border-color:color-mix(in srgb,var(--v-ease) 22%,var(--border)); } .mt-trip.watch{ color:var(--warn-yellow); background:var(--warn-yellow-bg); border-color:color-mix(in srgb,var(--warn-yellow) 32%,transparent); font-weight:600; } .mt-trip.alert{ color:var(--v-tight); background:color-mix(in srgb,var(--v-tight) 9%,var(--card)); border-color:color-mix(in srgb,var(--v-tight) 42%,transparent); font-weight:700; } /* 전광판 위기↔기회 미러 (index.html — 브리핑 체온을 첫 화면에 직답) */ .temp-mirror{ display:block; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:.9rem 1rem; margin:0 0 1.1rem; transition:border-color .15s; } .temp-mirror:hover{ border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); } .temp-mirror:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .temp-mirror .tm-head{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; } .temp-mirror .tm-title{ font-family:var(--mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-sub); } .temp-mirror .tm-verdict{ font-size:1.05rem; font-weight:800; letter-spacing:-0.01em; } .temp-mirror .tm-more{ margin-left:auto; font-family:var(--mono); font-size:.66rem; font-weight:600; color:var(--accent); } .temp-mirror .tm-delta{ font-family:var(--mono); font-size:.64rem; font-weight:700; border-radius:6px; padding:.15rem .5rem; border:1px solid var(--border); color:var(--text-sub); } .temp-mirror .tm-delta.risk{ color:var(--v-tight); border-color:color-mix(in srgb,var(--v-tight) 40%,transparent); background:color-mix(in srgb,var(--v-tight) 8%,transparent); } .temp-mirror .tm-delta.opp{ color:var(--v-ease); border-color:color-mix(in srgb,var(--v-ease) 35%,transparent); } .temp-mirror .tm-delta.flat{ color:var(--text-sub); } .temp-mirror .tm-trip{ font-family:var(--mono); font-size:.64rem; font-weight:700; color:var(--v-tight); border-radius:6px; padding:.15rem .5rem; border:1px solid color-mix(in srgb,var(--v-tight) 42%,transparent); background:color-mix(in srgb,var(--v-tight) 9%,transparent); } /* 전광판 '체온 추가 근거' 섹션 안내문 */ .aux-note{ font-size:.78rem; line-height:1.55; color:var(--text-sub); margin:-.4rem 0 .8rem; } .aux-note b{ color:var(--text); font-weight:700; } /* ── 유동성 인과 지도 (학습 레이어) ── */ .liqmap{ margin-top:.2rem; } .lm-eq{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem .5rem; padding:.85rem .7rem; background:var(--card); border:1px solid var(--border); border-radius:12px; margin:.2rem 0 .6rem; } .lm-eq-res{ font-weight:800; color:var(--text); font-size:1.02rem; } .lm-op{ color:var(--text-sub); font-weight:700; font-size:1.05rem; } .lm-term{ font-weight:700; font-size:.92rem; padding:.2rem .55rem; border-radius:7px; border:1px solid var(--border); } .lm-term.plus{ color:var(--v-ease); border-color:color-mix(in srgb,var(--v-ease) 45%,var(--border)); background:color-mix(in srgb,var(--v-ease) 12%,var(--card)); } .lm-term.minus{ color:var(--v-tight); border-color:color-mix(in srgb,var(--v-tight) 45%,var(--border)); background:color-mix(in srgb,var(--v-tight) 12%,var(--card)); } .lm-eq-easy{ font-size:.82rem; line-height:1.6; color:var(--text-sub); margin:0 0 1rem; } .lm-eq-easy b{ color:var(--text); font-weight:700; } .lm-flow{ display:flex; align-items:stretch; gap:.55rem; flex-wrap:wrap; } .lm-inputs{ display:flex; flex-direction:column; gap:.5rem; flex:1 1 200px; min-width:170px; } .lm-mid{ display:flex; flex-direction:column; gap:.5rem; flex:1 1 190px; min-width:160px; justify-content:center; } .lm-out{ display:flex; flex:1 1 150px; min-width:140px; align-items:center; } .lm-conv{ display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--accent); font-size:1.5rem; flex:0 0 auto; } .lm-conv small{ font-size:.58rem; color:var(--text-sub); font-family:var(--mono); } .lm-node{ background:var(--card); border:1px solid var(--border); border-left:3px solid var(--border); border-radius:10px; padding:.55rem .7rem; } .lm-node.plus{ border-left-color:var(--v-ease); } .lm-node.minus{ border-left-color:var(--v-tight); } .lm-node.neutral{ border-left-color:var(--accent); } .lm-mid .lm-node{ background:color-mix(in srgb,var(--accent) 8%,var(--card)); } .lm-out .lm-node{ width:100%; } .lm-n-head{ display:flex; align-items:center; gap:.35rem; font-weight:800; color:var(--text); font-size:.94rem; } .lm-sign{ font-family:var(--mono); font-weight:800; min-width:1rem; text-align:center; } .lm-node.plus .lm-sign{ color:var(--v-ease); } .lm-node.minus .lm-sign{ color:var(--v-tight); } .lm-n-role{ font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; color:var(--text-sub); margin-top:.12rem; } .lm-n-easy{ font-size:.76rem; line-height:1.5; color:var(--text-sub); margin-top:.3rem; } .lm-today{ display:inline-flex; align-items:center; gap:.2rem; margin-top:.45rem; font-size:.68rem; font-weight:700; padding:.12rem .42rem; border-radius:20px; border:1px solid var(--border); } .lm-today.ease{ color:var(--v-ease); border-color:color-mix(in srgb,var(--v-ease) 40%,var(--border)); } .lm-today.tight{ color:var(--v-tight); border-color:color-mix(in srgb,var(--v-tight) 40%,var(--border)); } .lm-today.neutral,.lm-today.context{ color:var(--text-sub); } .lm-sofr{ font-size:.74rem; line-height:1.5; color:var(--text-sub); background:var(--card); border:1px dashed var(--border); border-radius:9px; padding:.45rem .6rem; } .lm-sofr b{ color:var(--text); } .lm-nuance{ margin:1rem 0 .3rem; padding:.7rem .85rem; border-radius:10px; background:color-mix(in srgb,var(--accent) 7%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-left:3px solid var(--accent); font-size:.84rem; line-height:1.62; color:var(--text-sub); } .lm-nuance-t{ font-weight:800; color:var(--text); margin-bottom:.25rem; font-size:.88rem; } .lm-nuance b{ color:var(--text); font-weight:700; } .lm-myth{ margin:.7rem 0 .3rem; border:1px solid var(--border); border-radius:9px; background:var(--card); overflow:hidden; } .lm-myth summary{ cursor:pointer; padding:.55rem .75rem; font-weight:700; font-size:.82rem; color:var(--warn-yellow); list-style:none; } .lm-myth summary::-webkit-details-marker{ display:none; } .lm-myth summary::before{ content:"▸ "; } .lm-myth[open] summary::before{ content:"▾ "; } .lm-myth ul{ margin:0; padding:.1rem 1.1rem .7rem 1.4rem; } .lm-myth li{ font-size:.79rem; line-height:1.58; color:var(--text-sub); margin:.42rem 0; } .lm-myth li b{ color:var(--text); } .lm-foot{ font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; color:var(--text-micro); margin:.6rem 0 0; } @media (max-width:560px){ .lm-flow{ flex-direction:column; align-items:stretch; } .lm-conv{ transform:rotate(90deg); padding:.15rem 0; } } /* ── 리스크 레이더 ── */ .rw-head{ border-radius:14px; padding:1.1rem 1.2rem; margin:.2rem 0 .9rem; border:1px solid var(--border); background:var(--card); position:relative; overflow:hidden; } .rw-head::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; } .rw-head.tight::before{ background:var(--v-tight); } .rw-head.warn::before{ background:var(--warn-yellow); } .rw-head.ease::before{ background:var(--v-ease); } .rw-head.tight{ background:color-mix(in srgb,var(--v-tight) 8%,var(--card)); } .rw-head.warn{ background:color-mix(in srgb,var(--warn-yellow) 8%,var(--card)); } .rw-head.ease{ background:color-mix(in srgb,var(--v-ease) 8%,var(--card)); } .rw-badge{ display:flex; align-items:center; gap:.5rem; } .rw-ico{ font-size:1.5rem; } .rw-lvl{ font-size:1.45rem; font-weight:800; letter-spacing:-.01em; color:var(--text); } .rw-head.tight .rw-lvl{ color:var(--v-tight); } .rw-head.warn .rw-lvl{ color:var(--warn-yellow); } .rw-head.ease .rw-lvl{ color:var(--v-ease); } .rw-count{ font-family:var(--mono); font-size:.8rem; color:var(--text-sub); margin-top:.45rem; } .rw-count b{ color:var(--text); font-size:1.05rem; } .rw-desc{ font-size:.88rem; color:var(--text-sub); margin:.4rem 0 0; line-height:1.5; } .rw-comment{ background:color-mix(in srgb,var(--accent) 7%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border)); border-left:3px solid var(--accent); border-radius:10px; padding:.7rem .85rem; font-size:.9rem; line-height:1.62; color:var(--text-sub); margin:0 0 1.1rem; } .rw-comment b{ color:var(--text); font-weight:700; } .wlist{ display:flex; flex-direction:column; gap:.5rem; } .wrow{ display:flex; gap:.6rem; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:.6rem .75rem; } .wrow.on{ border-color:color-mix(in srgb,var(--v-tight) 40%,var(--border)); background:color-mix(in srgb,var(--v-tight) 6%,var(--card)); } .wdot{ font-size:1rem; line-height:1.4; flex:0 0 auto; } .wrow.on .wdot{ color:var(--v-tight); } .wrow.off .wdot{ color:var(--text-micro); } .wlabel{ font-weight:800; font-size:.92rem; color:var(--text); } .wrow.off .wlabel{ color:var(--text-sub); } .wdetail{ font-size:.8rem; line-height:1.55; color:var(--text-sub); margin-top:.2rem; } .rgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.7rem; } .rc{ background:var(--card); border:1px solid var(--border); border-radius:11px; padding:.7rem .8rem; min-width:0; } .rc-top{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; } .rc-label{ font-weight:700; font-size:.86rem; color:var(--text); } .rc-health{ font-family:var(--mono); font-size:.58rem; color:var(--warn-yellow); border:1px solid var(--border); border-radius:5px; padding:.05rem .3rem; } .rc-val{ font-size:1.35rem; font-weight:800; letter-spacing:-.01em; color:var(--text); margin:.25rem 0 .1rem; } .rc-arrow{ font-size:.9rem; font-weight:700; } .rc-arrow.up{ color:var(--v-ease); } .rc-arrow.down{ color:var(--v-tight); } .rc-arrow.flat{ color:var(--text-sub); } .rc-sub{ font-size:.78rem; color:var(--text-sub); line-height:1.5; } .rc-sub b{ color:var(--text); } .rc-note{ font-size:.72rem; color:var(--text-micro); line-height:1.5; margin-top:.45rem; padding-top:.4rem; border-top:1px solid var(--border); } .rc .spark{ height:28px; width:100%; margin:.4rem 0 .1rem; } .rc .spark polyline{ fill:none; stroke:var(--accent); stroke-width:1.5; } .pill{ display:inline-block; font-size:.68rem; font-weight:700; padding:.1rem .42rem; border-radius:20px; border:1px solid var(--border); color:var(--text-sub); } .pill.tight{ color:var(--v-tight); border-color:color-mix(in srgb,var(--v-tight) 40%,var(--border)); background:color-mix(in srgb,var(--v-tight) 8%,var(--card)); } .warn-t{ color:var(--warn-yellow); font-weight:700; } .rsrc{ font-size:.7rem; color:var(--text-micro); line-height:1.6; margin:1.3rem 0 0; } .rsrc b{ color:var(--text-sub); } /* 포지션 포스처 */ .posture{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.85rem 1rem; margin:0 0 1.1rem; } .ps-h{ display:flex; align-items:center; gap:.5rem; font-weight:800; color:var(--text); font-size:.98rem; margin-bottom:.6rem; } .ps-tag{ font-family:var(--mono); font-size:.58rem; letter-spacing:.05em; color:var(--text-sub); border:1px solid var(--border); border-radius:20px; padding:.1rem .45rem; } .ps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.5rem; } .ps-it{ background:color-mix(in srgb,var(--accent) 5%,var(--card)); border:1px solid var(--border); border-radius:9px; padding:.5rem .65rem; min-width:0; } .ps-it.ps-wide{ grid-column:1 / -1; } .ps-k{ display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-sub); margin-bottom:.2rem; } .ps-v{ display:block; font-size:.86rem; font-weight:700; color:var(--text); line-height:1.45; } .ps-disc{ font-size:.7rem; color:var(--text-micro); line-height:1.55; margin-top:.6rem; } /* ── 리스크 챗봇 ── */ .chat-wrap{ display:flex; flex-direction:column; gap:.7rem; } .chat-msgs{ display:flex; flex-direction:column; gap:.6rem; min-height:230px; max-height:56vh; overflow-y:auto; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:.9rem; } .cmsg{ max-width:88%; padding:.6rem .8rem; border-radius:13px; font-size:.9rem; line-height:1.62; } .cmsg.user{ align-self:flex-end; background:color-mix(in srgb,var(--accent) 16%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border)); color:var(--text); border-bottom-right-radius:4px; } .cmsg.bot{ align-self:flex-start; background:color-mix(in srgb,var(--text) 4%,var(--card)); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:4px; } .cmsg.bot strong{ color:var(--text); font-weight:700; } .cmsg.bot.err{ border-color:color-mix(in srgb,var(--warn-red) 45%,var(--border)); color:var(--warn-red); } .cmsg.thinking{ color:var(--text-sub); } .dots span{ animation:blink-dots 1.2s infinite both; } .dots span:nth-child(2){ animation-delay:.2s; } .dots span:nth-child(3){ animation-delay:.4s; } @keyframes blink-dots{ 0%,80%,100%{ opacity:.2; } 40%{ opacity:1; } } /* blink(LIVE 도트)와 이름 충돌 해소 */ .chat-sugg{ display:flex; flex-wrap:wrap; gap:.4rem; } .chat-sugg button{ font-size:.76rem; color:var(--text-sub); background:var(--card); border:1px solid var(--border); border-radius:20px; padding:.3rem .65rem; cursor:pointer; } .chat-sugg button:hover{ border-color:var(--accent); color:var(--text); } .chat-input{ display:flex; gap:.5rem; } .chat-input input{ flex:1; min-width:0; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:.6rem .8rem; color:var(--text); font-size:.92rem; } .chat-input input:focus{ outline:2px solid var(--accent); outline-offset:1px; } .chat-input .btn{ flex:0 0 auto; } .chat-foot{ font-size:.72rem; color:var(--text-micro); line-height:1.55; margin:.1rem 0 0; } .chat-foot b{ color:var(--text-sub); } .chat-foot code{ background:var(--card); border:1px solid var(--border); border-radius:4px; padding:.05rem .3rem; font-size:.92em; } .chat-cta{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin:1.4rem 0 .2rem; padding:.8rem 1rem; background:color-mix(in srgb,var(--accent) 9%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 32%,var(--border)); border-radius:13px; } .chat-cta:hover{ background:color-mix(in srgb,var(--accent) 15%,var(--card)); } .cc-ico{ font-size:1.5rem; flex:0 0 auto; } .cc-txt{ display:flex; flex-direction:column; gap:.15rem; min-width:0; } .cc-txt b{ color:var(--text); font-size:.94rem; font-weight:800; } .cc-txt small{ color:var(--text-sub); font-size:.74rem; line-height:1.45; } .cc-arr{ margin-left:auto; color:var(--accent); font-size:1.2rem; flex:0 0 auto; } .mt-bar{ position:relative; height:14px; border-radius:7px; overflow:hidden; display:flex; } .mt-bar span{ flex:1; } .mt-needle{ position:absolute; top:-5px; width:3px; height:24px; background:var(--text); border-radius:2px; box-shadow:0 0 6px rgba(255,255,255,.6); transform:translateX(-50%); } .mt-labels{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.56rem; color:var(--text-sub); margin-top:.5rem; } .mt-comps{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem; } .mt-comp{ flex:1 1 140px; background:var(--card); border:1px solid var(--border); border-radius:9px; padding:.5rem .65rem; min-width:0; } .mt-comp .c-k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-sub); } .mt-comp .c-v{ font-size:.8rem; font-weight:700; margin-top:.18rem; line-height:1.35; } .mt-cap{ margin-top:.85rem; font-size:.72rem; color:var(--text-micro); line-height:1.55; } .mt-cap b{ color:var(--text-sub); } /* 미시 칩 — 30일 추세 */ .mc-trend{ font-family:var(--mono); font-size:.66rem; font-weight:700; margin-top:.2rem; } .mc-trend.up{ color:var(--v-ease); } .mc-trend.down{ color:var(--v-tight); } .mc-trend.flat{ color:var(--text-sub); } .mc-spark{ height:22px; margin-top:.35rem; } .mc-spark.pxup polyline{ stroke:var(--v-ease); } .mc-spark.pxdown polyline{ stroke:var(--v-tight); } /* ============================================================ 브리핑 섹션 네비 — 스티키 앵커칩 바 + 플로팅 목차(전부 보임, 숨김 0) ============================================================ */ html{ scroll-behavior:smooth; } .brief-card, .nodata-card{ scroll-margin-top:102px; } .brief-nav{ position:sticky; top:42px; z-index:40; display:flex; gap:.4rem; overflow-x:auto; scroll-snap-type:x proximity; margin:0 -1rem .9rem; padding:.5rem 1rem; background:color-mix(in srgb,var(--bg) 84%,transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--border); } .brief-nav::-webkit-scrollbar{ display:none; } .brief-chip{ flex:0 0 auto; scroll-snap-align:start; text-decoration:none; font-family:var(--mono); font-size:.84rem; letter-spacing:.01em; color:var(--text-sub); background:var(--card); border:1px solid var(--border); border-radius:999px; padding:.44rem .95rem; white-space:nowrap; transition:.15s; } .brief-chip:hover{ border-color:var(--border-2); color:var(--text); } .brief-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .brief-chip .cn{ color:var(--text-micro); margin-right:.34rem; font-weight:700; } .brief-chip.is-active{ color:var(--text); border-color:color-mix(in srgb,var(--accent) 55%,transparent); background:color-mix(in srgb,var(--accent) 12%,transparent); } .brief-chip.is-active .cn{ color:var(--accent); } .brief-fab{ position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:60; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; cursor:pointer; font-family:var(--mono); background:color-mix(in srgb,var(--panel) 90%,var(--accent)); color:var(--text); border:1px solid var(--border-2); box-shadow:0 6px 20px rgba(0,0,0,.45); transition:opacity .2s, transform .15s; } .brief-fab:hover{ transform:translateY(-2px); } .brief-fab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .brief-fab.faded{ opacity:.42; } .brief-sheet-ov{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:.2s; } .brief-sheet-ov.open{ opacity:1; visibility:visible; } .brief-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:61; background:var(--panel); border-top:1px solid var(--border-2); border-radius:16px 16px 0 0; padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .22s ease; max-height:72vh; overflow-y:auto; } .brief-sheet.open{ transform:translateY(0); } .brief-sheet .bs-head{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-sub); margin-bottom:.5rem; } .brief-sheet .bs-item{ display:flex; gap:.6rem; align-items:center; padding:.7rem .4rem; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none; font-size:.9rem; } .brief-sheet .bs-item:last-child{ border-bottom:none; } .brief-sheet .bs-item.is-active{ color:var(--accent); } .brief-sheet .bs-item .bs-n{ font-family:var(--mono); font-size:.72rem; color:var(--text-micro); flex:0 0 auto; width:1.3em; text-align:center; } .brief-sheet .bs-top{ color:var(--text-sub); } @media (max-width:560px){ .brief-nav{ margin:0 -.85rem .8rem; padding:.45rem .85rem; } .bc-title{ font-size:1.1rem; } .brief-card.hero .bc-body{ font-size:1.14rem; } .bc-sub{ font-size:.96rem; } } /* ============================================================ 종목 선정 화면 (stocks.html) — 프레임 카드 · 후보 평가 입력 ============================================================ */ .stock-name-row{ display:flex; align-items:center; gap:.6rem; margin:.2rem 0 .9rem; flex-wrap:wrap; } .sn-label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-sub); flex:0 0 auto; } .sn-input{ flex:1 1 220px; min-width:0; background:var(--card); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:.9rem; padding:.5rem .7rem; font-family:inherit; } .sn-input::placeholder{ color:var(--text-micro); } .sn-input:focus{ outline:none; border-color:color-mix(in srgb,var(--accent) 50%,var(--border)); } .psec-foot{ margin:.7rem 0 0; font-size:.84rem; line-height:1.6; color:var(--text-sub); } .psec-foot.ok{ color:var(--v-ease); } .psec-foot.mid{ color:var(--warn-yellow); } .psec-foot.low{ color:var(--text-sub); } .roadmap-tag{ font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.04em; color:var(--warn-yellow); background:var(--warn-yellow-bg); border:1px solid color-mix(in srgb,var(--warn-yellow) 30%,transparent); border-radius:6px; padding:.1rem .4rem; margin-left:.5rem; vertical-align:middle; } .frame-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:.7rem; } .frame-card{ display:flex; gap:.7rem; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.85rem .9rem; } .frame-card .bc-art{ width:38px; height:38px; } .frame-card .bc-art svg{ width:23px; height:23px; } .frame-card .fc-body{ min-width:0; } .frame-card h3{ margin:.1rem 0 .35rem; font-size:1.0rem; font-weight:700; color:var(--text); letter-spacing:-0.01em; } .frame-card p{ margin:0; font-size:.86rem; line-height:1.6; color:var(--text-sub); } @media (max-width:560px){ .frame-grid{ grid-template-columns:1fr; } } /* ===== 돈의 길목 동향판 (자산군 상대강도 + 길목 지도) ===== */ .flow-tag{ font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.04em; color:var(--text-sub); background:var(--card); border:1px solid var(--border); border-radius:6px; padding:.1rem .45rem; margin-left:.5rem; vertical-align:middle; } .flow-board{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.9rem 1rem; margin:.2rem 0 1rem; } .flow-board .fb-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.75rem; } .flow-board .fb-title{ font-size:.92rem; font-weight:700; color:var(--text); } .flow-board .fb-asof{ font-family:var(--mono); font-size:.62rem; color:var(--text-micro); white-space:nowrap; } .flow-board .fb-rows{ display:flex; flex-direction:column; gap:.55rem; } .flow-row{ display:grid; grid-template-columns:6.4rem 1fr 3.3rem; grid-template-areas:"name track val" "note note note"; align-items:center; gap:.15rem .6rem; } .flow-row .fr-name{ grid-area:name; font-size:.82rem; font-weight:600; color:var(--text); display:flex; flex-direction:column; line-height:1.2; } .flow-row .fr-kind{ font-family:var(--mono); font-size:.55rem; color:var(--text-micro); font-weight:400; margin-top:1px; } .flow-row .fr-track{ grid-area:track; position:relative; height:12px; background:color-mix(in srgb,var(--text) 7%,transparent); border-radius:999px; } .flow-row .fr-track::before{ content:""; position:absolute; left:50%; top:1px; bottom:1px; width:1px; background:var(--border-2); transform:translateX(-50%); } .flow-row .fr-bar{ position:absolute; top:0; bottom:0; min-width:2px; transition:width .3s var(--ease-out,ease); } .flow-row .fr-bar.up{ background:var(--v-ease); border-radius:0 999px 999px 0; } .flow-row .fr-bar.down{ background:var(--v-tight); border-radius:999px 0 0 999px; } .flow-row .fr-bar.flat{ background:var(--text-sub); border-radius:999px; } .flow-row .fr-val{ grid-area:val; font-family:var(--mono); font-size:.78rem; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; } .flow-row .fr-val.up{ color:var(--v-ease); } .flow-row .fr-val.down{ color:var(--v-tight); } .flow-row .fr-val.flat{ color:var(--text-sub); } .flow-row .fr-note{ grid-area:note; font-size:.7rem; color:var(--text-sub); line-height:1.4; } .flow-row .fr-90{ font-family:var(--mono); color:var(--text-micro); font-weight:600; } .flow-board .fb-foot{ margin-top:.85rem; padding-top:.6rem; border-top:1px solid var(--border); font-size:.74rem; line-height:1.55; color:var(--text-sub); } .leadmap{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.9rem 1rem; } .leadmap .lm-head{ font-size:.92rem; font-weight:700; color:var(--text); margin-bottom:.7rem; } .leadmap .lm-sub{ font-size:.74rem; font-weight:400; color:var(--text-sub); } .leadmap .lm-chain{ padding:.6rem 0; border-bottom:1px solid var(--border); } .leadmap .lm-chain:last-of-type{ border-bottom:none; padding-bottom:.2rem; } .leadmap .lm-theme{ font-family:var(--mono); font-size:.64rem; font-weight:700; letter-spacing:.06em; color:var(--accent); margin-bottom:.45rem; text-transform:uppercase; } .leadmap .lm-steps{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .15rem; } .leadmap .lm-step{ font-size:.78rem; color:var(--text); background:color-mix(in srgb,var(--accent) 9%,var(--panel)); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); border-radius:8px; padding:.3rem .55rem; white-space:nowrap; } .leadmap .lm-arrow{ color:var(--text-micro); font-size:1rem; padding:0 .15rem; } .leadmap .lm-note{ font-size:.72rem; color:var(--text-sub); line-height:1.5; margin-top:.45rem; } .leadmap .lm-foot{ margin-top:.75rem; padding-top:.6rem; border-top:1px solid var(--border); font-size:.74rem; line-height:1.55; color:var(--text-sub); } .leadmap .lm-line{ display:flex; align-items:baseline; gap:.45rem; font-size:.74rem; color:var(--text-sub); margin-top:.4rem; line-height:1.45; } .leadmap .lm-tag{ flex:0 0 auto; font-family:var(--mono); font-size:.55rem; font-weight:700; letter-spacing:.03em; border-radius:5px; padding:.1rem .4rem; } .leadmap .lm-tag.etf{ color:var(--v-ease); background:color-mix(in srgb,var(--v-ease) 13%,transparent); } .leadmap .lm-tag.rep{ color:var(--text-sub); background:var(--card); border:1px solid var(--border); } @media (max-width:560px){ .flow-row{ grid-template-columns:4.8rem 1fr 2.9rem; } } /* AI 길목 판단 카드 (Claude가 판단해 알려주는 헤드라인) */ .ai-lead{ margin:.2rem 0 1rem; } .ai-lead-card{ background:color-mix(in srgb,var(--accent) 7%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border)); border-radius:12px; padding:.85rem 1rem; } .ai-lead-card.empty{ background:var(--card); border-style:dashed; border-color:var(--border); } .ai-lead-card .al-head{ display:flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:.45rem; } .ai-lead-card .al-ico{ font-size:1rem; } .ai-lead-card .al-asof{ margin-left:auto; font-family:var(--mono); font-size:.6rem; font-weight:400; color:var(--text-micro); } .ai-lead-card .al-body{ font-size:.95rem; line-height:1.62; color:var(--text); } .ai-lead-card.empty .al-body{ font-size:.86rem; color:var(--text-sub); } .ai-lead-card .al-more{ display:inline-block; margin-top:.5rem; font-family:var(--mono); font-size:.66rem; font-weight:600; color:var(--accent); text-decoration:none; } .ai-lead-card .al-foot{ margin-top:.5rem; padding-top:.45rem; border-top:1px solid var(--border); font-size:.66rem; color:var(--text-micro); line-height:1.4; } /* ===== 접근성: 모션 저감 ===== */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .brief-sheet{ transition:none; } .live .dot{ animation:none; } .light .wx .bolt{ animation:none; } *{ transition-duration:.01ms !important; } } /* ── v2.1 모바일 하단 고정 탭바 (≤560px) — 폰 엄지 내비. ⚠ 반드시 파일 맨끝: .home-nav 기본(sticky) 정의를 이겨야 한다 (동일 특이도 = 뒤가 승) ── */ @media (max-width:560px){ .home-nav{ position:fixed; left:0; right:0; bottom:0; top:auto; z-index:50; margin:0; padding:.4rem .6rem calc(.4rem + env(safe-area-inset-bottom,0px)); background:color-mix(in srgb,var(--panel) 94%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--border); } .home-nav a{ flex:1 1 0; min-height:44px; display:inline-flex; align-items:center; justify-content:center; text-align:center; border-radius:8px; } body:has(.home-nav){ padding-bottom:calc(66px + env(safe-area-inset-bottom,0px)); } /* 탭바 있는 페이지만 */ /* 섹션 헤더: 제목+칩 1줄, 설명은 다음 줄 (좁은 화면 세로 붕괴 방지) */ .grid-head{ flex-wrap:wrap; } .grid-head .count{ flex:1 1 100%; order:9; margin-top:.1rem; letter-spacing:0; } /* 사다리 행 터치 타깃 44px 확보 (오탭 방지 — 탭바 a와 동일 기준) */ .lv > summary{ min-height:44px; align-items:center; } }