/* 장비 목록 — 워드프레스 원본(register_sft_equipment_library.php)에서 그대로 가져왔다.
   2026-09-25. 흰색 고정 · top10-card/mg-card · 공정군 섹션 안에 장비군별 가로 스크롤.
   새로 디자인하지 않는다 — 원본이 확정 디자인이다. */
/* =========================================================================
   장비 라이브러리 — Elementor Custom CSS
   2026-08-21, Elementor Pro Loop Grid 기반. Post Type: sft_machine.
   카드 클래스명은 wordpress/sft_production_line_library.css와 동일한
   네이밍 컨벤션(top10-card/rank-number/image-area/info-area/
   product-title/product-desc)을 그대로 재사용한다 — 두 라이브러리
   페이지가 시각적으로 한 가족처럼 보이게 하기 위함.

   이 파일은 두 섹션을 다룬다:
   1. 대표 공급 장비 — featured_section/ranking_order(둘 다 이미 존재,
      config/equipment_fields.py) 기준 Top N 히어로(가로 스크롤).
   2. process_group별 섹션 — 그 안에 machine_group별 가로 스크롤 행
      ("전처리·배합 > 탱크설비" 같은 구조). process_group/machine_group
      전부 이미 존재하고 이미 동기화되는 필드다(Content Engine 쪽
      변경 불필요, 이 CSS + Elementor 설정만으로 끝난다).

   ── Elementor Loop Grid 설정 가이드 ──────────────────────────────────
   - 히어로: ACF 필터 featured_section == "main_machine"(또는 원하는
     버킷), Order By: Meta Value Num(ranking_order), ASC.
   - process_group 섹션: process_group 값별로 큰 섹션을 배치(예: "전처리·
     배합"). 그 안에 machine_group 값별로 Loop Grid를 반복 배치하고
     ACF 필터 process_group == "전처리·배합" AND machine_group ==
     "탱크설비" 식으로 이중 필터를 건다. 정렬은 Order By: Meta Value Num,
     Meta Key: library_sort_order, Order: ASC(2026-08-21 확정 — ranking_
     order와 별개 필드. 히어로에 안 뽑힌 장비도 이 값으로 자기
     machine_group 행 안에서 순서를 가진다).

   ── ACF 필드 → 카드 요소 매핑표(2026-08-28 카드 재구성 2차 정리 —
      실사용 지시 "가독성이 너무 안나온다.. 정보밀도도 너무 높고":
      뱃지는 추천상품 하나만, 모델넘버는 제목 병기, 무게는 뺌,
      사이즈·생산능력은 표 대신 한 줄, 구분선 최소화) ──────────────
   요소                        | ACF 필드 / WP 기본 필드                | 위치
   ----------------------------|------------------------------------------|--------
   .rank-number                | (Loop Grid 자체 index, 1부터)          | 히어로만
   .image-area img             | gallery_images_json is_primary=true url | 공통
   .card-badges-top .badge-recommended| ranking_order 존재 여부("추천상품", 이미지 좌상단의 유일한 뱃지) | group만
   .product-title .product-code | machine_code(제목 옆 병기, 뱃지 아님)  | 공통
   .product-title               | title(Post Title)                      | 공통
   .product-desc                | summary                                | 공통
   .spec-meta                   | machine_dimensions + capacity_display를| 공통
                               |  " · "로 이은 한 줄(값 있는 것만)       |
   .price-line                  | applied_price_text(포인트색, 굵게)     | 공통
   .market-ref                  | market_price_reference_usd(상위 25%    | group만
                               |  중간값, 범위 아님, 없으면 텍스트 자체를 생략)
                               |  + qualified_product_count             |
   .lead-time                   | case_lead_time                         | group만

   이미지 비율도 다르다 — 히어로(.eq-hero-lines .image-area)는 1:1 유지
   (실제 사진이 1:1), group(.mg-card .image-area)은 프레임만 4:3으로
   넓히고 사진 자체는 늘리지 않는다(object-fit: contain으로 레터박스).

   "검증완료"류 뱃지는 넣지 않는다(2026-08-28, 실사용 판단) —
   validation_status는 ACF 미노출+100% valid만 동기화돼 무의미,
   review_grade는 80점 이상이 0%(전수 조사), pricing_status=calculated도
   결국 전부 채워질 값이라 부적합. case_price_amount(실거래가)가
   채워지면 재검토.
   ========================================================================= */

/* 2026-08-21 확정 — "이 페이지는 검은색이 아닌 흰색을 원해, 사진배경에
   검은색을 넣을 필요가 없어"(사용자 확정). 원본 디자인 참고 스크린샷이
   전부 흰색 배경이라, 방문자 OS/브라우저 다크모드 설정과 무관하게 항상
   밝은 테마로 고정한다 — 다크모드 자동전환(prefers-color-scheme)을
   의도적으로 넣지 않는다. */
:root {
  --eq-ink: #101418;
  --eq-muted: #5b6472;
  --eq-line: #e6e9ee;
  --eq-surface: #ffffff;
  --eq-canvas: #f1ede4;
  /* 2026-09-25(실사용 지시 "배경색은 흰색말고 아이보리") — 바탕은
     아이보리, 카드 면(--eq-surface)은 흰색 그대로 둔다. 그래야 카드가
     바탕에서 떠 보인다. */
  --eq-paper: #faf7f0;
  --eq-accent: #4db6ac;
  --eq-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Pretendard, "Noto Sans KR", sans-serif;
}

/* -------------------------------------------------------------------------
   섹션 헤더 — "EQUIPMENT LIBRARY / 대표 공급 장비", process_group 타이틀
   ------------------------------------------------------------------------- */

/* 2026-08-28(실사용 지시 "타이틀은 왼쪽에 너무 붙어있어.. 200정도
   오른쪽으로") — 섹션 제목류 전부 왼쪽에 200px 여백을 준다. 카드 트랙의
   "왼쪽 300px" 여백(§.sft-loop-track::before)과는 별개 값 — 제목은
   그보다 조금 덜 들여쓴다. */
.eq-lib-eyebrow{
    font-family: var(--eq-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eq-muted);
    margin: 0 0 8px;
    padding-left: 200px;
}

.eq-lib-title{
    font-family: var(--eq-font);
    font-size: 32px;
    font-weight: 800;
    color: var(--eq-ink);
    margin: 0 0 20px;
    padding-left: 200px;
}

/* -------------------------------------------------------------------------
   검색 상자 — [sft_library_search] 단축코드가 렌더링하는 마크업
   (wordpress/register_sft_library_search.php). 서버 호출 없이 이미
   렌더된 카드를 그 자리에서 텍스트로 걸러내는 순수 클라이언트 필터.
   ------------------------------------------------------------------------- */

/* 2026-08-28 — 타이틀류(§.eq-lib-title 등)와 같은 왼쪽 200px 여백을
   맞춘다(줄맞춤). */
.sft-library-search {
    position: relative;
    max-width: 420px;
    margin: 0 0 32px;
    padding-left: 200px;
}

.sft-library-search-input {
    width: 100%;
    font-family: var(--eq-font);
    font-size: 15px;
    color: var(--eq-ink);
    background: var(--eq-surface);
    border: 1px solid var(--eq-line);
    border-radius: 12px;
    padding: 12px 16px 12px 40px;
    box-shadow: 0 1px 2px rgba(16, 20, 24, 0.06);
    /* 네이티브 type="search" 크롬(브라우저 기본 돋보기/클리어 버튼)이
       커스텀 .sft-library-search-icon과 겹쳐 보이는 문제 방지
       (실사용 스크린샷 확인 — "이상하게 보임"). */
    -webkit-appearance: none;
    appearance: none;
}

.sft-library-search-input::-webkit-search-decoration,
.sft-library-search-input::-webkit-search-cancel-button,
.sft-library-search-input::-webkit-search-results-button,
.sft-library-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}

.sft-library-search-input:focus {
    outline: none;
    border-color: var(--eq-accent);
    box-shadow: 0 0 0 3px rgba(77, 182, 172, 0.18);
}

.sft-library-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--eq-muted);
    font-size: 16px;
    pointer-events: none;
}

.sft-library-search-empty {
    font-family: var(--eq-font);
    font-size: 14px;
    color: var(--eq-muted);
    margin: 12px 0 0;
}

.sft-library-search-hidden {
    display: none !important;
}

/* -------------------------------------------------------------------------
   카테고리 탭(2026-08-28, 실사용 지시 "탭을 넣어서 필터하는게 좋을꺼같다")
   — register_sft_equipment_library.php가 렌더링하는 .eq-category-tabs.
   ------------------------------------------------------------------------- */

/* 2026-08-28(실사용 지시 "필터의 디자인은 2번사진과 같이") — 낱개
   테두리 버튼이 아니라, 옅은 회색 "캡슐 트랙" 하나 안에 버튼들이
   들어있고 선택된 것만 진한 알약이 그 위에 떠 있는 형태(애플 제품
   카테고리 탭 참고 스크린샷). 전체 폭을 채우지 않고 내용만큼만
   차지한다(margin-right:auto로 오른쪽에 붙지 않게). */
.eq-category-tabs-wrap {
    /* 2026-09-02 — margin-left는 테마 리셋에 먹힌다(§.eq-process-group-title
       주석 참고). 들여쓰기는 padding으로 준다. */
    margin: 0 0 40px !important;
    padding-left: 200px;
    overflow-x: auto;
    scrollbar-width: none;
}

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

.eq-category-tabs {
    display: inline-flex;
    flex-wrap: nowrap;
    /* 2026-09-28 — 중문 허브(cn.shiftfinder.kr/projects)의 필터탭으로 통일한다
       (사장님 "우리 필터탭은 중국 필터탭으로 변환하자"). 탭을 감싸던 크림색
       알약 배경을 없앤다 — 탭 하나하나가 흰 알약이라 바깥 알약과 겹쳐 보인다. */
    gap: 10px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.eq-category-tab {
    font-family: var(--eq-font);
    /* 2026-09-02 — 14px/9px 패딩이라 존재감이 없었다. */
    font-size: 16px;
    font-weight: 600;
    /* 2026-09-28 — 비활성도 흰 알약 + 옅은 테두리로 세운다. 전에는 배경 없는
       글자라 「어디까지가 탭인지」가 안 보였다. */
    color: var(--eq-ink);
    background: var(--eq-surface) !important;
    border: 1px solid var(--eq-line) !important;
    box-shadow: none;
    border-radius: 999px;
    padding: 12px 24px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease,
                border-color .15s ease, box-shadow .15s ease;
}

/* 개수는 라벨 옆에 저채도로 붙인다 — 라벨과 같은 크기면 숫자가 먼저 읽힌다. */
.eq-category-tab .tab-count {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--eq-muted);
}

.eq-category-tab.is-active .tab-count {
    color: rgba(255, 255, 255, 0.62);
}

/* 2026-09-02 — hover에서 글자색만 지정하고 배경을 비워뒀더니 테마의
   button:hover 기본 배경(크림슨)이 그대로 뚫고 나왔다("활성상태가
   빨간색이야" — 실은 활성이 아니라 hover였다). 배경·테두리·그림자를
   상태별로 전부 명시해 테마 스타일이 끼어들 자리를 없앤다. */
.eq-category-tab:hover,
.eq-category-tab:focus,
.eq-category-tab:focus-visible,
.eq-category-tab:active {
    color: var(--eq-ink) !important;
    background: var(--eq-surface) !important;
    border: 1px solid rgba(16, 20, 24, 0.28) !important;
    box-shadow: none !important;
    outline: none;
}

.eq-category-tab.is-active:hover,
.eq-category-tab.is-active:focus,
.eq-category-tab.is-active:focus-visible,
.eq-category-tab.is-active:active {
    color: #ffffff !important;
    background: var(--eq-ink) !important;
    border-color: var(--eq-ink) !important;
}

.eq-category-tab.is-active {
    /* 2026-09-28 — 활성을 청록(#0f8a7e)에서 잉크로 바꾼다. 중문 허브와 같은
       모양이어야 두 화면이 한 가족으로 읽힌다. 청록은 카드 가격이 쓰는
       색이라, 탭까지 청록이면 화면에 강조가 둘이 된다. */
    background: var(--eq-ink) !important;
    color: #ffffff !important;
    border: 1px solid var(--eq-ink) !important;
    box-shadow: none !important;
}

.eq-process-group-title{
    font-family: var(--eq-font);
    /* 2026-09-01 — 34px로 확대(실사용 "글씨가 전체적으로 작아"). */
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--eq-ink);
    /* 2026-09-02 — margin-left:200px로 들여쓰기했더니 테마가 제목류에
       거는 margin 리셋에 먹혀 왼쪽 끝에 붙어버렸다(장비군 제목의
       padding-left는 살아남은 것과 대조). 들여쓰기는 padding으로
       되돌리고, 밑줄은 border-bottom 대신 ::after로 그려서 선이
       200px 지점에서 시작하게 한다 — border-bottom은 padding 영역까지
       덮어 화면 왼쪽 끝부터 그어지는 게 원래 문제였다. */
    position: relative;
    margin: 0 0 34px !important;
    padding-left: 200px;
    padding-bottom: 16px;
}

/* 2026-09-26 — 같은 지시로 여기 밑줄도 걷는다. 규칙은 두 목록이 같아야
   한다(사장님 "타이틀 헤더의 선을 다없앨것"). */

.eq-machine-group-title{
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--eq-font);
    /* 2026-09-01 — 23px/700으로도 카드(높이 400px+)에 눌려 존재감이
       없었다("여전히 헤더가 존재감이 없어"). 크기·굵기를 함께 올린다. */
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--eq-ink);
    margin: 0 0 26px !important;
    padding-left: 200px;
}

.eq-machine-group-title::before{
    content: "";
    display: inline-block;
    /* 2026-09-01 — 캡슐이 작아 헤더 위계를 못 받쳐줬다. */
    width: 7px;
    height: 30px;
    border-radius: 4px;
    background: var(--eq-accent);
}

.eq-machine-group-section{
    /* 2026-09-01 — 장비군 사이가 붙어 빽빽했다(실사용 지시 "여백으로
       빽빽한 느낌을 제거"). 가로 배치(320px + gap 48px, 4개+반쯤)는
       그대로 두고 세로만 벌린다. */
    margin-top: 64px;
}

.eq-machine-group-section:first-of-type{
    margin-top: 0;
}

.eq-process-group-section{
    margin-top: 96px;
}

.eq-process-group-section:first-of-type{
    margin-top: 0;
}

/* =========================================================================
   1. 대표 공급 장비 — Top N 히어로(가로 스크롤, 숫자 랭크 배경)
   ========================================================================= */

.eq-hero-lines{
    width: 100% !important;
    margin: 0 !important;
    /* overflow-y는 열어둔다 — mg-card의 기능 캡슐이 이미지 카드 하단
       경계 아래로 50% 걸치는 디자인이라, 세로까지 hidden으로 막으면
       그 캡슐이 잘린다(2026-08-29, "실제페이지에서 캡슐 잘림" 재현
       후 원인 확인 — .sft-loop-track이 이미 overflow-x:auto로 가로
       스크롤은 알아서 처리하므로 이 바깥 래퍼는 가로만 막으면 된다). */
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.eq-hero-lines .elementor-loop-container,
.eq-hero-lines .e-loop-container,
.eq-hero-lines .sft-loop-track{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    overflow-x: auto !important;
    /* .eq-machine-group-row와 동일한 이유로 visible(2026-08-29). */
    overflow-y: visible !important;

    gap: 56px !important;
    padding-right: 100px !important;
    padding-bottom: 24px !important;

    scrollbar-width: none !important;
}

.eq-hero-lines .elementor-loop-container::-webkit-scrollbar,
.eq-hero-lines .e-loop-container::-webkit-scrollbar,
.eq-hero-lines .sft-loop-track::-webkit-scrollbar{
    display: none !important;
}

/* 2026-08-22 — "애플 사이트 기본 배치": 가로 스크롤 행이 브라우저
   왼쪽 끝까지 풀블리드로 깔리되, 첫 카드 앞에 여백을 둬서 본문
   (.eq-lib-title 등)과 카드 시작 위치를 맞춘다. 히어로/공정군 섹션
   전부 동일하게 적용한다. 2026-08-28 — 300px→200px(실사용 지시
   "왼쪽 여백이 너무 많은거같다.. 200 정도 띄우는거로 맞추자" — 오늘
   타이틀류에 준 200px 들여쓰기와 값을 맞춤, §.eq-lib-title 등). */
.eq-hero-lines .elementor-loop-container::before,
.eq-hero-lines .e-loop-container::before,
.eq-hero-lines .sft-loop-track::before{
    content: "" !important;
    /* 2026-09-02 — 스페이서(200px) 뒤에 flex gap이 한 번 더 붙어
       첫 카드가 제목보다 gap만큼 오른쪽에서 시작했다. 스페이서에서
       gap을 빼서 카드 시작점을 제목(padding-left 200px)에 맞춘다. */
    flex: 0 0 144px !important;
    width: 144px !important;
    min-width: 144px !important;
    max-width: 144px !important;
    display: block !important;
}

/* 2026-08-22 — 카드 크기를 키워 한 화면에 "3장 온전히 + 4장째 절반"
   보이는 정도로 맞춘다(실사용 지시). 380px → 460px. */
.eq-hero-lines .elementor-loop-container > *,
.eq-hero-lines .e-loop-container > *,
.eq-hero-lines .sft-loop-track > *{
    /* 2026-09-25 에 460 → 330 으로 줄였다가(「이미지가 너무 크다」),
       2026-09-27 다시 460 으로 되돌린다 — 사장님 "대표공급 설비도
       대표 구축 생산라인의 크기로 맞춰줘". 그 사이 카드가 흰 판에
       사진이 갇힌 꼴에서 바뀌어 크기 문제가 아니었다. 두 화면이
       같은 자리에서 같은 크기로 서야 한 가족으로 읽힌다. */
    flex: 0 0 460px !important;
    width: 460px !important;
    max-width: 460px !important;
    min-width: 460px !important;
    align-self: flex-start !important;
}

.eq-hero-lines .top10-card{
    position: relative;
    width: 100% !important;
    height: auto !important;
    padding-left: 72px !important;   /* 순위 숫자 자리 — 생산라인과 같게 */
    overflow: visible !important;
}

/* 2026-08-22 — Netflix Top 10류 "외곽선만 있는 큰 숫자"로 변경. 배경처럼
   깔리는 큰 숫자가 채워진 회색 블록이 아니라 가늘고 큰 외곽선 글자가 돼야
   카드 위에 자연스럽게 겹쳐 보인다(실사용 피드백 — 스크린샷 비교 지시). */
.eq-hero-lines .rank-number{
    position: absolute;
    /* 2026-09-27 — 넷플릭스처럼 숫자를 위쪽에 붙인다(사장님 "넷플릭스를
       보니 숫자가 위쪽에 붙어있어"). 세로 가운데(42%)에 두면 사진 한복판을
       가로질러 사진과 싸운다. 위로 올리면 사진 어깨에 걸쳐 배경처럼 깔린다. */
    left: -10px;
    top: 0;
    /* 2026-09-27 — font-family 를 걷는다(사장님 "숫자 2 안쪽에 겹치는
       부분들이 이상해"). --eq-font 는 맥에서 SF Pro 로 떨어지는데, 그
       글자는 획이 겹친 조각으로 그려져 있다. 평소엔 안 보이지만
       -webkit-text-stroke 는 **속 윤곽까지 전부** 그어서 2·6·9 처럼
       획이 겹치는 글자 안에 별 모양 같은 선이 남는다. 본문 폰트
       (IBM Plex Sans KR)는 획이 하나라 깨끗하다 — 생산라인 쪽 숫자가
       멀쩡했던 것도 거기서 이 줄이 없어 본문 폰트를 물려받았기 때문이다. */
    /* 2026-09-27 — 숫자 크기도 생산라인에 맞춘다(220px·4px). 두 화면이
       한 가족인데 150px 과 220px 이 나란히 있으면 다른 회사로 보인다. */
    font-size: 220px;
    /* 2026-09-27 — 800 → 700(사장님 "5 , 6 이 이상해"). 불러오는 IBM Plex
       Sans KR 은 400~700 뿐이라 800 을 쓰면 브라우저가 **가짜 굵게**를
       만든다 — 같은 글자를 조금 밀어 두 번 그리는 방식이라, 외곽선만 긋는
       이 숫자에서는 획이 두 겹으로 보인다. 실제로 있는 굵기를 쓴다. */
    font-weight: 700;
    /* 2026-09-27 — 속선을 **덮어서** 지운다(사장님 "5번 6번은 아직 같아").
       폰트를 바꿔도 안 되는 이유: -webkit-text-stroke 는 글자를 이루는
       조각의 윤곽을 **전부** 긋는다. 요즘 폰트는 5·6·2·9 처럼 획이 도는
       글자를 조각 여럿을 포개 그려 두므로, 포갠 자리의 윤곽이 글자 속에
       선으로 남는다. 어느 폰트가 깨끗한지 쫓을 일이 아니다.

       남는 선은 언제나 글자 **안쪽**에 있다. 그러니 선을 두 배로 긋고
       (바깥 절반만 보이게) 그 위에 바탕색 면을 덮으면 속선이 전부
       가려진다 — paint-order: stroke fill 이 그 순서를 정한다.
       면은 바탕색이라 화면에서는 안 보이고, 숫자가 카드에 걸치는 쪽은
       원래 카드 뒤로 숨는다(카드가 DOM 에서 뒤라 위에 그려진다). */
    color: var(--eq-paper);          /* 이 화면 바탕 = #faf7f0 */
    paint-order: stroke fill;
    -webkit-text-stroke: 8px rgba(16, 20, 24, 0.22);   /* 보이는 두께는 절반 */
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}

/* 2026-08-22(4차 조정) — "완전 투명" 전제가 깨졌다. 실제로 15장 표본
   조사 결과 레거시 이미지(shifthings.com)는 전부 알파 투명이지만,
   Factory AI 정제/생성 이미지(127.0.0.1:8811 경로 — 이번 세션에 채운
   갭 다수 포함)는 전부 흰 배경이 픽셀로 박혀 있다(§sips -g hasAlpha
   확인, 실사용 지시 "생성 이미지는 배경이 있어서 그런가보구나"로
   재확인). 이미지마다 알파 여부가 달라 CSS로 구분할 수 없으므로,
   투명 이미지·흰배경 이미지 둘 다 자연스럽게 맞는 흰색을 기본값으로
   되돌린다 — 어느 쪽이든 "박스 안의 박스"처럼 깨지지 않는다. */
.eq-hero-lines .image-area{
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: var(--eq-surface) !important;
    position: relative;
    /* 2026-09-25(실사용 지시 "이미지 영역은 카드효과를 더줘") — 아이보리
       바탕 위에 흰 면이 뜨도록 테두리 + 두 겹 그림자를 얹는다. */
    border: 1px solid var(--eq-line) !important;
    box-shadow: 0 1px 2px rgba(16,20,24,.05), 0 12px 28px -14px rgba(16,20,24,.18);
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.eq-hero-lines .image-area img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    padding: 20px;
}

/* 2026-08-22(5차 조정) — 테두리(링)도 제거, 살짝 뜨는 효과만 남긴다
   (실사용 지시 "테두리도 삭제, 살짝 띄우는 효과만 유지 — 양쪽 다 동일
   디자인"). 히어로/카테고리, 장비/생산라인 4곳 전부 이 규칙 하나로
   통일한다. */
.eq-hero-lines .top10-card:hover .image-area{
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(16,20,24,.06), 0 22px 40px -16px rgba(16,20,24,.26);
}

/* 2026-08-28(2차 정리 — 실사용 지시 "가독성이 너무 안나온다..
   정보밀도도 너무 높고") — 뱃지는 "추천상품" 하나만(group 행에서만),
   모델넘버는 제목에 병기, 무게는 뺀다, 사이즈·생산능력은 라벨/표
   없이 한 줄로, 구분선 없앰. */
.eq-hero-lines .card-badges-top{
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 2;
}

.eq-hero-lines .badge{
    font-family: var(--eq-font);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(16, 20, 24, 0.16);
}

.eq-hero-lines .badge-recommended{
    color: #ffffff;
    background: var(--eq-accent);
}

.eq-hero-lines .info-area{
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eq-hero-lines .product-title{
    font-family: var(--eq-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--eq-ink);
    margin: 0;
}

/* 2026-08-29(실사용 지시 "랭킹카드 장비품번 뱃지로 이동") — 제목 옆
   병기하던 걸 group 카드와 동일한 검정 배지로, 이미지 좌상단에. */
.eq-hero-lines .product-code{
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 2;
    font-family: var(--eq-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* 2026-09-01 — 검정 솔리드(--eq-ink)는 카드에서 사진 다음으로 눈에
       띄어 장비명보다 품번이 먼저 읽혔다. 품번은 강조 대상이 아니라
       식별자라 반투명으로 낮춘다(실사용 확정 — 민트 계열은 이 화면
       분위기와 안 맞음). */
    color: var(--eq-ink);
    background: rgba(16, 20, 24, 0.07);
    border: 1px solid rgba(16, 20, 24, 0.10);
    border-radius: 999px;
    padding: 4px 11px;
}

.eq-hero-lines .product-desc{
    font-family: var(--eq-font);
    font-size: 15.5px;
    line-height: 1.6;
    color: #3d4653;
    margin: 2px 0 0;
}

/* 사이즈·생산능력 — 표/라벨 없이 저채도 한 줄로 압축. */
.eq-hero-lines .spec-meta{
    font-family: var(--eq-font);
    font-size: 13px;
    color: var(--eq-muted);
    margin: 4px 0 0;
}

.eq-hero-lines .price-line{
    font-family: var(--eq-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--eq-accent);
    margin: 2px 0 0;
}

@media (max-width: 767px){
    .eq-hero-lines .elementor-loop-container,
    .eq-hero-lines .e-loop-container,
    .eq-hero-lines .sft-loop-track{
        gap: 20px !important;
        padding-right: 16px !important;
    }

    .eq-hero-lines .elementor-loop-container::before,
    .eq-hero-lines .e-loop-container::before,
    .eq-hero-lines .sft-loop-track::before{
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
    }

    .eq-hero-lines .elementor-loop-container > *,
    .eq-hero-lines .e-loop-container > *,
    .eq-hero-lines .sft-loop-track > *{
        flex: 0 0 260px !important;
        width: 260px !important;
        max-width: 260px !important;
        min-width: 260px !important;
    }

    .eq-hero-lines .top10-card{
        padding-left: 44px !important;
    }

    .eq-hero-lines .rank-number{
        font-size: 120px;
        top: 0;
        left: -6px;
        -webkit-text-stroke: 6px rgba(16, 20, 24, 0.22);   /* 보이는 두께 3px */
    }
}

/* =========================================================================
   2. process_group > machine_group 가로 스크롤 행
   ("전처리·배합 > 탱크설비" 같은 구조)
   ========================================================================= */

.eq-machine-group-row{
    width: 100% !important;
    margin: 0 !important;
    /* overflow-y는 열어둔다 — mg-card 기능 캡슐이 하단 경계 아래로
       50% 걸치는 디자인이라 세로까지 hidden이면 캡슐이 잘린다
       (2026-08-29, 같은 원인을 .eq-hero-lines와 동일하게 고침). */
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.eq-machine-group-row .elementor-loop-container,
.eq-machine-group-row .e-loop-container,
.eq-machine-group-row .sft-loop-track{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    overflow-x: auto !important;
    /* 진짜 범인은 이 줄이었다(2026-08-29) — 바깥 .eq-machine-group-row가
       아니라 스크롤 트랙 자신이 overflow-y:hidden이라, mg-card 기능
       캡슐(카드 하단 경계 50% 아래로 걸치는 디자인)이 여기서 잘리고
       있었다. visible로 바꾼다 — absolute 포지션 요소라 실제 세로
       스크롤바가 새로 생기지는 않는다. */
    overflow-y: visible !important;

    gap: 48px !important;
    padding: 4px 100px 20px 0 !important;

    scrollbar-width: none !important;
}

.eq-machine-group-row .elementor-loop-container::-webkit-scrollbar,
.eq-machine-group-row .e-loop-container::-webkit-scrollbar,
.eq-machine-group-row .sft-loop-track::-webkit-scrollbar{
    display: none !important;
}

/* 히어로와 동일한 왼쪽 여백 규칙(2026-08-28 — 300px→200px, 타이틀
   들여쓰기와 값 통일). */
.eq-machine-group-row .elementor-loop-container::before,
.eq-machine-group-row .e-loop-container::before,
.eq-machine-group-row .sft-loop-track::before{
    content: "" !important;
    /* 2026-09-02 — 스페이서(200px) 뒤에 flex gap이 한 번 더 붙어
       첫 카드가 제목보다 gap만큼 오른쪽에서 시작했다. 스페이서에서
       gap을 빼서 카드 시작점을 제목(padding-left 200px)에 맞춘다. */
    flex: 0 0 152px !important;
    width: 152px !important;
    min-width: 152px !important;
    max-width: 152px !important;
    display: block !important;
}

/* 2026-08-22(3차 조정) — 380px도 여전히 3장만 보임(실사용 지시 "3개와
   반쯤, 조금만 더 줄이면 될 것 같다"). 320px로 한 단계 더 축소. */
.eq-machine-group-row .elementor-loop-container > *,
.eq-machine-group-row .e-loop-container > *,
.eq-machine-group-row .sft-loop-track > *{
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
}

/* 2026-08-28(3차 재구성 — 실사용 지시 "이름 설명 가격까지 한카드로..
   이름 가격은 이미지와같이 설명은 이미지와 나눠서 텍스트만") — 애플
   제품 카드 스타일. group(machine_group 행) 카드에만 적용한다
   ("랭킹은 지금 그대로 두고 일반장비만 바꾸는거로" — 히어로는 위
   .eq-hero-lines 규칙 그대로 유지). */
/* =========================================================================
   일반 장비 카드 — 최종 통일본(2026-08-29)
   카드 4:3 고정 / 원본 비율 무관(이미지를 absolute+inset으로 카드
   레이아웃에서 완전히 분리해 4:3 안의 동일 영역에 강제 배치) / 캡슐 50% 겹침
   ========================================================================= */

.mg-card{
    position: relative;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* -------------------------------------------------------------------------
   이미지 카드
   ------------------------------------------------------------------------- */

.mg-card .image-area{
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    /* height 계산을 브라우저에 확실히 맡김 */
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    background: var(--eq-surface) !important;
    border: none !important;
    border-radius: 20px !important;
    /* 캡슐이 밖으로 나와야 하므로 visible */
    overflow: visible !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(16,20,24,0.05), 0 14px 32px -16px rgba(16,20,24,0.16);
    margin: 0 0 30px 0 !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Elementor 이미지 위젯 래퍼가 원본 이미지 비율에 따라 높이를 만드는 것 방지 */
.mg-card .image-area .elementor-element,
.mg-card .image-area .elementor-widget,
.mg-card .image-area .elementor-widget-image,
.mg-card .image-area .elementor-widget-container{
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 핵심 — 이미지 자체를 카드 레이아웃에서 완전히 분리하고
   4:3 카드 안의 동일 영역(사방 20px 안쪽)에 강제로 배치한다.
   width/height를 %가 아니라 inset+calc()로 고정해, 원본 이미지의
   실제 비율이 카드 크기 계산에 전혀 영향을 주지 못하게 막는다. */
.mg-card .image-area img{
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
    height: calc(100% - 40px) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    z-index: 1;
}

.mg-card:hover .image-area{
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(16,20,24,0.06), 0 20px 40px -18px rgba(16,20,24,0.22);
}

/* -------------------------------------------------------------------------
   장비 코드 / 추천 배지
   ------------------------------------------------------------------------- */

.mg-card .product-code{
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    z-index: 10;
    font-family: var(--eq-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* 2026-09-01 — 검정 솔리드(--eq-ink)는 카드에서 사진 다음으로 눈에
       띄어 장비명보다 품번이 먼저 읽혔다. 품번은 강조 대상이 아니라
       식별자라 반투명으로 낮춘다(실사용 확정 — 민트 계열은 이 화면
       분위기와 안 맞음). */
    color: var(--eq-ink);
    background: rgba(16, 20, 24, 0.07);
    border: 1px solid rgba(16, 20, 24, 0.10);
    border-radius: 999px;
    padding: 3px 10px;
}

.mg-card .badge-recommended{
    position: absolute !important;
    right: 12px !important;
    top: 12px !important;
    z-index: 10;
    font-family: var(--eq-font);
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: var(--eq-accent);
    border-radius: 999px;
    padding: 4px 10px;
    box-shadow: 0 2px 6px rgba(16,20,24,0.14);
}

/* -------------------------------------------------------------------------
   기능 캡슐 — 이미지 카드 하단에 정확히 50% 겹침(hashtags 최대 3개,
   특징마다 맞는 아이콘이 없어 색점으로만 구분).
   ------------------------------------------------------------------------- */

.mg-card .feature-caps{
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translate(-50%, 50%) !important;
    display: flex !important;
    align-items: center !important;
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    background: var(--eq-surface) !important;
    border: 1px solid var(--eq-line) !important;
    border-radius: 999px !important;
    padding: 7px 5px !important;
    box-shadow: 0 4px 14px rgba(16,20,24,.12);
    white-space: nowrap;
    z-index: 20;
}

.mg-card .feature-caps .feature{
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 82px;
    padding: 0 8px;
    font-family: var(--eq-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--eq-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mg-card .feature-caps .dot{
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--eq-accent);
}

.mg-card .feature-caps .feature:nth-child(3) .dot{ background: #6b9bd8; }
.mg-card .feature-caps .feature:nth-child(5) .dot{ background: #b285d6; }

.mg-card .feature-caps .rule{
    width: 1px;
    height: 13px;
    flex: 0 0 1px;
    background: var(--eq-line);
}

/* -------------------------------------------------------------------------
   텍스트 — 캡슐이 걸치는 공간은 .image-area의 margin-bottom(30px)이
   확보하므로 여기는 최소한의 여백만.
   ------------------------------------------------------------------------- */

.mg-card .product-title{
    width: 100%;
    font-family: var(--eq-font);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--eq-ink);
    /* 2026-09-02 — 이미지와 텍스트 블록 사이를 벌린다. */
    margin: 16px 0 0 !important;
}

.mg-card .product-desc{
    width: 100%;
    font-family: var(--eq-font);
    /* 2026-09-01 — 13.5px + --eq-muted(#5b6472)라 흰 카드에서 거의
       읽히지 않았다("설명은 보이지 않을정도야"). 크기를 올리고 대비를
       한 단계 강화한다. 길이는 2줄로 고정한다("설명은 두줄까지만") —
       3줄짜리가 섞이면 카드 하단(가격 줄)의 높이가 어긋난다. */
    /* 2026-09-02 — 한 단계 더 키운다(실사용 "글씨 크기도 조금 업"). */
    font-size: 16.5px;
    /* 2026-09-02 — 중앙정렬이라 줄마다 시작점이 달라 눈이 매번 왼쪽
       끝을 다시 찾아야 했다("중앙정렬로 인해 가독성이 떨어져"). 설명만
       왼쪽으로 풀고, 장비명·가격은 짧아 중앙정렬을 유지한다(카드의
       대칭 인상 보존). 폭은 줄이지 않는다 — 2줄 고정이라 좁히면 잘리는
       양만 늘어난다. 답답함은 행간으로 푼다. */
    text-align: left;
    line-height: 1.7;
    color: #3d4653;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    /* 2026-09-02 — 6px이라 제목에 붙어 보였다. */
    margin: 11px 0 0 !important;
}

.mg-card .price-line{
    width: 100%;
    font-family: var(--eq-font);
    /* 2026-09-01 — 제목(17px/700/--eq-ink)과 색·굵기가 같아 카드 하단에서
       위계가 안 생겼다. 히어로(.eq-hero-lines .price-line)는 이미
       --eq-accent를 쓰고 있어 규칙도 어긋나 있었다. 포인트색으로 통일하고
       크기를 한 단계 올려 가격이 카드에서 읽히게 한다. */
    /* 2026-09-02 — #4db6ac는 흰 카드에서 명도가 높아 눈에 걸리지 않았다
       ("가격이 전혀 포인트역할을 하지못하고있어"). 같은 청록 계열의 진한
       톤으로 내려 대비를 확보하고 크기도 한 단계 올린다. 색상 토큰을
       바꾸지 않고 이 자리에서만 진하게 쓴다 — --eq-accent는 캡슐 등
       면적이 작은 요소에 그대로 유효하다. */
    font-size: 21px;
    font-weight: 800;
    color: #0f8a7e;
    letter-spacing: -0.02em;
    margin: 16px 0 0 !important;
}

.mg-card .price-line .unit-suffix{
    font-size: 14px;
    font-weight: 500;
    color: var(--eq-muted);
    margin-left: 2px;
}

/* 2026-09-02 — "납품 사례"를 "부터"와 같은 접미사로 달았더니 묻혔다
   ("존재감이 없어.. 중요한정보이니 돋보이게"). 단위가 아니라 "우리가
   실제로 납품한 값"이라는 신뢰 신호라, 가격 위에 배지로 올려 먼저
   읽히게 한다. 색은 활성 탭·가격과 같은 진한 청록 계열. */
.mg-card .case-badge-row{
    width: 100%;
    text-align: center;
    margin: 14px 0 0 !important;
    line-height: 1;
}

.mg-card .case-badge{
    display: inline-block;
    font-family: var(--eq-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #0f8a7e;
    background: rgba(15, 138, 126, 0.10);
    border: 1px solid rgba(15, 138, 126, 0.22);
    border-radius: 999px;
    padding: 5px 12px;
}

/* 2026-09-02 — 공급확정가 배지. 설치검증(채운 배지)과 구분되게 테두리만
   쓴다 — 실제 납품한 값과 견적 기반 값은 신뢰도가 다르므로 시각적으로도
   같은 무게로 보이면 안 된다. */
.mg-card .case-badge.quote{
    color: var(--eq-muted);
    background: transparent;
    border: 1px solid rgba(15, 138, 126, 0.28);
    font-weight: 600;
}

/* 배지가 이미 위에 붙으므로 가격 자체의 위쪽 여백은 줄인다. */
.mg-card .price-line.case{
    margin: 8px 0 0 !important;
}

.mg-card .price-line.empty{
    /* "구성별 산정"은 값이 없다는 뜻이 아니라 사양에 따라 정해진다는
       정보다. --eq-muted로 죽이면 "없음"처럼 읽혀 한 단계 올린다. */
    color: var(--eq-ink);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0;
}

@media (max-width: 767px){
    .eq-machine-group-row .elementor-loop-container,
    .eq-machine-group-row .e-loop-container,
    .eq-machine-group-row .sft-loop-track{
        gap: 16px !important;
        padding: 4px 16px 18px 0 !important;
    }

    .eq-machine-group-row .elementor-loop-container::before,
    .eq-machine-group-row .e-loop-container::before,
    .eq-machine-group-row .sft-loop-track::before{
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
    }

    .eq-machine-group-row .elementor-loop-container > *,
    .eq-machine-group-row .e-loop-container > *,
    .eq-machine-group-row .sft-loop-track > *{
        flex: 0 0 260px !important;
        width: 260px !important;
        max-width: 260px !important;
        min-width: 260px !important;
    }

    .eq-lib-eyebrow,
    .eq-lib-title,
    .eq-process-group-title,
    .eq-machine-group-title,
    .sft-library-search{
        padding-left: 16px;
    }

    .eq-category-tabs-wrap{
        margin-left: 16px;
    }

    .eq-lib-title,
    .eq-process-group-title{
        font-size: 22px;
    }
}

/* =========================================================
   기능 캡슐 잘림 방지(2026-08-29 — 사용자 지시 그대로 적용)
   ========================================================= */

/* overflow:visible은 위 .mg-card/.mg-card .image-area 본문 규칙에
   이미 포함됨(중복 제거, 2026-08-29). 트랙 하단 여백만 유지. */
.eq-machine-group-row .elementor-loop-container,
.eq-machine-group-row .e-loop-container,
.eq-machine-group-row .sft-loop-track{
    padding-bottom: 40px !important;
}