/* ===================================================================== tokens.css — 디자인 값 모음 (C안 「만들 블록 팝」, D-38) 이 파일이 하는 일 - 화면에 쓰는 색·글꼴·글자 크기·간격·모서리·테두리·그림자·움직임 시간을 "이름표(CSS 변수)"로 한곳에 모아 둔다. - 다른 CSS 파일은 값을 직접 쓰지 않고 var(--color-ink)처럼 이름으로만 가져다 쓴다. (개발 작업 규칙 13장 2번: 색 값은 tokens.css에서만) 왜 한곳에 모으나 - 담당자가 공식 브랜드 색(Q-02)을 알려 주면 **이 파일의 값만 바꾸면** 화면 전체 색이 한 번에 바뀐다 (D-33). - 지금 색은 C안 확정 색(06 디자인 가이드 2장)이며, 공식 색 확인 전까지 임시다. 불러오는 순서: tokens.css → base.css → components.css → 화면별 CSS ===================================================================== */ :root { /* ------------------------------------------------------------------- 1. 기본 색 (06 디자인 가이드 2장 "확정 색") - 공식 브랜드 색을 받으면 여기 값만 바꾼다. - 괄호 안 숫자는 Python(WCAG 2.x 공식)으로 계산한 글자 대비(명암비)다. ------------------------------------------------------------------- */ --color-primary: #FFD43B; /* 만들 옐로: 주 버튼, 시작 화면 큰 면, 스티커 라벨. 위 글자는 먹색만 (12.08:1). 흰 글자 금지 */ --color-primary-press: #F0BF1A; /* 진한 옐로: 주 버튼을 누르고 있을 때 (먹색 글자 9.98:1) */ --color-accent: #2F5BFF; /* 네온 블루: 진행 바, 링크 글자, 선택됨 체크, 키보드 초점 고리 (흰 글자 5.17:1) */ --color-bg: #FFFBEF; /* 크림 화이트: 화면 전체 바탕 */ --color-surface: #FFFFFF; /* 흰색: 선택지·카드 바탕 (먹색 글자 17.22:1) */ --color-ink: #1B1B1B; /* 만들닷 먹색: 글자, 모든 테두리, 블록 그림자 (배경 위 16.65:1) */ --color-ink-sub: #4A4A4A; /* 진회색: 보조 글자·안내 문구 (배경 위 8.57:1) */ --color-white: #FFFFFF; /* 진한 면(네온 블루·빨강) 위 흰 글자, 스티커 흰 테두리 */ --color-gold: #CBB045; /* 만들닷 금색: 장식 점에만. 글자색 금지 (흰 바탕 위 2.14:1이라 안 읽힘) */ --color-red: #CB1511; /* 만들닷 빨강: 결과 화면 "1순위" 스티커 한 곳에만 (흰 글자 5.75:1) */ /* ------------------------------------------------------------------- 2. 태그 6색 (진한 색 + 옅은 색 한 쌍씩) - 결과 화면에서만 쓴다. 질문 화면(D-38: 선택지에 태그 색이 보이면 점수 구조가 드러나 재미가 줄어듦)과 통계 그래프(D-43 ①: 네온 블루 한 색)에서는 쓰지 않는다. - 위에 올리는 글자는 모두 먹색 (가장 낮은 디자인 진한 색도 5.47:1). - 화면에서는 data-tag="빛"처럼 태그 이름을 붙이면 components.css가 --tag-color, --tag-soft 로 바꿔 준다. ------------------------------------------------------------------- */ --tag-light: #FFA62B; --tag-light-soft: #FFEBC7; /* 빛: 전구 주황 */ --tag-deco: #FF7EB6; --tag-deco-soft: #FFE0EE; /* 꾸미기: 버블 핑크 */ --tag-tech: #4DA3FF; --tag-tech-soft: #DDEEFF; /* 기술: 회로 파랑 */ --tag-design: #9B7BFF; --tag-design-soft: #ECE5FF; /* 디자인: 형광 보라 */ --tag-memory: #2ECDB0; --tag-memory-soft: #D5F7F0; /* 추억: 민트 */ --tag-useful: #7ED957; --tag-useful-soft: #E6F8DD; /* 실용: 라임 */ /* 점 무늬: 노란 면·유형 색 면 위에 깔리는 작은 먹색 점 (투명도 12%) */ --pattern-dots: radial-gradient(rgba(27, 27, 27, 0.12) 1.5px, transparent 1.8px); --pattern-dots-size: 14px; /* ------------------------------------------------------------------- 3. 글꼴 - 글꼴 파일은 index.html 의 로 불러온다 (base.css 맨 위 안내 참고). - 팝 글꼴(Bagel Fat One): 서비스 제목·유형 이름·스티커 라벨처럼 짧은 글에만. 아주 굵어서 긴 글에 쓰면 읽기 어렵다. - 본문 글꼴(Pretendard Variable 1.3.9): 질문·선택지·본문·안내 전부. - 뒤에 적힌 글꼴들은 인터넷이 느려 글꼴이 아직 안 왔을 때 대신 쓰는 것. ------------------------------------------------------------------- */ --font-pop: "Bagel Fat One", "Pretendard Variable", Pretendard, system-ui, sans-serif; --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; /* ------------------------------------------------------------------- 4. 글자 크기 단계 (휴대폰 375px 기준, 06 디자인 가이드 3장) - 본문은 16px 아래로 내리지 않는다 (작업 규칙 13장 4번). ------------------------------------------------------------------- */ --text-title: 34px; /* 서비스 제목, 메이커 유형 이름 (팝 글꼴) */ --text-question: 22px; /* 질문 문구 (굵기 800) */ --text-lead: 17px; /* 시작 화면 소개 문구 (D-41 ⑧, C안 시안 값) */ --text-choice: 18px; /* 선택지 문구, 버튼 글자 (굵기 700~800) */ --text-body: 16px; /* 본문, 스티커 라벨 */ --text-small: 14px; /* 보조 설명, 안내 문구, 태그 칩 */ /* 글자 굵기: Pretendard Variable은 숫자로 굵기를 고를 수 있다 */ --weight-regular: 500; /* 본문 */ --weight-medium: 600; /* 안내 문구 */ --weight-bold: 700; /* 선택지 */ --weight-heavy: 800; /* 질문, 버튼 */ /* 줄 간격: 제목은 촘촘하게, 본문은 넉넉하게 (한글은 1.6 안팎이 편하게 읽힘) */ --leading-tight: 1.25; /* 제목·유형 이름 */ --leading-snug: 1.45; /* 질문·선택지 */ --leading-body: 1.6; /* 본문 */ /* ------------------------------------------------------------------- 5. 간격 (8의 배수 + 반 칸 4px) - 간격 값을 몇 개로 정해 두면 화면마다 여백이 들쭉날쭉하지 않다. ------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; /* 선택지 사이 */ --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --gutter: 20px; /* 화면 양옆 여백. 규칙은 16px 이상, C안은 여유 있게 20px */ /* ------------------------------------------------------------------- 6. 크기 기준 ------------------------------------------------------------------- */ --app-max-width: 480px; /* PC에서 가운데에 보이는 최대 너비 (06 가이드 4장) */ --tap-min: 48px; /* 손가락으로 누르는 것의 최소 크기 (작업 규칙 13장 4번) */ --btn-height: 56px; /* 큰 버튼 높이 (C안 시안 값, 최소 48px보다 여유) */ --choice-min-height: 72px; /* 선택지 최소 높이 (두 줄 문구도 들어가게) */ --progress-height: 12px; /* 진행 바 두께 */ --icon-size: 20px; /* 버튼 안 아이콘 기본 크기 */ --question-art-size: 86px; /* 질문 화면 오른쪽 위 선물 상자 스티커 그림 (C안 시안 SCR-02 값) */ /* ------------------------------------------------------------------- 7. 모서리 둥글기 ------------------------------------------------------------------- */ --radius-sm: 14px; /* 작은 상자: 키트 썸네일, 정보 줄 상자 */ --radius-md: 16px; /* 버튼, 선택지 */ --radius-lg: 24px; /* 큰 카드: 결과 카드 */ --radius-pill: 999px; /* 알약·동그라미: 칩, 배지, 스티커, 진행 바 */ /* ------------------------------------------------------------------- 8. 테두리 — "누를 수 있는 것과 카드는 모두 먹색 테두리" (C안 규칙 1) ------------------------------------------------------------------- */ --border-width: 2.5px; /* 기본 테두리: 버튼, 선택지, 카드 */ --border-width-thin: 2px; /* 얇은 테두리: 칩, 이전 버튼, 진행 바, 안쪽 상자 */ --border-extra-selected: 1.5px; /* "선택됨"일 때 안쪽으로 더 그리는 두께 → 합계 4px (D-38) */ --border: var(--border-width) solid var(--color-ink); --border-thin: var(--border-width-thin) solid var(--color-ink); /* ------------------------------------------------------------------- 9. 블록 그림자 — 흐림 없는 먹색 그림자 (레고 블록처럼 "딸깍") - 흐린 그림자는 "단순 AI식" 디자인이라 쓰지 않는다 (D-32). ------------------------------------------------------------------- */ --press-depth: 4px; /* 누르면 내려가는 거리 = 그림자 높이 */ --shadow-block: 0 var(--press-depth) 0 var(--color-ink); /* 누를 수 있는 것 */ --shadow-block-lg: 6px 6px 0 var(--color-ink); /* 큰 카드(결과 카드) */ --shadow-none: 0 0 0 var(--color-ink); /* 눌렸을 때 (그림자 사라짐) */ /* ------------------------------------------------------------------- 10. 움직임 시간 (06 가이드 7장: 질문 전환 0.3초 안팎) - 휴대폰 "동작 줄이기" 설정이 켜져 있으면 아래 @media 에서 0으로 바뀐다. ------------------------------------------------------------------- */ --duration-press: 0.12s; /* 버튼·선택지를 누를 때 "딸깍" */ --duration-screen: 0.3s; /* 다음 질문이 밀려 들어올 때, 진행 바가 늘어날 때 */ --duration-pop: 0.4s; /* 결과 캐릭터가 "툭" 붙을 때 */ --duration-analyzing: 1.5s;/* 분석 중 화면 전체 (아이콘이 통통 튀는 한 바퀴). 바꿀 때는 js/app.js 의 ANALYZING_MS(화면을 보여 주는 시간)도 같이 바꾼다 */ --ease-out: ease-out; --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* 살짝 넘쳤다 돌아오는 곡선. 넘치는 칸이 없는 움직임(시작 → 끝 두 칸)에만 쓴다. 왜: 넘치는 칸(예: 1.04배)이 있는 움직임에 쓰면 두 번 튕긴다 (03 조사 Top 10 7번) */ /* 움직임 거리와 "언제 시작하는지" (그 화면이 나온 때부터 센 시간) */ --slide-distance: 24px; /* 질문이 옆에서 밀려 들어오는 거리 (C안 4-8). 앞으로 = 오른쪽에서, 뒤로 = 왼쪽에서 */ /* 분석 중 화면의 세 단계: 단계마다 "지금 하는 중(노란 원 + 점 3개)" → "다 됨(파란 원 + 체크)". 다 되는 때를 0.25 · 0.6 · 0.95초로 두어, 1.5초 안에서 "모두 다 됨" 모습을 약 0.5초 보여 준다 (03 조사 Top 10 6번: 마지막 체크가 1.2초에 켜지면 다 된 모습이 0.2초도 안 보였음) */ --analyze-step-1: 0.25s; --analyze-step-2: 0.6s; --analyze-step-3: 0.95s; /* 결과 등장 순서 (03 조사 Top 10 5번). 모두 0.6초 안에 끝나고, 버튼은 처음부터 누를 수 있다. 0초 "당신은" 스티커 → 0~0.4초 캐릭터 "툭" → 0.1초부터 유형 이름 → 0.25초부터 반짝이 별·1순위 키트 상자 */ --delay-name: 0.1s; --delay-kit: 0.25s; } /* 결과 이미지 미리보기 창(F-06, 앱 안 브라우저) 뒤를 덮는 반투명 먹색 (먹색 #1B1B1B 의 60%) ::backdrop(창 뒤 덮개)은 조금 오래된 브라우저에서 :root 의 이름표를 물려받지 못해서, 그곳에도 같은 이름을 둔다 */ :root, ::backdrop { --color-backdrop: rgba(27, 27, 27, 0.6); } /* 휴대폰의 "동작 줄이기" 설정이 켜져 있으면 움직임 시간을 0으로 (작업 규칙 13장 6번) - 기다리는 시간(delay)도 0으로 → 모든 것이 처음부터 끝 모습으로 보인다 */ @media (prefers-reduced-motion: reduce) { :root { --duration-press: 0s; --duration-screen: 0s; --duration-pop: 0s; --duration-analyzing: 0s; --slide-distance: 0px; --analyze-step-1: 0s; --analyze-step-2: 0s; --analyze-step-3: 0s; --delay-name: 0s; --delay-kit: 0s; } }