@charset "utf-8";
/* =====================================================
   자동화기기 목록 — automation/css/list.css
   ===================================================== */

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

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

.autoTab {
	flex:0 0 auto; height:42px; 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;
}
.autoTab.on { border-color:var(--c_base2); background:var(--c_base2); color:#fff; }

/* ── 설비 목록 ── */
.autoList { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.autoList .autoItem { overflow:hidden; }
.autoList .autoItem.hide { display:none; }
.autoList .autoItem > a { display:block; height:100%; }

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

.autoList .body { display:flex; align-items:flex-start; gap:8px; padding:12px 12px 14px; }
.autoList .tx { flex:1 1 auto; min-width:0; }
.autoList .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;
}
.autoList .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 로 끝이 뭉툭한 + */
.autoList .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;
}
.autoList .autoItem > 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) {
	.autoList { grid-template-columns:1fr; }
}

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

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

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

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