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