/* =========================================================
   대신파워 - 브랜드 오버라이드 + 대신파워 전용 컴포넌트
   style.css(신규 디자인 공통) 뒤에 로드한다.
   색상은 변수만 바꿔서 디자인 구조는 그대로 유지한다.
   ========================================================= */
:root {
  --green: #0a5ca8;        /* 메인 컬러 (기존 사이트 타이틀 블루 #006ca8 계열) */
  --green-light: #2f8fe0;
  --green-pale: #eaf2fb;
  --accent: #e60012;       /* 로고 레드 */
  --on-dark: #7cc0ff;      /* 어두운 배경 위 강조색 (원본 #8dc540 대체) */
  --navy: #0d1b2a;
}

/* ---------- 원본 디자인에 하드코딩된 그린 계열 치환 ---------- */
.section.dark { background: var(--navy); }
.section.dark .sec-label, .section.green .sec-label { color: var(--on-dark); }
.section.dark .stat .value { color: var(--on-dark); }
.section.dark .chip { background: rgba(124, 192, 255, .15); color: #b9defc; }
.timeline .era-title strong { color: var(--green); }
.cta-box { background: linear-gradient(120deg, #06345f, var(--green) 60%, #2f8fe0); }
.top-btn { box-shadow: 0 8px 24px rgba(10, 92, 168, .35); }
.sub-hero { background: var(--navy); }
.footer { background: #0b121a; }

/* ---------- 로고 ---------- */
/* 로고: 사용자 업로드 upload/logo.png(171x109)를 흰 배경 투명화·여백 제거해 사용 (152x32, 고해상도 화면에서는 흐릴 수 있음).
   이전 벡터 버전(logo.svg, logo_w.svg)은 남겨 둠 → 되돌리려면 아래 4줄의 .png를 .svg로, 폭 160/140px를 135/118px로. 좌측 여백에서 오른쪽으로 30px(모바일 10px) 이동 */
.header .logo a { width: 160px; height: 40px; margin-left: 30px; background: url(../images/daesin/common/logo_w.png?v=20261002b) no-repeat left center / contain; }
.header.scrolled .logo a, .header.solid .logo a, .header.menu-open .logo a { background-image: url(../images/daesin/common/logo.png?v=20261002b); }
@media (max-width: 1024px) { .header .logo a { width: 140px; height: 35px; margin-left: 10px; } }
@media (max-width: 768px) { .header .logo a { width: 120px; height: 30px; } }  /* 휴대폰에서 로고가 커 보여 140→120px (사용자 요청 2026-10-22) */
.footer .f-logo { width: 160px; height: 40px; background: url(../images/daesin/common/logo_w.png?v=20261002b) no-repeat left center / contain; }
.footer .sitemap { grid-template-columns: repeat(4, 1fr); }
/* 푸터 상단 사이트맵 글자 키움 (제목 16→20px, 하위메뉴 14→16px) - 사용자 요청 2026-10-06 */
.footer .sitemap h5 { font-size: 20px; margin-bottom: 20px; }
.footer .sitemap li { font-size: 16px; margin-bottom: 12px; }
.footer .f-info { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }
/* 푸터 하단 (사용자 요청 2026-10-06): 글자 14→16px.
   회사정보(상호·대표·사업자번호 / 전화·팩스)는 main.js에서 오른쪽 견적문의·카탈로그 버튼 아래(.f-infos)로 옮기고 오른쪽 정렬. 주소는 왼쪽 Copyright 위. 768px 이하는 모두 왼쪽 정렬로 세로 배치
   (사용자 요청 2026-10-08) 개인정보처리방침·주소·Copyright는 상단 사이트맵 '회사소개'와 같은 시작선. 1025px 이상 배치는 아래 '푸터 하단 3줄 격자' 참고 */
@media (min-width: 769px) {
  .footer .bot { align-items: flex-end; } /* 양쪽 아래 끝을 맞춰 '주소'↔'(주)대신파워', 'Copyright'↔'대표전화' 줄이 수평 (사용자 요청 2026-10-08, 이전 center) */
  .footer .f-infos .f-info + .f-info { margin-top: 10px; } /* 오른쪽 두 줄 간격 8 → 10px: 왼쪽 주소↔Copyright 간격(10px)과 같게 */
  .footer .f-infos .f-info { justify-content: flex-end; }
  .footer .f-infos { text-align: right; }
  .footer .f-right { margin-left: auto; } /* 좁은 화면에서 아래 줄로 내려가도 오른쪽 끝에 붙게 */
}
.footer .bot { font-size: 16px; }
.footer .f-info { margin-top: 8px; }
.footer .f-infos { margin-top: 6px; }
.footer .f-links a:hover { color: var(--white); }
/* 개인정보처리방침 | 이용약관 구분선 (f-links 간격 20px 가운데) */
.footer .f-links a + a::before { content: '|'; margin-right: 20px; color: rgba(255, 255, 255, .3); font-weight: 400; }
/* 푸터 하단 3줄 격자 (사용자 요청 2026-10-08): 1줄 = 개인정보처리방침|이용약관(로고는 2026-10-13 상단 .top으로 옮김) · (오른쪽) 견적문의·카탈로그 버튼을 수평으로,
   2줄 = 주소 ↔ (주)대신파워·대표·사업자번호, 3줄 = Copyright ↔ 대표전화·팩스. 왼쪽/오른쪽 묶음과 회사정보 묶음은 display: contents로 풀어 한 격자에 배치.
   약관 링크는 컨테이너 시작선에서 시작. 1099px 이하는 기존 배치(줄바꿈·세로 쌓기)
   (격자 시작 1025 → 1100px, 2026-10-08: 약관 18px·아래 줄 17px로 키운 뒤 1025~1050px에서 약관 링크가 줄바꿈돼서) */
@media (min-width: 1100px) {
  .footer .bot { display: grid; grid-template-columns: auto 1fr auto; gap: 0; align-items: center; position: relative; } /* gap 0: style.css의 flex 간격(30px)이 격자 간격으로 들어가지 않게. 1줄 로고·약관·버튼은 세로 가운데로 수평 (위끝 맞춤은 사용자 요청으로 되돌림 2026-10-08) */
  .footer .bot > div:first-child, .footer .f-right, .footer .f-infos { display: contents; }
  .footer .bot .f-links { grid-area: 1 / 2; margin: 0; }
  .footer .f-right .btn-wrap { grid-area: 1 / 3; justify-self: end; }
  .footer .bot > div:first-child > .f-info { grid-area: 2 / 1 / 3 / 3; margin-top: 72px; } /* 1줄(버튼)과 주소·사업자등록번호 줄 간격 24 → 40 → 56 → 72px (사용자 요청 2026-10-08, 약관 링크 ↔ 주소 64 → 80px) */
  .footer .bot > div:first-child > p:last-child { grid-area: 3 / 1 / 4 / 3; }
  .footer .f-infos .f-info { grid-column: 3; justify-self: end; margin-top: 72px; }
  .footer .f-infos .f-info + .f-info { grid-row: 3; margin-top: 10px; }
  .footer .f-infos .f-info:first-child { grid-row: 2; }
}
/* 푸터 로고를 상단(.top) 왼쪽으로, 오른쪽 남은 자리에 사이트맵 (사용자 요청 2026-10-13).
   로고 왼쪽 끝 = 컨테이너 시작선 = 아래 '개인정보처리방침' 시작선. 하단 격자 1열(로고 자리)은 비어서 폭 0. 768px 이하는 로고 아래에 사이트맵 */
.footer .top .container { display: flex; align-items: flex-start; gap: 80px; }
.footer .top .f-logo { flex: none; margin: 0; }
.footer .top .sitemap { flex: 1; min-width: 0; }
@media (max-width: 1024px) { .footer .top .container { gap: 48px; } }
@media (max-width: 768px) { .footer .top .container { flex-direction: column; gap: 36px; } .footer .top .sitemap { width: 100%; } }
/* 푸터 메뉴 4열 간격 줄임: 열 폭을 내용 폭으로, 사이트맵 최대 폭 900px 안에서 양 끝 정렬 (이전: 남는 폭 전체를 4등분) - 사용자 요청 2026-10-16 */
@media (min-width: 1025px) { .footer .top .sitemap { grid-template-columns: repeat(4, max-content); justify-content: space-between; max-width: 900px; } }
@media (max-width: 1200px) { .footer .sitemap { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .footer .sitemap { grid-template-columns: repeat(2, 1fr); } }
/* 사이트맵 열을 오른쪽으로 조금 밀고(로고↔회사소개 80 → 140 → 110 → 90px), 마지막 열 '자료실' 끝을 아래 컨테이너 끝(카탈로그 버튼 오른쪽 끝)에 맞춤 (사용자 요청 2026-10-13).
   769px 이상은 4열을 글자 폭대로 두고 사이 간격을 균등 분배(space-between). 768px 이하는 기존 2열 격자 */
@media (min-width: 769px) {
  .footer .top .container { gap: 90px; }
  .footer .top .sitemap { display: flex; justify-content: space-between; gap: 30px; }
}
@media (min-width: 769px) and (max-width: 1024px) { .footer .top .container { gap: 56px; } }

/* ---------- 서브 히어로 (기존 사이트 섹션별 컬러 비주얼 계승) ---------- */
.sub-hero { height: 320px; min-height: 260px; } /* 440 → 320px: 본문이 너무 아래에서 시작해서 줄임, 글자는 그대로 (사용자 요청 2026-10-20) */
.sub-hero .bg { background-repeat: no-repeat; background-position: right center; background-size: auto 100%; }
.sub-hero .bg { transform: none; animation: none; } /* 첫 화면 2.4초 확대/축소 효과(style.css heroZoom) 제거 - 사용자 요청 */
.sub-hero::after { background: linear-gradient(90deg, rgba(5, 12, 20, .55) 0%, rgba(5, 12, 20, .15) 55%, rgba(5, 12, 20, .25) 100%); }
.sub-hero .bg.v-support { background: #d0d3d8 url(../images/daesin/visual/hero-company-metertech.jpg?v=20261007l) no-repeat right -160px center / auto 130%; } /* 장면 위치: 오른쪽 끝에서 -160px (220px 왼쪽으로 옮겼던 것을 110px → 160px 되돌림, 사용자 요청 2026-10-07) */ /* 고객센터(2026-10-08부터, 원래 회사소개용): upload/metertech.png (사용자 요청 2026-10-07)
   cover 는 너무 확대돼 보여서(사용자 요청) 높이 130% 로 줄이고 오른쪽 정렬. 왼쪽 빈 곳이 생기지 않게 이미지 왼쪽 끝 색을 2200px 늘려 붙이고,
   너무 오른쪽에 붙어 보여서(사용자 요청) 오른쪽 끝도 300px 회색으로 서서히 사라지게 늘려 붙인 버전(3876×768)을 씀 → 장면이 약 220px 왼쪽으로 */
.sub-hero .bg.v-products { background-color: #0b1a2c; background-image: url(../images/daesin/visual/hero-products-wave2.jpg); background-position: center; background-size: cover; } /* 제품소개: upload/wave2.jpg (사용자 요청 2026-10-06, wave.png에서 교체), 화면 전체 장면이라 cover */
.sub-hero:has(.bg.v-archive)::after { background: linear-gradient(90deg, rgba(5, 12, 20, .78) 0%, rgba(5, 12, 20, .5) 50%, rgba(5, 12, 20, .3) 100%); } /* 제목·경로 가독성 */
/* 제품소개 파형 이미지가 너무 튀어서 덜 보이게 (사용자 요청 2026-10-06): 덮개 .78/.5/.3 → .85/.68/.55, 이미지 채도 70%·밝기 85% */
.sub-hero:has(.bg.v-products)::after { background: linear-gradient(90deg, rgba(5, 12, 20, .85) 0%, rgba(5, 12, 20, .68) 50%, rgba(5, 12, 20, .55) 100%); }
.sub-hero .bg.v-products { filter: saturate(.7) brightness(.85); }
/* 고객센터: 위 metertech 규칙 사용 (사용자 요청 2026-10-08). 이전 고객센터 이미지 = hero-support-customer.jpg (cover, 가운데, 배경색 #0e2a52) */
.sub-hero .bg.v-company  { background-color: #050b18; background-image: url(../images/daesin/visual/hero-company-city.jpg); background-position: center; background-size: cover; } /* 회사소개: upload/company.png (1376×768, 사용자 요청 2026-10-08) → EDSR 2배 업스케일 후 2400×1340. 화면 전체 장면이라 cover. 이전 metertech는 고객센터로 이동 */
.sub-hero:has(.bg.v-company)::after { background: linear-gradient(90deg, rgba(5, 12, 20, .72) 0%, rgba(5, 12, 20, .4) 50%, rgba(5, 12, 20, .2) 100%); } /* 건물 선이 촘촘해 경로·제목 가독성 위해 왼쪽을 더 어둡게 (기본 .55/.15/.25) */
.sub-hero .bg.v-archive  { background-color: #1b2226; background-image: url(../images/daesin/visual/hero-archive-station.jpg); background-position: center; background-size: cover; } /* 자료실: upload/power_station.png (사용자 요청 2026-10-06) */
@media (max-width: 768px) { .sub-hero { height: 260px; } /* 360 → 260px (같은 요청) */ .sub-hero .bg { background-position: 70% center; } }
@media (max-width: 768px) { .sub-hero .bg.v-support { background-size: auto 100%; background-position: 83% center; } } /* 모바일 고객센터(metertech): 글자 뒤에 이미지가 너무 크게 깔리지 않게 높이에 맞춤 */

/* ---------- 제품 상세 ---------- */
.prod-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 48px; }
.prod-tabs a { padding: 12px 22px; border-radius: 30px; border: 1px solid var(--gray-300); font-weight: 600; font-size: 15px; transition: all .2s; }
.prod-tabs a:hover { border-color: var(--gray-900); }
.prod-tabs a.active { background: var(--gray-900); border-color: var(--gray-900); color: var(--white); }
.prod-panel { display: none; }
.prod-panel.active { display: block; animation: fadeUp .5s var(--ease); }

.prod-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-bottom: 80px; }
.prod-head .photos { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 90px); }
.prod-head .photos.n2 { grid-template-columns: 1fr 1fr; }
.prod-head .photos.n3 { grid-template-columns: repeat(3, 1fr); }
.prod-head .photos figure { background: #f3f4f6; border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.prod-head .photos img { max-height: 420px; width: auto; mix-blend-mode: multiply; }
.prod-head .photos.n2 img, .prod-head .photos.n3 img { max-height: 300px; }
.prod-head .photos.n4 { grid-template-columns: 1fr 1fr; } /* 사진 4장(누전경보기 DLA/DLR, 영상변류기) 2×2 - 2026 카탈로그 반영 2026-10-13 */
.prod-head .photos.n4 img { max-height: 260px; }
.prod-head .photos.n5 { grid-template-columns: 1fr 1fr; } /* 사진 5장(영상변류기 + 고객 첨부 zct_5) 2열, 마지막 장 가운데 - 2026-10-20 */
.prod-head .photos.n5 img { max-height: 260px; }
.prod-head .photos figcaption { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--gray-500); text-align: center; }
.prod-head .eyebrow { font-size: 14px; font-weight: 700; color: var(--green); letter-spacing: .06em; text-transform: uppercase; }
.prod-head h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin-top: 8px; }
.prod-head .models { margin-top: 22px; }
.prod-head .lead-sec { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--gray-300); }
.prod-head .lead-sec h3 { font-size: 18px; font-weight: 800; margin-bottom: 18px; }
.prod-head .lead-sec .feat-list .ko { font-size: 16px; }
.prod-head .lead-sec .text { margin-bottom: 14px; font-size: 16px; }

.prod-sec { padding: 56px 0; border-top: 1px solid var(--gray-300); display: grid; grid-template-columns: 240px 1fr; gap: 48px; }
.prod-sec > h3 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; position: sticky; top: calc(var(--header-h) + 90px); align-self: start; }
.prod-sec > h3 small { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--gray-500); letter-spacing: .04em; }
.prod-sec > *, .prod-head > * { min-width: 0; }
.prod-sec .body > * + * { margin-top: 28px; }
.prod-sec h4 { font-size: 17px; font-weight: 700; color: var(--green); margin-bottom: 12px; }
.feat-list > li { padding: 18px 0; border-bottom: 1px dashed var(--gray-300); }
.feat-list > li:first-child { padding-top: 0; }
.feat-list .ko { font-size: 17px; font-weight: 600; color: var(--gray-900); position: relative; padding-left: 16px; }
.feat-list .ko::before { content: ''; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.feat-list .en { margin-top: 4px; padding-left: 16px; font-size: 15px; color: var(--gray-500); }
.feat-list .warn { color: var(--accent); }
.feat-list .ko.info { color: var(--green); } /* 특성 목록 안 빨간·파란 글씨 (누전경보기 일반적 특성, 사용자 요청 2026-10-13) */
.text-lines p { font-size: 16px; color: var(--gray-700); line-height: 1.85; word-break: break-all; }
.text-lines p.t { font-weight: 700; color: var(--gray-900); margin-top: 14px; }
.text-lines p.t:first-child { margin-top: 0; }
.text-lines .warn { color: var(--accent); font-weight: 600; } .text-lines p.t.warn { color: var(--accent); font-weight: 700; } /* 빨간 소제목·문구 (지락계전기·누전경보기 외부결선도, 사용자 요청 2026-10-13) */
.spec-img { border: 1px solid var(--gray-100); border-radius: var(--radius-sm); padding: 16px; background: var(--white); overflow-x: auto; }
.spec-img img { max-width: 100%; height: auto; margin: 0 auto; }
.spec-img figcaption { font-size: 14px; color: var(--gray-500); margin-top: 10px; }

/* ---------- 사양표 (텍스트) ---------- */
.spec-table { overflow-x: auto; border-top: 2px solid var(--gray-900); }
.spec-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.65; color: var(--gray-700); }
.spec-table th, .spec-table td { padding: 14px 18px; border-bottom: 1px solid var(--gray-300); text-align: left; vertical-align: middle; word-break: keep-all; }
  .spec-table table.lbl-narrow td { overflow-wrap: anywhere; }
  .spec-table table.lbl-narrow thead th { white-space: normal; }
.spec-table thead th { background: var(--green-pale); color: var(--gray-900); font-weight: 700; text-align: center; white-space: nowrap; }
.spec-table tbody th { background: var(--gray-100); color: var(--gray-900); font-weight: 700; }
.spec-table col.c-th { width: 200px; }
.spec-table col.c-no { width: 64px; }
.spec-table col.c-def { width: 96px; }
.spec-table td.no, .spec-table td.def { text-align: center; font-weight: 700; color: var(--green); }
.spec-table ul > li { position: relative; padding-left: 12px; }
.spec-table ul > li::before { content: ''; position: absolute; left: 0; top: .78em; width: 4px; height: 4px; border-radius: 50%; background: var(--gray-500); }
.spec-table ul.sub { margin-top: 4px; }
.spec-table ul.sub > li::before { width: 6px; height: 1px; border-radius: 0; }
.spec-table ul.sub > li { padding-left: 14px; }
.spec-table ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.spec-table ol.steps > li { counter-increment: step; position: relative; padding-left: 26px; }
.spec-table ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: var(--white); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.spec-table .tip { margin-top: 8px; padding: 10px 14px; border-radius: 8px; background: var(--gray-100); font-size: 14px; }
.spec-table em { font-style: normal; font-weight: 700; color: var(--green); }
.spec-table .warn, .spec-note { color: var(--accent); font-weight: 600; }
.spec-table li.warn::before { display: none; }
.spec-table .info { color: var(--green); font-weight: 600; } /* 카탈로그의 파란 글씨 (DPM-V 통신주소 해당없음) - 2026-10-13 */
.spec-table p.warn { margin-top: 8px; font-size: 14px; } /* 상자(.tip) 없이 빨간 글자만 - 통신주소(StAn) 안내, 사용자 요청 2026-10-13 */
.spec-table p.tbl-cap { margin: 16px 0 8px; font-size: 15px; font-weight: 700; } /* 상자(.tip) 없이 아래 표의 제목처럼 - 전압비·무감응대 선택 범위, 사용자 요청 2026-10-13 */
.spec-table img.cell-img { display: block; max-width: 100%; height: auto; margin: 12px auto; } /* 설정 방법 표 안의 표시창 예시 그림: 가운데, 잘라낸 크기의 1/2.2로 표시 (지락계전기·누전경보기 2026-10-13) */
.spec-table img.ks-mark { margin: 0 auto 4px; } /* SPD 인증 칸 KS 마크 (카탈로그 49쪽 그림 63×47 그대로, 아래 규격 글자) - 2026-10-13 */
.spec-table table.acc { table-layout: fixed; }
.spec-table table.acc td { text-align: center; }
.spec-table table.acc tr.hd th { background: var(--green-pale); text-align: center; }
.spec-img.panel img { max-width: 520px; width: 100%; }
.spec-table + .spec-table { margin-top: 20px; }
.prod-sec .body > .spec-note { margin-top: 12px; font-size: 14px; }
@media (max-width: 768px) {
  .spec-table table { font-size: 14px; }
  .spec-table th, .spec-table td { padding: 12px 12px; }
  .spec-table col.c-th { width: 110px; }
  .spec-table col.c-no { width: 44px; }
  .spec-table col.c-def { width: 64px; }
  .spec-table table.acc { min-width: 560px; }
}
@media (max-width: 1024px) {
  .prod-head { grid-template-columns: 1fr; gap: 36px; }
  .prod-head .photos { position: static; }
  .prod-sec { grid-template-columns: 1fr; gap: 20px; }
  .prod-sec > h3 { position: static; }
}
@media (max-width: 768px) {
  .prod-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -24px 36px; padding: 0 24px; }
  .prod-tabs::-webkit-scrollbar { display: none; }
  .prod-tabs a { white-space: nowrap; flex: none; padding: 10px 18px; font-size: 14px; }
  .prod-head .photos img { max-height: 280px; }
  /* 사양표 이미지는 모바일에서 원본 비율 유지 + 가로 스크롤 */
  .spec-img.wide img { max-width: none; width: 760px; }
}

/* ---------- 제품 카드 ---------- */
.prod-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.prod-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--white); border: 1px solid var(--gray-100); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.prod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.prod-card .thumb { background: #eee; aspect-ratio: 360 / 300; display: grid; place-items: center; overflow: hidden; }
.prod-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.prod-card:hover .thumb img { transform: scale(1.05); }
.prod-card .body { padding: 28px 28px 22px; display: flex; flex-direction: column; flex: 1; }
.prod-card .en { font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: .04em; }
.prod-card h3 { font-size: 21px; font-weight: 800; margin-top: 6px; }
.prod-card p { margin-top: 10px; font-size: 15px; color: var(--gray-700); line-height: 1.7; }
.prod-card .more { align-self: flex-end; margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; color: var(--gray-900); }
.prod-card .more::after { content: ' →'; transition: margin .2s; }
.prod-card:hover .more { color: var(--green); }
@media (max-width: 1024px) { .prod-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .prod-cards { grid-template-columns: 1fr; } }

/* ---------- 게시판 (디자인 단계: 정적 화면, 스텝2에서 PHP/MySQL 연동) ---------- */
.board-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.board-total { font-size: 15px; color: var(--gray-700); }
.board-total b { color: var(--green); }
.board-search { display: flex; gap: 8px; }
.board-search select, .board-search input { border: 1px solid var(--gray-300); border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 15px; background: var(--white); }
.board-search input { width: 220px; }
.board-search button { padding: 10px 20px; border-radius: 10px; background: var(--gray-900); color: var(--white); font-weight: 600; font-size: 15px; }
.board-table { border-top: 2px solid var(--gray-900); font-size: 15px; }
.board-table th, .board-table td { padding: 18px 12px; border-bottom: 1px solid var(--gray-300); text-align: center; }
.board-table thead th { font-weight: 700; background: var(--gray-100); }
.board-table td.subject { text-align: left; }
.board-table td.subject a { font-weight: 600; }
.board-table td.subject a:hover { color: var(--green); text-decoration: underline; }
.board-table td.empty { padding: 80px 0; color: var(--gray-500); }
.board-table .badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; background: var(--green); color: var(--white); }
.board-table .lock { margin-left: 6px; font-size: 13px; color: var(--gray-500); }
.board-table .col-no { width: 90px; } .board-table .col-name { width: 130px; } .board-table .col-date { width: 130px; } .board-table .col-hit { width: 90px; }
.board-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 16px; flex-wrap: wrap; }

/* ---------- 뉴스/보도자료 카드 목록 (news.html, 2026-10-19). 클래스명 press-list: style.css에 템플릿용 .news-list가 있어서 피함 ----------
   메인 소식·자료 카드(home.css .news-card)와 같은 모양. 서브 페이지는 home.css를 안 읽어서 여기에 같은 값으로 둔다.
   카드 = 언론사(tag) · 제목 · 요약 · 기사 날짜, 누르면 기사 원문이 새 창으로 열린다 */
.press-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.press-list .news-card { display: flex; flex-direction: column; padding: 40px 36px; border-radius: var(--radius); background: var(--gray-100); min-height: 300px; transition: all .35s var(--ease); }
.press-list a.news-card:hover { background: var(--green); color: var(--white); transform: translateY(-6px); }
.press-list .news-card .tag { font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: .06em; }
.press-list .news-card .tit { font-size: 21px; font-weight: 700; margin-top: 14px; line-height: 1.45; word-break: keep-all; }
.press-list .news-card .txt { margin-top: 14px; font-size: 15px; color: var(--gray-700); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.press-list .news-card .date { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 24px; font-size: 14px; color: var(--gray-500); }
.press-list .news-card .ext { font-style: normal; font-size: 18px; }
.press-list a.news-card:hover .tag { color: #c8e0f7; }
.press-list a.news-card:hover .txt { color: rgba(255, 255, 255, .85); }
.press-list a.news-card:hover .date { color: rgba(255, 255, 255, .75); }
.press-list .news-empty { grid-column: 1 / -1; padding: 80px 0; text-align: center; color: var(--gray-500); border-top: 1px solid var(--gray-900); border-bottom: 1px solid var(--gray-100); }
@media (max-width: 1024px) { .press-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .press-list { grid-template-columns: 1fr; } .press-list .news-card { min-height: 0; padding: 32px 28px; } }
.paging { display: flex; gap: 6px; justify-content: center; flex: 1; }
.paging a { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--gray-300); font-size: 14px; }
.paging a.on { background: var(--gray-900); border-color: var(--gray-900); color: var(--white); }
.board-bottom:has(.paging) { margin-top: 56px; } /* 목록 ↔ 페이지 번호 30 → 56px (사용자 요청 2026-10-21) */
@media (max-width: 768px) { .board-bottom:has(.paging) { margin-top: 40px; } }
.board-desc { margin-bottom: 36px; padding: 24px 28px; border-radius: var(--radius-sm); background: var(--gray-100); color: var(--gray-700); font-size: 15px; }
.board-desc b { color: var(--gray-900); }
@media (max-width: 768px) {
  .board-table colgroup { display: none; }
  .board-table .no, .board-table .name, .board-table .hit { display: none; }
  .board-table th, .board-table td { padding: 16px 8px; }
  .board-table td.date { width: 96px; font-size: 13px; color: var(--gray-500); white-space: nowrap; }
  .board-search { width: 100%; }
  .board-search select { flex: none; }
  .board-search input { flex: 1; width: auto; min-width: 0; }
}

.view-head { border-top: 2px solid var(--gray-900); padding: 28px 8px; border-bottom: 1px solid var(--gray-300); }
.view-head h2 { font-size: 24px; font-weight: 800; }
.view-head .meta { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; color: var(--gray-500); }
.view-files { padding: 18px 8px; border-bottom: 1px solid var(--gray-300); font-size: 15px; }
.view-files a { font-weight: 600; color: var(--green); }
.view-body { padding: 50px 8px; min-height: 240px; font-size: 16px; line-height: 1.9; color: var(--gray-700); border-bottom: 1px solid var(--gray-300); }
.view-nav { margin-top: 0; }
.view-nav li { display: grid; grid-template-columns: 100px 1fr; padding: 16px 8px; border-bottom: 1px solid var(--gray-100); font-size: 15px; }
.view-nav li span { color: var(--gray-500); }

.write-form .f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.write-form .f-row.full { grid-column: 1 / -1; }
.write-form label.lb { display: block; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.write-form .req { color: var(--accent); margin-left: 2px; }
.write-form input[type=text], .write-form input[type=email], .write-form input[type=tel], .write-form input[type=password], .write-form input[type=number], .write-form select, .write-form textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--gray-300); border-radius: 10px; font: inherit; font-size: 15px; background: var(--white);
}
.write-form textarea { min-height: 260px; resize: vertical; }
.write-form input:focus, .write-form select:focus, .write-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(10, 92, 168, .12); }
.write-form .checks { display: flex; flex-wrap: wrap; gap: 10px; }
.write-form .checks label { position: relative; cursor: pointer; }
.write-form .checks input { position: absolute; opacity: 0; }
.write-form .checks span { display: inline-block; padding: 10px 18px; border-radius: 30px; border: 1px solid var(--gray-300); font-size: 14px; font-weight: 600; transition: all .2s; }
.write-form .checks input:checked + span { background: var(--green-pale); border-color: var(--green); color: var(--green); }
.write-form .opt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.write-form .opt input { width: 18px; height: 18px; accent-color: var(--green); }
.write-form .agree-box { background: var(--gray-100); border-radius: var(--radius-sm); padding: 24px 28px; font-size: 14px; color: var(--gray-700); }
.write-form .submit-wrap { margin-top: 40px; display: flex; justify-content: center; gap: 12px; }
.write-form .notice-step2 { margin-top: 16px; text-align: center; font-size: 14px; color: var(--gray-500); }
.only-estimate { display: none; }
.is-estimate .only-estimate { display: block; }
@media (max-width: 768px) { .write-form .f-grid { grid-template-columns: 1fr; } }

/* ---------- 카탈로그 / 인증서 ---------- */
.catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.catalog-card { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; padding: 32px; border-radius: var(--radius); border: 1px solid var(--gray-100); background: var(--white); transition: box-shadow .3s; }
.catalog-card:hover { box-shadow: var(--shadow); }
.catalog-card .cover { aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--gray-100); box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
.catalog-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.catalog-card .year { font-size: 14px; font-weight: 700; color: var(--green); }
.catalog-card h3 { font-size: 24px; font-weight: 800; margin: 4px 0 10px; }
.catalog-card .meta { font-size: 14px; color: var(--gray-500); margin-bottom: 22px; }
@media (max-width: 1024px) { .catalog-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .catalog-card { grid-template-columns: 1fr; } .catalog-card .cover { max-width: 200px; } }

/* 인증서 목록 (사용자 요청 2026-10-08): 한 줄 3개(768px 이하 2개). 확대 보기 기능 삭제 → 카드는 클릭 없는 figure.
   테두리 상자 대신 회색 정사각형 썸네일(1:1, 여백 32px, 모서리 20 → 8px) + 아래 가운데 정렬의 작은 설명(figcaption, 색 #777 → #444 → #1d1d1f, 굵기 500 → 600, 15 → 16px / 모바일 13 → 14px) */
.cert-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
.cert-item { margin: 0; container-type: inline-size; } /* 그림 높이를 칸 폭 기준(cqw)으로 계산하려고 */
.cert-item .thumb { aspect-ratio: 1 / 1; background: var(--gray-100); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 32px; overflow: hidden; }
.cert-item .thumb img { height: 100%; width: auto; max-width: 100%; object-fit: contain; box-shadow: 0 6px 20px rgba(0, 0, 0, .1); } /* height 100%: img height 속성(462)이 그대로 쓰여 칸이 늘어나지 않게 */
.cert-item figcaption { margin-top: 16px; font-size: 16px; font-weight: 600; line-height: 1.55; color: var(--gray-900); text-align: center; word-break: keep-all; }
  .spec-table table.lbl-narrow td { overflow-wrap: anywhere; }
  .spec-table table.lbl-narrow thead th { white-space: normal; }
@media (max-width: 768px) { .cert-list { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; } .cert-item .thumb { padding: 16px; } .cert-item figcaption { margin-top: 10px; font-size: 14px; } }

/* ---------- 찾아오시는길 ----------
   정보(.loc-info) + 지도(.map-wrap)를 .loc-card로 묶음 (2026-10-20, 이전 주소·전화·팩스 3칸 아이콘 목록 대체 - 사용자 요청. 이전 이력은 claudedocs/01-renewal-worklog.md)
   액자(흰 여백 10px + 회색 테두리 + 아래 그림자, 2026-10-16)는 지도에만 - 정보는 액자 없이 페이지 위에 (사용자 요청 2026-10-20). 최대 폭 1120px */
.loc-grid { max-width: 1120px; margin: 0 auto; }
.map-wrap { padding: 10px; background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); box-shadow: 0 24px 48px -24px rgba(13, 27, 42, .28); }
.map-wrap iframe { border-radius: calc(var(--radius) - 8px); }
/* 지도 높이 PC 480 → 520 → 420 → 520px, 1024px 이하 360 → 400 → 320 → 380px: 다시 키움 - 사용자 요청 2026-10-21 */
.map-wrap iframe { display: block; width: 100%; height: 520px; border: 0; }
@media (max-width: 1024px) { .map-wrap iframe { height: 380px; } }
/* 지도 ↔ 푸터 간격: 섹션 아래 여백 120 → 180px (1024px 이하 90 → 130px, 768px 이하 70 → 100px) - 사용자 요청 2026-10-21 */
.section:has(.loc-grid) { padding-bottom: 180px; }
@media (max-width: 1024px) { .section:has(.loc-grid) { padding-bottom: 130px; } }
@media (max-width: 768px) { .section:has(.loc-grid) { padding-bottom: 100px; } }
/* 정보 카드 (액자 안 순서 정보 → 지도, 지도는 잘 안 볼 것 같아 정보를 첫 화면에 - 사용자 요청 2026-10-20)
   PC: 1줄 왼쪽 회사명 · 오른쪽 지도 앱 바로가기 버튼, 2줄 주소·대표전화·팩스를 한 줄로 수평 (사용자 요청 2026-10-20)
   회색 판 없이 흰 액자 안에 그대로, 항목명은 메인 파랑 */
/* 간격 기준 (사용자 요청 2026-10-21, 8px 단위): 구분선 위·아래 같게(PC 40 / 모바일 24px), 정보 묶음 ↔ 지도는 그 2배(80 / 48px)로 묶음을 분리. 이전 값 이력은 작업 로그 */
.loc-info { display: grid; grid-template-columns: 1fr auto; gap: 40px 32px; align-items: center; padding: 0 0 80px; }
.loc-name { font-size: 24px; font-weight: 700; color: var(--gray-900); letter-spacing: -.02em; }
.loc-links { display: flex; flex-wrap: wrap; gap: 10px; }
.loc-links .btn { padding: 10px 20px; font-size: 14px; border-color: var(--gray-300); border-radius: 10px; } /* 알약 → 모서리 10px: 아래 지도 액자(20px)와 어울리게 - 사용자 요청 2026-10-20 */
.loc-links .btn::after { content: '↗'; }
.loc-links .btn:hover::after { transform: translate(2px, -2px); }
.loc-contact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 96px; padding-top: 40px; border-top: 1px solid var(--gray-300); } /* 주소·대표전화·팩스 사이 56 → 96px 같은 간격 (사용자 요청 2026-10-21) */
.loc-contact > div { display: flex; align-items: baseline; gap: 14px; }
.loc-contact dt { flex: none; font-size: 15px; font-weight: 600; color: var(--green); }
.loc-contact dd { font-size: 18px; font-weight: 500; color: var(--gray-900); word-break: keep-all; text-wrap: balance; } /* 좁은 화면에서 주소가 두 줄일 때 "3층"만 떨어지지 않게 */
.loc-contact a:hover { color: var(--green); }
@media (max-width: 768px) {
  .map-wrap { padding: 6px; }
  .map-wrap iframe { border-radius: calc(var(--radius) - 10px); }
  /* 모바일: 회사명 → 주소·전화·팩스(항목명 칸 맞춤) → 버튼 3개 한 줄 */
  .loc-info { grid-template-columns: 1fr; gap: 24px; padding: 0 0 48px; }
  .loc-name { font-size: 20px; }
  .loc-contact { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; padding: 24px 0 8px; } /* 팩스 ↔ 지도 앱 버튼 = 8 + 줄 간격 24 = 32px */
  .loc-contact > div { display: contents; }
  .loc-contact dd { font-size: 16px; }
  .loc-links { order: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .loc-links .btn { justify-content: center; gap: 4px; padding: 10px 4px; font-size: 13px; white-space: nowrap; } /* 버튼 3개 한 줄 */
}

/* ---------- 헤더와 hero 겹침 방지 ----------
   헤더(position: fixed)는 항상 solid(흰 배경)로 쓰고, 본문 전체를 헤더 높이만큼 내린다.
   (원래 디자인처럼 투명 헤더를 hero 위에 겹치려면 이 블록과 main.js의 'header solid'를 되돌리면 됨) */
body { padding-top: var(--header-h); }

/* ---------- 헤더 크기 확대 (사용자 요청) ----------
   헤더 84px → 120px, 메뉴 17px → 20px(굵기 500, 글자색 #000). 모바일 헤더 70px → 76px.
   --header-h 변수 하나로 본문 여백, 서브메뉴 sticky 위치, 모바일 메뉴 위치가 같이 맞춰진다. */
:root { --header-h: 120px; }
.gnb { gap: 14px; }
.gnb > li > a { padding: 0 24px; font-size: 20px; font-weight: 500; }
.header.scrolled .gnb > li > a, .header.solid .gnb > li > a, .header.menu-open .gnb > li > a { color: #000; }
.gnb .sub { min-width: 240px; }
.gnb .sub a { font-size: 17px; padding: 10px 16px; color: #222; font-weight: 500; }
.header-util .btn-recruit { padding: 10px 30px; font-size: 16px; font-weight: 500; } /* 견적문의 글자 18 → 16px (2026-10-08), 버튼 위아래 여백 13 → 10px - 사용자 요청 2026-10-07 */

/* 헤더 불투명 흰색 (원래 디자인의 반투명 + blur 제거) */
.header.scrolled, .header.solid, .header.menu-open { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* 하단 선(그림자 1px) 제거 - 사용자 요청 */
/* 로고·견적문의 좌우 위치: 최대폭 1600px 제한 해제, 좌우 여백 40px (모바일 20px) */
.header .inner { max-width: none; padding: 0 40px; }
@media (max-width: 1024px) { .header .inner { padding: 0 20px; } }
@media (max-width: 1200px) {
  .gnb { gap: 4px; }
  .gnb > li > a { padding: 0 16px; font-size: 19px; }
}
@media (max-width: 1024px) {
  :root { --header-h: 76px; }
  .m-nav > li > button { font-size: 20px; }
  .m-nav .sub a { font-size: 16px; }
  /* 견적문의는 메뉴 줄과 구분되게 알약 버튼, 아래에 대표전화 (사용자 요청 2026-10-22)
     처음엔 메인 컬러로 채웠으나 너무 커 보여서 파스텔(--green-pale) 바탕·메인 컬러 글자, 높이 56 → 48px */
  .m-nav > li.m-cta { border-bottom: 0; margin-top: 32px; text-align: center; }
  .m-nav .m-cta a:first-child { display: block; padding: 13px; border-radius: 999px; background: var(--green-pale); color: var(--green); font-size: 17px; font-weight: 700; }
  .m-nav .m-cta a:first-child:active { background: #d6e6f7; }
  .m-nav .m-cta .m-tel { display: inline-block; margin-top: 14px; padding: 4px 8px; font-size: 15px; color: var(--gray-700); }
}

/* ---------- 스크롤 시 헤더 숨김 (사용자 요청) ----------
   아래로 스크롤하면 헤더가 0.6초 동안 위로 밀려 올라가며 사라진다(투명도는 바꾸지 않음). 헤더 하단 선(그림자)은 위 '헤더 불투명' 규칙에서 항상 없앰.
   헤더가 숨겨지면 main.js가 body에 header-hidden 클래스를 붙이고, 서브메뉴 등 sticky 요소가 같은 속도로 화면 맨 위로 올라간다. */
.header { transition: background .3s, box-shadow .3s, transform .6s cubic-bezier(.4, 0, .2, 1); }
.local-nav, .timeline .era-title, .prod-head .photos, .prod-sec > h3 { transition: top .6s cubic-bezier(.4, 0, .2, 1); }
body.header-hidden .local-nav { top: 0; }
body.header-hidden .timeline .era-title, body.header-hidden .prod-head .photos, body.header-hidden .prod-sec > h3 { top: 90px; }

/* ---------- 메가메뉴 (사용자 요청) ----------
   상단 메뉴에 마우스를 올리면 4개 메뉴의 하위메뉴가 헤더 바로 아래 전체 폭 흰 패널에 한꺼번에 펼쳐진다 (main.js initMegaMenu).
   각 하위메뉴는 자기 메뉴 바로 아래 칸(메뉴 항목 폭)에 가운데 정렬, 한 줄로 표시. 가장 긴 "지락계전기(GFR)"가 들어가도록 메뉴 항목 최소 폭을 160px(1200px 이하 150px)로 넓힘.
   원래 디자인(style.css)의 메뉴별 말풍선 드롭다운은 아래에서 덮어써서 쓰지 않는다. */
.header .inner { position: relative; z-index: 1; }
.header .inner > nav { height: 100%; } /* 메뉴 칸을 헤더 높이만큼 채워서 하위메뉴가 헤더 바로 아래에서 시작하게 함 */
.gnb > li { min-width: 160px; justify-content: center; }
.gnb > li > a { justify-content: center; width: 100%; }
.mega-bg { position: absolute; left: 0; right: 0; top: 100%; height: var(--mega-h, 0px); background: #fff; box-shadow: 0 16px 24px -12px rgba(0, 0, 0, .12); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.gnb .sub, .gnb > li:hover .sub { top: 100%; left: 0; right: 0; min-width: 0; transform: none; background: none; box-shadow: none; border-radius: 0; padding: 12px 0 28px; text-align: center; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.header.mega-open .mega-bg, .header.mega-open .gnb > li .sub { opacity: 1; visibility: visible; }
.mega-bg { height: calc(var(--mega-h, 0px) + 1px); border-top: 1px solid var(--gray-300); } /* 하위메뉴 패널: 헤더와 구분선(배경은 흰색) - 사용자 요청 2026-10-07 */
/* 하위메뉴 칸: 패널 높이 전체를 채우는 배경판(::before)에 칸 사이·양 끝 세로 구분선, hover 중인 메뉴의 칸만 연회색 - 사용자 요청 2026-10-07
   칸을 메뉴 간격(gap)의 절반씩 좌우로 넓혀 이웃 칸과 맞닿게 하고, 구분선이 메뉴 사이 정가운데에 오게 한다.
   배경판은 position: absolute 라서 main.js가 재는 .sub 높이(--mega-h)에 영향을 주지 않는다. */
.gnb .sub, .gnb > li:hover .sub { top: calc(100% + 1px); left: -7px; right: -7px; z-index: 0; }
.gnb > li > .sub::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--mega-h, 100%); z-index: -1; transition: background .2s; }
.gnb > li > .sub::before { border-left: 1px solid var(--gray-300); }
.gnb > li:last-child > .sub::before { border-right: 1px solid var(--gray-300); } /* 첫 칸 왼쪽·마지막 칸 오른쪽에도 구분선 - 사용자 요청 2026-10-07 */
.gnb > li:hover > .sub::before, .gnb > li:focus-within > .sub::before { background: #f5f5f5; } /* 파란 기 없는 연회색 (#f4f5f7 → #f5f5f5) - 사용자 요청 2026-10-07 */
@media (max-width: 1200px) { .gnb .sub, .gnb > li:hover .sub { left: -2px; right: -2px; } }
.gnb .sub a { display: inline-block; white-space: nowrap; padding: 8px 14px; }
/* 하위메뉴 hover·현재 페이지: 원래 디자인의 연한 배경·파란 글자·굵게를 없애고 글자색만 진하게 (#666 → #000) - 사용자 요청 2026-10-06 */
.gnb .sub a { color: #666; transition: color .2s; }
.gnb .sub a:hover, .gnb .sub a.active, .gnb .sub a:focus-visible { background: none; color: #000; font-weight: 500; }
.gnb .sub a.active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } /* 현재 페이지 항목은 밑줄까지 (사용자 요청) */
.gnb .sub li + li { margin-top: 2px; }
/* 상단 메뉴 hover 밑줄: 메뉴 a 영역(헤더 높이 전체) 맨 아래에 #2f8fe0 3px 막대. 하위메뉴로 내려가도 그 칸은 유지(li:hover) - 사용자 요청 2026-10-06 */
.gnb > li > a { position: relative; }
.gnb > li > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #2f8fe0; transform: scaleX(0); transition: transform .25s var(--ease); }
.gnb > li:hover > a::after, .gnb > li > a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 1200px) {
  .gnb > li { min-width: 150px; }
  .gnb .sub a { padding: 8px 10px; }
}
/* 하위메뉴 칸 폭 조금 넓힘 (메뉴 항목 최소 폭 160 → 184px, 1101~1200px는 150 → 164px. 1100px 이하는 로고·견적문의와 간격이 좁아 150px 유지)
   파란 밑줄은 메뉴 글자 칸이 아니라 아래 하위메뉴 칸 폭 전체(좌우 gap 절반씩 포함)에 맞춤 - 사용자 요청 2026-10-08 */
.gnb > li { min-width: 184px; }
.gnb > li > a::after { left: -7px; right: -7px; }
@media (max-width: 1200px) {
  .gnb > li { min-width: 164px; }
  .gnb > li > a::after { left: -2px; right: -2px; }
}
@media (max-width: 1100px) { .gnb > li { min-width: 150px; } }

/* ---------- 서브 페이지 탭(local-nav): 밑줄 탭 (사용자 요청 2026-10-08) ----------
   본문 제품 탭(.prod-tabs, 알약 모양)과 구분되게 페이지 이동 메뉴는 밑줄 탭으로. 글자 15 → 17px(모바일 16px), 현재 메뉴는 굵은 검정 + 메인 컬러 3px 밑줄.
   높이는 기존(약 69px)과 비슷하게 유지 → 제품 사진·연혁 연도 등 sticky 요소 위치(헤더 + 90px)는 그대로.
   1024px 이하: 옆으로 밀어 보는 목록의 오른쪽 끝을 흐리게 해 메뉴가 더 있음을 표시(끝까지 밀면 마지막 메뉴가 가려지지 않게 오른쪽에 빈 칸) */
.local-nav ul { gap: 40px; padding: 0; }
.local-nav a { position: relative; padding: 21px 0; border-radius: 0; font-size: 17px; font-weight: 500; color: var(--gray-500); background: none; transition: color .2s; }
.local-nav a:hover { background: none; color: var(--gray-900); }
.local-nav a.active { background: none; color: var(--gray-900); font-weight: 700; }
.local-nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--green); }
@media (max-width: 1024px) {
  .local-nav ul { gap: 28px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .local-nav ul::after { content: ''; flex: 0 0 24px; }
  .local-nav a { font-size: 16px; padding: 21px 0; }
}

/* 디지털 파워메타(DPM-P) 사진 작게 (사용자 요청 2026-10-08): 최대 높이 420 → 360 → 300 → 260px, 모바일 280 → 240 → 200 → 180px, 사진:설명 칸 1:1 → 4:6.
   → 2025 카탈로그 탭 공통 규칙(.prod-head.cat2025, 아래)으로 옮김 */

/* ---------- 2025 카탈로그 기준 제품 탭 공통 (사용자 요청 2026-10-08) ----------
   claudedocs/products/panels/*.html 조각에서 쓰는 보조 클래스.
   .prod-head.cat2025: 사진 칸 4fr : 설명 6fr (1025px 이상), 사진 최대 높이 260px(모바일 180px) - DPM-P에서 정한 크기를 모든 탭에 적용
   표: col.c-grp(묶음 제목 열) / th.grp(묶음 제목 칸, rowspan) / .c(가운데 정렬 칸) */
.prod-head.cat2025 .photos img { max-height: 260px; }
.prod-head.cat2025 .photos.n2 img, .prod-head.cat2025 .photos.n3 img { max-height: 220px; }
@media (min-width: 1025px) { .prod-head.cat2025 { grid-template-columns: 4fr 6fr; } }
@media (max-width: 768px) { .prod-head.cat2025 .photos img { max-height: 180px; } }
.spec-table col.c-grp { width: 110px; }
.spec-table th.grp { text-align: center; background: var(--green-pale); }
.spec-table th.c, .spec-table td.c { text-align: center; }
@media (max-width: 768px) { .spec-table col.c-grp { width: 72px; } }
/* 섹션 안 소제목(h4)은 앞 내용과 띄움, 고조파필터 '[효과]' 줄, 개요 문단 다음 특징 목록 간격 */
.prod-sec .body > * + h4 { margin-top: 44px; }
.prod-sec .body > p.effect { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--gray-900); }
.prod-sec .body > p.effect + .feat-list { margin-top: 12px; }
.lead-sec .text-lines + .feat-list { margin-top: 20px; }
/* 세로로 긴 도면(GFR·ELD 외형도): 화면 높이를 넘지 않게 폭 제한 */
.spec-img.tall img { max-width: 560px; width: 100%; }
.spec-img.sm img { max-width: 440px; width: 100%; } /* 작게 보여도 되는 외형도 (영상변류기 DCZ·DWZ, 사용자 요청 2026-10-13) */
/* 표의 가운데 정렬 머리칸(L-N, N-PE 등)은 줄바꿈하지 않음 */
.spec-table th.c { white-space: nowrap; }
/* 표 칸 안에 넣은 작은 표(DPM-PF 전압비·무감응대 선택표): 작은 표가 있는 바깥 표는 열 폭 고정(table-layout: fixed, colgroup 폭 사용)으로
   바깥 표가 넓어지지 않게 하고, 작은 표는 칸 폭 안에서만 가로 스크롤 */
.spec-table table:has(td .spec-table) { table-layout: fixed; }
.spec-table td .spec-table { margin-top: 12px; border-top-width: 1px; }
.spec-table td .spec-table th, .spec-table td .spec-table td { padding: 8px 10px; font-size: 14px; }
/* 푸터 '관리자' (사용자 요청 2026-10-08): 관리자 페이지가 생길 때까지 링크 없는 글자(<a> href 없음) → 손가락 커서·hover 색 변화 없음 */
.footer .f-links a:not([href]) { cursor: default; }
.footer .f-links a:not([href]):hover { color: inherit; }
/* 푸터 약관 링크(개인정보처리방침 | 이용약관 | 관리자) 글자 16 → 18px (사용자 요청 2026-10-08). 아래 주소·Copyright·회사정보 줄은 모두 16px로 같음(.footer .bot 16px) */
.footer .f-links { font-size: 18px; }
/* 푸터 아래 두 줄(주소·회사정보 / Copyright·대표전화) 글자 16 → 17px (사용자 요청 2026-10-08). 약관 링크 18px, 버튼 14px은 따로 지정돼 있어 그대로 */
.footer .bot { font-size: 17px; }
/* 푸터 하단(.bot) 위아래 여백 40/50 → 64/72 → 80/88px, 768px 이하 52/60 → 60/68px (사용자 요청 2026-10-08) */
.footer .bot { padding-top: 80px; padding-bottom: 88px; }
@media (max-width: 768px) { .footer .bot { padding-top: 60px; padding-bottom: 68px; } }
/* 인증서 회색 배경만 줄이기 (사용자 요청 2026-10-08): 그림 크기는 이전과 같게(칸 폭 - 64px, 모바일 - 32px) 두고,
   회색 판은 정사각형 대신 그림 둘레 여백 16px(모바일 10px)만 남겨 그림에 맞춤 */
.cert-item .thumb { aspect-ratio: auto; width: fit-content; max-width: 100%; margin: 0 auto; padding: 28px 44px; } /* 둘레 16px → 위아래 28·좌우 44px (사용자 요청: 조금 더 크게) */
.cert-item .thumb img { height: calc(100cqw - 64px); width: auto; max-width: none; }
@media (max-width: 768px) { .cert-item .thumb { padding: 12px 18px; } .cert-item .thumb img { height: calc(100cqw - 32px); } }
/* 1099px 이하(쌓기 배치): 약관 링크 ↔ 주소 줄 간격 12 → 28px (사용자 요청 2026-10-08) */
@media (max-width: 1099px) { .footer .f-links { margin-bottom: 28px; } } /* 아래 주소 줄 margin-top 8px와 겹쳐 합쳐지므로(큰 값만 적용) 28px */
/* 푸터 전체 글자·영역 줄이기 (사용자 요청 2026-10-19). 위에 흩어진 이전 값(2026-10-06~08)을 여기서 한꺼번에 덮어씀
   사이트맵 제목 20 → 17px, 하위 메뉴 16 → 14px, 약관 링크 18 → 15px, 주소·회사정보·Copyright 17 → 14px, 버튼 14 → 13px
   위 영역 위아래 80/50 → 56/40px, 아래 영역 80/88 → 48/56px(768px 이하 60/68 → 40/48px), 버튼 줄 ↔ 주소 줄 72 → 44px, 로고 160 → 140px */
.footer .top { padding: 56px 0 40px; }
.footer .f-logo { width: 140px; height: 35px; }
.footer .sitemap h5 { font-size: 18px; margin-bottom: 16px; } /* 17 → 18px: 위 영역 글자가 너무 작아 보여서 다시 키움 - 사용자 요청 2026-10-19 */
.footer .sitemap li { font-size: 15px; margin-bottom: 10px; } /* 14 → 15px (같은 요청) */
.footer .f-links { font-size: 16px; } /* 15 → 16px: 견적문의·카탈로그 버튼(16px)과 같게 - 사용자 요청 2026-10-20 */
.footer .bot { font-size: 14px; padding-top: 48px; padding-bottom: 56px; }
.footer .f-right .btn-wrap .btn { padding: 12px 26px; font-size: 16px; border-color: rgba(255, 255, 255, .5); } /* 견적문의·카탈로그 버튼 글자 13 → 16px, 테두리 상자 8/18 → 12/26px, 테두리 선 .25 → .5로 더 잘 보이게 (사용자 요청 2026-10-20: 글자가 너무 작음) */
@media (min-width: 1100px) {
  .footer .bot > div:first-child > .f-info, .footer .f-infos .f-info { margin-top: 44px; }
}
@media (max-width: 1099px) { .footer .f-links { margin-bottom: 20px; } }
@media (max-width: 768px) { .footer .bot { padding-top: 40px; padding-bottom: 48px; } }
/* 회사연혁: sec-label(History) 삭제하고 본문을 위로 (사용자 요청 2026-10-08) - 위 여백 120 → 72px, 768px 이하 70 → 48px
   2026-10-16: 제목이 하위 탭 바로 밑에 붙어 보여서 넓힘 (위 여백은 아래 '탭 메뉴 아래 첫 여백' 공통 규칙), 제목 가운데 정렬·제목 ↔ 연혁 간격 80px - 사용자 요청 */
.history-sec .sec-head { margin-bottom: 150px; } /* 설명 ↔ 연혁 80 → 120 → 150px */
.section.history-sec { padding-bottom: 200px; } /* 연혁 끝 ↔ 푸터 120 → 200px */
/* 위 두 값: 인사말(greeting.html)과 같은 간격이 되도록 맞춤(측정 PC 인용문 → 본문 188px, 본문 끝 → 푸터 160px) - 사용자 요청 2026-10-16 */
@media (max-width: 768px) { .history-sec .sec-head { margin-bottom: 130px; } .section.history-sec { padding-bottom: 114px; } }

/* ---------- 게시판 DB 연동 (스텝2, 2026-10-12): 비밀글·답변·첨부·관리자 화면 ---------- */
[hidden] { display: none !important; } /* .btn 등 display를 지정한 요소도 hidden 속성으로 숨겨지게 */
.view-body { white-space: pre-wrap; word-break: break-word; }
.board-table .clip { margin-left: 6px; font-size: 13px; }
.board-table .replied { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--green); border: 1px solid var(--green); vertical-align: 1px; }
.board-table tr.is-notice td { background: #f8fafc; }
.paging:empty { visibility: hidden; }
.view-private { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 24px; padding: 20px 8px; border-bottom: 1px solid var(--gray-300); font-size: 15px; }
.view-private dt { font-size: 13px; color: var(--gray-500); }
.view-private dd { margin: 2px 0 0; font-weight: 600; word-break: break-all; }
.view-files small { color: var(--gray-500); }
.view-files b { margin-right: 8px; }
.view-reply { margin-top: 30px; padding: 26px 28px; border-radius: var(--radius-sm); background: var(--gray-100); }
.view-reply .tit { font-weight: 800; color: var(--green); }
.view-reply .tit small { margin-left: 8px; font-weight: 500; color: var(--gray-500); }
.view-reply .txt { margin-top: 12px; white-space: pre-wrap; word-break: break-word; line-height: 1.8; color: var(--gray-700); }
.view-nav { margin-top: 30px; border-top: 1px solid var(--gray-300); }
.view-nav li em { font-style: normal; color: var(--gray-500); }
.view-nav li a:hover { color: var(--green); text-decoration: underline; }
#vBtns .btn::after, .pw-dialog .btn::after { content: none; }
.pw-box { max-width: 420px; margin: 0 auto; text-align: center; white-space: normal; }
.pw-box .row { display: flex; gap: 8px; margin-top: 18px; }
.pw-box input, .pw-dialog input { flex: 1; min-width: 0; width: 100%; padding: 12px 14px; border: 1px solid var(--gray-300); border-radius: 10px; font: inherit; font-size: 15px; }
.pw-box .err, .pw-dialog .err { min-height: 1.4em; margin-top: 8px; font-size: 14px; color: #d93025; }
.pw-dialog { width: min(400px, calc(100% - 32px)); padding: 30px 28px; border: 0; border-radius: var(--radius-sm); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.pw-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.pw-dialog .tit { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.pw-dialog p { font-size: 15px; color: var(--gray-700); }
.pw-dialog input { margin-top: 16px; }
.pw-dialog .btn-wrap { justify-content: flex-end; margin-top: 8px; }
.write-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.write-form .old-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; font-size: 14px; }
.write-form .old-files .opt { font-weight: 500; }
@media (max-width: 768px) { .view-reply { padding: 22px 20px; } }

/* 페이지 하단 바로가기(.banner-links, .quick-links-sec)는 삭제 - 사용자 요청 2026-10-16 (style.css 원본 규칙은 그대로) */

/* ---------- 서브 비주얼(sub-hero) 글자 가운데 정렬 (사용자 요청 2026-10-13) ----------
   순서: 영문 라벨(sec-label) → h1 → 경로(breadcrumb). 2026-10-14: 경로를 local-nav 아래에 뒀다가 다시 h1 아래로, 설명(desc)은 local-nav 아래 .page-intro로 */
.sub-hero .container { text-align: center; }
/* 글자 묶음을 아래 붙임(style.css flex-end + 아래 여백 70/48px) → 세로 가운데로 (사용자 요청 2026-10-14) */
.sub-hero { align-items: center; }
.sub-hero .container { padding-bottom: 0; }
.sub-hero .sec-label { color: var(--on-dark); margin-bottom: 16px; }
.sub-hero .desc { margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .sub-hero .sec-label { margin-bottom: 12px; } }
/* 고객센터(metertech)는 배경 가운데가 밝은 회색이라 가운데 정렬한 라벨·제목이 묻힘 → 가운데를 둥글게 어둡게 */
.sub-hero:has(.bg.v-support)::after { background: radial-gradient(ellipse 55% 75% at 50% 50%, rgba(5, 12, 20, .62) 0%, rgba(5, 12, 20, .38) 60%, rgba(5, 12, 20, .22) 100%); }

/* ---------- 제품소개 좌측 세로 메뉴 (사용자 요청 2026-10-14) ----------
   제품 페이지(body.has-side-nav)만 PC(1025px 이상)에서 위 가로 탭(local-nav) 대신 본문 왼쪽 세로 메뉴(#side-nav, main.js가 NAV로 채움)를 쓴다.
   1024px 이하에서는 세로 메뉴를 숨기고 기존 가로 탭을 그대로 쓴다.
   가로 탭이 없어지므로 제품 사진·사양 제목 sticky 위치도 탭 높이만큼(90 → 40px) 위로 올린다. */
.side-nav { display: none; }
@media (min-width: 1025px) {
  .has-side-nav .local-nav { display: none; }
  /* 제품 세로 메뉴 줄만 컨테이너 1320 → 1380px(1440px 화면에서 메뉴가 로고 왼쪽 끝과 맞음), 메뉴-본문 간격 64 → 80px (사용자 요청 2026-10-14) */
  .side-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 80px; align-items: start; }
  .container.side-layout { max-width: 1380px; }
  .side-nav { display: block; position: sticky; top: calc(var(--header-h) + 40px); transition: top .6s cubic-bezier(.4, 0, .2, 1); }
  body.header-hidden .side-nav { top: 40px; }
  .side-nav .side-title { display: block; padding-bottom: 18px; border-bottom: 2px solid var(--gray-900); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
  .side-nav li { border-bottom: 1px solid var(--gray-100); }
  .side-nav a { position: relative; display: block; padding: 15px 4px 15px 16px; font-size: 16px; font-weight: 500; color: var(--gray-500); transition: color .2s; }
  .side-nav a::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--green); transform: translateY(-50%); transition: height .2s; }
  .side-nav a:hover { color: var(--gray-900); }
  .side-nav a.active { color: var(--green); font-weight: 700; }
  .side-nav a.active::before { height: 18px; }
  /* 본문 폭이 210 + 64px 줄어든 만큼 사양 섹션 제목 칸을 240 → 180px로 */
  .has-side-nav .prod-sec { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; }
  .has-side-nav .prod-head { gap: 48px; }
  .has-side-nav .prod-head .photos, .has-side-nav .prod-sec > h3 { top: calc(var(--header-h) + 40px); }
  body.has-side-nav.header-hidden .prod-head .photos, body.has-side-nav.header-hidden .prod-sec > h3 { top: 40px; }
}
/* 1025~1280px: 본문이 좁아 사양 섹션은 제목을 위에 두는 한 줄 배치로 */
@media (min-width: 1025px) and (max-width: 1280px) {
  .side-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; }
  .has-side-nav .prod-sec { grid-template-columns: 1fr; gap: 20px; }
  .has-side-nav .prod-sec > h3 { position: static; }
}

/* ---------- 경로(breadcrumb)는 서브 비주얼 h1 아래, 설명은 local-nav 아래 소개 줄(page-intro) (사용자 요청 2026-10-14) ----------
   소개 줄은 본문 섹션의 첫 줄처럼 보이게: 위 80px(768px 이하 48px), 바로 뒤 본문 섹션 위 여백 120 → 40px(32px) */
.sub-hero .breadcrumb { justify-content: center; margin: 22px 0 0; }
.sub-hero .breadcrumb li:last-child { font-weight: 600; }
.page-intro { padding-top: 80px; }
.page-intro .sec-desc { margin-top: 0; max-width: 900px; }
.page-intro + .section { padding-top: 56px; } /* 소개 문장 ↔ 본문 40 → 56px (2026-10-16) */
@media (max-width: 768px) {
  .sub-hero .breadcrumb { margin-top: 16px; font-size: 13px; }
  .page-intro { padding-top: 48px; }
  .page-intro + .section { padding-top: 40px; }
}

/* ---------- 서브 비주얼 글자 살짝 아래로 (사용자 요청 2026-10-14) ----------
   세로 가운데에서 위 여백만 더해 PC 20px, 모바일 12px 내림 */
.sub-hero .container { padding-top: 40px; }
@media (max-width: 768px) { .sub-hero .container { padding-top: 24px; } }

/* ---------- 제품 탭(prod-tabs) 스크롤해도 항상 보이게 (사용자 요청 2026-10-14) ----------
   탭이 있는 제품(디지털메타·누전경보기·서지보호기)만 해당. 고정되므로 두 줄로 꺾이지 않게 한 줄 + 넘치면 가로 스크롤.
   위치: PC(1025px 이상)는 헤더 바로 아래, 1024px 이하는 헤더 + 가로 메뉴(local-nav, 69px) 아래. 헤더가 숨겨지면 그만큼 같이 올라감.
   탭 높이(위아래 18px 포함 약 88px)만큼 제품 사진·사양 제목 sticky 위치도 내림 */
.prod-tabs { position: sticky; top: var(--header-h); z-index: 40; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 18px; padding-bottom: 18px; background: var(--white); transition: top .6s cubic-bezier(.4, 0, .2, 1); }
.prod-tabs::-webkit-scrollbar { display: none; }
.prod-tabs a { flex: none; white-space: nowrap; padding: 14px 20px; } /* 높이 키움 (사용자 요청 2026-10-14) 줄 72 → 88px */
body.header-hidden .prod-tabs { top: 0; }
@media (min-width: 1025px) and (max-width: 1280px) {
  .prod-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .prod-tabs::after { content: ''; flex: 0 0 24px; }
}
@media (min-width: 1025px) {
  body:has(.prod-tabs) .prod-head .photos, body:has(.prod-tabs) .prod-sec > h3 { top: calc(var(--header-h) + 112px); }
  body.header-hidden:has(.prod-tabs) .prod-head .photos, body.header-hidden:has(.prod-tabs) .prod-sec > h3 { top: 112px; }
}
@media (max-width: 1024px) {
  .prod-tabs { top: calc(var(--header-h) + 69px); }
  body.header-hidden .prod-tabs { top: 69px; }
}
@media (max-width: 768px) { .prod-tabs { padding-top: 14px; padding-bottom: 14px; } .prod-tabs a { padding: 12px 18px; } }

/* ---------- 제품 사진 여러 장(n2·n3·n4): 한 줄 최대 2장, 크게 (사용자 요청 2026-10-14) ----------
   좁은 사진 칸(4fr)에 2~4장이 들어가 한 장이 128px까지 줄고 가로로 찌그러졌음.
   → 사진 비율 유지(height:auto), 3장도 2열(마지막 장은 가운데), 1025px 이상에서는 사진을 본문 전체 폭으로 설명 위에 둠 */
.prod-head .photos img { height: auto; object-fit: contain; }
.prod-head .photos.n3 { grid-template-columns: 1fr 1fr; }
.prod-head .photos:is(.n3, .n5) figure:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
@media (min-width: 1025px) {
  .prod-head:has(.photos:is(.n2, .n3, .n4, .n5)) { grid-template-columns: 1fr; gap: 48px; }
  .prod-head .photos:is(.n2, .n3, .n4, .n5) { position: static; }
  .prod-head .photos:is(.n2, .n3, .n4, .n5) img, .prod-head.cat2025 .photos:is(.n2, .n3, .n4, .n5) img { max-height: 320px; }
}
@media (max-width: 768px) {
  .prod-head .photos:is(.n2, .n3, .n4, .n5) { gap: 10px; }
  .prod-head .photos:is(.n2, .n3, .n4, .n5) figure { padding: 14px; }
}

/* 누전경보기 아날로그타입 사양표(이미지 → 표, 2026-10-14): 모바일에서 제목 열을 좁혀 가로 스크롤 없이 */
@media (max-width: 768px) {
  .spec-table table.lbl-narrow col.c-grp { width: 68px; }
  .spec-table table.lbl-narrow col.c-th { width: 96px; }
  .spec-table table.lbl-narrow th, .spec-table table.lbl-narrow td { padding-left: 8px; padding-right: 8px; word-break: keep-all; }
  .spec-table table.lbl-narrow td { overflow-wrap: anywhere; }
  .spec-table table.lbl-narrow thead th { white-space: normal; }
}

/* GEO (2026-10-15) ----------------------------------------------------------
   푸터 정적 회사정보: JS를 실행하지 않는 크롤러용. main.js가 푸터를 그리면 통째로 바뀌어 화면에는 거의 보이지 않는다 */
.footer-static { max-width: 1320px; margin: 0 auto; padding: 40px 20px; font-size: 14px; line-height: 1.8; color: var(--gray-500); }
.footer-static address { font-style: normal; }
/* 공지사항 전체 보기(notices.php): 게시판 보기 화면 클래스를 그대로 쓰고 글 사이 간격만 */
.notice-archive .notice-entry + .notice-entry { margin-top: 60px; }
.notice-archive .view-head h2 a:hover { color: var(--green); text-decoration: underline; }
.notice-archive .view-body { min-height: 0; }

/* ---------- 탭 메뉴(local-nav) 아래 첫 여백 (사용자 요청 2026-10-16) ----------
   탭 아래 내용이 붙어 보여서 모든 하위 페이지 공통으로 넓힘: 일반 섹션 120px·소개 줄(page-intro) 80px → 140px, 768px 이하 70/48px → 88px.
   제품 페이지(PC)는 탭이 숨겨져 있지만 같은 규칙이 적용돼 120 → 140px */
#local-nav + .section, #local-nav + .page-intro { padding-top: 140px; }
@media (max-width: 768px) { #local-nav + .section, #local-nav + .page-intro { padding-top: 88px; } }
/* 소개 줄(고객센터·자료실·견적문의·약관)만 탭 아래 140 → 72 → 48px(768px 이하 88 → 48 → 32px): 넓은 여백 가운데 한 줄만 떠 보여서 위로 올림 - 사용자 요청 2026-10-21 */
#local-nav + .page-intro { padding-top: 48px; }
@media (max-width: 768px) { #local-nav + .page-intro { padding-top: 32px; } }
/* 고객센터(공지·뉴스·게시글 보기)·자료실(카탈로그·인증서): 소개 줄을 없앤 뒤 본문을 탭 쪽으로 140 → 80px(768px 이하 88 → 56px) - 사용자 요청 2026-10-21
   고객센터 목록·보기는 글이 적으면 푸터가 바로 올라와 섹션 최소 높이 800 → 640px(768px 이하 600 → 480px, 위아래 여백 포함. 800은 너무 커서 줄임) */
:is([data-page="notice"], [data-page="news"], [data-page="catalog"], [data-page="certificates"]) #local-nav + .section { padding-top: 80px; }
:is([data-board="list"], [data-board="news"], [data-board="view"]) #local-nav + .section { min-height: 640px; }
@media (max-width: 768px) {
  :is([data-page="notice"], [data-page="news"], [data-page="catalog"], [data-page="certificates"]) #local-nav + .section { padding-top: 56px; }
  :is([data-board="list"], [data-board="news"], [data-board="view"]) #local-nav + .section { min-height: 480px; }
}
/* 인증서 설명 두 줄 통일 (사용자 요청 2026-10-21): 1줄 문서 종류(굵게), 2줄 대상 · 번호(작은 회색). 768px 이하는 대상과 번호를 줄 나눔 */
.cert-item figcaption strong { display: block; font-weight: 600; }
.cert-item figcaption small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--gray-500); }
.cert-item figcaption small span + span::before { content: '·'; margin: 0 6px; }
@media (max-width: 768px) {
  .cert-item figcaption small { margin-top: 2px; font-size: 12px; }
  .cert-item figcaption small span { display: block; }
  .cert-item figcaption small span + span::before { content: none; }
}
/* 인증서 회색 배경을 칸마다 → 큰 판 하나로 (사용자 요청 2026-10-21, 시안 B2): 판을 좌우 40px(모바일 12px) 넓히고, 모서리 12 → 24px(모바일 16px, 사용자 요청: 더 둥글게) 같은 만큼 안쪽 여백을 줘서 그림 크기는 그대로 */
.cert-list { background: var(--gray-100); border-radius: 24px; margin: 0 -40px; padding: 72px 40px; }
.cert-item .thumb { background: none; }
@media (max-width: 1199px) { .cert-list { margin: 0 -12px; padding: 56px 12px; } } /* 화면 끝까지 붙거나 넘치지 않게 */
@media (max-width: 768px) { .cert-list { padding: 32px 12px; border-radius: 16px; } }
/* 카탈로그 카드 테두리를 목록 전체 테두리 하나로 (사용자 요청 2026-10-21): 회색 판 대신 이전 카드 테두리(1px --gray-100, --radius)를 바깥 하나로.
   카드별 흰 바탕·테두리·hover 그림자 제거, 판 넓힘은 인증서(.cert-list)와 같은 값 */
.catalog-grid { border: 1px solid var(--gray-100); border-radius: var(--radius); margin: 0 -40px; padding: 72px 40px; gap: 56px 24px; }
.catalog-card { border: 0; background: none; }
.catalog-card:hover { box-shadow: none; }
@media (max-width: 1199px) { .catalog-grid { margin: 0 -12px; padding: 56px 12px; } }
@media (max-width: 768px) { .catalog-grid { padding: 16px 12px; gap: 8px; } } /* 카드 자체 여백 32px이 있어 판·카드 사이 간격은 작게 */