/* ============================================================ 연:결 대시보드 공통 디자인 키트 v1 (2026-07-31) 기준: https://yeongyeol.vibekr.com/lp/aeo-geo/ 를 브라우저로 열어 실제 계산값을 측정해서 뽑은 규칙이다(눈대중 아님). 사장님 지시: **강조색은 붉은 계통**으로 (기준 페이지의 청록 → 레드로 치환) 쓰는 법: 각 화면의 맨 끝에서 이 파일을 **마지막에** 불러온다. 기존 CSS 를 지우지 말고 위에 덧입힌다(기능·구조는 그대로 두기 위해). ============================================================ */ /* ── 폰트 ─────────────────────────────────────────────── 기준 페이지는 Plus Jakarta Sans 를 쓰는데 이 폰트에는 **한글이 없다.** 그래서 한글은 Pretendard 로 받고, 숫자·영문만 Jakarta 로 쓴다. 대시보드는 숫자가 많아 이 조합이 특히 잘 맞는다. */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css'); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap'); :root { /* 잉크 (기준 페이지 실측값) */ --yg-ink: #0A1A30; --yg-ink-strong: #071426; --yg-muted: #3C4E66; --yg-faint: #7A8CA6; /* 기준의 #8698AE 보다 살짝 진하게 — 시인성 때문에 */ /* 강조 — 붉은 계통 (사장님 지시) */ --yg-accent: #D92A2A; /* 채우기·막대·아이콘 */ --yg-accent-strong: #A81C1C; /* 흰 배경 위 글자용 (대비 6.4:1) */ --yg-accent-soft: #FDEDED; /* 옅은 배경 */ --yg-accent-line: rgba(217, 42, 42, .28); /* 바탕 */ --yg-bg: #F6F8FB; --yg-card: #FFFFFF; --yg-line: rgba(10, 26, 48, .10); --yg-tint: rgba(10, 26, 48, .04); /* 상태색 (표·배지에 쓴다) */ --yg-ok: #1B7F4F; --yg-warn: #A96A00; --yg-danger: #B3261E; /* 모양 */ --yg-r-card: 16px; --yg-r-chip: 999px; --yg-shadow: 0 20px 44px -34px rgba(7, 20, 38, .35); --yg-shadow-sm: 0 2px 8px -4px rgba(7, 20, 38, .25); /* 글자 크기 — **12px 미만 금지**. 대시보드는 오래 들여다보는 화면이다. */ --yg-fs-body: 15.5px; --yg-fs-small: 13px; --yg-lh-body: 1.65; } /* ── 바탕과 본문 ─────────────────────────────────────── */ body { background: var(--yg-bg); color: var(--yg-ink); font-family: 'Pretendard Variable', Pretendard, 'Plus Jakarta Sans', -apple-system, 'Malgun Gothic', sans-serif; font-size: var(--yg-fs-body); line-height: var(--yg-lh-body); -webkit-font-smoothing: antialiased; } /* 숫자는 폭이 흔들리면 표가 지저분해진다 — 고정폭 숫자로 */ table, .num, .metric, td, th, time, .count { font-variant-numeric: tabular-nums; } /* ── 제목 계층 (기준 페이지 비율을 대시보드 크기로 축소) ── */ h1, h2, h3, h4 { color: var(--yg-ink-strong); font-weight: 800; letter-spacing: -0.03em; line-height: 1.22; } h1 { font-size: clamp(26px, 3.4vw, 40px); } h2 { font-size: clamp(21px, 2.4vw, 28px); } h3 { font-size: clamp(17px, 1.8vw, 21px); font-weight: 700; letter-spacing: -0.02em; } h4 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } /* ── 작은 글자 하한선 — 시인성 문제의 가장 큰 원인이었다 ── */ small, .small, .muted, .sub, .caption, .hint, figcaption { font-size: var(--yg-fs-small); color: var(--yg-muted); } /* ── 카드 ───────────────────────────────────────────── */ .card, .panel, .box, .section-card, .yg-card { background: var(--yg-card); border: 1px solid var(--yg-line); border-radius: var(--yg-r-card); box-shadow: var(--yg-shadow-sm); } /* ── 표 — 대시보드의 핵심. 읽기 쉬운 게 최우선 ────────── */ table { width: 100%; border-collapse: collapse; background: var(--yg-card); } thead th { position: sticky; top: 0; z-index: 2; background: var(--yg-ink); color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; padding: 11px 12px; text-align: left; white-space: nowrap; } tbody td { padding: 11px 12px; border-bottom: 1px solid var(--yg-line); } tbody tr:nth-child(even) { background: var(--yg-tint); } /* 줄 따라가기 쉽게 */ tbody tr:hover { background: var(--yg-accent-soft); } /* ── 강조 요소 ──────────────────────────────────────── */ a { color: var(--yg-accent-strong); text-underline-offset: 3px; } a:hover { color: var(--yg-accent); } .btn, button, input[type="submit"] { background: var(--yg-accent); color: #fff; border: 0; border-radius: var(--yg-r-chip); padding: 10px 18px; font-weight: 700; font-size: 14.5px; cursor: pointer; box-shadow: var(--yg-shadow-sm); } .btn:hover, button:hover { background: var(--yg-accent-strong); } .btn-ghost, button.ghost { background: #fff; color: var(--yg-ink); border: 1px solid var(--yg-line); box-shadow: none; } .badge, .chip, .tag, .pill { display: inline-block; background: var(--yg-accent-soft); color: var(--yg-accent-strong); border: 1px solid var(--yg-accent-line); border-radius: var(--yg-r-chip); padding: 3px 11px; font-size: 13px; font-weight: 700; } /* 큰 숫자(지표) — 붉은 강조를 여기에 몰아준다 */ .metric, .kpi, .big-number { font-family: 'Plus Jakarta Sans', 'Pretendard Variable', sans-serif; font-weight: 800; letter-spacing: -0.04em; color: var(--yg-accent-strong); } /* ── 입력칸 ─────────────────────────────────────────── */ input, textarea, select { font-family: inherit; font-size: 15px; color: var(--yg-ink); background: #fff; border: 1px solid var(--yg-line); border-radius: 10px; padding: 10px 12px; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--yg-accent); box-shadow: 0 0 0 3px var(--yg-accent-soft); } /* ── 인쇄 (PDF 저장) ────────────────────────────────── */ @media print { body { background: #fff; } .card, .panel, table { box-shadow: none; } thead th { background: #eee !important; color: #000 !important; } nav, .no-print, button, .btn { display: none !important; } }