212 lines
7.6 KiB
CSS
212 lines
7.6 KiB
CSS
/* Pretendard (CDN, dynamic-subset) */
|
|
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
|
|
@import "tailwindcss";
|
|
|
|
/* 디자인 토큰 (light 전용) — 토스풍(Toss) 팔레트 */
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
--radius: 0.75rem; /* 12px 기준 (토스풍 라운드) */
|
|
|
|
/* 브랜드 (Toss blue) */
|
|
--brand-500: #6098f5; /* ring / 보조 */
|
|
--brand-600: #3182f6; /* = --primary */
|
|
--brand-700: #1b64da; /* hover / pressed */
|
|
--brand-light: #e8f3ff; /* 연한 브랜드 배경 (선택행·AI 말풍선) */
|
|
|
|
/* Neutral (cool gray) */
|
|
--neutral-90: #191f28; /* text-primary */
|
|
--neutral-80: #333d4b;
|
|
--neutral-70: #4e5968; /* text-secondary */
|
|
--neutral-60: #8b95a1; /* text-caption */
|
|
--neutral-50: #b0b8c1; /* placeholder */
|
|
--neutral-40: #d1d6db;
|
|
--neutral-30: #e5e8eb; /* border-card */
|
|
--neutral-20: #f2f4f6; /* bg-gray */
|
|
--neutral-10: #f9fafb; /* bg-section */
|
|
--neutral-00: #ffffff;
|
|
|
|
/* 상태 / 테이블 */
|
|
--negative: #e71c3b;
|
|
--info: #3182f6;
|
|
--table-header: #f8f9fa;
|
|
--table-hover: #f2f4f6;
|
|
--table-selected: var(--brand-light);
|
|
|
|
/* 시맨틱 */
|
|
--background: var(--neutral-00);
|
|
--foreground: var(--neutral-90);
|
|
--surface: #f9fafb; /* 콘텐츠 면 (토스 섹션 배경) */
|
|
|
|
--card: var(--neutral-00);
|
|
--card-foreground: var(--neutral-90);
|
|
--popover: var(--neutral-00);
|
|
--popover-foreground: var(--neutral-90);
|
|
|
|
--primary: var(--brand-600);
|
|
--primary-foreground: var(--neutral-00);
|
|
--secondary: var(--neutral-20);
|
|
--secondary-foreground: var(--neutral-90);
|
|
--muted: var(--neutral-10);
|
|
--muted-foreground: var(--neutral-60);
|
|
--accent: var(--neutral-20);
|
|
--accent-foreground: var(--neutral-90);
|
|
|
|
--border: var(--neutral-30);
|
|
--input: var(--neutral-30);
|
|
--ring: var(--brand-500);
|
|
|
|
--destructive: var(--negative);
|
|
--success: #0b8f57;
|
|
--warning: #f59e0b;
|
|
}
|
|
|
|
/* Tailwind 테마 매핑 (@theme inline) */
|
|
@theme inline {
|
|
/* 브랜드 */
|
|
--color-brand-500: var(--brand-500);
|
|
--color-brand-600: var(--brand-600);
|
|
--color-brand-700: var(--brand-700);
|
|
--color-brand-light: var(--brand-light);
|
|
|
|
/* Neutral */
|
|
--color-neutral-90: var(--neutral-90);
|
|
--color-neutral-80: var(--neutral-80);
|
|
--color-neutral-70: var(--neutral-70);
|
|
--color-neutral-60: var(--neutral-60);
|
|
--color-neutral-50: var(--neutral-50);
|
|
--color-neutral-40: var(--neutral-40);
|
|
--color-neutral-30: var(--neutral-30);
|
|
--color-neutral-20: var(--neutral-20);
|
|
--color-neutral-10: var(--neutral-10);
|
|
--color-neutral-00: var(--neutral-00);
|
|
|
|
/* 상태 / 테이블 */
|
|
--color-negative: var(--negative);
|
|
--color-info: var(--info);
|
|
--color-table-header: var(--table-header);
|
|
--color-table-hover: var(--table-hover);
|
|
--color-table-selected: var(--table-selected);
|
|
|
|
/* 시맨틱 */
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-surface: var(--surface);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-destructive: var(--destructive);
|
|
--color-success: var(--success);
|
|
--color-warning: var(--warning);
|
|
|
|
/* 폰트 */
|
|
--font-sans: 'Pretendard Variable', 'Geist Variable', system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
|
|
--font-heading: var(--font-sans);
|
|
|
|
/* 모서리 반경 (--radius 배수) */
|
|
--radius-sm: calc(var(--radius) * 0.6); /* 6px */
|
|
--radius-md: calc(var(--radius) * 0.8); /* 8px */
|
|
--radius-lg: var(--radius); /* 10px */
|
|
--radius-xl: calc(var(--radius) * 1.4); /* 14px */
|
|
--radius-2xl: calc(var(--radius) * 1.8); /* 18px */
|
|
--radius-3xl: calc(var(--radius) * 2.2); /* 22px */
|
|
--radius-4xl: calc(var(--radius) * 2.6); /* 26px */
|
|
|
|
/* 애니메이션 (토스풍 미세 전환) */
|
|
--animate-fade-in: fadeIn 0.2s ease-out forwards;
|
|
--animate-scale-in: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
--animate-spin-slow: spin 8s linear infinite;
|
|
--animate-pulse-slow: pulseSlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes scaleIn {
|
|
from { opacity: 0; transform: scale(0.98); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
@keyframes pulseSlow {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.9; transform: scale(1.015); }
|
|
}
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
margin: 0;
|
|
min-height: 100svh;
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
font-synthesis: none;
|
|
}
|
|
}
|
|
|
|
/* 타이포그래피 스케일 (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;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--border);
|
|
border-radius: 9999px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--muted-foreground);
|
|
}
|
|
|
|
/* 채팅 영역 스크롤바 (배경과 구분되게 진하게) */
|
|
/* 트랙 상단 64px 여백: 콘텐츠는 맨 위까지 스크롤되지만 스크롤바는 우측 협상절차 카드 상단과 같은 높이에서 시작 */
|
|
.chat-scroll::-webkit-scrollbar-track {
|
|
margin-top: 64px;
|
|
}
|
|
.chat-scroll::-webkit-scrollbar-thumb {
|
|
background-color: var(--neutral-40);
|
|
}
|
|
.chat-scroll::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--neutral-60);
|
|
}
|