/* Critical CSS for above-the-fold content */
* { 
  box-sizing: border-box; 
}

body { 
  font-family: system, -apple-system, BlinkMacSystemFont, sans-serif; 
  margin: 0; 
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Screen reader only */
.sr-only { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0, 0, 0, 0); 
  white-space: nowrap; 
  border: 0; 
}

/* First view critical styles */
.hero-section { 
  min-height: 50vh; 
}

.loading-spinner { 
  width: 40px; 
  height: 40px; 
  border: 2px solid #e5e7eb; 
  border-top: 2px solid #ec4899; 
  border-radius: 50%; 
  animation: spin 1s linear infinite; 
}

@keyframes spin { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}

/* Layout stability - CLS対策 */
img { 
  max-width: 100%; 
  height: auto; 
  display: block;
  aspect-ratio: attr(width) / attr(height);
}

/* Loading placeholder */
.loading-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, transparent 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Prevent layout shift */
.aspect-ratio-container {
  position: relative;
  width: 100%;
}

.aspect-ratio-container::before {
  content: '';
  display: block;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.aspect-ratio-container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}