/* ============================================================
theme-mydata.css — MY DATA 화면 리디자인 (A안: 스타일 전용)
------------------------------------------------------------
mydata.html 의 기존 **뒤에** 아래 3줄 추가:
theme.css가 토큰·타이포·테이블·모달 공통 스타일을 담당하고,
이 파일이 MY DATA 고유 컴포넌트를 담당합니다. HTML/JS 수정 없음.
============================================================ */
/* ── theme.css의 index 전용 규칙 무효화 ──────────────────── */
/* index는 11열 테이블이라 8열 이후를 우측 정렬했지만, 여기는 10열 구조 */
td:nth-child(n+8), th:nth-child(n+8) { text-align: inherit; }
/* ── 헤더 ────────────────────────────────────────────────── */
header { min-height: 52px; padding: 0 20px; }
header h1 {
font-size: 15px;
font-weight: 600;
letter-spacing: -.2px;
}
.header-left { gap: 12px; }
.back-btn {
height: 30px;
display: inline-flex;
align-items: center;
padding: 0 12px;
border-radius: 7px;
border-color: var(--line2);
background: var(--panel2);
font-size: 11.5px;
}
.back-btn:hover { color: var(--text); border-color: var(--blue); }
.add-btn, .refresh-btn {
height: 30px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 12px;
border-radius: 7px;
font-size: 11.5px;
font-weight: 500;
}
.add-btn { background: var(--green-soft); color: var(--green); border: 1px solid var(--green); }
.add-btn:hover { background: var(--green); color: #fff; opacity: 1; }
/* 인라인 style로 지정된 예수금 버튼(주황)도 톤 맞춤 */
.header-right button[style*="orange"],
.header-right button[style*="ff9800"] {
height: 30px !important;
padding: 0 12px !important;
border-radius: 7px !important;
font-size: 11.5px !important;
font-weight: 500 !important;
background: var(--yellow-soft) !important;
color: var(--yellow) !important;
border: 1px solid var(--yellow) !important;
}
/* ── 총 자산 카드 ────────────────────────────────────────── */
.total-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 18px 20px 16px;
margin-bottom: 14px;
}
.total-label {
font-size: 11.5px;
color: var(--muted);
margin-bottom: 6px;
}
.total-amount {
font-family: var(--mono);
font-size: 34px;
font-weight: 600;
letter-spacing: -1.2px;
line-height: 1.1;
font-variant-numeric: tabular-nums;
/* 그라디언트 텍스트 해제 */
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: var(--text);
color: var(--text);
}
.total-amount span,
.total-amount small {
-webkit-text-fill-color: var(--muted);
color: var(--muted);
font-family: 'IBM Plex Sans KR', sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
}
.total-meta {
margin-top: 9px;
gap: 0 18px;
font-size: 11.5px;
color: var(--dim);
font-variant-numeric: tabular-nums;
}
/* KR/US 비중 바 */
.ratio-bar-wrap { margin-top: 14px; }
.ratio-bar-labels { font-size: 11.5px; margin-bottom: 6px; }
.ratio-label-kr { color: var(--green); font-weight: 500; font-family: var(--mono); }
.ratio-label-us { color: var(--blue); font-weight: 500; font-family: var(--mono); }
.ratio-bar {
height: 6px;
border-radius: 3px;
background: var(--raise);
gap: 1px;
}
.ratio-bar-kr { background: var(--green); }
.ratio-bar-us { background: var(--blue); }
/* ── 통화별 카드 ─────────────────────────────────────────── */
.currency-grid { gap: 12px; margin-bottom: 18px; }
.currency-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 14px 16px 12px;
}
.currency-title {
font-size: 11.5px;
font-weight: 600;
color: var(--muted);
letter-spacing: .02em;
margin-bottom: 10px;
}
.currency-row {
padding: 8px 0;
border-bottom: 0;
border-top: 1px solid var(--border);
font-size: 12.5px;
}
.currency-row:first-of-type { border-top: 0; }
.currency-row .label { font-size: 12px; color: var(--muted); }
.currency-row .value { font-family: var(--mono); font-weight: 500; }
.currency-total { border-top: 1px solid var(--line2) !important; }
.currency-total .value {
font-family: var(--mono);
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: -.3px;
}
.currency-total .value span,
.currency-total .value small { color: var(--dim); font-weight: 400; font-size: 11.5px; }
/* ── 브로커 섹션 ─────────────────────────────────────────── */
.broker-section { margin-bottom: 20px; }
.broker-header { gap: 8px; margin-bottom: 9px; }
.broker-badge,
.broker-badge-manual {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .04em;
padding: 3px 7px;
border-radius: 5px;
}
.broker-badge { background: var(--accent-soft); color: var(--blue); }
.broker-badge-manual { background: var(--yellow-soft); color: var(--yellow); }
.broker-name { font-size: 13px; font-weight: 600; letter-spacing: -.1px; }
.broker-error, .error-msg {
background: var(--red-soft);
border: 1px solid var(--red);
border-radius: var(--r);
font-size: 12.5px;
}
/* ── 종목 테이블 ─────────────────────────────────────────── */
.table-wrap { border-radius: var(--r); }
/* 열 구성: 1종목명 2코드 3시장 4수량 5평단가 6현재가 7평가금액 8평가손익 9손익률 10(빈) 11신호 12(편집) */
th:nth-child(4), th:nth-child(5), th:nth-child(6), th:nth-child(7), th:nth-child(8), th:nth-child(9),
td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(7), td:nth-child(8), td:nth-child(9) {
text-align: right;
}
th:nth-child(3), td:nth-child(3),
th:nth-child(11), td:nth-child(11),
th:nth-child(12), td:nth-child(12) { text-align: center; }
/* 10열은 차트 링크 아이콘 */
th:nth-child(10), td:nth-child(10) { width: 1px; padding: 8px 4px; text-align: center; }
td:nth-child(1) {
font-family: 'IBM Plex Sans KR', sans-serif;
font-size: 12px;
color: var(--muted);
max-width: 260px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td:nth-child(2) { font-weight: 600; }
.market-badge {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .04em;
padding: 2px 6px;
border-radius: 4px;
}
.market-kr { background: var(--green-soft); color: var(--green); }
.market-us { background: var(--accent-soft); color: var(--blue); }
.market-crypto { background: var(--yellow-soft); color: var(--yellow); }
.empty-row td { font-family: 'IBM Plex Sans KR', sans-serif; padding: 28px; }
/* 신호 배지 — 채도 낮추고 토큰화 */
.signal-btn {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 600;
padding: 3px 8px;
border-radius: 5px;
letter-spacing: .02em;
}
.sig-strong-buy { background: var(--green-soft); color: var(--green); }
.sig-buy { background: var(--green-soft); color: var(--green); opacity: .8; }
.sig-hold { background: var(--raise); color: var(--muted); }
.sig-sell { background: var(--red-soft); color: var(--red); opacity: .8; }
.sig-strong-sell { background: var(--red-soft); color: var(--red); }
.sig-loading { background: var(--accent-soft); color: var(--blue); }
.signal-detail { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.action-btn {
border-radius: 5px;
border-color: var(--line2);
padding: 3px 8px;
font-size: 11px;
}
.action-btn:hover { border-color: var(--blue); color: var(--blue); }
/* ── 예수금 섹션 ─────────────────────────────────────────── */
.cash-section {
border-radius: var(--r);
border-color: var(--border);
margin-top: 12px;
}
.cash-section-header {
background: var(--panel2);
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
padding: 9px 14px;
}
.cash-row { padding: 9px 14px; font-size: 12.5px; }
.cash-row .cash-label { font-size: 12px; }
.cash-row .cash-value { font-family: var(--mono); font-weight: 500; }
.cash-add-btn {
border-radius: 7px;
border-color: var(--line2);
font-size: 11.5px;
padding: 9px;
}
.cash-add-btn:hover { border-color: var(--green); color: var(--green); }
.cash-warning-banner {
background: var(--red-soft);
border: 1px solid var(--red);
border-radius: 7px;
font-size: 11.5px;
font-weight: 500;
}
/* ── 자산 추이 스파크라인 ────────────────────────────────── */
.sparkline-wrap { height: 48px; margin: 12px 0 -20px; }
.chart-view-btn {
width: 28px;
height: 17px;
border-radius: 4px;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 600;
border-color: var(--line2);
}
/* ── 모달 / 로그인 ───────────────────────────────────────── */
.modal-box { border-radius: 12px; padding: 22px 22px; }
.modal-box h3 { font-size: 14px; font-weight: 600; }
.form-row label { font-size: 11.5px; }
.form-row input, .form-row select {
height: 34px;
padding: 0 11px;
border-radius: 7px;
border-color: var(--line2);
background: var(--panel2);
font-size: 13px;
}
.form-row input { font-family: var(--mono); }
.modal-btns button {
border-radius: 7px;
padding: 9px 18px;
font-size: 12.5px;
font-weight: 500;
}
.btn-cancel { background: var(--panel2); border: 1px solid var(--line2); color: var(--muted); }
.login-box { border-radius: 12px; padding: 32px 28px; }
.login-box h2 { font-size: 16px; font-weight: 600; }
.login-box input { height: 36px; border-radius: 7px; border-color: var(--line2); background: var(--panel2); }
.login-box button { border-radius: 7px; font-size: 13px; font-weight: 500; padding: 11px; }
/* ── 라이트 테마 보정 ────────────────────────────────────── */
html[data-theme="light"] .cash-section-header { background: var(--panel2); }
html[data-theme="light"] .total-amount { -webkit-text-fill-color: var(--text); }
html[data-theme="light"] .sig-hold { background: var(--raise); }
/* ── 모바일 ──────────────────────────────────────────────── */
@media (max-width: 600px) {
.total-amount { font-size: 26px; }
.total-meta { gap: 0 12px; font-size: 11px; }
td:nth-child(1) { max-width: 130px; }
}
/* ============================================================
구조 변경 (1) 총자산 요약 스트립 · (3) 자산 추이 독립 카드
============================================================ */
/* ── (1) 요약 스트립 ─────────────────────────────────────── */
.md-summary {
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
margin-bottom: 12px;
background: var(--border);
}
.md-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 1px;
}
.md-cell { background: var(--card); padding: 14px 16px 13px; }
.md-cell-label { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.md-cell-value {
font-family: var(--mono);
font-size: 23px;
font-weight: 600;
letter-spacing: -.7px;
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.md-cell-value.lg { font-size: 27px; letter-spacing: -1px; }
.md-cell-sub {
font-size: 11.5px;
color: var(--dim);
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.md-cell-sub b { font-family: var(--mono); font-weight: 500; color: var(--muted); }
/* 비중 셀 */
.md-cell-ratio { display: flex; flex-direction: column; justify-content: center; }
.md-ratio-nums {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 12.5px;
font-weight: 600;
margin-bottom: 7px;
}
.md-ratio-kr { color: var(--green); }
.md-ratio-us { color: var(--blue); }
.md-ratio-bar {
display: flex;
gap: 1px;
height: 6px;
border-radius: 3px;
overflow: hidden;
background: var(--raise);
}
.md-ratio-bar > .kr { background: var(--green); }
.md-ratio-bar > .us { background: var(--blue); }
@media (max-width: 640px) {
.md-strip { grid-template-columns: repeat(2, 1fr); }
.md-cell-value { font-size: 19px; }
.md-cell-value.lg { font-size: 21px; }
}
/* ── (3) 자산 추이 독립 카드 ─────────────────────────────── */
.md-chart-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 14px 16px 12px;
margin-bottom: 18px;
}
.md-chart-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.md-chart-title { font-size: 13px; font-weight: 600; }
.md-chart-meta { font-size: 11.5px; color: var(--muted); }
.md-seg {
display: flex;
gap: 4px;
padding: 3px;
background: var(--panel2);
border: 1px solid var(--border);
border-radius: 8px;
margin-left: auto;
}
.md-seg button {
height: 24px;
padding: 0 11px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--muted);
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
cursor: pointer;
}
.md-seg button:hover { color: var(--text); }
.md-seg button.active { background: var(--accent-soft); color: var(--text); }
.md-chart-body { position: relative; }
.md-chart-body canvas, .md-chart-body svg { width: 100% !important; height: 180px; display: block; }
.md-chart-foot {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 10.5px;
color: var(--dim);
padding-top: 6px;
}
/* 기존 스파크라인 래퍼는 독립 카드로 대체되므로 숨김 */
.total-card .sparkline-wrap { display: none; }