/* ============================================================
레사남 디자인 시스템 — 단일 기준 (Single Source of Truth)
v1.0 (29회차) — v0 랜딩에서 검증된 토큰 박제
------------------------------------------------------------
사용법: 모든 화면 에 한 줄만.
원칙:
- 네이비(--sea-*)는 헤더·푸터·히어로·강조에.
- 데이터 화면 본문 배경은 밝게(--bg / --surface).
- 색·여백·그림자는 여기서만 정의. 화면에서 하드코딩 금지.
============================================================ */
/* ---------- 1. 폰트 ----------
GmarketSans는 이 파일에서 @font-face로 단일 정의(단일 기준 원칙).
family 이름은 디자인 토큰(--font-display / --font-display-md)과 일치시킴.
출처: fonts-archive/GmarketSans 미러(jsdelivr, woff2 우선·woff 폴백).
기존 .woff.css를 로 부르던 방식은 배포 환경의
CORB 검사에서 차단됨 → @font-face src 방식으로 정공법 전환.
Pretendard(본문)는 각 화면 에서 link로 로드(아래 1줄).
폰트가 없어도 색·레이아웃은 정상 적용되며, 시스템 폰트로 대체됩니다.
*/
@font-face {
font-family: 'GmarketSansMedium';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansMedium.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansMedium.woff') format('woff');
}
@font-face {
font-family: 'GmarketSansBold';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.woff') format('woff');
}
:root {
/* ---------- 2. 색 — 바다·항해(강조) ---------- */
--sea-deep: #10243A; /* 깊은 밤바다 — 헤더·푸터·히어로 바닥·짙은 강조 */
--sea-mid: #1B3A5B; /* 항해 블루 — 강조 카드·아이콘 바탕·주 버튼 */
--sea-soft: #244966; /* 한 단계 밝은 네이비 — 그라데이션 중간 */
--sea-line: #3E6378; /* 네이비 위 구획선 */
/* ---------- 색 — 새벽빛(액센트) ---------- */
--dawn: #F4B860; /* 새벽 빛 — 주 액센트(CTA·강조선·신호) */
--dawn-soft: #F9D89C; /* 옅은 새벽 — 네이비 위 보조 텍스트·하이라이트 */
--dawn-deep: #C8893A; /* 짙은 새벽 — 밝은 배경 위 새벽빛 글자(대비 확보) */
/* ---------- 색 — 물빛(보조 강조) ---------- */
--water: #5B9BAE; /* 잔잔한 물빛 — 보조 강조·태그·링크 */
--water-deep:#3E7689; /* 밝은 배경 위 물빛 글자 대비용 */
/* ---------- 히어로 수평선 그라데이션 (원안 v0 확정) ----------
밤바다 → 새벽빛. 색상 검토 결과 원안 채택. 랜딩·이후 히어로 공유. */
--hero-gradient: linear-gradient(180deg,
#10243A 0%, #16304C 42%, #244966 60%, #3E6378 70%,
#7E8F7E 80%, #D49A5A 90%, #F4B860 100%);
/* ---------- 색 — 밝은 배경(데이터 화면) ---------- */
--bg: #FBF8F2; /* 본문 배경 — 아침 안개 크림 */
--bg-warm: #F1EAD9; /* 따뜻한 크림 — 섹션 교차·마무리 */
--surface: #FFFFFF; /* 카드·표 바탕 */
--line: #E4DED2; /* 밝은 배경 위 구획선 */
/* ---------- 색 — 글자 ---------- */
--ink: #1A2630; /* 본문 글자 */
--ink-soft: #5A6B78; /* 보조 글자 */
--ink-faint: #9AA4AC; /* 흐린 캡션 */
--on-sea: #FFFFFF; /* 네이비 위 글자 */
--on-sea-soft: rgba(255,255,255,0.82); /* 네이비 위 보조 글자 */
/* ---------- 색 — 의미(수익·손실·신호) ---------- */
--gain: #C0392B; /* 수익(국내 관습: 빨강 상승) */
--loss: #2563EB; /* 손실(파랑 하락) */
--signal-buy-bg: #E7F1E8; --signal-buy-fg: #2E6B3E;
--signal-sell-bg: #FBEAEA; --signal-sell-fg: #993333;
--signal-hold-bg: #F1EFE6; --signal-hold-fg: #6B6A60;
/* 차트 색(전체자산추이 화면 정합 — 변경 시 분석 화면 동시 점검) */
--chart-eval: #b91c1c; /* 주식 평가·총평가 */
--chart-cost: #6b7280; /* 투입원금 */
--chart-target:#f59e0b; /* 가상 목표선 */
/* ---------- 3. 폰트 역할 ---------- */
--font-display: 'GmarketSansBold', -apple-system, BlinkMacSystemFont, sans-serif;
--font-display-md: 'GmarketSansMedium', -apple-system, sans-serif;
--font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* ---------- 4. 타이포 스케일 ---------- */
--fs-hero: 46px;
--fs-h2: 32px;
--fs-h3: 19px;
--fs-lead: 18px;
--fs-body: 16px;
--fs-sm: 14px;
--fs-xs: 12px;
--fs-data: 18px; /* 요약 카드 수치 */
/* ---------- 5. 여백·모서리·그림자 ---------- */
--space-section: 84px; /* 섹션 상하 패딩 */
--space-card: 24px; /* 카드 안쪽 패딩 기본 */
--maxw: 1180px; /* 콘텐츠 최대 폭 */
--maxw-data: 1400px; /* 데이터 화면(대시보드 등) 최대 폭 */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 26px;
--shadow-sm: 0 2px 8px rgba(16,36,58,0.06);
--shadow-md: 0 12px 30px rgba(16,36,58,0.09);
--shadow-lg: 0 16px 44px rgba(16,36,58,0.12);
--shadow-dawn: 0 6px 18px rgba(244,184,96,0.32);
}
/* ============================================================
6. 베이스 리셋
============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--ink);
font-size: var(--fs-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--dawn); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* ============================================================
7. 타이포 유틸
============================================================ */
.display { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.3; }
.display-md { font-family: var(--font-display-md); letter-spacing: -0.01em; }
.text-soft { color: var(--ink-soft); }
.text-faint { color: var(--ink-faint); }
.glow { color: var(--dawn); } /* 네이비 위 강조 글자 */
.glow-on-light { color: var(--dawn-deep); } /* 밝은 배경 위 강조 글자 */
/* ============================================================
8. 레이아웃 컨테이너
============================================================ */
.container { max-width: var(--maxw); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.container-data { max-width: var(--maxw-data); margin: 0 auto; padding: 24px; }
.section { max-width: var(--maxw); margin: 0 auto; padding: var(--space-section) 24px; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-head .tag {
display: inline-block; font-family: var(--font-display-md);
font-size: 13px; letter-spacing: 0.10em; color: var(--water-deep); margin-bottom: 12px;
}
.section-head h2 {
font-family: var(--font-display); font-size: var(--fs-h2);
line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 14px;
}
.section-head p { color: var(--ink-soft); font-size: var(--fs-body); }
/* ============================================================
9. 버튼
============================================================ */
.btn { display: inline-block; font-weight: 700; font-size: var(--fs-body);
border-radius: var(--radius-md); cursor: pointer; border: 1.5px solid transparent;
padding: 14px 30px; transition: transform 0.12s, box-shadow 0.18s, background 0.18s, color 0.18s; }
.btn-sm { padding: 9px 18px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn-primary { background: var(--dawn); color: var(--sea-deep); box-shadow: var(--shadow-dawn); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(244,184,96,0.45); }
.btn-sea { background: var(--sea-mid); color: var(--on-sea); }
.btn-sea:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* 밝은 배경 위 외곽선 버튼 */
.btn-outline { background: transparent; color: var(--sea-mid); border-color: var(--sea-mid); }
.btn-outline:hover { background: var(--sea-mid); color: var(--on-sea); }
/* 네이비 위 고스트 버튼 */
.btn-ghost { background: rgba(255,255,255,0.1); color: var(--on-sea); border-color: rgba(255,255,255,0.3); }
.btn-ghost:hover { background: rgba(255,255,255,0.18); }
button:disabled, .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
/* 폼 컨트롤(데이터 화면 공통) */
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 500; }
select, input[type="text"], input[type="number"], .control {
padding: 6px 12px; font-size: var(--fs-sm); height: 34px;
border: 1px solid #C8C6BC; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
}
.toggle-group { display: inline-flex; border: 1px solid #C8C6BC; border-radius: var(--radius-sm); overflow: hidden; height: 34px; }
.toggle-group button { border: 0; border-radius: 0; padding: 6px 14px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: var(--fs-sm); }
.toggle-group button.active { background: var(--sea-mid); color: var(--on-sea); }
/* ============================================================
10. 카드
============================================================ */
.card { background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: var(--space-card); }
.card-hover { transition: transform 0.16s, box-shadow 0.2s, border-color 0.2s; }
.card-hover:hover { transform: translateY(-4px); border-color: var(--dawn); box-shadow: var(--shadow-lg); }
/* 강조 아이콘 박스(도구 카드 등) */
.icon-box { width: 52px; height: 52px; border-radius: 13px; margin-bottom: 18px;
display: flex; align-items: center; justify-content: center; font-size: 24px;
background: linear-gradient(135deg, var(--sea-mid), var(--water)); color: #fff; }
/* ============================================================
11. 요약 카드 줄(대시보드·분석 화면 공통)
============================================================ */
.summary-row { background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: 16px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.summary-row .metric { display: flex; flex-direction: column; min-width: 120px; }
.summary-row .metric .label { font-size: var(--fs-xs); color: var(--ink-soft); }
.summary-row .metric .val { font-family: var(--font-display-md); font-size: var(--fs-data); margin-top: 2px; }
.summary-row .metric .sub { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 2px; }
.val-gain { color: var(--gain); }
.val-loss { color: var(--loss); }
/* ============================================================
12. 현금비율 신호 배지
============================================================ */
.signal-badge { display: inline-flex; flex-direction: column; gap: 2px;
padding: 8px 14px; border-radius: var(--radius-sm); min-width: 130px; }
.signal-badge .sig-label { font-size: var(--fs-xs); opacity: 0.85; }
.signal-badge .sig-val { font-family: var(--font-display-md); font-size: 16px; }
.signal-badge .sig-sub { font-size: var(--fs-xs); opacity: 0.85; }
.signal-buy { background: var(--signal-buy-bg); color: var(--signal-buy-fg); }
.signal-sell { background: var(--signal-sell-bg); color: var(--signal-sell-fg); }
.signal-hold { background: var(--signal-hold-bg); color: var(--signal-hold-fg); }
/* ============================================================
13. 안내·상태 박스
============================================================ */
.notice-error { background: var(--signal-sell-bg); color: var(--signal-sell-fg);
padding: 12px; border-radius: var(--radius-sm); }
.notice-warn { background: #FFF5E1; color: #8A6800;
padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.notice-empty { text-align: center; padding: 40px; color: var(--ink-soft); }
.badge-pro { display: inline-block; font-size: 10px; font-weight: 700;
color: var(--dawn-deep); border: 1px solid var(--dawn); border-radius: 10px; padding: 1px 8px; }
/* ============================================================
14. 헤더·푸터(네이비)
============================================================ */
.app-header { background: var(--sea-deep); color: var(--on-sea); }
.app-header .bar { max-width: var(--maxw-data); margin: 0 auto; padding: 16px 24px;
display: flex; align-items: center; justify-content: space-between; }
.app-header h1 { font-family: var(--font-display); font-size: 18px; }
.app-header .sub { font-size: var(--fs-xs); color: var(--on-sea-soft); margin-top: 4px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .mark { width: 26px; height: 26px; border-radius: 50%;
background: radial-gradient(circle at 50% 120%, var(--dawn) 0 38%, transparent 60%), var(--sea-mid);
box-shadow: 0 0 0 1px rgba(244,184,96,0.4); }
.brand .name { font-family: var(--font-display); font-size: 18px; }
/* ============================================================
15. 반응형 기준점
============================================================ */
@media (max-width: 880px) {
:root { --fs-hero: 32px; --fs-h2: 26px; --space-section: 60px; }
}