o2o-negosium-original/landing/app/app.css
Mina Choi db07a60cfa [fix] negosium·negodata·landing: 채팅 진입·부가정보 저장 오류 수정, 모바일 여백·스크롤·노치 대응
- 채팅 링크로 바로 진입하면 세션이 협상생성(1)에 머물러 오프닝 메시지가 seed 되지 않던 문제:
  chat init/messages 에서 participate 와 동일하게 협상중(2)으로 전이(마감 견적·마감시간 초과는 제외)
- 부가정보 저장이 1301 로 실패하던 문제: '협상완료' 요약은 chat_end=false 라 세션이 아직 협상중이므로,
  마지막 말풍선이 summaryRSP/CM 이면 협상중 세션도 저장 허용
- 채팅 언마운트 시 messages 캐시도 제거 — staleTime:Infinity 라 빈 목록이 남아 재진입해도 빈 화면이던 문제
- 채팅 스크롤을 컨테이너 기준 scrollTo 로 변경(rAF 후 실행) — 요약·폼이 뒤늦게 레이아웃되면 중간에 멈추던 문제
- 모바일 채팅 상단 여백 제거(pt-[64px] 는 우측 협상절차 카드가 있는 lg 이상만)
- 노치 대응: viewport-fit=cover + safe-t/b/x 유틸 신설, 헤더·하단 액션 덱·드로어·랜딩 헤더에 적용, h-screen→100dvh
2026-07-23 12:50:40 +09:00

89 lines
3.0 KiB
CSS

@import "tailwindcss";
/* Pretendard 가변폰트 self-host (public/fonts).
format 은 표준 'woff2' 고정 — 'woff2-variations' 는 윈도우 브라우저가 무시함. */
@font-face {
font-family: 'Pretendard Variable';
font-weight: 45 920;
font-style: normal;
font-display: swap;
src: url('/fonts/PretendardVariable.woff2') format('woff2');
}
/*
* 랜딩 디자인 토큰 (Toss 스타일 라이트 팔레트).
* 색은 전부 여기서만 정의하고, 컴포넌트는 토큰 클래스(text-ink, bg-primary …)만 쓴다.
*/
@theme {
--font-sans: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
/* 브랜드 */
--color-primary: #476EFF;
--color-primary-deep: #2F52E0; /* hover */
--color-primary-soft: #ECF0FF; /* 연한 파랑 배경 — 봇 말풍선, 배지 */
/* 텍스트. ink 는 다크 섹션에선 배경색으로도 쓴다 */
--color-ink: #191F28;
--color-ink-soft: #4E5968; /* 보조 본문 */
--color-ink-muted: #8B95A1; /* 캡션 */
--color-ink-faint: #B0B8C1; /* 플레이스홀더·각주 */
/* 면·선 */
--color-surface: #F9FAFB; /* 회색 섹션 배경 */
--color-surface-neu: #F2F4F7; /* 뉴모피즘 히어로 전용 배경 */
--color-fill: #F2F4F6; /* 회색 채움 — 탭 트랙, 보조 버튼 */
--color-fill-hover: #EAECEF;
--color-line: #F2F4F6; /* 섹션 구분선 */
--color-line-strong: #E5E8EB; /* 카드 테두리 */
--color-positive: #0B8F57; /* 낙찰·성공 강조 */
--color-positive-soft: #E8F7EF; /* 연한 초록 배경 — 낙찰 배지 */
--color-accent: #8F52FF; /* 보라 강조 — 결과 탭·히어로 장식 */
--color-accent-soft: #F4EFFF; /* 연한 보라 배경 */
}
html {
scroll-behavior: smooth;
background-color: #ffffff;
color: var(--color-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
}
/* 스크롤은 되지만 스크롤바는 숨김 (협상 콘솔 채팅 영역) */
.scrollbar-none::-webkit-scrollbar {
display: none;
}
.scrollbar-none {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* 은은한 원형 글로우 장식 (히어로 배경) */
.mesh-bg {
position: absolute;
width: 1000px;
height: 1000px;
border-radius: 50%;
background: radial-gradient(circle, rgba(49, 130, 246, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
filter: blur(100px);
pointer-events: none;
}
/* 노치/홈 인디케이터 회피 (viewport-fit=cover 와 짝). 안전영역이 0 인 기기에선 아무 영향 없다.
화면 맨 위/맨 아래에 붙는 바에만 붙인다 — 스크롤되는 본문에는 쓰지 않는다. */
@layer components {
.safe-t { padding-top: env(safe-area-inset-top); }
.safe-b { padding-bottom: env(safe-area-inset-bottom); }
.safe-x {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
}