/* Generated Mobile-First CSS for 유케어 간병협회 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    font-size: 16px;
}

.website-container { width: 100%; min-height: 100vh; }
.element { width: 100%; position: relative; }

/* Mobile-first base styles */
.hero-content h1 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 0.75rem; }
.hero-content .subtitle { font-size: 1.125rem; margin-bottom: 0.75rem; }
.hero-content .description { font-size: 0.875rem; margin-bottom: 1.5rem; }
.cta-button { width: 100%; padding: 1rem; font-size: 1rem; }
.contact-item { margin-bottom: 1rem; font-size: 0.875rem; }
img { max-width: 100%; height: auto; }

@media (min-width: 768px) {
    body { font-size: 18px; }
    .element { padding: 1.5rem; }
    .hero-content h1 { font-size: 2.5rem; margin-bottom: 1rem; }
    .hero-content .subtitle { font-size: 1.25rem; margin-bottom: 1rem; }
    .hero-content .description { font-size: 1rem; margin-bottom: 2rem; }
    .cta-button { width: auto; padding: 1rem 2rem; font-size: 1.125rem; }
    .contact-item { font-size: 1rem; }
}

@media (min-width: 1024px) {
    .website-container { max-width: 1200px; margin: 0 auto; }
    .element { padding: 2rem; }
    .hero-content h1 { font-size: 3rem; margin-bottom: 1.25rem; }
    .hero-content .subtitle { font-size: 1.5rem; margin-bottom: 1.25rem; }
    .hero-content .description { font-size: 1.125rem; margin-bottom: 2.5rem; }
    .cta-button { padding: 1.25rem 2.5rem; font-size: 1.25rem; }
    .contact-item { font-size: 1.125rem; margin-bottom: 1.25rem; }
}

@media (min-width: 1440px) {
    .website-container { max-width: 1400px; }
    .hero-content h1 { font-size: 3.5rem; }
    .hero-content .subtitle { font-size: 1.75rem; }
    .hero-content .description { font-size: 1.25rem; }
}