630788d9eb
- 상품목록 버튼 래퍼에 pr-[16px] 추가 — 채팅 스크롤바 오른쪽 끝과 정렬 - 상단 pt-[64px] 를 스크롤 컨테이너 안쪽으로 이동 — 첫 메시지는 협상절차 카드와 높이 유지, 스크롤 시 여백 없이 맨 위까지 표시 - chat-scroll 스크롤바 트랙에 margin-top 64px — 스크롤바 시작 높이를 협상절차 카드 상단과 일치 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
186 lines
6.5 KiB
CSS
186 lines
6.5 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 전용) */
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
--radius: 0.625rem; /* 10px 기준 */
|
|
|
|
/* 브랜드 */
|
|
--brand-500: #5a83c1;
|
|
--brand-600: #254d8b; /* = --primary */
|
|
--brand-700: #1b3965;
|
|
|
|
/* Neutral */
|
|
--neutral-90: #151515;
|
|
--neutral-80: #303030;
|
|
--neutral-70: #606060;
|
|
--neutral-60: #808080;
|
|
--neutral-40: #dadbde;
|
|
--neutral-30: #eaebef;
|
|
--neutral-20: #f0f1f4;
|
|
--neutral-10: #f7f8fa;
|
|
--neutral-00: #ffffff;
|
|
|
|
/* 상태 / 테이블 */
|
|
--negative: #e71c3b;
|
|
--info: #4880ef;
|
|
--table-header: #e3e8f1;
|
|
--table-hover: #dbe6fc;
|
|
--table-selected: #b6ccf9;
|
|
|
|
/* 시맨틱 */
|
|
--background: var(--neutral-00);
|
|
--foreground: var(--neutral-90);
|
|
--surface: #eef0f4; /* 중립 라이트 그레이 (콘텐츠 면, 블루기 최소) */
|
|
|
|
--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: #10b981;
|
|
--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);
|
|
|
|
/* 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-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 */
|
|
}
|
|
|
|
@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);
|
|
}
|