@charset "utf-8";
/* B — Industrial Steel  (제가 권하는 중공업 방향)
   차콜 헤더·푸터로 장비 제조사의 무게를 준다. 블루는 강조에만 쓴다.
   면적을 차지하는 색이 회색 계열이라 제품 사진이 튀어 보인다. */

:root {
  --font:       "Pretendard", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", system-ui, sans-serif;
  --font-model: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  --font-spec:  var(--font);

  --accent:      #2f8fe0;
  --accent-dark: #1d76c4;
  --ink:         #1a1f25;
  --bg:          #ffffff;
  --bg-soft:     #f2f4f6;
  --line:        #d8dde3;
  --card-bg:     #ffffff;
  --placeholder: repeating-linear-gradient(45deg, #dfe4e9, #dfe4e9 10px, #d6dce2 10px, #d6dce2 20px);
  --shadow:       0 10px 30px rgba(0,0,0,.16);
  --shadow-hover: 0 10px 26px rgba(0,0,0,.14);

  --head-bg: #161b21;  --head-ink: #e8edf2;  --head-line: #2b333c;  --head-h: 76px;
  --sub-bg:  #ffffff;
  --hero-bg: linear-gradient(120deg, #161b21 0%, #232d38 60%, #2b3a49 100%);
  --hero-ink: #eef2f6;
  --phead-bg: #1a1f25;  --phead-ink: #e8edf2;

  --foot-bg: #10151a;  --foot-ink: #8c99a6;  --foot-strong: #ffffff;  --foot-line: #242c35;

  --radius: 2px;
  --wrap: 1220px;
  --fs-base: 16px;
  --fs-nav: 14.5px;
  --fs-hero: clamp(32px, 4.4vw, 52px);
  --fs-h1: clamp(26px, 3vw, 36px);
  --fs-h2: clamp(22px, 2.5vw, 30px);
  --fs-card: 15.5px;
  --w-title: 800;
  --w-model: 600;
  --ls-title: -.02em;
  --ls-model: .02em;
  --nav-gap: 2px;
  --hero-pad: 108px 0 96px;
  --sec-pad: 76px 0;
  --phead-pad: 46px 0 36px;
  --grid-gap: 20px;
  --card-min: 240px;
  --thumb-ratio: 4/3;
  --prod-cols: minmax(0,1.05fr) minmax(0,1fr);
  --rule: 3px solid var(--accent);

  --accent-light: #6fb4ee;
  --hero-h: 680px;
  --hero-veil: linear-gradient(95deg, rgba(11,15,20,.88) 0%, rgba(11,15,20,.62) 48%, rgba(11,15,20,.28) 100%);
  --vhero-h: 620px;
  --vhero-veil: linear-gradient(95deg, rgba(11,15,20,.86) 0%, rgba(11,15,20,.56) 52%, rgba(11,15,20,.26) 100%);
  --pbox-h: 236px;
  --ptop-pad: 104px 0 50px;
  --ptop-veil: linear-gradient(180deg, rgba(11,15,20,.74), rgba(11,15,20,.88));
  --cta-bg: #161b21;
  --wrap-text: 760px;
}

.gnb .sub a { color: #1a1f25; }

/* 히어로 위에 미세한 수직 격자 — 인더스트리얼 질감 */
.vhero__scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 72px); }
.page-head .crumb a:hover { color: var(--accent); }
.badge { border-radius: 0; }
.stats { border-radius: 0; }
.pgroup a { border-radius: 0; }
.grid .thumb { border-radius: 0; }
.spec th { background: #eef1f4; }