:root {
  --black: #111111;
  --white: #ffffff;
  /* 캔버스 — 노션 스타일 화이트페이퍼 톤, 쿨톤으로 더 밝게 (LED 브랜드에 맞춰 누런기 완전 배제) */
  --bg: #F5F7F8;
  --bg-alt: #EBF0F3;
  --bg-footer: #E2E7EB;
  --gray-100: #F2F4F5;
  --gray-200: #DFE4E8;
  --gray-400: #6C7680;
  --gray-500: #5A6570;
  --gray-600: #5A6570;
  /* 액센트 — Apple Action Blue 기준으로 미세 조정 */
  --brand: #0066cc;
  --brand-dark: #0052a3;
  /* 라운드 스케일 — Apple 라운드 스케일(5/8/11/18/pill) 기준 */
  --radius: 8px;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  /* 여백 스케일 (8px 기준) */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 28px;
  --space-xxl: 32px;
  /* 그림자 — 기본은 헤어라인만, 호버/모달에서만 옅게 */
  --shadow-1: 0 1px 2px rgba(20,20,20,.03), 0 3px 8px rgba(20,20,20,.04), 0 10px 22px rgba(20,20,20,.05);
  --shadow-2: 0 10px 26px rgba(20,20,20,.09), 0 28px 64px rgba(20,20,20,.15);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
html { scroll-padding-top:192px; }
/* [PLAN A] 메인 2영역 CSS 스크롤 스냅 — 경계에 걸리되 긴 콘텐츠는 자유 스크롤 */
html { scroll-snap-type: y proximity; }
.hero { scroll-snap-align: start; }
#snap2 { scroll-snap-align: start; scroll-margin-top: -192px; }
#main-page footer { scroll-snap-align: end; }
body {
  font-family:'Pretendard',-apple-system,sans-serif;
  background:var(--bg); color:var(--black);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
a { text-decoration:none; color:inherit; }
button { font-family:'Pretendard',sans-serif; cursor:pointer; border:none; background:none; }
img { display:block; max-width:100%; }

/* ─────────────────────
   HEADER — 투명 오버레이
───────────────────── */
#hdr {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px 48px 14px;
  background:rgba(245,247,248,.96);
  border-bottom:1px solid rgba(0,0,0,.07);
  box-shadow:none;
  overflow:visible;
  transition:background .3s, box-shadow .3s, border-color .3s;
}

.h-logo-img { height:55px; width:auto; object-fit:contain; transition:filter .35s; }
.h-ham {
  width:48px; height:48px; border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  transition:background .15s;
}
.h-ham:hover { background:rgba(var(--hdr-fg),.1); }
.h-ham em {
  display:block; width:24px; height:1.8px;
  background:rgb(var(--hdr-fg)); border-radius:1px;
  transition:all .28s cubic-bezier(.23,1,.32,1), background .3s;
}
/* ── 헤더 3가지 상태 ── */

/* [1] 메인 페이지: 기본 흰 배경 (로고는 항상 기본 컬러) */
#hdr.hdr-hero {
  background: rgba(245,247,248,.96);
  border-bottom-color: rgba(0,0,0,.07);
  box-shadow: none;
}

/* [2] 메인 페이지 + 커서 올릴 때: 배경만 완전 불투명하게 */
#hdr.hdr-hero:hover {
  background: var(--bg);
  border-bottom-color: rgba(0,0,0,.07);
  box-shadow: none;
}

/* [3] 세부 페이지: 항상 흰 배경, 헤어라인만 */
#hdr.hdr-page {
  background: var(--bg);
  border-bottom-color: rgba(0,0,0,.07);
  box-shadow: none;
}
#hdr.hdr-page .h-logo-img  { filter: none; }
#hdr.hdr-page .h-gnb-btn   { color: rgba(30,30,30,.75); }
#hdr.hdr-page .gnb-item:hover .h-gnb-btn,
#hdr.hdr-page .gnb-item.open  .h-gnb-btn { color:#111; background:rgba(0,0,0,.06); }



/* ─── GNB 메가메뉴 ─── */
.gnb-item { position:relative; display:flex; align-items:center; }
.gnb-item .h-gnb-btn {
  color:rgba(30,30,30,.75);
  position:relative; padding-bottom:0;
}
.gnb-item .h-gnb-btn::after { display:none; }
.gnb-txt { position:relative; transition:font-weight .1s; }
.gnb-item:hover .h-gnb-btn,
.gnb-item.open .h-gnb-btn { color:#111 !important; background:transparent !important; font-weight:800; }

/* 메가메뉴 패널 — 풀와이드, 헤더 바로 아래 */
.gnb-drop {
  position:absolute;
  top:calc(100% + 12px); left:50%;
  background:#fff;
  border-top:2px solid var(--brand);
  box-shadow:var(--shadow-1);
  padding:20px 24px 24px;
  min-width:160px;
  width:max-content;
  max-width:220px;
  opacity:0; pointer-events:none;
  transform:translateX(-50%) translateY(-4px);
  transition:opacity .18s ease, transform .18s ease;
  z-index:950;
  display:flex; gap:0; flex-direction:column;
  text-align:center;
}
.gnb-item:hover .gnb-drop,
.gnb-item.open .gnb-drop {
  opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0);
}
/* 서브 컬럼 */
.gnb-drop-col { width:100%; }
.gnb-drop a {
  display:block; padding:9px 0;
  font-size:15px; font-weight:400; color:#555;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color .12s, border-color .12s;
  text-align:center;
}
.gnb-drop a:hover { color:var(--brand); border-bottom-color:var(--brand); }
.gnb-drop a.ext-link { display:flex; align-items:center; gap:7px; }
.gnb-drop a.ext-link svg { flex-shrink:0; opacity:.45; }


/* 사이트맵 열릴 때: 배경 블랙 반투명, 텍스트 흰색 복귀 */
#hdr.menu-open {
  background:rgba(0,0,0,.55) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:none !important;
  --hdr-fg: 255,255,255 !important;
  --hdr-sep-opacity: 0.35 !important;
  --hdr-search-bg: rgba(255,255,255,.12) !important;
  --hdr-search-border: rgba(255,255,255,.22) !important;
}

/* GNB — 로고 아래, 가운데 정렬 */
.h-left {
  display:flex; align-items:center; gap:11px;
  justify-content:center; margin-top:16px;
}

/* 로고 — 헤더 상단, 가운데 */
.h-logo {
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:opacity .25s;
  padding:0;
}
#hdr.menu-open .h-logo { opacity:0; pointer-events:none; }

/* GNB 버튼 */
.h-gnb-btn {
  padding:8px 18px; font-size:17px; font-weight:500; color:rgba(17,17,17,.85);
  border-radius:var(--radius); transition:color .35s, background .15s; cursor:pointer;
}
.h-gnb-btn:hover { color:#111 !important; background:rgba(0,0,0,.07); }

/* 햄버거 — 헤더 우측에 고정 배치 */
.h-ham {
  position:absolute; top:50%; right:24px; transform:translateY(-50%);
  width:48px; height:48px; border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  transition:background .15s;
}
.h-ham:hover { background:rgba(0,0,0,.07); }
.h-ham em {
  display:block; width:24px; height:1.8px;
  background:#111; border-radius:1px;
  transition:all .28s cubic-bezier(.23,1,.32,1), background .35s;
}
/* ─────────────────────
   SEARCH BAR DOCK
───────────────────── */

/* 사이트맵 열릴 때 GNB도 숨기기 */
#hdr.menu-open .h-left { opacity:0; pointer-events:none; }



/* ─────────────────────
   SITEMAP — 풀스크린 다크 오버레이
───────────────────── */
.drw-dim {
  position:fixed; inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:800; opacity:0; pointer-events:none;
  transition:opacity .35s;
}
.drw-dim.on { opacity:1; pointer-events:all; }

.drw {
  position:fixed; inset:0;
  background:transparent;
  z-index:850;
  transform:translateY(-12px);
  opacity:0; pointer-events:none;
  transition:opacity .35s, transform .35s cubic-bezier(.23,1,.32,1);
  display:flex; flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.drw.on { opacity:1; pointer-events:all; transform:translateY(0); }

/* ─────────────────────
   SITEMAP X버튼 — 우상단 고정
───────────────────── */
.drw-head {
  position:fixed; top:14px; right:20px;
  z-index:960;
  pointer-events:none;
}
/* 사이트맵이 열려있을 때만 클릭 가능 — 닫혀있을 때도 항상 클릭되게 두면
   모바일에서 이 X버튼 영역이 햄버거 버튼과 같은 자리에 겹치면서
   (보이지는 않아도) 햄버거 클릭을 가로채는 문제가 있었음 */
.drw.on .drw-head { pointer-events:all; }
.drw-x {
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.75); font-size:26px; font-weight:300;
  cursor:pointer;
  transition:color .15s, transform .2s;
}
.drw-x:hover { color:#fff; transform:rotate(90deg); }

/* 사이트맵 열릴 때 로고 숨기기 */
#hdr.menu-open .h-logo   { opacity:0; pointer-events:none; transition:opacity .2s; }

/* 사이트맵 내 로고 */
/* 사이트맵 로고 — 1.5배 */
.drw-logo {
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:36px 10% 0;
  flex-shrink:0;
}
.drw-logo-name {
  font-size:36px; font-weight:800; letter-spacing:-.02em; color:#fff;
}

/* 사이트맵 본문 */
.drw-nav {
  display:flex; align-items:flex-start; justify-content:center;
  padding:0 10% 32px;
  flex-shrink:0;
}
.drw-sitemap {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  width:100%; max-width:1100px;
}
.drw-group {
  padding:22px 22px;
  border-right:1px solid rgba(255,255,255,.08);
  min-width:0;
}
.drw-group:last-of-type {
  border-right:none;
}

/* 카테고리 타이틀 */
.drw-group-btn {
  width:100%; padding:0 0 10px;
  display:flex; align-items:center; justify-content:flex-start;
  font-size:19px; font-weight:800; color:#fff;
  letter-spacing:-.02em; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.15);
  margin-bottom:10px;
  background:none; border-top:none; border-left:none; border-right:none;
  cursor:default;
}
.drw-sub {
  max-height:none !important; overflow:visible !important;
  background:transparent;
}
/* 서브메뉴 링크 */
.drw-sub a {
  display:block; padding:6px 0;
  font-size:15.5px; font-weight:400; color:rgba(255,255,255,.45);
  border-left:none; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  transition:color .15s, padding-left .15s;
}
.drw-sub a:hover { color:#fff; padding-left:6px; border-left:none; }



/* ─────────────────────
   HERO — 사진 위 텍스트 오버레이
───────────────────── */
#main-page { display:block; }
.hero {
  position:relative; margin-top:0;
  width:100%; overflow:hidden;
  height:88vh; min-height:620px; max-height:820px;
  background:#0d1b2a;
}
.hero-bg-photo { position:absolute; inset:0; width:100%; height:100%; }
.hero-bg-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-bg-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,16,28,.18) 0%, rgba(8,16,28,.08) 34%, rgba(8,16,28,.8) 100%);
}
.ph-hero-text {
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center;
  padding:0 8% 110px;
}
.ph-hero-title {
  font-size:clamp(32px,4.5vw,58px); font-weight:800;
  line-height:1.2; letter-spacing:-.03em; color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.3);
  margin-bottom:18px;
}
.ph-hero-desc {
  font-size:16px; font-weight:400; color:rgba(255,255,255,.94);
  text-shadow:0 2px 14px rgba(0,0,0,.28);
  line-height:1.75; margin-bottom:0;
}
/* SCROLL DOWN */
.hs-scroll {
  position:absolute; right:32px; bottom:36px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  writing-mode:vertical-rl;
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.hs-scroll-line {
  width:1px; height:48px; margin-bottom:6px;
  background:linear-gradient(to bottom,rgba(255,255,255,.85),transparent);
  animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine { 0%,100%{opacity:.4;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.1)} }

/* 섹션 사이 웨이브(곡선) 구분선 */

/* ─────────────────────
   핵심사업 (메인 3단 섹션)
───────────────────── */
.core-sec { position:relative; background:var(--bg-alt); padding:80px 8%; }
.core-head { text-align:center; max-width:640px; margin:0 auto 48px; }
.core-head h2 { font-size:clamp(24px,3vw,34px); font-weight:800; color:var(--black); letter-spacing:-.03em; }
.core-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1160px; margin:0 auto; }
.core-col {
  display:flex; flex-direction:column;
  border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  background:#fff; padding:24px; transition:border-color .2s;
}
.core-col:hover { border-color:var(--brand); }
.core-col-media {
  aspect-ratio:1/1; border-radius:var(--radius-md);
  background:var(--gray-100); overflow:hidden; padding:20px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
}
.core-col-media img { width:100%; height:100%; object-fit:contain; display:block; }
.core-col-title { font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--black); margin-bottom:10px; }
.core-col-more {
  display:inline-block; width:fit-content; font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--brand); border-bottom:1.5px solid var(--brand); padding-bottom:2px;
  cursor:pointer; transition:opacity .15s;
}
.core-col-more:hover { opacity:.6; }
@media(max-width:860px){
  .core-cols { grid-template-columns:1fr; gap:20px; max-width:420px; }
  .core-sec { padding:56px 6%; }
}

/* ─────────────────────
   사업분야(고객군) 섹션 (메인)
───────────────────── */
.segment-sec { padding:80px 8%; background:var(--bg); border-top:1px solid var(--gray-200); }
.segment-head { text-align:center; max-width:640px; margin:0 auto 10px; }
.segment-head h2 { font-size:clamp(24px,3vw,34px); font-weight:800; color:var(--black); letter-spacing:-.03em; }
.segment-substat { text-align:center; font-size:13px; color:var(--gray-500); letter-spacing:.02em; margin-bottom:40px; }
.segment-list { max-width:760px; margin:0 auto; border-top:1px solid var(--gray-200); }
.segment-row { display:flex; align-items:center; gap:24px; padding:28px 4px; border-bottom:1px solid var(--gray-200); transition:border-color .2s; }
.segment-row-icon { flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.segment-row-icon img { width:32px; height:32px; object-fit:contain; display:block; }
.segment-row-text { flex:1; }
.segment-row-title { font-size:17px; font-weight:800; color:var(--black); letter-spacing:-.01em; margin-bottom:4px; }
.segment-row-desc { font-size:14px; color:#555; line-height:1.6; }
@media(max-width:860px){ .segment-sec { padding:56px 6%; } }

/* ─────────────────────
   핵심기술 요약 / 납품실적 요약 (메인, 사업분야와 동일 리스트 톤)
───────────────────── */
.tech-summary-sec { padding:80px 8%; background:var(--bg-alt); border-top:1px solid var(--gray-200); }
.record-summary-sec { padding:80px 8%; background:var(--bg); border-top:1px solid var(--gray-200); }
@media(max-width:860px){
  .tech-summary-sec { padding:56px 6%; }
  .record-summary-sec { padding:56px 6%; }
}
.sec-more-wrap { display:flex; width:100%; justify-content:center; text-align:center; margin-top:36px; clear:both; }
.sec-more-link {
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.05em;
  color:var(--brand); border-bottom:1.5px solid var(--brand); padding-bottom:2px;
  transition:opacity .15s;
}
.sec-more-link:hover { opacity:.6; }
@media(max-width:640px){ .segment-row { gap:16px; padding:22px 2px; } }

/* ─────────────────────
   섹션 공통
───────────────────── */
.sec-label {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gray-400);
  margin-bottom:14px;
}
.sec-label::before { content:''; width:24px; height:1px; background:var(--gray-200); }
.sec-title {
  font-size:clamp(22px,2.8vw,36px); font-weight:800;
  letter-spacing:-.03em; line-height:1.2; color:var(--black);
  white-space:nowrap;
}

/* ─────────────────────
   주요연혁 타임라인
───────────────────── */

/* 연도 블록 */
.hist-year-block {
  display:grid; grid-template-columns:1fr 1px 1fr;
  gap:0; align-items:start;
  margin-bottom:64px;
}
.hist-year-block:nth-child(odd)  .hist-photo { order:1; }
.hist-year-block:nth-child(odd)  .hist-divider { order:2; }
.hist-year-block:nth-child(odd)  .hist-content { order:3; }
.hist-year-block:nth-child(even) .hist-photo { order:3; }
.hist-year-block:nth-child(even) .hist-divider { order:2; }
.hist-year-block:nth-child(even) .hist-content { order:1; }

/* 사진 */
.hist-photo {
  padding:0 40px 0 0;
}
.hist-year-block:nth-child(even) .hist-photo { padding:0 0 0 40px; }
.hist-photo img {
  width:100%; max-width:420px; border-radius:var(--radius-lg);
  display:block; object-fit:cover; margin-left:auto;
}
.hist-year-block:nth-child(even) .hist-photo img { margin-left:0; }
/* 가운데 타임라인 선 */
.hist-divider {
  position:relative;
  width:1px; background:var(--gray-200);
  min-height:100%;
  display:flex; flex-direction:column; align-items:center;
}
.hist-divider::before {
  content:''; position:absolute; top:0; left:50%;
  transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%;
  background:var(--brand); flex-shrink:0;
  margin-top:0;
}

/* 텍스트 영역 */
.hist-content {
  padding:0 0 0 48px; text-align:left;
}
.hist-year-block:nth-child(even) .hist-content { padding:0 48px 0 0; text-align:right; }

.hist-year-num {
  font-size:56px; font-weight:800; color:var(--black);
  letter-spacing:-.04em; line-height:1; margin-bottom:16px;
}
.hist-items { list-style:none; display:flex; flex-direction:column; gap:10px; }
.hist-item {
  display:flex; align-items:baseline; gap:16px;
  font-size:14px; color:var(--black); line-height:1.6;
}
.hist-year-block:nth-child(even) .hist-item { flex-direction:row-reverse; }
.hist-mon {
  font-size:13px; font-weight:800; color:var(--black);
  opacity:.45; min-width:22px; flex-shrink:0;
  letter-spacing:.02em;
}
.hist-txt { font-size:15px; color:#444; line-height:1.6; }

@media(max-width:860px){
  .hist-year-block { grid-template-columns:1fr; gap:20px; }
  .hist-year-block:nth-child(odd) .hist-photo,
  .hist-year-block:nth-child(odd) .hist-divider,
  .hist-year-block:nth-child(odd) .hist-content { order:unset; }
  .hist-year-block:nth-child(even) .hist-photo,
  .hist-year-block:nth-child(even) .hist-divider,
  .hist-year-block:nth-child(even) .hist-content { order:unset; }
  .hist-divider { display:none; }
  .hist-photo,.hist-year-block:nth-child(even) .hist-photo { padding:0; }
  .hist-content,.hist-year-block:nth-child(even) .hist-content { padding:0; text-align:left; }
  .hist-year-block:nth-child(even) .hist-item { flex-direction:row; }
}

/* ─────────────────────
   인증현황
───────────────────── */
.cert-grid {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:16px; max-width:1160px; margin:0 auto;
}
.cert-slot { display:flex; flex-direction:column; }
.cert-inner {
  width:100%; aspect-ratio:1/1.414; display:flex; flex-direction:column;
  border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden;
  background:#fafafa; transition:border-color .2s;
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.cert-inner { cursor:pointer; }
.cert-inner:hover { border-color:#bbb; }
.cert-ph {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  background:var(--gray-100); pointer-events:none;
}
.cert-cap {
  margin-top:7px; font-size:11.5px; font-weight:500;
  color:var(--gray-600); text-align:center; line-height:1.4;
  white-space:normal; word-break:keep-all;
}
.cert-ph img {
  width:100%; height:100%; object-fit:contain;
  pointer-events:none; -webkit-user-drag:none;
}
@media(max-width:860px){ .cert-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:540px){ .cert-grid { grid-template-columns:repeat(2,1fr); } }

/* ─────────────────────
   제품 상세 모달
───────────────────── */
.prod-modal-dim {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index:1100; opacity:0; pointer-events:none; transition:opacity .3s;
}
.prod-modal-dim.on { opacity:1; pointer-events:all; }
.prod-modal {
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  padding:72px 20px 20px; pointer-events:none;
  opacity:0; transform:translateY(20px);
  transition:opacity .3s, transform .3s cubic-bezier(.23,1,.32,1);
}
.prod-modal.on { opacity:1; transform:translateY(0); pointer-events:all; }
.prod-modal-box {
  background:#fff; border-radius:var(--radius-xl);
  width:100%; max-width:860px; max-height:90vh;
  overflow-y:auto; position:relative;
  box-shadow:var(--shadow-2);
}
.prod-modal-close {
  position:absolute; top:16px; right:16px; z-index:10;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#f5f5f5; font-size:18px; color:#555; cursor:pointer;
  transition:background .15s;
}
.prod-modal-close:hover { background:#e0e0e0; color:#111; }
.prod-modal-body {
  display:grid; grid-template-columns:1fr 1fr; gap:0; padding:32px 36px 32px;
}
.prod-modal-left { padding-right:32px; display:flex; flex-direction:column; }
.prod-modal-img {
  width:100%; aspect-ratio:1/1;
  background:var(--gray-100); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gray-200); margin-bottom:18px;
}
.prod-modal-img img { width:100%; height:100%; object-fit:contain; }
.prod-modal-img-ph { font-size:12px; color:var(--gray-400); letter-spacing:.08em; }
.pm-gallery { position:relative; width:100%; height:100%; }
.pm-gallery-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .25s ease; }
.pm-gallery-img.on { opacity:1; }
.pm-gallery-arr {
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.45); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; cursor:pointer; z-index:2;
  transition:background .15s;
}
.pm-gallery-arr:hover { background:rgba(0,0,0,.7); }
.pm-gallery-arr.left { left:8px; }
.pm-gallery-arr.right { right:8px; }
.pm-gallery-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:2; }
.pm-gallery-dots span { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:background .15s; }
.pm-gallery-dots span.on { background:#fff; }
.prod-modal-title { font-size:26px; font-weight:800; color:#111; letter-spacing:-.03em; margin-bottom:4px; }
.prod-modal-ids { font-size:13px; color:#aaa; margin-bottom:14px; line-height:1.7; }
.prod-modal-marks { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; margin-bottom:20px; max-width:352px; }
.prod-spec-table {
  width:100%; border-collapse:collapse;
  border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden;
  flex:1;
}
.prod-spec-table tr { border-bottom:1px solid var(--gray-200); }
.prod-spec-table tr:last-child { border-bottom:none; }
.prod-spec-table td {
  padding:8px 15px; font-size:14px; vertical-align:middle;
}
.prod-spec-table td:first-child {
  font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--brand); width:44%; background:#f8f9fb;
  text-align:right; white-space:nowrap;
}
.prod-spec-table td:last-child { color:#444; font-weight:500; }
.prod-modal-btns {
  display:grid; grid-template-columns:1fr 1fr 1.2fr;
  gap:10px; padding:0 40px 36px; margin-top:4px;
}
/* 도면 PDF 버튼 — Primary CTA (필 형태, 브랜드 컬러 채움) */
.prod-modal-btn {
  padding:14px 0; text-align:center; border-radius:var(--radius-full);
  font-size:14px; font-weight:700; cursor:pointer; letter-spacing:-.01em; transition:all .15s;
}
.prod-modal-btn.gray { background:var(--gray-100); color:var(--gray-500); }
.prod-modal-btn.gray:hover { background:var(--gray-200); color:#111; }
.prod-modal-btn.dark { background:var(--brand); color:#fff; }
.prod-modal-btn.dark:hover { background:var(--brand-dark); }
@media(max-width:700px){
  .prod-modal-body { grid-template-columns:1fr; }
  .prod-modal-left { padding-right:0; margin-bottom:24px; }
  .prod-modal-btns { grid-template-columns:1fr; }
}

/* ─────────────────────
   FOOTER
───────────────────── */
footer { background:var(--bg-footer); }

/* 상단 통합 영역 */
.ft-main {
  padding:56px 8% 40px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  align-items:start;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.ft-left {
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
.ft-top-logo { height:38px; width:auto; display:block; filter:contrast(1.35) brightness(.92); }
.ft-top-desc { font-size:12.5px; color:rgba(17,17,17,.8); line-height:1.6; }
.ft-info { font-size:12px; color:rgba(17,17,17,.75); line-height:1.9; text-align:right; }
.ft-info-row { display:flex; justify-content:flex-end; gap:24px; flex-wrap:wrap; }
.ft-info-row span { white-space:nowrap; word-break:keep-all; }
.ft-info-row a { display:inline; color:var(--brand); text-decoration:none; margin:0; }
.ft-info-row a:hover { color:var(--brand-dark); }

/* 하단 Copyright */
.ft-copy {
  padding:16px 8%;
  text-align:center;
  font-size:11.5px; color:rgba(17,17,17,.62);
  background:var(--bg-footer);
}

/* ─────────────────────
   내부 페이지 공통
───────────────────── */
.pg { display:none; }
.pg.on { display:block; }
/* pg-sp 제거 — 헤더가 오버레이이므로 여백 불필요 */
.pg-page-header {
  text-align:center;
  padding:174px 8% 19px;
  border-bottom:none;
  margin:0;
  background:var(--bg);
}
.pg-page-header-label {
  font-size:15px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gray-400); margin-bottom:10px;
}
.pg-page-header-title {
  font-size:clamp(34px,5vw,54px); font-weight:800; letter-spacing:-.04em;
  color:var(--black); margin-bottom:16px; line-height:1.1;
}
.pg-body { padding:0 8% 100px; text-align:center; }

/* 탭 가운데 정렬 */
.tab-row {
  display:flex; justify-content:center;
  margin-bottom:0;
  position:sticky; top:var(--hdr-h, 110px); z-index:300;
  background:var(--bg);
  border-bottom:1px solid var(--gray-200);
  padding:0;
}
.tab-row-inner {
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.tab-row { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tab-btn {
  padding:18px 32px; font-size:18px; font-weight:500;
  color:var(--gray-500); background:transparent;
  border:none;
  transition:color .15s;
  cursor:pointer; white-space:nowrap;
}
.tab-btn.on { color:var(--brand); font-weight:700; border-bottom:2px solid var(--brand); padding-bottom:16px; }
.tab-btn:hover:not(.on) { color:var(--brand); }
.tab-pane { display:none; }
.tab-pane.on { display:block; }

/* Greeting */
.greet-card {
  max-width:960px;
  display:grid; grid-template-columns:420px 1fr; gap:56px;
  border:none; border-radius:0;
  background:transparent;
  margin:0 auto; text-align:left;
  align-items:start;
}
.greet-img {
  width:100%; height:auto; min-height:460px; max-height:560px;
  object-fit:cover; display:block;
  border-radius:12px;
}
.greet-text-wrap {
  padding:28px 0;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.greet-sig { margin-top:24px; font-size:14px; font-weight:600; color:var(--gray-400); }
@media(max-width:860px){
  .greet-card { grid-template-columns:1fr; gap:0; }
  .greet-img { min-height:260px; border-radius:8px 8px 0 0; }
  .greet-text-wrap { padding:28px 24px; }
}

/* Products */
/* ─────────────────────
   제품 카드 — 재설계
───────────────────── */
/* 3컬럼 고정 그리드 */
.prod-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  max-width:1160px;
  margin:30px auto 0;
  text-align:left;
}
.prod-card {
  border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; transition:border-color .2s; cursor:pointer;
}
.prod-card:hover { border-color:var(--brand); }
/* 사진 영역 — 4:3 비율 */
.prod-thumb {
  width:100%; aspect-ratio:1/1; overflow:hidden;
  background:var(--gray-100);
  display:flex; align-items:center; justify-content:center;
}
.prod-thumb img { width:100%; height:100%; object-fit:contain; display:block; transition:transform .4s; }
.prod-card:hover .prod-thumb img { transform:scale(1.04); }
.prod-thumb-lbl {
  font-size:13px; font-weight:700; letter-spacing:.12em;
  color:var(--gray-400); text-transform:uppercase;
}
/* 정보 영역 — const-card 동일 구조 */
.prod-info { padding:20px 22px 22px; }
.prod-title { font-size:15px; font-weight:700; color:#000000; line-height:1.45; margin-bottom:11px; letter-spacing:-.01em; }
.prod-divider { height:1px; background:var(--gray-200); margin-bottom:11px; }
.prod-row { display:flex; gap:10px; margin-bottom:5px; font-size:12.5px; }
.prod-row:last-child { margin-bottom:0; }
.prod-label { color:var(--brand); font-weight:600; min-width:76px; flex-shrink:0; }
.prod-val { color:#444; }
/* 인증마크 */
.prod-marks {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
/* 마크 이미지 래퍼 — 툴팁 고정 기준점 */
.prod-mark-wrap {
  position:relative; display:inline-flex;
  width:25px; height:25px;
}
.prod-mark-img {
  width:25px; height:25px; object-fit:contain; border-radius:50%;
  transition:transform .18s, filter .18s;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.12));
  display:block;
}
.prod-mark-wrap:hover .prod-mark-img {
  transform:scale(1.3);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
/* 툴팁 — 이미지 좌상단 고정, hover 즉시 표시 */
.prod-mark-tip {
  position:absolute;
  bottom:calc(100% + 5px);
  left:0;
  background:rgba(20,20,20,.88); color:#fff;
  font-family:'Pretendard',sans-serif;
  font-size:11px; font-weight:600;
  padding:4px 9px; border-radius:5px;
  white-space:nowrap; letter-spacing:.01em;
  pointer-events:none; z-index:9999;
  opacity:0; transform:translateY(4px);
  transition:opacity .12s, transform .12s;
}
.prod-mark-wrap:hover .prod-mark-tip {
  opacity:1; transform:translateY(0);
}
/* 페이지네이션 */
.prod-pagination {
  display:flex; align-items:center; justify-content:center;
  gap:6px; margin-top:40px; margin-bottom:16px;
}
.pg-btn {
  width:36px; height:36px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; cursor:pointer;
  border:1px solid var(--gray-200); background:#fff; color:var(--gray-600);
  transition:all .15s;
}
.pg-btn.on { background:var(--black); color:#fff; border-color:var(--black); }
.pg-btn:hover:not(.on):not(:disabled) { background:var(--gray-100); color:var(--black); }
.pg-btn:disabled { opacity:.3; cursor:default; }
.pg-btn.arr { font-size:18px; color:var(--gray-500); }

@media(max-width:1024px) { .prod-grid { grid-template-columns:repeat(3,1fr); gap:16px; } }
@media(max-width:720px) { .prod-grid { grid-template-columns:repeat(2,1fr); gap:14px; } }
@media(max-width:540px) { .prod-grid { grid-template-columns:1fr; } }

/* FAQ */
.faq-list { display:flex; flex-direction:column; gap:0; text-align:left; }
.faq-item { border-bottom:1px solid var(--gray-200); }
.faq-item:first-child { border-top:1px solid var(--gray-200); }
.faq-q {
  display:flex; align-items:center; gap:14px;
  padding:20px 4px; cursor:pointer; transition:background .15s;
}
.faq-q:hover { background:var(--gray-100); }
.faq-q-lbl {
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:var(--black); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; margin-top:1px;
}
.faq-q-txt { flex:1; font-size:16px; font-weight:600; color:#111; letter-spacing:-.01em; line-height:1.5; text-align:left; }
.faq-arrow { flex-shrink:0; font-size:22px; font-weight:300; color:#aaa; line-height:1; transition:transform .2s; margin-top:2px; }
.faq-item.open .faq-arrow { transform:rotate(45deg); color:#111; }
.faq-a {
  display:none; padding:0 4px 20px 42px;
  font-size:16px; color:#444; line-height:1.9;
}
.faq-item.open .faq-a { display:block; }
.faq-item.open .faq-q { background:transparent; }

/* 납품실적 */
.record-note { font-size:13px; color:var(--gray-500); line-height:1.7; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--gray-200); text-align:left; }
.record-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; text-align:left; }
.record-cat {
  border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  padding:22px 24px; background:#fff;
}
.record-cat-title {
  font-size:15px; font-weight:800; color:var(--brand); letter-spacing:-.01em;
  margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--gray-200);
}
.record-list { display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; list-style:none; }
.record-list li { font-size:13px; color:#444; line-height:1.7; padding-left:12px; position:relative; text-align:left; }
.record-list li::before { content:''; position:absolute; left:0; top:9px; width:4px; height:4px; border-radius:50%; background:var(--brand); }
@media(max-width:860px){ .record-grid { grid-template-columns:1fr; } }
@media(max-width:540px){ .record-list { grid-template-columns:1fr; } }

/* 납품실적 — 전국 지도 */
.record-map-sec { margin-bottom:48px; }
.record-map-head { text-align:center; margin-bottom:20px; }
.record-map-title { font-size:13px; color:var(--gray-500); letter-spacing:.02em; }
.record-map-wrap { display:flex; gap:32px; align-items:flex-start; }
.record-map-svg { flex:0 0 320px; width:320px; height:440px; }
.rm-region path, .rm-region ellipse, .rm-region circle {
  fill:var(--gray-100); stroke:#fff; stroke-width:2;
  transition:fill .15s; cursor:pointer;
}
.rm-region:hover path, .rm-region:hover ellipse, .rm-region:hover circle,
.rm-region.on path, .rm-region.on ellipse, .rm-region.on circle {
  fill:var(--brand);
}
.rm-label {
  font-family:'Pretendard',sans-serif; font-size:11px; font-weight:700;
  fill:var(--gray-600); text-anchor:middle; pointer-events:none;
  transition:fill .15s;
}
.rm-region:hover .rm-label, .rm-region.on .rm-label { fill:#fff; }
.record-map-panel {
  flex:1; min-width:0; min-height:300px;
  border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  padding:24px; max-height:440px; overflow-y:auto;
}
.rmp-empty { font-size:14px; color:var(--gray-500); text-align:center; padding:60px 0; }
.rmp-title { font-size:18px; font-weight:800; color:var(--black); margin-bottom:16px; letter-spacing:-.01em; }
.rmp-total { font-size:13px; font-weight:600; color:var(--brand); }
.rmp-cat { margin-bottom:18px; }
.rmp-cat:last-child { margin-bottom:0; }
.rmp-cat-title { font-size:13px; font-weight:800; color:var(--brand); margin-bottom:8px; }
.rmp-cat-count { font-size:12px; font-weight:600; color:var(--gray-500); }
.rmp-cat-list { list-style:none; padding-left:0; }
.rmp-cat-list li {
  font-size:13.5px; color:#444; line-height:1.7; padding:6px 0 6px 14px;
  position:relative; border-bottom:1px solid var(--gray-100);
}
.rmp-cat-list li::before { content:''; position:absolute; left:0; top:13px; width:4px; height:4px; border-radius:50%; background:var(--brand); }
.rmp-cat-list li:last-child { border-bottom:none; }
@media(max-width:860px){
  .record-map-wrap { flex-direction:column; align-items:center; }
  .record-map-svg { width:100%; max-width:320px; height:auto; }
  .record-map-panel { width:100%; max-height:400px; }
}

/* 브랜드 스토리 + 차별화 포인트 (인삿말) */
.why-sec { max-width:1160px; margin:70px auto 0; }
.why-quote {
  text-align:center; font-size:16px; font-weight:600; color:var(--brand); line-height:1.9;
  padding:28px 24px; background:var(--bg-alt); border-radius:var(--radius-lg); margin-bottom:32px;
}
.why-list { border-top:1px solid var(--gray-200); }
.why-row { display:flex; gap:28px; padding:28px 4px; border-bottom:1px solid var(--gray-200); align-items:baseline; }
.why-row-num { flex:0 0 auto; font-size:28px; font-weight:300; color:var(--brand); min-width:48px; }
.why-row-body { flex:1; }
.why-row-title { font-size:16px; font-weight:800; color:var(--black); margin-bottom:8px; letter-spacing:-.01em; }
.why-row-desc { font-size:13.5px; color:#555; line-height:1.75; }
@media(max-width:640px){ .why-row { gap:16px; padding:22px 2px; } .why-row-num { font-size:22px; min-width:34px; } }

/* 조직도 */
.org-note { text-align:center; font-size:13px; color:var(--gray-500); letter-spacing:.02em; margin-bottom:36px; }
.org-chart { display:flex; flex-direction:column; align-items:center; gap:0; }
.org-node {
  position:relative; z-index:1;
  border:1px solid var(--gray-200); border-radius:var(--radius-md); background:#fff;
  font-size:14px; font-weight:700; color:var(--black); text-align:center;
  padding:12px 20px; white-space:nowrap;
}
.org-ceo { background:var(--brand); color:#fff; border-color:var(--brand); font-size:16px; padding:14px 32px; }
.org-link { width:1px; height:24px; background:var(--gray-200); }
.org-branch-top { position:relative; display:flex; gap:20px; padding-top:24px; }
.org-branch-top::before { content:''; position:absolute; top:0; left:25%; right:25%; height:1px; background:var(--gray-200); }
.org-branch-top .org-node { background:var(--bg-alt); border-color:var(--bg-alt); }
.org-branch-top .org-node::before { content:''; position:absolute; top:-24px; left:50%; width:1px; height:24px; background:var(--gray-200); transform:translateX(-50%); z-index:0; }
.org-branch { position:relative; display:flex; gap:32px; width:100%; justify-content:center; padding-top:24px; }
.org-branch::before { content:''; position:absolute; top:0; left:16.6667%; right:16.6667%; height:1px; background:var(--gray-200); }
.org-col { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; }
.org-col::before { content:''; position:absolute; top:-24px; bottom:0; left:50%; width:1px; background:var(--gray-200); transform:translateX(-50%); z-index:0; }
.org-col .org-l1 { background:var(--brand); color:#fff; border-color:var(--brand); min-width:140px; }
.org-col .org-l2 { font-size:13px; font-weight:600; color:#555; padding:9px 20px; min-width:120px; }
@media(max-width:640px){
  .org-branch { flex-direction:column; align-items:center; gap:24px; padding-top:0; }
  .org-branch::before { display:none; }
  .org-branch .org-col { padding-top:24px; }
  .org-branch .org-col::before { top:0; height:24px; bottom:auto; }
  .org-branch-top { flex-direction:column; align-items:center; gap:12px; padding-top:0; }
  .org-branch-top::before { display:none; }
  .org-branch-top .org-node { padding-top:12px; }
  .org-branch-top .org-node::before { top:-24px; height:24px; }
}

/* 오시는 길 — 지도 전체폭 + 스택형 정보 */
.dir-map-wrap { border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:28px; text-align:left; }
.dir-info { display:flex; flex-direction:column; gap:12px; text-align:left; }
.dir-row { display:grid; grid-template-columns:96px 1fr; align-items:baseline; }
.dir-label { font-size:13px; font-weight:700; color:var(--brand); }
.dir-val { font-size:14px; color:#111; line-height:1.6; }
.dir-divider { height:1px; background:var(--gray-200); margin:24px 0; }
.dir-section { text-align:left; }
.dir-section-title { font-size:14px; font-weight:700; color:#111; margin-bottom:12px; }
.dir-section-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.dir-section-row:last-child { margin-bottom:0; }
.dir-section-txt { font-size:13px; color:#444; line-height:1.6; }
.dir-section-txt strong { color:var(--brand); font-weight:700; }
.dir-tag { flex-shrink:0; font-size:10px; font-weight:700; color:#fff; background:var(--brand); border-radius:var(--radius-full); padding:3px 8px; letter-spacing:.04em; }
.dir-tag.bus { background:#00BFA5; }
.dir-links { display:flex; gap:8px; margin-top:28px; }
.dir-link-btn {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--brand); border:1px solid var(--brand); border-radius:var(--radius-md);
  padding:11px 0; text-decoration:none; transition:all .15s;
}
.dir-link-btn:hover { background:var(--brand); color:#fff; }
.dir-link-btn.outline { color:var(--gray-600); border-color:var(--gray-200); }
.dir-link-btn.outline:hover { background:var(--gray-100); color:#111; border-color:var(--gray-200); }
@media(max-width:560px){
  .dir-links { flex-direction:column; }
  .dir-row { grid-template-columns:80px 1fr; }
}

/* 핵심기술 (제품소개) */
.tech-sec { max-width:1160px; margin:40px auto 100px; text-align:left; }
.tech-hero {
  background:var(--bg-alt); border-radius:var(--radius-lg);
  padding:56px 44px; margin-bottom:44px;
}
.tech-hero-badge {
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em;
  color:#fff; background:var(--brand); border-radius:var(--radius-full);
  padding:6px 16px; margin-bottom:20px;
}
.tech-hero-title {
  font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-.02em;
  color:var(--black); line-height:1.25;
}
.tech-intro-list {
  list-style:none; display:flex; flex-direction:column; gap:14px;
  border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  padding:28px 32px; margin-bottom:44px;
}
.tech-intro-list li {
  font-size:14.5px; color:#333; line-height:1.6; padding-left:16px; position:relative;
}
.tech-intro-list li::before { content:''; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--brand); }
.tech-compare-title { font-size:16px; font-weight:800; color:var(--black); letter-spacing:-.01em; margin-bottom:16px; }
.tech-compare-table { width:100%; border-collapse:collapse; border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:44px; }
.tech-compare-table th {
  background:transparent; color:var(--black); font-size:13px; font-weight:800; letter-spacing:.02em;
  padding:12px 16px; text-align:center; border-bottom:2px solid var(--brand);
}
.tech-compare-table th:first-child { background:var(--gray-100); }
.tech-compare-table td { padding:14px 16px; font-size:13.5px; color:#444; line-height:1.6; border-top:1px solid var(--gray-200); vertical-align:top; }
.tech-compare-table td:first-child { font-weight:700; color:var(--brand); white-space:nowrap; background:var(--gray-100); }
.tech-compare-table td strong { color:var(--brand); }
.tech-note { font-size:14px; color:#555; line-height:1.8; }
@media(max-width:720px){
  .tech-hero { padding:40px 28px; }
  .tech-intro-list { padding:22px 20px; }
  .tech-compare-table { font-size:12.5px; }
  .tech-compare-table th, .tech-compare-table td { padding:10px; }
}
@media(max-width:560px){
  .tech-compare-table { display:block; overflow-x:auto; white-space:nowrap; }
}


/* ─────────────────────
   RESPONSIVE
───────────────────── */
@media(max-width:1100px){
  #hdr { padding:0 28px; }
  .pg-body { padding:44px 6% 80px; }
}
@media(max-width:860px){
  .prod-grid { grid-template-columns:1fr 1fr; }
  .ft-copy { padding-left:5%; }
}
@media(max-width:560px){
  #hdr { padding:0 16px; }
  .ph-hero-text { padding:0 6% 88px; }
  .prod-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════
   MOBILE RESPONSIVE — 종합 대응
═══════════════════════════════════════ */

/* 태블릿 (≤900px) */
@media(max-width:900px){
  /* 헤더 */
  #hdr { padding:0 20px; }
  .h-gnb-btn .gnb-txt { font-size:13px; }

  /* 페이지 헤더 */
  .pg-page-header-title { font-size:clamp(28px,5vw,48px); }

  /* 탭 버튼 */
  .tab-btn { padding:14px 18px; font-size:15px; }
  .tab-btn.on { padding-bottom:12px; }

  /* 지도+정보 — 세로 스택 */
  .map-layout { grid-template-columns:1fr !important; min-height:auto !important; }
  .map-layout > div:first-child { height:320px !important; }
  .map-layout > div:last-child { border-left:none !important; border-top:1px solid var(--gray-200); }

  /* 푸터: 2열로 */
  .ft-main { grid-template-columns:1fr 1fr; gap:28px; }


  /* 제품 모달 */
  .prod-modal-body { grid-template-columns:1fr !important; padding:24px !important; }
  .prod-modal-left { padding-right:0 !important; margin-bottom:20px; }
  .prod-modal-box { max-width:95vw; }

  /* pg-body 패딩 */
  .pg-body { padding:0 4% 80px !important; }

  /* 인증현황 그리드 */
  .cert-grid { grid-template-columns:repeat(3,1fr); }

  /* 연혁 year 폰트 */
  .hist-year-num { font-size:40px; }
}

/* 모바일 (≤600px) */
@media(max-width:600px){
  /* 헤더 */
  #hdr { padding:0 14px; height:56px; }
  .h-logo-img { height:40px; }
  .h-gnb-btn { padding:8px 10px; font-size:12px; }

  /* Hero */
  .ph-hero-text { padding:0 6% 92px; }
  .ph-hero-title { font-size:clamp(26px,6vw,42px); }
  .ph-hero-desc { font-size:14px; }

  /* 페이지 헤더 */
  .pg-page-header-title { font-size:28px; }
  .pg-page-header-label { font-size:11px; }

  /* 탭 */
  .tab-row-inner { gap:4px; }
  .tab-btn { padding:12px 12px; font-size:13px; }

  /* 지도 높이 */
  .map-layout > div:first-child { height:240px !important; }

  /* 주소/전화 박스 */
  .map-layout > div:last-child { flex-direction:column; }

  /* 제품 그리드 — 2컬럼 유지 */
  .prod-grid { grid-template-columns:repeat(2,1fr); margin-top:20px; }

  /* 제품 카드 스펙(모델명/물품식별번호/규격) — 좌우 2단 대신 라벨 위·값 아래로 스택 */
  .prod-row { flex-direction:column; gap:2px; margin-bottom:8px; }
  .prod-label { min-width:0; }

  /* 인증현황 */
  .cert-grid { grid-template-columns:repeat(2,1fr); }

  /* 연혁 */
  .hist-year-num { font-size:32px; }
  .hist-txt { font-size:14px; }

  /* Footer */
  .ft-copy { padding-left:5%; font-size:11px; }

  /* 제품 모달 */
  .prod-modal { padding:12px 8px 8px; }
  .prod-modal-box { border-radius:var(--radius-lg); }
  .prod-modal-body { padding:16px !important; }
  .prod-spec-table td { padding:10px 14px; font-size:13px; }

  /* pg-body */
  .pg-body { padding:0 4% 60px !important; }

  /* 페이지네이션 */
  .pg-btn { width:32px; height:32px; font-size:13px; }
}

/* 초소형 (≤380px) */
@media(max-width:380px){
  .h-gnb-btn .gnb-txt { display:none; }
  .tab-btn { padding:10px 8px; font-size:12px; }
  .prod-grid { grid-template-columns:1fr; }
  .prod-modal-body { padding:12px !important; }
}

/* ─────────────────────
   모바일(좁은 세로형) 전용 UI — PLAN A 반응형
───────────────────── */
/* iOS 주소창 변동 대응: 동적 뷰포트 높이 */
@supports (height: 100svh) {
  .hero { height:100svh; }
}
@media(max-width:600px){
  /* 상단바: 로고 + 햄버거(사이트맵)만 노출, GNB 숨김 */
  .h-left { display:none; }
  #hdr { height:60px; padding:0 12px; }
  .h-logo { padding:0 8px; }

  /* 스크롤 스냅 오프셋: html의 scroll-padding-top(192px)과 #snap2의
     scroll-margin-top(-192px)이 원래 서로 정확히 상쇄되도록 짝지어진 값
     (PC 헤더 높이 기준 — #snap2는 상쇄로 화면 맨 위에 딱 붙고, 히어로/푸터는
     192px만큼 헤더를 피해서 스냅). 모바일 헤더(60px)에서도 이 상쇄 관계가
     그대로 유지되도록 두 값을 같은 실측 헤더 높이(--hdr-h) 기준으로 재조정 */
  html { scroll-padding-top: calc(var(--hdr-h, 60px) + 20px); }
  #snap2 { scroll-margin-top: calc(-1 * (var(--hdr-h, 60px) + 20px)); }

  /* 히어로: 텍스트 여백·터치 타깃 확대 */
  .ph-hero-text { padding:0 6% 84px; }
  .hs-scroll { right:12px; }

  /* 세부페이지 탭: 다 들어가면 가운데 정렬, 넘치면 자동으로 좌측정렬+스와이프 */
  .tab-row { justify-content:safe center; }
  .tab-row { scrollbar-width:none; }
  .tab-row::-webkit-scrollbar { display:none; }
  .tab-row-inner { flex-wrap:nowrap; }
  .tab-btn { white-space:nowrap; flex-shrink:0; }

  /* 인사말 카드 상단 여백 축소 */
  #company-greeting .greet-card { margin-top:24px !important; }

  /* 인증서 확대 뷰어: 화면 꽉 차게 */
  #certViewer { padding:14px !important; gap:10px !important; }
  #certViewerImg { max-width:96vw !important; max-height:74vh !important; }
  #certViewerTitle { font-size:13px !important; text-align:center; padding:0 8px; }
}

/* 햄버거: 데스크톱 숨김, 모바일에서만 표시 */
#hamBtn { display:none; background:none; border:none; cursor:pointer; justify-self:end; align-self:center; }
#hdr.menu-open #hamBtn { opacity:0; pointer-events:none; }

@media(max-width:600px){
  #hamBtn { display:flex; }

  /* 드로어: 모바일 세로 스택 */
  .drw { justify-content:flex-start; overflow-y:auto; }
  .drw-logo { padding:64px 8% 0; }
  .drw-nav { padding:8px 8% 40px; }
  .drw-sitemap { grid-template-columns:1fr; max-width:none; }
  .drw-group { border-right:none; border-bottom:1px solid rgba(255,255,255,.1); padding:18px 4px; }
  .drw-group:last-of-type { border-bottom:none; }
  .drw-group-btn { font-size:17px; padding-bottom:8px; margin-bottom:6px; }
  .drw-sub a { font-size:15px; padding:9px 0; }   /* 터치 타깃 */

  /* ── 세부페이지 간격 보정 (데스크톱 전용 음수마진 해제) ── */
  .pg-page-header { padding:92px 6% 12px; }
  .tab-row { top:60px; }
  #company-cert > div { margin-top:0 !important; padding-top:14px !important; padding-bottom:60px !important; }
  #company-history > div { padding-top:8px; }
  #company-directions > div { padding-bottom:60px !important; }
  .hist-year-block { margin-bottom:40px; }
}

/* ── 모바일 다듬기: 사이트맵 X버튼 / 인삿말 / 연혁 / 푸터 ── */
@media(max-width:600px){
  /* 사이트맵 X버튼: 햄버거 버튼(.h-ham)과 정확히 같은 위치·크기로 고정
     — 열기/닫기 버튼이 같은 자리에 있어야 탭 히트박스가 어긋나지 않음 */
  .drw-head { position:fixed; top:0; right:0; height:60px; display:flex; align-items:center; padding:0 24px 0 0; z-index:960; }
  .drw-x { width:48px; height:48px; font-size:22px; color:#fff; background:rgba(255,255,255,.12); border-radius:50%; }
  /* X버튼(.drw-head)과 같은 60px 높이 상자로 맞춰서 세로 중앙이 정확히 일치하도록,
     동시에 예전(padding-top 8px)보다 글자 위 여백도 자연히 더 늘어남 */
  .drw-logo { height:60px; display:flex; align-items:center; padding:0 8%; }

  /* 인삿말: 데스크톱용 강제 줄바꿈 해제 + 글자 크기·자간 재조정 */
  .greet-text-wrap br { display:none; }
  .greet-text-wrap { padding:24px 20px 8px !important; }
  .greet-text-wrap p { font-size:14.5px !important; line-height:1.85 !important; word-break:keep-all; letter-spacing:-.01em; margin-bottom:18px !important; }
  .greet-text-wrap p:first-of-type { font-size:17px !important; line-height:1.55 !important; margin-bottom:20px !important; }
  .greet-sig { margin-top:20px !important; padding-top:16px !important; }
  .greet-sig span { font-size:14px !important; }
  .greet-sig span span { font-size:15px !important; }

  /* 연혁: 사진·연도·본문 자연스럽게 */
  .hist-photo img { max-width:100%; margin-left:0; }
  .hist-year-num { font-size:26px; margin-bottom:4px; }
  .hist-items { gap:8px; }
  .hist-item { gap:10px; align-items:flex-start; }
  .hist-mon { flex-shrink:0; }
  .hist-txt { font-size:14.5px; line-height:1.65; word-break:keep-all; }
  .hist-year-block { margin-bottom:36px; }

  /* 푸터: 좌측 정렬 세로 스택, 줄바꿈 자연스럽게 */
  .ft-main { grid-template-columns:1fr; gap:28px; padding:36px 6% 26px; }
  .ft-info { text-align:left; line-height:1.9; }
  .ft-info-row { flex-direction:column; justify-content:flex-start; gap:2px; }
  .ft-info-row span { white-space:normal; word-break:keep-all; letter-spacing:0; }
  .ft-top-logo { height:34px; }
  .ft-copy { padding:12px 6%; font-size:11.5px; letter-spacing:0; word-break:keep-all; }
}

/* ── 모바일 재수정: 사이트맵 레이어 순서 / 연혁 레이아웃 ── */
@media(max-width:600px){
  /* 사이트맵이 헤더(z900)보다 아래층이라 X버튼이 가려지던 문제 */
  .drw-dim { z-index:920; }
  .drw { z-index:930; }
  #hdr.menu-open { background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; border-bottom-color:transparent !important; }

  /* 연혁: 연도→내역→사진 순서의 자연스러운 세로 타임라인 */
  .hist-year-block { display:flex; flex-direction:column; gap:14px; margin-bottom:44px; }
  .hist-content { order:1; }
  .hist-photo { order:2; padding:0 !important; }
  .hist-photo img { width:100%; max-width:100%; margin:0; border-radius:var(--radius-lg); }
  .hist-divider { display:none; }
  .hist-year-num { font-size:24px; margin-bottom:10px; padding-bottom:8px; border-bottom:2px solid var(--black); display:inline-block; align-self:flex-start; }
  .hist-items { gap:9px; }
  .hist-item { flex-direction:row !important; align-items:baseline; gap:12px; }
  .hist-mon { min-width:26px; text-align:left; }
  .hist-txt { font-size:14.5px; line-height:1.7; word-break:keep-all; text-align:left; }
}

/* ─────────────────────
   INTRO GATE — 조명 스위치 인트로 (PC 전용)
───────────────────── */
.intro-gate {
  position:fixed; inset:0; z-index:100000;
  background:#000000;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:0 64px 64px 0;
}
.intro-gate-logo {
  height:20px; width:auto; opacity:.55;
}
.intro-switch {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  cursor:pointer;
  animation:introPulse 2.4s ease-in-out infinite;
  transform:scale(1.5);
}
.intro-switch.on { animation:none; }
.intro-switch-plate {
  width:88px; height:132px; border-radius:5px;
  background:linear-gradient(165deg,#fbfaf7,#e9e6de);
  box-shadow:0 12px 32px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.15), inset 0 1px 1px rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
/* 플레이트 고정 나사 */
.intro-switch-plate::before, .intro-switch-plate::after {
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, #aaa 65%, #777);
  box-shadow:inset 0 0 1px rgba(0,0,0,.6);
}
.intro-switch-plate::before { top:9px; }
.intro-switch-plate::after { bottom:9px; }
.intro-switch-rocker {
  width:54px; height:98px; border-radius:3px;
  background:linear-gradient(180deg,#ffffff,#e4e1d9);
  box-shadow:0 2px 5px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.9), inset 0 -2px 3px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.06);
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:14px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.intro-switch-rocker::before { /* 상/하 절반을 나누는 미세한 라인 */
  content:''; position:absolute; left:10%; right:10%; top:50%;
  height:1px; background:rgba(0,0,0,.1);
}
.intro-switch-indicator {
  width:5px; height:5px; border-radius:50%;
  background:#d99a3b;
  box-shadow:0 0 5px 1px rgba(217,154,59,.75);
  transition:background .2s, box-shadow .2s;
}
.intro-switch.on .intro-switch-rocker {
  transform:translateY(3px);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.3), inset 0 -1px 1px rgba(255,255,255,.4), 0 0 0 1px rgba(0,0,0,.06);
}
.intro-switch.on .intro-switch-indicator {
  background:var(--brand);
  box-shadow:0 0 8px 2px rgba(0,102,204,.85);
}
.intro-switch-label {
  font-family:'Pretendard',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5);
  transition:color .3s;
}
.intro-switch.on .intro-switch-label { color:rgba(255,255,255,.85); }
@keyframes introPulse {
  0%,100% { filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50% { filter:drop-shadow(0 0 12px rgba(255,255,255,.18)); }
}
@keyframes introFlicker {
  0%   { opacity:1; }
  100% { opacity:0; }
}
.intro-gate.flicker { animation:introFlicker .35s ease-out forwards; pointer-events:none; }
@media(max-width:860px){ .intro-gate { display:none !important; } }