@charset "utf-8";

/* =========================================================
   1. 통합 다운로드 메인 허브 file.css (file.html 전용 - 사진 갤러리형)
   ========================================================= */
.download-hub-container { 
    max-width: 1400px; 
    margin: 80px auto 100px; 
    padding: 0 40px; 
    position: relative; 
    z-index: 10; 
}

.hub-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); /* 4단 배열: 제품 8개 = 2줄, 아래 줄에 도구 카드 2개 */
    gap: 30px; 
}

.hub-card { 
    display: flex; 
    flex-direction: column;
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    overflow: hidden; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); 
}

.hub-card:hover { 
    transform: translateY(-8px); 
    border-color: var(--main-color, #1e3a8a); 
    box-shadow: 0 15px 35px rgba(0, 86, 179, 0.12); 
}

/* =========================================================
   카드 이미지 영역 (사진이 꽉 차도록 100%로 확대)
   ========================================================= */
.card-img {
    width: 100%;
    /* 사진이 더 시원하게 보이도록 높이를 220px -> 240px로 약간 키움 */
    height: 240px; 
    background: #f8fafc;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f1f5f9;
    overflow: hidden;
}

.card-img img {
    /* 기존 75%의 제한을 풀고 100%로 꽉 채움 */
    width: 100%;
    height: 100%;
    object-fit: contain; /* 비율을 유지하면서 영역을 최대한 차지 */
    padding: 15px; /* 이미지가 테두리에 너무 바짝 붙지 않도록 최소한의 여백만 부여 */
    mix-blend-mode: multiply; 
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hub-card:hover .card-img img {
    /* 이미지가 이미 100%로 크기 때문에, 확대 비율을 1.15 -> 1.08로 줄여서 부담스럽지 않게 함 */
    transform: scale(1.08);
}

.badge-notice {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #475569;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.card-info {
    padding: 25px 20px 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-info h3 { 
    font-size: 22px; 
    font-weight: 800; 
    color: #0f172a; 
    margin-bottom: 8px; 
    transition: color 0.3s; 
}

.card-info p { 
    font-size: 14px; 
    color: #64748b; 
    margin-bottom: 20px; 
}

.hub-card:hover .card-info h3 { 
    color: var(--main-color, #1e3a8a); 
}

/* -----------------------------------------------------
   [NEW] 통합 카드 버튼 스타일
   ----------------------------------------------------- */
.card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.btn-action {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 800;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    letter-spacing: -0.3px;
}

/* CAD 버튼 (회색/파란색 테마) */
.btn-cad {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #cbd5e1;
}
.btn-cad:hover {
    background: var(--main-color, #1e3a8a);
    color: #ffffff;
    border-color: var(--main-color, #1e3a8a);
}
.btn-cad.disabled {
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
}
.btn-cad.disabled:hover {
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #e2e8f0;
}

/* PDF 버튼 (붉은색 테마) */
.btn-pdf {
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
}
.btn-pdf:hover {
    background: #e11d48;
    color: #ffffff;
    border-color: #e11d48;
}

/* =========================================================
   [NEW] 완벽한 클래식 서류철(Folder) 탭 네비게이션
   ========================================================= */
.sub-tab-nav { 
    width: 100%; 
    background: #ffffff;
    border-bottom: 2px solid var(--main-color, #1e3a8a); 

    /* ★ 강제 고정 (Fixed) ★ */
    position: fixed; 
    top: 90px; /* 1. 메인 헤더 높이에 맞게 숫자를 조절해서 딱 붙이세요 */
    left: 0;
    z-index: 50; /* 2. 스크롤 시 무조건 맨 위로 올라오게 함 */
}

.tab-inner { 
    max-width: 1400px; 
    margin: 0 auto; 
    display: flex; 
    padding: 0 40px; 
    gap: 6px; /* 탭 사이 간격을 명확하게 띄워 단추처럼 보이게 함 */
    align-items: flex-end; /* 탭들이 파란 선 바닥에 딱 맞붙게 정렬 */
}

/* 1. 닫힌 단추 모양 (비활성 탭) - 배경을 더 진한 회색으로 눌러줌 */
.tab-item { 
    flex: 1; 
    text-align: center; 
    padding: 14px 10px; 
    font-size: 16px; 
    font-weight: 700; 
    color: #64748b; 
    
    /* [수정됨] 기존 #f8fafc 보다 확실히 어두운 톤으로 변경하여 뒤로 물러나 보이게 함 */
    background: #cbd5e1; 
    
    border: 1px solid #cbd5e1;
    border-bottom: 2px solid var(--main-color, #1e3a8a); 
    border-radius: 8px 8px 0 0; 
    margin-bottom: -2px; 
    text-decoration: none; 
    transition: all 0.2s; 
    z-index: 1; 
}

/* 2. 비활성 탭 마우스 올렸을 때 - 더 묵직한 색으로 반응 */
.tab-item:hover { 
    background: #e2e8f0; /* [수정됨] 마우스를 올리면 한 단계 더 진해짐 */
    color: #1e293b;
}

/* 3. ★ 열린 서류철 모양 (활성화된 탭) - 완전한 흰색으로 입체감 극대화 ★ */
.tab-item.active { 
    color: var(--main-color, #1e3a8a); 
    
    /* [유지] 본문 배경과 동일한 완전한 흰색을 유지하여 앞으로 튀어나온 느낌을 줌 */
    background: #ffffff; 
    
    border: 2px solid var(--main-color, #1e3a8a); 
    border-bottom: 2px solid #ffffff; 
    margin-bottom: -2px; 
    font-weight: 800;
    z-index: 5; 
}
/* 서류철 탭 아래의 검색/표 영역이 자연스럽게 이어지도록 여백 조정 */
.search-container { 
    max-width: 1400px; 
    margin: 30px auto 100px; 
    display: flex; 
    padding: 0 40px; 
    gap: 40px; 
}

/* =========================================================
   [NEW] 도면 파일이 없을 때 (회색 비활성화 버튼)
   ========================================================= */
.btn-table.disabled { 
    background: #f1f5f9; 
    color: #94a3b8; 
    border-color: #e2e8f0; 
    pointer-events: none; /* ★ 클릭 자체를 완벽하게 차단합니다 */
    cursor: default; 
}



/* =========================================================
   섹션 타이틀 & 배너 스타일
   ========================================================= */
.hub-section { margin-bottom: 20px; }

.hub-sec-title { text-align: center; margin-bottom: 40px; }
.hub-sec-title h2 { font-size: 36px; font-weight: 900; color: #0f172a; margin-bottom: 12px; letter-spacing: -0.5px; }
.hub-sec-title p { font-size: 17px; color: #64748b; }
/* =========================================================
   종합 카탈로그 배너 (가볍고 슬림한 형태로 변경)
   ========================================================= */
.full-catalog-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 무겁고 진한 배경 대신, 페이지에 자연스럽게 묻어나는 밝은 배경 */
    background: #f8fafc; 
    border: 1px solid #e2e8f0;
    padding: 20px 30px; /* 상하좌우 여백 대폭 축소 */
    border-radius: 8px;
    margin-bottom: 40px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.banner-text h3 { 
    color: #1e293b; /* 어두운 회색 글씨로 차분하게 변경 */
    font-size: 18px; /* 22px -> 18px로 대폭 축소 */
    font-weight: 800; 
    margin-bottom: 6px; 
    letter-spacing: -0.5px; 
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 제목 앞에 작은 책 아이콘을 넣어 포인트를 줌 */
.banner-text h3::before {
    content: '📘'; 
    font-size: 16px;
}

.banner-text p { 
    color: #64748b; 
    font-size: 14px; 
    margin: 0; 
}

.btn-download-full {
    display: inline-flex; 
    align-items: center; 
    gap: 8px;
    background: #e11d48; /* 버튼 색상은 유지하되 크기를 축소 */
    color: #ffffff; 
    padding: 10px 20px; /* 16px 35px -> 10px 20px로 대폭 축소 */
    font-size: 14px; /* 18px -> 14px로 축소 */
    font-weight: 700; 
    border-radius: 6px; 
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-download-full:hover {
    background: #be123c; 
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.2); 
    color: #ffffff;
}

/* 종합 카탈로그 배너 모바일 반응형 */
@media screen and (max-width: 768px) {
    .full-catalog-banner { 
        flex-direction: column; 
        align-items: flex-start; /* 모바일에서 좌측 정렬로 깔끔하게 */
        text-align: left; 
        gap: 15px; 
        padding: 20px; 
    }
    .btn-download-full { 
        width: 100%; 
        justify-content: center; 
    }
}

.btn-download-full {
    display: inline-flex; 
    align-items: center; 
    gap: 10px;
    background: #e11d48; 
    color: #ffffff; 
    padding: 16px 35px;
    font-size: 18px; 
    font-weight: 800; 
    border-radius: 8px; 
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-download-full:hover {
    background: #f43f5e; 
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(225, 29, 72, 0.35); 
    color: #ffffff;
}

@media screen and (max-width: 768px) {
    .full-catalog-banner { flex-direction: column; text-align: center; gap: 25px; padding: 30px 20px; }
    .btn-download-full { width: 100%; justify-content: center; }
}

/* =========================================================
   2. 개별 다운로드 서브페이지 (탭 메뉴 LNB 스타일)
   ========================================================= */
/*
.sub-tab-nav { width: 100%; background: #ffffff; border-bottom: 1px solid #cbd5e1; margin-top: 85px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.tab-inner { max-width: 1300px; margin: 0 auto; display: flex; padding: 0 40px; }
.tab-item { flex: 1; text-align: center; padding: 22px 10px; font-size: 17px; font-weight: 700; color: #64748b; text-decoration: none; position: relative; transition: all 0.3s ease; border-right: 1px solid #f1f5f9; }
.tab-item:first-child { border-left: 1px solid #f1f5f9; }
.tab-item::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background: transparent; transition: all 0.3s ease; }
.tab-item:hover { color: #1e293b; background: #f8fafc; }
.tab-item.active { color: var(--main-color); background: #eff6ff; }
.tab-item.active::after { background: var(--main-color); }
*/

/* =========================================================
   3. 개별 다운로드 서브페이지 (좌측 사이드바 필터)
   ========================================================= */
/* 서류철 탭 아래의 검색/표 영역이 탭에 가려지지 않게 여백 조정 */
.search-container { 
    max-width: 1400px; 
    
    /* ★ 위쪽 여백(margin-top)을 150px 정도로 확 늘려줍니다. (기존 30px)
       만약 표가 탭에 가려진다면 이 숫자를 더 크게, 너무 멀다면 더 작게 조절하세요! */
    margin: 150px auto 100px; 
    
    display: flex; 
    padding: 0 40px; 
    gap: 40px; 
}

.filter-sidebar { width: 290px; flex-shrink: 0; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 30px 25px; height: fit-content; box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 2px solid #f1f5f9; padding-bottom: 18px; }
.sidebar-header h3 { font-size: 22px; font-weight: 800; color: #0f172a; margin: 0; }
.btn-reset { font-size: 14px; font-weight: 600; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.btn-reset:hover { background: #e2e8f0; color: #0f172a; }

.filter-group { margin-bottom: 35px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group h4 { font-size: 17px; margin-bottom: 15px; border-left: 4px solid var(--main-color); padding-left: 10px; color: #1e293b; font-weight: 800; line-height: 1.2; }

.search-box input { width: 100%; padding: 12px 15px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 15px; font-weight: 500; color: #1e293b; outline: none; transition: all 0.3s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
.search-box input::placeholder { color: #94a3b8; font-size: 14px; }
.search-box input:focus { border-color: var(--main-color); box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1); }
.filter-group ul { list-style: none; padding: 0; margin: 0; }
.filter-group li { margin-bottom: 14px; }
.filter-group li label { font-size: 16px; color: #334155; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; transition: color 0.2s; }
.filter-group li label:hover { color: var(--main-color); }
.filter-group li input[type="checkbox"], .filter-group li input[type="radio"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--main-color); margin: 0; }

.grid-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grid-options label { background: #f8fafc; border: 1px solid #cbd5e1; padding: 10px 0; text-align: center; border-radius: 6px; font-size: 15px; font-weight: 700; color: #475569; cursor: pointer; display: block; transition: all 0.2s; user-select: none; }
.grid-options label:hover { background: #f1f5f9; border-color: #94a3b8; transform: translateY(-1px); }
.grid-options input { display: none; }
.grid-options label.active { background: var(--main-color); color: #ffffff; border-color: var(--main-color); box-shadow: 0 4px 10px rgba(0,0,0,0.15); transform: translateY(-2px); }

/* 스트로크 범위 버튼 넓게 설정 */
.grid-options.stroke-grid {
    grid-template-columns: repeat(2, 1fr); /* 2열로 균등 분할 */
    gap: 8px; /* 버튼 사이 간격 */
}

.grid-options.stroke-grid label {
    padding: 8px 5px; /* 좌우 여백을 줄여 공간 확보 */
    font-size: 15px; /* 글자 크기 미세 조정 */
    letter-spacing: -0.5px; /* 자간을 살짝 좁혀 텍스트가 한 줄에 깔끔하게 들어가도록 처리 */
}

/* =========================================================
   4. 개별 다운로드 서브페이지 (우측 테이블 표 영역)
   ========================================================= */
.product-content .page-header {
    margin-top: 25px; /* 이 숫자를 늘리거나 줄여서 왼쪽 박스와 높이를 보기 좋게 맞추세요 */
}
.product-content { flex: 1; }
.table-wrapper { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; width: 100%; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
/* 칸 너비 고정: 필터로 보이는 행이 바뀌어도 표 칸이 움직이지 않게
   (규격 칸 20%, 나머지 칸은 남은 너비를 똑같이 나눔) */
.table-wrapper table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.table-wrapper thead th:first-child { width: 20%; }
.table-wrapper td { word-break: keep-all; }   /* 한글은 단어 단위로만 줄바꿈 (예: 오른나사, 왼나사) */
.table-wrapper th { background: #f8fafc; padding: 15px 18px; font-size: 16px; text-align: center; border-bottom: 1px solid #cbd5e1; color: #1e293b; font-weight: 800; }
.table-wrapper td { padding: 14px 18px; border-bottom: 1px solid #f1f5f9; font-size: 15px; color: #475569; text-align: center; }
.table-wrapper tr:hover { background-color: #f8fafc; }
.model-name { font-weight: 700; color: var(--main-color); font-size: 16px; text-align: left !important; padding-left: 25px !important; }
.no-result { text-align: center !important; padding: 60px !important; color: #94a3b8 !important; font-size: 16px !important; }

.group-header { background-color: #f1f5f9; cursor: pointer; transition: background-color 0.2s; }
.group-header:hover { background-color: #e2e8f0; }
.group-header td { font-weight: 800; color: var(--main-color); text-align: left; font-size: 17px; padding: 14px 60px 14px 25px; border-top: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; letter-spacing: 1px; position: relative; user-select: none; }
.group-header td::after { content: '▼'; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--main-color); transition: transform 0.3s; }
.group-header.active td::after { transform: translateY(-50%) rotate(180deg); }
.group-header.filtered td { background-color: #e0e7ff; }

.group-header .group-name { }
.group-header .group-count {
    position: absolute;
    right: 52px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(30, 58, 138, 0.08);
    color: var(--main-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

/* 시리즈 줄 꾸밈 (도면 검색 7개 페이지 공통 - 각 file_*.js 가 .rich 를 붙임)
   색칠한 칸 없이 글자만, 이름 칸 너비 고정으로 설명 시작 위치를 맞춤 */
.group-header.rich { background: #fff; }
.group-header.rich:hover { background: #f8fafc; }
.group-header.rich.active { background: #f0f7ff; }
.group-header.rich td { padding: 15px 70px 15px 25px; letter-spacing: 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.group-header.rich.active td { box-shadow: inset 3px 0 0 var(--main-color); }
.group-header.rich .group-code { display: inline-block; min-width: 130px; padding-right: 14px; white-space: nowrap; font-size: 19px; font-weight: 800; color: var(--main-color); letter-spacing: 0.3px; }
.group-header.rich .group-desc { font-size: 14.5px; font-weight: 500; color: #64748b; }
.group-header.rich .group-count { background: #f1f5f9; color: #64748b; }
.group-header.rich td::after { color: #94a3b8; }
.group-header.rich.active td::after { color: var(--main-color); }
.group-header.rich.filtered td { background-color: #f0f7ff; }

.btn-table { display: inline-block; padding: 6px 14px; font-size: 13px; font-weight: 700; border-radius: 4px; text-align: center; transition: 0.2s; border: 1px solid #cbd5e1; min-width: 55px; text-decoration: none; }
.btn-table.dwg2d { background: #f8fafc; color: #475569; }
.btn-table.dwg2d:hover { background: #64748b; color: #fff; border-color: #64748b; }
.btn-table.dwg3d { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.btn-table.dwg3d:hover { background: #10b981; color: #fff; border-color: #10b981; }
.btn-table.pdf { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }
.btn-table.pdf:hover { background: #f43f5e; color: #fff; border-color: #f43f5e; }

/* =========================================================
   [수정] 체크박스 링 색상 진하게 변경 (시인성 향상)
   ========================================================= */
.filter-group ul input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    /* 기존 #cbd5e1 에서 더 진한 #718096 (회색)으로 변경했습니다 */
    border: 2px solid #718096; 
    border-radius: 50%;
    margin-right: 8px;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* 체크 되었을 때 파란색 테두리로 변경 */
.filter-group ul input[type="checkbox"]:checked {
    border-color: var(--main-color, #1e3a8a);
}

/* 체크 시 가운데 파란 점 */
.filter-group ul input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: var(--main-color, #1e3a8a);
    border-radius: 50%;
}

.filter-group ul li label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    color: #334155;
}





/* =========================================================
   5. 통합 모바일 반응형 (Mobile Responsive)
   ========================================================= */
/* 태블릿 분기점 */
@media screen and (max-width: 1100px) {
    /* 1. 메인 허브 2칸 배치 */
    .hub-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .card-img { height: 200px; }
}

@media screen and (max-width: 768px) {
    /* 1. 메인 허브 위치 조정 */
    .download-hub-container { padding: 0 20px; margin-top: 40px; }

    /* 2. 서브페이지 탭 메뉴 */
    /* 모바일: 탭을 화면에 고정하지 않고(내용을 가리지 않게), 한 줄로 두고 좌우로 밀어서 봄 */
    .sub-tab-nav { position: relative; top: auto; margin-top: 85px; }
    .tab-inner { padding: 8px 12px 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tab-inner::-webkit-scrollbar { display: none; }
    .tab-item { flex: 0 0 auto; padding: 11px 14px; font-size: 14px; white-space: nowrap; }
    
    /* 3. 서브페이지 사이드바 상단 이동 */
    .search-container { flex-direction: column; padding: 0 20px; gap: 25px; margin-top: 20px; }
    .filter-sidebar { width: 100%; padding: 25px; }
    
    /* 4. 서브페이지 테이블 가로 스크롤 허용 */
    .table-wrapper { overflow-x: auto; }
    .table-wrapper table { min-width: 750px; }
}

/* 모바일 전용 분기점 */
@media screen and (max-width: 600px) {
    /* 1. 메인 허브 1칸 배치 및 사이즈 축소 */
    .hub-grid { grid-template-columns: 1fr; }
    .card-img { height: 180px; }
    .card-info { padding: 20px; }
}
/* =========================================================
   도구 카드 (가공도면 작성 · 볼나사 선정) - 제품 카드 2칸 너비의 가로형
   ========================================================= */
/* 제품 카드 아래 도구 카드 4장 한 줄 (제품 카드와 같은 4칸, 좁은 화면에서는 가로형 카드 1장씩) */
.hub-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
.hub-card-tool { border: 2px solid var(--main-color); }
.hub-card-tool .card-img { height: 190px; background: #f0f7ff; border-bottom: 1px solid #dbeafe; }
.hub-card-tool .card-img img { padding: 36px 24px 14px; }
.hub-card-tool .tool-art { width: 78%; max-width: 280px; height: auto; margin-top: 18px; transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
.hub-card:hover .tool-art { transform: scale(1.06); }
.hub-card-tool .card-info { padding: 22px 24px 24px; }
.hub-card-tool .card-info p { margin-bottom: 8px; }
.hub-card-tool .tool-desc { font-size: 13.5px; color: #475569; line-height: 1.6; margin-bottom: 18px !important; }
.hub-card-tool .card-actions { margin-top: auto; }
.badge-tool {
    position: absolute; top: 15px; left: 15px; z-index: 2;
    background: var(--main-color); color: #fff;
    font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 4px;
}
.btn-tool { background: var(--main-color); color: #fff; border: 1px solid var(--main-color); }
.btn-tool:hover { background: #003d82; border-color: #003d82; color: #fff; }

@media screen and (max-width: 1100px) {
    .hub-tools { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
    .hub-card-tool { flex-direction: row; }
    .hub-card-tool .card-img { width: 42%; height: auto; min-height: 200px; flex-shrink: 0; border-bottom: none; border-right: 1px solid #dbeafe; }
    .hub-card-tool .card-info { justify-content: center; }
    .hub-card-tool .card-actions { margin-top: 0; }
}
@media screen and (max-width: 600px) {
    .hub-card-tool { flex-direction: column; }
    .hub-card-tool .card-img { width: 100%; min-height: 0; height: 180px; border-right: none; border-bottom: 1px solid #dbeafe; }
}

/* 표 아래 안내문 (서보실린더 최고속도 등) */
.table-note { margin: 12px 4px 0; font-size: 13px; color: #64748b; line-height: 1.6; }
/* 필터 선택지가 긴 글자일 때 2칸 배치 (예: 서보실린더 구동축) */
.grid-options.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* =========================================================
   카탈로그 2종 (기술자료 맨 아래) - 남색 배너 안에 표지 + 설명 + 다운로드
   ========================================================= */
.catalog-section {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; padding: 14px 10px; border-radius: 16px;
    background: radial-gradient(circle at 85% 0%, rgba(56, 189, 248, 0.22), transparent 45%),
                linear-gradient(135deg, #0b1f3a 0%, #0f2f5c 55%, #0056b3 100%);
    box-shadow: 0 15px 35px rgba(11, 31, 58, 0.22);
}
.catalog-card {
    display: flex; align-items: center; gap: 30px; padding: 26px 32px; border-radius: 12px;
    transition: background 0.3s;
}
.catalog-card + .catalog-card { border-left: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0 12px 12px 0; }
.catalog-card:hover { background: rgba(255, 255, 255, 0.05); }
/* 책 표지 */
.cat-book { display: block; flex-shrink: 0; perspective: 800px; text-decoration: none; }
.cat-cover {
    display: block; width: 124px; height: auto; aspect-ratio: 520 / 745; object-fit: cover;
    border-radius: 2px 6px 6px 2px;
    box-shadow: 10px 14px 26px rgba(0, 0, 0, 0.45), inset -3px 0 6px rgba(255, 255, 255, 0.08);
    transform: rotateY(-14deg) rotateZ(-2deg); transition: transform 0.4s ease;
}
.catalog-card:hover .cat-cover { transform: rotateY(-4deg) rotateZ(0deg); }
/* 설명 */
.cat-body { flex: 1; min-width: 0; }
.cat-eyebrow { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 2px; color: #38bdf8; margin-bottom: 6px; }
.cat-body h3 { font-size: 21px; font-weight: 800; color: #fff; margin: 0 0 6px; }
.cat-body p { font-size: 14px; color: rgba(255, 255, 255, 0.72); margin: 0 0 16px; line-height: 1.6; word-break: keep-all; }
.cat-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cat-btn {
    display: inline-block; white-space: nowrap; padding: 11px 22px; border-radius: 8px;
    background: #e11d48; color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; transition: background 0.2s;
}
.cat-btn:hover { background: #be123c; color: #fff; }
.cat-meta { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }

/* 종이 카탈로그 요청 줄 (배너 맨 아래) */
.cat-request {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
    margin: 4px 22px 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 14.5px; color: rgba(255, 255, 255, 0.75); word-break: keep-all; text-align: center;
}
.cat-request a {
    padding: 7px 16px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px;
    color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background 0.2s, border-color 0.2s;
}
.cat-request a:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

@media (max-width: 1100px) {
    .catalog-section { grid-template-columns: 1fr; }
    .catalog-card + .catalog-card { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0 0 12px 12px; }
}
@media (max-width: 600px) {
    .catalog-card { flex-direction: column; text-align: center; padding: 24px 18px; gap: 20px; }
    .cat-foot { justify-content: center; }
    .cat-btn { width: 100%; text-align: center; }
}