/* product-card.css — 제품 목록 카드, 보기 방식, 카테고리 홈 카드 */
/* 원본 product.css 분리 리팩토링 2026-06-10 */

   [2026-05-09] 모바일 보기 방식 / 제품 카드 최종 보정
   - 파일명: /assets/css/product.css
   - 모바일에서 보기 방식 버튼 폭을 줄이고 카드 보기 방식을 명확히 분리
   - 많이 보기: 2열 / 크게 보기: 1열
========================================================= */
.view-switch button:focus,
.view-switch button:focus-visible{
  outline:none;
}
.view-switch button:focus-visible{
  box-shadow:0 0 0 3px rgba(15,102,187,.18);
}

@media(max-width:768px){
  .product-view-panel{
    display:grid;
    gap:10px;
    padding:16px 18px;
    border-radius:0;
  }
  .product-view-panel h3{
    margin:0 0 3px;
    font-size:18px;
    line-height:1.25;
  }
  .product-view-panel p{
    font-size:13px;
    line-height:1.45;
  }
  .product-view-panel .view-switch{
    width:240px;
    min-width:0;
    max-width:100%;
    justify-self:start;
    padding:6px;
    border-radius:0;
  }
  .product-view-panel .view-switch button{
    min-height:38px;
    padding:0 8px;
    border-radius:0;
    font-size:13.5px;
    line-height:1;
  }

  .product-grid.view-many{
    gap:16px;
  }
  .product-grid.view-large{
    gap:18px;
  }
  .product-grid.view-large .product-card{
    display:block;
  }
  .product-grid.view-large .product-thumb{
  }
  .product-grid.view-large .product-body{
    padding:20px 18px 22px;
  }
  .product-grid.view-large .product-body h3{
    font-size:22px;
    line-height:1.35;
  }
  .product-grid.view-large .product-body p{
    font-size:15px;
    line-height:1.75;
  }
  .product-grid.view-many .product-body{
    padding:16px 14px 18px;
  }
  .product-grid.view-many .product-body h3{
    font-size:19px;
    line-height:1.35;
  }
  .product-grid.view-many .product-body p{
    font-size:14px;
    line-height:1.65;
  }
}


/* =========================================================
   [2026-05-09] 제품 목록 카드 / 문의 링크 최종 정리
   파일명: /assets/css/product.css
   목적:
   - 제품 카드 배지(태그칩) 제거 후 남는 여백 정리
   - 모바일 제품 목록 카드 3:5 비율 기준으로 정리
   - 제품 목록에서는 목록으로 버튼 제거, 상세보기 버튼만 우측 하단 정렬
   - 문의 페이지 긴 URL은 영역 밖으로 튀지 않도록 처리
========================================================= */
.product-card{
  color:inherit;
  text-decoration:none;
}
.product-body{
  flex:1 1 auto;
}
.product-body p{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-card-actions{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}
.product-card-actions .list-btn,
.product-card .tags{
  display:none;
}
.detail-btn{
  margin-top:0;
}
.product-inquiry-card-clean{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  overflow:hidden;
}
.product-inquiry-card-icon{
  display:none;
}
.product-inquiry-card-text{
  min-width:0;
}
.product-inquiry-card-text span{
  display:block;
  max-width:100%;
  overflow-wrap:break-word;
  word-break:keep-all;
}
.product-inquiry-box,
.product-inquiry-meta,
.product-inquiry-meta div,
#product-url-view,
#productUrlField{
  max-width:100%;
  min-width:0;
}
#product-url-view{
  display:inline-block;
  overflow-wrap:anywhere;
  word-break:break-word;
}
#productUrlField{
  text-overflow:ellipsis;
}

@media(min-width:769px){
  .product-card{
    height:100%;
  }
  .product-grid.view-many .product-card,
  .product-grid.view-large .product-card{
  }
  .product-grid.view-many .product-body,
  .product-grid.view-large .product-body{
  }
}

@media(max-width:768px){
  .product-view-panel{
    grid-template-columns:1fr;
  }
  .product-view-panel .view-switch{
    width:220px;
  }
  .product-grid.view-many{
  }
  .product-grid.view-large{
  }
  .product-grid.view-many .product-card{
    aspect-ratio:3/5;
    min-height:0;
  }
  .product-grid.view-many .product-thumb{
    aspect-ratio:3/2;
    flex:0 0 auto;
  }
  .product-grid.view-many .product-body{
    min-height:0;
    padding:12px 11px 13px;
    gap:7px;
  }
  .product-grid.view-many .product-body h3{
    font-size:15px;
    line-height:1.32;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .product-grid.view-many .product-body p{
    line-height:1.5;
    -webkit-line-clamp:2;
  }
  .product-grid.view-many .detail-btn{
    min-height:30px;
    padding:0 10px;
    font-size:12px;
  }
  .product-grid.view-large .product-card{
  }
  .product-grid.view-large .product-body p{
  }
  .product-inquiry-card-clean{
    grid-template-columns:1fr;
    gap:12px;
  }
  .product-inquiry-card-btn{
    width:100%;
  }
}

/* =========================================================
   [2026-05-09] 제품 카드 이미지 확대 / 설명글 축소 최종 PATCH
   파일명: /assets/css/product.css
   목적:
   - 많이 보기 PC 4열 / 모바일 2열
   - 크게 보기 PC 3열 / 모바일 1열
   - 모든 제품 카드는 세로형 3:5 비율 유지
   - 설명글 노출을 줄이고 이미지 영역을 더 크게 표시
========================================================= */
.product-grid.view-many{
  gap:22px;
}
.product-grid.view-large{
}
.product-grid.view-many .product-card,
.product-grid.view-large .product-card{
  height:auto;
}
.product-grid.view-many .product-thumb,
.product-grid.view-large .product-thumb{
  flex:0 0 64%;
  padding:0;
}
.product-grid.view-many .product-thumb img,
.product-grid.view-large .product-thumb img{
}
.product-grid.view-many .product-body,
.product-grid.view-large .product-body{
  padding:14px 15px 15px;
}
.product-grid.view-many .product-body h3,
.product-grid.view-large .product-body h3{
  font-size:17px;
}
.product-grid.view-many .product-body p,
.product-grid.view-large .product-body p{
  font-size:13px;
  line-height:1.48;
}
.product-grid.view-many .product-card-actions,
.product-grid.view-large .product-card-actions{
}
.product-grid.view-many .detail-btn,
.product-grid.view-large .detail-btn{
  padding:0 11px;
}

@media(max-width:768px){
  .product-grid.view-many{
  }
  .product-grid.view-large{
  }
  .product-grid.view-many .product-card,
  .product-grid.view-large .product-card{
    aspect-ratio:3/5;
  }
  .product-grid.view-many .product-thumb,
  .product-grid.view-large .product-thumb{
    flex:0 0 65%;
  }
  .product-grid.view-many .product-body,
  .product-grid.view-large .product-body{
    padding:11px 11px 12px;
    gap:6px;
  }
  .product-grid.view-many .product-body h3,
  .product-grid.view-large .product-body h3{
    font-size:15px;
    line-height:1.3;
  }
  .product-grid.view-many .product-body p,
  .product-grid.view-large .product-body p{
    font-size:12px;
    line-height:1.45;
    -webkit-line-clamp:1;
  }
  .product-grid.view-many .detail-btn,
  .product-grid.view-large .detail-btn{
    min-height:29px;
  }
}

/* =========================================================
   [제품소개 대표 페이지] 하위 카테고리 진입 카드
   - 실제 제품 카테고리 4개를 크게 노출
   - 제품소개 홈 하단의 실제 제품 미리보기 카드는 제거
========================================================= */
.product-home-grid{
  gap:24px;
  margin:26px 0 8px;
}

.product-home-card{
  position:relative;
  min-height:260px;
  border:1px solid rgba(180,203,228,.72);
  color:inherit;
  text-decoration:none;
  box-shadow:0 16px 38px rgba(22,48,82,.10);
  isolation:isolate;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.product-home-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(90deg, rgba(10,40,76,.76) 0%, rgba(10,55,102,.48) 42%, rgba(255,255,255,.08) 100%);
  transition:background .22s ease, opacity .22s ease;
}

.product-home-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:rgba(255,255,255,.76);
  opacity:0;
  transition:opacity .22s ease;
}

.product-home-card:hover{
  transform:translateY(-5px);
  border-color:#91bce9;
  box-shadow:0 22px 52px rgba(15,59,107,.18);
}

.product-home-card:hover::before{
  background:linear-gradient(90deg, rgba(12,58,107,.58) 0%, rgba(255,255,255,.22) 100%);
}

.product-home-card:hover::after{
  opacity:1;
}

.product-home-thumb{
  position:absolute;
  inset:0;
  z-index:1;
  background:#eef5fb;
}

.product-home-thumb img{
  display:block;
  transform:scale(1.01);
  transition:transform .32s ease;
}

.product-home-card:hover .product-home-thumb img{
  transform:scale(1.06);
}

.product-home-body{
  position:relative;
  z-index:4;
  justify-content:flex-end;
  align-items:flex-start;
  width:100%;
  min-height:260px;
  gap:10px;
  padding:28px;
}

.product-home-body small{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 12px;
  border-radius:0;
  background:rgba(255,255,255,.18);
  color:#e8f5ff;
  font-weight:900;
  letter-spacing:.08em;
  transition:background .22s ease, color .22s ease;
}

.product-home-body strong{
  font-size:28px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.05em;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.24);
  transition:color .22s ease, text-shadow .22s ease;
}

.product-home-body span{
  max-width:420px;
  color:rgba(255,255,255,.88);
  font-size:15px;
  line-height:1.62;
  word-break:keep-all;
  transition:color .22s ease;
}

.product-home-body em{
  display:inline-flex;
  min-height:36px;
  margin-top:4px;
  padding:0 16px;
  border-radius:0;
  background:#fff;
  color:#126fc5;
  font-weight:900;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  transition:background .22s ease, color .22s ease, transform .22s ease;
}

.product-home-card:hover .product-home-body small{
  background:#eef6ff;
  color:#126fc5;
}
.product-home-card:hover .product-home-body strong{
  color:#10233f;
  text-shadow:none;
}
.product-home-card:hover .product-home-body span{
  color:#465a70;
}
.product-home-card:hover .product-home-body em{
  background:#126fc5;
  transform:translateX(2px);
}

@media(max-width:1100px){
  .product-home-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .product-home-card,.product-home-body{min-height:240px;}
}

@media(max-width:640px){
  .product-home-grid{grid-template-columns:1fr; gap:16px; margin-top:20px;}
  .product-home-card,.product-home-body{min-height:220px;}
  .product-home-body{padding:22px;}
  .product-home-body strong{font-size:24px;}
  .product-home-body span{font-size:14px;}
}


/* =========================================================
   [2026-05-11] WHITE BLUE PRODUCT LIST OVERRIDE
   - 제품 카드 4열형 PC 기준
   - 흰색 카드 + 파란 active tab
========================================================= */
.product-control-panel{
  border:1px solid #dfeaf6;
  box-shadow:0 16px 44px rgba(15,45,80,.06);
}

.filter-mode-tabs button,
.filter-group,
.product-view-panel{
  background:#fff;
  border-color:#dfeaf6;
}

.filter-mode-tabs button:hover,
.filter-chip:hover{
  border-color:#9ed4ff;
  color:#126ee2;
  background:#f5fbff;
}

.filter-mode-tabs button.active,
.filter-chip.active,
.view-switch button.active,
.detail-btn{
  background:linear-gradient(90deg,#126ee2,#23a8ff);
  border-color:#126ee2;
  color:#fff;
  box-shadow:0 12px 26px rgba(18,110,226,.18);
}

.filter-group h3::before{
  background:#126ee2;
}

.product-list-head{
  border-bottom:1px solid #dfeaf6;
}

.product-list-head h2{
  color:#12243a;
}

.product-grid{
  gap:22px;
}

.product-grid.view-large{
  gap:24px;
}

.product-card{
  border:2px solid #a8d4f5;
}

.product-card:hover{
  border-color:#5aaee8;
  box-shadow:0 18px 42px rgba(15,45,80,.10);
}

.product-thumb{
  aspect-ratio:1.32/1;
  background:#f8fbff;
  border-bottom:1px solid #edf2f7;
  overflow:hidden;
}

.product-thumb img{
  object-fit:cover;
  background:#f8fbff;
  transition:transform .3s ease;
}

.product-card:hover .product-thumb img{
  transform:scale(1.04);
}

.product-body{
  min-height:116px;
  padding:18px 18px 20px;
}

.product-body h3{
  color:#101828;
  letter-spacing:-.055em;
}

/* .product-body h3::after › 제거 (2026-06-11) */

.product-body p{
  color:#7a8798;
}

.tags span{
  background:#edf7ff;
  color:#126ee2;
}

@media (max-width:1280px){
  .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .product-grid.view-large{
  }
}

@media (max-width:768px){
  .product-grid,
  .product-grid.view-large{
  }

  .product-card{
  }

  .product-thumb{
  }
}


/* =========================================================
   [2026-05-11] 정돈된 산업 UI 패치
   - 설비 소개 인트로카드 제거 후 Hero + 필터 + 제품목록 흐름으로 정리
   - 둥근 모서리, 과한 그림자, 캡슐형 버튼 제거
   - 직선형 카드 / 얇은 라인 / 안정적인 산업장비 브랜드 톤 적용
========================================================= */

.product-intro-card{
  display:none;
}

.product-industrial-head{
  margin:0 0 22px;
  padding:0 0 18px;
  border-bottom:2px solid #0f66bb;
}
.product-industrial-head span{
  display:block;
  margin-bottom:8px;
  color:#0f66bb;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
}
.product-industrial-head h2{
  margin:0 0 10px;
  color:#0b2545;
  font-size:34px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-1.4px;
}
.product-industrial-head p{
  margin:0;
  max-width:860px;
  color:#526176;
  font-size:16px;
  line-height:1.75;
  font-weight:600;
}

.product-control-panel{
  position:relative;
  margin:0 0 34px;
  padding:0;
  border:1px solid #cfdbe8;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
}
.product-control-bg,
.filter-group-bg{
  display:none;
}

.filter-mode-tabs{
  display:flex;
  align-items:stretch;
  gap:0;
  margin:0;
  border-bottom:1px solid #cfdbe8;
  background:#f6f9fc;
}
.filter-mode-tabs button{
  flex:1 1 0;
  min-height:58px;
  padding:0 20px;
  border:0;
  border-right:1px solid #cfdbe8;
  border-radius:0;
  background:#f6f9fc;
  box-shadow:none;
  color:#26384d;
  font-size:15px;
  font-weight:900;
  letter-spacing:-.35px;
}
.filter-mode-tabs button:last-child{
  border-right:0;
}
.filter-mode-tabs button:hover{
  transform:none;
  background:#eef5fc;
  color:#0f66bb;
}
.filter-mode-tabs button.active{
  background:#0f66bb;
  color:#fff;
  border-color:#0f66bb;
  box-shadow:none;
}

.filter-groups{
  display:block;
  padding:22px 24px 16px;
}
.filter-group{
  display:none;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.filter-group.is-active,
.filter-group.active,
.filter-groups .filter-group:first-child{
  display:block;
}
.filter-group h3{
  margin:0 0 16px;
  padding:0 0 12px;
  border-bottom:1px solid #d8e2ed;
  color:#0b2545;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.6px;
}
.filter-group h3::before{
  width:4px;
  height:18px;
  background:#0f66bb;
  border-radius:0;
}

.filter-chip-all-row{
  margin-bottom:12px;
}
.filter-chip-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.filter-chip{
  width:100%;
  min-height:44px;
  padding:0 14px;
  border:1px solid #cfdbe8;
  border-radius:0;
  background:#fff;
  color:#25364c;
  box-shadow:none;
  font-size:14px;
  font-weight:850;
  letter-spacing:-.25px;
}
.filter-chip:hover{
  transform:none;
  border-color:#0f66bb;
  background:#f3f8fd;
  color:#0f66bb;
}
.filter-chip.active{
  background:#0f66bb;
  border-color:#0f66bb;
  color:#fff;
  box-shadow:none;
}

.filter-result-count{
  margin:0;
  padding:14px 24px;
  border-top:1px solid #d8e2ed;
  border-radius:0;
  background:#f6f9fc;
  color:#0b2545;
  font-size:14px;
  font-weight:900;
}

.product-view-panel{
  display:none;
}

.product-list-head{
  align-items:center;
  margin:0 0 18px;
  padding:0 0 12px;
  border-bottom:2px solid #0f66bb;
}
.product-list-head h2{
  padding:0;
  color:#0b2545;
  font-size:28px;
  letter-spacing:-1px;
}
.product-list-head span{
  padding:0;
  color:#0f66bb;
  font-size:13px;
  font-weight:800;
}

.product-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.product-grid.view-large{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.product-card{
  border:1px solid #cfdbe8;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
  transition:border-color .16s ease, transform .16s ease;
}
.product-card:hover{
  border-color:#0f66bb;
  box-shadow:none;
}
.product-thumb{
  aspect-ratio:4/3;
  background:#f7f9fc;
  border-bottom:1px solid #e0e8f1;
  overflow:hidden;
}
.product-thumb img{
  object-fit:contain;
  background:#fff;
  transition:transform .3s ease;
}
.product-card:hover .product-thumb img{
  transform:scale(1.04);
}
.product-body{
  min-height:172px;
  padding:18px 18px 16px;
  gap:8px;
}
.product-body h3{
  color:#0b2545;
  font-size:18px;
  line-height:1.38;
  font-weight:800;
  letter-spacing:-.65px;
}
.product-body p{
  color:#5c6c7d;
  font-size:13px;
  line-height:1.65;
}
.detail-btn{
  width:100%;
  min-height:38px;
  margin-top:auto;
  border:1px solid #cfdbe8;
  border-radius:0;
  background:#fff;
  color:#0f66bb;
  font-size:13px;
  font-weight:800;
}
.product-card:hover .detail-btn{
  border-color:#0f66bb;
  background:#0f66bb;
  color:#fff;
}

.product-home-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:0;
}
.product-home-card{
  display:flex;
  flex-direction:column;
  border:1px solid #cfdbe8;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
  transition:border-color .16s ease, transform .16s ease;
}
.product-home-card:hover{
  transform:translateY(-2px);
  border-color:#0f66bb;
  box-shadow:none;
}
.product-home-thumb{
  display:block;
  aspect-ratio:4/3;
  border-bottom:1px solid #e0e8f1;
  background:#f7f9fc;
  overflow:hidden;
}
.product-home-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.product-home-body{
  display:flex;
  flex-direction:column;
  min-height:190px;
  padding:20px;
}
.product-home-body small{
  margin-bottom:8px;
  color:#0f66bb;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
}
.product-home-body strong{
  margin-bottom:10px;
  color:#0b2545;
  font-size:22px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.8px;
}
.product-home-body span{
  color:#5c6c7d;
  font-size:14px;
  line-height:1.65;
}
.product-home-body em{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  margin-top:auto;
  border:1px solid #cfdbe8;
  color:#0f66bb;
  font-style:normal;
  font-size:13px;
  font-weight:800;
}
.product-home-card:hover .product-home-body em{
  border-color:#0f66bb;
  background:#0f66bb;
  color:#fff;
}

@media (max-width:1200px){
  .product-grid,
  .product-grid.view-large,
  .product-home-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .filter-chip-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:768px){
  .product-industrial-head{
    margin-bottom:18px;
    padding-bottom:14px;
  }
  .product-industrial-head h2{
    font-size:25px;
  }
  .product-industrial-head p{
    font-size:14px;
  }
  .filter-mode-tabs{
    overflow:auto;
  }
  .filter-mode-tabs button{
    min-width:170px;
    min-height:50px;
    font-size:13px;
  }
  .filter-groups{
    padding:18px 16px 14px;
  }
  .filter-chip-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .filter-chip{
    min-height:40px;
    font-size:13px;
  }
  .filter-result-count{
    padding:12px 16px;
  }
  .product-grid,
  .product-grid.view-large,
  .product-home-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .product-body{
    min-height:160px;
    padding:14px;
  }
  .product-body h3{
    font-size:15px;
  }
  .product-body p{
    font-size:12px;
  }
  .product-home-body{
    min-height:170px;
    padding:15px;
  }
  .product-home-body strong{
    font-size:17px;
  }
}

@media (max-width:480px){
  .product-grid,
  .product-grid.view-large,
  .product-home-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   [2026-05-11] 제품 카드 디자인 재정리 PATCH
   파일명: /assets/css/product.css
   목적:
   - 기존 원물/공정 1차·2차 필터 구조 유지
   - 제품 카드의 올드한 박스 느낌 완화
   - 이미지 영역을 안정적으로 크게 유지하면서 제목/설명/상세보기 가독성 개선
   - PC/모바일 모두 같은 디자인 언어로 정리
========================================================= */
.product-list-head{
  margin:42px 0 22px;
  padding:0 0 16px;
  border-bottom:1px solid #d9e7f5;
}
.product-list-head h2{
  position:relative;
  padding:0 0 0 16px;
  color:#0b2745;
  font-size:32px;
  font-weight:800;
  letter-spacing:-1.15px;
}
.product-list-head h2::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:5px;
  height:28px;
  background:#0f66bb;
}
.product-list-head span{
  padding-bottom:2px;
  color:#6b7c90;
  font-size:14px;
  font-weight:850;
}

.product-grid.view-many,
.product-grid.view-large{
  align-items:stretch;
}

.product-grid.view-many .product-card,
.product-grid.view-large .product-card{
  position:relative;
  min-height:420px;
  overflow:hidden;
  border:1px solid #d8e5f2;
  border-radius:0;
  background:linear-gradient(180deg,#ffffff 0%,#f9fcff 100%);
  box-shadow:0 12px 30px rgba(15,43,75,.075);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.product-grid.view-many .product-card::before,
.product-grid.view-large .product-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#0f66bb 0%,#63b3ed 100%);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s ease;
  z-index:3;
}
.product-grid.view-many .product-card:hover,
.product-grid.view-large .product-card:hover{
  border-color:#a8caeb;
  box-shadow:0 20px 46px rgba(15,43,75,.14);
}
.product-grid.view-many .product-card:hover::before,
.product-grid.view-large .product-card:hover::before{
  transform:scaleX(1);
}

.product-grid.view-many .product-thumb,
.product-grid.view-large .product-thumb{
  position:relative;
  padding:16px;
  background:
    linear-gradient(180deg,#f6f9fd 0%,#edf5fc 100%);
}
.product-grid.view-many .product-thumb::after,
.product-grid.view-large .product-thumb::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:14px;
  height:1px;
  background:linear-gradient(90deg,rgba(15,102,187,0),rgba(15,102,187,.18),rgba(15,102,187,0));
  pointer-events:none;
}
.product-grid.view-many .product-thumb img,
.product-grid.view-large .product-thumb img{
  position:relative;
  z-index:1;
  display:block;
  background:transparent;
  mix-blend-mode:multiply;
  transform:scale(.98);
  transition:transform .22s ease;
}
.product-grid.view-many .product-card:hover .product-thumb img,
.product-grid.view-large .product-card:hover .product-thumb img{
  transform:scale(1.025);
}

.product-grid.view-many .product-body,
.product-grid.view-large .product-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:18px 18px 17px;
  gap:9px;
  background:#fff;
}
.product-grid.view-many .product-body h3,
.product-grid.view-large .product-body h3{
  margin:0;
  color:#102d4c;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.72px;
  word-break:keep-all;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-grid.view-many .product-body p,
.product-grid.view-large .product-body p{
  margin:0;
  color:#607386;
  word-break:keep-all;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-grid.view-many .product-card-actions,
.product-grid.view-large .product-card-actions{
  margin-top:auto;
  padding-top:10px;
  justify-content:flex-start;
}
.product-grid.view-many .detail-btn,
.product-grid.view-large .detail-btn{
  position:relative;
  min-height:38px;
  padding:0 18px;
  border:1px solid #0f66bb;
  border-radius:0;
  background:#fff;
  color:#0f66bb;
  font-size:14px;
  font-weight:800;
  letter-spacing:-.35px;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.product-grid.view-many .detail-btn::after,
.product-grid.view-large .detail-btn::after{
  content:" →";
  font-weight:800;
}
.product-grid.view-many .product-card:hover .detail-btn,
.product-grid.view-large .product-card:hover .detail-btn{
  background:#0f66bb;
  color:#fff;
  border-color:#0f66bb;
}

.product-grid.view-many{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
.product-grid.view-large{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
}
.product-grid.view-large .product-card{
  min-height:360px;
  display:grid;
  grid-template-columns:46% minmax(0,1fr);
}
.product-grid.view-large .product-thumb{
  height:100%;
  min-height:360px;
  aspect-ratio:auto;
  border-right:1px solid #e2edf7;
  border-bottom:0;
}
.product-grid.view-large .product-body{
  padding:30px 28px;
}
.product-grid.view-large .product-body h3{
  font-size:25px;
  line-height:1.32;
  -webkit-line-clamp:3;
}
.product-grid.view-large .product-body p{
  font-size:15.5px;
  line-height:1.78;
  -webkit-line-clamp:4;
}
.product-grid.view-large .detail-btn{
  min-height:42px;
  padding:0 20px;
  font-size:14.5px;
}

@media(max-width:1200px){
  .product-grid.view-many{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .product-grid.view-large{
  }
}

@media(max-width:768px){
  .product-list-head{
    align-items:flex-start;
    margin:30px 0 16px;
  }
  .product-list-head h2{
    font-size:25px;
  }
  .product-list-head h2::before{
    top:5px;
    height:23px;
  }
  .product-list-head span{
    font-size:12.5px;
  }
  .product-grid.view-many{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  .product-grid.view-large{
    grid-template-columns:1fr;
    gap:16px;
  }
  .product-grid.view-many .product-card,
  .product-grid.view-large .product-card{
    min-height:0;
    display:flex;
    flex-direction:column;
    aspect-ratio:auto;
  }
  .product-grid.view-many .product-thumb,
  .product-grid.view-large .product-thumb{
    flex:0 0 auto;
    min-height:0;
    height:auto;
    aspect-ratio:4/3;
    border-right:0;
    border-bottom:1px solid #e2edf7;
  }
  .product-grid.view-many .product-body,
  .product-grid.view-large .product-body{
    padding:13px 12px 14px;
    gap:7px;
  }
  .product-grid.view-many .product-body h3,
  .product-grid.view-large .product-body h3{
    font-size:15.5px;
    line-height:1.34;
    -webkit-line-clamp:2;
  }
  .product-grid.view-many .product-body p,
  .product-grid.view-large .product-body p{
    font-size:12.5px;
    line-height:1.5;
    -webkit-line-clamp:2;
  }
  .product-grid.view-many .product-card-actions,
  .product-grid.view-large .product-card-actions{
    padding-top:6px;
  }
  .product-grid.view-many .detail-btn,
  .product-grid.view-large .detail-btn{
    min-height:31px;
    padding:0 10px;
    font-size:12px;
  }
  .product-grid.view-large .product-body h3{
    font-size:20px;
  }
  .product-grid.view-large .product-body p{
    font-size:14px;
    line-height:1.65;
    -webkit-line-clamp:3;
  }
}

@media(max-width:420px){
  .product-grid.view-many{
    gap:12px;
  }
  .product-grid.view-many .product-body h3{
    font-size:14.5px;
  }
  .product-grid.view-many .product-body p{
    font-size:12px;
    -webkit-line-clamp:1;
  }
  .product-grid.view-many .detail-btn{
    width:100%;
  }
}

/* ===== [PATCH] 제품 카드 이미지 확대 / 비율 안정화 ===== */
.product-grid.view-many .product-thumb,
.product-grid.view-large .product-thumb{
  background:#fff;
}

.product-grid.view-many .product-thumb{
  aspect-ratio: 4 / 3.15;
  padding: 8px;
}

.product-grid.view-many .product-thumb img,
.product-grid.view-large .product-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(1.08);
  transform-origin:center center;
}

.product-grid.view-many .product-card:hover .product-thumb img,
.product-grid.view-large .product-card:hover .product-thumb img{
  transform:scale(1.12);
}

.product-grid.view-large .product-card{
  grid-template-columns: 52% minmax(0,1fr);
  min-height:390px;
}

.product-grid.view-large .product-thumb{
  min-height:390px;
  padding:10px;
}

@media(max-width:768px){
  .product-grid.view-many .product-thumb,
  .product-grid.view-large .product-thumb{
    aspect-ratio:4 / 3.05;
    padding:7px;
  }
  .product-grid.view-many .product-thumb img,
  .product-grid.view-large .product-thumb img{
    transform:scale(1.06);
  }
  .product-grid.view-many .product-card:hover .product-thumb img,
  .product-grid.view-large .product-card:hover .product-thumb img{
    transform:scale(1.09);
  }
}

/* =========================================================


/* ================================================================
   설비명 중앙 정렬 / 설명 좌측 정렬 (2026-06-11)
   - h3(설비명): 중앙
   - p(설명문): 좌측 유지
   - body 선택자로 products 페이지 한정 적용
================================================================ */
body[data-sidebar-type="products"] .product-body h3{
  text-align:center;
}
body[data-sidebar-type="products"] .product-body p{
  text-align:left;
}

/* ================================================================
   내부 관리번호 배지 (2026-06-17)
   - 제품 카드 썸네일 / 상세 대표 이미지 좌상단
   - 차분한 슬레이트 톤으로 눈에 튀지 않게 표시
================================================================ */
.product-thumb{ position:relative; }
.product-detail-main-image{ position:relative; }
.nb-mgmt-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:4;
  display:inline-block;
  padding:3px 9px;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.03em;
  color:#ffffff;
  background:rgba(15,40,70,.82);
  border:1px solid rgba(255,255,255,.20);
  border-radius:6px;
  box-shadow:0 1px 3px rgba(11,37,69,.28);
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.nb-mgmt-badge--detail{
  top:14px;
  left:14px;
  font-size:12px;
  padding:4px 10px;
}

/* 포장기닷컴(pojanggi) 전용 — 브랜드 블루 톤으로 조화 / 자체 카드 썸네일 기준점 */
body[data-site="pojanggi"] .poj-pcard__thumb{ position:relative; }
body[data-site="pojanggi"] .nb-mgmt-badge{
  background:rgba(28,95,174,.92);
  border-color:rgba(255,255,255,.24);
}

/* =========================================================
   [검색 페이지 히어로] 가시성 강화 (2026-06)
========================================================= */
.nb-search-hero{ text-align:center; padding:36px 24px 28px; }
.nb-search-hero__title{
  margin:0 0 20px; font-size:27px; font-weight:900;
  color:var(--nb-ui-navy,#10243d); letter-spacing:-.035em; line-height:1.25;
}
.nb-search-hero__form{
  display:flex; gap:10px; width:100%; max-width:700px; margin:0 auto; align-items:stretch;
}
.nb-search-hero__form input[type="search"]{
  flex:1 1 auto; min-width:0; height:64px; padding:0 20px;
  border:2px solid var(--nb-ui-blue,#2563eb); border-radius:14px;
  background:#fff; color:#10243d; font-size:19px; font-weight:700; outline:0;
  box-shadow:0 10px 26px rgba(37,99,235,.12); box-sizing:border-box;
}
.nb-search-hero__form input[type="search"]::placeholder{ color:#9aa9bb; font-weight:600; font-size:16.5px; }
.nb-search-hero__form button{
  flex:0 0 auto; min-width:122px; height:64px; padding:0 28px; border:0; border-radius:14px;
  background:linear-gradient(135deg,#2563eb,#0058bd); color:#fff;
  font-size:19px; font-weight:900; cursor:pointer; box-shadow:0 10px 24px rgba(37,99,235,.20);
}
.nb-search-hero__form button:hover{ filter:brightness(1.06); }
.nb-search-hero__tags{
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center; align-items:center;
  max-width:700px; margin:16px auto 0;
}
.nb-search-hero__tags-label{ font-size:13px; font-weight:800; color:#6a8097; margin-right:2px; }
.nb-search-hero__tags a{
  padding:9px 15px; border:1px solid #d7e7fb; border-radius:999px;
  background:#f4f8ff; color:#23415f; text-decoration:none; font-size:14px; font-weight:800;
}
.nb-search-hero__tags a:hover{ background:#2563eb; color:#fff; border-color:#2563eb; }
@media(max-width:768px){
  .nb-search-hero{ padding:24px 14px 20px; }
  .nb-search-hero__title{ font-size:21px; margin-bottom:14px; }
  .nb-search-hero__form{ gap:8px; }
  .nb-search-hero__form input[type="search"]{ height:58px; font-size:17px; padding:0 15px; }
  .nb-search-hero__form input[type="search"]::placeholder{ font-size:14px; }
  .nb-search-hero__form button{ height:58px; min-width:78px; padding:0 14px; font-size:16px; }
  .nb-search-hero__tags{ gap:7px; }
  .nb-search-hero__tags a{ padding:8px 12px; font-size:13px; }
}

/* 포장기닷컴 — 기존 구조 유지, 입력창 글자 확대 + placeholder 개선 + 모바일 56px+ */
.poj-search-box{ display:flex; gap:8px; align-items:stretch; }
.poj-search-box input[type="search"]{
  flex:1 1 auto; min-width:0; height:54px; padding:0 16px;
  font-size:18px; font-weight:600; box-sizing:border-box;
}
.poj-search-box input[type="search"]::placeholder{ font-size:15px; font-weight:500; color:#9aa9bb; }
.poj-search-box button{ flex:0 0 auto; min-width:96px; height:54px; font-size:17px; font-weight:800; }
@media(max-width:768px){
  .poj-search-box input[type="search"]{ height:56px; font-size:16.5px; padding:0 14px; }
  .poj-search-box input[type="search"]::placeholder{ font-size:13.5px; }
  .poj-search-box button{ height:56px; min-width:64px; font-size:15px; padding:0 12px; }
}

/* [2026-06-24] 카드 가격(설명 대체): 판매가=네이비, 견적문의=파랑 */
.nb-card-price--sell .n strong{color:#0b2545;}
.nb-card-price--quote .n{color:#0f66bb;font-weight:800;font-size:14px;}

/* [2026-06-24] 카드 가격 가독성 — 크기 확대 (40~60대 대응) */
.nb-card-price .n{font-size:15px;}
.nb-card-price .n strong{font-size:19px;}
.nb-card-price .x{font-size:12.5px;}
.nb-card-price .o{font-size:13.5px;}
.nb-card-price--quote .n{font-size:16px;}
@media (max-width:520px){
  .nb-card-price .n{font-size:14px;}
  .nb-card-price .n strong{font-size:17px;}
  .nb-card-price .x{font-size:12px;}
}

/* [2026-06-24] 카드 정렬: 제목 2줄 고정 → 가격 위치 통일 + 균일 높이 + 가격 확대 */
.product-card{height:100%;}
.product-card .product-body h3{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em;line-height:1.32;
}
.nb-card-price{margin-top:10px;}
.nb-card-price .n{font-size:16px;}
.nb-card-price .n strong{font-size:20px;}
.nb-card-price .x{font-size:13px;}
.nb-card-price--quote .n{font-size:17px;}
@media (max-width:520px){
  .nb-card-price .n{font-size:14.5px;}
  .nb-card-price .n strong{font-size:18px;}
  .nb-card-price .x{font-size:12.5px;}
}

/* [2026-06-24] 카드 정돈: EVENT 배지 위치 / 견적문의 확대 / 버튼 동일폭(안정감) */
.product-thumb{position:relative;overflow:hidden;}
.product-thumb .nb-card-evbadge{
  position:absolute;top:10px;left:10px;right:auto;z-index:4;
  font-size:11px;font-weight:800;line-height:1;padding:5px 9px;border-radius:6px;
  background:#e8392f;color:#fff;letter-spacing:.3px;
}
.nb-card-price--quote .n{font-size:18px;font-weight:800;color:#0f66bb;}
.product-card-actions{display:flex;gap:8px;justify-content:stretch;}
.product-card-actions .detail-btn{flex:1 1 0;justify-content:center;text-align:center;}
@media (max-width:520px){
  .nb-card-price--quote .n{font-size:16px;}
  .product-thumb .nb-card-evbadge{top:8px;left:8px;font-size:10px;padding:4px 7px;}
}

/* [2026-06-24] 카드 사진 프레임 가득 채우기 + 하늘색 경계선 제거 (존재감↑, 포장기닷컴 수준) */
.product-card .product-thumb{
  aspect-ratio:1/1;
  border-bottom:0;            /* 연하늘색(#edf2f7) 가로 경계선 제거 — 제목 위 잔선 */
  background:#fff;
  overflow:hidden;
}
.product-card .product-thumb img{
  width:100%;height:100%;
  object-fit:cover;           /* contain→cover: 흰 여백 제거하고 프레임 가득 */
  object-position:center;
  transform:scale(1.0);
  transition:transform .45s ease;
}
.product-card:hover .product-thumb img{ transform:scale(1.09); }   /* 호버 시 살짝 더 크게(잘림 허용) */
@media (max-width:520px){ .product-card .product-thumb{aspect-ratio:1/1;} }

/* [2026-06-24] 가격 영역 정렬·간격·밀도 개선 (기능 변경 없음, UI/CSS만) */
/* 카드 = 세로 플렉스 → 버튼을 항상 하단에 고정(가격 줄 수가 달라도 버튼 위치 일정) */
.product-card{ display:flex; flex-direction:column; }
.product-card .product-card-main-link{ flex:1 1 auto; display:flex; flex-direction:column; }
.product-card .product-body{ flex:1 1 auto; min-height:0; }   /* 이벤트 대비 예약 높이 제거 → 비이벤트 카드 밀도↑ */
.product-card .product-card-actions{ margin-top:auto; }       /* 버튼 영역 하단 고정 */

/* 가격 블록: 왼쪽 정렬(숫자 시작 위치 일정) + 줄 간격/여백 정돈 */
.nb-card-price{ text-align:left; line-height:1.3; margin-top:10px; margin-bottom:2px; }
.nb-card-price .o{ display:block; font-size:12.5px; color:#8a97a8; margin-bottom:1px; }   /* '기존 X · 공동발주 특가' 라벨 줄 */
.nb-card-price .n{ display:inline; color:#1f2d3d; font-size:15px; }
.nb-card-price .n strong{ color:#0b2545; font-size:20px; }
.nb-card-price .x{ display:inline; font-size:12.5px; color:#8a97a8; margin-left:7px; white-space:nowrap; }  /* 원 ↔ VAT 별도 간격 */
.nb-card-price--quote{ margin-top:10px; }
.nb-card-price--quote .n{ color:#0f66bb; font-weight:800; font-size:17px; }
.nb-card-price--quote .x{ display:none; }
@media (max-width:520px){
  .nb-card-price .n{ font-size:14px; }
  .nb-card-price .n strong{ font-size:18px; }
  .nb-card-price .x{ font-size:12px; margin-left:6px; }
  .nb-card-price--quote .n{ font-size:15.5px; }
}