/* =========================================================
   파일명: /assets/css/product.css
   역할: 제품 분류 페이지 / 필터 / 보기 방식 / 목록 / 상세
   기준: 현재 PHP 템플릿 구조, category.txt 태그 기반
========================================================= */
.product-control-panel{margin-bottom:28px;padding:28px;border:1px solid #d7e8f8;border-radius:0;background:linear-gradient(180deg,#f8fbff 0%,#f2f8ff 100%);box-shadow:0 14px 34px rgba(15,35,67,.06)}
.filter-mode-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}.filter-mode-tabs button{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 22px;border:1px solid #cfe1f4;border-radius:0;background:#fff;color:#102d4c;font-size:17px;font-weight:900;letter-spacing:-.55px;cursor:pointer;box-shadow:0 8px 18px rgba(15,65,120,.06);transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease}.filter-mode-tabs button:hover{transform:translateY(-1px);border-color:#9fcaf2;color:#0f66bb}.filter-mode-tabs button.active{background:#0f66bb;color:#fff;border-color:#0f66bb;box-shadow:0 14px 26px rgba(15,102,187,.22)}
.filter-groups{display:grid;gap:18px}.filter-group{padding:22px 24px;border:1px solid #dcebf8;border-radius:0;background:#fff;box-shadow:0 10px 24px rgba(15,35,67,.045)}.filter-group h3{display:flex;align-items:center;gap:8px;margin:0 0 15px;color:#102d4c;font-size:19px;font-weight:900;letter-spacing:-.65px}.filter-group h3::before{content:"";display:inline-block;width:7px;height:20px;border-radius:0;background:#0f66bb}.filter-chip-row{display:flex;flex-wrap:wrap;gap:8px}.filter-chip{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 13px;border:1px solid #dbe5ef;border-radius:0;background:#f6f8fb;color:#344255;font-size:13px;font-weight:900;line-height:1;cursor:pointer;transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease}.filter-chip:hover{transform:translateY(-1px);border-color:#9fcaf2;color:#0f66bb;background:#eef7ff}.filter-chip.active{background:#0f66bb;color:#fff;border-color:#0f66bb}.filter-result-count{margin-top:18px;padding:16px 20px;border-radius:0;background:#eaf5ff;color:#0f3f72;font-size:15px;font-weight:900}
.product-view-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px;padding:20px 24px;border:1px solid #cfe5fb;border-radius:0;background:#f8fbff}.product-view-panel h3{margin:0 0 6px;color:#102d4c;font-size:19px}.product-view-panel p{margin:0;color:#64748b;font-size:13px;font-weight:700}.view-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:260px;padding:8px;border:1px solid #cfe1f4;border-radius:0;background:#edf6ff}.view-switch button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:0;border-radius:0;background:transparent;color:#1d3d5f;font-size:15px;font-weight:900;cursor:pointer}.view-switch button.active{background:#0f66bb;color:#fff;box-shadow:0 8px 18px rgba(15,102,187,.2)}
.product-list-head{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 18px;border-bottom:3px solid #0f66bb}.product-list-head h2{margin:0;padding-bottom:13px;color:#102d4c;font-size:30px;letter-spacing:-1px}.product-list-head span{padding-bottom:15px;color:#526176;font-size:13px;font-weight:900}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.product-grid.view-large{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.product-card{display:flex;flex-direction:column;background:#fff;border:1px solid #d6e6f6;border-radius:0;overflow:hidden;box-shadow:0 12px 28px rgba(15,35,67,.07);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.product-card:hover{transform:translateY(-4px);border-color:#9fcbf5;box-shadow:0 20px 44px rgba(15,35,67,.13)}.product-thumb{aspect-ratio:4/3;background:#f4f8fc;display:flex;align-items:center;justify-content:center;overflow:hidden}.product-thumb img{width:100%;height:100%;object-fit:contain;background:#fff;transition:transform .25s ease}.product-card:hover .product-thumb img{transform:scale(1.03)}.product-body{padding:20px;display:flex;flex-direction:column;gap:10px;min-height:190px}.product-body h3{font-size:19px;line-height:1.35;color:#102d4c;margin:0;letter-spacing:-.7px}.product-body p{font-size:14px;line-height:1.7;color:#66788c;margin:0}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}.tags span{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:0;background:#eef6ff;color:#0f66bb;font-size:11px;font-weight:900}.detail-btn{display:inline-flex;align-items:center;justify-content:center;width:max-content;min-height:34px;margin-top:4px;padding:0 13px;border-radius:0;background:#0f66bb;color:#fff;font-size:13px;font-weight:900}.view-large .product-body h3{font-size:23px}.view-large .product-body p{font-size:15px}.view-large .product-body{min-height:220px;padding:24px}.product-grid .empty-box{grid-column:1/-1;padding:34px;border:1px dashed #bdd4ec;border-radius:0;background:#f8fbff;color:#607086;font-size:15px;font-weight:800;text-align:center}
.product-detail h2{font-size:38px}.detail-main-image{margin-top:26px;border:1px solid #dce7f3;background:#fff;padding:18px;border-radius:0}.detail-main-image img{width:100%;max-height:620px;object-fit:contain}.detail-html{margin-top:26px;line-height:1.8}.detail-html table{width:100%;border-collapse:collapse}.detail-html th,.detail-html td{border:1px solid #d9e2ee;padding:12px;text-align:left}.detail-html th{background:#f3f7fb;color:#102d4c}
/* =========================================================
   [제품 분류] 반자동 설비 / 날인기 필터 디자인
   - 반자동 설비와 날인기는 상단 메뉴에서 분리
   - 반자동 설비: 원물 기준 / 공정 기준
   - 날인기: 자동날인기 / TTO / 잉크젯
========================================================= */
.filter-primary-tabs{margin-bottom:14px}.filter-sub-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0 0 16px;padding:12px;border:1px solid #dbeaf8;border-radius:0;background:#eef7ff}.filter-sub-tabs button{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:1px solid #cfe1f4;border-radius:0;background:#fff;color:#102d4c;font-size:15px;font-weight:900;letter-spacing:-.45px;cursor:pointer;box-shadow:0 6px 14px rgba(15,65,120,.05);transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease}.filter-sub-tabs button:hover{transform:translateY(-1px);border-color:#9fcaf2;color:#0f66bb}.filter-sub-tabs button.active{background:#0f66bb;color:#fff;border-color:#0f66bb;box-shadow:0 10px 20px rgba(15,102,187,.18)}.semi-filter-section[hidden]{display:none}.printer-filter-groups{margin-top:4px}

/* =========================================================
   [제품 필터 UI 고도화]
   - 버튼은 HTML/CSS 유지
   - 배경 오브젝트만 /images/ui/*.svg 사용
   - 모바일에서는 배경 오브젝트를 약화하여 가독성 유지
========================================================= */
.product-control-panel{
  padding:30px;
  border-color:#cfe3f7;
  border-radius:0;
  background:linear-gradient(180deg,#f7fbff 0%,#edf7ff 100%);
  box-shadow:0 18px 46px rgba(15,54,99,.08);
}
.filter-mode-tabs{
  gap:14px;
  margin-bottom:24px;
}
.filter-mode-tabs button,
.filter-sub-tabs button{
  position:relative;
  overflow:hidden;
}
.filter-mode-tabs button::after,
.filter-sub-tabs button::after{
  content:"";
  position:absolute;
  right:-28px;
  bottom:-36px;
  width:120px;
  height:120px;
  border-radius:0;
  background:radial-gradient(circle,rgba(15,102,187,.12) 0%,rgba(15,102,187,0) 68%);
  pointer-events:none;
}
.filter-mode-tabs button.active::after,
.filter-sub-tabs button.active::after{
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 70%);
}
.filter-groups{
  gap:20px;
}
.filter-group{
  position:relative;
  overflow:hidden;
  min-height:132px;
  padding:26px 28px;
  border-color:#cfe3f7;
  border-radius:0;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  box-shadow:0 14px 34px rgba(15,54,99,.07);
}
.filter-group::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:0;
  background:linear-gradient(90deg,rgba(15,102,187,.035),rgba(15,102,187,0) 45%);
  pointer-events:none;
}
.filter-group-bg{
  position:absolute;
  right:-10px;
  bottom:-18px;
  width:360px;
  height:180px;
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
  opacity:.11;
  pointer-events:none;
  z-index:0;
}
.filter-group--material .filter-group-bg{background-image:url('/images/ui/filter-bg-material.svg')}
.filter-group--process .filter-group-bg{background-image:url('/images/ui/filter-bg-process.svg')}
.filter-group--package .filter-group-bg{background-image:url('/images/ui/filter-bg-package.svg')}
.filter-group--printer_type .filter-group-bg{background-image:url('/images/ui/filter-bg-printer.svg')}
.filter-group--consumable_ink .filter-group-bg,
.filter-group--consumable_sensor .filter-group-bg,
.filter-group--consumable_part .filter-group-bg{background-image:url('/images/ui/filter-bg-consumable.svg')}
.filter-group h3,
.filter-chip-row{
  position:relative;
  z-index:1;
}
.filter-group h3{
  margin-bottom:20px;
  font-size:22px;
  letter-spacing:-.75px;
}
.filter-group h3::before{
  display:none;
  content:none;
}
.filter-chip-row{
  gap:12px;
}
.filter-chip{
  min-height:66px;
  min-width:108px;
  gap:8px;
  padding:12px 16px;
  border-color:#cfe0f2;
  border-radius:0;
  background:rgba(255,255,255,.9);
  color:#102d4c;
  font-size:15px;
  box-shadow:0 8px 18px rgba(15,54,99,.055);
  backdrop-filter:blur(2px);
}
.filter-chip:hover{
  border-color:#9dc7ee;
  background:#f7fbff;
  box-shadow:0 12px 24px rgba(15,54,99,.09);
}
.filter-chip.active{
  background:linear-gradient(135deg,#0f66bb 0%,#0a7bd8 100%);
  border-color:#0f66bb;
  color:#fff;
  box-shadow:0 14px 28px rgba(15,102,187,.24);
}
.filter-chip-icon{
  position:relative;
  flex:0 0 auto;
  width:24px;
  height:24px;
  border:2px solid currentColor;
  border-radius:0;
  opacity:.95;
}
.filter-chip-icon::before,
.filter-chip-icon::after{
  content:"";
  position:absolute;
  display:block;
  border-color:currentColor;
}
.filter-chip--all .filter-chip-icon{
  border:0;
  display:grid;
  grid-template-columns:repeat(2,8px);
  grid-template-rows:repeat(2,8px);
  gap:4px;
}
.filter-chip--all .filter-chip-icon::before,
.filter-chip--all .filter-chip-icon::after{
  position:static;
  width:8px;
  height:8px;
  border:2px solid currentColor;
  border-radius:0;
  box-sizing:border-box;
  box-shadow:12px 0 0 -2px transparent,0 12px 0 -2px transparent;
}
.filter-chip--liquid .filter-chip-icon{
  border-radius:0;
  transform:rotate(45deg);
}
.filter-chip--liquid .filter-chip-icon::before{
  left:7px;
  top:4px;
  width:6px;
  height:12px;
  border-left:2px solid currentColor;
  transform:rotate(-45deg);
}
.filter-chip--powder .filter-chip-icon{
  border:0;
}
.filter-chip--powder .filter-chip-icon::before{
  inset:4px;
  border-radius:0;
  background:currentColor;
  box-shadow:-8px 5px 0 -1px currentColor,8px 5px 0 -1px currentColor,0 -8px 0 -1px currentColor,0 8px 0 -1px currentColor;
}
.filter-chip--granule .filter-chip-icon{
  border-radius:0;
}
.filter-chip--granule .filter-chip-icon::before{
  inset:6px;
  border:2px dotted currentColor;
  border-radius:0;
}
.filter-chip--teabag .filter-chip-icon,
.filter-chip--stick .filter-chip-icon,
.filter-chip--three_side .filter-chip-icon,
.filter-chip--four_side .filter-chip-icon{
  border-radius:0;
}
.filter-chip--teabag .filter-chip-icon::before,
.filter-chip--stick .filter-chip-icon::before{
  left:5px;
  top:-5px;
  width:12px;
  height:8px;
  border-top:2px solid currentColor;
  border-left:2px solid currentColor;
  transform:rotate(-22deg);
}
.filter-chip--bakery .filter-chip-icon{
  border-radius:0;
}
.filter-chip--bakery .filter-chip-icon::before{
  right:-4px;
  bottom:-4px;
  width:10px;
  height:10px;
  border:2px solid currentColor;
  border-radius:0;
}
.filter-chip--vegetable .filter-chip-icon{
  border-radius:0;
  transform:rotate(-18deg);
}
.filter-chip--tray .filter-chip-icon{
  border-radius:0;
}
.filter-chip--tray .filter-chip-icon::before{
  left:3px;
  right:3px;
  bottom:4px;
  height:6px;
  border-top:2px solid currentColor;
}
.filter-chip--side_dish .filter-chip-icon{
  border-radius:0;
}
.filter-chip--industrial .filter-chip-icon{
  border-radius:0;
  transform:rotate(0deg);
}
.filter-chip--industrial .filter-chip-icon::before{
  left:3px;
  top:3px;
  width:14px;
  height:14px;
  border-top:2px solid currentColor;
  border-left:2px solid currentColor;
  transform:rotate(45deg);
}
.filter-chip--bottle_supply .filter-chip-icon,
.filter-chip--filling .filter-chip-icon,
.filter-chip--cap_supply .filter-chip-icon,
.filter-chip--capping .filter-chip-icon{
  border-radius:0;
}
.filter-chip--bottle_supply .filter-chip-icon::before,
.filter-chip--filling .filter-chip-icon::before,
.filter-chip--cap_supply .filter-chip-icon::before,
.filter-chip--capping .filter-chip-icon::before{
  left:6px;
  top:-7px;
  width:8px;
  height:7px;
  border:2px solid currentColor;
  border-bottom:0;
  border-radius:0;
}
.filter-chip--weighing .filter-chip-icon{
  border-radius:0;
}
.filter-chip--weighing .filter-chip-icon::before{
  left:5px;
  top:5px;
  width:10px;
  height:5px;
  border-top:2px solid currentColor;
  transform:rotate(-18deg);
}
.filter-chip--sealing .filter-chip-icon,
.filter-chip--horizontal_packing .filter-chip-icon{
  border-radius:0;
}
.filter-chip--sealing .filter-chip-icon::before,
.filter-chip--horizontal_packing .filter-chip-icon::before{
  left:4px;
  top:10px;
  width:14px;
  border-top:2px solid currentColor;
}
.filter-chip--printing .filter-chip-icon,
.filter-chip--labeling .filter-chip-icon{
  border-radius:0;
}
.filter-chip--printing .filter-chip-icon::before{
  left:5px;
  top:5px;
  width:10px;
  height:2px;
  background:currentColor;
  box-shadow:0 5px 0 currentColor;
}
.filter-chip--labeling .filter-chip-icon::before{
  left:5px;
  top:5px;
  width:10px;
  height:10px;
  border:2px solid currentColor;
  border-radius:0;
}
.filter-chip--collecting .filter-chip-icon,
.filter-chip--custom_line .filter-chip-icon{
  border-radius:0;
}
.filter-chip--collecting .filter-chip-icon::before,
.filter-chip--custom_line .filter-chip-icon::before{
  left:4px;
  top:10px;
  width:14px;
  border-top:2px solid currentColor;
}
.filter-chip--etc .filter-chip-icon{
  border-radius:0;
}
.filter-chip--etc .filter-chip-icon::before{
  left:5px;
  top:9px;
  width:3px;
  height:3px;
  border-radius:0;
  background:currentColor;
  box-shadow:6px 0 0 currentColor,12px 0 0 currentColor;
}
.filter-chip-label{
  line-height:1.2;
  white-space:nowrap;
}
.filter-result-count{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  border:1px solid #d7ebfc;
  background:linear-gradient(90deg,#eaf6ff 0%,#f6fbff 100%);
}
.filter-result-count::before{
  content:"i";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:0;
  background:#0f66bb;
  color:#fff;
  font-size:13px;
  font-weight:900;
  font-style:normal;
}

@media (max-width:900px){
  .product-control-panel{padding:20px;border-radius:0}
  .filter-group{padding:22px 20px;min-height:auto}
  .filter-group-bg{width:260px;height:140px;opacity:.06;right:-48px;bottom:-34px}
  .filter-chip-row{gap:9px}
  .filter-chip{min-height:44px;min-width:auto;padding:9px 12px;border-radius:0;font-size:13px}
  .filter-chip-icon{width:18px;height:18px;border-width:2px}
  .filter-group h3{font-size:19px}
}
@media (max-width:640px){
  .filter-mode-tabs,.filter-sub-tabs{grid-template-columns:1fr;gap:9px}
  .filter-mode-tabs button,.filter-sub-tabs button{min-height:48px;font-size:15px}
  .filter-group{border-radius:0}
  .filter-group-bg{display:none}
  .filter-chip{width:auto;min-height:40px;padding:8px 11px;font-size:12px}
  .filter-chip-icon{display:none}
  .filter-result-count{font-size:13px;padding:13px 14px}
}

/* =========================================================
   [제품 필터 레이아웃 정리]
   - 카테고리 배경: /images/category-background/한글파일명.*
   - 버튼 동일 사이즈
   - PC: 첫 줄 5칸, 이후 줄은 왼쪽 1칸 비우고 4칸 배치
   - 모바일/태블릿은 자동 2~4칸으로 재정렬
========================================================= */
.product-control-panel{
  position:relative;
  overflow:hidden;
}
.product-control-panel > :not(.product-control-bg){
  position:relative;
  z-index:1;
}
.product-control-bg{
  position:absolute;
  right:-40px;
  top:24px;
  width:420px;
  height:260px;
  background-repeat:no-repeat;
  background-position:right top;
  background-size:contain;
  opacity:.045;
  pointer-events:none;
  z-index:0;
}
.filter-group-bg{
  right:-24px;
  bottom:-22px;
  width:390px;
  height:210px;
  opacity:.055;
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
}
.filter-chip-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.filter-chip-row .filter-chip{
  width:100%;
  min-width:0;
  min-height:68px;
  height:68px;
  padding:0 14px;
  border-radius:0;
  text-align:center;
}
.filter-chip-row .filter-chip:nth-child(4n+6){
  grid-column:2;
}
.filter-chip-label{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
  line-height:1.25;
}
.filter-chip-icon{
  width:21px;
  height:21px;
}

@media (max-width:1200px){
  .filter-chip-row{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .filter-chip-row .filter-chip:nth-child(4n+6){
    grid-column:auto;
  }
  .product-control-bg{
    width:340px;
    height:220px;
  }
}

@media (max-width:768px){
  .product-control-bg,
  .filter-group-bg{
    opacity:.03;
  }
  .filter-chip-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .filter-chip-row .filter-chip{
    height:58px;
    min-height:58px;
    border-radius:0;
    font-size:14px;
  }
  .filter-chip-icon{
    display:none;
  }
}

/* =========================================================
   [FILTER LAYOUT PATCH] 전체 보기 상단 분리 + 세부 필터 4칸 정렬
   파일명: /assets/css/product.css
   목적:
   - "원물 전체 / 공정 전체 / 백 형태 전체" 버튼을 세부 필터 위로 분리
   - 세부 필터 버튼은 PC 기준 4칸 그리드로 정렬
   - 버튼 높이/폭/간격을 통일하여 카테고리 박스 정돈감 개선
========================================================= */

.filter-group {
    position: relative;
    padding: 28px;
    overflow: hidden;
}

.filter-group h3 {
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.filter-chip-all-row {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    margin-bottom: 16px;
}

.filter-chip-all-row .filter-chip {
    min-width: 180px;
    min-height: 58px;

    padding: 0 24px;

    border-radius:0;

    font-size: 16px;
    font-weight: 900;

    box-shadow: 0 10px 22px rgba(15, 102, 187, 0.12);
}

.filter-chip-row--details {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.filter-chip-row--details .filter-chip {
    width: 100%;
    min-width: 0;
    min-height: 58px;

    padding: 0 14px;

    border-radius:0;

    font-size: 15px;
    line-height: 1.25;
    text-align: center;
}

.filter-chip-row--details .filter-chip-label {
    display: block;
    word-break: keep-all;
}

.filter-group-bg {
    opacity: 0.035;
}

/* =========================================================
   [FILTER LAYOUT PATCH] 넓은 PC 화면 보정
========================================================= */

@media (min-width: 1201px) {
    .filter-group {
        padding: 30px 32px;
    }

    .filter-chip-all-row .filter-chip {
        min-width: 190px;
    }
}

/* =========================================================
   [FILTER LAYOUT PATCH] 태블릿
========================================================= */

@media (max-width: 1024px) {
    .filter-chip-row--details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   [FILTER LAYOUT PATCH] 모바일
========================================================= */

@media (max-width: 768px) {
    .filter-group {
        padding: 22px;
    }

    .filter-chip-all-row {
        margin-bottom: 12px;
    }

    .filter-chip-all-row .filter-chip {
        width: 100%;
        min-width: 0;
        min-height: 54px;
    }

    .filter-chip-row--details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .filter-chip-row--details .filter-chip {
        min-height: 52px;
        font-size: 14px;
        border-radius:0;
    }

    .filter-group-bg {
        opacity: 0.025;
    }
}


/* =========================================================
   [103] 반자동 설비 2차 탭 디자인 정리
   - 원물 기준 / 공정 기준 계층 강조 완화
   - 메인탭보다 작고 가벼운 세그먼트 느낌
========================================================= */

.semi-filter-mode-tabs,
.filter-mode-tabs.filter-mode-tabs--sub{
  gap:10px;
  margin-top:14px;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

.semi-filter-mode-tabs .filter-mode-tab,
.filter-mode-tabs.filter-mode-tabs--sub .filter-mode-tab{
  flex:0 0 auto;
  min-width:180px;
  height:48px;
  padding:0 24px;
  border:1px solid #cddff1;
  border-radius:0;
  background:#f8fbff;
  color:#48627e;
  font-size:15px;
  font-weight:800;
  box-shadow:none;
  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.semi-filter-mode-tabs .filter-mode-tab.active,
.filter-mode-tabs.filter-mode-tabs--sub .filter-mode-tab.active{
  border-color:#8dbdea;
  background:#eef6ff;
  color:#0f66bb;
}

.semi-filter-mode-tabs .filter-mode-tab:hover,
.filter-mode-tabs.filter-mode-tabs--sub .filter-mode-tab:hover{
  transform:translateY(-1px);
  border-color:#9fc7ec;
  background:#f3f9ff;
}

@media(max-width:768px){

  .semi-filter-mode-tabs .filter-mode-tab,
  .filter-mode-tabs.filter-mode-tabs--sub .filter-mode-tab{
    min-width:0;
    flex:1 1 0;
    height:44px;
    padding:0 14px;
    font-size:14px;
  }

}



/* =========================================================
   [2026-05-09] 제품 상세페이지 예전 디자인 복원
   - product-page.css가 아닌 제품 상세 전용 보정
   - 과한 그라데이션/앱형 카드 느낌 제거
========================================================= */
.product-detail-oldstyle{
  padding:40px 42px;
}
.product-detail-oldstyle .product-detail-head{
  margin:0 0 26px;
  padding-bottom:18px;
  border-bottom:1px solid #e1ebf5;
}
.product-detail-oldstyle .product-detail-head h2{
  margin:0 0 12px;
  color:#102d4c;
  font-size:36px;
  line-height:1.28;
  font-weight:900;
  letter-spacing:-1.1px;
}
.product-detail-oldstyle .product-detail-head p{
  margin:0;
  color:#52677d;
  font-size:16px;
  line-height:1.8;
}
.product-detail-main-image{
  margin:26px 0 26px;
  padding:20px;
  border:1px solid #d7e8f8;
  border-radius:0;
  background:#fff;
  box-shadow:none;
}
.product-detail-main-image img{
  display:block;
  width:100%;
  max-height:620px;
  object-fit:contain;
}
.product-txt-box{
  margin:18px 0;
  padding:24px 26px;
  border:1px solid #d7e8f8;
  border-radius:0;
  background:#f9fcff;
  box-shadow:none;
}
.product-txt-box h3{
  margin:0 0 14px;
  color:#0b2d4d;
  font-size:20px;
  line-height:1.35;
  font-weight:900;
}
.product-txt-box p{
  margin:0 0 14px;
  color:#334155;
  font-size:16px;
  line-height:1.9;
  word-break:keep-all;
}
.product-txt-box p:last-child{margin-bottom:0;}
.product-html-box table{
  width:100%;
  border-collapse:collapse;
  margin:14px 0;
}
.product-html-box th,
.product-html-box td{
  border:1px solid #d9e8f6;
  padding:12px 14px;
  line-height:1.6;
}
.product-html-box th{background:#f4f9ff;color:#0f579a;font-weight:900;}
.product-detail-image-list{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin:28px 0 0;
}
.product-detail-image-box{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  border:1px solid #d7e8f8;
  border-radius:0;
  background:#fff;
  overflow:hidden;
}
.product-detail-image-box img{
  display:block;
  width:100%;
  max-height:none;
  object-fit:contain;
}
@media(max-width:768px){
  .product-detail-oldstyle{padding:24px 18px;}
  .product-detail-oldstyle .product-detail-head h2{font-size:27px;}
  .product-txt-box{padding:20px 18px;border-radius:0;}
  .product-txt-box p{font-size:14.5px;line-height:1.82;}
  .product-detail-main-image,.product-detail-image-box{padding:12px;border-radius:0;}
}


/* =========================================================
   [2026-05-09] 제품 상세페이지 모바일 가독성 정리 PATCH
   - raw 텍스트 박스 → 섹션형 카드 레이아웃
   - 상단 문의/목록 버튼 정리
   - 모바일에서 좌우 여백, 글줄, 카드 높이 안정화
========================================================= */
.product-detail-oldstyle{
  overflow:hidden;
}
.product-detail-oldstyle .product-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.product-detail-title-area{
  min-width:0;
  flex:1 1 auto;
}
.product-detail-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  padding-top:4px;
}
.product-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:132px;
  height:46px;
  padding:0 20px;
  border-radius:0;
  font-size:15px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.product-action-btn--primary{
  color:#fff;
  border:1px solid #126cc8;
  background:#1177dc;
  box-shadow:0 8px 18px rgba(17,119,220,.16);
}
.product-action-btn--primary:hover{background:#075fb8;color:#fff;}
.product-action-btn--line{
  color:#1d3552;
  border:1px solid #c9d9ea;
  background:#fff;
}
.product-action-btn--line:hover{border-color:#1177dc;color:#1177dc;}
.product-detail-section-wrap{
  margin:26px 0 0;
}
.product-detail-section-title{
  position:relative;
  margin:0 0 18px;
  padding-bottom:12px;
  color:#0b2d4d;
  font-size:24px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.5px;
  border-bottom:1px solid #dbe8f5;
}
.product-detail-section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:44px;
  height:3px;
  border-radius:0;
  background:#1177dc;
}
.product-detail-info-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.product-info-row{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:18px;
  align-items:flex-start;
  padding:22px 24px;
  border:1px solid #d9e8f6;
  border-radius:0;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,60,110,.045);
}
.product-info-icon{
  width:58px;
  height:58px;
  border-radius:0;
  border:1px solid #cfe4fa;
  background:linear-gradient(180deg,#f8fcff,#eef7ff);
  position:relative;
}
.product-info-icon::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:22px;
  border:3px solid #1177dc;
  border-radius:0;
  transform:translate(-50%,-50%);
}
.product-info-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:15px;
  width:16px;
  height:6px;
  border:2px solid #1177dc;
  border-bottom:0;
  border-radius:0;
  transform:translateX(-50%);
}
.product-info-content h4{
  margin:0 0 8px;
  color:#0a2d4e;
  font-size:20px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.35px;
}
.product-info-content p{
  margin:0;
  color:#33475f;
  font-size:16px;
  line-height:1.85;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.product-inquiry-card-clean{
  display:flex;
  align-items:center;
  gap:20px;
  margin:26px 0 0;
  padding:26px 28px;
  border:1px solid #cfe2f5;
  border-radius:0;
  background:linear-gradient(135deg,#f6fbff 0%,#eaf4ff 100%);
  box-shadow:0 10px 28px rgba(15,80,150,.06);
}
.product-inquiry-card-icon{
  flex:0 0 auto;
  width:70px;
  height:70px;
  border-radius:0;
  background:#fff;
  border:1px solid #d8e8f8;
  position:relative;
  box-shadow:0 8px 18px rgba(20,90,160,.08);
}
.product-inquiry-card-icon::before{
  content:"";
  position:absolute;
  left:20px;
  top:22px;
  width:30px;
  height:22px;
  border-radius:0;
  background:#1177dc;
}
.product-inquiry-card-icon::after{
  content:"";
  position:absolute;
  left:28px;
  top:42px;
  width:10px;
  height:10px;
  background:#1177dc;
  clip-path:polygon(0 0,100% 0,0 100%);
}
.product-inquiry-card-text{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.product-inquiry-card-text strong{
  color:#0a2d4e;
  font-size:26px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.6px;
}
.product-inquiry-card-text span{
  color:#52677d;
  font-size:16px;
  line-height:1.6;
  word-break:keep-all;
}
.product-inquiry-card-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:150px;
  height:52px;
  border-radius:0;
  background:#1177dc;
  color:#fff;
  font-size:17px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(17,119,220,.16);
}
.product-inquiry-card-btn:hover{background:#075fb8;color:#fff;}

@media(max-width:768px){
  .content-card.product-detail-oldstyle{
    width:100%;
    max-width:100%;
    padding:18px 14px 22px;
    border-radius:0;
  }
  .product-detail-oldstyle .product-detail-head{
    display:block;
    margin-bottom:18px;
    padding-bottom:16px;
  }
  .product-detail-oldstyle .badge{
    margin-bottom:10px;
    font-size:11px;
    height:30px;
    padding:0 12px;
  }
  .product-detail-oldstyle .product-detail-head h2{
    margin-bottom:10px;
    font-size:25px;
    line-height:1.32;
    letter-spacing:-.8px;
  }
  .product-detail-oldstyle .product-detail-head p{
    font-size:14.5px;
    line-height:1.75;
  }
  .product-detail-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:16px;
    padding-top:0;
  }
  .product-action-btn{
    min-width:0;
    height:42px;
    padding:0 10px;
    border-radius:0;
    font-size:13.5px;
  }
  .product-detail-main-image{
    margin:18px 0;
    padding:10px;
    border-radius:0;
  }
  .product-detail-section-wrap{margin-top:20px;}
  .product-detail-section-title{
    margin-bottom:14px;
    font-size:20px;
  }
  .product-detail-info-list{gap:12px;}
  .product-info-row{
    display:block;
    padding:18px 16px;
    border-radius:0;
  }
  .product-info-icon{
    width:44px;
    height:44px;
    margin:0 0 12px;
    border-radius:0;
  }
  .product-info-icon::before{
    width:17px;
    height:17px;
    border-width:2px;
    border-radius:0;
  }
  .product-info-icon::after{
    top:12px;
    width:12px;
    height:5px;
    border-width:2px;
  }
  .product-info-content h4{
    margin-bottom:7px;
    font-size:18px;
  }
  .product-info-content p{
    font-size:14.5px;
    line-height:1.82;
    word-break:keep-all;
  }
  .product-html-box,
  .product-txt-box{
    padding:18px 16px;
    border-radius:0;
  }
  .product-inquiry-card-clean{
    display:block;
    margin-top:22px;
    padding:22px 18px;
    border-radius:0;
    text-align:left;
  }
  .product-inquiry-card-icon{
    width:58px;
    height:58px;
    margin:0 0 14px;
  }
  .product-inquiry-card-icon::before{
    left:16px;
    top:18px;
    width:26px;
    height:19px;
  }
  .product-inquiry-card-icon::after{
    left:24px;
    top:36px;
  }
  .product-inquiry-card-text strong{
    font-size:22px;
  }
  .product-inquiry-card-text span{
    font-size:14.5px;
    line-height:1.65;
  }
  .product-inquiry-card-btn{
    width:100%;
    min-width:0;
    height:46px;
    margin-top:16px;
    border-radius:0;
    font-size:16px;
  }
}

/* =========================================================
   [2026-05-09] 제품 필터/보기/문의 UI 최종 정리 PATCH
   - 필터 버튼 이모티콘 제거
   - 1차/2차 필터 라벨 줄바꿈
   - 보기 방식 모바일 깨짐 보정
   - 크게 보기 카드 가독성 보정
   - 상세/목록 버튼 정리
========================================================= */
.filter-chip-icon,
.product-inquiry-card-icon,
.product-info-icon{
  display:none;
}

.filter-group h3{
  display:block;
  line-height:1.35;
}
.filter-step-label{
  display:block;
  width:max-content;
  margin-top:6px;
  padding:3px 9px;
  border-radius:0;
  background:#eaf5ff;
  color:#0f66bb;
  font-size:12px;
  font-weight:900;
  letter-spacing:-.2px;
}

.filter-chip{
  gap:0;
}
.filter-chip--all .filter-chip-icon::before,
.filter-chip--all .filter-chip-icon::after{
  display:none;
  content:none;
}

.product-view-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
}
.product-view-panel h3{
  margin:0 0 5px;
  white-space:nowrap;
}
.product-view-panel p{
  word-break:keep-all;
}
.view-switch{
  width:300px;
  max-width:100%;
}

.product-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.list-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:34px;
  padding:0 13px;
  border-radius:0;
  border:1px solid #cfe1f4;
  background:#fff;
  color:#1d3d5f;
  font-size:13px;
  font-weight:900;
}
.product-grid.view-large .product-card{
  display:grid;
  grid-template-columns:42% minmax(0,1fr);
  min-height:300px;
}
.product-grid.view-large .product-thumb{
  height:100%;
  aspect-ratio:auto;
}
.product-grid.view-large .product-body{
  min-height:0;
}
.product-grid.view-large .product-body h3{
  font-size:24px;
}

.product-inquiry-card-clean{
  align-items:center;
}
.product-inquiry-card-text{
  min-width:0;
}
.product-inquiry-card-btn{
  white-space:nowrap;
}
.product-detail-bottom-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid #e1ebf5;
}
.product-info-row{
  display:block;
}

.product-inquiry-box,
.product-inquiry-meta,
.product-inquiry-meta div,
#product-url-view,
#productUrlField{
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-all;
}
.product-inquiry-box{
  overflow:hidden;
}
.product-inquiry-meta{
  display:grid;
  gap:8px;
}

@media(max-width:768px){
  .product-view-panel{
    grid-template-columns:1fr;
    gap:12px;
    padding:18px;
    border-radius:0;
  }
  .product-view-panel h3{
    white-space:normal;
    font-size:18px;
  }
  .view-switch{
    width:100%;
    min-width:0;
  }
  .view-switch button{
    min-height:42px;
    padding:0 10px;
    font-size:14px;
  }
  .product-grid.view-large,
  .product-grid.view-many{
    grid-template-columns:1fr 1fr;
    gap:26px;
  }
  .product-grid.view-large .product-card{
    display:flex;
    min-height:0;
  }
  .product-grid.view-large .product-thumb{
    aspect-ratio:4/3;
    height:auto;
  }
  .product-grid.view-large .product-body h3{
    font-size:23px;
  }
  .product-inquiry-card-clean{
    display:block;
  }
  .product-detail-bottom-actions{
    display:grid;
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .product-grid.view-large,
  .product-grid.view-many{
    grid-template-columns:1fr 1fr;
    gap:26px;
  }
  .product-body{padding:18px 14px;}
  .product-body h3{font-size:20px;}
  .product-body p{font-size:14px;}
  .tags span{font-size:10.5px;}
}

/* =========================================================
   [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;
    grid-template-columns:1fr;
    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{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }
  .product-grid.view-large{
    grid-template-columns:1fr;
    gap:18px;
  }
  .product-grid.view-large .product-card{
    display:block;
    min-height:0;
  }
  .product-grid.view-large .product-thumb{
    height:auto;
    aspect-ratio:4/3;
  }
  .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{
    min-height:0;
  }
  .product-grid.view-many .product-body,
  .product-grid.view-large .product-body{
    display:flex;
    flex-direction:column;
  }
}

@media(max-width:768px){
  .product-view-panel{
    grid-template-columns:1fr;
  }
  .product-view-panel .view-switch{
    width:220px;
  }
  .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{
    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{
    font-size:12px;
    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{
    aspect-ratio:auto;
  }
  .product-grid.view-large .product-body p{
    -webkit-line-clamp:3;
  }
  .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{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.product-grid.view-large{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.product-grid.view-many .product-card,
.product-grid.view-large .product-card{
  display:flex;
  flex-direction:column;
  aspect-ratio:3/5;
  min-height:0;
  height:auto;
}
.product-grid.view-many .product-thumb,
.product-grid.view-large .product-thumb{
  flex:0 0 64%;
  height:auto;
  aspect-ratio:auto;
  padding:0;
}
.product-grid.view-many .product-thumb img,
.product-grid.view-large .product-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.product-grid.view-many .product-body,
.product-grid.view-large .product-body{
  flex:1 1 auto;
  min-height:0;
  padding:14px 15px 15px;
  gap:7px;
}
.product-grid.view-many .product-body h3,
.product-grid.view-large .product-body h3{
  font-size:17px;
  line-height:1.32;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-grid.view-many .product-body p,
.product-grid.view-large .product-body p{
  font-size:13px;
  line-height:1.48;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-grid.view-many .product-card-actions,
.product-grid.view-large .product-card-actions{
  margin-top:auto;
}
.product-grid.view-many .detail-btn,
.product-grid.view-large .detail-btn{
  min-height:31px;
  padding:0 11px;
  font-size:12px;
}

@media(max-width:768px){
  .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{
    display:flex;
    flex-direction:column;
    aspect-ratio:3/5;
    min-height:0;
  }
  .product-grid.view-many .product-thumb,
  .product-grid.view-large .product-thumb{
    flex:0 0 65%;
    aspect-ratio:auto;
  }
  .product-grid.view-many .product-body,
  .product-grid.view-large .product-body{
    min-height:0;
    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;
    -webkit-line-clamp:2;
  }
  .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;
    padding:0 10px;
    font-size:12px;
  }
}

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

.product-home-card{
  position:relative;
  display:flex;
  min-height:260px;
  overflow:hidden;
  border:1px solid rgba(180,203,228,.72);
  border-radius:0;
  background:#fff;
  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;
  display:block;
  background:#eef5fb;
}

.product-home-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  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;
  display:flex;
  flex-direction:column;
  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-size:11px;
  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;
  align-items:center;
  justify-content:center;
  min-height:36px;
  margin-top:4px;
  padding:0 16px;
  border-radius:0;
  background:#fff;
  color:#126fc5;
  font-size:13px;
  font-style:normal;
  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;
  color:#fff;
  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-10] 보기 방식 컴팩트 + 버튼 전체폭 + 필터 아이콘 통합
   파일명: /assets/css/product.css
   목적:
   - 이전 보기 방식 카드 스타일 유지: 카드 높이는 작게, 버튼 영역만 가로 전체 사용
   - 원물/공정 필터 버튼에 CSS 기반 SVG 아이콘 적용
   - PNG 파일 추가 없이 data-basis / data-type 속성만 활용
========================================================= */

/* ===== 보기 방식: 모바일 컴팩트 카드 + 버튼 전체폭 ===== */
@media(max-width:768px){
  .product-view-panel{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin:0 0 18px;
    padding:16px 18px;
    border:1px solid #cfe5fb;
    border-radius:0;
    background:#f8fbff;
    box-shadow:none;
  }

  .product-view-panel h3{
    display:block;
    margin:0 0 3px;
    color:#102d4c;
    font-size:18px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:-.45px;
  }

  .product-view-panel p{
    display:block;
    margin:0;
    color:#64748b;
    font-size:13px;
    font-weight:700;
    line-height:1.45;
  }

  .product-view-panel .view-switch{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    width:100%;
    min-width:0;
    max-width:none;
    justify-self:stretch;
    padding:6px;
    border:1px solid #cfe1f4;
    border-radius:0;
    background:#edf6ff;
  }

  .product-view-panel .view-switch button{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 8px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#1d3d5f;
    font-size:13.5px;
    font-weight:900;
    line-height:1;
    letter-spacing:-.35px;
    box-shadow:none;
  }

  .product-view-panel .view-switch button.active{
    background:#0f66bb;
    color:#fff;
    box-shadow:0 8px 18px rgba(15,102,187,.2);
  }
}

/* ===== 필터 버튼 아이콘 공통 ===== */
.filter-chip{
  position:relative;
  overflow:hidden;
}

.filter-chip::before{
  content:"";
  display:none;
  flex:0 0 20px;
  width:20px;
  height:20px;
  opacity:.72;
  background-color:#0f66bb;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.filter-chip.active::before{
  background-color:#fff;
  opacity:.95;
}

.filter-chip[data-basis="material"],
.filter-chip[data-basis="process"]{
  gap:9px;
}

.filter-chip[data-basis="material"]::before,
.filter-chip[data-basis="process"]::before{
  display:block;
}

.filter-chip[data-type="all"]::before{
  flex-basis:22px;
  width:22px;
  height:22px;
  opacity:.85;
}

/* 원물 전체 */
.filter-chip[data-basis="material"][data-type="all"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.4 20.5c-1.7 0-3.1-1.4-3.1-3.1c0-1.3.8-2.4 1.9-2.9c-.1-.4-.2-.8-.2-1.2c0-2 1.6-3.7 3.6-3.7c.6 0 1.1.1 1.6.4c.9-1.8 2.7-3 4.8-3c3.1 0 5.6 2.5 5.6 5.6c0 .5-.1 1-.2 1.5c1 .6 1.7 1.6 1.7 2.9c0 1.9-1.5 3.4-3.4 3.4H6.4Zm5.6-2.1c1.9-2.1 2.5-4.1 1.9-6.1c-1.6.8-2.6 2.1-3 3.9c-.7-.9-1.5-1.5-2.6-1.9c-.2 1.6.5 3 2.1 4.1H12Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.4 20.5c-1.7 0-3.1-1.4-3.1-3.1c0-1.3.8-2.4 1.9-2.9c-.1-.4-.2-.8-.2-1.2c0-2 1.6-3.7 3.6-3.7c.6 0 1.1.1 1.6.4c.9-1.8 2.7-3 4.8-3c3.1 0 5.6 2.5 5.6 5.6c0 .5-.1 1-.2 1.5c1 .6 1.7 1.6 1.7 2.9c0 1.9-1.5 3.4-3.4 3.4H6.4Zm5.6-2.1c1.9-2.1 2.5-4.1 1.9-6.1c-1.6.8-2.6 2.1-3 3.9c-.7-.9-1.5-1.5-2.6-1.9c-.2 1.6.5 3 2.1 4.1H12Z'/%3E%3C/svg%3E");
}

/* 액상 */
.filter-chip[data-basis="material"][data-type="liquid"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22c-3.9 0-7-3.1-7-7c0-4.5 5.5-10.7 6.2-11.4c.4-.5 1.2-.5 1.6 0C13.5 4.3 19 10.5 19 15c0 3.9-3.1 7-7 7Zm0-15.8C10.1 8.6 7.2 12.7 7.2 15c0 2.6 2.2 4.8 4.8 4.8s4.8-2.2 4.8-4.8c0-2.3-2.9-6.4-4.8-8.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22c-3.9 0-7-3.1-7-7c0-4.5 5.5-10.7 6.2-11.4c.4-.5 1.2-.5 1.6 0C13.5 4.3 19 10.5 19 15c0 3.9-3.1 7-7 7Zm0-15.8C10.1 8.6 7.2 12.7 7.2 15c0 2.6 2.2 4.8 4.8 4.8s4.8-2.2 4.8-4.8c0-2.3-2.9-6.4-4.8-8.8Z'/%3E%3C/svg%3E");
}

/* 분말 */
.filter-chip[data-basis="material"][data-type="powder"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 20c-1.1 0-2-.9-2-2.1c0-.7.4-1.4 1-1.8L10.3 4c.7-1.3 2.6-1.3 3.3 0L20 16.1c.6.4 1 1 1 1.8c0 1.2-.9 2.1-2 2.1H5Zm2.4-2.2h9.2L12 8.6l-4.6 9.2ZM8 4.5a1.3 1.3 0 1 0 0 2.6a1.3 1.3 0 0 0 0-2.6Zm8 1.2a1.1 1.1 0 1 0 0 2.2a1.1 1.1 0 0 0 0-2.2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 20c-1.1 0-2-.9-2-2.1c0-.7.4-1.4 1-1.8L10.3 4c.7-1.3 2.6-1.3 3.3 0L20 16.1c.6.4 1 1 1 1.8c0 1.2-.9 2.1-2 2.1H5Zm2.4-2.2h9.2L12 8.6l-4.6 9.2ZM8 4.5a1.3 1.3 0 1 0 0 2.6a1.3 1.3 0 0 0 0-2.6Zm8 1.2a1.1 1.1 0 1 0 0 2.2a1.1 1.1 0 0 0 0-2.2Z'/%3E%3C/svg%3E");
}

/* 과립 */
.filter-chip[data-basis="material"][data-type="granule"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 8.5a3 3 0 1 1 0-6a3 3 0 0 1 0 6Zm10 2a3 3 0 1 1 0-6a3 3 0 0 1 0 6ZM8.5 21a3.5 3.5 0 1 1 0-7a3.5 3.5 0 0 1 0 7Zm8.5-1.5a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 8.5a3 3 0 1 1 0-6a3 3 0 0 1 0 6Zm10 2a3 3 0 1 1 0-6a3 3 0 0 1 0 6ZM8.5 21a3.5 3.5 0 1 1 0-7a3.5 3.5 0 0 1 0 7Zm8.5-1.5a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}

/* 티백·커피 */
.filter-chip[data-basis="material"][data-type="teabag"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 3h8l3 5v11c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V8l3-5Zm1.2 2L7.4 8H16.6l-1.8-3H9.2ZM7 10v9h10v-9H7Zm3 3h4v2h-4v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 3h8l3 5v11c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V8l3-5Zm1.2 2L7.4 8H16.6l-1.8-3H9.2ZM7 10v9h10v-9H7Zm3 3h4v2h-4v-2Z'/%3E%3C/svg%3E");
}

/* 빵·과자 */
.filter-chip[data-basis="material"][data-type="bakery"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 12c0-4.4 3.6-8 8-8s8 3.6 8 8v5c0 1.7-1.3 3-3 3H7c-1.7 0-3-1.3-3-3v-5Zm3 1v4h10v-4c0-2.8-2.2-5-5-5s-5 2.2-5 5Zm2.5-1.5h2v2h-2v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 12c0-4.4 3.6-8 8-8s8 3.6 8 8v5c0 1.7-1.3 3-3 3H7c-1.7 0-3-1.3-3-3v-5Zm3 1v4h10v-4c0-2.8-2.2-5-5-5s-5 2.2-5 5Zm2.5-1.5h2v2h-2v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

/* 야채·농산물 */
.filter-chip[data-basis="material"][data-type="vegetable"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21c-4.1-2.1-6.5-5.2-6.5-8.7c0-2.8 1.9-5 4.5-5c1.1 0 2.1.4 3 1.1c.9-.7 1.9-1.1 3-1.1c2.6 0 4.5 2.2 4.5 5c0 3.5-2.4 6.6-6.5 8.7h-2ZM12.5 3c2.5.2 4.7 1.4 6.2 3.4c-2.3.2-4.4-.5-6.2-2V3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21c-4.1-2.1-6.5-5.2-6.5-8.7c0-2.8 1.9-5 4.5-5c1.1 0 2.1.4 3 1.1c.9-.7 1.9-1.1 3-1.1c2.6 0 4.5 2.2 4.5 5c0 3.5-2.4 6.6-6.5 8.7h-2ZM12.5 3c2.5.2 4.7 1.4 6.2 3.4c-2.3.2-4.4-.5-6.2-2V3Z'/%3E%3C/svg%3E");
}

/* 트레이·용기 */
.filter-chip[data-basis="material"][data-type="tray"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 5h14c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2Zm0 3v8h14V8H5Zm2 2h4v4H7v-4Zm6 0h4v4h-4v-4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 5h14c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2Zm0 3v8h14V8H5Zm2 2h4v4H7v-4Zm6 0h4v4h-4v-4Z'/%3E%3C/svg%3E");
}

/* 반찬·즉석식품 */
.filter-chip[data-basis="material"][data-type="side_dish"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 8h16v10c0 1.7-1.3 3-3 3H7c-1.7 0-3-1.3-3-3V8Zm2 2v8c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-8H6Zm1-6h10c1.7 0 3 1.3 3 3H4c0-1.7 1.3-3 3-3Zm2 9h6v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 8h16v10c0 1.7-1.3 3-3 3H7c-1.7 0-3-1.3-3-3V8Zm2 2v8c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-8H6Zm1-6h10c1.7 0 3 1.3 3 3H4c0-1.7 1.3-3 3-3Zm2 9h6v2H9v-2Z'/%3E%3C/svg%3E");
}

/* 공산품 */
.filter-chip[data-basis="material"][data-type="industrial"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 9l5-3v3l5-3v4h6v10H4V9Zm2 3v6h12v-6h-6V9.7l-5 3V9.7l-1 .6V12Zm2 2h2v2H8v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 9l5-3v3l5-3v4h6v10H4V9Zm2 3v6h12v-6h-6V9.7l-5 3V9.7l-1 .6V12Zm2 2h2v2H8v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

/* 공정 전체 */
.filter-chip[data-basis="process"][data-type="all"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 15h18v3H3v-3Zm2-7h4v5H5V8Zm6-4h4v9h-4V4Zm6 6h4v3h-4v-3ZM7 20a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Zm10 0a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 15h18v3H3v-3Zm2-7h4v5H5V8Zm6-4h4v9h-4V4Zm6 6h4v3h-4v-3ZM7 20a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Zm10 0a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
}

/* 공정별 공통 아이콘: 자동화/컨베이어 느낌 */
.filter-chip[data-basis="process"]:not([data-type="all"])::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 15h16v3H4v-3Zm2-6h4v4H6V9Zm6-4h4v8h-4V5Zm6 5h3v3h-3v-3ZM8 20a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Zm8 0a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 15h16v3H4v-3Zm2-6h4v4H6V9Zm6-4h4v8h-4V5Zm6 5h3v3h-3v-3ZM8 20a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Zm8 0a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
}

@media(max-width:768px){
  .filter-chip[data-basis="material"],
  .filter-chip[data-basis="process"]{
    gap:8px;
  }

  .filter-chip[data-basis="material"]::before,
  .filter-chip[data-basis="process"]::before{
    width:18px;
    height:18px;
    flex-basis:18px;
  }

  .filter-chip[data-type="all"]::before{
    width:22px;
    height:22px;
    flex-basis:22px;
  }
}

@media(max-width:380px){
  .filter-chip[data-basis="material"],
  .filter-chip[data-basis="process"]{
    gap:6px;
  }

  .filter-chip[data-basis="material"]::before,
  .filter-chip[data-basis="process"]::before{
    width:16px;
    height:16px;
    flex-basis:16px;
  }
}

/* =========================================================
   [백 형태 기준 필터 아이콘 추가]
   - 원물/공정 기준과 동일하게 CSS SVG mask 방식 사용
   - PNG 이미지 추가 없이 백 형태 필터 버튼에 아이콘 표시
========================================================= */
.filter-chip[data-basis="package"]{
  gap:9px;
}

.filter-chip[data-basis="package"]::before{
  display:block;
}

/* 백 형태 전체 */
.filter-chip[data-basis="package"][data-type=""]::before{
  flex-basis:22px;
  width:22px;
  height:22px;
  opacity:.85;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4.5C4 3.7 4.7 3 5.5 3h13c.8 0 1.5.7 1.5 1.5v15c0 .8-.7 1.5-1.5 1.5h-13c-.8 0-1.5-.7-1.5-1.5v-15Zm3 1.8v11.4h10V6.3H7Zm2 2h6v2H9v-2Zm0 3.1h6v2H9v-2Zm0 3.1h4v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4.5C4 3.7 4.7 3 5.5 3h13c.8 0 1.5.7 1.5 1.5v15c0 .8-.7 1.5-1.5 1.5h-13c-.8 0-1.5-.7-1.5-1.5v-15Zm3 1.8v11.4h10V6.3H7Zm2 2h6v2H9v-2Zm0 3.1h6v2H9v-2Zm0 3.1h4v2H9v-2Z'/%3E%3C/svg%3E");
}

/* 스틱포장기 */
.filter-chip[data-basis="package"][data-type="stick"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 2.8h6c1.1 0 2 .9 2 2v14.4c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2V4.8c0-1.1.9-2 2-2Zm.2 2.3v13.8h5.6V5.1H9.2Zm1.2 2.1h3.2v2h-3.2v-2Zm0 3.3h3.2v2h-3.2v-2Zm0 3.3h3.2v2h-3.2v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 2.8h6c1.1 0 2 .9 2 2v14.4c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2V4.8c0-1.1.9-2 2-2Zm.2 2.3v13.8h5.6V5.1H9.2Zm1.2 2.1h3.2v2h-3.2v-2Zm0 3.3h3.2v2h-3.2v-2Zm0 3.3h3.2v2h-3.2v-2Z'/%3E%3C/svg%3E");
}

/* 삼면포장기 */
.filter-chip[data-basis="package"][data-type="three_side"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 4h14v16H5V4Zm2.2 2.2v11.6h9.6V6.2H7.2ZM9 8h6v2H9V8Zm0 3h6v2H9v-2Zm0 3h4v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 4h14v16H5V4Zm2.2 2.2v11.6h9.6V6.2H7.2ZM9 8h6v2H9V8Zm0 3h6v2H9v-2Zm0 3h4v2H9v-2Z'/%3E%3C/svg%3E");
}

/* 사면포장기 */
.filter-chip[data-basis="package"][data-type="four_side"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16v16H4V4Zm3 3v10h10V7H7Zm1.5-1.8v13.6h-2V5.2h2Zm9 0v13.6h-2V5.2h2ZM8.2 8.2h7.6v1.8H8.2V8.2Zm0 3h7.6V13H8.2v-1.8Zm0 3h5.3V16H8.2v-1.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16v16H4V4Zm3 3v10h10V7H7Zm1.5-1.8v13.6h-2V5.2h2Zm9 0v13.6h-2V5.2h2ZM8.2 8.2h7.6v1.8H8.2V8.2Zm0 3h7.6V13H8.2v-1.8Zm0 3h5.3V16H8.2v-1.8Z'/%3E%3C/svg%3E");
}

/* 커스터마이징팩 */
.filter-chip[data-basis="package"][data-type="custom_line"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 2h2l.5 2.2c.6.2 1.1.4 1.6.7L17 3.7l1.4 1.4l-1.2 1.9c.3.5.6 1 .7 1.6L20 9v2l-2.1.5c-.2.6-.4 1.1-.7 1.6l1.2 1.9L17 16.4l-1.9-1.2c-.5.3-1 .6-1.6.7L13 18h-2l-.5-2.1c-.6-.2-1.1-.4-1.6-.7L7 16.4L5.6 15l1.2-1.9c-.3-.5-.6-1-.7-1.6L4 11V9l2.1-.5c.2-.6.4-1.1.7-1.6L5.6 5L7 3.6l1.9 1.2c.5-.3 1-.6 1.6-.7L11 2Zm1 5.2A2.8 2.8 0 1 0 12 12.8A2.8 2.8 0 0 0 12 7.2ZM5 19h14v2H5v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 2h2l.5 2.2c.6.2 1.1.4 1.6.7L17 3.7l1.4 1.4l-1.2 1.9c.3.5.6 1 .7 1.6L20 9v2l-2.1.5c-.2.6-.4 1.1-.7 1.6l1.2 1.9L17 16.4l-1.9-1.2c-.5.3-1 .6-1.6.7L13 18h-2l-.5-2.1c-.6-.2-1.1-.4-1.6-.7L7 16.4L5.6 15l1.2-1.9c-.3-.5-.6-1-.7-1.6L4 11V9l2.1-.5c.2-.6.4-1.1.7-1.6L5.6 5L7 3.6l1.9 1.2c.5-.3 1-.6 1.6-.7L11 2Zm1 5.2A2.8 2.8 0 1 0 12 12.8A2.8 2.8 0 0 0 12 7.2ZM5 19h14v2H5v-2Z'/%3E%3C/svg%3E");
}

/* 기타 */
.filter-chip[data-basis="package"][data-type="etc"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 14a2 2 0 1 1 0-4a2 2 0 0 1 0 4Zm6 0a2 2 0 1 1 0-4a2 2 0 0 1 0 4Zm6 0a2 2 0 1 1 0-4a2 2 0 0 1 0 4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 14a2 2 0 1 1 0-4a2 2 0 0 1 0 4Zm6 0a2 2 0 1 1 0-4a2 2 0 0 1 0 4Zm6 0a2 2 0 1 1 0-4a2 2 0 0 1 0 4Z'/%3E%3C/svg%3E");
}


/* =========================================================
   [2026-05-11] WHITE BLUE PRODUCT LIST OVERRIDE
   - 제품 카드 4열형 PC 기준
   - 흰색 카드 + 파란 active tab
========================================================= */
.product-control-panel{
  background:#fff;
  border:1px solid #dfeaf6;
  border-radius:0;
  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{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

.product-grid.view-large{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.product-card{
  border:1px solid #e0e9f4;
  border-radius:0;
  box-shadow:none;
  background:#fff;
  overflow:hidden;
}

.product-card:hover{
  transform:translateY(-4px);
  border-color:#9ed4ff;
  box-shadow:0 18px 42px rgba(15,45,80,.10);
}

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

.product-thumb img{
  object-fit:cover;
  background:#f8fbff;
}

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

.product-body h3{
  color:#101828;
  font-size:18px;
  font-weight:950;
  letter-spacing:-.055em;
}

.product-body h3::after{
  content:"›";
  margin-left:7px;
  color:#126ee2;
  font-weight:900;
}

.product-body p{
  color:#7a8798;
  font-size:13px;
}

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

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

  .product-grid.view-large{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

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

  .product-card{
    border-radius:0;
  }

  .product-thumb{
    aspect-ratio:4/3;
  }
}


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

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

.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:950;
  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 !important;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
}
.product-control-bg,
.filter-group-bg{
  display:none !important;
}

.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 !important;
  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 !important;
  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:950;
  letter-spacing:-.6px;
}
.filter-group h3::before{
  width:4px;
  height:18px;
  background:#0f66bb;
  border-radius:0 !important;
}

.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 !important;
  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 !important;
  background:#f6f9fc;
  color:#0b2545;
  font-size:14px;
  font-weight:900;
}

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

.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;
  font-weight:950;
  letter-spacing:-1px;
}
.product-list-head span{
  padding:0;
  color:#0f66bb;
  font-size:13px;
  font-weight:950;
}

.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 !important;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
  transition:border-color .16s ease, transform .16s ease;
}
.product-card:hover{
  transform:translateY(-2px);
  border-color:#0f66bb;
  box-shadow:none;
}
.product-thumb{
  aspect-ratio:4/3;
  background:#f7f9fc;
  border-bottom:1px solid #e0e8f1;
}
.product-thumb img{
  object-fit:contain;
  background:#fff;
}
.product-card:hover .product-thumb img{
  transform:none;
}
.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:950;
  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 !important;
  background:#fff;
  color:#0f66bb;
  font-size:13px;
  font-weight:950;
}
.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 !important;
  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:950;
  letter-spacing:.14em;
}
.product-home-body strong{
  margin-bottom:10px;
  color:#0b2545;
  font-size:22px;
  line-height:1.3;
  font-weight:950;
  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:950;
}
.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] 설비 소개 대표 페이지 브랜드형 재디자인
   - 파일명: /products.php?home=1
   - 적용 범위: body.page-products 전용 + equipment-* 신규 클래스
   - 기존 제품 필터/목록 페이지와 충돌 방지
========================================================= */
body.page-products .layout-content{
  display:block;
}

body.page-products .equipment-intro-card{
  margin-bottom:clamp(24px,2.2vw,38px);
}

body.page-products .equipment-home-hero,
body.page-products .equipment-home-section{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(170,199,231,.88);
  background:#fff;
  box-shadow:0 18px 48px rgba(15,35,67,.08);
  margin-bottom:clamp(24px,2.2vw,38px);
}

body.page-products .equipment-home-hero{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:clamp(28px,3vw,54px);
  align-items:stretch;
  padding:clamp(34px,4vw,70px);
  background:
    linear-gradient(135deg,rgba(255,255,255,.97),rgba(242,248,255,.94)),
    radial-gradient(circle at 86% 16%,rgba(28,126,214,.18),transparent 36%),
    linear-gradient(120deg,#ffffff 0%,#eef6ff 100%);
}

body.page-products .equipment-home-hero::before{
  content:none;
}

body.page-products .equipment-home-copy,
body.page-products .equipment-home-stat{
  position:relative;
  z-index:1;
}

body.page-products .equipment-home-copy span,
body.page-products .equipment-section-head span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  background:#eaf5ff;
  color:#0f66bb;
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
}

body.page-products .equipment-home-copy h2{
  margin:22px 0 20px;
  color:#102d4c;
  font-size:clamp(34px,3.45vw,58px);
  line-height:1.12;
  letter-spacing:-2.2px;
  font-weight:950;
}

body.page-products .equipment-home-copy p{
  max-width:760px;
  margin:0;
  color:#4d6179;
  font-size:17px;
  line-height:1.88;
  word-break:keep-all;
}

body.page-products .equipment-home-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px;
}

body.page-products .equipment-home-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border:1px solid #0f66bb;
  background:#0f66bb;
  color:#fff;
  font-size:15px;
  font-weight:950;
  text-decoration:none;
}

body.page-products .equipment-home-actions a + a{
  background:#fff;
  color:#0f66bb;
}

body.page-products .equipment-home-stat{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-self:center;
}

body.page-products .equipment-home-stat div{
  min-height:106px;
  padding:24px;
  border:1px solid #d4e5f7;
  background:rgba(255,255,255,.86);
  box-shadow:0 14px 30px rgba(15,64,120,.08);
}

body.page-products .equipment-home-stat strong{
  display:block;
  margin-bottom:10px;
  color:#0f66bb;
  font-size:34px;
  line-height:1;
  font-weight:950;
  letter-spacing:-1px;
}

body.page-products .equipment-home-stat span{
  display:block;
  color:#263f5c;
  font-size:17px;
  line-height:1.45;
  font-weight:850;
  word-break:keep-all;
}

body.page-products .equipment-home-section{
  padding:clamp(30px,3.4vw,56px);
}

body.page-products .equipment-section-head{
  max-width:760px;
  margin:0 auto 30px;
  text-align:center;
}

body.page-products .equipment-section-head.is-left{
  margin-left:0;
  text-align:left;
}

body.page-products .equipment-section-head h2{
  margin:14px 0 12px;
  color:#102d4c;
  font-size:clamp(28px,2.4vw,42px);
  line-height:1.18;
  letter-spacing:-1.4px;
  font-weight:950;
}

body.page-products .equipment-section-head p{
  margin:0;
  color:#5c6e82;
  font-size:16px;
  line-height:1.75;
  word-break:keep-all;
}

body.page-products .equipment-home-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:18px;
}

body.page-products .equipment-home-card{
  position:relative;
  display:flex;
  flex-direction:column;
  grid-column:span 2;
  min-height:430px;
  overflow:hidden;
  border:1px solid #cfdeef;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:0 14px 34px rgba(15,35,67,.07);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.page-products .equipment-home-card:nth-child(1),
body.page-products .equipment-home-card:nth-child(2){
  grid-column:span 3;
}

body.page-products .equipment-home-card:hover{
  transform:translateY(-4px);
  border-color:#8dbce9;
  box-shadow:0 20px 46px rgba(15,73,130,.14);
}

body.page-products .equipment-card-image{
  display:block;
  height:220px;
  overflow:hidden;
  background:#eef5fb;
  border-bottom:1px solid #dbe8f5;
}

body.page-products .equipment-card-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.01);
  transition:transform .28s ease;
}

body.page-products .equipment-home-card:hover .equipment-card-image img{
  transform:scale(1.055);
}

body.page-products .equipment-card-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:24px;
}

body.page-products .equipment-card-body small{
  color:#0f66bb;
  font-size:11px;
  font-weight:950;
  letter-spacing:.13em;
}

body.page-products .equipment-card-body strong{
  display:flex;
  gap:10px;
  align-items:baseline;
  margin:12px 0 10px;
  color:#102d4c;
  font-size:25px;
  line-height:1.25;
  letter-spacing:-.9px;
  font-weight:950;
}

body.page-products .equipment-card-body strong em{
  color:#0f66bb;
  font-size:15px;
  font-style:normal;
  letter-spacing:0;
}

body.page-products .equipment-card-body > span{
  color:#52677f;
  font-size:15px;
  line-height:1.72;
  word-break:keep-all;
}

body.page-products .equipment-card-body i{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:18px 0 22px;
  font-style:normal;
}

body.page-products .equipment-card-body i b{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  background:#f0f6fd;
  color:#325a85;
  font-size:12px;
  font-weight:850;
}

body.page-products .equipment-card-body u{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  margin-top:auto;
  border:1px solid #c9dced;
  color:#0f66bb;
  text-decoration:none;
  font-size:14px;
  font-weight:950;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}

body.page-products .equipment-home-card:hover .equipment-card-body u{
  border-color:#0f66bb;
  background:#0f66bb;
  color:#fff;
}

body.page-products .equipment-flow-section{
  background:linear-gradient(135deg,#102d4c 0%,#164b78 100%);
  border-color:#164b78;
}

body.page-products .equipment-flow-section .equipment-section-head span{
  background:rgba(255,255,255,.12);
  color:#bfe0ff;
}

body.page-products .equipment-flow-section .equipment-section-head h2{
  color:#fff;
}

body.page-products .equipment-flow-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:rgba(255,255,255,.22);
}

body.page-products .equipment-flow-list div{
  min-height:190px;
  padding:24px 20px;
  background:rgba(255,255,255,.08);
}

body.page-products .equipment-flow-list em{
  display:block;
  margin-bottom:16px;
  color:#8fd0ff;
  font-style:normal;
  font-size:13px;
  font-weight:950;
  letter-spacing:.08em;
}

body.page-products .equipment-flow-list strong{
  display:block;
  margin-bottom:10px;
  color:#fff;
  font-size:20px;
  line-height:1.35;
  font-weight:950;
  letter-spacing:-.7px;
}

body.page-products .equipment-flow-list span{
  display:block;
  color:#d8e8f8;
  font-size:14px;
  line-height:1.75;
  word-break:keep-all;
}

@media (max-width:1200px){
  body.page-products .equipment-home-hero{
    grid-template-columns:1fr;
  }
  body.page-products .equipment-home-stat{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  body.page-products .equipment-home-card,
  body.page-products .equipment-home-card:nth-child(1),
  body.page-products .equipment-home-card:nth-child(2){
    grid-column:span 3;
  }
  body.page-products .equipment-flow-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:768px){
  body.page-products .equipment-home-hero,
  body.page-products .equipment-home-section{
    margin-bottom:18px;
  }
  body.page-products .equipment-home-hero,
  body.page-products .equipment-home-section{
    padding:26px 20px;
  }
  body.page-products .equipment-home-copy h2{
    font-size:31px;
    letter-spacing:-1.4px;
  }
  body.page-products .equipment-home-copy p{
    font-size:15px;
    line-height:1.78;
  }
  body.page-products .equipment-home-actions a{
    width:100%;
  }
  body.page-products .equipment-home-stat,
  body.page-products .equipment-home-grid,
  body.page-products .equipment-flow-list{
    grid-template-columns:1fr;
  }
  body.page-products .equipment-home-card,
  body.page-products .equipment-home-card:nth-child(1),
  body.page-products .equipment-home-card:nth-child(2){
    grid-column:auto;
    min-height:auto;
  }
  body.page-products .equipment-card-image{
    height:190px;
  }
  body.page-products .equipment-card-body{
    padding:22px;
  }
  body.page-products .equipment-card-body strong{
    font-size:23px;
  }
  body.page-products .equipment-flow-list{
    gap:10px;
    background:transparent;
  }
  body.page-products .equipment-flow-list div{
    min-height:auto;
    border:1px solid rgba(255,255,255,.18);
  }
}


/* =========================================================
   포장자동화라인 페이지 전용 디자인
   - /products.php?category=line
   - 설비소개 누적 패치 기준 위에 추가
========================================================= */
.line-automation-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  gap:clamp(28px,3.2vw,64px);
  align-items:stretch;
  margin:0 0 28px;
  padding:clamp(42px,4.6vw,76px);
  overflow:hidden;
  border:1px solid rgba(186,211,238,.86);
  border-radius:0;
  background:
    radial-gradient(circle at 78% 18%,rgba(56,145,225,.22),transparent 34%),
    linear-gradient(135deg,#f7fbff 0%,#eef6ff 42%,#ffffff 100%);
  box-shadow:0 24px 70px rgba(15,35,67,.10);
}
.line-automation-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(15,102,187,.06) 1px,transparent 1px),
    linear-gradient(0deg,rgba(15,102,187,.05) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.62;
  pointer-events:none;
}
.line-automation-hero::after{
  content:"";
  position:absolute;
  right:-9%;
  bottom:-24%;
  width:44%;
  aspect-ratio:1/1;
  border:1px solid rgba(15,102,187,.18);
  background:rgba(255,255,255,.38);
  transform:rotate(18deg);
  pointer-events:none;
}
.line-automation-copy,
.line-automation-panel{
  position:relative;
  z-index:1;
}
.line-automation-copy span,
.line-filter-intro span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  margin-bottom:18px;
  background:#0f66bb;
  color:#fff;
  font-size:12px;
  font-weight:950;
  letter-spacing:.16em;
}
.line-automation-copy h2{
  margin:0;
  color:#0b2440;
  font-size:clamp(34px,3.15vw,58px);
  line-height:1.16;
  letter-spacing:-2.4px;
}
.line-automation-copy p{
  max-width:760px;
  margin:24px 0 0;
  color:#52687f;
  font-size:17px;
  font-weight:700;
  line-height:1.9;
  letter-spacing:-.45px;
}
.line-automation-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px;
}
.line-automation-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 22px;
  border:1px solid #0f66bb;
  background:#0f66bb;
  color:#fff;
  font-size:15px;
  font-weight:950;
  letter-spacing:-.35px;
}
.line-automation-actions a+a{
  background:#fff;
  color:#0f66bb;
}
.line-automation-panel{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:340px;
  padding:34px;
  border:1px solid rgba(195,218,241,.95);
  background:rgba(255,255,255,.82);
  box-shadow:0 20px 54px rgba(15,35,67,.10);
  backdrop-filter:blur(8px);
}
.line-panel-top strong{
  display:block;
  color:#102d4c;
  font-size:28px;
  font-weight:950;
  letter-spacing:-1px;
}
.line-panel-top span{
  display:block;
  margin-top:8px;
  color:#64748b;
  font-size:14px;
  font-weight:800;
}
.line-flow-visual{
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items:center;
  gap:8px;
  margin-top:36px;
}
.line-flow-visual div{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:94px;
  padding:12px 8px;
  border:1px solid #d5e7f7;
  background:linear-gradient(180deg,#fff,#f4f9ff);
}
.line-flow-visual b{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-bottom:9px;
  background:#e6f3ff;
  color:#0f66bb;
  font-size:12px;
  font-weight:950;
}
.line-flow-visual span{
  color:#102d4c;
  font-size:14px;
  font-weight:950;
  letter-spacing:-.4px;
}
.line-flow-visual i{
  display:block;
  height:2px;
  background:#7db8ee;
  position:relative;
}
.line-flow-visual i::after{
  content:"";
  position:absolute;
  right:-1px;
  top:50%;
  width:7px;
  height:7px;
  border-top:2px solid #7db8ee;
  border-right:2px solid #7db8ee;
  transform:translateY(-50%) rotate(45deg);
}
.line-automation-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:0 0 28px;
}
.line-automation-summary div{
  min-height:178px;
  padding:26px;
  border:1px solid #d9e8f7;
  background:#fff;
  box-shadow:0 12px 30px rgba(15,35,67,.065);
}
.line-automation-summary em{
  display:block;
  margin-bottom:18px;
  color:#0f66bb;
  font-size:13px;
  font-style:normal;
  font-weight:950;
  letter-spacing:.12em;
}
.line-automation-summary strong{
  display:block;
  color:#102d4c;
  font-size:22px;
  font-weight:950;
  letter-spacing:-.8px;
}
.line-automation-summary span{
  display:block;
  margin-top:10px;
  color:#65778b;
  font-size:14px;
  font-weight:700;
  line-height:1.72;
}
.line-filter-intro{
  margin:0 0 18px;
  padding:34px 38px;
  border-left:6px solid #0f66bb;
  background:linear-gradient(90deg,#f2f8ff 0%,#fff 100%);
  border-top:1px solid #d9e8f7;
  border-right:1px solid #d9e8f7;
  border-bottom:1px solid #d9e8f7;
}
.line-filter-intro h2{
  margin:0;
  color:#102d4c;
  font-size:32px;
  line-height:1.25;
  letter-spacing:-1.3px;
}
.line-filter-intro p{
  margin:12px 0 0;
  color:#66788c;
  font-size:16px;
  font-weight:700;
  line-height:1.75;
}
@media (max-width:1180px){
  .line-automation-hero{grid-template-columns:1fr;padding:42px}
  .line-automation-panel{min-height:auto}
  .line-automation-summary{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .line-automation-hero{padding:30px 22px}
  .line-automation-copy h2{font-size:32px;letter-spacing:-1.4px}
  .line-automation-copy p{font-size:15px}
  .line-automation-actions a{width:100%}
  .line-automation-panel{padding:22px}
  .line-flow-visual{grid-template-columns:1fr;gap:8px}
  .line-flow-visual i{width:2px;height:18px;margin:0 auto}
  .line-flow-visual i::after{right:50%;top:auto;bottom:-1px;transform:translateX(50%) rotate(135deg)}
  .line-automation-summary{grid-template-columns:1fr}
  .line-filter-intro{padding:26px 22px}
  .line-filter-intro h2{font-size:26px}
}

/* =========================================================
   [2026-05-11] LINE FILTER PRIMARY/SECONDARY RESTORE PATCH
   파일명: /assets/css/product.css
   목적:
   - 포장자동화라인의 '원물 기준 / 공정 기준' 2단 필터 구조 복구
   - 선택한 기준은 1차 필터, 선택하지 않은 기준은 2차 필터로 항상 표시
   - 버튼 디자인을 흰색/블루 기반으로 정돈하고 가독성 강화
========================================================= */
.product-control-panel[data-category="line"]{
  border:1px solid #d6e3f1;
  background:#fff;
  box-shadow:0 18px 46px rgba(15,45,80,.07);
}

.product-control-panel[data-category="line"] .filter-mode-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border-bottom:1px solid #d6e3f1;
  background:#f4f8fc;
}

.product-control-panel[data-category="line"] .filter-mode-tabs button{
  position:relative;
  flex:none;
  min-height:64px;
  padding:12px 22px 12px 58px;
  border:0;
  border-right:1px solid #d6e3f1;
  background:#f4f8fc;
  color:#26384d;
  text-align:left;
  font-size:17px;
  font-weight:950;
  letter-spacing:-.55px;
  box-shadow:none;
}

.product-control-panel[data-category="line"] .filter-mode-tabs button:last-child{
  border-right:0;
}

.product-control-panel[data-category="line"] .filter-mode-tabs button::before{
  content:"2차";
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:1px solid #c5d6e8;
  background:#fff;
  color:#66788c;
  font-size:12px;
  font-weight:950;
  letter-spacing:-.2px;
}

.product-control-panel[data-category="line"] .filter-mode-tabs button::after{
  display:none;
}

.product-control-panel[data-category="line"] .filter-mode-tabs button:hover{
  transform:none;
  background:#eaf4ff;
  color:#0f66bb;
}

.product-control-panel[data-category="line"] .filter-mode-tabs button.active{
  background:#0f66bb;
  color:#fff;
  box-shadow:none;
}

.product-control-panel[data-category="line"] .filter-mode-tabs button.active::before{
  content:"1차";
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.16);
  color:#fff;
}

.product-control-panel[data-category="line"] .filter-groups{
  display:grid;
  gap:18px;
  padding:24px;
}

.product-control-panel[data-category="line"] .filter-group{
  display:block !important;
  padding:22px 24px 24px;
  border:1px solid #d8e5f2;
  background:#fff;
  box-shadow:none;
}

.product-control-panel[data-category="line"] .filter-group--primary{
  order:1;
  border-color:#0f66bb;
  background:linear-gradient(180deg,#ffffff 0%,#f4f9ff 100%);
  box-shadow:0 12px 28px rgba(15,102,187,.09);
}

.product-control-panel[data-category="line"] .filter-group--secondary{
  order:2;
  border-color:#d8e5f2;
  background:#fbfdff;
}

.product-control-panel[data-category="line"] .filter-group h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  padding:0 0 14px;
  border-bottom:1px solid #d8e5f2;
  color:#0b2545;
  font-size:20px;
  font-weight:950;
  letter-spacing:-.7px;
}

.product-control-panel[data-category="line"] .filter-step-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  height:30px;
  padding:0 10px;
  background:#eef5fc;
  color:#0f66bb;
  font-size:12px;
  font-weight:950;
  letter-spacing:-.2px;
}

.product-control-panel[data-category="line"] .filter-group--primary .filter-step-badge{
  background:#0f66bb;
  color:#fff;
}

.product-control-panel[data-category="line"] .filter-chip-all-row{
  margin-bottom:12px;
}

.product-control-panel[data-category="line"] .filter-chip-row,
.product-control-panel[data-category="line"] .filter-chip-row--details{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.product-control-panel[data-category="line"] .filter-chip{
  min-width:0;
  min-height:48px;
  padding:0 14px;
  border:1px solid #cfdbe8;
  background:#fff;
  color:#25364c;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.35px;
  box-shadow:none;
}

.product-control-panel[data-category="line"] .filter-chip:hover{
  transform:none;
  border-color:#0f66bb;
  background:#f3f8fd;
  color:#0f66bb;
}

.product-control-panel[data-category="line"] .filter-chip.active{
  border-color:#0f66bb;
  background:#0f66bb;
  color:#fff;
  box-shadow:none;
}

.product-control-panel[data-category="line"] .filter-chip-all-row .filter-chip{
  width:auto;
  min-width:190px;
  min-height:50px;
  background:#f6f9fc;
}

.product-control-panel[data-category="line"] .filter-chip-all-row .filter-chip.active{
  background:#0f66bb;
}

.product-control-panel[data-category="line"] .filter-result-count{
  border-top:1px solid #d8e5f2;
  background:#f6f9fc;
}

@media (max-width:900px){
  .product-control-panel[data-category="line"] .filter-mode-tabs{
    grid-template-columns:1fr;
  }
  .product-control-panel[data-category="line"] .filter-mode-tabs button{
    border-right:0;
    border-bottom:1px solid #d6e3f1;
  }
  .product-control-panel[data-category="line"] .filter-mode-tabs button:last-child{
    border-bottom:0;
  }
  .product-control-panel[data-category="line"] .filter-chip-row,
  .product-control-panel[data-category="line"] .filter-chip-row--details{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:520px){
  .product-control-panel[data-category="line"] .filter-groups{
    padding:16px;
    gap:14px;
  }
  .product-control-panel[data-category="line"] .filter-group{
    padding:18px 16px;
  }
  .product-control-panel[data-category="line"] .filter-group h3{
    align-items:flex-start;
    flex-direction:column;
    font-size:18px;
  }
  .product-control-panel[data-category="line"] .filter-chip-row,
  .product-control-panel[data-category="line"] .filter-chip-row--details{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .product-control-panel[data-category="line"] .filter-chip{
    min-height:44px;
    font-size:13px;
  }
  .product-control-panel[data-category="line"] .filter-chip-all-row .filter-chip{
    width:100%;
    min-width:0;
  }
}

/* =========================================================
   [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:950;
  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;
  display:flex;
  flex-direction:column;
  aspect-ratio:auto;
  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{
  transform:translateY(-4px);
  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;
  flex:0 0 auto;
  height:auto;
  aspect-ratio:4/3;
  padding:16px;
  border-bottom:1px solid #e2edf7;
  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;
  width:100%;
  height:100%;
  object-fit:contain;
  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;
  line-height:1.34;
  font-weight:950;
  letter-spacing:-.72px;
  word-break:keep-all;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-grid.view-many .product-body p,
.product-grid.view-large .product-body p{
  margin:0;
  color:#607386;
  font-size:14px;
  line-height:1.65;
  word-break:keep-all;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -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:950;
  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:950;
}
.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{
    grid-template-columns:1fr;
  }
}

@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;
    padding:10px;
    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-05-11] 자동포장기 페이지 디자인 PATCH
   파일명: /assets/css/product.css
   대상: /products.php?category=auto
   목적: 자동포장기 페이지 상단 히어로 / 검토 기준 / 필터 안내 디자인 정리
========================================================= */
.auto-packer-hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:28px;
  align-items:stretch;
  margin:0 0 28px;
  padding:42px;
  border:1px solid #cfe2f5;
  border-radius:0;
  background:
    linear-gradient(135deg,rgba(6,39,72,.96) 0%,rgba(11,83,143,.92) 58%,rgba(15,102,187,.88) 100%);
  color:#fff;
  overflow:hidden;
  position:relative;
  box-shadow:0 22px 56px rgba(8,45,86,.18);
}
.auto-packer-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:46px 46px;
  opacity:.22;
  pointer-events:none;
}
.auto-packer-hero::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-110px;
  width:360px;
  height:360px;
  border:1px solid rgba(255,255,255,.22);
  background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.auto-packer-copy,
.auto-packer-panel{
  position:relative;
  z-index:1;
}
.auto-packer-copy span,
.auto-filter-intro span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 12px;
  border-left:4px solid #7cc8ff;
  background:rgba(255,255,255,.1);
  color:#dff3ff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
}
.auto-packer-copy h2{
  margin:22px 0 18px;
  color:#fff;
  font-size:42px;
  line-height:1.24;
  font-weight:900;
  letter-spacing:-1.8px;
  word-break:keep-all;
}
.auto-packer-copy p{
  max-width:720px;
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:17px;
  line-height:1.86;
  word-break:keep-all;
}
.auto-packer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.auto-packer-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:148px;
  height:48px;
  padding:0 22px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:15px;
  font-weight:900;
  text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.auto-packer-actions a:first-child{
  border-color:#fff;
  background:#fff;
  color:#0f4d86;
}
.auto-packer-actions a:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.2);
}
.auto-packer-actions a:first-child:hover{
  background:#eaf7ff;
}
.auto-packer-panel{
  align-self:center;
  padding:28px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.auto-panel-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.auto-panel-top strong{
  color:#fff;
  font-size:24px;
  font-weight:900;
  letter-spacing:-.5px;
}
.auto-panel-top span{
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:800;
  text-align:right;
}
.auto-flow-visual{
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
  gap:8px;
  align-items:center;
  margin-top:22px;
}
.auto-flow-visual div{
  min-height:94px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
}
.auto-flow-visual b{
  color:#9be0ff;
  font-size:14px;
  font-weight:900;
}
.auto-flow-visual span{
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.4px;
  text-align:center;
}
.auto-flow-visual i{
  height:1px;
  background:rgba(255,255,255,.4);
  position:relative;
}
.auto-flow-visual i::after{
  content:"";
  position:absolute;
  right:-1px;
  top:50%;
  width:7px;
  height:7px;
  border-top:1px solid rgba(255,255,255,.55);
  border-right:1px solid rgba(255,255,255,.55);
  transform:translateY(-50%) rotate(45deg);
}
.auto-packer-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:0 0 28px;
}
.auto-packer-summary div{
  min-height:178px;
  padding:24px 22px;
  border:1px solid #d7e7f7;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,54,99,.06);
}
.auto-packer-summary em{
  display:block;
  margin-bottom:16px;
  color:#0f66bb;
  font-size:14px;
  font-weight:900;
  font-style:normal;
  letter-spacing:.08em;
}
.auto-packer-summary strong{
  display:block;
  margin-bottom:10px;
  color:#0b2d4d;
  font-size:21px;
  font-weight:900;
  letter-spacing:-.7px;
}
.auto-packer-summary span{
  display:block;
  color:#53677d;
  font-size:15px;
  line-height:1.72;
  word-break:keep-all;
}
.auto-filter-intro{
  margin:0 0 20px;
  padding:28px 30px;
  border-left:5px solid #0f66bb;
  border-top:1px solid #d7e7f7;
  border-right:1px solid #d7e7f7;
  border-bottom:1px solid #d7e7f7;
  background:linear-gradient(90deg,#f5fbff 0%,#fff 100%);
}
.auto-filter-intro span{
  min-height:auto;
  padding:0;
  border-left:0;
  background:transparent;
  color:#0f66bb;
  font-size:12px;
}
.auto-filter-intro h2{
  margin:10px 0 8px;
  color:#0b2d4d;
  font-size:30px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:-1px;
}
.auto-filter-intro p{
  margin:0;
  color:#52677d;
  font-size:16px;
  line-height:1.75;
  word-break:keep-all;
}
body[data-page-key="auto"] .product-list-head{
  margin-top:32px;
}

@media(max-width:1100px){
  .auto-packer-hero{grid-template-columns:1fr;padding:34px;}
  .auto-packer-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:768px){
  .auto-packer-hero{padding:28px 22px;gap:22px;}
  .auto-packer-copy h2{font-size:30px;letter-spacing:-1.1px;}
  .auto-packer-copy p{font-size:15px;line-height:1.78;}
  .auto-packer-actions a{width:100%;}
  .auto-packer-panel{padding:20px 16px;}
  .auto-panel-top{display:block;}
  .auto-panel-top span{display:block;margin-top:6px;text-align:left;}
  .auto-flow-visual{grid-template-columns:1fr;gap:10px;}
  .auto-flow-visual i{width:1px;height:18px;margin:0 auto;}
  .auto-flow-visual i::after{right:50%;top:auto;bottom:-1px;transform:translateX(50%) rotate(135deg);}
  .auto-flow-visual div{min-height:66px;}
  .auto-packer-summary{grid-template-columns:1fr;}
  .auto-packer-summary div{min-height:auto;padding:22px 20px;}
  .auto-filter-intro{padding:24px 20px;}
  .auto-filter-intro h2{font-size:24px;}
}

/* =========================================================
   [PATCH] 반자동장비 / 날인기 / 소모품 카테고리 상단 디자인
   - products.php?category=semi_printer
   - products.php?category=printer
   - products.php?category=consumable
========================================================= */
.category-showcase-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:34px;
  align-items:stretch;
  margin:0 0 28px;
  padding:46px;
  overflow:hidden;
  background:linear-gradient(135deg,#07172a 0%,#0f2f53 48%,#f6fbff 49%,#ffffff 100%);
  border:1px solid #d8e8f6;
  box-shadow:0 22px 55px rgba(8,34,66,.12);
}
.category-showcase-hero::before{
  content:"";
  position:absolute;
  inset:-120px auto auto -130px;
  width:360px;
  height:360px;
  border-radius:999px;
  background:rgba(45,154,245,.2);
  filter:blur(8px);
}
.category-showcase-hero::after{
  content:"";
  position:absolute;
  inset:auto -90px -160px auto;
  width:420px;
  height:420px;
  border-radius:999px;
  background:rgba(15,102,187,.1);
}
.category-showcase-hero--semi{background:linear-gradient(135deg,#07172a 0%,#15385c 48%,#f7fbff 49%,#ffffff 100%);}
.category-showcase-hero--printer{background:linear-gradient(135deg,#091827 0%,#213347 48%,#f7fbff 49%,#ffffff 100%);}
.category-showcase-hero--consumable{background:linear-gradient(135deg,#082332 0%,#10445c 48%,#f7fbff 49%,#ffffff 100%);}
.category-showcase-copy,
.category-showcase-panel{position:relative;z-index:1;}
.category-showcase-copy span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#bfe3ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}
.category-showcase-copy h2{
  margin:18px 0 16px;
  color:#fff;
  font-size:42px;
  line-height:1.18;
  letter-spacing:-1.8px;
}
.category-showcase-copy p{
  max-width:680px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.9;
  font-weight:600;
  word-break:keep-all;
}
.category-showcase-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.category-showcase-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 22px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.category-showcase-actions a:first-child{
  background:#1485e8;
  border-color:#1485e8;
  box-shadow:0 12px 26px rgba(20,133,232,.28);
}
.category-showcase-actions a:hover{transform:translateY(-2px);background:rgba(255,255,255,.16);}
.category-showcase-actions a:first-child:hover{background:#0f66bb;border-color:#0f66bb;}
.category-showcase-panel{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:280px;
  padding:28px;
  background:rgba(255,255,255,.92);
  border:1px solid #dcebf8;
  box-shadow:0 20px 42px rgba(12,45,82,.12);
}
.category-panel-top strong{
  display:block;
  color:#102d4c;
  font-size:24px;
  font-weight:950;
  letter-spacing:-.8px;
}
.category-panel-top span{
  display:block;
  margin-top:8px;
  color:#66788c;
  font-size:14px;
  font-weight:800;
}
.category-flow-visual{
  display:grid;
  grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr;
  align-items:center;
  gap:8px;
  margin-top:28px;
}
.category-flow-visual div{
  min-height:92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#f2f7fc;
  border:1px solid #d9e8f6;
}
.category-flow-visual b{
  color:#1485e8;
  font-size:12px;
  font-weight:950;
}
.category-flow-visual span{
  margin-top:8px;
  color:#102d4c;
  font-size:14px;
  font-weight:950;
  letter-spacing:-.4px;
}
.category-flow-visual i{
  display:block;
  height:2px;
  background:#9dc8ed;
  position:relative;
}
.category-flow-visual i::after{
  content:"";
  position:absolute;
  right:-1px;
  top:50%;
  width:7px;
  height:7px;
  border-top:2px solid #9dc8ed;
  border-right:2px solid #9dc8ed;
  transform:translateY(-50%) rotate(45deg);
}
.category-showcase-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:0 0 30px;
}
.category-showcase-summary div{
  min-height:170px;
  padding:24px 22px;
  background:#fff;
  border:1px solid #dbe9f6;
  box-shadow:0 12px 28px rgba(15,35,67,.06);
}
.category-showcase-summary em{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  background:#eaf5ff;
  color:#0f66bb;
  font-style:normal;
  font-size:13px;
  font-weight:950;
}
.category-showcase-summary strong{
  display:block;
  margin-top:16px;
  color:#102d4c;
  font-size:19px;
  font-weight:950;
  letter-spacing:-.7px;
}
.category-showcase-summary span{
  display:block;
  margin-top:9px;
  color:#66788c;
  font-size:14px;
  line-height:1.7;
  font-weight:600;
  word-break:keep-all;
}
.category-filter-intro{
  margin:0 0 18px;
  padding:28px 30px;
  background:#f6faff;
  border:1px solid #dcebf8;
}
.category-filter-intro span{
  display:inline-flex;
  margin-bottom:8px;
  color:#0f66bb;
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
}
.category-filter-intro h2{
  margin:0;
  color:#102d4c;
  font-size:28px;
  line-height:1.28;
  letter-spacing:-1.2px;
}
.category-filter-intro p{
  margin:10px 0 0;
  color:#607086;
  font-size:15px;
  line-height:1.75;
  font-weight:700;
}
.product-control-panel[data-category="semi_printer"] .filter-mode-tabs,
.product-control-panel[data-category="printer"] .filter-mode-tabs,
.product-control-panel[data-category="consumable"] .filter-mode-tabs{
  gap:12px;
}
.product-control-panel[data-category="semi_printer"] .filter-mode-tabs button,
.product-control-panel[data-category="printer"] .filter-mode-tabs button,
.product-control-panel[data-category="consumable"] .filter-mode-tabs button{
  min-height:58px;
  background:#fff;
  border:1px solid #cfe1f4;
  color:#102d4c;
  box-shadow:0 10px 22px rgba(15,65,120,.06);
}
.product-control-panel[data-category="semi_printer"] .filter-mode-tabs button.active,
.product-control-panel[data-category="printer"] .filter-mode-tabs button.active,
.product-control-panel[data-category="consumable"] .filter-mode-tabs button.active{
  background:#0f66bb;
  border-color:#0f66bb;
  color:#fff;
  box-shadow:0 16px 30px rgba(15,102,187,.22);
}
@media (max-width:1024px){
  .category-showcase-hero{grid-template-columns:1fr;padding:34px;}
  .category-showcase-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
  .category-showcase-panel{min-height:auto;}
}
@media (max-width:640px){
  .category-showcase-hero{padding:28px 22px;gap:22px;background:#0c2745;}
  .category-showcase-copy h2{font-size:30px;letter-spacing:-1.1px;}
  .category-showcase-copy p{font-size:15px;line-height:1.78;}
  .category-showcase-actions a{width:100%;}
  .category-showcase-panel{padding:20px 16px;}
  .category-flow-visual{grid-template-columns:1fr;gap:8px;}
  .category-flow-visual i{height:18px;width:2px;margin:0 auto;}
  .category-flow-visual i::after{right:50%;top:auto;bottom:-1px;transform:translateX(50%) rotate(135deg);}
  .category-showcase-summary{grid-template-columns:1fr;}
  .category-showcase-summary div{min-height:auto;padding:22px 20px;}
  .category-filter-intro{padding:24px 20px;}
  .category-filter-intro h2{font-size:24px;}
}

/* ===== [CSS 통합] 제품 CSS 통합: product-page/filter/responsive → product.css ===== */

/* ---- merged from /assets/css/product-page.css ---- */
/* =========================================================
   뉴트리바디 스타일 정리형 디자인
   - 기존 디자인 유지
   - 과한 SaaS/UI 느낌 제거
   - 약한 포인트만 추가
========================================================= */

.case-section-card,
.product-section-card,
.case-info-block{
    background:#fff;
    border:1px solid #dbe6f2;
    border-radius:0;
    box-shadow:none;
    overflow:hidden;
}

/* 상단 아주 얇은 포인트 */
.case-section-card::before,
.product-section-card::before,
.case-info-block::before{
    content:"";
    display:block;
    width:100%;
    height:3px;
    background:#2b78d0;
    opacity:.85;
}

/* 헤더 영역 */
.case-section-head,
.product-section-head,
.case-block-head{
    display:flex;
    align-items:center;
    gap:14px;
    padding-bottom:14px;
    margin-bottom:22px;
    border-bottom:1px solid #e8eef5;
    position:relative;
}

/* 제목 아래 짧은 포인트 라인 */
.case-section-head::after,
.product-section-head::after,
.case-block-head::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:58px;
    height:2px;
    background:#2b78d0;
}

/* 번호 배지 */
.case-section-num,
.product-section-num,
.case-block-head span{
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:0;
    background:#1569c7;
    color:#fff;
    font-size:14px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* 제목 */
.case-section-title,
.product-section-title,
.case-block-head h3{
    margin:0;
    font-size:21px;
    font-weight:800;
    color:#123458;
    letter-spacing:-0.03em;
}

/* 본문 */
.case-section-card p,
.product-section-card p,
.case-info-block p{
    font-size:16px;
    line-height:1.9;
    color:#41556b;
    word-break:keep-all;
}

/* 표 */
.case-section-card table,
.product-section-card table{
    width:100%;
    border-collapse:collapse;
    margin-top:12px;
}

.case-section-card table td,
.product-section-card table td{
    border:1px solid #dfe7f0;
    padding:12px 14px;
    font-size:15px;
}

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

    .case-section-card,
    .product-section-card,
    .case-info-block{
        border-radius:0;
    }

    .case-section-title,
    .product-section-title,
    .case-block-head h3{
        font-size:19px;
    }

    .case-section-num,
    .product-section-num,
    .case-block-head span{
        width:38px;
        height:38px;
        min-width:38px;
        font-size:13px;
    }

    .case-section-card p,
    .product-section-card p,
    .case-info-block p{
        font-size:14.5px;
        line-height:1.82;
    }
}

/* ---- merged from /assets/css/product-filter-separator.css ---- */
/* =========================================================
   파일명: /assets/css/product-filter-separator.css
   역할: 제품 필터 대분류/중분류 구분선
   기준: 기존 product.css 덮어쓰기 없이 추가 로드
========================================================= */

/* 대분류 전체 버튼과 중분류 버튼 사이 구분선 */
.filter-group .filter-chip-row--details{
  position:relative;
  margin-top:22px;
  padding-top:24px;
}

.filter-group .filter-chip-row--details::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(15,102,187,.12) 0%,
    rgba(15,102,187,.38) 50%,
    rgba(15,102,187,.12) 100%
  );
}

.filter-group .filter-chip-row--details::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:86px;
  height:2px;
  border-radius:0;
  background:#0f66bb;
}

/* 전체 버튼과 구분선 사이 여백 정리 */
.filter-chip-all-row{
  margin-bottom:0;
}

@media(max-width:768px){
  .filter-group .filter-chip-row--details{
    margin-top:18px;
    padding-top:20px;
  }

  .filter-group .filter-chip-row--details::after{
    width:58px;
  }
}

/* ---- merged from /assets/css/product-responsive.css ---- */
/* =========================================================
   파일명: /assets/css/product-responsive.css
   역할: 제품소개 페이지 전용 화면 적응형(Fluid Responsive) 보정
   기준:
   - 예전에 제품소개 페이지만 좁게 고정하던 width:min(1760px/1840px, ...) 보정 제거 후 적용
   - 다른 서브페이지처럼 넓은 PC/울트라와이드 화면에서 본문이 화면 폭에 맞게 확장
   - 모바일은 기존 mobile.css 흐름 유지
========================================================= */

@media (min-width: 769px){
  body[data-sidebar-type="products"] .container.main-layout.has-sidebar{
    width: calc(100% - clamp(48px, 5vw, 120px));
    max-width: none;
    grid-template-columns: clamp(180px, 11vw, 260px) minmax(0, 1fr);
    column-gap: clamp(24px, 2.4vw, 56px);
    padding-top: clamp(28px, 2.2vw, 48px);
  }

  body[data-sidebar-type="products"] .layout-content{
    width: 100%;
    min-width: 0;
  }

  body[data-sidebar-type="products"] .content-card,
  body[data-sidebar-type="products"] .product-control-panel,
  body[data-sidebar-type="products"] .product-view-panel{
    width: 100%;
    max-width: none;
  }

  body[data-sidebar-type="products"] .page-intro-card.product-intro-card,
  body[data-sidebar-type="products"] .product-intro-card{
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    gap: clamp(28px, 3vw, 64px);
    padding: clamp(22px, 2.2vw, 38px);
  }

  body[data-sidebar-type="products"] .page-intro-text h2,
  body[data-sidebar-type="products"] .product-intro-card .page-intro-text h2{
    font-size: clamp(30px, 2.1vw, 46px);
  }

  body[data-sidebar-type="products"] .page-intro-text p,
  body[data-sidebar-type="products"] .product-intro-card .page-intro-text p{
    font-size: clamp(15px, .9vw, 18px);
  }

  body[data-sidebar-type="products"] .page-intro-image img,
  body[data-sidebar-type="products"] .product-intro-card .page-intro-image img{
    width: 100%;
    max-height: clamp(220px, 15vw, 360px);
    object-fit: contain;
  }

  body[data-sidebar-type="products"] .product-home-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 2vw, 44px);
  }

  body[data-sidebar-type="products"] .product-home-card,
  body[data-sidebar-type="products"] .product-home-body{
    min-height: clamp(260px, 18vw, 420px);
  }

  body[data-sidebar-type="products"] .product-home-body{
    padding: clamp(28px, 2.4vw, 52px);
  }

  body[data-sidebar-type="products"] .product-home-body strong{
    font-size: clamp(28px, 2vw, 44px);
  }

  body[data-sidebar-type="products"] .product-home-body span{
    max-width: min(620px, 80%);
    font-size: clamp(15px, .95vw, 19px);
  }

  body[data-sidebar-type="products"] .filter-chip-row--details{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 8vw, 190px), 1fr));
    gap: clamp(8px, .8vw, 14px);
  }

  body[data-sidebar-type="products"] .product-grid{
    grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 16vw, 340px), 1fr));
    gap: clamp(18px, 1.4vw, 32px);
  }

  body[data-sidebar-type="products"] .product-grid.view-large{
    grid-template-columns: repeat(auto-fit, minmax(clamp(320px, 24vw, 520px), 1fr));
    gap: clamp(22px, 1.7vw, 38px);
  }

  body[data-sidebar-type="products"] .product-list-head h2{
    font-size: clamp(28px, 1.8vw, 42px);
  }
}

@media (min-width: 1800px){
  body[data-sidebar-type="products"] .container.main-layout.has-sidebar{
    width: calc(100% - 120px);
  }
}

@media (min-width: 2400px){
  body[data-sidebar-type="products"] .container.main-layout.has-sidebar{
    width: calc(100% - 160px);
  }
}

@media (min-width: 769px) and (max-width: 1180px){
  body[data-sidebar-type="products"] .container.main-layout.has-sidebar{
    width: calc(100% - 28px);
    grid-template-columns: 210px minmax(0, 1fr);
    column-gap: 24px;
  }

  body[data-sidebar-type="products"] .page-intro-card.product-intro-card,
  body[data-sidebar-type="products"] .product-intro-card{
    grid-template-columns: 1fr;
  }

  body[data-sidebar-type="products"] .product-grid,
  body[data-sidebar-type="products"] .product-grid.view-large{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  body[data-sidebar-type="products"] .container.main-layout.has-sidebar{
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
  }

  body[data-sidebar-type="products"] .product-home-grid,
  body[data-sidebar-type="products"] .product-grid,
  body[data-sidebar-type="products"] .product-grid.view-large{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   [2026-05-12] 제품 카테고리 안내 멘트 영역
   - 포장자동화라인 / 자동포장기 / 반자동장비에서
     원물·공정·백 형태 선택 버튼을 제거하고 안내 문구로 대체
========================================================= */
.product-category-message{
  max-width:1180px;
  margin:28px auto 24px;
  padding:28px 32px;
  border:1px solid rgba(15, 23, 42, .08);
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  box-shadow:0 16px 42px rgba(15,23,42,.07);
}
.product-category-message span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  color:#2563eb;
}
.product-category-message h2{
  margin:0 0 10px;
  font-size:clamp(24px, 3vw, 34px);
  line-height:1.28;
  letter-spacing:-.04em;
  color:#0f172a;
}
.product-category-message p{
  max-width:880px;
  margin:0;
  font-size:16px;
  line-height:1.8;
  color:#475569;
  word-break:keep-all;
}
@media (max-width:768px){
  .product-category-message{
    margin:20px 16px 18px;
    padding:22px 20px;
    border-radius:20px;
  }
  .product-category-message h2{
    font-size:23px;
  }
  .product-category-message p{
    font-size:15px;
    line-height:1.75;
  }
}


/* =========================================================
   [PATCH] 포장자동화라인 LINE GUIDE 라벨 스타일 통일
   - AUTO PACKER GUIDE와 동일한 일반 텍스트형 라벨로 표시
   - 기존 .line-filter-intro span 파란 배경 badge 스타일을 이 영역에서만 해제
========================================================= */
.line-filter-intro.product-category-message span{
  display:inline-flex;
  align-items:center;
  min-height:auto;
  padding:0;
  margin:0 0 10px;
  border-left:0;
  background:transparent;
  color:#0f66bb;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

/* ===== [제품소개 홈 이미지 비율 공통 보정] ===== */
body.page-products .equipment-card-image{
  aspect-ratio:4/3;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f4f8fc;
}
body.page-products .equipment-card-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#f4f8fc;
  transform:none;
}
body.page-products .equipment-home-card:hover .equipment-card-image img{
  transform:scale(1.02);
}

/* =========================================================
   [PATCH] 제품 카테고리 상단 안내 섹션 간소화
   - 라인/자동포장기/반자동/날인 페이지에서 안내 패널 제거 후
     남은 핵심 Hero 영역이 빈 2열 레이아웃을 만들지 않도록 1열 고정
========================================================= */
.line-automation-hero--compact,
.auto-packer-hero--compact,
.category-showcase-hero--compact{
  grid-template-columns:1fr;
}

.line-automation-hero--compact .line-automation-copy,
.auto-packer-hero--compact .auto-packer-copy,
.category-showcase-hero--compact .category-showcase-copy{
  max-width:860px;
}

@media (max-width:768px){
  .line-automation-hero--compact,
  .auto-packer-hero--compact,
  .category-showcase-hero--compact{
    margin-bottom:18px;
  }
}

/* =========================================================
   [PATCH] 설비소개 카테고리 카드 PC/모바일 이미지 분기
   - PC: /images/category/line.webp 등 4:3 이미지
   - 모바일: /images/category/line-m.webp 등 모바일 전용 이미지가 있을 때만 <picture>로 사용
========================================================= */
body.page-products .equipment-card-image picture{
  display:block;
  width:100%;
  height:100%;
}
body.page-products .equipment-card-image picture img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

/* =========================================================
   [2026-05-13 v813] 설비소개 카드 이미지 2레이어 구조 정리
   - 파일명: /assets/css/product.css
   - 목적: 배경용(bg) + 실제 장비용(machine) 이미지를 분리 출력
   - 지원 경로: /images/category-bg/, /images/category-machine/, /images/category/
========================================================= */
body.page-products .equipment-home-section .equipment-home-grid{
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(18px,1.8vw,24px);
}

body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card,
body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(1),
body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(2){
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:clamp(250px,20vw,310px);
  overflow:hidden;
  border:1px solid #bfd8f1;
  background:#fff;
  box-shadow:0 18px 46px rgba(15,35,67,.065);
}

body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(1),
body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(2){
  grid-column:span 12;
}

body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(3),
body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(4){
  grid-column:span 6;
  min-height:clamp(300px,27vw,380px);
}

body.page-products .equipment-home-section .equipment-card-visual{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  overflow:hidden;
  background:
    linear-gradient(90deg,#fff 0%,#fff 35%,rgba(247,251,255,.86) 58%,rgba(227,241,255,.96) 100%);
  pointer-events:none;
}

body.page-products .equipment-home-section .equipment-card-bg,
body.page-products .equipment-home-section .equipment-card-machine{
  position:absolute;
  display:block;
  max-width:none;
  pointer-events:none;
  user-select:none;
}

body.page-products .equipment-home-section .equipment-card-bg{
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
  opacity:.72;
  filter:none;
}

body.page-products .equipment-home-section .equipment-card-machine{
  right:clamp(20px,3.2vw,54px);
  top:50%;
  width:min(50%,560px);
  height:80%;
  object-fit:contain;
  object-position:right center;
  transform:translateY(-50%);
  opacity:.98;
  filter:drop-shadow(0 18px 28px rgba(16,45,76,.10));
}

body.page-products .equipment-home-section .equipment-card-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.88) 46%,rgba(255,255,255,.18) 66%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}

body.page-products .equipment-home-section .equipment-card-visual::after{
  content:"";
  position:absolute;
  right:-12%;
  bottom:-45%;
  z-index:3;
  width:50%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:rgba(45,139,226,.16);
  pointer-events:none;
}

body.page-products .equipment-home-section .equipment-card-body{
  position:relative;
  z-index:4;
  width:min(42%,430px);
  min-height:100%;
  padding:clamp(28px,3.2vw,42px);
  background:transparent;
}

body.page-products .equipment-home-section .equipment-home-card:nth-child(3) .equipment-card-body,
body.page-products .equipment-home-section .equipment-home-card:nth-child(4) .equipment-card-body{
  width:min(58%,360px);
}

body.page-products .equipment-home-section .equipment-card-body small{
  align-self:flex-start;
  padding:7px 10px;
  background:#edf7ff;
  color:#0f66bb;
}

body.page-products .equipment-home-section .equipment-card-body strong{
  margin:16px 0 12px;
  font-size:clamp(26px,2.25vw,38px);
  line-height:1.18;
  letter-spacing:-1.35px;
}

body.page-products .equipment-home-section .equipment-card-body > span{
  color:#314a66;
  font-size:15px;
  font-weight:800;
  line-height:1.68;
}

body.page-products .equipment-home-section .equipment-card-body u{
  width:min(100%,190px);
  background:rgba(255,255,255,.82);
}

body.page-products .equipment-home-section .equipment-home-card:hover .equipment-card-machine{
  transform:translateY(-50%) scale(1.025);
}

body.page-products .equipment-home-section .equipment-home-card:hover .equipment-card-bg{
  transform:scale(1.015);
}

@media (max-width:900px){
  body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card,
  body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(1),
  body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(2),
  body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(3),
  body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(4){
    grid-column:span 12;
    min-height:360px;
  }

  body.page-products .equipment-home-section .equipment-card-body,
  body.page-products .equipment-home-section .equipment-home-card:nth-child(3) .equipment-card-body,
  body.page-products .equipment-home-section .equipment-home-card:nth-child(4) .equipment-card-body{
    width:100%;
    max-width:100%;
    padding:24px 22px 178px;
  }

  body.page-products .equipment-home-section .equipment-card-visual{
    background:linear-gradient(180deg,#fff 0%,#fff 42%,#eef7ff 100%);
  }

  body.page-products .equipment-home-section .equipment-card-visual::before{
    background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.96) 40%,rgba(255,255,255,.18) 68%,rgba(255,255,255,0) 100%);
  }

  body.page-products .equipment-home-section .equipment-card-machine{
    right:16px;
    top:auto;
    bottom:18px;
    width:72%;
    height:170px;
    transform:none;
  }

  body.page-products .equipment-home-section .equipment-home-card:hover .equipment-card-machine{
    transform:scale(1.02);
  }

  body.page-products .equipment-home-section .equipment-card-bg{
    object-position:right bottom;
  }

  body.page-products .equipment-home-section .equipment-card-body strong{
    font-size:25px;
  }
}

/* =========================================================
   [2026-05-13 PATCH] 설비소개 개별페이지 Hero 이미지 결합 보정
   - 파일명: /assets/css/product.css
   - 목적: /images/category-hero/*-bg + *-machine을 같은 Hero 안에서 결합
   - 대상: /products.php?category=line|auto|printer|semi_printer
========================================================= */
.line-automation-hero--compact.category-hero-with-visual,
.auto-packer-hero--compact.category-hero-with-visual,
.category-showcase-hero--compact.category-hero-with-visual{
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  gap:clamp(28px,3vw,56px);
  align-items:center;
  min-height:clamp(420px,34vw,560px);
}

.line-automation-hero--compact.category-hero-with-visual .line-automation-copy,
.auto-packer-hero--compact.category-hero-with-visual .auto-packer-copy,
.category-showcase-hero--compact.category-hero-with-visual .category-showcase-copy{
  max-width:760px;
}

.category-hero-visual{
  position:relative;
  z-index:1;
  display:block;
  min-height:clamp(300px,25vw,430px);
  overflow:visible;
  isolation:isolate;
}

.category-hero-visual::before{
  content:"";
  position:absolute;
  inset:0 0 auto auto;
  width:100%;
  height:100%;
  z-index:0;
  background-image:var(--category-hero-bg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  border:1px solid rgba(190,215,240,.72);
  box-shadow:0 20px 48px rgba(15,60,105,.10);
  opacity:.96;
}

.category-hero-bg-img{
  position:absolute;
  inset:0 0 auto auto;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  border:1px solid rgba(190,215,240,.72);
  box-shadow:0 20px 48px rgba(15,60,105,.10);
  opacity:.96;
}

.category-hero-machine-img{
  position:absolute;
  left:50%;
  bottom:8%;
  z-index:2;
  display:block;
  width:min(108%,760px);
  max-width:none;
  height:58%;
  object-fit:contain;
  object-position:center bottom;
  transform:translateX(-50%);
  filter:drop-shadow(0 22px 22px rgba(20,45,70,.13));
}

.category-hero-visual::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:8%;
  z-index:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(30,120,200,.22),transparent);
  pointer-events:none;
}

.category-showcase-hero--compact.category-hero-with-visual .category-hero-bg-img,
.category-showcase-hero--compact.category-hero-with-visual .category-hero-visual::before{
  opacity:.72;
}

.category-showcase-hero--compact.category-hero-with-visual .category-hero-machine-img{
  height:60%;
}

@media (max-width:1100px){
  .line-automation-hero--compact.category-hero-with-visual,
  .auto-packer-hero--compact.category-hero-with-visual,
  .category-showcase-hero--compact.category-hero-with-visual{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .category-hero-visual{
    min-height:320px;
  }
}

@media (max-width:768px){
  .line-automation-hero--compact.category-hero-with-visual,
  .auto-packer-hero--compact.category-hero-with-visual,
  .category-showcase-hero--compact.category-hero-with-visual{
    gap:18px;
  }

  .category-hero-visual{
    min-height:270px;
  }

  .category-hero-bg-img,
  .category-hero-visual::before{
    height:100%;
  }

  .category-hero-machine-img{
    width:108%;
    height:58%;
  }
}

/* =========================================================
   [2026-05-13 PATCH] 설비소개 이미지 크기 보정
   - 파일명: /assets/css/product.css
   - 목적: 설비소개 대표 카드와 개별 설비 Hero의 장비 사진이 작게 보이는 문제 수정
   - 원칙: 기존 2레이어 구조(bg + machine) 유지, 이미지 경로/마크업 변경 없음
========================================================= */
body.page-products .equipment-home-section .equipment-card-machine{
  right:clamp(8px,1.5vw,28px);
  width:min(66%,760px);
  height:96%;
  object-fit:contain;
  object-position:right center;
}

body.page-products .equipment-home-section .equipment-home-card:nth-child(3) .equipment-card-machine,
body.page-products .equipment-home-section .equipment-home-card:nth-child(4) .equipment-card-machine{
  right:clamp(0px,1vw,18px);
  width:min(72%,560px);
  height:92%;
}

body.page-products .equipment-home-section .equipment-card-visual::before{
  background:linear-gradient(90deg,#fff 0%,#fff 31%,rgba(255,255,255,.82) 43%,rgba(255,255,255,.12) 62%,rgba(255,255,255,0) 100%);
}

.category-hero-visual{
  min-height:clamp(340px,29vw,500px);
}

.category-hero-machine-img{
  bottom:3%;
  width:min(124%,900px);
  height:78%;
  object-fit:contain;
  object-position:center bottom;
}

.category-showcase-hero--compact.category-hero-with-visual .category-hero-machine-img{
  height:76%;
}

@media (max-width:1100px){
  .category-hero-visual{
    min-height:360px;
  }

  .category-hero-machine-img{
    width:116%;
    height:74%;
  }
}

@media (max-width:900px){
  body.page-products .equipment-home-section .equipment-card-machine,
  body.page-products .equipment-home-section .equipment-home-card:nth-child(3) .equipment-card-machine,
  body.page-products .equipment-home-section .equipment-home-card:nth-child(4) .equipment-card-machine{
    right:10px;
    bottom:10px;
    width:88%;
    height:210px;
    object-position:right bottom;
  }
}

@media (max-width:768px){
  .category-hero-visual{
    min-height:260px;
  }

  .category-hero-machine-img{
    bottom:4%;
    width:118%;
    height:72%;
  }
}


/* =========================================================
   [2026-05-13 PATCH] 설비소개 대표 카드 선명도/크기 최종 보정
   - 파일명: /assets/css/product.css
   - 원인: equipment-card-bg opacity(.72)와 equipment-card-visual::before/::after 오버레이가
     장비 이미지 위까지 덮여 장비와 배경이 함께 뿌옇게 보였음.
   - 처리: 배경/장비 레이어 z-index 분리, 배경 opacity 1 복구, 오버레이를 텍스트 경계용으로 축소,
     PC 카드 높이와 장비 비율을 소폭 확대.
========================================================= */
body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card,
body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(1),
body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(2){
  min-height:clamp(330px,23vw,405px);
}

body.page-products .equipment-home-section .equipment-card-visual{
  isolation:isolate;
  background:#f7fbff;
}

body.page-products .equipment-home-section .equipment-card-bg{
  z-index:0;
  opacity:1;
  filter:none;
  transform:none;
}

body.page-products .equipment-home-section .equipment-card-machine{
  z-index:3;
  right:clamp(0px,1.1vw,20px);
  width:min(72%,820px);
  height:104%;
  opacity:1;
  filter:drop-shadow(0 16px 24px rgba(16,45,76,.10));
}

body.page-products .equipment-home-section .equipment-home-card:nth-child(3) .equipment-card-machine,
body.page-products .equipment-home-section .equipment-home-card:nth-child(4) .equipment-card-machine{
  width:min(74%,600px);
  height:98%;
}

body.page-products .equipment-home-section .equipment-card-visual::before{
  z-index:1;
  background:linear-gradient(90deg,#fff 0%,#fff 29%,rgba(255,255,255,.74) 39%,rgba(255,255,255,.10) 57%,rgba(255,255,255,0) 100%);
}

body.page-products .equipment-home-section .equipment-card-visual::after{
  z-index:2;
  right:-14%;
  bottom:-48%;
  opacity:.62;
}

body.page-products .equipment-home-section .equipment-card-body{
  z-index:5;
  width:min(35%,410px);
}

body.page-products .equipment-home-section .equipment-home-card:nth-child(3) .equipment-card-body,
body.page-products .equipment-home-section .equipment-home-card:nth-child(4) .equipment-card-body{
  width:min(50%,350px);
}

body.page-products .equipment-home-section .equipment-home-card:hover .equipment-card-machine{
  transform:translateY(-50%) scale(1.015);
}

@media (max-width:900px){
  body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card,
  body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(1),
  body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(2),
  body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(3),
  body.page-products .equipment-home-section .equipment-home-grid > .equipment-home-card:nth-child(4){
    min-height:380px;
  }

  body.page-products .equipment-home-section .equipment-card-machine,
  body.page-products .equipment-home-section .equipment-home-card:nth-child(3) .equipment-card-machine,
  body.page-products .equipment-home-section .equipment-home-card:nth-child(4) .equipment-card-machine{
    right:8px;
    bottom:8px;
    width:92%;
    height:220px;
    opacity:1;
  }

  body.page-products .equipment-home-section .equipment-card-visual::before{
    background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.95) 38%,rgba(255,255,255,.16) 66%,rgba(255,255,255,0) 100%);
  }
}


.product-card-image,.product-thumb{aspect-ratio:4/3;overflow:hidden;}
.product-card-image img,.product-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;}

/* =========================================================
   [2026-05-14 PATCH] 제품 이미지/영상 구조 단순화
   - 대표이미지.webp: 카드 / 모바일 / 상세 상단 공통 사용
   - 1.webp, 2.webp ...: 상세 본문 이미지 순차 출력
   - video.txt: 대표이미지 바로 아래 작동 영상 자동 출력
========================================================= */
.product-card-image,
.product-thumb,
.product-home-thumb,
.product-relation-thumb{
  aspect-ratio:4/3;
  overflow:hidden;
  background:#f7fbff;
}

.product-card-image img,
.product-thumb img,
.product-home-thumb img,
.product-relation-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#fff;
}

.product-detail-main-image{
  aspect-ratio:4/3;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}

.product-detail-main-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

.product-video-section{
  margin-top:28px;
  padding:26px;
  border:1px solid #dce7f3;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
}

.product-video-head{
  margin-bottom:18px;
}

.product-video-head span{
  display:inline-block;
  margin-bottom:7px;
  color:#0f66bb;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.product-video-head h3{
  margin:0 0 8px;
  color:#102d4c;
  font-size:24px;
  line-height:1.3;
  letter-spacing:-.7px;
}

.product-video-head p{
  margin:0;
  color:#607086;
  font-size:15px;
  line-height:1.7;
}

.product-video-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

.product-video-box{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
}

.product-video-box iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.product-detail-image-list{
  margin-top:30px;
}

.product-detail-image-box{
  background:#fff;
}

.product-detail-image-box img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

@media (max-width:768px){
  .product-video-section{
    margin-top:22px;
    padding:18px 14px;
  }

  .product-video-head h3{
    font-size:21px;
  }

  .product-video-head p{
    font-size:14px;
  }
}

/* =========================================================
   [2026-05-14] 상세설명.txt 섹션형 파싱 안정화 보정
   - 01 제품 특징 / [제품 특징] / 제품 특징 형식 공통 대응
   - 목록/표/문단을 카드 내부에서 가독성 있게 출력
========================================================= */
.product-info-content p + p{
  margin-top:10px;
}
.product-detail-list{
  margin:10px 0 0;
  padding-left:20px;
  color:#33475f;
  font-size:16px;
  line-height:1.85;
  word-break:keep-all;
}
.product-detail-list li{
  margin:3px 0;
}
.product-detail-table{
  width:100%;
  margin:12px 0 0;
  border-collapse:collapse;
  border:1px solid #d9e8f6;
  background:#fff;
  font-size:15px;
  line-height:1.65;
}
.product-detail-table th,
.product-detail-table td{
  padding:10px 12px;
  border:1px solid #d9e8f6;
  text-align:left;
  vertical-align:top;
  color:#33475f;
}
.product-detail-table th{
  background:#f4f9ff;
  color:#0a2d4e;
  font-weight:900;
}
@media(max-width:768px){
  .product-detail-list{
    font-size:14.5px;
    line-height:1.82;
  }
  .product-detail-table{
    display:block;
    overflow-x:auto;
    font-size:14px;
  }
  .product-detail-table th,
  .product-detail-table td{
    padding:9px 10px;
    white-space:nowrap;
  }
}

/* =========================================================
   [2026-05-16] 제품 상세페이지 설명서형 가독성 복원
   - 예전 상세페이지처럼 단순한 정보 박스 구조로 정리
   - 아이콘/그림자/장식 요소를 줄이고 제목·본문·여백 중심으로 재정렬
   - 관련/옵션 카드는 기존 기능 유지, 상세 설명 영역만 정보 전달형으로 보정
========================================================= */
.product-detail-oldstyle .product-detail-section-wrap{
  margin:34px 0 0;
}

.product-detail-oldstyle .product-detail-section-title{
  margin:0 0 14px;
  padding:0 0 11px;
  color:#07345d;
  font-size:26px;
  line-height:1.28;
  font-weight:900;
  letter-spacing:-.55px;
  border-bottom:1px solid #cfe2f3;
}

.product-detail-oldstyle .product-detail-section-title::after{
  width:54px;
  height:3px;
  background:#0b65b9;
}

.product-detail-oldstyle .product-detail-info-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.product-detail-oldstyle .product-info-row{
  display:block;
  padding:22px 24px;
  border:1px solid #d5e7f6;
  background:#fff;
  box-shadow:none;
}

.product-detail-oldstyle .product-info-icon{
  display:none;
}

.product-detail-oldstyle .product-info-content h4{
  margin:0 0 12px;
  color:#082f55;
  font-size:19px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.35px;
}

.product-detail-oldstyle .product-info-content p{
  margin:0;
  color:#46586d;
  font-size:15.5px;
  line-height:1.9;
  font-weight:500;
  word-break:keep-all;
  overflow-wrap:anywhere;
}

.product-detail-oldstyle .product-info-content p + p{
  margin-top:10px;
}

.product-detail-oldstyle .product-detail-list{
  margin:10px 0 0;
  padding-left:18px;
  color:#46586d;
  font-size:15.5px;
  line-height:1.9;
  font-weight:500;
  word-break:keep-all;
}

.product-detail-oldstyle .product-detail-list li{
  margin:4px 0;
}

.product-detail-oldstyle .product-detail-table{
  margin-top:12px;
  border:1px solid #d5e7f6;
  font-size:15px;
  line-height:1.75;
  box-shadow:none;
}

.product-detail-oldstyle .product-detail-table th,
.product-detail-oldstyle .product-detail-table td{
  padding:11px 13px;
  border:1px solid #d5e7f6;
  color:#46586d;
}

.product-detail-oldstyle .product-detail-table th{
  color:#082f55;
  background:#f7fbff;
  font-weight:900;
}

@media(max-width:768px){
  .product-detail-oldstyle .product-detail-section-wrap{
    margin-top:26px;
  }

  .product-detail-oldstyle .product-detail-section-title{
    font-size:23px;
    margin-bottom:12px;
  }

  .product-detail-oldstyle .product-info-row{
    padding:18px 16px;
  }

  .product-detail-oldstyle .product-info-content h4{
    font-size:18px;
    margin-bottom:10px;
  }

  .product-detail-oldstyle .product-info-content p,
  .product-detail-oldstyle .product-detail-list{
    font-size:15px;
    line-height:1.85;
  }
}

/* =========================================================
   [2026-05-16 PATCH] 제품 상세페이지 예전 설명서형 스타일 재정리
   - 상세설명.txt를 중심으로 단순 정보 박스 구조 유지
   - detail.html 중복 출력 제거와 함께 적용되는 최종 override
   - 과한 그림자/카드/표 느낌을 줄이고 제목·여백·본문 가독성 우선
========================================================= */
.product-detail-oldstyle.content-card{
  background:#fff;
  border:0;
  box-shadow:none;
  padding:0;
}

.product-detail-oldstyle .product-detail-head{
  margin:0 0 22px;
  padding:0 0 18px;
  border-bottom:1px solid #cfddeb;
}

.product-detail-oldstyle .badge{
  display:block;
  margin:0 0 8px;
  color:#0f66bb;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}

.product-detail-oldstyle .product-detail-head h2{
  margin:0 0 10px;
  color:#062f55;
  font-size:34px;
  line-height:1.22;
  letter-spacing:-1px;
  font-weight:900;
}

.product-detail-oldstyle .product-detail-head p{
  max-width:980px;
  margin:0;
  color:#5c6f83;
  font-size:15.5px;
  line-height:1.75;
  word-break:keep-all;
}

.product-detail-oldstyle .product-detail-main-image{
  margin:0 0 30px;
  padding:30px;
  min-height:420px;
  border:1px solid #d3e3f2;
  background:#fff;
  box-shadow:none;
}

.product-detail-oldstyle .product-detail-main-image img{
  max-width:100%;
  max-height:560px;
  object-fit:contain;
}

.product-detail-oldstyle .product-detail-section-wrap{
  margin:32px 0 0;
}

.product-detail-oldstyle .product-detail-section-title{
  margin:0 0 14px;
  padding:0 0 10px;
  color:#062f55;
  font-size:25px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:-.7px;
  border-bottom:1px solid #cfddeb;
}

.product-detail-oldstyle .product-detail-section-title::after{
  content:"";
  display:block;
  width:52px;
  height:3px;
  margin-top:10px;
  background:#0f66bb;
}

.product-detail-oldstyle .product-detail-info-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.product-detail-oldstyle .product-info-row{
  display:block;
  margin:0;
  padding:23px 24px 22px;
  border:1px solid #d3e3f2;
  background:#fff;
  box-shadow:none;
}

.product-detail-oldstyle .product-info-row:hover{
  transform:none;
  box-shadow:none;
  border-color:#d3e3f2;
}

.product-detail-oldstyle .product-info-icon{
  display:none;
}

.product-detail-oldstyle .product-info-content h4{
  margin:0 0 13px;
  color:#082f55;
  font-size:19px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.35px;
}

.product-detail-oldstyle .product-info-content p{
  margin:0;
  color:#4d6073;
  font-size:15.5px;
  line-height:1.95;
  font-weight:500;
  word-break:keep-all;
  overflow-wrap:anywhere;
}

.product-detail-oldstyle .product-info-content p + p{
  margin-top:9px;
}

.product-detail-oldstyle .product-detail-list{
  margin:8px 0 0;
  padding-left:18px;
  color:#4d6073;
  font-size:15.5px;
  line-height:1.9;
  font-weight:500;
}

.product-detail-oldstyle .product-detail-list li{
  margin:3px 0;
}

.product-detail-oldstyle .product-detail-table{
  width:100%;
  margin:12px 0 0;
  border:1px solid #d3e3f2;
  border-collapse:collapse;
  background:#fff;
  box-shadow:none;
  font-size:15px;
  line-height:1.75;
}

.product-detail-oldstyle .product-detail-table th,
.product-detail-oldstyle .product-detail-table td{
  padding:11px 13px;
  border:1px solid #d3e3f2;
  color:#4d6073;
  vertical-align:top;
}

.product-detail-oldstyle .product-detail-table th{
  width:22%;
  color:#082f55;
  background:#f7fbff;
  font-weight:900;
}

.product-detail-oldstyle .product-txt-box,
.product-detail-oldstyle .product-html-box{
  margin-top:26px;
  padding:24px;
  border:1px solid #d3e3f2;
  background:#fff;
  box-shadow:none;
}

.product-detail-oldstyle .product-detail-image-list{
  margin-top:30px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.product-detail-oldstyle .product-detail-image-box{
  padding:0;
  border:0;
  background:#fff;
  box-shadow:none;
}

.product-detail-oldstyle .product-detail-image-box img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #e1e9f1;
  background:#fff;
}

@media(max-width:768px){
  .product-detail-oldstyle.content-card{
    padding:0;
  }

  .product-detail-oldstyle .product-detail-head{
    margin-bottom:18px;
  }

  .product-detail-oldstyle .product-detail-head h2{
    font-size:25px;
    line-height:1.3;
  }

  .product-detail-oldstyle .product-detail-head p{
    font-size:14.5px;
    line-height:1.72;
  }

  .product-detail-oldstyle .product-detail-actions{
    margin-top:16px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .product-detail-oldstyle .product-detail-main-image{
    min-height:260px;
    padding:18px;
    margin-bottom:24px;
  }

  .product-detail-oldstyle .product-detail-section-wrap{
    margin-top:26px;
  }

  .product-detail-oldstyle .product-detail-section-title{
    font-size:22px;
    margin-bottom:12px;
  }

  .product-detail-oldstyle .product-info-row{
    padding:18px 16px;
  }

  .product-detail-oldstyle .product-info-content h4{
    font-size:18px;
    margin-bottom:10px;
  }

  .product-detail-oldstyle .product-info-content p,
  .product-detail-oldstyle .product-detail-list{
    font-size:14.7px;
    line-height:1.85;
  }

  .product-detail-oldstyle .product-detail-table{
    display:block;
    overflow-x:auto;
    font-size:14px;
  }

  .product-detail-oldstyle .product-detail-table th,
  .product-detail-oldstyle .product-detail-table td{
    padding:9px 10px;
    white-space:nowrap;
  }
}

/* =========================================================
   [2026-05-16] 제품 상세페이지 가독성 확대 FINAL
   - 원인: CSS 파일 캐시 버전 미갱신 + 상세페이지 전용 selector 우선순위 부족
   - 조치: templates/head.php 버전 갱신 + 상세페이지 전용 selector로 통일
   - 기준: 40~60대 현장 고객 기준의 설명서형 가독성
========================================================= */

section.content-card.product-detail.product-detail-oldstyle{
  padding:46px 48px 54px;
  color:#24384f;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-head{
  margin:0 0 30px;
  padding-bottom:22px;
  border-bottom:1px solid #d8e6f3;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-head h2{
  margin:0 0 14px;
  color:#0a2746;
  font-size:40px;
  line-height:1.24;
  font-weight:900;
  letter-spacing:-1.2px;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-head p{
  max-width:980px;
  margin:0;
  color:#435a72;
  font-size:18px;
  line-height:1.9;
  word-break:keep-all;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-main-image{
  margin:30px 0 34px;
  padding:24px;
  border:1px solid #d2e3f3;
  background:#fff;
  box-shadow:none;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-section-wrap{
  margin:34px 0 0;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-section-title{
  margin:0 0 22px;
  padding-bottom:14px;
  color:#092844;
  font-size:30px;
  line-height:1.32;
  font-weight:900;
  letter-spacing:-.7px;
  border-bottom:1px solid #d7e5f2;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-section-title::after{
  width:52px;
  height:4px;
  background:#0f66bb;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-info-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

section.content-card.product-detail.product-detail-oldstyle .product-info-row,
section.content-card.product-detail.product-detail-oldstyle .product-txt-box,
section.content-card.product-detail.product-detail-oldstyle .product-html-box{
  display:block;
  margin:18px 0;
  padding:30px 32px;
  border:1px solid #d3e4f3;
  background:#fff;
  box-shadow:none;
}

section.content-card.product-detail.product-detail-oldstyle .product-info-icon{
  display:none;
}

section.content-card.product-detail.product-detail-oldstyle .product-info-content h4,
section.content-card.product-detail.product-detail-oldstyle .product-txt-box h3,
section.content-card.product-detail.product-detail-oldstyle .product-html-box h3{
  margin:0 0 16px;
  color:#092844;
  font-size:23px;
  line-height:1.36;
  font-weight:900;
  letter-spacing:-.45px;
}

section.content-card.product-detail.product-detail-oldstyle .product-info-content p,
section.content-card.product-detail.product-detail-oldstyle .product-txt-box p,
section.content-card.product-detail.product-detail-oldstyle .product-html-box p,
section.content-card.product-detail.product-detail-oldstyle .product-html-box li,
section.content-card.product-detail.product-detail-oldstyle .product-txt-box li{
  margin:0 0 13px;
  color:#263c54;
  font-size:18px;
  line-height:1.95;
  font-weight:500;
  word-break:keep-all;
  overflow-wrap:anywhere;
}

section.content-card.product-detail.product-detail-oldstyle .product-info-content p:last-child,
section.content-card.product-detail.product-detail-oldstyle .product-txt-box p:last-child,
section.content-card.product-detail.product-detail-oldstyle .product-html-box p:last-child{
  margin-bottom:0;
}

section.content-card.product-detail.product-detail-oldstyle .product-txt-box ul,
section.content-card.product-detail.product-detail-oldstyle .product-html-box ul,
section.content-card.product-detail.product-detail-oldstyle .product-txt-box ol,
section.content-card.product-detail.product-detail-oldstyle .product-html-box ol{
  margin:0;
  padding-left:24px;
}

section.content-card.product-detail.product-detail-oldstyle .product-txt-box li,
section.content-card.product-detail.product-detail-oldstyle .product-html-box li{
  margin-bottom:8px;
  padding-left:4px;
}

section.content-card.product-detail.product-detail-oldstyle .product-html-box table{
  width:100%;
  margin:18px 0;
  border-collapse:collapse;
  font-size:17px;
  line-height:1.8;
}

section.content-card.product-detail.product-detail-oldstyle .product-html-box th,
section.content-card.product-detail.product-detail-oldstyle .product-html-box td{
  padding:16px 18px;
  border:1px solid #d6e5f2;
  color:#263c54;
  vertical-align:top;
}

section.content-card.product-detail.product-detail-oldstyle .product-html-box th{
  background:#f7fbff;
  color:#092844;
  font-size:17px;
  font-weight:900;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-bottom-actions{
  margin-top:36px;
  padding-top:28px;
}

section.content-card.product-detail.product-detail-oldstyle .product-action-btn{
  min-width:150px;
  height:52px;
  padding:0 24px;
  font-size:17px;
  font-weight:900;
}

section.content-card.product-detail.product-detail-oldstyle .product-inquiry-card-clean{
  margin:34px 0 0;
  padding:32px 34px;
}

section.content-card.product-detail.product-detail-oldstyle .product-inquiry-card-text strong{
  font-size:30px;
  line-height:1.28;
}

section.content-card.product-detail.product-detail-oldstyle .product-inquiry-card-text span{
  font-size:18px;
  line-height:1.8;
}

section.content-card.product-detail.product-detail-oldstyle .product-inquiry-card-btn{
  min-width:170px;
  height:56px;
  font-size:18px;
}

@media(max-width:768px){
  section.content-card.product-detail.product-detail-oldstyle{
    padding:24px 18px 30px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-head{
    margin-bottom:22px;
    padding-bottom:18px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-head h2{
    font-size:30px;
    line-height:1.3;
    letter-spacing:-.9px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-head p{
    font-size:17px;
    line-height:1.85;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-main-image{
    margin:20px 0 24px;
    padding:12px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-section-wrap{
    margin-top:26px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-section-title{
    margin-bottom:16px;
    font-size:24px;
    line-height:1.35;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-info-row,
  section.content-card.product-detail.product-detail-oldstyle .product-txt-box,
  section.content-card.product-detail.product-detail-oldstyle .product-html-box{
    margin:14px 0;
    padding:22px 18px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-info-content h4,
  section.content-card.product-detail.product-detail-oldstyle .product-txt-box h3,
  section.content-card.product-detail.product-detail-oldstyle .product-html-box h3{
    margin-bottom:12px;
    font-size:21px;
    line-height:1.38;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-info-content p,
  section.content-card.product-detail.product-detail-oldstyle .product-txt-box p,
  section.content-card.product-detail.product-detail-oldstyle .product-html-box p,
  section.content-card.product-detail.product-detail-oldstyle .product-html-box li,
  section.content-card.product-detail.product-detail-oldstyle .product-txt-box li{
    font-size:17px;
    line-height:1.9;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-html-box table{
    font-size:16px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-html-box th,
  section.content-card.product-detail.product-detail-oldstyle .product-html-box td{
    padding:13px 12px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-actions{
    grid-template-columns:1fr;
    gap:9px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-action-btn{
    width:100%;
    min-width:0;
    height:48px;
    font-size:16px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-inquiry-card-clean{
    padding:24px 18px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-inquiry-card-text strong{
    font-size:24px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-inquiry-card-text span{
    font-size:17px;
    line-height:1.75;
  }
}


/* =========================================================
   [2026-05-16] 시리즈 대표카드 실제 출력 스타일
   - products.php에서 _isSeriesCard 플래그가 붙은 카드만 PC 2칸 노출
========================================================= */
.product-grid.view-many .product-card.series-card,
.product-grid .product-card.series-card{
  grid-column:span 2;
}

.product-card.series-card{
  border-color:#b8d5ef;
  background:#fff;
}

.product-card.series-card .product-thumb{
  min-height:260px;
}

.product-card.series-card .product-body h3{
  font-size:22px;
  line-height:1.35;
}

.series-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin:0 0 10px;
  padding:5px 10px;
  border:1px solid #c9dff3;
  background:#f2f8ff;
  color:#0f66bb;
  font-size:13px;
  line-height:1;
  font-weight:900;
}

@media(max-width:768px){
  .product-grid.view-many .product-card.series-card,
  .product-grid .product-card.series-card{
    grid-column:span 1;
  }

  .product-card.series-card .product-thumb{
    min-height:0;
  }

  .product-card.series-card .product-body h3{
    font-size:19px;
  }
}

/* =========================================================
   [2026-05-16] 대표 시리즈 섹션 / 세부 모델 펼침 FINAL
   - 대표 시리즈는 제품 목록과 분리된 전용 섹션으로 출력
   - 시리즈 카드 클릭/버튼으로 세부 모델 아코디언 펼침
   - _series 대표이미지가 없으면 no-image 유지
========================================================= */

.product-series-intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:26px 0 18px;
  padding:28px 32px;
  border:1px solid #cfe2f5;
  background:linear-gradient(135deg,#f7fbff 0%,#edf6ff 100%);
  box-shadow:0 12px 28px rgba(15,55,95,.06);
}

.product-series-intro h2{
  margin:4px 0 10px;
  color:#082744;
  font-size:32px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-1px;
}

.product-series-intro p{
  max-width:880px;
  margin:0;
  color:#435a72;
  font-size:17px;
  line-height:1.8;
  font-weight:600;
  word-break:keep-all;
}

.product-series-intro-badge{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:116px;
  min-height:88px;
  border:1px solid #c8dff4;
  background:#fff;
}

.product-series-intro-badge strong{
  color:#0f66bb;
  font-size:34px;
  line-height:1;
  font-weight:900;
}

.product-series-intro-badge span{
  margin-top:8px;
  color:#52677d;
  font-size:13px;
  font-weight:900;
}

.product-series-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin:0 0 34px;
}

.series-item{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid #cfe2f5;
  background:#fff;
}

.series-item .product-card.series-card{
  grid-column:auto;
  display:grid;
  grid-template-columns:minmax(0,46%) minmax(0,54%);
  min-height:300px;
  border:0;
  border-bottom:1px solid #d6e6f6;
  background:#fff;
}

.series-item .product-card.series-card .product-thumb{
  width:100%;
  height:100%;
  min-height:300px;
  aspect-ratio:auto;
  border-right:1px solid #d6e6f6;
  background:#fff;
}

.series-item .product-card.series-card .product-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:18px;
  background:#fff;
}

.series-item .product-card.series-card .product-body{
  min-height:300px;
  padding:26px 28px;
  justify-content:center;
}

.series-item .product-card.series-card .product-body h3{
  font-size:25px;
  line-height:1.35;
  letter-spacing:-.9px;
}

.series-item .product-card.series-card .product-body p{
  font-size:16px;
  line-height:1.8;
}

.series-toggle-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:52px;
  border:0;
  border-top:1px solid #e1edf8;
  background:#f7fbff;
  color:#0f579a;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
}

.series-toggle-btn:hover{
  background:#eef7ff;
  color:#075fb8;
}

.series-toggle-btn[aria-expanded="true"]{
  background:#0f66bb;
  color:#fff;
}

.series-children-panel{
  padding:22px;
  background:#f8fbff;
  border-top:1px solid #d6e6f6;
}

.series-children-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 16px;
  padding-bottom:12px;
  border-bottom:1px solid #d6e6f6;
}

.series-children-head strong{
  color:#082744;
  font-size:20px;
  font-weight:900;
}

.series-children-head span{
  color:#0f66bb;
  font-size:14px;
  font-weight:900;
}

.series-children-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.series-child-card{
  min-height:100%;
}

.series-child-card .product-body h3{
  font-size:18px;
}

.series-child-card .product-body p{
  font-size:14px;
}

@media(max-width:1100px){
  .product-series-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:768px){
  .product-series-intro{
    display:block;
    margin:20px 0 16px;
    padding:22px 18px;
  }

  .product-series-intro h2{
    font-size:26px;
  }

  .product-series-intro p{
    font-size:16px;
    line-height:1.75;
  }

  .product-series-intro-badge{
    width:100%;
    min-height:72px;
    margin-top:18px;
  }

  .product-series-grid{
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:26px;
  }

  .series-item .product-card.series-card{
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  .series-item .product-card.series-card .product-thumb{
    min-height:0;
    height:auto;
    aspect-ratio:4/3;
    border-right:0;
    border-bottom:1px solid #eef3f8;
  }

  .series-item .product-card.series-card .product-body{
    min-height:0;
    padding:20px;
  }

  .series-item .product-card.series-card .product-body h3{
    font-size:21px;
  }

  .series-children-panel{
    padding:16px;
  }

  .series-children-head{
    display:block;
  }

  .series-children-head span{
    display:block;
    margin-top:6px;
  }

  .series-children-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   [2026-05-16] PRODUCT / SERIES WIDTH LIMIT PATCH
   목적:
   - 설비소개 제품/시리즈 카드가 화면 폭에 따라 무한 확대되는 현상 방지
   - 시리즈 대표카드는 2개 카드 폭 느낌을 유지하되 콘텐츠 제한폭 안에서만 확장
   - 대표 이미지는 가로형 비율로 안정화
========================================================= */
body.page-products .product-control-panel,
body.page-products .product-series-intro,
body.page-products .product-series-grid,
body.page-products .product-list-head,
body.page-products .product-grid,
body[data-sidebar-type="products"] .product-control-panel,
body[data-sidebar-type="products"] .product-series-intro,
body[data-sidebar-type="products"] .product-series-grid,
body[data-sidebar-type="products"] .product-list-head,
body[data-sidebar-type="products"] .product-grid{
  width:100%;
  max-width:1440px;
  margin-left:auto;
  margin-right:auto;
}

.product-series-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}

.series-item{
  max-width:100%;
}

.series-item .product-card.series-card{
  min-height:280px;
}

.series-item .product-card.series-card .product-thumb{
  min-height:280px;
  max-height:360px;
  aspect-ratio:16/10;
}

.series-item .product-card.series-card .product-body{
  min-height:280px;
}

.series-item .product-card.series-card .product-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.series-children-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.product-grid.view-large .product-card{
  max-width:100%;
}

.product-grid.view-large .product-thumb{
  min-height:300px;
  max-height:380px;
}

.product-grid.view-many .product-thumb{
  max-height:320px;
}

@media(max-width:1100px){
  .product-series-grid{
    grid-template-columns:1fr;
  }

  .series-item .product-card.series-card .product-thumb{
    max-height:340px;
  }
}

@media(max-width:768px){
  body.page-products .product-control-panel,
  body.page-products .product-series-intro,
  body.page-products .product-series-grid,
  body.page-products .product-list-head,
  body.page-products .product-grid,
  body[data-sidebar-type="products"] .product-control-panel,
  body[data-sidebar-type="products"] .product-series-intro,
  body[data-sidebar-type="products"] .product-series-grid,
  body[data-sidebar-type="products"] .product-list-head,
  body[data-sidebar-type="products"] .product-grid{
    max-width:100%;
  }

  .series-item .product-card.series-card .product-thumb{
    max-height:none;
    aspect-ratio:4/3;
  }

  .series-children-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   [2026-05-19] 설비소개 대표 시리즈 공통 데이터 / 목록형 큰 카드
   - 기존 product-card series-card 재사용 금지
   - 데이터: /products/_series/*/category.txt + 상세설명.txt
========================================================= */
.product-series-list{
  max-width:1240px;
  margin:24px auto 34px;
  padding:0 14px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.series-large-item{display:block;}
.series-large-card{
  display:grid;
  grid-template-columns:minmax(320px,42%) 1fr;
  align-items:stretch;
  border:1px solid #c9def8;
  background:#fff;
  overflow:hidden;
}
.series-large-card__image{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:260px;
  background:#f8fbff;
  border-right:1px solid #d6e5f7;
}
.series-large-card__image img{
  width:100%;
  height:260px;
  object-fit:contain;
  display:block;
  padding:18px 28px;
}
.series-large-card__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px 36px;
}
.series-large-card__badge{
  align-self:flex-start;
  margin-bottom:14px;
  padding:6px 11px;
  border:1px solid #9dc8fb;
  background:#f0f7ff;
  color:#0064c8;
  font-size:12px;
  line-height:1;
  font-weight:900;
}
.series-large-card__body h3{
  margin:0 0 8px;
  color:#071629;
  font-size:28px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.04em;
}
.series-large-card__subtitle{
  margin:0 0 14px;
  color:#1f4f86;
  font-size:21px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:-.035em;
}
.series-large-card__body p{
  margin:0 0 20px;
  color:#31465f;
  font-size:15px;
  line-height:1.75;
  font-weight:700;
}
.series-large-card__features{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-bottom:22px;
}
.series-large-card__features span{
  padding:9px 12px;
  border:1px solid #d4e3f7;
  background:#f8fbff;
  color:#0d4f9c;
  font-size:13px;
  font-weight:800;
}
.series-large-card__features span::before{content:'• ';font-weight:900;}
.series-large-card__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:170px;
  min-height:42px;
  border:0;
  background:#006bdc;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,98,204,.14);
}
.series-large-card__btn:hover{background:#004fa8;}
.series-large-item .series-children-panel{
  margin:0;
  border:1px solid #c9def8;
  border-top:0;
  background:#fff;
  padding:20px;
}
@media (max-width:900px){
  .product-series-list{padding:0 12px;gap:14px;}
  .series-large-card{display:block;}
  .series-large-card__image{min-height:210px;border-right:0;border-bottom:1px solid #d6e5f7;}
  .series-large-card__image img{height:210px;padding:16px;}
  .series-large-card__body{padding:24px 20px;}
  .series-large-card__body h3{font-size:23px;}
  .series-large-card__subtitle{font-size:18px;}
  .series-large-card__features{grid-template-columns:1fr;}
  .series-large-card__btn{width:100%;}
}


/* =========================================================
   [2026-05-21 v17] 설비소개 홈 - 대표 자동화 시리즈 디자인 정리
   대상 HTML: products.php 의 .equipment-series-section / .equipment-series-card
========================================================= */
body.page-products .equipment-series-section{
  width:var(--nb-content-width, min(calc(100vw - 96px), 1440px));
  max-width:var(--nb-content-width, 1440px);
  margin:34px auto 44px;
  padding:44px 54px;
  border:1px solid #cfe1f4;
  background:linear-gradient(180deg,#ffffff 0%,#f4f9ff 100%);
  box-shadow:0 18px 44px rgba(15,54,99,.08);
  box-sizing:border-box;
}
body.page-products .equipment-series-section .equipment-section-head{
  margin-bottom:28px;
}
body.page-products .equipment-series-list{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}
body.page-products .equipment-series-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(360px,42%) minmax(0,1fr);
  min-height:340px;
  border:1px solid #c9def8;
  background:#fff;
  overflow:hidden;
  text-decoration:none;
  color:#10243d;
  box-shadow:0 16px 34px rgba(15,54,99,.07);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.page-products .equipment-series-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(15,102,187,.07),rgba(15,102,187,0) 45%);
  pointer-events:none;
}
body.page-products .equipment-series-card:hover{
  transform:translateY(-3px);
  border-color:#8bbdf0;
  box-shadow:0 22px 48px rgba(15,54,99,.12);
}
body.page-products .equipment-series-image{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:28px;
  background:linear-gradient(180deg,#f8fbff 0%,#edf6ff 100%);
  border-right:1px solid #d7e6f7;
}
body.page-products .equipment-series-image img{
  width:100%;
  height:230px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 16px 22px rgba(15,54,99,.10));
}
body.page-products .equipment-series-body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:34px 38px;
}
body.page-products .equipment-series-body small{
  display:inline-flex;
  align-self:flex-start;
  margin-bottom:13px;
  padding:6px 10px;
  background:#eaf4ff;
  color:#006bdc;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
}
body.page-products .equipment-series-body strong{
  display:block;
  margin:0 0 8px;
  color:#071629;
  font-size:30px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.055em;
}
body.page-products .equipment-series-subtitle{
  margin:0 0 14px;
  color:#1f4f86;
  font-size:21px;
  line-height:1.35;
  font-weight:850;
  letter-spacing:-.035em;
}
body.page-products .equipment-series-body p{
  margin:0 0 18px;
  color:#334963;
  font-size:15px;
  line-height:1.72;
  font-weight:700;
  word-break:keep-all;
}
body.page-products .equipment-series-tags{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0 0 22px;
}
body.page-products .equipment-series-tags span{
  display:flex;
  align-items:center;
  min-height:36px;
  padding:8px 11px;
  border:1px solid #d3e4f8;
  background:#f8fbff;
  color:#0d4f9c;
  font-size:13px;
  line-height:1.35;
  font-weight:850;
}
body.page-products .equipment-series-tags span::before{
  content:"•";
  margin-right:7px;
  font-weight:900;
}
body.page-products .equipment-series-body u{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:150px;
  min-height:44px;
  border:1px solid #006bdc;
  background:#006bdc;
  color:#fff;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 12px 22px rgba(0,98,204,.15);
}
body.page-products .equipment-series-card:hover .equipment-series-body u{
  background:#004fa8;
  border-color:#004fa8;
}
@media(max-width:1280px){
  body.page-products .equipment-series-list{grid-template-columns:1fr;}
}
@media(max-width:900px){
  body.page-products .equipment-series-section{
    width:calc(100vw - 28px);
    max-width:calc(100vw - 28px);
    padding:28px 18px;
  }
  body.page-products .equipment-series-card{
    grid-template-columns:1fr;
  }
  body.page-products .equipment-series-image{
    border-right:0;
    border-bottom:1px solid #d7e6f7;
  }
  body.page-products .equipment-series-image img{height:210px;}
  body.page-products .equipment-series-body{padding:26px 22px;}
  body.page-products .equipment-series-body strong{font-size:24px;}
  body.page-products .equipment-series-tags{grid-template-columns:1fr;}
  body.page-products .equipment-series-body u{width:100%;}
}


/* =========================================================
   [스마트스토어 구매 버튼]
   - 제품폴더/smartstore.txt 또는 category.txt smartstore_url 값이 있을 때만 노출
   - 제품카드 전체 클릭 영역과 구매 버튼 클릭 영역을 분리
========================================================= */
.product-card-main-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.product-card-actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}

.product-card-actions .detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 34px;
  text-decoration: none;
}

.detail-btn--smartstore,
.product-action-btn--smartstore {
  border-color: #03c75a !important;
  background: #03c75a !important;
  color: #fff !important;
}

.detail-btn--smartstore:hover,
.product-action-btn--smartstore:hover {
  filter: brightness(0.96);
}

@media (max-width: 768px) {
  .product-card-actions {
    flex-direction: column;
  }
}


/* =========================================================
   [2026-05-23 PATCH] 제품 상세페이지 사양표 정갈화
   - 상세설명.txt의 "항목명: 값" 패턴을 표로 출력할 때 적용
   - 확인되지 않은 placeholder 값은 PHP에서 제거
   - PC/모바일 모두 예전 상세페이지처럼 깔끔한 카탈로그형 표 유지
========================================================= */
section.content-card.product-detail.product-detail-oldstyle .product-info-row--spec{
  padding:28px 28px 26px;
  background:#fff;
  border:1px solid #cfe1f2;
}

section.content-card.product-detail.product-detail-oldstyle .product-info-row--spec .product-info-content h4{
  margin-bottom:18px;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table{
  width:100%;
  margin:0;
  border:1px solid #cbddeb;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  background:#fff;
  font-size:16px;
  line-height:1.7;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table tr + tr th,
section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table tr + tr td{
  border-top:1px solid #d8e6f2;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table th,
section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table td{
  padding:14px 16px;
  border:0;
  vertical-align:middle;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table th{
  width:220px;
  background:#f3f8fd;
  color:#082f55;
  font-weight:900;
  letter-spacing:-.25px;
  white-space:nowrap;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table td{
  background:#fff;
  color:#263c54;
  font-weight:600;
  word-break:keep-all;
  overflow-wrap:anywhere;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table td:not(:last-child){
  border-right:0;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table th + td{
  border-left:1px solid #d8e6f2;
}

@media(max-width:768px){
  section.content-card.product-detail.product-detail-oldstyle .product-info-row--spec{
    padding:20px 16px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table{
    display:table;
    overflow:visible;
    font-size:14.5px;
    line-height:1.65;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table tr{
    display:grid;
    grid-template-columns:118px minmax(0,1fr);
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table th,
  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table td{
    display:block;
    width:auto;
    padding:11px 12px;
    white-space:normal;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table th{
    min-width:0;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table th + td{
    border-left:1px solid #d8e6f2;
  }
}


/* =========================================================
   [2026-05-23 PATCH v20] 제품 상세페이지 spec/table 최종 정리
   - 정보 없는 placeholder 제거 후 빈 섹션 미출력
   - 장비마다 다른 항목명도 key:value 형식이면 유연하게 표 출력
   - PC/모바일 모두 정갈한 카탈로그형 사양표 유지
========================================================= */
section.content-card.product-detail.product-detail-oldstyle .product-detail-info-list{
  gap:18px;
}

section.content-card.product-detail.product-detail-oldstyle .product-info-row--spec{
  position:relative;
  overflow:hidden;
  padding:30px 30px 28px;
  border:1px solid #bfd7ea;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 14px 34px rgba(20,60,100,.07);
}

section.content-card.product-detail.product-detail-oldstyle .product-info-row--spec .product-info-content h4{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  color:#082f55;
  font-size:21px;
  font-weight:900;
  letter-spacing:-.65px;
}

section.content-card.product-detail.product-detail-oldstyle .product-info-row--spec .product-info-content h4::before{
  content:"";
  display:inline-block;
  width:7px;
  height:22px;
  background:#0f66bb;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table{
  width:100%;
  margin:0;
  border:1px solid #c9ddec;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 22px rgba(20,60,100,.045);
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table tr{
  transition:background .14s ease;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table tr:hover th,
section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table tr:hover td{
  background:#f7fbff;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table tr + tr th,
section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table tr + tr td{
  border-top:1px solid #dce8f2;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table th,
section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table td{
  padding:15px 18px;
  border:0;
  vertical-align:middle;
  font-size:15.5px;
  line-height:1.65;
  letter-spacing:-.25px;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table th{
  width:210px;
  background:#eef6fd;
  color:#0b3d68;
  font-weight:900;
  white-space:nowrap;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table td{
  background:#fff;
  color:#253d56;
  font-weight:650;
  word-break:keep-all;
  overflow-wrap:anywhere;
}

section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table th + td{
  border-left:1px solid #dce8f2;
}

@media(max-width:768px){
  section.content-card.product-detail.product-detail-oldstyle .product-detail-info-list{
    gap:14px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-info-row--spec{
    padding:20px 15px 18px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-info-row--spec .product-info-content h4{
    margin-bottom:14px;
    font-size:18px;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table{
    display:block;
    border:1px solid #d3e2ee;
    box-shadow:none;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table tbody{
    display:block;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table tr{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table th,
  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table td{
    display:block;
    width:auto;
    min-width:0;
    padding:12px 11px;
    font-size:14px;
    line-height:1.55;
    white-space:normal;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table th{
    word-break:keep-all;
  }

  section.content-card.product-detail.product-detail-oldstyle .product-detail-spec-table td{
    word-break:keep-all;
    overflow-wrap:anywhere;
  }
}