/* tools.dallago.me — 디자인 시스템 CSS (Dallago, PUB 프로토타입) */

:root {
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --secondary: #10B981;
}

* { -webkit-font-smoothing: antialiased; }
body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }

/* Glass 헤더 */
.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 그래디언트 텍스트 */
.text-gradient {
  background: linear-gradient(90deg, #4F46E5 0%, #7C3AED 50%, #10B981 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* 입력 필드 포커스 */
.form-input { transition: border-color .15s ease, box-shadow .15s ease; }
.form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12); }

/* 도구 카드 hover */
.tool-card { transition: transform .2s ease, box-shadow .2s ease; }
.tool-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -16px rgba(79, 70, 229, 0.3); }
.tool-card:hover .tool-icon { transform: scale(1.12); }
.tool-icon { transition: transform .2s ease; }

/* 통계 칩 */
.stat-box { transition: background .2s ease; }
.stat-box:hover { background: #EEF2FF; }

/* CTA 버튼 */
.btn-primary {
  background: var(--primary); color: #fff; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .5);
}
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-2px); }

/* 광고 슬롯 placeholder (PUB 표시용) */
.ad-slot {
  border: 1px dashed #CBD5E1; border-radius: 0.75rem; color: #94A3B8;
  display: flex; align-items: center; justify-content: center; font-size: .8rem;
  background: repeating-linear-gradient(45deg, #F8FAFC, #F8FAFC 10px, #F1F5F9 10px, #F1F5F9 20px);
}

/* FAQ 아코디언 */
.faq-q { cursor: pointer; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-a { max-height: 500px; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .3s ease; }

/* 진입 애니메이션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp .5s ease both; }

/* 커스텀 스크롤바 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C7D2FE; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #A5B4FC; }

/* 본문 가독성 (콘텐츠 영역) */
.prose-ko { line-height: 1.8; color: #374151; }
.prose-ko h2 { font-weight: 800; font-size: 1.5rem; margin: 2rem 0 .75rem; color: #111827; }
.prose-ko h3 { font-weight: 700; font-size: 1.1rem; margin: 1.5rem 0 .5rem; color: #1F2937; }
.prose-ko p { margin: .75rem 0; }
.prose-ko ul { margin: .75rem 0; padding-left: 1.25rem; list-style: disc; }
.prose-ko li { margin: .35rem 0; }
.prose-ko strong { color: #4338CA; }

/* 정규식 테스터 — 일치 강조 */
mark.rxm { background: #FEF08A; color: #111827; border-radius: 3px; padding: 0 1px; }
