/* =========================================================================== Toss Trading Bot — 공용 디자인 시스템 기존엔 6개 페이지가 각자 :root 토큰과 컴포넌트 CSS를 복붙해 두어(≈225줄 중복) 색 하나 바꾸려면 6곳을 고쳐야 했다. 여기 한 곳으로 통합한다. =========================================================================== */ :root { color-scheme: dark; /* 표면 */ --bg: #0f1115; --card: #181b22; --card-2: #12151c; /* 카드 안의 한 겹 더 들어간 면 */ --line: #262b36; --line-2: #1e222b; /* 텍스트 */ --txt: #e6e9ef; --mut: #8b93a7; /* 강조 */ --accent: #2f6fed; --link: #6fb6ff; /* 등락 — 기본은 한국식(빨강=상승, 파랑=하락). 미국 시장 화면은 로 뒤집는다(아래 참조). */ --up: #ff5c5c; --down: #3da5ff; --long: #2fbd6a; /* 보유/ON */ --flat: #7a7f8c; /* 현금/OFF */ /* 간격 스케일 */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 32px; --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 14px; --r-pill: 999px; } /* 미국 시장 화면: 현지 관습(초록=상승, 빨강=하락)으로 뒤집는다. 페이지마다 색 의미가 달라 헷갈리던 걸, 의도적 선언으로 바꿨다. */ :root[data-market="us"] { --up: #3fb950; --down: #f85149; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--txt); font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } .wrap { max-width: 1040px; margin: 0 auto; padding: var(--s5) var(--s4) 64px; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* ------------------------------------------------------------------ 네비게이션 */ /* 마크업은 app.js 의 renderNav() 가 단일 소스로 생성한다 — 예전엔 페이지마다 탭 순서와 이름('현황' vs '전략 비교')이 달라 위치가 흔들렸다. */ .nav { display: flex; gap: var(--s1); flex-wrap: wrap; margin: 0 0 var(--s4); border-bottom: 1px solid var(--line); } .navtab { padding: 9px 16px; font-size: 14px; color: var(--mut); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .12s ease; } .navtab:hover { color: var(--txt); text-decoration: none; } .navtab.on { color: var(--txt); font-weight: 600; border-bottom-color: var(--accent); } /* ------------------------------------------------------------------ 페이지 헤더 */ .page-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s1); } .page-head h1 { font-size: 20px; margin: 0; letter-spacing: -.2px; } .page-desc { color: var(--mut); font-size: 13px; margin: var(--s1) 0 0; line-height: 1.6; } h2 { font-size: 14px; color: var(--mut); margin: var(--s5) 0 var(--s2); font-weight: 600; } /* ------------------------------------------------------------------ 상태/뱃지 */ .badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); } .badge.dry { background:#23303f; color:#6fb6ff; } .badge.live { background:#3a1f23; color:#ff7a7a; } .badge.long { background:#13341f; color:#5fe39a; } .badge.flat { background:#2a2d35; color:#aab0be; } .status { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0 var(--s4); font-size: 13px; } .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .dot.on { background: var(--long); box-shadow: 0 0 0 3px rgba(47,189,106,.2); } .dot.off { background: var(--flat); } /* ------------------------------------------------------------------ 카드 */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); margin: var(--s4) 0 var(--s2); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); } .card .k { color: var(--mut); font-size: 12px; } .card .v { font-size: 22px; font-weight: 700; margin-top: var(--s1); font-variant-numeric: tabular-nums; letter-spacing: -.3px; } .card .note { color: var(--mut); font-size: 12px; margin-top: 2px; } .cards--wide { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s3); } /* 카드 안에 한 겹 더 들어가는 작은 지표(캔들봇 카드 등) */ .kv { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s2); } .kv .k { color: var(--mut); font-size: 11px; } .kv .v { font-size: 16px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; } /* 섹션 박스(분석 페이지 등) */ .sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s4) var(--s5); margin-top: var(--s4); } .sec h2 { font-size: 15px; color: var(--txt); margin: 0 0 var(--s1); } .sec .hint { color: var(--mut); font-size: 12px; margin-bottom: var(--s3); line-height: 1.5; } .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); } /* ------------------------------------------------------------------ 표 */ table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; font-size: 13px; } th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); } th { color: var(--mut); font-weight: 600; font-size: 12px; } tr:last-child td { border-bottom: none; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tbody tr:hover td { background: #1c2029; } /* 표를 섹션 박스 안에 넣을 땐 테두리/배경을 걷어낸다 */ .sec table { background: none; border: none; border-radius: 0; } .sec th, .sec td { border-bottom: none; border-top: 1px solid var(--line); padding: 7px 6px; text-align: right; } .sec th { border-top: none; font-weight: 500; } .sec td.k, .sec th.k { text-align: left; } /* 넓은 표는 페이지가 아니라 표 자체가 가로 스크롤되게 */ .table-scroll { overflow-x: auto; } /* ------------------------------------------------------------------ 칩/필 */ .chips { display: flex; gap: var(--s2); flex-wrap: wrap; } .chip { background: var(--card); border: 1px solid var(--line); color: var(--txt); padding: 6px 13px; border-radius: var(--r-pill); font-size: 13px; cursor: pointer; transition: border-color .12s ease, background .12s ease; } .chip:hover { border-color: #3a4356; } .chip.on { border-color: var(--accent); background: #1d2740; font-weight: 600; } .filter-row { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0 2px; flex-wrap: wrap; } .filter-row .lbl { color: var(--mut); font-size: 12px; width: 34px; flex: none; } .pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; } .pill.long { background:#13341f; color:#5fe39a; } .pill.flat { background:#2a2d35; color:#aab0be; } .pill.BUY { background:#13341f; color:#5fe39a; } .pill.SELL { background:#341313; color:#ff9a9a; } .pill.HOLD { background:#2a2d35; color:#aab0be; } .pill.b { background:#132a34; color:#5fd0e3; } .pill.e { background:#2a1f34; color:#c79cf0; } .pill.tf { background:#20262e; color:#9fb2c8; } /* 페이지 내부 탭(밑줄형) */ .segmented { display: flex; gap: var(--s1); margin-bottom: var(--s4); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .segmented button { background: none; border: none; color: var(--mut); font-size: 14px; padding: 9px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; } .segmented button.active { color: var(--txt); border-bottom-color: var(--accent); font-weight: 600; } /* ------------------------------------------------------------------ 버튼 */ .btn { padding: 5px 11px; font-size: 12px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--line); background: var(--card-2); color: var(--txt); font-family: inherit; } .btn:hover { border-color: #3a4356; } .btn.sell { border-color:#3a4a8b; background:#161a21; color:#9fb3ff; } /* 정지 중(비정상)일 때만 눈에 띄게. 정상 상태는 중립색 — 예전엔 반대로 '정상'이 빨간 버튼이라 화면이 늘 경고처럼 보였다. */ .btn.halted { border-color:#8a6d3b; background:#241d10; color:#f0c674; font-weight:600; } /* ------------------------------------------------------------------ 차트/막대 */ .chartbox { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); } .legend { display: flex; gap: var(--s4); font-size: 12px; color: var(--mut); margin-bottom: var(--s2); flex-wrap: wrap; } .legend .swatch { display: inline-block; width: 10px; height: 3px; vertical-align: middle; margin-right: 5px; border-radius: 2px; } .bar { height: 6px; border-radius: 3px; margin-top: 3px; } /* ------------------------------------------------------------------ AI 요약 */ .ai { background: linear-gradient(135deg, #1a2130, var(--card)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); font-size: 14px; line-height: 1.7; white-space: pre-wrap; } .ai .h { color: var(--accent); font-size: 12px; font-weight: 700; margin-bottom: var(--s2); } /* ------------------------------------------------------------------ 유틸 */ .muted { color: var(--mut); font-size: 13px; } .sub { color: var(--mut); font-size: 12px; margin-left: 6px; } .up { color: var(--up); } .down { color: var(--down); } .long { color: var(--long); } .flat { color: var(--flat); } .buy { color: var(--up); font-weight: 700; } .sell { color: var(--down); font-weight: 700; } .empty { color: var(--mut); padding: 20px; text-align: center; font-size: 13px; } .foot { margin-top: var(--s5); color: var(--mut); font-size: 12px; text-align: center; } [hidden] { display: none !important; } @media (max-width: 640px) { .wrap { padding: var(--s4) var(--s3) 48px; } .navtab { padding: 9px 11px; font-size: 13px; } .card .v { font-size: 20px; } }