/* 
   mobile-style.css - v2 (강력한 구조 초기화 버전)
*/

/* [공통 스타일] 최상단 이동 버튼 (PC/모바일 공통) */
#top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px; /* PC에서는 조금 더 여유 있게 */
    width: 45px;
    height: 45px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    display: none; /* 스크롤 전까지 숨김 */
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 999;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.8;
}
#top-btn:hover {
    opacity: 1;
    transform: translateY(-3px);
}
#top-btn.visible {
    display: flex;
}

@media (max-width: 768px) {
    #top-btn {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
    /* 0. 공통 레이아웃 초기화 */
    .solution-container {
        display: block !important; /* Flex 해제 */
        padding: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 1. 상단 탭 (Plastic Solution, Calculator 등 공통) */
    .page-header {
        padding: 20px 15px 0 15px !important;
    }
    .page-title-container h1 {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
    }
    .page-tabs {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px !important;
        gap: 15px !important;
        scrollbar-width: none;
    }
    .page-tabs::-webkit-scrollbar { display: none; }

    /* 2. 사이드바 (가로 스크롤 버튼 + 상단 고정) */
    .sidebar {
        width: 100% !important;
        position: sticky !important; /* 상단 고정 */
        top: 0 !important;
        z-index: 100 !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding: 15px 10px !important;
        margin-bottom: 10px !important;
        gap: 8px !important;
        scrollbar-width: none;
        flex-shrink: 0 !important;
        background-color: #F8F9FA !important; /* 배경색을 주어 본문과 겹침 방지 */
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .sidebar::-webkit-scrollbar { display: none; }
    .category-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 8px 16px !important;
        border: 1px solid #ddd !important;
        border-radius: 20px !important;
        background-color: #fff !important;
        color: #444 !important;
        font-size: 14px !important;
    }
    /* 선택된 카테고리 배경색 복구 */
    .category-btn.active {
        background-color: var(--primary-color) !important;
        color: #fff !important;
        border-color: var(--primary-color) !important;
    }

    /* 2.5 최상단 이동 버튼 디자인 */
    #top-btn {
        position: fixed;
        bottom: 30px;
        right: 20px;
        width: 50px;
        height: 50px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 50%;
        display: none; /* 스크롤 전까지 숨김 */
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 999;
        cursor: pointer;
        transition: opacity 0.3s;
    }
    #top-btn.visible {
        display: flex;
    }

    /* 3. 본문 영역 및 배너 최적화 */
    .main-content {
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
    }
    .size-search-banner {
        width: 100% !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
        height: auto !important;
    }
    .search-text-area h3 {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
        word-break: keep-all !important;
    }
    .size-inputs {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .input-group { width: 100% !important; }
    .input-group input { width: 100% !important; }
    .search-btn { margin-left: 0 !important; width: 100% !important; }

    /* 4. 제품 그리드 및 이미지 (가독성 최적화) */
    .product-grid {
        display: block !important;
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    .product-card {
        width: 100% !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
    }
    .card-content {
        padding: 15px 18px !important; /* 모바일용 안쪽 여백 */
    }
    .product-title {
        font-size: 1.05rem !important; /* 모바일용 제품명 크기 살짝 축소 */
        margin-bottom: 6px !important;
        word-break: keep-all !important; /* 단어 단위 줄바꿈으로 깔끔하게 */
        line-height: 1.35 !important;
        font-weight: 700 !important;
    }
    .product-meta {
        font-size: 0.85rem !important; /* 모바일용 상세정보 크기 축소 */
        color: #666 !important;
        line-height: 1.45 !important;
    }
    .card-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
    }
    .card-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* 5. 헤더 최적화 */
    .main-header {
        padding: 10px 15px !important;
    }
    .header-nav { display: none !important; }
    /* 6. 사이트맵(Sitemap) 최적화 - 강제 확장 버전 */
    .sitemap-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 10px 40px !important;
        box-sizing: border-box !important;
    }
    .sitemap-header {
        text-align: center !important;
        margin-bottom: 25px !important;
    }
    .sitemap-header h1 {
        font-size: 1.6rem !important;
    }
    .sitemap-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
    }
    .sitemap-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px 0 !important;
        padding: 25px 20px !important;
        box-sizing: border-box !important;
        display: block !important;
    }
}