o2o-negosium-original/landing/app/app.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');
}

/* 영문 디스플레이 서체 — 이탤릭 가변(400~900), latin 서브셋.
   INFINITH 디자인 시스템과 같은 Playfair Display 를 쓴다. */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/PlayfairDisplay-Italic.woff2') format('woff2');
}

/*
 * 랜딩 디자인 토큰.
 * 색은 전부 여기서만 정의하고, 컴포넌트는 토큰 클래스(text-ink, bg-primary …)만 쓴다.
 *
 * 구조는 두 겹이다.
 *   - 다크 무대(stage) : 히어로·협상 데모. 협상이 벌어지는 순간에만 조명을 끈다.
 *   - 라이트 본문      : 나머지 섹션. 광고 유입 전환율을 위해 밝게 유지.
 */
@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;
  /* 영문 디스플레이 — 라벨·강조 전용. 한글 본문은 절대 이걸로 쓰지 않는다
     (Playfair 는 한글 글리프가 없어 Pretendard 로 폴백되며 톤이 깨진다). */
  --font-display: 'Playfair Display', 'Pretendard Variable', Georgia, serif;

  /* ── 브랜드 액센트 ──────────────────────────────────────────────
     여기 3줄이 브랜드 색상각의 단일 소스다. 딥틸(#005961 / #00434A / #E3F4F5)로
     되돌리려면 이 3줄만 갈아끼우면 되고, 나머지 토큰·컴포넌트는 손대지 않는다. */
  --color-primary: #0101F3;      /* 일렉트릭 블루 — 라이트 배경 전용. 레퍼런스 실측값 */
  /* 다크 무대용 액센트. #0101F3 을 #070E24 위에 얹으면 명암비가 2.0:1 로,
     WCAG 최소(4.5:1)의 절반도 안 된다 — 둘 다 어두운 색이라 그렇다.
     아래 값은 무대 배경 대비 약 6:1 이다. 무대 위 파란 글자는 반드시 이걸 쓴다. */
  --color-primary-on-stage: #7C8CFF;
  --color-primary-deep: #0101C4; /* hover */
  --color-primary-soft: #EAEAFF; /* 연한 배경 — 에이전트 말풍선, 배지 */

  /* ── 상대편(공급사) ────────────────────────────────────────────
     협상은 두 주체가 매 턴 구분돼야 읽힌다. 민트는 블루와 색상각 70° 차이라
     구분되면서도 같은 한색 계열이라 화면이 따로 놀지 않는다.
     NEGO WIZ 로고 민트(#0FFFD6)에서 왔다. */
  --color-counter: #0FFFD6;         /* 무대 위 상대측 텍스트·강조 */
  --color-counter-deep: #077A66;    /* 라이트 배경 위 텍스트 (흰 바탕 대비 확보용) */
  --color-counter-surface: #0A2F35; /* 무대 위 상대측 말풍선 바닥 */

  /* ── 다크 무대 ────────────────────────────────────────────────── */
  --color-stage: #070E24;        /* 무대 바닥 (그라데이션의 중간값) */
  --color-stage-deep: #03060F;   /* 무대 가장자리 — 어두워지며 공간이 뒤로 물러난다 */
  --color-stage-lift: #16205A;   /* 무대 상단 광원 — 여기서 빛이 온다 */
  --color-stage-raised: #101A3D; /* 무대 위 카드·상대측 말풍선 */
  --color-stage-line: #1E2A52;   /* 무대 위 테두리 */
  --color-on-stage: #FFFFFF;        /* 무대 위 1차 텍스트 */
  /* 2·3차 텍스트는 중립 회색 대신 연보라 계열로 둔다. 네이비 위에 색상각이 다른
     회색을 얹으면 탁해지는데, 같은 한색 가족이면 밝게 올려도 화면이 정돈된다.
     #F5F3FF 는 ADO2 디자인 시스템의 연보라 패널 색이다. */
  --color-on-stage-soft: #F5F3FF;   /* 무대 위 2차 텍스트 — 2톤 헤드라인의 약한 쪽 */
  --color-on-stage-muted: #C6C0E4;  /* 무대 위 라벨·캡션 */

  /* ── 라이트 본문 텍스트 ────────────────────────────────────────
     먹색에 브랜드 색조를 섞어둔다. 순수 회색이면 페이지가 따로 논다. */
  --color-ink: #0B1024;
  --color-ink-soft: #454E6B; /* 보조 본문 */
  --color-ink-muted: #838CAA; /* 캡션 */
  --color-ink-faint: #AAB1C7; /* 플레이스홀더·각주 */

  /* 면·선 */
  --color-surface: #F7F8FC; /* 회색 섹션 배경 */
  --color-surface-neu: #F1F3F9; /* 보조 섹션 배경 */
  --color-fill: #F0F2F8; /* 회색 채움 — 탭 트랙, 보조 버튼 */
  --color-fill-hover: #E6E9F2;
  --color-line: #EEF0F6; /* 섹션 구분선 */
  --color-line-strong: #E0E4EE; /* 카드 테두리 */

  --color-positive: #0B8F57; /* 낙찰·성공 강조 */
  --color-positive-soft: #E8F7EF; /* 연한 초록 배경 — 낙찰 배지 */

  --color-accent: #8F52FF; /* 보라 강조 — 결과 탭·히어로 장식 */
  --color-accent-soft: #F4EFFF; /* 연한 보라 배경 */

  /* ── 모서리 ────────────────────────────────────────────────────
     레퍼런스 실측은 3.5~7px 이다. 20~32px 짜리 뭉툭한 카드가 제네릭 SaaS 의
     가장 강한 신호라, 여기서는 세 값으로만 고정한다.
       card    — 카드·패널·목업
       control — 탭·배지·입력 등 작은 요소
       full    — 버튼·아바타 (Tailwind 기본 rounded-full 사용) */
  --radius-card: 8px;
  --radius-control: 4px;
}

/* 다크 무대 배경 그라데이션.
   단색 배경은 아무리 입자에 원근을 줘도 평면으로 읽힌다. 위쪽에 광원을 두고
   가장자리로 갈수록 어두워지게 하면 화면 자체에 안팎이 생겨 깊이가 성립한다. */
.stage-bg {
  background:
    radial-gradient(120% 78% at 50% 8%, var(--color-stage-lift) 0%, transparent 62%),
    radial-gradient(100% 100% at 50% 42%, var(--color-stage) 0%, var(--color-stage-deep) 100%);
}

/* 드래그 선택 색.
   루트에 걸린 selection:text-primary 는 라이트 본문 기준이다. 그 값(#0101F3)을 다크 무대
   위에 얹으면 명암비가 2.0:1 이라 — 위 --color-primary-on-stage 주석이 경고하는 바로 그
   상황 — 무대 섹션에서 텍스트를 드래그하면 글자가 사라진다.
   무대 안에서는 무대용 액센트로 갈아끼운다. 라이트 본문은 기존 그대로. */
.stage-bg ::selection,
[data-stage-hero] ::selection {
  background-color: color-mix(in srgb, var(--color-primary-on-stage) 30%, transparent);
  color: var(--color-on-stage);
}

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);
  }
}