/* ============================================================
임팩트 디자인 시스템 — 공유 디자인 토큰 (Design Tokens)
------------------------------------------------------------
이 파일 하나가 임팩트 앱 패밀리의 "전체 변경 스위치"입니다.
여기 값을 바꾸면 이 파일을 불러오는 모든 앱이 새로고침 시 함께 바뀝니다.
[적용 방법] 각 앱 HTML의 에 자기 style.css보다 "먼저" 넣습니다:
그리고 앱 style.css에서 색·둥근값을 직접 쓰지 말고 아래 변수로 참조합니다.
예) background: var(--im-bg); border-radius: var(--im-radius-lg);
기준: 톡 임팩트 (2026-07-21) — 웜 크림 + 코랄/네이비 + 둥근 룩
============================================================ */
:root {
/* ── 브랜드 색 ── */
--im-navy: #1b3a5c; /* 브랜드 네이비 — 제목·강조·구조 */
--im-coral: #f1685e; /* 브랜드 코랄 — 버튼·활성·포인트 */
--im-cream: #f6efdf; /* 브랜드 크림 — 배경 톤의 기준 */
/* ── 표면(배경) ── */
--im-bg: #fdfaf4; /* 기본 배경 = 따뜻한 종이 */
--im-surface: #fffdf8; /* 카드·패널 = 살짝 밝은 종이 */
--im-surface-alt: #f6f0e4; /* 목록·그룹 배경 */
--im-bubble: #f3ecdf; /* 말풍선/보조 표면 = 웜 크림 */
/* ── 선·글자 ── */
--im-line: #eadfcc; /* 구분선·테두리 */
--im-text: #33291f; /* 본문 = 따뜻한 다크브라운 */
--im-text-sub: #a1927f; /* 보조 텍스트 = 웜 그레이 */
--im-link: var(--im-navy); /* 링크·강조 */
/* ── 상태 색 (알림·검수 등) ── */
--im-ok: #34c759; /* 승인·성공 */
--im-warn: #ff9500; /* 대기·주의 */
--im-danger: #c0392b; /* 반려·삭제·오류 */
/* ── 모서리 둥근 정도 (Radius) ── */
--im-radius-sm: 12px; /* 작은 요소 */
--im-radius-md: 16px; /* 입력창·칩·파일칩 */
--im-radius-lg: 22px; /* 말풍선·카드 */
--im-radius-xl: 28px; /* 큰 카드·로그인 박스 */
--im-radius-pill: 999px; /* 버튼·알약 */
/* ── 그림자 ── */
--im-shadow: 0 3px 14px rgba(120, 90, 60, .08); /* 카드 */
--im-shadow-soft: 0 1px 2px rgba(120, 90, 60, .07); /* 말풍선 */
/* ── 간격(Spacing) 기준 ── */
--im-gap-xs: 4px;
--im-gap-sm: 8px;
--im-gap: 14px;
--im-gap-lg: 20px;
/* ── 타이포 ── */
--im-font: -apple-system, "SF Pro Text", "Helvetica Neue",
"Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
--im-font-size: 15px; /* 본문 기본 */
/* ── 레이아웃 ── */
--im-app-max: 720px; /* 앱 최대 폭 (가운데 정렬) */
}