/* ==========================================
   SEOUL 7D6N TRAVEL GUIDE V2 - MODERN DESIGN SYSTEM
   Inspired by Notion & Airbnb aesthetics
   ========================================== */

/* Design Tokens & CSS Variables */
:root {
  --bg-main: #F8F9FA;
  --bg-card: #FFFFFF;
  --text-primary: #1C1917;
  --text-secondary: #57534E;
  --text-muted: #A8A29E;
  --border-color: #E7E5E4;
  --accent-sage: #5C6B57;
  --accent-amber: #F59E0B;
  --accent-rose: #E11D48;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* Base reset & typography */
html {
  scroll-behavior: smooth;
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--bg-main);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Utility Fallback Rules (Guarantees modal hiding & SVG sizing even offline) */
.hidden {
  display: none !important;
}

svg {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
}

/* Typography styles */
.editorial-title {
  font-family: 'Noto Serif TC', Georgia, serif;
  letter-spacing: -0.02em;
}

/* Main Centered App Container (max-w-5xl on desktop, full-width on mobile) */
.app-container {
  width: 100%;
  max-width: 1024px; /* max-w-5xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 640px) {
  .app-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Modern Card Component */
.modern-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modern-card:hover {
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
}

/* Glassmorphism Navigation */
.glass-nav {
  background: rgba(248, 249, 250, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
}

.drawer-backdrop {
  background: rgba(28, 25, 23, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Hide Scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Image Display Optimization (Explicit display & fallbacks) */
img {
  display: block;
  max-width: 100%;
}

img.img-fallback {
  object-fit: cover;
  background: #E4E9E1;
}

/* Touch Target Standards (minimum 44x44px clickable area) */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Prevent iOS Safari input auto-zoom by enforcing >= 16px */
input, textarea, select {
  font-size: 16px !important;
}

/* 100dvh for iOS Safari address bar collapse */
.viewport-height-full {
  height: 100vh;
  height: 100dvh;
}

/* Safe area inset paddings */
.safe-area-top {
  padding-top: var(--safe-area-top);
}

.safe-area-bottom {
  padding-bottom: var(--safe-area-bottom);
}

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

/* Dashed Timeline Connector Line */
.timeline-dashed-line {
  border-left: 2px dashed #D6D3D1;
}