@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

/**
 * WebChat SDK 전역 스타일
 * CSS Variables를 통한 테마 커스터마이징 지원
 */
/* ==================== Fonts ==================== */
/* ==================== CSS Variables ==================== */
:root {
  /* 색상 */
  --webchat-primary-color: #007bff;
  --webchat-background-color: #ffffff;
  --webchat-text-color: #333333;
  --webchat-border-color: #e0e0e0;
  --webchat-hover-color: #f5f5f5;
  --webchat-error-color: #ff4444;
  --webchat-success-color: #00c851;

  /* 간격 */
  --webchat-spacing-xs: 4px;
  --webchat-spacing-sm: 8px;
  --webchat-spacing-md: 12px;
  --webchat-spacing-lg: 16px;
  --webchat-spacing-xl: 24px;

  /* 타이포그래피 - 해피톡 스타일 */
  --webchat-font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Dotum, 돋움, Helvetica, sans-serif;
  --webchat-font-size-xs: 0.6875rem;  /* 11px */
  --webchat-font-size-sm: 0.75rem;    /* 12px */
  --webchat-font-size-md: 0.875rem;   /* 14px */
  --webchat-font-size-lg: 1rem;       /* 16px */
  --webchat-letter-spacing: -0.5px;

  /* 그림자 */
  --webchat-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --webchat-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --webchat-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* 둥근 모서리 */
  --webchat-radius-sm: 4px;
  --webchat-radius-md: 8px;
  --webchat-radius-lg: 12px;
  --webchat-radius-full: 50%;

  /* 애니메이션 */
  --webchat-transition-fast: 0.15s ease;
  --webchat-transition-normal: 0.3s ease;
  --webchat-transition-slow: 0.5s ease;

  /* Z-Index */
  --webchat-z-floating: 9998;
  --webchat-z-button: 9999;
  --webchat-z-modal: 10000;
}
/* ==================== 기본 리셋 ==================== */
#webchat-widget-container {
  all: initial;
  font-family: var(--webchat-font-family);
  font-size: var(--webchat-font-size-md);
  color: var(--webchat-text-color);
  line-height: 1.5;
  letter-spacing: var(--webchat-letter-spacing);
  word-break: break-all;

  /* 시스템 폰트 크기 설정 반영 */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#webchat-widget-container *,
#webchat-widget-container *::before,
#webchat-widget-container *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* iframe 내부 클릭 투과 설정 */
html, body, #app, #webchat-widget-container {
  pointer-events: none;
  background: transparent;
}
/* 상호작용 가능한 요소는 클릭 허용 */
button, a, input, textarea, select, [role="button"], .pointer-events-auto {
  pointer-events: auto;
}
/* ==================== 공통 스타일 ==================== */
#webchat-widget-container button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  outline: none;
  user-select: none;
}
#webchat-widget-container input,
#webchat-widget-container textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
}
#webchat-widget-container a {
  color: var(--webchat-primary-color);
  text-decoration: none;
}
#webchat-widget-container a:hover {
  text-decoration: underline;
}
/* ==================== 유틸리티 클래스 ==================== */
.webchat-hidden {
  display: none !important;
}
.webchat-invisible {
  visibility: hidden !important;
}
.webchat-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/* ==================== 스크롤바 ==================== */
#webchat-widget-container ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
#webchat-widget-container ::-webkit-scrollbar-track {
  background: transparent;
}
#webchat-widget-container ::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
#webchat-widget-container ::-webkit-scrollbar-thumb:hover {
  background: #999;
}
/* ==================== 반응형 ==================== */
@media (max-width: 768px) {
  :root {
    --webchat-font-size-sm: 0.6875rem;  /* 11px */
    --webchat-font-size-md: 0.8125rem;  /* 13px */
    --webchat-font-size-lg: 0.9375rem;  /* 15px */
  }
}
/* ==================== 접근성 ==================== */
@media (prefers-reduced-motion: reduce) {
  #webchat-widget-container * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ==================== 다크모드 지원 (향후) ==================== */
@media (prefers-color-scheme: dark) {
  /* 다크모드 CSS Variables 오버라이드 */
  /* 추후 구현 */
}
/* ==================== 프린트 ==================== */
@media print {
  #webchat-widget-container {
    display: none !important;
  }
}

/* 전역 스타일 리셋 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#app {
  width: 100%;
  height: 100%;
}