/* ==========================
   responsive.css

   Typography and card grids scale fluidly via clamp()/auto-fit in style.css
   itself, so this file only holds structural breakpoint adjustments that
   can't be expressed as a continuous fluid rule (layout stacking, spacing
   step-downs, nav collapse).
   ========================== */

html, body {
    overflow-x: hidden;
}

/* Large Desktop: trim the outer gutter a little as the viewport narrows */
@media (max-width: 1400px) {
    .container {
        width: 94%;
    }
}

/* Tablet: reduce hero vertical padding */
@media (max-width: 992px) {
    .hero {
        padding: 50px 0;
    }
}

/* Mobile: tighten section spacing and stack the footer columns */
@media (max-width: 768px) {
    .container {
        width: min(100%, calc(100% - 32px)); /* 모바일에서는 여백을 조금 줄여 콘텐츠 영역을 최대로 활용 */
    }
    .section {
        padding: 40px 0;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Small phones: the pill-shaped search bar no longer has room to stay on
   one line, so it stacks into three full-width rows */
@media (max-width: 425px) {
    .hero-search-box {
        flex-direction: column;
        border-radius: 16px;
        padding: 6px;
    }
    .hero-search-box input {
        width: 100%;
        text-align: center;
    }
    .hero-search-box button {
        width: 100%;
        border-radius: 8px;
    }
}