/* 경산온(ON) 반응형 디자인 */

/* 기본 스타일 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f8f9fa;
}

/* ========================================
   🖥 PC 상단 네비게이션
======================================== */
.pc-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 48px;
  background: #ffffff;
  border-bottom: 1px solid #E5E7EB;
}

.mobile-header {
  display: block;
}

.pc-header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #1F3A5F;
  text-decoration: none;
}

.pc-header-nav {
  display: flex;
  gap: 32px;
  align-items: center;
}

.pc-header-nav a {
  font-size: 15px;
  font-weight: 500;
  color: #4B5563;
  text-decoration: none;
  transition: color 0.2s;
}

.pc-header-nav a:hover {
  color: #1F3A5F;
}

.pc-header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* ========================================
   📱 모바일 하단 탭바
======================================== */
.mobile-tab {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e5e7eb;
  justify-content: space-around;
  z-index: 1000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s;
  flex: 1;
}

.nav-item.active {
  color: #3b82f6;
}

.nav-item:hover {
  color: #3b82f6;
}

.nav-item i {
  font-size: 20px;
  margin-bottom: 4px;
}

.nav-item span {
  font-size: 11px;
}

/* ========================================
   🌐 다국어 드롭다운
======================================== */
.lang-select {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #E5E7EB;
  padding: 8px 12px;
  border-radius: 8px;
  color: #1F3A5F;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.lang-btn:hover {
  border-color: #1F3A5F;
  background: #F8F9FA;
}

.lang-arrow {
  font-size: 10px;
  transition: transform 0.2s;
}

.lang-select.open .lang-arrow {
  transform: rotate(180deg);
}

.lang-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 110%;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 2000;
  overflow: hidden;
}

.lang-select.open .lang-menu {
  display: block;
}

.lang-menu li {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #1F3A5F;
  list-style: none;
  transition: background 0.2s;
}

.lang-menu li:hover {
  background: #F8F9FA;
}

.lang-menu li.active {
  background: #EEF2F6;
  font-weight: 600;
}

.lang-menu li.active::after {
  content: " ✓";
  color: #1F3A5F;
}

/* ========================================
   🤖 챗봇 플로팅 버튼
======================================== */
.chatbot-button {
  position: fixed;
  right: 20px;
  bottom: 90px; /* 모바일 하단 탭바 위 */
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #1F3A5F 0%, #3b82f6 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(31, 58, 95, 0.3);
  cursor: pointer;
  z-index: 999;
  transition: all 0.3s;
  animation: pulse 2s infinite;
}

.chatbot-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(31, 58, 95, 0.4);
}

.chatbot-button i {
  font-size: 28px;
  color: white;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(31, 58, 95, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(31, 58, 95, 0.5);
  }
}

/* ========================================
   📦 앱 컨테이너 (모바일 기본)
======================================== */
.app-container {
  width: 100%;
  padding: 16px;
  min-height: calc(100vh - 140px);
  padding-bottom: 90px; /* 하단 탭바 공간 확보 */
}

/* ========================================
   🎴 카드 그리드
======================================== */
.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.card-content {
  padding: 12px;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1F3A5F;
  margin-bottom: 6px;
}

.card-desc {
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 8px;
}

.card-price {
  font-size: 16px;
  font-weight: 700;
  color: #1F3A5F;
}

/* ========================================
   🏷 배지
======================================== */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
  margin-bottom: 4px;
}

.badge-primary { background: #3b82f6; color: white; }
.badge-success { background: #10b981; color: white; }
.badge-warning { background: #f59e0b; color: white; }
.badge-info { background: #06b6d4; color: white; }

/* ========================================
   📱 모바일 (기본값 유지)
======================================== */
@media (max-width: 767px) {
  .lang-btn {
    font-size: 16px;
    padding: 10px 14px;
  }
  
  .lang-menu li {
    padding: 14px 16px;
    font-size: 16px;
  }
  
  .chatbot-button {
    width: 64px;
    height: 64px;
    right: 16px;
    bottom: 80px;
  }
}

/* ========================================
   💻 태블릿 (768px - 1199px)
======================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  .app-container {
    padding: 24px 32px;
  }
  
  .content-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  
  .card img {
    height: 180px;
  }
  
  .chatbot-button {
    width: 70px;
    height: 70px;
    right: 24px;
    bottom: 24px;
  }
}

/* ========================================
   🖥 PC (1200px+) - 화면 꽉 차게
======================================== */
@media (min-width: 1200px) {
  /* PC 헤더 표시 */
  .pc-header {
    display: flex;
  }
  
  /* 모바일 헤더 숨김 */
  .mobile-header {
    display: none;
  }
  
  /* 모바일 하단 탭 숨김 */
  .mobile-tab {
    display: none;
  }
  
  /* 전체 폭 사용 (핵심!) */
  .app-container {
    max-width: none !important; /* 🔥 중요 */
    width: 100%;
    padding: 32px 48px;
    padding-bottom: 48px; /* 하단 탭바 없으므로 줄임 */
  }
  
  /* 카드 그리드 4~5열 확장 */
  .content-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  
  /* 카드 크기 PC 최적화 */
  .card img {
    height: 220px;
  }
  
  .card-content {
    padding: 16px;
  }
  
  .card-title {
    font-size: 16px;
  }
  
  .card-desc {
    font-size: 14px;
  }
  
  .card-price {
    font-size: 18px;
  }
  
  /* 챗봇 버튼 PC 위치 */
  .chatbot-button {
    width: 72px;
    height: 72px;
    right: 32px;
    bottom: 32px;
  }
  
  /* 다국어 드롭다운 PC 최적화 */
  .lang-btn {
    font-size: 14px;
  }
  
  .lang-menu {
    min-width: 180px;
  }
}

/* ========================================
   🖥 초대형 화면 (1600px+)
======================================== */
@media (min-width: 1600px) {
  .app-container {
    padding: 40px 80px;
  }
  
  .content-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
  }
}

/* ========================================
   기타 공통 유틸리티
======================================== */
.text-center { text-align: center; }
.mb-4 { margin-bottom: 16px; }
.mt-4 { margin-top: 16px; }
.hidden { display: none; }