@charset "utf-8";
/* =====================================================
   자동화설비 상세 — automation/css/view.css
   구성 : 이미지 갤러리 → 제품명 → 설명 → 자료 버튼 → 목록으로
   ===================================================== */

/* ── 이미지 갤러리 ── */
.vwGallery { margin-bottom:18px; }
.vwMain {
	aspect-ratio:1 / 0.7; border:1px solid var(--c_line); border-radius:10px;
	background:#fff; overflow:hidden;
}
.vwMain img { width:100%; height:100%; object-fit:contain; display:block; }

/* 썸네일 — 5칸 고정 그리드 : 5개면 가로 100%, 4개 이하면 오른쪽이 비고 크기는 그대로
   (reset.css 의 ul.d-page 보다 우선하도록 ul 명시) */
ul.vwThumbs {
	display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin-top:14px; padding:0;
}
.vwThumbs > li:nth-child(n+6) { display:none; }	/* 6번째부터는 노출하지 않음 */
.vwThumbs button {
	display:block; width:100%; aspect-ratio:1 / 0.7; padding:0;
	border:1px solid var(--c_line); border-radius:8px; background:var(--c_soft); overflow:hidden;
	transition:border-color .2s;
}
.vwThumbs button img { width:100%; height:100%; object-fit:cover; display:block; }
.vwThumbs button.on { border-color:var(--c_base1); box-shadow:0 0 0 1px var(--c_base1) inset; }

/* 500px 이하 : 3칸 고정 그리드 (5개면 3 + 2 두 행) */
@media screen and (max-width: 500px) {
	ul.vwThumbs { grid-template-columns:repeat(3, 1fr); }
}

/* ── 제품명 ── */
.vwTit {
	font-family:var(--f_en), var(--f_title), var(--f_base1), sans-serif;
	padding-bottom:16px; border-bottom:1px solid var(--c_line);
	color:var(--c_ink); font-size:var(--fs24); font-weight:800; letter-spacing:-.03em; line-height:1.3;
}

/* ── 제품 설명 ── */
.vwDescBox { padding:22px 0; border-bottom:1px solid var(--c_line); }
.vwDescBox ul { list-style:none; padding:0; margin:0; }	/* ul 에 d-page 리셋이 없으므로 여기서 직접 리셋 */
.vwDescBox li {
	position:relative; padding-left:13px; color:var(--c_muted);
	font-size:var(--fs14); line-height:1.7; word-break:keep-all;
}
.vwDescBox li + li { margin-top:8px; }
.vwDescBox li:before {
	content:""; position:absolute; left:0; top:.72em; width:4px; height:4px;
	background:var(--c_base4);
}

/* ── 자료 버튼 ──
   아이콘은 외부 이미지 없이 인라인 SVG(data URI), stroke-linecap/linejoin:round */
.vwLinks { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:22px; }
/* a:link{color:inherit} 보다 우선하도록 부모 클래스까지 명시 (한 클래스만 쓰면 글자색이 회색으로 죽음) */
.vwLinks .vwBtn {
	display:flex; align-items:center; justify-content:space-between; gap:8px;
	min-height:56px; padding:0 18px; border-radius:8px;
	color:#fff; font-size:var(--fs15); font-weight:700; line-height:1.35;
	background-repeat:no-repeat; background-position:calc(100% - 18px) 50%; background-size:18px 18px;
	transition:filter .2s;
}
.vwLinks .vwBtn:hover { filter:brightness(1.12); }
.vwLinks .vwBtn.brochure { background-color:var(--c_base1); }
.vwLinks .vwBtn.manual   { background-color:var(--c_base3); }
.vwLinks .vwBtn.movie    { background-color:#2b7a72; }

/* 버튼 개수 대응 — 항상 1행 2열(각 50%)로 채우고,
   개수가 홀수일 때만 마지막 버튼이 한 행을 다 쓴다.
   (3개 : 2개 + 전체폭 1개 / 2개 : 50%씩 / 1개 : 전체폭) */
.vwLinks .vwBtn:last-child:nth-child(odd) { grid-column:1 / -1; }

/* 돋보기 아이콘 (브로슈어 · 매뉴얼) */
.vwLinks .vwBtn.brochure,
.vwLinks .vwBtn.manual {
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='7.7'%20cy='7.7'%20r='4.9'/%3E%3Cpath%20d='M11.4%2011.4%2015.2%2015.2'/%3E%3C/g%3E%3C/svg%3E");
}
/* 동영상 아이콘 */
.vwLinks .vwBtn.movie {
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%3E%3Crect%20x='2'%20y='4.5'%20width='10'%20height='9'%20rx='2'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.6'%20stroke-linejoin='round'/%3E%3Cpath%20d='M12%208.4%2015.4%206.2a.6.6%200%200%201%20.9.5v4.6a.6.6%200%200%201-.9.5L12%209.6z'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.6'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── 목록 ── */
.vwFoot { display:flex; justify-content:center; margin-top:26px; padding-top:26px; border-top:1px solid var(--c_line); }
.vwFoot .vwList {
	display:inline-flex; align-items:center; justify-content:center; gap:9px;
	min-width:120px; height:48px; padding:0 22px; border-radius:8px;
	border:1px solid var(--c_line); background:var(--c_soft); color:var(--c_ink); font-size:var(--fs15); font-weight:700;
}
/* 목록 아이콘 (텍스트 오른쪽) */
.vwFoot .vwList:after {
	content:""; flex:0 0 auto; width:16px; height:16px; margin-top:-2px;	/* 한글 글리프 광학 중심에 맞춤 (라인박스 중앙보다 위) */
	background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3E%3Cg%20fill='none'%20stroke='%2314181d'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M6%203.5h8M6%208h8M6%2012.5h8'/%3E%3Cpath%20d='M2.3%203.5h.01M2.3%208h.01M2.3%2012.5h.01'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50% / 16px 16px;
}
.vwFoot .vwList:hover { border-color:var(--c_base1); background:#fff; color:var(--c_base1); }
.vwFoot .vwList:hover:after {
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3E%3Cg%20fill='none'%20stroke='%231b54b2'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M6%203.5h8M6%208h8M6%2012.5h8'/%3E%3Cpath%20d='M2.3%203.5h.01M2.3%208h.01M2.3%2012.5h.01'/%3E%3C/g%3E%3C/svg%3E");
}
.vwFoot .vwList:hover { border-color:var(--c_base1); background:#fff; color:var(--c_base1); }

@media screen and (max-width: 360px) {
	.vwLinks { gap:7px; }
	.vwLinks .vwBtn { padding:0 13px; background-position:calc(100% - 13px) 50%; font-size:var(--fs14); }
}

/* ── 태블릿 이상 (600px~) ── */
@media screen and (min-width: 600px) {
	.vwGallery { margin-bottom:24px; }
	ul.vwThumbs { gap:10px; margin-top:18px; }

	.vwTit { padding-bottom:20px; font-size:var(--fs28); }
	.vwDescBox { padding:28px 0; }
	.vwDescBox li { max-width:70ch; font-size:var(--fs15); }

	.vwLinks { gap:12px; margin-top:28px; }
	.vwLinks .vwBtn { min-height:62px; padding:0 22px; font-size:var(--fs16); }

	.vwFoot { margin-top:32px; padding-top:32px; }
	.vwFoot .vwList { min-width:140px; height:52px; }
}

/* ── PC (1024px~) : 왼쪽 갤러리 · 오른쪽 제품명/설명/자료 2단 ── */
@media screen and (min-width: 1024px) {
	.sec:has(> .vwGallery) {
		display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
		grid-template-rows:auto auto 1fr; column-gap:48px; align-items:start;
	}
	.vwGallery { grid-column:1; grid-row:1 / span 3; margin-bottom:0; }
	.vwTit, .vwDescBox, .vwLinks { grid-column:2; }
	.vwFoot { grid-column:1 / -1; margin-top:48px; padding-top:48px; }
}