@font-face {
  font-family: 'Paperlogy';
  src: url('https://www.rozial.kr/font/Paperlogy-1Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://www.rozial.kr/font/Paperlogy-2ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://www.rozial.kr/font/Paperlogy-3Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://www.rozial.kr/font/Paperlogy-4Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://www.rozial.kr/font/Paperlogy-5Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://www.rozial.kr/font/Paperlogy-6SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://www.rozial.kr/font/Paperlogy-7Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://www.rozial.kr/font/Paperlogy-8ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://www.rozial.kr/font/Paperlogy-9Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.text-gradient {
  background: linear-gradient(120deg, #f97316, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html {
  scroll-behavior: smooth;
}

/* 헤더 배경 완전 투명 처리 */
#navbar {
  background-color: white !important;
  background: white !important;
}

.product-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-10px);
}

.faq-item {
  cursor: pointer;
}

.faq-answer {
  animation: fadeIn 0.3s ease-in-out;
}

select option {
  background-color: white;
  color: #1f2937;
}

/* 단어 단위 줄바꿈 (모바일 최적화) */
body, p, span, div, h1, h2, h3, h4, h5, h6, a, button, label {
  word-break: keep-all;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 긴 단어는 강제 줄바꿈 */
@media (max-width: 768px) {
  body, p, span, div, h1, h2, h3, h4, h5, h6, a, button, label {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  
  /* 모바일에서 텍스트 가독성 향상 */
  p, span, div {
    line-height: 1.7;
  }
  
  /* 모바일에서 긴 단어 처리 */
  h1, h2, h3, h4, h5, h6 {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* 터치 최적화 */
.touch-manipulation {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 챗봇 입력 영역 모바일 최적화 */
#chatbot-input {
  box-sizing: border-box;
  width: 100%;
}

/* 챗봇 모달 스타일 */
#chatbot-modal {
  box-sizing: border-box;
}

#chatbot-modal.hidden {
  display: none !important;
}

#chatbot-modal:not(.hidden) {
  display: flex !important;
}

#chatbot-window {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
}

#chatbot-window.hidden {
  display: none !important;
}

/* 챗봇 입력 영역 flex 최적화 */
#chatbot-window > div:last-child {
  max-width: 100%;
  overflow: hidden;
}

/* 챗봇 메시지 영역 */
#chatbot-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 챗봇 입력 영역 */
#chatbot-input-area {
  flex: 0 0 auto !important;
  max-width: 100%;
  overflow: hidden;
}

/* 모바일 키보드 대응 */
@media (max-width: 768px) {
  #chatbot-modal:not(.hidden) {
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
  }
  
  #chatbot-window {
    width: 100% !important;
    max-width: 100% !important;
    height: 85vh !important;
    max-height: 85vh !important;
    border-radius: 1rem !important;
    margin: 0 !important;
  }
  
  #chatbot-input-area {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background-color: white !important;
    border-top: 2px solid #e5e7eb !important;
  }
  
  /* 키보드가 올라올 때 입력 영역이 항상 보이도록 */
  #chatbot-input-area {
    will-change: transform;
    transform: translateZ(0);
  }
  
  /* 입력 필드와 버튼이 항상 보이도록 */
  #chatbot-input,
  #chatbot-send {
    position: relative;
    z-index: 11;
  }
}

/* PC 버전 챗봇 모달 */
@media (min-width: 768px) {
  #chatbot-modal:not(.hidden) {
    align-items: center !important;
    justify-content: center !important;
  }
  
  #chatbot-window {
    width: 500px !important;
    max-width: 500px !important;
    height: 600px !important;
    max-height: 600px !important;
    border-radius: 1rem !important;
  }
}