/* * 디자인 토큰 (docs/DESIGN.md 3장 · 4장 · 7.2 · 9장 · 10장) * * 규칙 (DESIGN 3.1): * - 색 리터럴은 이 파일에만 있다. 페이지 CSS 는 var(--…) 만 쓴다. #fff 도 토큰이다 * - 토큰은 역할 이름이다. 값 이름(--navy, --white)으로 짓지 않는다 * - 다크 팔레트 값은 M4 에서 채운다. 아래 주석 자리만 비워둔다 */ :root { --bg: #F5F6F8; /* 배경. 차가운 흰색 */ --ink: #101C3D; /* 숫자, 본문 */ --secondary: #5A6478; /* 라벨, 설명, 보조 정보 */ --accent: #2547C4; /* 주 동작, 링크, 활성 표시 */ --danger: #C62A1B; /* 종료 상태, 경고 문구 전용 */ --hairline: rgba(16, 28, 61, 0.14); /* 구획 구분선 — 정보를 나르지 않는다 */ --border: rgba(16, 28, 61, 0.55); /* 입력·묶음 테두리 — 비텍스트 대비 3.75:1 */ --surface: #FFFFFF; /* 조작부 묶음의 배경 (DESIGN 7.1) */ --on-accent: #FFFFFF; /* accent 위 글자 */ --font-digits: 'Barlow', 'Helvetica Neue', Arial, sans-serif; --font-ui: 'IBM Plex Sans KR', 'IBM Plex Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --radius-control: 2px; /* 버튼·입력. 8px 이상은 SaaS 인상 (DESIGN 7.2) */ --radius-surface: 6px; /* 바깥 표면만 허용 */ } /* * 다크 모드 (M4 · DESIGN 3.1) — 시스템 설정을 따른다. 토글은 두지 않는다: * 어두운 강당의 프로젝터 노트북은 이미 OS 가 다크이고, 참가자 폰도 마찬가지다. * 값은 라이트 팔레트의 역할을 그대로 뒤집은 것. 대비(WCAG): ink/bg 16.0 · secondary/bg 7.4 · * accent/bg 6.7 · on-accent/accent 6.7 · danger/bg 6.8 — 전부 4.5:1 이상. * 배경은 순검정이 아니다 — 프로젝터에서 순검정은 회색으로 뜨고 OLED 에서는 잔상이 남는다. */ @media (prefers-color-scheme: dark) { :root { --bg: #0B1020; --ink: #E8ECF5; --secondary: #98A2B8; --accent: #7B93FF; --danger: #FF6B5B; --hairline: rgba(232, 236, 245, 0.14); --border: rgba(232, 236, 245, 0.50); --surface: #141B2E; --on-accent: #0B1020; /* 밝은 accent 위에는 어두운 글자가 더 잘 읽힌다 */ } } /* * ?theme=dark|light — 토글은 두지 않지만(3.1), 강당은 어두운데 프로젝터 노트북 OS 가 라이트인 경우를 위한 주소 인자. * 페이지 머리의 한 줄 스크립트가 로 옮긴다. 미디어 쿼리보다 뒤에 있어 이긴다. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0B1020; --ink: #E8ECF5; --secondary: #98A2B8; --accent: #7B93FF; --danger: #FF6B5B; --hairline: rgba(232, 236, 245, 0.14); --border: rgba(232, 236, 245, 0.50); --surface: #141B2E; --on-accent: #0B1020; } :root[data-theme="light"] { color-scheme: light; --bg: #F5F6F8; --ink: #101C3D; --secondary: #5A6478; --accent: #2547C4; --danger: #C62A1B; --hairline: rgba(16, 28, 61, 0.14); --border: rgba(16, 28, 61, 0.55); --surface: #FFFFFF; --on-accent: #FFFFFF; } /* QR 은 모드와 무관하게 어두운 점 / 밝은 바탕이다 — 반전된 QR 은 스캐너가 자주 못 읽는다 */ :root { --qr-bg: #FFFFFF; --qr-ink: #101C3D; color-scheme: light dark; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } [hidden] { display: none !important; } /* 타이머 숫자. tabular-nums 가 없으면 11:11 → 08:08 에서 전체가 흔들린다 (DESIGN 4장) */ .digits { font-family: var(--font-digits); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1; } /* 버튼 위계 — 셋뿐이다 (DESIGN 7.2) */ button { font: inherit; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* 손가락 */ padding: 0 18px; border-radius: var(--radius-control); border: 1px solid var(--ink); /* 보조 동작 — 테두리를 흐리게 하지 않는다 */ background: transparent; color: var(--ink); cursor: pointer; font-weight: 500; text-decoration: none; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn:disabled { border-color: var(--hairline); color: var(--secondary); background: transparent; cursor: default; } /* * 눌림 (DESIGN 9장) — 애니메이션이 허용되는 목록의 첫째가 "버튼 눌림"인데 빠져 있었다. * 손가락이 닿았다는 신호가 없으면, 길게 눌러야 동작하는 [처음부터] 는 "눌러도 아무 일이 없는 버튼"이 된다. * 그림자·글로우를 쓰지 않는다 (2장). 살짝 작아지고, 테두리 버튼은 옅게 찬다. * 전환 시간을 두지 않는다 — 누르는 그 순간에 보여야 한다. transform 이라 동작 축소 설정에서도 남는다 * (그쪽은 transition·animation 만 끈다). 눌림은 장식이 아니라 유일한 확인이므로 남겨야 한다. */ .btn:active:not(:disabled) { transform: scale(0.97); } .btn:not(.btn-primary):active:not(:disabled) { background: var(--hairline); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hairline { border: 0; border-top: 1px solid var(--hairline); margin: 0; } .secondary { color: var(--secondary); } .danger { color: var(--danger); } a { color: var(--accent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }