@charset "UTF-8";
/* ============================================================
   GEC 제품 세부 페이지 공통 스타일
   gec-product.css 를 먼저 로드한 뒤 이 파일을 추가로 로드한다.
   (히어로 / 브레드크럼 / 컨테이너는 gec-product.css 재사용)
   ============================================================ */

/* ---------- 섹션 앵커 내비게이션 (브레드크럼 아래 고정) ---------- */
body .pd-anchor-nav {
	position:sticky; top:0; z-index:20;
	display:flex; gap:4px; flex-wrap:wrap;
	margin:0 0 44px; padding:8px 0;
	border-bottom:1px solid var(--line);
	background:rgba(255,255,255,0.94); backdrop-filter:blur(6px);
}
body .pd-anchor-nav a {
	font-family:"Inter","Noto Sans KR",sans-serif; font-size:13px; font-weight:500;
	color:var(--ink-500); text-decoration:none;
	padding:9px 16px; border-radius:8px; transition:color .2s, background .2s;
}
body .pd-anchor-nav a:hover { color:var(--navy-900); background:var(--bg-soft); }
body .pd-anchor-nav a.is-active { color:var(--accent); background:rgba(196,130,63,0.08); font-weight:700; }

/* ---------- 섹션 공통 ---------- */
body .pd-section { scroll-margin-top:80px; padding:0 0 72px; }
body .pd-section:last-of-type { padding-bottom:0; }
body .pd-section-head { margin:0 0 28px; }
body .pd-section-head .pd-eyebrow {
	display:block; font-family:"Inter",sans-serif; font-size:11px; font-weight:600;
	letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}
body .pd-section-head h2 {
	font-size:28px; font-weight:700; color:var(--navy-900);
	letter-spacing:-.6px; margin:0 0 10px; padding:0 0 14px; position:relative;
}
body .pd-section-head h2::after {
	content:""; position:absolute; left:0; bottom:0; width:44px; height:3px;
	background:var(--accent); border-radius:2px;
}
body .pd-section-head p { font-size:15px; color:var(--ink-500); margin:0; max-width:820px; line-height:1.75; }

/* ---------- 개요: 이미지 + 요약 2단 ---------- */
body .pd-overview { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:48px; align-items:start; }
body .pd-visual {
	background:#fff; border:1px solid var(--line); border-radius:16px;
	box-shadow:var(--shadow-card); overflow:hidden;
}
body .pd-visual-main {
	height:340px; display:flex; align-items:center; justify-content:center;
	padding:32px; background:#fff;
}
body .pd-visual-main img { max-width:100%; max-height:100%; object-fit:contain; }
body .pd-thumbs {
	display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--line-soft); background:var(--bg-soft);
}
body .pd-thumb {
	width:64px; height:64px; flex:0 0 auto; padding:6px; background:#fff; cursor:pointer;
	border:1px solid var(--line); border-radius:8px; transition:border-color .2s;
}
body .pd-thumb img { width:100%; height:100%; object-fit:contain; }
body .pd-thumb:hover, body .pd-thumb.is-active { border-color:var(--accent); }

body .pd-summary .pd-lead { font-size:16px; color:var(--ink-700); line-height:1.8; margin:0 0 26px; }

/* 핵심 항목 (제조사 / 계열 / 인증 …) */
body .pd-keyvalue { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:0 0 26px; }
body .pd-keyvalue > div { background:#fff; padding:16px 18px; }
body .pd-keyvalue dt { font-family:"Inter",sans-serif; font-size:11px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-400); margin:0 0 6px; }
body .pd-keyvalue dd { font-size:14.5px; font-weight:600; color:var(--navy-900); margin:0; line-height:1.5; }

/* 버튼 */
body .pd-actions { display:flex; flex-wrap:wrap; gap:10px; }
body .pd-btn {
	display:inline-flex; align-items:center; gap:8px;
	font-family:"Inter","Noto Sans KR",sans-serif; font-size:14px; font-weight:600;
	padding:13px 24px; border-radius:10px; text-decoration:none; transition:all .2s; border:1px solid transparent;
}
body .pd-btn svg { width:16px; height:16px; fill:currentColor; }
body a.pd-btn-primary { background:var(--navy-900); color:#fff; }
body a.pd-btn-primary:hover { background:var(--navy-700); color:#fff; text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow-elev); }
body a.pd-btn-ghost { background:#fff; color:var(--navy-900); border-color:var(--line); }
body a.pd-btn-ghost:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }

/* ---------- 주요 특징 카드 ---------- */
body .pd-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
body .pd-feature {
	background:var(--bg-soft); border:1px solid var(--line); border-radius:14px;
	padding:26px 24px; transition:border-color .25s, transform .25s, box-shadow .25s;
}
body .pd-feature:hover { border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow-elev); }
body .pd-feature-num {
	display:inline-flex; align-items:center; justify-content:center;
	width:34px; height:34px; border-radius:9px; margin-bottom:16px;
	background:var(--navy-900); color:var(--gold);
	font-family:"Inter",sans-serif; font-size:13px; font-weight:700;
}
body .pd-feature h3 { font-size:17px; font-weight:700; color:var(--navy-900); margin:0 0 9px; letter-spacing:-.3px; line-height:1.35; }
body .pd-feature p { font-size:14px; color:var(--ink-500); margin:0; line-height:1.7; }

/* ---------- 사양 표 ---------- */
body .pd-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:#fff; }
body .pd-spec-table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; }
body .pd-spec-table caption { caption-side:top; text-align:left; padding:16px 20px 0; font-size:13px; color:var(--ink-400); }
body .pd-spec-table th, body .pd-spec-table td { padding:15px 20px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top; }
body .pd-spec-table tr:last-child th, body .pd-spec-table tr:last-child td { border-bottom:0; }
body .pd-spec-table thead th { background:var(--navy-900); color:#fff; font-weight:600; font-size:13.5px; letter-spacing:.2px; border-bottom:0; }
body .pd-spec-table tbody th { width:230px; background:var(--bg-soft); color:var(--navy-900); font-weight:600; }
body .pd-spec-table td { color:var(--ink-700); }

/* ---------- 적용 분야 태그 ---------- */
body .pd-tags { display:flex; flex-wrap:wrap; gap:10px; }
body .pd-tag {
	font-size:14px; font-weight:500; color:var(--navy-700);
	background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 20px;
}

/* ---------- 자료 다운로드 ---------- */
body .pd-download-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
body a.pd-download {
	display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit;
	background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px;
	transition:border-color .2s, transform .2s, box-shadow .2s;
}
body a.pd-download:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-elev); color:inherit; text-decoration:none; }
body .pd-download-icon {
	flex:0 0 auto; width:42px; height:42px; border-radius:10px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(196,130,63,0.10);
}
body .pd-download-icon svg { width:20px; height:20px; fill:var(--accent); }
body .pd-download-text strong { display:block; font-size:14.5px; font-weight:600; color:var(--navy-900); margin-bottom:3px; }
body .pd-download-text span { font-family:"Inter",sans-serif; font-size:12px; color:var(--ink-400); }

/* ---------- 하단 문의 배너 ---------- */
body .pd-cta {
	margin-top:12px; border-radius:18px; padding:52px 48px; text-align:center; color:#fff;
	background:radial-gradient(120% 140% at 75% 20%, #295585 0%, #112c50 55%, #0a1f3d 100%);
}
body .pd-cta h2 { font-size:26px; font-weight:700; color:#fff; margin:0 0 12px; letter-spacing:-.5px; }
body .pd-cta p { font-size:15px; color:rgba(255,255,255,0.78); margin:0 0 26px; line-height:1.7; }
body .pd-cta .pd-actions { justify-content:center; }
body .pd-cta a.pd-btn-primary { background:var(--accent); }
body .pd-cta a.pd-btn-primary:hover { background:var(--accent-700); }
body .pd-cta a.pd-btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,0.35); }
body .pd-cta a.pd-btn-ghost:hover { border-color:#fff; color:#fff; background:rgba(255,255,255,0.08); }

/* ---------- 이전/다음 제품 ---------- */
body .pd-pager { display:flex; justify-content:space-between; gap:14px; margin-top:56px; padding-top:28px; border-top:1px solid var(--line); }
body a.pd-pager-link { display:flex; flex-direction:column; gap:4px; text-decoration:none; color:inherit; max-width:46%; }
body a.pd-pager-link:hover { text-decoration:none; color:inherit; }
body .pd-pager-label { font-family:"Inter",sans-serif; font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-400); }
body .pd-pager-title { font-size:15px; font-weight:600; color:var(--navy-900); transition:color .2s; }
body a.pd-pager-link:hover .pd-pager-title { color:var(--accent); }
body .pd-pager-next { text-align:right; margin-left:auto; }

/* ---------- 반응형 ---------- */
@media (max-width:1100px) {
	body .pd-overview { grid-template-columns:1fr; gap:32px; }
	body .pd-visual-main { height:300px; }
	body .pd-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
	body .pd-anchor-nav { margin-bottom:32px; overflow-x:auto; flex-wrap:nowrap; }
	body .pd-anchor-nav a { white-space:nowrap; padding:8px 12px; font-size:12.5px; }
	body .pd-section { padding-bottom:52px; }
	body .pd-section-head h2 { font-size:23px; }
	body .pd-visual-main { height:230px; padding:20px; }
	body .pd-feature-grid { grid-template-columns:1fr; }
	body .pd-download-list { grid-template-columns:1fr; }
	body .pd-cta { padding:40px 24px; }
	body .pd-cta h2 { font-size:21px; }
}
@media (max-width:576px) {
	body .pd-keyvalue { grid-template-columns:1fr; }
	body .pd-spec-table tbody th { width:140px; }
	body .pd-btn { width:100%; justify-content:center; }
	body .pd-pager { flex-direction:column; }
	body a.pd-pager-link { max-width:100%; }
	body .pd-pager-next { text-align:left; margin-left:0; }
}