/**
 * responsive.css - 반응형
 * 중고가전 태인 (3.중고가전매입판매사이트)
 * 3 Breakpoints: 1023px, 767px, 479px
 */

/* ================================
   Tablet (max-width: 1023px)
   ================================ */
@media (max-width: 1023px) {
    :root {
        --header-height: 70px;
        --main-nav-height: 70px;
    }

    main {
        padding-top: var(--main-nav-height);
    }

    /* 유틸리티 바 숨김 */
    .utility-bar {
        display: none;
    }

    /* 헤더 */
    .header__mobile-toggle {
        display: flex;
    }

    .header__nav {
        position: fixed;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100vh;
        background: var(--color-bg-white);
        box-shadow: var(--shadow-xl);
        flex-direction: column;
        align-items: stretch;
        padding: 80px var(--spacing-md) var(--spacing-md);
        transition: right var(--transition-normal);
        overflow-y: auto;
        z-index: 1001;
    }

    .header__nav.active {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
    }

    .nav-link {
        padding: 0.875rem 0;
        font-size: var(--font-size-base);
        border-bottom: 1px solid var(--color-border-light);
    }

    /* 서브메뉴 (모바일) */
    .nav-sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-normal);
        padding: 0;
        background: var(--color-bg-alt);
        border-radius: var(--radius-sm);
    }

    .nav-item--has-sub:hover .nav-sub {
        max-height: 0;
    }

    .nav-item--has-sub.open .nav-sub {
        max-height: 500px;
        padding: 0.5rem 0;
    }

    .nav-sub--wide {
        grid-template-columns: 1fr;
        min-width: auto;
    }

    .nav-sub li a {
        padding: 0.5rem 1.5rem;
    }

    .header__cta {
        display: none;
    }

    /* 히어로 */
    .hero--split .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero__badge {
        margin: 0 auto;
    }

    .hero__cta {
        justify-content: center;
    }

    .hero__title {
        font-size: var(--font-size-3xl);
    }

    /* 메인 서비스 카드 */
    .main-services {
        grid-template-columns: 1fr;
    }

    /* 상품 그리드 */
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 듀얼 프로세스 */
    .dual-process {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* 상황 카드 */
    .situation-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CTA 배너 */
    .cta-banner__content {
        flex-direction: column;
        text-align: center;
    }

    /* 지역 그리드 */
    .area-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* 리뷰 */
    .review-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    /* 블로그 */
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 블로그 포스트 네비게이션 */
    .post-nav__inner {
        grid-template-columns: 1fr;
    }

    .post-nav__link--next {
        text-align: left;
    }

    /* 견적 레이아웃 */
    .quote-layout {
        grid-template-columns: 1fr;
    }

    /* 포트폴리오 */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 기능 카드 */
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 푸터 */
    .footer__content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
    }

    .footer__company {
        grid-column: 1 / -1;
    }

    .footer__bottom .container {
        flex-direction: column;
        text-align: center;
    }

    /* 플로팅 CTA */
    .floating-cta {
        display: none;
    }

    .mobile-cta-bar {
        display: flex;
    }

    /* 모바일 CTA 바 있을 때 푸터 하단 여백 */
    .footer {
        padding-bottom: 60px;
    }

    /* 섹션 */
    .section {
        padding: var(--spacing-2xl) 0;
    }

    .section-title {
        font-size: var(--font-size-2xl);
    }
}

/* ================================
   Mobile (max-width: 767px)
   ================================ */
@media (max-width: 767px) {
    /* 히어로 */
    .hero {
        padding: var(--spacing-2xl) 0;
    }

    .hero__title {
        font-size: var(--font-size-2xl);
    }

    .hero--page .hero__title,
    .hero--area .hero__title {
        font-size: var(--font-size-2xl);
    }

    .hero__subtitle {
        font-size: var(--font-size-base);
    }

    .hero__cta {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero__cta .btn {
        width: 100%;
    }

    .hero__side-card {
        padding: var(--spacing-md);
    }

    /* 신뢰지표 */
    .trust-bar__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    /* 상품 그리드 */
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }

    .product-card {
        padding: var(--spacing-sm);
    }

    .product-card__icon {
        font-size: 2rem;
    }

    /* 상황 카드 */
    .situation-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    /* 지역 그리드 */
    .area-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 리뷰 */
    .review-grid {
        grid-template-columns: 1fr;
    }

    /* 블로그 */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 블로그 포스트 */
    .post-content {
        padding: var(--spacing-md);
    }

    .post-cta {
        padding: var(--spacing-md);
    }

    /* 관련 서비스 */
    .related-grid {
        grid-template-columns: 1fr;
    }

    /* 지역 상세 */
    .area-detail {
        grid-template-columns: 1fr;
    }

    /* 기준 */
    .criteria-grid {
        grid-template-columns: 1fr;
    }

    /* 기능 카드 */
    .feature-grid {
        grid-template-columns: 1fr;
    }

    /* 인라인 폼 */
    .inline-form__row {
        grid-template-columns: 1fr;
    }

    /* 위치 정보 */
    .location-info {
        grid-template-columns: 1fr;
    }

    .map-wrapper {
        height: 300px;
    }

    /* 포트폴리오 */
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    /* 푸터 */
    .footer__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .footer__areas .container {
        gap: 0.15rem;
    }

    .footer__areas a {
        padding: 0.2rem 0.35rem;
        font-size: var(--font-size-xs);
    }

    /* 서비스 그리드 */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* 견적 */
    .quote-form {
        padding: var(--spacing-md);
    }

    /* 섹션 */
    .section {
        padding: var(--spacing-xl) 0;
    }

    .section-title {
        font-size: var(--font-size-xl);
    }

    .section-subtitle {
        font-size: var(--font-size-base);
    }

    /* 완료 페이지 */
    .complete-buttons {
        flex-direction: column;
    }

    /* CTA 배너 */
    .cta-banner {
        padding: var(--spacing-xl) 0;
    }

    .cta-banner__text h3 {
        font-size: var(--font-size-xl);
    }

    .cta-banner__buttons {
        flex-direction: column;
        width: 100%;
    }

    .cta-banner__buttons .btn {
        width: 100%;
    }

    /* 듀얼 프로세스 */
    .process-track {
        padding: var(--spacing-md);
    }

    /* 가격표 */
    .pricing-table {
        font-size: var(--font-size-xs);
    }

    .pricing-table th,
    .pricing-table td {
        padding: 0.5rem 0.625rem;
    }
}

/* ================================
   Small Mobile (max-width: 479px)
   ================================ */
@media (max-width: 479px) {
    .container {
        padding: 0 var(--spacing-sm);
    }

    .hero__title {
        font-size: var(--font-size-xl);
    }

    .hero--page .hero__title,
    .hero--area .hero__title {
        font-size: var(--font-size-xl);
    }

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

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

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

    .trust-bar__grid {
        grid-template-columns: 1fr;
    }

    .btn--large {
        padding: 0.75rem 1.5rem;
        font-size: var(--font-size-sm);
    }

    .main-service-card {
        padding: var(--spacing-md);
    }

    .main-service-card__title {
        font-size: var(--font-size-xl);
    }

    .nearby-grid {
        gap: 0.5rem;
    }

    .nearby-link {
        padding: 0.5rem 1rem;
        font-size: var(--font-size-xs);
    }

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

    .post-content h1 {
        font-size: var(--font-size-xl);
    }
}