/*
 * InBaem - Custom Styles
 */

/* Google Fonts — must be first per CSS spec */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..900;1,9..40,300..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

html, body {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic',
               'Segoe UI', sans-serif;
}

nav {
  font-family: 'Spoqa Han Sans Neo', 'Pretendard Variable', 'Pretendard', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* Line clamp */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Fix select appearance for filters */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}

/* Auto-dismiss flash messages */
.fixed.animate-slide-in-right {
  animation:
    slideInRight 0.3s ease-out,
    fadeOut 0.3s ease-in 4s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Font family override */
body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

/* ============================
   Responsive Design Enhancements
   ============================ */

/* Mobile-optimized touch targets */
@media (max-width: 640px) {
  /* Larger touch targets on mobile */
  a, button {
    min-height: 36px;
  }

  /* Better spacing for mobile cards */
  .grid {
    gap: 12px;
  }

  /* Full-width buttons on mobile */
  .mobile-full-width {
    width: 100%;
  }

  /* Hide less important UI elements on small screens */
  .mobile-hide {
    display: none !important;
  }

  /* Adjust hero text size for small screens */
  h1 span {
    font-size: 32px !important;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Better focus styles for accessibility */
*:focus-visible {
  outline: 2px solid #f43f5e;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Mobile-optimized nav */
@media (max-width: 768px) {
  nav .flex.items-center.justify-between {
    flex-wrap: nowrap;
  }

  /* Prevent horizontal overflow */
  body {
    overflow-x: hidden;
  }
}

/* Card hover effects */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* Sticky sidebar on desktop */
@media (min-width: 1024px) {
  .sticky-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

/* Better table responsiveness */
@media (max-width: 640px) {
  table {
    font-size: 0.8125rem;
  }

  th, td {
    padding: 0.5rem 0.75rem;
  }
}

/* Progress bar — 얇고 은은하게, 느린 전환에서만 표시 */
.turbo-progress-bar {
  height: 2px;
  background: linear-gradient(to right, #f43f5e, #ec4899);
  opacity: 0.7;
}

/* ============================
   Guide Section Typography System
   Approach B: Sharp Sans Editorial
   Fonts: DM Sans (heading/UI) + Instrument Sans (prose body)
   Casing rule: UPPERCASE only for category badges, Sentence case everywhere else
   ============================ */
/* Heading — article titles, hero H1, section H2 */
.guide-heading {
  font-family: 'DM Sans', 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* Subheading — H2 inside articles */
.guide-subheading {
  font-family: 'DM Sans', 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

/* Category badge — ONLY place uppercase is used */
.guide-category-badge {
  font-family: 'DM Sans', 'Pretendard Variable', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Prose body — article paragraphs */
.guide-prose-body {
  font-family: 'Instrument Sans', 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.80;
  font-weight: 400;
  color: #374151;
}

/* Override Tailwind Typography inside guide articles */
.guide-prose h1,
.guide-prose h2,
.guide-prose h3,
.guide-prose h4 {
  font-family: 'DM Sans', 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.guide-prose p,
.guide-prose li {
  font-family: 'Instrument Sans', 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.80;
  font-weight: 400;
}

.guide-prose blockquote {
  font-family: 'DM Sans', 'Pretendard Variable', sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.guide-prose strong {
  font-family: 'DM Sans', 'Pretendard Variable', sans-serif;
  font-weight: 700;
}

/* Card title inside guide grid */
.guide-card-title {
  font-family: 'DM Sans', 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* Admin pagination */
.pagination {
  display: flex;
  gap: 4px;
  align-items: center;
}

.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

.pagination a {
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

.pagination a:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.pagination .current {
  background: linear-gradient(to right, #f43f5e, #ec4899);
  color: white;
  border: none;
}

.pagination .disabled {
  color: #d1d5db;
  cursor: not-allowed;
}

/* Floating FAB container — always-on (guide button + chat toggle) */
div[data-controller~="guide-callout"] {
  transition: transform 300ms ease;
}

/* When a page shows a bottom action bar (e.g., enrollments payment panel),
   lift the floating FAB group above it so they don't overlap. */
body.has-bottom-bar div[data-controller~="guide-callout"] {
  transform: translateY(-5.5rem);
}