/* 생산라인 목록 — 워드프레스 원본(sft_production_line_library.css)에서 그대로.
   2026-09-25. 장비 목록과 통일된 디자인(pl-top10-lines = eq-hero-lines 동일 값). */
/* =========================================================================
   생산라인(오토메이션 라인) 라이브러리 — Elementor Custom CSS
   2026-08-21, Elementor Pro Loop Grid 기반. Elementor Custom CSS(사이트
   설정 → Custom CSS)에 그대로 붙여넣는다. Post Type: sft_production_line.

   이 파일은 두 섹션을 다룬다:
   1. 대표 구축 생산라인 — Top10 랭킹 히어로(가로 스크롤).
      §".pl-top10-lines" 블록은 2026-08-22 장비 라이브러리 리뉴얼과
      동일한 디자인으로 통일했다(실사용 지시 "다 맞춰줘") — 카드 크기/
      간격/왼쪽 여백/투명 배경+민트 호버/외곽선 숫자 전부 §sft_equipment_
      library.css의 .eq-hero-lines와 동일한 값을 쓴다.
   2. 산업별 생산라인 — industry(ACF 텍스트 필드) 값별로 섹션을 나누고,
      각 섹션 안에 가로 스크롤 카드 행을 둔다. 형제(Family) 계열은
      is_family_representative=true인 라인만 그리드에 카드로 뜬다
      (형제는 대표 라인 상세페이지의 family_sibling_lines_json에서만
      열거된다 — 카테고리 수를 줄이기 위함).

   ── Elementor Loop Grid 설정 가이드 ──────────────────────────────────
   두 섹션 모두 Loop Grid의 Query를 ACF 필드로 필터링해야 한다:
   - Top10 히어로: Query > Advanced > Custom Query(또는 ACF 필터) —
     ranking_order가 비어있지 않은 포스트만, ranking_order 오름차순
     정렬(Order By: Meta Value Num, Meta Key: ranking_order, Order: ASC).
     is_flagship이 true인 것만 승격 대상이 되도록 Content Engine 쪽에서
     이미 걸러서 ranking_order를 채우므로, Elementor 쪽은 "ranking_order
     not empty"만 필터하면 된다.
   - 산업별 섹션: industry별로 Loop Grid를 industry 개 만큼 반복 배치하고
     각각 ACF 필터 industry == "식품"/"건강기능식품"/"화장품" 등으로
     고정 + is_family_representative == true 필터를 반드시 함께 건다
     (안 걸면 형제 라인까지 카드로 뜬다). 정렬은 Order By: Meta Value Num,
     Meta Key: library_sort_order, Order: ASC(2026-08-21 확정 — ranking_
     order와 별개 필드. 히어로에 안 뽑힌 라인도 이 값으로 자기 산업
     섹션 안에서 순서를 가진다. 비어있는 라인은 Elementor 기본 정렬
     규칙상 뒤로 밀리지 않을 수 있어, 필요하면 보조 정렬 키로 line_key
     ASC를 하나 더 추가해 안정적인 순서를 보장한다).

   ── ACF 필드 → 카드 요소 매핑표 ──────────────────────────────────────
   요소                     | ACF 필드 / WP 기본 필드
   ------------------------|----------------------------------------------
   .rank-number             | (Loop Grid 자체 index, 1부터)
   .image-area img          | Featured Image
   .top10-card .badge (1)   | production_capacity_display
   .top10-card .badge (2)   | (규모 배지 "중소형/중대형/모듈형" — 현재
                            |  이 값을 담는 ACF 필드가 없다. 지금은 운영자가
                            |  Loop Item에서 직접 텍스트를 입력하거나, 필요해
                            |  지면 Content Engine에 신규 필드를 추가해야
                            |  한다 — 임의로 필드를 만들지 않고 갭으로 남긴다)
   .product-title            | line_name(Post Title)
   .product-desc              | summary
   .industry-card .badge-tag  | industry(섹션 헤더에도 동일 값 사용)
   .industry-card .products-list | application_products(쉼표로 split해서 렌더)
   .industry-card .price-tag  | applied_price_text
   .industry-card .cta-link    | Post Permalink("더 알아보기")
   ========================================================================= */

/* 2026-08-21 확정 — 장비 라이브러리와 동일 원칙("검은색이 아닌 흰색을
   원해"): 다크모드 자동전환 없이 항상 밝은 테마로 고정한다. */
:root {
  --pl-ink: #101418;
  --pl-muted: #5b6472;
  --pl-line: #e6e9ee;
  --pl-surface: #ffffff;
  --pl-canvas: #f6f8fa;
  --pl-accent: #2fc98f;
  --pl-accent-ink: #0b1220;
  --pl-badge-bg: rgba(11, 18, 32, 0.72);
  --pl-badge-text: #ffffff;
  --pl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Pretendard, "Noto Sans KR", sans-serif;
}

/* -------------------------------------------------------------------------
   섹션 공통 헤더(eyebrow + title + underline) — 스크린샷의
   "AUTOMATION LINE LIBRARY / 대표 구축 생산라인", "식품 생산라인" 등
   ------------------------------------------------------------------------- */

.pl-lib-eyebrow {
  font-family: var(--pl-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pl-muted);
  margin: 0 0 8px;
}

.pl-lib-title {
  font-family: var(--pl-font);
  font-size: 32px;
  font-weight: 800;
  color: var(--pl-ink);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pl-lib-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 24px;
  border-radius: 2px;
  background: var(--pl-accent);
}

/* 2026-09-26 — 제목 밑줄을 걷는다(사장님 "타이틀 헤더의 선을 다없앨것").
   왼쪽 민트 막대가 이미 제목을 표시하고 있어 선이 겹쳐 보였다.
   여백은 남긴다 — 선만 빼고 제목과 카드 사이 숨은 그대로 둔다. */
.pl-lib-title.pl-lib-title--rule {
  padding-bottom: 16px;
}

/* -------------------------------------------------------------------------
   검색 상자 — [sft_library_search] 단축코드가 렌더링하는 마크업
   (wordpress/register_sft_library_search.php). 이 페이지는 대화형
   검색과 달리 전부 공개된 카탈로그이므로, 서버 호출 없이 이미 렌더된
   카드를 그 자리에서 텍스트로 걸러내는 순수 클라이언트 필터다.
   ------------------------------------------------------------------------- */

.sft-library-search {
  position: relative;
  max-width: 420px;
  margin: 0 0 32px;
}

.sft-library-search-input {
  width: 100%;
  font-family: var(--pl-font);
  font-size: 15px;
  color: var(--pl-ink);
  background: var(--pl-surface);
  border: 1px solid var(--pl-line);
  border-radius: 12px;
  padding: 12px 16px 12px 40px;
  box-shadow: 0 1px 2px rgba(16, 20, 24, 0.06);
}

.sft-library-search-input:focus {
  outline: none;
  border-color: var(--pl-accent);
  box-shadow: 0 0 0 3px rgba(47, 201, 143, 0.18);
}

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

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

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

/* =========================================================================
   1. 대표 구축 생산라인 TOP10 가로 스크롤(4:3 이미지 전용)
   — 사용자가 제공한 CSS 그대로(수정 없음, 2026-08-21)
   ========================================================================= */

.pl-top10-lines{
    width:100% !important;
    margin:0 !important;
    overflow:hidden !important;
}

/* 스크롤 트랙 */
.pl-top10-lines .elementor-loop-container,
.pl-top10-lines .e-loop-container,
.pl-top10-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;
    overflow-y:hidden !important;

    gap:56px !important;

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

    scrollbar-width:none !important;
}

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

/* 왼쪽 300px 가짜 여백 */
.pl-top10-lines .elementor-loop-container::before,
.pl-top10-lines .e-loop-container::before,
.pl-top10-lines .sft-loop-track::before{
    content:"" !important;

    flex:0 0 300px !important;
    width:300px !important;
    min-width:300px !important;
    max-width:300px !important;

    display:block !important;
}

/* 카드 폭 */
.pl-top10-lines .elementor-loop-container > *,
.pl-top10-lines .e-loop-container > *,
.pl-top10-lines .sft-loop-track > *{
    flex:0 0 460px !important;
    width:460px !important;
    max-width:460px !important;
    min-width:460px !important;

    align-self:flex-start !important;
}

/* =========================
   카드 내부
========================= */

.pl-top10-lines .top10-card{
    position: relative;
    width:100% !important;
    min-height:400px !important;
    height:auto !important;

    padding-left:72px !important;
    overflow:visible !important;
}

/* 순위 숫자 — 2026-08-22, 장비 라이브러리와 동일하게 Netflix Top 10류
   "외곽선만 있는 큰 숫자"로 통일(실사용 피드백 — 스크린샷 비교 지시). */
.pl-top10-lines .rank-number{
    position: absolute !important;
    /* 2026-09-27 — 넷플릭스처럼 위쪽에 붙인다. 설비 쪽과 같은 규칙. */
    left:-10px !important;
    top:0 !important;
    font-size:220px !important;
    /* 2026-09-27 — 800 → 700. 설비 쪽과 같은 이유(가짜 굵게가 획을
       두 겹으로 그린다). */
    font-weight:700 !important;
    /* 2026-09-27 — 속선을 **덮어서** 지운다(사장님 "5번 6번은 아직 같아").
       폰트를 바꿔도 안 되는 이유: -webkit-text-stroke 는 글자를 이루는
       조각의 윤곽을 **전부** 긋는다. 요즘 폰트는 5·6·2·9 처럼 획이 도는
       글자를 조각 여럿을 포개 그려 두므로, 포갠 자리의 윤곽이 글자 속에
       선으로 남는다. 어느 폰트가 깨끗한지 쫓을 일이 아니다.

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

/* 2026-08-22(2차 조정) — 장비 라이브러리와 동일: 1:1 + contain. "완전
   투명" 기본값은 되돌렸다 — Factory AI로 생성된 Featured Image 다수가
   실제로는 흰 배경이 픽셀로 박혀 있어(§sft_equipment_library.css
   배경 기본값 주석 참고, 15장 표본 조사로 확인) 투명 카드 위에서
   "박스 안의 박스"로 깨진다. 알파 유무와 무관하게 안전한 흰색을
   기본값으로 쓴다. */
/* 2026-09-26 — 사진이 카드 안에 또 들어앉아 있었다(사장님 "이미지가
   카드안에있음. 이미지만으로 진행하자. 카드는 그림자 효과로 떠있는
   느낌으로"). contain + padding:20px 이 사진을 흰 판 가운데로 밀어넣어
   「상자 안의 상자」가 됐다. 사진이 곧 카드다 — 꽉 채우고, 그림자로 띄운다.
   position:relative 는 배지를 사진 위에 얹기 위한 것이다(전에는 카드에
   붙어 72px 순위 여백 쪽으로 떨어져 나갔다). */
.pl-top10-lines .image-area{
    position: relative !important;
    width:100% !important;

    aspect-ratio:1 / 1 !important;
    height:auto !important;

    padding:0 !important;
    border-radius:22px !important;

    overflow:hidden !important;

    background:var(--pl-surface) !important;
    box-shadow: 0 6px 22px rgba(16, 20, 24, 0.10) !important;
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}

/* 이미지 채우기 */
.pl-top10-lines .image-area img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center !important;

    display:block !important;
    border-radius:22px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 호버 — 테두리(링) 제거, 살짝 뜨는 효과만(실사용 지시 "양쪽 다 동일
   디자인으로 통일"). 장비 라이브러리와 동일 규칙. */
.pl-top10-lines .top10-card:hover .image-area{
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 32px rgba(16, 20, 24, 0.14) !important;
}

/* 정보 영역 */
.pl-top10-lines .info-area{
    margin-top:18px !important;
}

/* 제목 */
.pl-top10-lines .product-title{
    font-size:22px !important;
    line-height:1.25 !important;
    margin:0 !important;
}

/* 설명 */
.pl-top10-lines .product-desc{
    margin-top:26px !important;
    font-size:16px !important;
    line-height:1.55 !important;
}

/* 모바일 */
@media(max-width:767px){

    .pl-top10-lines .elementor-loop-container,
    .pl-top10-lines .e-loop-container,
    .pl-top10-lines .sft-loop-track{
        gap:22px !important;
        padding-right:16px !important;
        padding-bottom:20px !important;
    }

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

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

    .pl-top10-lines .top10-card{
        min-height:auto !important;
        padding-left:44px !important;
    }

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

    .pl-top10-lines .image-area{
        aspect-ratio:1 / 1 !important;
    }

    .pl-top10-lines .product-title{
        font-size:18px !important;
    }

    .pl-top10-lines .product-desc{
        font-size:14px !important;
        margin-top:16px !important;
    }
}

/* 히어로 카드 이미지 위 배지 2개(제품별 협의 / 중소형 같은) — top10-card
   내부에 <div class="card-badges"><span class="badge">...</span>...</div>
   를 image-area와 겹치도록(position:absolute) 배치할 때 쓴다(position:
   relative는 위 .top10-card 기본 규칙에 이미 있다 — 중복 셀렉터 정리,
   2026-08-22). */
.pl-top10-lines .card-badges{
    position: absolute;
    left: 72px;
    right: 16px;
    bottom: 16px;
    display: flex;
    gap: 8px;
    z-index: 2;
    pointer-events: none;
}

.pl-top10-lines .badge{
    font-family: var(--pl-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--pl-badge-text);
    background: var(--pl-badge-bg);
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

/* =========================================================================
   2. 산업별 생산라인 그리드(가로 스크롤) — "식품 생산라인" /
   "건강기능식품 생산라인" / "화장품 생산라인" 등. industry 값 하나당
   Loop Grid 위젯 하나(래퍼에 .pl-industry-row 클래스 부여).
   ========================================================================= */

.pl-industry-section{
    margin-top: 56px;
}

.pl-industry-section:first-of-type{
    margin-top: 0;
}

.pl-industry-row{
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.pl-industry-row .elementor-loop-container,
.pl-industry-row .e-loop-container,
.pl-industry-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;
    overflow-y: hidden !important;

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

    scrollbar-width: none !important;
}

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

/* 장비 라이브러리 카테고리 섹션과 동일한 "왼쪽 300px 여백"(실사용
   지시 "다 맞춰줘" — 모든 섹션에 동일 규칙 적용). */
.pl-industry-row .elementor-loop-container::before,
.pl-industry-row .e-loop-container::before,
.pl-industry-row .sft-loop-track::before{
    content: "" !important;
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    display: block !important;
}

.pl-industry-row .elementor-loop-container > *,
.pl-industry-row .e-loop-container > *,
.pl-industry-row .sft-loop-track > *{
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
    display: flex !important;
    align-self: stretch !important;
}

/* 2026-08-22 — 이 행에 생산라인 카드와 모듈 카드가 섞여 있을 때(예:
   "액상스틱 생산라인" + 그 라인을 구성하는 모듈 카드들) 카드마다
   높이가 들쭉날쭉했다(실사용 지시 "카드크기 맞추기"). 어떤 카드
   클래스를 쓰든 이 행 안의 카드/이미지 영역은 전부 같은 규칙을
   강제로 따르게 한다. */
.pl-industry-row .elementor-loop-container > * > *{
    width: 100% !important;
    height: 100% !important;
}

.pl-industry-row .image-area{
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    flex: 0 0 auto !important;
}

/* 2026-08-22 — 텍스트 영역 배경을 카드 순서대로 7가지 파스텔로
   순환시킨다(실사용 지시 "텍스트영역의 색깔을 순서대로... 7개정도의
   색상으로"). 운영자가 Loop Item마다 수동으로 색을 안 골라도 자동으로
   돌아간다 — .industry-card는 --card-bg 변수를 이미 읽고 있으므로
   여기서 그 변수 값만 순서대로 지정한다. */
.pl-industry-row .elementor-loop-container > *:nth-child(7n+1),
.pl-industry-row .e-loop-container > *:nth-child(7n+1),
.pl-industry-row .sft-loop-track > *:nth-child(7n+1){
    --card-bg: #e4edfb; /* 블루 */
}
.pl-industry-row .elementor-loop-container > *:nth-child(7n+2),
.pl-industry-row .e-loop-container > *:nth-child(7n+2),
.pl-industry-row .sft-loop-track > *:nth-child(7n+2){
    --card-bg: #fbe9d9; /* 피치 */
}
.pl-industry-row .elementor-loop-container > *:nth-child(7n+3),
.pl-industry-row .e-loop-container > *:nth-child(7n+3),
.pl-industry-row .sft-loop-track > *:nth-child(7n+3){
    --card-bg: #fbe2e6; /* 핑크 */
}
.pl-industry-row .elementor-loop-container > *:nth-child(7n+4),
.pl-industry-row .e-loop-container > *:nth-child(7n+4),
.pl-industry-row .sft-loop-track > *:nth-child(7n+4){
    --card-bg: #dff3e9; /* 민트 */
}
.pl-industry-row .elementor-loop-container > *:nth-child(7n+5),
.pl-industry-row .e-loop-container > *:nth-child(7n+5),
.pl-industry-row .sft-loop-track > *:nth-child(7n+5){
    --card-bg: #ece2f8; /* 라벤더 */
}
.pl-industry-row .elementor-loop-container > *:nth-child(7n+6),
.pl-industry-row .e-loop-container > *:nth-child(7n+6),
.pl-industry-row .sft-loop-track > *:nth-child(7n+6){
    --card-bg: #fbf3d6; /* 옅은 옐로 */
}
.pl-industry-row .elementor-loop-container > *:nth-child(7n+7),
.pl-industry-row .e-loop-container > *:nth-child(7n+7),
.pl-industry-row .sft-loop-track > *:nth-child(7n+7){
    --card-bg: #eef1f4; /* 옅은 그레이 */
}

/* 카드 자체 — 스크린샷의 파스텔 배경 카드(색은 Loop Item에서 캡션/카테고리에
   따라 배경색을 다르게 줄 수 있게 CSS 변수 하나로 노출한다). */
.industry-card{
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: var(--card-bg, #eef3f7);
    box-shadow: 0 1px 2px rgba(16, 20, 24, 0.06);
    height: 100%;
    transition: box-shadow .25s ease, transform .25s ease;
}

/* 히어로 카드와 동일한 "테두리 없이 살짝 뜨는" 호버(실사용 지시
   "양쪽 다 동일 디자인으로 통일"). */
.industry-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(16, 20, 24, 0.14);
}

.industry-card .image-area{
    aspect-ratio: 4 / 3;
    width: 100%;
    background: #dfe6ec;
}

.industry-card .image-area img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.industry-card .info-area{
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

/* 2026-08-22(2차) — 제목이 1줄인 카드는 2번째 줄 자리가 안 비어있어서
   설명·구축비용 행이 카드마다 다른 높이에서 시작했다(실사용 지시
   "제목에서의 줄바꿈과 구축비용에서 걸리는거 같은데"). line-height를
   명시하고 그 2배를 min-height로 고정해, 1줄이든 2줄이든 항상 같은
   높이를 차지하게 한다. */
.industry-card .product-title{
    font-family: var(--pl-font);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    min-height: calc(1.3em * 2);
    color: var(--pl-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 2026-08-22 — 카드 높이가 여전히 안 맞은 진짜 원인: stretch가 아니라
   description 길이 자체가 카드마다 크게 다름(검토 대기 draft 라인은
   내부 검토 메모가 그대로 summary에 들어가 몇 배 더 길다). stretch로는
   "짧은 카드를 긴 카드에 맞추는" 것만 되고 긴 카드 자체를 줄이진
   못하므로, 몇 줄 이상은 말줄임표로 자르는 게 근본적인 해결이다
   (실사용 지시 "아직도 안 고쳐지네" 재확인 후 조치). */
.industry-card .product-desc{
    font-family: var(--pl-font);
    font-size: 14px;
    line-height: 1.5;
    min-height: calc(1.5em * 3);
    color: var(--pl-muted);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.industry-card .products-label{
    font-family: var(--pl-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--pl-muted);
    margin: 4px 0 2px;
}

.industry-card .products-list{
    font-family: var(--pl-font);
    font-size: 13px;
    color: var(--pl-ink);
    line-height: 1.5;
    margin: 0 0 12px;
}

.industry-card .price-row{
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.industry-card .price-label{
    font-family: var(--pl-font);
    font-size: 12px;
    color: var(--pl-muted);
}

.industry-card .price-tag{
    font-family: var(--pl-font);
    font-size: 20px;
    font-weight: 800;
    color: var(--pl-ink);
}

.industry-card .cta-link{
    font-family: var(--pl-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--pl-accent);
    text-decoration: none;
    white-space: nowrap;
}

.industry-card .cta-link:hover{
    text-decoration: underline;
}

@media (max-width: 767px){
    .pl-industry-row .elementor-loop-container,
    .pl-industry-row .e-loop-container,
    .pl-industry-row .sft-loop-track{
        gap: 14px !important;
        padding: 4px 16px 20px 0 !important;
    }

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

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

    .pl-lib-title{
        font-size: 24px;
    }
}

/* =========================================================================
   2026-09-25 — 산업 섹션 카드 보강.
   원본은 산업 섹션에도 `.top10-card` 를 쓰는데 CSS 에는 `.pl-industry-row
   .top10-card` 규칙이 없다(워드프레스에서는 Elementor Loop Grid 가 카드
   크기를 대신 잡아줬다). CE 에는 그 격자가 없어 카드 폭이 무너지고 제목이
   세로로 눌렸다 — 히어로(.pl-top10-lines)와 같은 값을 그대로 옮겨 붙인다.
   순위 숫자가 없으니 왼쪽 여백(padding-left:72px)만 뺀다.
   ========================================================================= */
/* 2026-09-26 — 흰 카드를 걷고 파스텔 카드로 되돌린다(사장님 "여기 카드는
   4번이미지 처럼 되어야함. 카드별로 색상을 바꿔서"). 색은 이미 위쪽
   nth-child(7n+N) 이 --card-bg 로 돌려 두고 있었는데, 이 자리에서 흰
   판으로 덮는 바람에 한 번도 안 보였다. 원본 .industry-card 의 규칙을
   그대로 쓴다 — 사진이 카드 위쪽을 꽉 채우고, 글은 색 있는 아래칸에 앉는다. */
.pl-industry-row .top10-card{
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    width:100% !important;
    min-height:360px !important;
    height:auto !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: var(--card-bg, #eef3f7) !important;
    box-shadow: 0 1px 2px rgba(16, 20, 24, 0.06) !important;
    transition: box-shadow .25s ease, transform .25s ease !important;
}
.pl-industry-row .top10-card:hover{
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 32px rgba(16, 20, 24, 0.14) !important;
}
.pl-industry-row .image-area{
    width:100% !important;
    aspect-ratio:4 / 3 !important;
    height:auto !important;
    padding:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    background:#dfe6ec !important;
    position:relative;
}
.pl-industry-row .image-area img{
    width:100% !important; height:100% !important;
    object-fit:cover !important; object-position:center !important;
    display:block !important;
    mix-blend-mode:normal;
}
.pl-industry-row .info-area{
    margin-top:0 !important;
    padding:20px 22px 22px !important;
    display:flex !important; flex-direction:column !important;
}
.pl-industry-row .product-title{ font-size:19px !important; line-height:1.3 !important; margin:0 !important; }
.pl-industry-row .product-desc{ margin-top:12px !important; font-size:14.5px !important; line-height:1.55 !important; }
.pl-industry-row .spec-meta{ margin-top:auto !important; padding-top:12px !important; font-size:13px !important; color:#6b757e !important; }

/* 사진이 없을 때 — 빈 칸이 아니라 라인 이름 머리글자를 크게 둔다.
   워드프레스에서는 대표 이미지가 항상 있었지만 CE 는 아직 비어 있다. */
.pl-industry-row .image-area:empty::after,
.pl-top10-lines .image-area:empty::after{
    content:"준비 중"; position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:#b9c0c6; font-size:14px; letter-spacing:-.02em;
}
/* 포장형태 배지 — 2026-09-26. 사진 위에 얹히므로 반투명 흰색으로는
   안 보인다(사장님 "뱃지가 투명이고 존재감없음"). 꽉 찬 흰 알약에
   그림자를 줘서 사진이 밝든 어둡든 떠 보이게 한다. */
/* 포장형태 배지 — 2026-09-26(2차). 흰 알약으로도 약했다(사장님 "뱃지들이
   존재감없어"). 사진은 대개 밝아서 흰 배지가 묻힌다 — 먹색에 흰 글씨로
   뒤집으면 어떤 사진 위에서도 먼저 읽힌다. 「대표라인」은 민트 그대로 둔다
   ─ 둘이 같은 색이면 구분이 안 된다. */
.pl-industry-row .product-code,.pl-top10-lines .product-code{
    position:absolute; top:14px; left:14px; z-index:2;
    background:#14171b; border:0;
    box-shadow:0 3px 12px rgba(0,0,0,.34);
    border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700;
    color:#fff; letter-spacing:-.01em; line-height:1.2;
}
.pl-industry-row .badge-recommended,.pl-top10-lines .badge-recommended{
    position:absolute; top:14px; right:14px; z-index:2;
    background:#16c4b3; color:#06201c; border-radius:999px;
    box-shadow:0 3px 12px rgba(0,0,0,.28);
    padding:7px 13px; font-size:13px; font-weight:800; line-height:1.2;
}

/* 2026-09-25 — `.pl-industry-row .sft-loop-track > *` 에 display:flex 가 걸려 있다.
   워드프레스에서는 Elementor Loop Grid 가 카드 안에 래퍼(`> * > *`)를 하나 더 둬서
   그 flex 가 래퍼 하나를 늘리는 역할만 했다. CE 마크업에는 래퍼가 없어 카드가 곧
   flex 컨테이너가 되고, 이미지와 글이 가로로 나란히 놓여 제목이 세로로 눌렸다.
   카드 자신에게 세로 방향을 준다. */
.pl-industry-row .sft-loop-track > .top10-card{
    flex-direction: column !important;
    align-items: stretch !important;
}
.pl-industry-row .sft-loop-track > .top10-card > .image-area{ flex:0 0 auto !important; }
.pl-industry-row .sft-loop-track > .top10-card > .info-area{ flex:1 1 auto !important; min-width:0; }