/* ============================================================================= AssetPilot — theme.css v0.2.1 2026-09-10 · 「theme v0.2.1 요청서」(7차) 반영판 v0.2 에서 고친 것 (7차 §2 · §3 · §4) 1. 하락 클래스 .dn 을 .down 과 같이 받는다. ▲▼ 규칙 포함 (§2-1) 2. radius 를 합의값 4 · 8 · 12 · 16 · 999 로 되돌린다 (§2-4) 3. 자동 테마 블록에 그림자 셋을 넣는다 (§2-3) 4. 계조 --plot-2~5 를 재조정해 새 표면 위에서 3:1 을 넘긴다 (§3) 5. S4 화면 요소 셋의 모양을 넣는다 (§4) 그대로 둔 것 .glass 는 내비·패널 전용, .ticker 는 표 종목 칸 전용 (7차 §1 확인) 선 색 주의 저장소의 --line-rgb 호출 21곳은 자기 알파를 들고 있다(.35~.95). 이름만 바꾸면 흰색 55~95% 테두리가 된다. 알파도 함께 var(--border-1-a) 로 바꿔야 한다. 치환표 해당 행 비고 참조. 알파 합성 구조 저장소의 rgba 호출 194곳은 rgb(var(--x-rgb) / α) 형태다. 그 구조를 유지하기 위해, 알파와 함께 쓰이는 토큰은 전부 "-rgb" 채널 삼중값을 원본으로 두고 색은 거기서 파생시킨다. 값을 바꿀 때는 -rgb 쪽만 고치면 된다. 기본 테마는 다크. 또는 "light" · "auto". ========================================================================== */ /* ── 다크 (기본) ─────────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { color-scheme: dark; /* 표면 */ --bg-base-rgb: 8 8 10; --bg-raised-rgb: 21 21 24; --bg-overlay-rgb: 28 28 32; --bg-inset-rgb: 24 24 27; --bg-sunk-rgb: 38 38 43; --glass-rgb: 21 21 24; /* 내비·상태 패널 blur 배경 */ --scrim-rgb: 0 0 0; /* 시트 뒤 가림막 */ /* 글자 */ --text-1-rgb: 244 244 246; --text-2-rgb: 165 165 174; --text-3-rgb: 117 117 126; --text-inv-rgb: 8 8 10; /* 선 — α 로 세기를 준다 */ --border-1-rgb: 255 255 255; --border-2-rgb: 255 255 255; --border-1-a: .10; --border-2-a: .06; /* 인터랙션 — 무채. 기존 --accent-rgb(청록 80 210 193)를 대체한다. rgba 호출 194곳 중 83곳이 이 토큰 하나를 쓴다. */ --action-rgb: 244 244 246; --action-hover-rgb: 214 214 220; --action-ink-rgb: 8 8 10; --focus-a: .30; /* 데이터 — 유채색은 여기까지만 (사양 §0) */ --up-rgb: 255 77 77; --down-rgb: 90 162 255; --flat-rgb: 117 117 126; --up-soft-a: .14; --down-soft-a: .14; /* 예외 — 안전장치 경고 램프 한 곳 (결정 5) */ --warn-rgb: 255 179 64; --warn-soft-a: .14; /* 계조 6단 — 분류·차수·배분이 축마다 독립적으로 재사용한다 */ --plot-1-rgb: 244 244 246; --plot-2-rgb: 214 214 221; /* 표면 대비 12.60 / 11.75 */ --plot-3-rgb: 178 178 186; /* 8.65 / 8.06 */ --plot-4-rgb: 142 142 150; /* 5.61 / 5.22 */ --plot-5-rgb: 108 108 116; /* 3.50 / 3.26 */ --plot-6-rgb: 51 51 58; /* 채움 전용. 대비 기준 없음 */ /* 거래 화면 차트 — 가격 칸 선의 불투명도, 보조지표 칸 선 색(pro-chart.js) */ --plot-line-alpha: .55; --study-rsi: #a78bfa; --study-signal: #f5a524; /* 평단선 — 사장님 지시 2026-09-17: 「잘 보이게 노란색」. 유채색을 여기 하나 더 두는 것이라, **안전등의 --warn 을 쓰지 않는다**(결정 5). 평단은 램프가 아니고, 램프 색을 차트가 빌려 쓰면 경고가 흔해진다. */ --chart-avg: #f2c14e; /* 그림자 2종 — 시트와 팝오버에만 */ --shadow-sheet: 0 32px 80px -24px rgb(0 0 0 / .80), 0 8px 24px -12px rgb(0 0 0 / .60); --shadow-pop: 0 10px 30px -16px rgb(0 0 0 / .70); --inner-hi: inset 0 1px 1px rgb(255 255 255 / .06); } /* ── 라이트 ──────────────────────────────────────────────────────────────── */ [data-theme="light"] { color-scheme: light; --bg-base-rgb: 242 242 244; --bg-raised-rgb: 255 255 255; --bg-overlay-rgb: 250 250 251; --bg-inset-rgb: 248 248 250; --bg-sunk-rgb: 237 237 240; --glass-rgb: 255 255 255; --scrim-rgb: 16 16 18; --text-1-rgb: 16 16 18; --text-2-rgb: 85 85 92; --text-3-rgb: 138 138 146; --text-inv-rgb: 255 255 255; --border-1-rgb: 0 0 0; --border-2-rgb: 0 0 0; --border-1-a: .10; --border-2-a: .06; --action-rgb: 16 16 18; --action-hover-rgb: 51 51 58; --action-ink-rgb: 255 255 255; --focus-a: .26; --up-rgb: 200 16 46; --down-rgb: 11 87 200; --flat-rgb: 138 138 146; --up-soft-a: .08; --down-soft-a: .08; --warn-rgb: 138 90 0; --warn-soft-a: .10; --plot-1-rgb: 16 16 18; --plot-2-rgb: 44 44 50; /* 표면 대비 13.88 / 13.30 */ --plot-3-rgb: 78 78 86; /* 8.24 / 7.90 */ --plot-4-rgb: 112 112 120; /* 4.91 / 4.71 */ --plot-5-rgb: 144 144 152; /* 3.17 / 3.04 */ --plot-6-rgb: 224 224 229; /* 채움 전용. 대비 기준 없음 */ /* 밝은 바탕에서는 같은 불투명도가 더 흐려 보인다. 색도 흰 바탕 대비 3:1 위로 (design 20260911-2220: 시그널 약 5.0 · RSI 약 7.1) */ --plot-line-alpha: .7; --study-rsi: #6d28d9; --study-signal: #b45309; /* 밝은 바탕에서 #f2c14e 는 거의 안 보인다 — 같은 노랑을 어둡게(시그널과 같은 방식). */ --chart-avg: #a16207; --shadow-sheet: 0 24px 60px -20px rgb(16 16 18 / .16), 0 8px 24px -12px rgb(16 16 18 / .10); --shadow-pop: 0 8px 24px -12px rgb(16 16 18 / .14); --inner-hi: inset 0 1px 1px rgb(255 255 255 / .90); } /* 여기 있던 「자동」 테마 블록(기기 설정이 밝으면 라이트 값을 덮던 미디어 쿼리)은 2026-09-12 사용자 지시로 지웠다. 테마는 다크 · 라이트 둘뿐이고, 기기 설정은 따라가지 않는다 — 고른 값만 따른다(src/ui/theme.js). 선택자 이름을 여기 그대로 적지 않는다: 규칙이 남아 있는지 세는 검사가 주석도 센다. */ /* ── 파생 색 ─────────────────────────────────────────────────────────────── */ /* 전부 채널값에서 만든다. 값을 바꿀 때는 위의 -rgb 만 고친다. */ :root { --bg-base: rgb(var(--bg-base-rgb)); --bg-raised: rgb(var(--bg-raised-rgb)); --bg-overlay: rgb(var(--bg-overlay-rgb)); --bg-inset: rgb(var(--bg-inset-rgb)); --bg-sunk: rgb(var(--bg-sunk-rgb)); --glass: rgb(var(--glass-rgb) / .72); --scrim: rgb(var(--scrim-rgb) / .56); --text-1: rgb(var(--text-1-rgb)); --text-2: rgb(var(--text-2-rgb)); --text-3: rgb(var(--text-3-rgb)); --text-inv: rgb(var(--text-inv-rgb)); --border-1: rgb(var(--border-1-rgb) / var(--border-1-a)); --border-2: rgb(var(--border-2-rgb) / var(--border-2-a)); --action: rgb(var(--action-rgb)); --action-hover: rgb(var(--action-hover-rgb)); --action-ink: rgb(var(--action-ink-rgb)); --focus-ring: rgb(var(--action-rgb) / var(--focus-a)); --up: rgb(var(--up-rgb)); --down: rgb(var(--down-rgb)); --flat: rgb(var(--flat-rgb)); --up-soft: rgb(var(--up-rgb) / var(--up-soft-a)); --down-soft: rgb(var(--down-rgb) / var(--down-soft-a)); --warn: rgb(var(--warn-rgb)); --warn-soft: rgb(var(--warn-rgb) / var(--warn-soft-a)); --plot-1: rgb(var(--plot-1-rgb)); --plot-2: rgb(var(--plot-2-rgb)); --plot-3: rgb(var(--plot-3-rgb)); --plot-4: rgb(var(--plot-4-rgb)); --plot-5: rgb(var(--plot-5-rgb)); --plot-6: rgb(var(--plot-6-rgb)); } /* ── 타이포 ──────────────────────────────────────────────────────────────── */ /* 고정폭 폰트를 두지 않는다. 한글이 섞인 금액 칸에서 폰트가 갈라진다. */ :root { --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Apple SD Gothic Neo", system-ui, sans-serif; /* 사양값 채택 */ --fs-caption: 12.5px; --fs-label: 13.5px; --fs-body: 15px; --fs-title: 17px; --fs-section: 20px; --fs-figure: 24px; --fs-display: 34px; --fs-hero: clamp(42px, 6.8vw, 88px); /* 400 · 600 · 700 세 단계. 500 은 쓰지 않는다 */ --fw-normal: 400; --fw-semi: 600; --fw-bold: 700; /* 티커 · 머리 숫자 */ --ls-tight: -.028em; --ls-base: -.011em; } /* ── 치수 ────────────────────────────────────────────────────────────────── */ :root { /* radius 5종 — 2차 합의값. v0.2 에서 6/18 로 흘렀던 것을 되돌린다. 4px 을 쓰던 배지·태그가 둥글어지는 문제가 함께 사라진다. */ --r-1: 4px; --r-2: 8px; /* 주력 */ --r-3: 12px; --r-4: 16px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --ease: cubic-bezier(.32,.72,0,1); --dur: 200ms; } /* ── 바탕 ────────────────────────────────────────────────────────────────── */ body { margin: 0; background: var(--bg-base); color: var(--text-1); font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-normal); line-height: 1.6; letter-spacing: var(--ls-base); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } *, *::before, *::after { box-sizing: border-box; } :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: var(--r-1); } ::selection { background: rgb(var(--action-rgb) / .22); } /* ── 숫자 ────────────────────────────────────────────────────────────────── */ .num { font-variant-numeric: tabular-nums; text-align: right; letter-spacing: -.01em; } /* 저장소의 하락 클래스는 .dn 이다. 일부가 매매 규칙의 방향값에서 그대로 나오므로 이름을 바꾸지 않고 규칙을 함께 준다. .down 만 쓰면 내린 쪽에 ▼ 가 붙지 않는다. */ .up { color: var(--up); } .down, .dn { color: var(--down); } .flat { color: var(--flat); } /* 부호 병기 — 흑백 인쇄와 색각 이상 양쪽에 필요 (2차 §1 합의) */ .up::before { content: "▲"; font-size: .78em; margin-right: 2px; } .down::before, .dn::before { content: "▼"; font-size: .78em; margin-right: 2px; } .no-mark::before { content: none; } /* 트리거 칩 등 배경을 쓰는 곳 */ .trig.up { background: var(--up-soft); color: var(--up); } .trig.dn, .trig.down { background: var(--down-soft); color: var(--down); } /* ── 상태 표시 ───────────────────────────────────────────────────────────── */ /* 여기서는 초록을 쓰지 않는다. 정상은 무채, 주의만 경고색 (결정 5 예외 둘: 안전등 --warn · 동기화 칩 --synced/--sync-bad) */ .state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); color: var(--text-2); } .state__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); } .state--ok .state__dot { background: var(--text-2); } .state--warn { color: var(--warn); } .state--warn .state__dot { background: var(--warn); } /* 안전장치 램프 — 사양 §0 의 유일한 예외. 워치독·프록시·일일 대조의 이상 통지에만 쓴다. */ .lamp { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: var(--fw-semi); background: var(--bg-sunk); color: var(--text-2); } .lamp--alert { background: var(--warn-soft); color: var(--warn); } /* ── 표면 ────────────────────────────────────────────────────────────────── */ .surface { background: var(--bg-raised); border: 1px solid var(--border-2); border-radius: var(--r-3); } .surface--sheet { background: var(--bg-raised); border: 1px solid var(--border-1); border-radius: var(--r-4); box-shadow: var(--shadow-sheet); } .surface--pop { background: var(--bg-overlay); border: 1px solid var(--border-1); border-radius: var(--r-3); box-shadow: var(--shadow-pop); } .inset { background: var(--bg-inset); border-radius: var(--r-2); } .scrim { background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .glass { background: var(--glass); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); } /* ── 버튼 ────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; cursor: pointer; font-family: inherit; font-size: var(--fs-label); font-weight: var(--fw-semi); color: var(--text-1); background: transparent; border: 1px solid var(--border-1); border-radius: var(--r-2); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover { background: var(--bg-sunk); } .btn:active { transform: scale(.98); } .btn[disabled] { opacity: .38; pointer-events: none; } .btn--primary { background: var(--action); color: var(--action-ink); border-color: transparent; } .btn--primary:hover { background: var(--action-hover); } .btn--quiet { border-color: transparent; color: var(--text-2); } .btn--quiet:hover { background: var(--bg-sunk); color: var(--text-1); } /* 방향이 곧 데이터인 두 버튼만 유채색 */ .btn--buy { background: var(--up); color: #fff; border-color: transparent; } .btn--sell { background: var(--down); color: #fff; border-color: transparent; } /* ── 표 ──────────────────────────────────────────────────────────────────── */ /* 세로 구분선을 쓰지 않는다. 열은 정렬로 구분한다. */ table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); } thead th { padding: 12px 16px; text-align: left; white-space: nowrap; font-size: var(--fs-label); font-weight: var(--fw-normal); color: var(--text-3); background: var(--bg-overlay); border-bottom: 1px solid var(--border-1); } tbody td { padding: 15px 16px; border-bottom: 1px solid var(--border-2); } tbody tr:last-child td { border-bottom: 0; } tbody tr { transition: background var(--dur) var(--ease); } tbody tr:hover { background: var(--bg-overlay); } th.num, td.num { text-align: right; } .ticker { font-weight: var(--fw-bold); letter-spacing: -.018em; } .ticker small { display: block; font-size: var(--fs-caption); font-weight: var(--fw-normal); color: var(--text-3); letter-spacing: 0; } /* ── 접근성 ──────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================================= 삭제된 토큰 (v0.1 대비) --accent 파랑 #4c8dff → --action (무채). 하락색과 같은 계열이라 경쟁했다 --ok 초록 #3fa66d → 제거. 사양 §0 위반. 정상 상태는 무채로 표시한다. 단 동기화 칩은 별도 토큰(--synced)으로 2026-09-12 부활 — 결정 5 예외 둘 중 하나다(DECISIONS.md 결정 5) --font-num 고정폭 → 제거. 본문 폰트 + tabular-nums 존치 예외 --warn 안전장치 램프 한 곳. 결정 5 에 따라 문서에 명시된 예외 ========================================================================== */ /* ============================================================================= S4 — 회계 통화별 분리로 생긴 화면 요소 (7차 §4) 색 원칙은 그대로. 금액의 등락만 유채색이고 나머지는 무채다. ========================================================================== */ /* ── ① 평가손익의 출처 — 통화별 두 줄 ──────────────────────────────────── */ /* 위계: 합계(24px 700) > 통화 줄(17px 600) > 보조 줄(13.5px 400 무채) 통화가 하나뿐인 투자자는 통화 줄이 하나만 나온다. 그때도 합계는 남긴다. */ .split-sides { display: flex; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--border-2); border-radius: var(--r-3); padding: var(--sp-5); } .split-sides__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border-1); } .split-sides__total-label { font-size: var(--fs-label); color: var(--text-3); } .split-sides__total-value { font-size: var(--fs-figure); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; } .split-side { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-2); } .split-side:last-of-type { border-bottom: 0; } .split-side-head { display: flex; align-items: baseline; gap: var(--sp-2); } .split-side-head__label { font-size: var(--fs-title); font-weight: var(--fw-semi); color: var(--text-1); } /* 수익률은 라벨에 붙는다. 금액과 떨어뜨리면 어느 쪽 수익률인지 흐려진다 */ .split-side-head__rate { font-size: var(--fs-label); font-weight: var(--fw-semi); } .split-side-head__value { margin-left: auto; font-size: var(--fs-title); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } /* 보조 줄 — 미실현 · 실현 · 배당. 무채로 두고 가운뎃점으로 잇는다 */ .split-side__detail { margin-top: 6px; font-size: var(--fs-label); color: var(--text-2); font-variant-numeric: tabular-nums; } .split-side__detail > span + span::before { content: "·"; margin: 0 6px; color: var(--text-3); } /* 환산 금액은 한 단 더 내린다. 원본 통화 금액과 같은 위계로 보이면 안 된다 */ .split-side__conv { color: var(--text-3); } /* 환율 감도 — 손익이 아니다. 등락색을 쓰지 않는다 */ .split-sides__sens { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--bg-inset); border-radius: var(--r-2); font-size: var(--fs-label); color: var(--text-2); } .split-sides__sens strong { color: var(--text-1); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; } .split-sides__sens .up::before, .split-sides__sens .down::before, .split-sides__sens .dn::before { content: none; } /* ── ② 투자원금 — 두 통화 병기 ─────────────────────────────────────────── */ /* 두 금액은 같은 위계다. 어느 쪽이 본체가 아니다. 좁은 폭에서는 "+" 앞에서 끊는다. */ .principal-dual { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); font-size: var(--fs-figure); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; } .principal-dual__plus { color: var(--text-3); font-weight: var(--fw-normal); /* 이 요소 앞에서 줄이 바뀐다 */ flex-basis: auto; } @media (max-width: 420px) { .principal-dual__plus { flex-basis: 100%; height: 0; overflow: visible; } .principal-dual__plus::after { content: ""; } } /* 합산값은 보조 줄로 내린다 */ .principal-dual__sum { margin-top: 6px; font-size: var(--fs-label); font-weight: var(--fw-normal); color: var(--text-3); font-variant-numeric: tabular-nums; } /* ── ③ 보유 표 손익 칸 ─────────────────────────────────────────────────── */ /* 미니 막대를 없앤 자리. 금액과 수익률 한 줄. */ .pl-cell { display: inline-flex; align-items: baseline; gap: var(--sp-2); justify-content: flex-end; font-variant-numeric: tabular-nums; } .pl-cell__amount { font-weight: var(--fw-semi); } .pl-cell__rate { font-size: var(--fs-label); } .pl-cell__rate::before { content: none; } /* 부호는 금액 쪽에만 */ /* 환율 미반영 꼬리표 — 매수일 환율이 원장에 없는 자산. 경고가 아니라 각주다. 경고색을 쓰지 않는다. */ .fx-na { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: var(--sp-2); border-radius: var(--r-1); background: var(--bg-sunk); color: var(--text-3); font-size: var(--fs-caption); font-weight: var(--fw-normal); letter-spacing: 0; white-space: nowrap; } /* ── 도넛 조각 구분 ────────────────────────────────────────────────────── */ /* 계조가 3:1 을 넘더라도 인접 조각끼리는 1.5 안팎이다. 조각 사이에 표면색 선을 넣어 경계를 만든다. */ .donut__seg { stroke: var(--bg-raised); stroke-width: 2; stroke-linejoin: round; } .donut--on-inset .donut__seg { stroke: var(--bg-inset); } /* 범례 점도 같은 규칙을 쓴다 */ .legend__dot { width: 9px; height: 9px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px var(--bg-raised); }