/*=============================================
  Fine HPS — 반응형 미디어 쿼리 시스템
  "어떤 화면에서도 예쁘게 보여요"
=============================================*/

/* ── 노트북 (992px ~ 1199px) ── */
@media (max-width: 1199px) {
    .container {
        padding: 0 1.5rem;
    }

    .hero-content {
        gap: 2rem;
    }
}

/* ── 태블릿 (768px ~ 991px) ── */
@media (max-width: 991px) {

    /* 네비게이션 */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 360px;
        height: 100vh;
        background: var(--color-dark);
        flex-direction: column;
        align-items: flex-start;
        padding: 5rem 2rem 2rem;
        gap: 0.5rem;
        transition: right 0.4s var(--ease-out);
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.4);
        z-index: 998;
    }

    .nav-menu.is-open {
        right: 0;
    }

    .nav-menu li a {
        font-size: 1.1rem;
        padding: 0.7rem 0;
        display: block;
        color: #fff;
    }

    .hamburger {
        display: flex;
    }

    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 997;
    }

    .nav-overlay.is-open {
        display: block;
    }

    /* 히어로 */
    .hero-section {
        min-height: 90vh;
    }

    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .hero-image {
        display: none;
    }

    .hero-buttons {
        justify-content: center;
    }

    /* 그리드 */
    .grid-auto {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 섹션 패딩 */
    .section-pad {
        padding: 4rem 0;
    }

    .heading-xl {
        font-size: clamp(1.8rem, 4vw, 2.8rem);
    }
}

/* ── 모바일 (576px ~ 767px) ── */
@media (max-width: 767px) {
    html {
        font-size: 15px;
    }

    /* 헤더 */
    .header-actions .lang-switch span {
        display: none;
    }

    .logo-text .sub {
        display: none;
    }

    /* 히어로 */
    .hero-section {
        min-height: 100svh;
    }

    .hero-title {
        font-size: 2rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.7rem;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    /* 그리드 → 1열 */
    .grid-auto {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }

    /* 섹션 */
    .section-pad {
        padding: 3rem 0;
    }

    /* 메탈 카드 */
    .metal-card {
        padding: 1.5rem;
    }

    /* 카테고리 탭 스크롤 */
    .category-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .category-tabs::-webkit-scrollbar {
        display: none;
    }

    /* 카카오 싱크 팝업 */
    .kakao-modal .modal-body {
        padding: 1.5rem;
    }
}

/* ── 소형 스마트폰 (~ 575px) ── */
@media (max-width: 575px) {
    .product-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .product-card__body {
        padding: 0.8rem;
    }

    .product-card__name {
        font-size: 0.88rem;
    }

    .product-card__price {
        font-size: 1rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto;
    }
}

/* ── 다크모드 지원 (시스템 설정 감지) ── */
@media (prefers-color-scheme: dark) {
    /* 현재는 고정 라이트 테마 사용, 추후 다크 테마 적용 예정 */
}

/* ── 인쇄 스타일 ── */
@media print {

    .site-header,
    .hero-section,
    .kakao-float-btn {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }
}