@charset "utf-8";
/* =====================================================
   표준품 목록 — products/css/list.css
   (자동화설비 목록 automation/css/list.css 와 동일 형태, 접두어 pd)
   ===================================================== */

/* ── 분야별 탭 (좌우 드래그 · 스와이프) ──
   스크롤 시 상단바(64px / 600px~ 72px) 바로 아래 sticky.
   --gx = .sec 좌우 패딩 : 음수 margin 으로 화면 끝까지 흰 바탕을 깔고 탭 위치는 그대로 유지.
   --gy = 바 상하 여백 : 음수 margin-top 으로 상쇄해 원래 레이아웃 간격 유지.
   고정된 상태에서는 ebi.js 가 .stuck 을 붙여 하단 그림자 표시. */
.pdTabs {
	--gx:18px; --gy:10px;
	position:sticky; top:64px; z-index:50;
	margin:calc(var(--gy) * -1) calc(var(--gx) * -1) calc(16px - var(--gy));
	padding:var(--gy) var(--gx);
	background:#fff; transition:box-shadow .2s;
}
.pdTabs.stuck { box-shadow:0 8px 14px -10px rgba(16,32,64,.22); }
/* 흰 바탕이 .sec(셸) 밖으로 튀어나오지 않게 좌우만 잘라냄
   — overflow:hidden 은 스크롤 컨테이너가 되어 sticky 가 풀리므로 반드시 clip */
.sec:has(> .pdTabs) { overflow-x:clip; }
.pdTabs:before,
.pdTabs:after {
	content:""; position:absolute; top:var(--gy); bottom:var(--gy); z-index:2; width:26px;
	pointer-events:none; opacity:0; transition:opacity .2s;
}
.pdTabs:before { left:var(--gx);  background:linear-gradient(90deg, #fff 20%, rgba(255,255,255,0)); }
.pdTabs:after  { right:var(--gx); background:linear-gradient(270deg, #fff 20%, rgba(255,255,255,0)); }
.pdTabs.hasPrev:before { opacity:1; }
.pdTabs.hasNext:after  { opacity:1; }

.pdTabs-track {
	display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain;
	-webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab;
}
.pdTabs-track::-webkit-scrollbar { display:none; }
.pdTabs-track.dragging { cursor:grabbing; scroll-behavior:auto; }
.pdTabs-track.dragging .pdTab { pointer-events:none; }

.pdTab {
	flex:0 0 auto; height:40px; padding:0 16px; border:1px solid var(--c_line); border-radius:8px;
	background:var(--c_soft); color:#6a7b8d; font-size:var(--fs13); font-weight:700;
	letter-spacing:.02em; white-space:nowrap; user-select:none; -webkit-user-select:none;
	transition:background .2s, color .2s, border-color .2s;
}
.pdTab.on { border-color:var(--c_base2); background:var(--c_base2); color:#fff; }

/* ── 제품 목록 ── */
.pdList { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pdList .pdItem { overflow:hidden; }
.pdList .pdItem.hide { display:none; }
.pdList .pdItem > a { display:block; height:100%; }

.pdList .pic { display:block; aspect-ratio:1 / 0.7; background:var(--c_soft); border-bottom:1px solid var(--c_line); }
.pdList .pic img { width:100%; height:100%; object-fit:cover; display:block; }

.pdList .body { display:flex; align-items:flex-start; gap:8px; padding:12px 12px 14px; }
.pdList .tx { flex:1 1 auto; min-width:0; }
.pdList .tx strong {
	font-family:var(--f_en), var(--f_title), var(--f_base1), sans-serif;
	display:block; color:var(--c_ink); font-size:var(--fs16); font-weight:800;
	letter-spacing:-.02em; line-height:1.35; word-break:break-word;
}
.pdList .tx em {
	display:block; margin-top:2px; color:var(--c_muted); font-size:var(--fs13);
	font-weight:600; font-style:normal; line-height:1.35; word-break:break-word;
}
/* + 아이콘 — 외부 이미지 없이 인라인 SVG(data URI), stroke-linecap:round 로 끝이 뭉툭한 + */
.pdList .plus {
	flex:0 0 auto; width:30px; height:30px; margin-top:2px;
	border:1px solid var(--c_line); border-radius:50%; background-color:var(--c_soft);
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M6%202.6V9.4M2.6%206H9.4'%20fill='none'%20stroke='%236a7b8d'%20stroke-width='1.8'%20stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:50% 50%; background-size:11px 11px;
	transition:background-color .2s, border-color .2s;
}
.pdList .pdItem > a:hover .plus {
	border-color:var(--c_base1); background-color:var(--c_base1);
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M6%202.6V9.4M2.6%206H9.4'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.8'%20stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── 소형 화면 (~400px) : 1열 ── */
@media screen and (max-width: 500px) {
	.pdList { grid-template-columns:1fr; }
}

/* ── 태블릿 이상 (600px~) : 2열 유지 ── */
@media screen and (min-width: 600px) {
	.pdTabs { --gx:26px; --gy:12px; top:72px; margin-bottom:calc(22px - var(--gy)); }
	.pdTabs-track { gap:8px; }
	.pdTab { height:40px; padding:2px 20px 0; font-size:var(--fs14); }

	.list-info { margin-bottom:16px; }

	.pdList { grid-template-columns:1fr 1fr; gap:14px; }
	.pdList .body { padding:16px 16px 18px; }
	.pdList .tx strong { font-size:var(--fs16); }
	.pdList .tx em { font-size:var(--fs14); }
	.pdList .plus { width:36px; height:36px; background-size:12px 12px; }
}

/* ── PC (1024px~) : 3열 ── */
@media screen and (min-width: 1024px) {
	.pdTabs { --gx:40px; }
	.pdList { grid-template-columns:repeat(3, 1fr); gap:18px; }
}