@charset "UTF-8";
/* ==========================================================================
   autobase — 제품리스트 (데스크톱)
   레퍼런스: odhitec.com 제품 목록 (실측 1rem=10px, 포인트 #004bd5 → var(--brand) 치환).
   ※ @media 는 m.product.css 에만.
   ========================================================================== */

/* ── 탭 — 레퍼런스 pintel .sub-tab-wrapper-style + .sub-tab-list-style (1rem=10px 실측, --main-color2 → var(--brand))
   개별 알약(min-width 224 · 48px · #f5f5f5), 선택/호버 시 브랜드색 + 그림자 ── */
.pl-tabs { position: relative; margin-top: 64px; }
.pl-tabs__inner { position: relative; }
.pl-tabs__list {
  display: grid;                       /* 알약 폭 224px 고정(전 페이지 공통), 1400 컨테이너에 5개/행 */
  grid-template-columns: repeat(auto-fill, 224px);
  gap: 20px 68px;
}
.pl-tabs__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 23px;
  border-radius: 90px;
  background: #f5f5f5;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.05em;
  color: #060606;
  white-space: nowrap;
  transition: all .4s ease-in-out;
}
.pl-tabs__list a:hover { background: var(--brand-hover); color: #333; }   /* 시안 호버: 연파랑 */
.pl-tabs__list a.is-active { position: relative; z-index: 1; background: var(--brand); box-shadow: 6px 6px 20px rgba(0, 0, 0, .16); color: #fff; }

/* ── 목록 헤드 ───────────────────────────────────────────────────────── */
.pl-list { margin-top: 60px; }
.pl-list__title { font-size: 60px; font-weight: 700; line-height: 1.2; color: #000; text-align: center; }

.pl-list__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
}
.pl-chips { display: flex; gap: 8px; }
.pl-chips button {
  padding: 7px 15px;   /* border 1px 포함 40px 높이 */
  border: 1px solid #ddd;
  border-radius: 100px;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
  cursor: pointer;
}
.pl-chips button.is-active {
  padding: 8px 16px;      /* 활성은 테두리 없음 — 패딩으로 크기 유지 */
  border: 0;
  background: var(--brand);
  font-weight: 600;
  color: #fff;
}

.pl-search {
  display: flex;
  align-items: center;
  gap: 19px;
  width: 468px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
}
.pl-search img { flex: none; }
.pl-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 16px;
}
.pl-search input::placeholder { color: #666; }

/* ── 제품 그리드 — 원본 product-tab-list (2열, #f5f5f5, hover 파랑+라운드) ── */
.pl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 30px;
  padding-bottom: 20px;
}
.pl-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 260px;
  padding: 40px 60px;
  background: #f5f5f5;
  transition: background .3s ease, border-radius .3s ease;
}
.pl-card__info { width: 54%; padding-right: 24px; }   /* 원본 50%+10% — 긴 모델명에 맞춰 조정 */
.pl-card__cat {
  display: inline-block;
  padding-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.8;
  color: var(--brand);
  transition: color .3s ease;
}
.pl-card__model {
  display: block;
  margin-bottom: 20px;
  font-size: 24px;   /* 원본 30px — 15자 모델명이 한 줄에 들어가게 축소 */
  font-weight: 600;
  line-height: 1.13;
  color: #222;
  transition: color .3s ease;
}
.pl-card__desc {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  color: #555;
  transition: color .3s ease;
}
.pl-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 160px;
}
.pl-card__thumb img { width: auto; max-width: 100%; max-height: 100%; }

.pl-card:hover { background: var(--brand); border-radius: 20px; }
.pl-card:hover .pl-card__cat { color: #fff; }
.pl-card:hover .pl-card__model { color: #fff; }
.pl-card:hover .pl-card__desc { color: rgba(255, 255, 255, .8); }

.pl-empty { margin-top: 30px; padding: 120px 0; font-size: 18px; color: #666; text-align: center; }
.pl-empty[hidden] { display: none; }

/* ── 페이지네이션 — 원본 paging-style03 (보더 없음, cur 채움) ──────────── */
.pl-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
.pl-pager[hidden] { display: none; }
.pl-pager__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 7px;
  margin: 0 5px;
  cursor: pointer;
}
.pl-pager__nav.is-disabled { opacity: .35; pointer-events: none; }
.pl-pager .chev-l,
.pl-pager .chev-r {
  width: 7.06px;
  height: 12.71px;
  background: url('../../images/icons/chevron-gray.svg') center / contain no-repeat;
}
.pl-pager .chev-l { transform: scaleX(-1); }

.pl-pager__nums { display: flex; }
.pl-pager__nums button {
  height: 30px;
  padding: 0 10px;
  margin: 0 5px;
  font-size: 16px;
  line-height: 1;
  color: #868686;
  cursor: pointer;
}
.pl-pager__nums button:hover { color: #222; }
.pl-pager__nums button.is-active { background: var(--brand); color: #fff; }