@charset "utf-8";

/* ==========================================================
   제품소개 — mexus.kr 원본 doc.css / responsive.css 수치 기준
   공통 서브 레이아웃은 sub.css 참조
   ========================================================== */

/* ==========================================================
   제품 목록 (.router-list)
   ========================================================== */
.router-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-40);}
.router-list__item{display:flex;border:1px solid #ddd;border-radius:16px;}
.router-list__item:hover{border-color:var(--color-primary);}

.router-list__info{flex:1;min-width:0;padding:var(--sp-50) var(--sp-40) var(--sp-20);}
.router-list__en-tit{
  margin-bottom:10px;
  font-family:var(--font-display);
  font-weight:600;color:var(--color-black);line-height:1.5;
}
.router-list__model{
  margin-bottom:var(--sp-35);
  font-family:var(--font-display);
  font-size:var(--fs-40);font-weight:700;color:var(--color-black);line-height:1.2;
}
.router-list__desc{margin-bottom:var(--sp-35);line-height:1.6;}
.router-list__btn{
  display:inline-block;width:56px;height:56px;
  background:url("https://mexus.kr/images/sub/prd-btn.png") 50% 50% / cover no-repeat;
}
.router-list__item:hover .router-list__btn{
  background-image:url("https://mexus.kr/images/sub/prd-btn-on.png");
}

.router-list__image{width:345px;flex:none;}
.router-list__thumb{position:relative;padding-bottom:115.943%;overflow:hidden;}
.router-list__thumb img{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
}

/* ==========================================================
   Accessory (.accessory-view)
   ========================================================== */
.accessory{margin-bottom:var(--sp-200);}
.accessory:last-child{margin-bottom:0;}
.accessory__wrap{display:flex;gap:var(--sp-80);margin-bottom:80px;}
.accessory__wrap:last-child{margin-bottom:0;}

.accessory__img-area{
  position:relative;flex:0 0 550px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
}
.accessory__slider{width:550px;max-width:100%;border-radius:24px;overflow:hidden;}
.accessory__img{position:relative;padding-bottom:100%;overflow:hidden;}
.accessory__img img{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
}
.accessory__img::after{
  content:"";position:absolute;inset:0;
  border:1px solid #ddd;border-radius:24px;
}

/* 원본 slick dots 형태를 Swiper 페이지네이션으로 이식 */
.accessory__slider .swiper-pagination{bottom:20px;line-height:0;}
.accessory__slider .swiper-pagination-bullet{
  width:16px;height:16px;margin:0 4px;border-radius:30px;
  border:1px solid #ccc;background:transparent;opacity:1;
}
.accessory__slider .swiper-pagination-bullet-active{
  width:30px;border:none;background:#ccc;
}
.accessory__slider .swiper-pagination-bullet:only-child{display:none;}

.accessory__info{flex:1;min-width:0;padding-top:10px;}
.accessory__eng-tit{
  margin-bottom:var(--sp-25);
  font-family:var(--font-display);
  font-size:var(--fs-24);font-weight:700;color:var(--color-black);line-height:1.2;
}

/* ==========================================================
   Spec table
   ========================================================== */
.spec-table{width:100%;border-collapse:collapse;border-top:2px solid var(--color-black);}
.spec-table th{
  padding:11px;background-color:#f9f9f9;
  font-weight:600;color:var(--color-black);
  border-right:1px solid #ddd;border-bottom:1px solid #ddd;
}
.spec-table td{padding:11px var(--sp-20);line-height:1.6;border-bottom:1px solid #ddd;}

/* .solutions-spec .spec-table */
.spec-table--wide thead th{
  padding:12px var(--sp-20);font-size:var(--fs-18);
}
.spec-table--wide thead th:last-child{border-right:none;}
.spec-table--wide tbody th{padding:12px;text-align:center;background:none;}
.spec-table--wide tbody td{border-left:1px solid #ddd;padding:12px var(--sp-20);}

/* ==========================================================
   Solutions
   ========================================================== */
.solutions{display:grid;gap:var(--sp-150);}
.solutions__header{margin-bottom:var(--sp-40);text-align:center;}
.solutions__sub-tit{
  margin-bottom:var(--sp-30);
  font-family:var(--font-display);
  font-size:var(--fs-18);font-weight:600;color:var(--color-primary);line-height:1.3;
}
.solutions__main-tit{
  margin-bottom:var(--sp-30);
  font-family:var(--font-display);
  font-size:var(--fs-48);font-weight:700;color:var(--color-black);line-height:1.2;
}
.solutions__desc{color:#878787;line-height:1.625;}
.solutions__figure{text-align:center;}

/* ==========================================================
   Responsive — 원본 responsive.css (1024 / 640)
   ========================================================== */
@media (max-width:1024px){
  .router-list{grid-template-columns:auto;}
  .accessory__wrap{display:block;}
  .accessory__info{padding-top:50px;}
}

@media (max-width:640px){
  .router-list__item{display:block;}
  .router-list__image{width:100%;}

  .accessory__slider{width:100%;}
  .accessory__slider .swiper-pagination{bottom:10px;}
  .accessory__slider .swiper-pagination-bullet{width:10px;height:10px;}
  .accessory__slider .swiper-pagination-bullet-active{width:20px;}

  .solutions__spec{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .solutions__spec .spec-table{width:800px;}
}

/* ==========================================================
   제품 상세 (.product-view)
   ========================================================== */
.product-view{margin-bottom:var(--sp-150);}
.product-view__wrap{display:flex;align-items:flex-start;gap:var(--sp-80);}

.product-view__img-area{width:620px;flex:none;}

.product-gallery{margin-bottom:var(--sp-20);}
.product-gallery__img{position:relative;padding-bottom:100%;overflow:hidden;border-radius:24px;}
.product-gallery__img img{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
}
.product-gallery__img::after{
  content:"";position:absolute;inset:0;
  border:1px solid #ddd;border-radius:24px;
}

.product-thumbs__img{border:1px solid #ddd;border-radius:16px;overflow:hidden;}
.product-thumbs__img img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.product-thumbs .swiper-slide{cursor:pointer;}
.product-thumbs .swiper-slide-thumb-active .product-thumbs__img{border-color:var(--color-primary);}

.product-view__info{flex:1;min-width:0;padding-top:var(--sp-20);}
.product-view__titarea{
  margin-bottom:var(--sp-40);padding-bottom:var(--sp-40);
  border-bottom:1px solid #ddd;
}
.product-view__eng-tit{
  margin-bottom:var(--sp-30);
  font-family:var(--font-display);
  font-size:var(--fs-18);font-weight:600;color:var(--color-primary);line-height:1.3;
}
.product-view__model{
  font-family:var(--font-display);
  font-size:var(--fs-48);font-weight:700;color:var(--color-black);line-height:1.2;
}
.product-view__desc{margin-bottom:var(--sp-40);color:#878787;line-height:1.625;}

/* 아이콘 스펙 요약 */
.spec-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-20);
  padding-bottom:var(--sp-40);margin-bottom:var(--sp-60);
  border-bottom:1px solid #ddd;
}
.spec-list__item{display:flex;align-items:flex-start;gap:var(--sp-20);}
.spec-list__icon{flex:0 0 80px;width:80px;height:80px;}
.spec-list__icon img{width:100%;height:100%;object-fit:contain;}
.spec-list__cont{flex:1;min-width:0;padding-top:var(--sp-10);}
.spec-list__tit{
  display:block;margin-bottom:var(--sp-10);
  font-size:var(--fs-16);font-weight:700;color:var(--color-primary);line-height:1.3;
}
.spec-list__txt{font-size:var(--fs-14);line-height:1.714;}

/* VALUABLE / FLEXIBLE / SECURE */
.feature-wrap{display:flex;gap:var(--sp-40);margin-bottom:var(--sp-60);}
.feature-box{flex:1;min-width:0;}
.feature-box__header{margin-bottom:var(--sp-20);}
.feature-box__tit{
  margin-bottom:var(--sp-15);
  font-size:var(--fs-20);font-weight:700;color:var(--color-black);line-height:1.3;
}
.feature-box__divider{height:1px;background-color:var(--color-black);}
.feature-box__list{display:flex;flex-direction:column;gap:var(--sp-15);}
.feature-box__item{
  position:relative;padding-left:15px;
  font-size:var(--fs-14);font-weight:600;color:var(--color-black);line-height:1.4;
}
.feature-box__item::before{
  content:"";position:absolute;left:0;top:6px;
  width:5px;height:5px;border-radius:100%;background-color:#ccc;
}

.btn-area{display:flex;gap:var(--sp-10);}
.btn-area .btn{flex:1;}
.btn{
  display:flex;align-items:center;justify-content:center;
  height:70px;border:1px solid #ddd;border-radius:8px;background-color:#fff;
  font-family:var(--font-display);
  font-size:var(--fs-18);font-weight:600;color:var(--color-black);line-height:1.3;
}
.btn--primary{border-color:var(--color-black);background-color:var(--color-black);color:#fff;}

/* 상세 하단 Specifications */
.product-spec{display:block;width:100%;}

@media (max-width:1024px){
  .product-view__wrap{display:block;}
  .product-view__img-area{width:100%;margin-bottom:50px;}
}

@media (max-width:640px){
  .spec-list{grid-template-columns:repeat(1,1fr);}
  .feature-wrap{flex-direction:column;}
  .feature-box__item{padding-left:10px;}
  .feature-box__item::before{width:3px;height:3px;}

  .btn-area{flex-wrap:wrap;text-align:center;}
  .btn{height:52px;font-size:13px;}

  .product-spec{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .product-spec .spec-table{width:800px;}
}