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