From 54b44c087780e302f59470ee0ca5c9824869b18c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=AF=BC=ED=97=8C?= Date: Wed, 17 Jun 2026 14:37:48 +0900 Subject: [PATCH] =?UTF-8?q?style(front):=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=ED=86=A0=ED=81=B0=20=EC=A0=95=EB=B9=84=20(=EC=B1=84=ED=8C=85?= =?UTF-8?q?=20=ED=83=80=EC=9D=B4=ED=8F=AC=20+=20=EB=B8=8C=EB=9E=9C?= =?UTF-8?q?=EB=93=9C=20=EC=B1=84=EB=8F=84=20=EC=9D=B8=ED=95=98)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 타이포그래피 스케일 추가 (headline/title/body/reject 등) — 채팅에서 사용 - 채팅 영역 스크롤바 스타일(.chat-scroll) 추가 - 브랜드 스케일 채도 추가 인하, surface(콘텐츠 면) 톤 조정 Co-Authored-By: Claude Opus 4.8 (1M context) --- front/src/index.css | 39 +++++++++++++++++++++++++++++++++++---- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/front/src/index.css b/front/src/index.css index 445ac8a..ae917ee 100644 --- a/front/src/index.css +++ b/front/src/index.css @@ -9,9 +9,9 @@ --radius: 0.625rem; /* 10px 기준 */ /* 브랜드 */ - --brand-500: #4e81cd; - --brand-600: #124a9e; /* = --primary */ - --brand-700: #0d3673; + --brand-500: #5a83c1; + --brand-600: #254d8b; /* = --primary */ + --brand-700: #1b3965; /* Neutral */ --neutral-90: #151515; @@ -34,7 +34,7 @@ /* 시맨틱 */ --background: var(--neutral-00); --foreground: var(--neutral-90); - --surface: #eceff5; /* 브랜드 틴트 쿨 그레이 (콘텐츠 면) */ + --surface: #eef0f4; /* 중립 라이트 그레이 (콘텐츠 면, 블루기 최소) */ --card: var(--neutral-00); --card-foreground: var(--neutral-90); @@ -136,6 +136,29 @@ } } +/* 타이포그래피 스케일 (headline / title / body / reject) */ +@layer components { + .headline-3 { font-size: 24px; font-weight: 700; line-height: 30px; letter-spacing: -0.48px; } + .headline-4 { font-size: 20px; font-weight: 700; line-height: 30px; letter-spacing: -0.4px; } + .title-1 { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; } + .title-2 { font-size: 18px; font-weight: 600; letter-spacing: -0.36px; } + .title-3 { font-size: 16px; font-weight: 600; letter-spacing: -0.32px; } + .title-5 { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; } + .title-6 { font-size: 13px; font-weight: 600; letter-spacing: -0.26px; } + .body-1 { font-size: 20px; font-weight: 400; line-height: 30px; letter-spacing: -0.4px; } + .body-3 { font-size: 16px; font-weight: 400; letter-spacing: -0.32px; } + .body-5 { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; } + .body-1-read-r { font-size: 20px; font-weight: 400; line-height: 150%; letter-spacing: -0.4px; } + .body-1-read-b { font-size: 20px; font-weight: 700; line-height: 150%; letter-spacing: -0.4px; } + .caption-1 { font-size: 13px; font-weight: 400; letter-spacing: -0.26px; } + /* 메뉴 섹션 제목 (MD안내/협상절차/이용방법) */ + .menu-title { font-size: 20px; font-weight: 700; line-height: 25px; letter-spacing: -0.4px; } + /* 재견적/재협상 폼 */ + .reject { font-size: 18px; font-weight: 400; line-height: 150%; letter-spacing: -0.4px; color: var(--neutral-90); } + .reject-2 { font-size: 18px; font-weight: 700; line-height: 150%; letter-spacing: -0.4px; color: var(--neutral-90); } + .reject-gray { font-size: 18px; font-weight: 400; line-height: 150%; letter-spacing: -0.4px; color: var(--neutral-60); } +} + /* 스크롤바 (webkit) */ ::-webkit-scrollbar { width: 6px; @@ -148,3 +171,11 @@ ::-webkit-scrollbar-thumb:hover { background-color: var(--muted-foreground); } + +/* 채팅 영역 스크롤바 (배경과 구분되게 진하게) */ +.chat-scroll::-webkit-scrollbar-thumb { + background-color: var(--neutral-40); +} +.chat-scroll::-webkit-scrollbar-thumb:hover { + background-color: var(--neutral-60); +}