/* ============================================================================ * HDS v6 — 라이더타운 회인ㅎㅇ 디자인 토큰 · 구현 단일 출처 * * 근거 정본 : 디자인/브랜드가이드북-ver0.98-240403.pdf (© 2024 삶은동네) * 문서 : 디자인/디자인시스템.html (이 파일을 import해서 렌더링한다) * 적용 대상 : index.html · studio/ * * ⚠ 이 파일이 값의 단일 출처다. 화면 CSS에 hex·px을 직접 쓰지 않는다. * 새 값이 필요하면 여기 먼저 추가하고 문서를 갱신한다. * * 램프 산출 : 가이드북 정본 4색을 앵커로 고정하고 OKLCH 채도 곡선으로 보간. * red-600 #C8123D · yellow-500 #F6AB00 · green-400 #9ACC77 · sand-200 #FEECD2 * 다크는 단순 반전이 아니라 "각 칸의 직무를 라이트와 일치"시켜 재산출했다 * (예: red-600은 두 테마 모두 솔리드 버튼 — 흰 글자 대비 5.8:1 / 6.1:1). * ==========================================================================*/ /* ───────────────────────── L1 · 팔레트 (라이트) ───────────────────────── */ :root { /* 쥬쥬베 레드 — 활력 · BI */ --red-100:#FFEAED; --red-200:#FFDADF; --red-300:#FFB8C0; --red-400:#FA8B97; --red-500:#E75669; --red-600:#C8123D; --red-700:#A1012C; --red-800:#790B22; --red-900:#55101A; --red-1000:#330A0F; /* 선플라워 옐로우 — 밝음 */ --yellow-100:#FFF4E1; --yellow-200:#FFE8C3; --yellow-300:#FFD38F; --yellow-400:#FDC059; --yellow-500:#F6AB00; --yellow-600:#D78C00; --yellow-700:#B36E00; --yellow-800:#8A5100; --yellow-900:#653907; --yellow-1000:#412307; /* 그루빙 그린 — 평온 */ --green-100:#EBF9E5; --green-200:#D8F1CB; --green-300:#BCE2A4; --green-400:#9ACC77; --green-500:#6CB35D; --green-600:#3E9245; --green-700:#237236; --green-800:#17552A; --green-900:#0E3D20; --green-1000:#092613; /* 갈릭베이지 — 조화 · 캔버스 */ --sand-100:#FFF7ED; --sand-200:#FEECD2; --sand-300:#F8DFBB; --sand-400:#EFCFA1; --sand-500:#DCB783; --sand-600:#BB976A; --sand-700:#8B6E4D; --sand-800:#604B35; --sand-900:#3E3021; --sand-1000:#221810; /* 뉴트럴 — 갈릭베이지 색상(H70)에 C.006. 캔버스와 같은 계열 */ --gray-0:#FFFFFF; --gray-100:#FDF9F6; --gray-200:#F4F1ED; --gray-300:#EEEAE7; --gray-400:#E5E2DF; --gray-500:#D5D2CE; --gray-600:#B0ADAA; --gray-700:#767370; --gray-800:#524F4C; --gray-900:#32302D; --gray-1000:#181613; /* 정보색 — 가이드북에 없음(확장) */ --blue-100:#EBF5FF; --blue-700:#27639C; /* 데이터 시각화 — L .60 통일, 서열 없음(확장) */ --data-1:#BB6166; --data-2:#A87520; --data-3:#59914D; --data-4:#009393; --data-5:#4584C2; --data-6:#9E68AB; } /* ───────────────────────── L1 · 팔레트 (다크) ───────────────────────── 팔레트 값만 갈린다. 아래 L2 시맨틱은 한 벌로 두 테마를 감당한다. ⚠ 다크 옵트아웃: 를 쓰면 OS가 다크여도 라이트로 고정된다. 아직 다크 QA가 끝나지 않은 화면(워크스페이스 — 컴포넌트에 하드코딩 색이 남아 있다)은 이 플래그로 잠가 두고, 정리가 끝나면 플래그만 제거하면 다크가 열린다. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --red-100:#37181A; --red-200:#4E1F24; --red-300:#69232B; --red-400:#891F30; --red-500:#A61635; --red-600:#C1133B; --red-700:#DE6676; --red-800:#F599A6; --red-900:#FFC6CE; --red-1000:#FFE5E9; --yellow-100:#35220C; --yellow-200:#4B2E09; --yellow-300:#653E00; --yellow-400:#885700; --yellow-500:#B47800; --yellow-600:#D28F00; --yellow-700:#F6AB00; --yellow-800:#FFC669; --yellow-900:#FFDCA3; --yellow-1000:#FFEED2; --green-100:#122A18; --green-200:#183C1F; --green-300:#1F5125; --green-400:#316D32; --green-500:#4F8C41; --green-600:#71AB53; --green-700:#94C773; --green-800:#B3DD99; --green-900:#CEECBE; --green-1000:#E4F7DC; --sand-100:#14100A; --sand-200:#1F180F; --sand-300:#2F2517; --sand-400:#403321; --sand-500:#5D4D37; --sand-600:#867153; --sand-700:#AD9470; --sand-800:#D5B991; --sand-900:#EFD7B5; --sand-1000:#FEECD2; --gray-0:#090705; --gray-100:#141210; --gray-200:#211F1C; --gray-300:#2C2A27; --gray-400:#3A3735; --gray-500:#524F4C; --gray-600:#777471; --gray-700:#9B9894; --gray-800:#C0BDBA; --gray-900:#DFDCD8; --gray-1000:#F4F1ED; --blue-100:#0E2438; --blue-700:#7FB2E0; --data-1:#D98A8E; --data-2:#C89A4E; --data-3:#7FB673; --data-4:#35B4B4; --data-5:#6FA6E0; --data-6:#BE8AC9; } } /* ───────────────────────── L2 · 시맨틱 ───────────────────────── */ :root { /* 잉크 — 괄호 안은 (흰 표면 / 캔버스) 대비 */ --fg-ink:var(--gray-1000); /* 18.1 / 15.6 */ --fg-sub:var(--gray-800); /* 8.1 / 7.0 */ --fg-faint:var(--gray-700); /* 4.7 / 4.1 — 흰 표면 전용 */ --fg-disabled:var(--gray-600); --fg-inverted:var(--gray-0); --fg-brand:var(--red-700); /* 8.2 / 7.1 */ --fg-on-brand:#FFFFFF; --fg-on-deep:#FFFFFF; --fg-on-deep-sub:var(--red-300); --fg-ok:var(--green-700); --fg-warn:var(--yellow-800); --fg-bad:var(--red-700); --fg-info:var(--blue-700); /* 배경 */ /* 페이지 바닥 = 거의 흰색(웜). 카드가 그 위에 떠 보이도록 한 단만 낮췄다. ※ 가이드북은 갈릭베이지를 '조화'라는 브랜드 4색의 하나로만 정의하고 페이지 배경으로 쓰라고 하지 않는다(가이드북 슬라이드 지면이 그 색일 뿐). 따라서 베이지는 캔버스가 아니라 --bg-band(밴드·강조 섹션)로 쓴다. */ --bg-canvas:var(--gray-0); --bg-surface:var(--gray-0); /* 카드·시트·입력 */ --bg-fill:var(--gray-200); /* 표면 위 채움·표 헤더 */ --bg-band:var(--sand-200); /* 갈릭베이지 — 밴드·강조 섹션 전용 */ --bg-band-soft:var(--sand-100); --bg-brand:var(--red-600); /* 주 행동 — 흰 글자 5.8:1 */ --bg-brand-hover:var(--red-700); --bg-brand-tint:var(--red-100); --bg-brand-tint-hover:var(--red-200); --bg-brand-deep:var(--red-900); --bg-accent:var(--yellow-500); /* 강조 밴드 — 화면당 1~2회 */ --bg-accent-tint:var(--yellow-100); --bg-disabled:var(--gray-300); --bg-ok:var(--green-100); --bg-warn:var(--yellow-100); --bg-bad:var(--red-100); --bg-info:var(--blue-100); /* 선 */ /* 선은 중성 그레이다. 베이지(sand)는 밴드 전용 — 흰 지면에서 누런 선으로 보인다. */ --stroke-line:var(--gray-400); --stroke-subtle:var(--gray-300); --stroke-brand:var(--red-300); --stroke-ink:var(--gray-1000); --focus:var(--red-600); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-surface:var(--gray-200); /* 다크에선 카드가 페이지보다 밝다 */ --bg-fill:var(--gray-300); --bg-brand-deep:var(--red-100); --fg-on-deep-sub:var(--red-700); } } /* ───────────────────────── L1 · 치수 · 타입 · 모션 ───────────────────────── 전부 번호 체계로 통일한다(간격 x · 라운드 r · 크기 t · 굵기 w · 그림자 s · 지속 d). */ :root { --x1:4px; --x1_5:6px; --x2:8px; --x2_5:10px; --x3:12px; --x4:16px; --x5:20px; --x6:24px; --x8:32px; --x10:40px; --x12:48px; --x14:56px; --x16:64px; --r1:8px; --r2:14px; --r3:20px; --r4:28px; --r-full:999px; /* 크기 단계는 참고 체계(AXDS v1 ← SEED)의 실사용 치수를 그대로 채용했다 */ --t1:13px; /* 캡션·표·태그 */ --t2:14px; /* 카드 본문·보조·버튼·폼 라벨 */ --t3:16px; /* 본문 기본·입력 */ --t4:18px; /* 카드 제목 */ --t5:24px; /* 섹션 제목 */ --t6:clamp(26px,3vw,32px); /* 화면 제목 */ --t7:clamp(44px,8.5vw,100px); /* 디스플레이 */ /* [정본] 가이드북: 일반적인 글 Medium · 강조하는 글 Bold · 비 강조 글 Light → 본문 기본값은 w2(Medium)다. w1(Light)은 '비 강조' 전용이며 본문에 쓰지 않는다. */ --w1:300; --w2:500; --w3:700; --s1:0 1px 2px rgba(85,16,26,.05), 0 1px 3px rgba(85,16,26,.05); --s2:0 24px 48px -24px rgba(85,16,26,.35); --d1:140ms; --d2:200ms; --d3:400ms; --ease:cubic-bezier(.22,.61,.36,1); --enter:cubic-bezier(0,0,.15,1); --pressed:.97; --font-body:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont, 'Apple SD Gothic Neo',system-ui,sans-serif; --font-title:'HakgyoansimMulgyeol',var(--font-body); /* 미확보 시 자동 폴백 */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --s1:0 1px 3px rgba(0,0,0,.5); --s2:0 24px 48px -24px rgba(0,0,0,.7); } } @media (prefers-reduced-motion: reduce) { :root { --pressed:1 } } /* ───────────────────────── 기본 요소 ───────────────────────── */ body { /* 본문 = t3 16px · Medium 500 · 행간 1.5(=24px 라인박스). 참고 체계와 동일 규격 */ font-family:var(--font-body); font-size:var(--t3); line-height:1.5; font-weight:var(--w2); color:var(--fg-ink); background:var(--bg-canvas); -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:break-word; /* 한글 어절 단위 줄바꿈 */ } code,pre,kbd { word-break:normal; overflow-wrap:anywhere; } :focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r1); } ::selection { background:var(--bg-brand); color:var(--fg-on-brand); } /* ───────────────────────── 유틸리티 ───────────────────────── 화면 코드는 팔레트(--red-600)가 아니라 아래 클래스나 L2 시맨틱을 쓴다. */ .bg-canvas{background:var(--bg-canvas)} .bg-surface{background:var(--bg-surface)} .bg-fill{background:var(--bg-fill)} .bg-brand{background:var(--bg-brand);color:var(--fg-on-brand)} .bg-tint{background:var(--bg-brand-tint)} .bg-deep{background:var(--bg-brand-deep);color:var(--fg-on-deep)} .text-ink{color:var(--fg-ink)} .text-sub{color:var(--fg-sub)} .text-faint{color:var(--fg-faint)} .text-brand{color:var(--fg-brand)} .border-line{border:1px solid var(--stroke-line)} .border-subtle{border:1px solid var(--stroke-subtle)} .r1{border-radius:var(--r1)} .r2{border-radius:var(--r2)} .r3{border-radius:var(--r3)} .r4{border-radius:var(--r4)} .r-full{border-radius:var(--r-full)} .s1{box-shadow:var(--s1)} .s2{box-shadow:var(--s2)} .t1{font-size:var(--t1)} .t2{font-size:var(--t2)} .t3{font-size:var(--t3)} .t4{font-size:var(--t4)} .t5{font-size:var(--t5)} .t6{font-size:var(--t6);font-family:var(--font-title)} .t7{font-size:var(--t7);font-family:var(--font-title)} .w1{font-weight:var(--w1)} .w2{font-weight:var(--w2)} .w3{font-weight:var(--w3)} .num{font-variant-numeric:tabular-nums lining-nums} /* ───────────────────────── 컴포넌트 ───────────────────────── */ .card { background:var(--bg-surface); border:1px solid var(--stroke-subtle); border-radius:var(--r3); padding:var(--x6); box-shadow:var(--s1); } .btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--x1_5); min-height:48px; padding:12px 24px; font-size:var(--t2); font-weight:var(--w3); font-family:var(--font-body); border:1px solid transparent; border-radius:var(--r2); cursor:pointer; white-space:nowrap; transition:transform var(--d1) var(--enter), background var(--d1) var(--ease), border-color var(--d1) var(--ease); } .btn:active { transform:scale(var(--pressed)); } .btn-md { min-height:40px; padding:9px 18px; font-size:var(--t2); } .btn-sm { min-height:32px; padding:6px 14px; font-size:var(--t1); } .btn-brand { background:var(--bg-brand); color:var(--fg-on-brand); border-color:var(--bg-brand); } .btn-brand:hover { background:var(--bg-brand-hover); border-color:var(--bg-brand-hover); } .btn-ink { background:var(--fg-ink); color:var(--bg-surface); border-color:var(--fg-ink); } .btn-line { background:transparent; color:var(--fg-ink); border-color:var(--stroke-line); } .btn-line:hover { background:var(--bg-fill); } .btn-tint { background:var(--bg-brand-tint); color:var(--fg-brand); } .btn-tint:hover { background:var(--bg-brand-tint-hover); } /* 파괴적 행동은 외곽선만 — 채움은 주 행동 전용(브랜드 레드와 위험색 상호대비 1.41:1) */ .btn-danger { background:transparent; color:var(--fg-bad); border-color:var(--fg-bad); } .btn-danger:hover { background:var(--bg-bad); } .btn[disabled] { background:var(--bg-disabled); color:var(--fg-disabled); border-color:transparent; cursor:not-allowed; } /* 입력은 흰 표면 위에만 — 플레이스홀더가 캔버스 위에서 4.1:1로 기준 미달 */ .input { width:100%; min-height:48px; padding:0 var(--x4); font-family:var(--font-body); font-size:var(--t3); color:var(--fg-ink); background:var(--bg-surface); border:1px solid var(--stroke-line); border-radius:var(--r2); transition:border-color var(--d1) var(--ease); } .input::placeholder { color:var(--fg-faint); } .input:focus { outline:none; border-color:var(--bg-brand); box-shadow:inset 0 0 0 1px var(--bg-brand); } .input-multi { min-height:96px; padding:var(--x3) var(--x4); line-height:1.7; resize:vertical; } .field-label { display:block; font-size:var(--t2); font-weight:var(--w2); color:var(--fg-sub); margin-bottom:var(--x1_5); } /* 태그는 알약 — BI의 'ㅇ'과 최소형 로고가 알약꼴이다(브랜드 형태 언어) */ .tag { display:inline-flex; align-items:center; gap:var(--x1); border-radius:var(--r-full); padding:3px 12px; font-size:var(--t1); font-weight:var(--w3); white-space:nowrap; } .tag-ok{background:var(--bg-ok);color:var(--fg-ok)} .tag-warn{background:var(--bg-warn);color:var(--fg-warn)} .tag-bad{background:var(--bg-bad);color:var(--fg-bad)} /* ✕ 기호 병기 필수 */ .tag-info{background:var(--bg-info);color:var(--fg-info)} .tag-brand{background:var(--bg-brand);color:var(--fg-on-brand)} .tag-mut{background:var(--bg-fill);color:var(--fg-sub)} .callout { border-left:4px solid var(--bg-brand); background:var(--bg-brand-tint); padding:var(--x4) var(--x5); border-radius:0 var(--r2) var(--r2) 0; } .callout-accent { border-left-color:var(--bg-accent); background:var(--bg-accent-tint); } /* ───────────────────────── 시그니처 3장치 (이 외 장식 금지) ───────────────────────── ① 와인 → 레드 하이라이트 ② 한글 스퀘어 라벨 ③ 도로 중앙선 */ .hl { background:linear-gradient(transparent 60%, color-mix(in srgb, var(--bg-brand) 28%, transparent) 60%); } .lab { font-size:var(--t1); font-weight:var(--w3); color:var(--bg-brand); display:flex; align-items:center; gap:var(--x2); } .lab::before { content:''; width:9px; height:9px; background:var(--bg-brand); flex:none; } .roadline { height:3px; opacity:.9; background:repeating-linear-gradient(90deg, var(--bg-brand) 0 36px, transparent 36px 68px); } .deep .hl { background:linear-gradient(transparent 58%, color-mix(in srgb, var(--fg-on-deep-sub) 42%, transparent) 58%); } .deep .lab { color:var(--fg-on-deep-sub); } .deep .lab::before { background:var(--fg-on-deep-sub); } .deep { background:var(--bg-brand-deep); color:var(--fg-on-deep); }