/* 모바일 완벽 최적화 - 원래 색상 유지 */

@media (max-width: 768px) {

    /* 전역 설정 - 가로 스크롤 완전 차단 */
    * {
        box-sizing: border-box !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body {
        background-color: #f9f5f0 !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        color: #3e2723 !important;
        padding-bottom: 20px !important;
    }

    /* 컨테이너 완전 제어 */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }

    /* 콘텐츠 그리드 완전 재설계 */
    .content-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        grid-template-columns: none !important;
    }

    /* 섹션 제목 가독성 개선 - 폰트 크기 줄임 */
    .section-title {
        font-size: 1.2rem !important;
        color: #5d4037 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        font-weight: 700 !important;
        position: relative !important;
        padding: 0 12px !important;
        word-break: keep-all !important;
        line-height: 1.3 !important;
        display: block !important;
    }

    .section-title i {
        color: #8d6e63 !important;
        font-size: 1.1rem !important;
        margin-right: 6px !important;
    }

    /* 모든 카드 요소 완전 제어 */
    .card {
        width: 100% !important;
        max-width: 100% !important;
        background: linear-gradient(135deg, #ffffff, #fefefe) !important;
        border-radius: 20px !important;
        padding: 24px !important;
        margin: 0 0 24px 0 !important;
        box-shadow: 0 6px 24px rgba(93, 64, 55, 0.08) !important;
        border: 1px solid rgba(141, 110, 99, 0.1) !important;
        position: relative !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, #8d6e63, #a1887f, #d7ccc8, #a1887f, #8d6e63) !important;
        border-radius: 20px 20px 0 0 !important;
    }

    /* 햄버거 메뉴 - PC에서 숨김 */
    .hamburger-menu {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 8px !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        z-index: 1001 !important;
    }

    .hamburger-menu:hover {
        background: rgba(93, 64, 55, 0.1) !important;
    }

    .hamburger-line {
        width: 24px !important;
        height: 3px !important;
        background: #5d4037 !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
        margin: 2px 0 !important;
    }

    .hamburger-menu.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px) !important;
    }

    .hamburger-menu.active .hamburger-line:nth-child(2) {
        opacity: 0 !important;
    }

    .hamburger-menu.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px) !important;
    }

    /* 데스크톱 네비게이션 숨김 */
    .nav {
        display: none !important;
    }
}

/* PC에
서 햄버거 메뉴 숨김 */
@media (min-width: 769px) {
    .hamburger-menu {
        display: none !important;
    }

    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* 모바일 메뉴 스타일 */
@media (max-width: 768px) {
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 1000 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        backdrop-filter: blur(2px) !important;
    }

    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 280px !important;
        height: 100% !important;
        background: linear-gradient(135deg, #ffffff, #f9f5f0) !important;
        z-index: 1001 !important;
        transition: all 0.3s ease !important;
        box-shadow: -4px 0 20px rgba(93, 64, 55, 0.2) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
    }

    .mobile-menu.active {
        right: 0 !important;
    }

    .mobile-menu-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 20px 24px !important;
        background: linear-gradient(135deg, #5d4037, #6d4c41) !important;
        color: white !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .mobile-menu-header h3 {
        margin: 0 !important;
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        color: white !important;
    }

    .mobile-menu-close {
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: 1.8rem !important;
        cursor: pointer !important;
        padding: 4px !important;
        border-radius: 4px !important;
        transition: all 0.3s ease !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-menu-close:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .mobile-menu-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 !important;
    }

    .mobile-menu-list li {
        border-bottom: 1px solid rgba(141, 110, 99, 0.1) !important;
    }

    .mobile-menu-list a {
        display: flex !important;
        align-items: center !important;
        padding: 16px 24px !important;
        color: #5d4037 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
    }

    .mobile-menu-list a:hover {
        background: rgba(93, 64, 55, 0.05) !important;
        color: #3e2723 !important;
    }

    .mobile-menu-list a i {
        margin-right: 12px !important;
        width: 20px !important;
        color: #8d6e63 !important;
    }

    .mobile-menu-footer {
        padding: 20px 24px !important;
        border-top: 1px solid rgba(141, 110, 99, 0.1) !important;
        background: rgba(93, 64, 55, 0.02) !important;
    }

    .mobile-kakao-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        background: linear-gradient(135deg, #fee500, #ffeb3b) !important;
        color: #3e2723 !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }

    .mobile-kakao-link:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(254, 229, 0, 0.3) !important;
    }

    .mobile-kakao-link i {
        margin-right: 8px !important;
    }

    /* 모바일 타이틀 폰트 크기 조정 */
    .section-title {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
        word-break: keep-all !important;
        hyphens: none !important;
    }

    /* 스페셜티 커피 샷 핸드 가독성 개선 */
    .sh-item {
        display: flex !important;
        align-items: center !important;
        padding: 12px 16px !important;
        margin-bottom: 8px !important;
        background: linear-gradient(135deg, #ffffff, #fefefe) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(141, 110, 99, 0.1) !important;
        box-shadow: 0 2px 8px rgba(93, 64, 55, 0.05) !important;
    }

    .sh-key {
        background: linear-gradient(135deg, #5d4037, #6d4c41) !important;
        color: white !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        font-size: 0.85rem !important;
        min-width: 60px !important;
        text-align: center !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }

    .sh-desc {
        color: #3e2723 !important;
        font-weight: 500 !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
}

/* 푸터 줄바꿈 제거 */
.footer {
    text-align: center !important;
}

.footer p {
    display: inline !important;
    margin: 0 !important;
}

.footer p+p::before {
    content: " | " !important;
    color: #8d6e63 !important;
    margin: 0 8px !important;
}

@media (max-width: 768px) {

    /* 카드 제목 폰트 크기 조정 */
    .card h3 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
        word-break: keep-all !important;
    }

    .card h4 {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
        word-break: keep-all !important;
    }

    /* 모바일 테이블 카드 제목 조정 */
    .mobile-table-card h4 {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    /* 레시피 단계 제목 조정 */
    .step-content strong {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }

    /* 워크플로우 단계 제목 조정 */
    .workflow-step .step-content strong {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }
}
/* 히어로 섹션 모바일 최적화 */
    .hero {
        padding: 40px 0 30px 0 !important;
        background: linear-gradient(135deg, #f9f5f0, #ffffff) !important;
    }
    
    .hero-content {
        text-align: center !important;
        padding: 0 16px !important;
    }
    
    .hero-content h2 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
        color: #5d4037 !important;
        font-weight: 700 !important;
        word-break: keep-all !important;
    }
    
    .hero-content p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        color: #6d4c41 !important;
        word-break: keep-all !important;
    }
    
    .hero-subnote {
        font-size: 0.75rem !important;
        color: #8d6e63 !important;
        margin-bottom: 20px !important;
        opacity: 0.8 !important;
        line-height: 1.3 !important;
    }
    
    .btn-primary {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
        border-radius: 25px !important;
        background: linear-gradient(135deg, #5d4037, #6d4c41) !important;
        color: white !important;
        text-decoration: none !important;
        display: inline-block !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 12px rgba(93, 64, 55, 0.2) !important;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(93, 64, 55, 0.3) !important;
    }
/* 상단 헤더 고정 */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 10px rgba(93, 64, 55, 0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    /* 헤더 고정으로 인한 콘텐츠 여백 조정 */
    body {
        padding-top: 80px !important;
    }
    
    .hero {
        margin-top: 0 !important;
    } 
   /* 스크롤 시 헤더 효과 */
    .header.scrolled {
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 4px 20px rgba(93, 64, 55, 0.15) !important;
    }
    
    /* 햄버거 메뉴 버튼 위치 조정 */
    .hamburger-menu {
        position: relative !important;
        z-index: 1002 !important;
    }
    
    /* 로고 텍스트 모바일 최적화 */
    .logo-text h1 {
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
    }
    
    .logo-text p {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        opacity: 0.8 !important;
    }
}