@charset "utf-8";
/* 카테고리 메뉴 */
.faq-category {margin: 20px 0;text-align: center;}
.faq-category-list {list-style: none;padding: 0;margin: 0;display: flex;justify-content: center;gap: 12px;flex-wrap: wrap;}
.faq-category-item {padding: 8px 16px;border-radius: 6px;background: #f5f5f5;color: #333;font-size: 15px;font-weight: 600;cursor: pointer;transition: all 0.2s ease;}
/* .faq-category-item:hover {background: #d3272f;color: #fff;} */
.faq-category-item.active {background: #d3272f;color: #fff;}
.faq-category-item:hover { background: #2a2a2a; color: #fff; box-shadow: 0 0 12px rgba(255, 85, 85, 0.8); transition: box-shadow 0.3s ease; }
.faq-main { max-width:100%; margin:0 auto; padding:0;  }
.dark-mode .faq-main { position: relative; background: #222; overflow: hidden; } 
.dark-mode .faq-main::before { content: ""; position: absolute; top: var(--y); left: var(--x); width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%); transform: translate(-50%, -50%); pointer-events: none;transition: top 0.1s ease, left 0.1s ease;z-index: 9999; }
/* List */
.faq-list { list-style:none; padding:0; margin:0; }
/* Item Card */
.faq-item { margin-bottom:14px; border:1px solid #eee; border-radius:8px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.03); transition:all 0.2s ease; }
.faq-item:hover { box-shadow:0 3px 8px rgba(0,0,0,0.06); transform:translateY(-1px); }
.faq-question { width:100%; text-align:left; padding:12px 0; border:none; cursor:pointer; font-size:16.5px; font-weight:600; color:#222; display:flex; align-items:center; gap:10px; }
.faq-icon { color:#d3272f; font-weight:800; font-size:17px; padding:4px 10px; border-radius:6px; display:inline-block; min-width:32px; text-align:left; }
/* Answer Panel */
.faq-answer { padding:15px 18px; background:#fff; font-size:15px; line-height:1.7; color:#333; display:none; border-top:1px solid #eee; animation:fadeIn 0.25s ease; }
/* Title & Arrow */
.faq-title { flex:1; text-align:left; margin-left:6px; font-size:16.2px; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; }
.faq-arrow { margin-right:0; font-size:18px; color:#888; }

/* 다크모드 FAQ */
.dark-mode .faq-item {
  border: 1px solid #444;       /* 테두리 색 진하게 */
  background: #222;             /* 카드 배경 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.dark-mode .faq-question {
  background: #2a2a2a;
  color: #eee;
  border: none;
}

.dark-mode .faq-icon {
  background: #444;
  color: #ff5555;               /* 포인트 색 */
}

.dark-mode .faq-title {
  color: #f5f5f5;
}

.dark-mode .faq-arrow {
  color: #bbb;
}

.dark-mode .faq-answer {
  background: #1e1e1e;
  color: #ddd;
  border-top: 1px solid #444;
}

/* Toggle Animation */
@keyframes fadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* Mobile Optimization */
@media (max-width:640px) {
  .faq-question { font-size:15.2px; padding:13px 15px; }
  .faq-icon { font-size:15.5px; padding:3.5px 9px; }
  .faq-answer { font-size:14.2px; line-height:1.6; padding:14px 15px; }
}