@charset "utf-8";
/* =====================================================
   공통 디자인 패턴 — 2개 이상 페이지에서 재사용하는 스타일만 작성
   단독 페이지 스타일은 각 [카테고리]/css/[페이지].css 에 작성
   세종산업 (SAEJONG IND.) — 앱 셸 / 모바일·태블릿 반응형 (PC는 최대 1400px 셸)
   ===================================================== */

:root {
	--bg2:#e3dbf1;
	--c_ink:#14181d;
	--c_muted:#5c6b7a;
	--c_line:#dde5f0;
	--c_soft:#eef3fa;
	--shadow1:0 6px 18px rgba(16,32,64,.07);
}

/* ── 섹션 래퍼 ── */
.sec { padding:26px 18px; }
.sec + .sec { padding-top:0; }
.sec.soft { background:var(--c_soft); padding-top:26px; }
.sec.pb0 { padding-bottom:0; }
.sec.auto {padding-top:12px;}

/* ── 섹션 타이틀 ── */
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px; }
.sec-head .eyebrow { display:block; margin-bottom:6px; color:var(--c_base1); font-size:var(--fs12); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-style: var(--f_en); color:#999;}
.sec-head .tit { font-family:var(--f_en), var(--f_title), var(--f_base1), sans-serif; color:var(--c_ink); font-size:var(--fs24); font-weight:800; letter-spacing:-.03em; line-height:1.3; }
.sec-head .sub { margin-top:7px; color:var(--c_muted); font-size:var(--fs13); line-height:1.6; }
.sec-head .more { display:inline-flex; align-items:center; gap:3px; flex:0 0 auto; padding-bottom:2px; color:var(--c_base2); font-size:var(--fs16); font-weight:700; white-space:nowrap; }
.sec-head .more .ico-arr { flex:0 0 auto; width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; padding-bottom:2px;}

/* ── 버튼 ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:48px; padding:0 20px; border-radius:8px; font-size:var(--fs15); font-weight:700; line-height:1; }
.btn.point { background:var(--c_base1); border:1px solid var(--c_base1); color:#fff; box-shadow:0 6px 16px rgba(27,84,178,.28); }
.btn.point:hover { background:#174a9e; }
.btn.dark  { background:var(--c_base2); border:1px solid var(--c_base2); color:#fff; }
.btn.line  { background:#fff; border:1px solid var(--c_line); color:var(--c_ink); }
.btn.line:hover { border-color:var(--c_base1); color:var(--c_base1); }
.btn.ghost { background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.34); color:#fff; }
.btn.full  { width:100%; }
.btn-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.btn-row.one { grid-template-columns:1fr; }

/* ── 카드 ── */
.card { position:relative; display:block; background:#fff; border:1px solid var(--c_line); border-radius:10px; box-shadow:var(--shadow1); }

/* ── 태그 ── */
.tag-row { display:flex; flex-wrap:wrap; gap:5px; }
.tag-row span { padding:5px 8px; border:1px solid var(--c_line); border-radius:5px; background:var(--c_soft); color:#6a7b8d; font-size:var(--fs12); font-weight:700; line-height:1; }

/* ── 다크 밴드 (CTA) ── */
.dark-band { position:relative; overflow:hidden; padding:24px 20px; border-radius:10px; background:linear-gradient(135deg, var(--c_base2) 0%, var(--c_base1) 100%); color:#fff; }
.dark-band:before { content:""; position:absolute; right:16px; top:16px; width:9px; height:9px; border-right:2px solid var(--c_base4); border-top:2px solid var(--c_base4); }
.dark-band .eyebrow { color:#9dc0f5; font-size:var(--fs12); font-weight:700; letter-spacing:.08em; }
.dark-band .tit { font-family:var(--f_en), var(--f_title), var(--f_base1), sans-serif; margin:9px 0 8px; font-size:var(--fs22); font-weight:800; letter-spacing:-.02em; }
.dark-band .txt { margin-bottom:18px; color:#c8d8ef; font-size:var(--fs13); line-height:1.65; }

/* ── 공정 플로우 ── */
.flow { display:grid; gap:7px; }
.flow .box { padding:14px 12px; border:1px solid var(--c_line); border-radius:8px; background:#fff; color:var(--c_ink); font-size:var(--fs14); font-weight:800; text-align:center; }
.flow .box em { display:block; margin-top:4px; color:#8b99ab; font-size:var(--fs12); font-weight:600; font-style:normal; }
.flow .arrow { color:var(--c_base4); font-size:var(--fs16); font-weight:800; text-align:center; line-height:1; }

/* ── 단계 리스트 ── */
.step-list { display:grid; gap:9px; }
.step-list .step { display:grid; grid-template-columns:40px 1fr; gap:13px; align-items:start; padding:16px; border:1px solid var(--c_line); border-radius:8px; background:#fff; }
.step-list .step .num { width:40px; height:40px; border-radius:6px; background:var(--c_base2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:var(--fs14); font-weight:700; }
.step-list .step .tit { font-family:var(--f_en), var(--f_title), var(--f_base1), sans-serif; margin-bottom:4px; color:var(--c_ink); font-size:var(--fs16); font-weight:800; }
.step-list .step .txt { color:var(--c_muted); font-size:var(--fs13); line-height:1.6; }

/* ── 정보 테이블 (모바일 세로형) ── */
.info-table { width:100%; border-top:2px solid var(--c_base2); }
.info-table th, .info-table td { display:block; width:100%; text-align:left; }
.info-table th { padding:11px 14px; background:var(--c_soft); color:var(--c_ink); font-size:var(--fs13); font-weight:700; }
.info-table td { padding:12px 14px; border-bottom:1px solid var(--c_line); color:var(--c_muted); font-size:var(--fs14); line-height:1.6; }
.info-table td a:hover { color:var(--c_base1); }

/* ── 폼 ── */
.form-box { display:grid; gap:9px; }
.form-box input, .form-box select, .form-box textarea {
	width:100%; height:48px; padding:0 14px;
	border:1px solid var(--c_line); border-radius:8px; background:#fff;
	color:var(--c_ink); font-size:var(--fs14); outline:none;
}
.form-box textarea { height:120px; padding:13px 14px; line-height:1.6; resize:vertical; }
.form-box input:focus, .form-box select:focus, .form-box textarea:focus { border-color:var(--c_base1); }
.form-box .row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.form-box .privacy { color:#93a5b8; font-size:var(--fs12); line-height:1.6; }
.form-result { display:none; margin-top:11px; padding:15px; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:#0f1a2e; color:#dbe6f2; font-size:var(--fs12); line-height:1.75; white-space:pre-wrap; }
.form-result.on { display:block; }

/* ── 리스트 공통 (사진 + 본문) ── */
.media-list { display:grid; gap:12px; }
.media-list .item { overflow:hidden; }
.media-list .pic { display:block; height:180px; background:var(--c_soft); }
.media-list .pic img { width:100%; height:100%; object-fit:cover; display:block; }
.media-list .pic.contain img { object-fit:contain; padding:14px; }
.media-list .body { padding:16px; border-top:3px solid var(--c_base1); }
.media-list .body small { display:block; color:var(--c_base1); font-size:var(--fs12); font-weight:700; letter-spacing:.05em; }
.media-list .body strong { font-family:var(--f_en), var(--f_title), var(--f_base1), sans-serif; display:block; margin:6px 0 6px; color:var(--c_ink); font-size:var(--fs18); font-weight:800; letter-spacing:-.02em; }
.media-list .body p { margin-bottom:11px; color:var(--c_muted); font-size:var(--fs13); line-height:1.6; }

/* ── 빈 결과 ── */
.empty { display:none; padding:44px 18px; border:1px solid var(--c_line); border-radius:10px; background:#fff; text-align:center; }
.empty.on { display:block; }
.empty strong { display:block; margin-bottom:6px; color:var(--c_ink); font-size:var(--fs16); font-weight:800; }
.empty p { color:var(--c_muted); font-size:var(--fs13); }

/* ── 상세 본문 ── */
.detail-body { white-space:pre-line; color:var(--c_muted); font-size:var(--fs14); line-height:1.85; }

/* ── GEO/AEO 요약 블록 (크롤러 전용) ── */
.sr-geo { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ── 목록 레코드 정보 (전체 건수 · 현재 페이지) ── */
.list-info { margin-bottom:12px; color:#8b99ab; font-size:var(--fs14); }
.list-info b { color:var(--c_base1); font-weight:800; }

/* ── 페이징 (모바일 : 이전 · 다음 · 페이지 선택) ──
   마크업은 EBIWEB 공통 페이징(.page_box > ul.mobile) 규격 그대로 사용.
   · header.css 의 .app .mobile{display:block!important} 보다 뒤에 오도록
     선택자에 ul 을 명시해 우선순위를 올린다 (안 그러면 세로로 쌓임).
   · 화살표는 외부 이미지 파일 없이 인라인 SVG(data URI)로 그린다 —
     stroke-linecap/linejoin:round 로 모서리가 뭉툭한 "＜ ＞" 모양. */
.page_box { position:relative; margin-top:26px; text-align:center; }
.page_box ul.mobile {
	display:flex !important; flex-wrap:nowrap; align-items:center; justify-content:center; gap:8px;
	margin:0; padding:0; list-style:none;
}
.page_box ul.mobile > li { margin:0; padding:0; list-style:none; }
.page_box ul.mobile label { display:none; }

/* 이전 · 다음 (원형 버튼) */
.page_box ul.mobile > li > a.prev,
.page_box ul.mobile > li > a.next {
	display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0;
	border:1px solid var(--c_line); border-radius:50%;
	background-color:#fff; background-repeat:no-repeat; background-position:50% 50%; background-size:16px 16px;
}
.page_box ul.mobile > li > a.prev {
	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%3Cpath%20d='M10%203.5%205.5%208%2010%2012.5'%20fill='none'%20stroke='%238b99ab'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page_box ul.mobile > li > a.next {
	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%3Cpath%20d='M6%203.5%2010.5%208%206%2012.5'%20fill='none'%20stroke='%238b99ab'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page_box ul.mobile > li > a.prev:hover,
.page_box ul.mobile > li > a.next:hover { border-color:var(--c_base1); background-color:var(--c_soft); }
.page_box ul.mobile > li > a.prev:hover {
	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%3Cpath%20d='M10%203.5%205.5%208%2010%2012.5'%20fill='none'%20stroke='%231b54b2'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page_box ul.mobile > li > a.next:hover {
	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%3Cpath%20d='M6%203.5%2010.5%208%206%2012.5'%20fill='none'%20stroke='%231b54b2'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 페이지 선택 */
.page_box ul.mobile select {
	min-width:78px; height:38px; padding:0 10px 0 14px;
	border:1px solid var(--c_line); border-radius:8px; background:#fff;
	color:var(--c_ink); font-size:var(--fs14); font-weight:700; text-align:center; outline:none;
}
.page_box ul.mobile select:focus { border-color:var(--c_base1); }

/* ── 동영상 레이어팝업 (자동화설비 · 표준품 상세 "동영상 보기") ──
   마크업은 script/ebi.js 가 body 끝에 1개만 생성한다.
   페이지에서는 버튼에 data-video="유튜브 주소" 만 넣으면 된다. */
.vidModal {
	display:none; position:fixed; left:0; top:0; right:0; bottom:0; z-index:500;
	align-items:center; justify-content:center; padding:18px;
}
.vidModal.on { display:flex; }
.vidModal .vidDim {
	position:absolute; left:0; top:0; right:0; bottom:0;
	background:rgba(8,14,24,.8); opacity:0; transition:opacity .25s;
}
.vidModal.show .vidDim { opacity:1; }

.vidModal .vidBox {
	position:relative; width:100%; max-width:960px;
	opacity:0; transform:translateY(14px); transition:opacity .25s, transform .25s;
}
.vidModal.show .vidBox { opacity:1; transform:none; }

/* 제목 + 닫기 */
.vidModal .vidHead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.vidModal .vidTit {
	min-width:0; color:#fff; font-size:var(--fs20); font-weight:700; line-height:1.4;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vidModal .vidClose {
	flex:0 0 auto; width:38px; height:38px; padding:0; border-radius:50%;
	border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1);
	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='%23ffffff'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Cpath%20d='M4%204%2012%2012M12%204%204%2012'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:50% 50%; background-size:16px 16px;
	transition:background-color .2s;
}
.vidModal .vidClose:hover { background-color:rgba(255,255,255,.24); }

/* 영상 (16:9 고정) */
.vidModal .vidFrame {
	position:relative; aspect-ratio:16 / 9; border-radius:10px; overflow:hidden;
	background:#000; box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.vidModal .vidFrame iframe { position:absolute; left:0; top:0; width:100%; height:100%; border:0; display:block; }

/* 768px 이하 : 영상을 화면 가로 꽉 차게 (좌우 여백 · 모서리 라운드 제거)
   제목·닫기 줄만 안쪽 여백을 유지한다 */
@media screen and (max-width: 768px) {
	.vidModal { padding:0; }
	.vidModal .vidBox { max-width:none; }
	.vidModal .vidHead { margin-bottom:12px; padding:0 16px; }
	.vidModal .vidFrame { border-radius:0; box-shadow:none; }
}

@media screen and (max-width: 360px) {
	.vidModal .vidHead { padding:0 14px; }
	.vidModal .vidTit { font-size:var(--fs18); }
}

/* ════════════════════════════════════════════════════════════
   태블릿 이상 (600px~) — 공통 패턴 확장
   ════════════════════════════════════════════════════════════ */
@media screen and (min-width: 600px) {

	.sec { padding:36px 26px; }
	.sec.auto {padding-bottom:48px; padding-top:12px;}
	.sec.soft { padding-top:48px; }

	.sec-head { margin-bottom:22px; }
	.sec-head .sub { max-width:62ch; }

	.btn { height:52px; padding:0 24px; }
	.btn-row { gap:12px; }

	.dark-band { padding:32px 28px; }
	.dark-band .txt { margin-bottom:22px; max-width:62ch; }

	/* 공정 플로우 — 가로 배치 */
	.flow { grid-auto-flow:column; align-items:center; justify-content:center; gap:10px; }
	.flow .box { min-width:150px; padding:18px 14px; }
	.flow .arrow { transform:rotate(-90deg); }

	.step-list { gap:12px; }
	.step-list .step { grid-template-columns:48px 1fr; gap:18px; padding:20px 22px; }
	.step-list .step .num { width:48px; height:48px; }

	/* 정보 테이블 — 라벨/값 2단 복원 */
	.info-table th, .info-table td { display:table-cell; width:auto; vertical-align:middle; }
	.info-table th { width:180px; padding:16px 20px; border-bottom:1px solid var(--c_line); }
	.info-table td { padding:16px 20px; }

	.form-box { gap:11px; }
	.form-box input, .form-box select, .form-box textarea { height:52px; }
	.form-box textarea { height:150px; }
	.form-box .row2 { gap:11px; }

	/* 사진+본문 리스트 — 가로 배치 */
	.media-list { gap:14px; }
	.media-list .item { display:block; }
	.media-list .item > a { display:grid; grid-template-columns:280px 1fr; }
	.media-list .pic { height:100%; min-height:196px; }
	.media-list .pic.contain img { padding:18px; }
	.media-list .body { padding:22px 24px; border-top:0; border-left:3px solid var(--c_base1); }
	.media-list .body strong { font-size:var(--fs20); }
	.media-list .body p { max-width:52ch; }

	.empty { padding:56px 24px; }
	.detail-body { max-width:70ch; }
}

/* ════════════════════════════════════════════════════════════
   PC (1024px~) — 최대 1400px 셸 : 좌우 여백 확대 + 다단 배치
   ════════════════════════════════════════════════════════════ */
@media screen and (min-width: 1024px) {
	.sec { padding:48px 40px; }

	/* 사진+본문 리스트 — 2열 */
	.media-list { grid-template-columns:1fr 1fr; gap:18px; }
}