/*
 * ================================================================
 *  style.css — 나라이엔씨 통합 스타일시트
 *
 *  📌 페이지별 CSS 검색 키워드
 *  [SECTION:TOKENS]        CSS 변수 (디자인 토큰)
 *  [SECTION:RESET]         리셋 & 기본 설정
 *  [SECTION:HEADER]        헤더 / GNB / 모바일 메뉴 (전 페이지 공통)
 *  [SECTION:MAIN]          index.html 전용
 *  [SECTION:MAIN-RESP]     index.html 반응형
 *  [SECTION:SUB-COMMON]    서브페이지 공통 (배너·서브내비·섹션·reveal)
 *  [SECTION:ABOUT]         about.html 전용
 *  [SECTION:ABOUT-RESP]    about.html 반응형
 *  [SECTION:SERVICES]      services.html 전용
 *  [SECTION:SERVICES-RESP] services.html 반응형
 *
 *  연결 방법:
 *    index.html   → <link rel="stylesheet" href="css/style.css">
 *    서브페이지   → <link rel="stylesheet" href="css/style.css">
 * ================================================================
 */

/* [SECTION:TOKENS] ============================================================
   CSS 변수 (디자인 토큰)
   · 색상·그림자·반경을 한 곳에서 관리 — 값 변경 시 전체 반영
   ============================================================================ */
/* =====================================================
   CSS 변수 (디자인 토큰)
   · 색상·그림자·모서리 반경 등을 한 곳에서 관리
   · 값을 바꾸면 사이트 전체에 즉시 반영
   ===================================================== */
:root {
  /* ── 그린 브랜드 컬러 팔레트 ── */
  --navy:       #0d2e1a;   /* 가장 어두운 딥그린 — 헤더/푸터/강조 배경 */
  --blue:       #1a6b3a;   /* 중간 그린 — 그라디언트 중간 색 */
  --blue-mid:   #27a85a;   /* 대표 브랜드 그린 — 버튼·링크·강조 */
  --blue-light: #e6f7ed;   /* 연한 민트 — 뱃지·아이콘 배경·호버 배경 */
  --blue-line:  #b8e6ca;   /* 연한 그린 — 구분선·보더 */
  --accent:     #00c46a;   /* 포인트 밝은 그린 — 애니메이션·CTA 버튼 */

  /* ── 중립 컬러 ── */
  --white:      #ffffff;
  --off-white:  #f4faf6;   /* 섹션 교차 배경 (살짝 그린 틴트) */
  --gray-100:   #eef7f2;   /* 아주 연한 배경 */
  --gray-300:   #c8dfd2;   /* 보더·구분선 */
  --gray-500:   #6b9278;   /* 보조 텍스트 */
  --gray-700:   #2e5040;   /* 메뉴·본문 일반 텍스트 */
  --text:       #152520;   /* 기본 본문 텍스트 */

  /* ── 그림자 (깊이 단계별) ── */
  --shadow-sm:  0 2px 10px rgba(13,46,26,.07);
  --shadow-md:  0 6px 28px rgba(13,46,26,.11);
  --shadow-lg:  0 16px 48px rgba(13,46,26,.14);

  /* ── 공통 모서리 반경 ── */
  --radius:     12px;
  --radius-sm:  8px;
}

/* =====================================================
   리셋 & 기본 설정
   · font-size:1.2rem : rem 계산 기준점 (1rem = 16px)
   ===================================================== */


/* [SECTION:RESET] =============================================================
   리셋 & 기본 설정
   ============================================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:15px; }  /* rem 기준값 (1rem=15px) — 변경 시 전체 사이트 폰트 크기 일괄 조정 */
body {
  font-family:'Noto Sans KR','Outfit',sans-serif;
  background:var(--white);
  color:var(--text);
  overflow-x:hidden;   /* 가로 스크롤 방지 */
  line-height:1.6;
}
/* 스크롤바 커스텀 */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f0f4f9; }
::-webkit-scrollbar-thumb { background:var(--blue-mid); border-radius:3px; }
img { max-width:100%; }
a { text-decoration:none; color:inherit; }

/* =====================================================
   공유 키프레임 애니메이션
   · orbFloat  : 배경 글로우 원이 위아래로 부드럽게 떠다니는 효과
   · blink     : 눈깜빡임 같은 투명도 반복 (히어로 아이콘 점)
   · hfadeUp   : 아래→위로 나타나는 페이드인 (히어로 텍스트 등장)
   ===================================================== */
@keyframes orbFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-24px) scale(1.05); }
}
@keyframes blink {
  0%,100% { opacity:1; }
  50%     { opacity:.3; }
}
@keyframes hfadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}



/* [SECTION:HEADER] ============================================================
   헤더 / GNB 드롭다운 / 모바일 메뉴
   · index.html + 모든 서브페이지에서 공통 사용
   ============================================================================ */
/* =====================================================
   HEADER — 고정 상단 내비게이션 바
   · position:fixed  : 스크롤해도 상단에 고정
   · z-index:1000    : 다른 요소 위에 표시
   · height:68px     : 헤더 높이 (메뉴 드롭다운 위치 계산에도 사용)
   ===================================================== */
header {
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  height:68px;
  background:var(--white);
  border-bottom:1px solid var(--gray-300);
  display:flex; align-items:center;
  padding:0 5%; gap:40px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s;
}
/* 스크롤 내리면 그림자 강화 (JS로 .scrolled 클래스 토글) */
header.scrolled { box-shadow:var(--shadow-md); }

/* 로고 영역 */
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark {
  width:38px; height:38px;
  background:linear-gradient(135deg,var(--navy),var(--blue-mid));
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:white; font-family:'Outfit',sans-serif; font-size:1.3rem; font-weight:800;
}
.logo-name { display:flex; flex-direction:column; line-height:1.15; }
.logo-name strong { font-family:'Outfit',sans-serif; font-size:1.2rem; font-weight:800; letter-spacing:.5px; color:var(--navy); }
.logo-name span   { font-size:0.95rem; color:var(--gray-500); letter-spacing:1px; }

/* =====================================================
   GNB — 심플 1뎁스 + 마우스오버 시 각 메뉴별 2뎁스 드롭다운
   · nav : 헤더 안 1뎁스 탭 가로 나열
   · .nav-group : 각 메뉴 항목 + 드롭다운 묶음 (position:relative)
   · .nav-group:hover .nav-drop : 해당 메뉴 드롭다운 표시
   ===================================================== */
nav {
  flex:1;
  display:flex; align-items:stretch;
  height:68px;
}

/* 1뎁스 메뉴 그룹 — 드롭다운의 기준점 */
.nav-group {
  position:relative;
  display:flex; align-items:center;
}

/* 1뎁스 탭 텍스트 */
.nav-item {
  display:flex; align-items:center;
  height:100%;
  padding:0 28px;                /* 탭 간격 넉넉히 */
  font-size:1.15rem; font-weight:600;
  color:var(--gray-700);
  white-space:nowrap;
  transition:color .2s;
  border-bottom:3px solid transparent;
  cursor:pointer; text-decoration:none;
}
.nav-item:hover,
.nav-group:hover .nav-item { color:var(--blue-mid); border-bottom-color:var(--blue-mid); }
.nav-item.active { color:var(--blue-mid); font-weight:700; border-bottom-color:var(--blue-mid); }

/* 2뎁스 드롭다운 패널 — 각 .nav-group 기준 */
.nav-drop {
  display:none;
  position:absolute;
  top:68px; left:0;
  min-width:200px;
  background:var(--white);
  border-top:3px solid var(--blue-mid);
  border:1px solid var(--gray-300);
  border-top:3px solid var(--blue-mid);
  border-radius:0 0 10px 10px;
  box-shadow:var(--shadow-md);
  padding:8px 0;
  z-index:999;
}
.nav-group:hover .nav-drop { display:block; }

/* 2뎁스 개별 링크 */
.nav-drop a {
  display:block;
  padding:9px 20px;
  font-size:1.1rem; color:var(--gray-700);
  border-bottom:1px solid var(--gray-100);
  transition:background .15s, color .15s;
  white-space:nowrap;
}
.nav-drop a:last-child { border-bottom:none; }
.nav-drop a:hover { background:var(--blue-light); color:var(--blue-mid); }

/* 헤더 우측 버튼 영역 */
.header-right { display:flex; align-items:center; gap:12px; margin-left:auto; }
.btn-contact {
  padding:9px 20px;
  background:var(--blue-mid); color:white;
  border-radius:6px; font-size:1.1rem; font-weight:700;
  white-space:nowrap; transition:background .2s,transform .2s;
}
.btn-contact:hover { background:var(--blue); transform:translateY(-1px); }

/* 모바일 햄버거 버튼 (768px 이하에서만 표시) */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.hamburger span { width:22px; height:2px; background:var(--navy); border-radius:2px; transition:all .3s; }

/* =====================================================
   모바일 메뉴 (768px 이하 전용)
   · 햄버거 클릭 시 JS가 .open 클래스 추가 → 표시
   · 1뎁스 클릭 → .mob-2dep에 .open 추가 → 아코디언 펼침
   ===================================================== */
.mob-menu {
  display:none; /* 기본 숨김 */
  position:fixed; top:68px; left:0; right:0;
  background:white;
  border-bottom:2px solid var(--blue-line);
  z-index:999; padding:16px 5%;
  box-shadow:var(--shadow-md);
  max-height:calc(100vh - 68px); overflow-y:auto;
}
.mob-menu.open { display:block; }
/* 1뎁스 항목 */
.mob-1dep {
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 0; font-size:1.2rem; font-weight:700; color:var(--navy);
  border-bottom:1px solid var(--gray-100); cursor:pointer;
}
/* 2뎁스 영역 — 기본 숨김, .open 시 표시 */
.mob-2dep { display:none; padding:4px 0 8px 14px; }
.mob-2dep.open { display:block; }
.mob-2dep a {
  display:block; padding:7px 0;
  font-size:1.1rem; color:var(--gray-700);
  border-bottom:1px solid var(--gray-100);
}



/* [SECTION:MAIN] ==============================================================
   index.html 전용
   · 히어로 슬라이더 / 스탯바 / 섹션 공통 / 강점 / 서비스 / 인증띠
   · 조달제품 / 고객지원 / CTA / 푸터 / Scroll Reveal / 인라인스타일 클래스
   ============================================================================ */
/* =====================================================
   히어로 슬라이더 (Swiper)
   · .hero-swiper-wrap : margin-top:68px — 고정 헤더 높이만큼 아래로
   · .hero-slide       : height:560px 고정 — 두 슬라이드 높이 통일
   · display:grid 2컬럼 — 좌(텍스트) / 우(일러스트) 배치
   ===================================================== */
.hero-swiper-wrap { margin-top:68px; position:relative; }
.heroSwiper { width:100%; }

.hero-slide {
  background:linear-gradient(115deg, var(--navy) 0%, var(--blue) 55%, #1e8c4a 100%);
  height:560px;          /* ★ 두 슬라이드 모두 동일한 고정 높이 */
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  overflow:hidden;
  position:relative;
}

/* 슬라이드 배경 도트 패턴 (SVG data URI) */
.hero-slide::after {
  content:'';
  position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none; z-index:0;
}

/* 슬라이드2 전용 배경 (더 어두운 딥그린) */
.slide-2 { background:linear-gradient(115deg, #082016 0%, #0d3d22 50%, #155c33 100%); }

/* ── Swiper 페이지네이션 (하단 점) ──
   · 활성 점은 pill 형태로 늘어남 */
.hero-pagination { bottom:22px !important; }
.hero-pagination .swiper-pagination-bullet {
  width:10px; height:10px;
  background:rgba(255,255,255,.45); opacity:1; transition:all .3s;
}
.hero-pagination .swiper-pagination-bullet-active {
  background:#5ef0a0; width:28px; border-radius:5px;
}

/* ── Swiper 이전/다음 화살표 버튼 ── */
.hero-btn-prev, .hero-btn-next { color:#5ef0a0 !important; --swiper-navigation-size:20px; }
.hero-btn-prev::after, .hero-btn-next::after { font-size:1.3rem !important; font-weight:900; }
.hero-btn-prev { left:20px !important; }
.hero-btn-next { right:20px !important; }

/* ── 히어로 좌측 콘텐츠 영역 ── */
.hero-left { padding:72px 6% 80px 8%; position:relative; z-index:1; }

/* 상단 작은 뱃지 (아이콘 점 + 텍스트) */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:100px; padding:5px 14px;
  font-size:1.05rem; color:rgba(255,255,255,.9); letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:24px; animation:hfadeUp .7s ease both;
}
/* 깜빡이는 초록 점 */
.hero-eyebrow::before {
  content:''; width:6px; height:6px;
  background:#5ef0a0; border-radius:50%; animation:blink 2s infinite;
}

/* 메인 헤드라인 */
.hero-left h1 {
  font-family:'Outfit',sans-serif;
  font-size:clamp(34px,4vw,58px); /* 반응형 폰트 크기 (최소34 ~ 최대58px) */
  font-weight:800; color:white; line-height:1.15;
  word-break:keep-all; margin-bottom:20px;
  animation:hfadeUp .7s .1s ease both; /* 0.1s 지연 후 등장 */
}
.hero-left h1 em { font-style:normal; color:#7fffc4; } /* 강조 텍스트 민트 색 */

/* 부제목 */
.hero-left p {
  font-size:1.2rem; color:rgba(255,255,255,.8);
  line-height:1.8; max-width:440px;
  word-break:keep-all; margin-bottom:24px;
  animation:hfadeUp .7s .2s ease both;
}

/* ── 슬라이드1 수치 행 (50+ / 20년 / 100+) ── */
.hero-stats-row { display:flex; align-items:center; gap:0; margin-bottom:32px; animation:hfadeUp .7s .25s ease both; }
.hero-stat-item { display:flex; flex-direction:column; gap:3px; }
.hero-stat-num { font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:900; color:#fff; line-height:1; }
.hero-stat-num em { font-style:normal; color:#5ef0a0; font-size:1.25rem; }
.hero-stat-lbl { font-size:1.0rem; color:rgba(255,255,255,.6); letter-spacing:.5px; }
.hero-stat-divider { width:1px; height:36px; background:rgba(255,255,255,.2); margin:0 22px; }

/* ── 슬라이드2 인증 뱃지 행 ── */
.hero-badge-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; animation:hfadeUp .7s .25s ease both; }
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22); border-radius:8px;
  font-size:1.05rem; color:rgba(255,255,255,.9); font-weight:600; white-space:nowrap;
}

/* 히어로 버튼 그룹 */
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; animation:hfadeUp .7s .35s ease both; }
/* 흰색 채워진 버튼 */
.hbtn-white {
  padding:12px 28px; background:white; color:var(--navy);
  border-radius:7px; font-size:1.15rem; font-weight:700;
  transition:all .25s; box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.hbtn-white:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
/* 외곽선만 있는 고스트 버튼 */
.hbtn-outline {
  padding:12px 28px; background:transparent;
  border:1.5px solid rgba(255,255,255,.5); color:white;
  border-radius:7px; font-size:1.15rem; font-weight:600; transition:all .25s;
}
.hbtn-outline:hover { background:rgba(255,255,255,.1); border-color:white; }

/* ── 히어로 우측 일러스트 영역 ── */
.hero-right {
  display:flex; align-items:center; justify-content:center;
  padding:40px 8% 60px 0; position:relative; z-index:1;
  animation:hfadeUp .8s .15s ease both;
}
/* 유리 카드 효과 박스 */
.hero-illus {
  width:100%; max-width:440px; aspect-ratio:4/3;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  border-radius:16px; backdrop-filter:blur(6px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:32px; position:relative; overflow:visible;
}
/* 배경 글로우 원 (::before pseudo) */
.hero-illus::before {
  content:''; position:absolute; top:-60px; right:-60px;
  width:240px; height:240px;
  background:radial-gradient(circle,rgba(94,240,160,.15),transparent 70%);
  border-radius:50%; pointer-events:none;
}
/* SVG 네트워크 그래프 래퍼 */
.nodes-wrap { position:relative; width:100%; height:200px; }
.net-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
/* 슬라이드 하단 레이블 */
.hero-illus-label { font-size:1.1rem; color:rgba(255,255,255,.7); letter-spacing:1px; text-transform:uppercase; }

/* ── 슬라이드2 인증 카드 그리드 ── */
.slide2-illus { aspect-ratio:auto !important; min-height:260px; }
.cert-vis { width:100%; }
.cert-vis-title {
  font-size:1.05rem; font-weight:700; color:rgba(255,255,255,.55);
  letter-spacing:2px; text-transform:uppercase; margin-bottom:16px; text-align:center;
}
/* 3열 카드 격자 */
.cert-vis-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cert-vis-item {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  border-radius:12px; padding:16px 10px;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  transition:background .3s, border-color .3s; cursor:default;
}
.cert-vis-item:hover { background:rgba(94,240,160,.12); border-color:rgba(94,240,160,.4); }
.cert-vis-item span   { font-size:1.5rem; }
.cert-vis-item strong { font-size:1.05rem; font-weight:700; color:white; line-height:1.2; }
.cert-vis-item small  { font-size:0.95rem; color:rgba(255,255,255,.55); }
/* 나라장터 카드 강조 */
.cert-vis-cta { background:rgba(0,196,106,.18); border-color:rgba(94,240,160,.45); }
.cert-vis-cta strong { color:#5ef0a0; }

/* =====================================================
   STATS BAR — 헤더 바로 아래 실적 수치 띠
   · 4개 수치가 가로로 나열됨
   ===================================================== */
.stats-bar {
  background:var(--white);
  border-bottom:1px solid var(--gray-300);
  display:flex;
}
.stat {
  flex:1; display:flex; align-items:center; justify-content:center; gap:16px;
  padding:28px 16px; border-right:1px solid var(--gray-300); transition:background .2s;
}
.stat:last-child { border-right:none; }
.stat:hover { background:var(--blue-light); }
.stat-ico {
  width:48px; height:48px; border-radius:10px;
  background:var(--blue-light); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; flex-shrink:0;
}
.stat-val { font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:800; color:var(--navy); line-height:1; }
.stat-val em { color:var(--blue-mid); font-style:normal; } /* 단위 (+ 기호 등) 색 강조 */
.stat-lbl { font-size:1.05rem; color:var(--gray-500); margin-top:3px; }

/* =====================================================
   SECTION 공통 스타일
   · .section      : 기본 섹션 여백 (상하 88px, 좌우 8%)
   · .section.bg-off : 교차 배경색 섹션
   ===================================================== */
.section { padding:88px 8%; }
.section.bg-off { background:var(--off-white); }

/* 섹션 상단 작은 레이블 태그 */
.sec-tag {
  display:inline-block; padding:4px 12px;
  background:var(--blue-light); color:var(--blue-mid);
  border-radius:100px; font-size:1.05rem; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px;
}
/* 섹션 타이틀 */
.sec-h2 {
  font-family:'Outfit',sans-serif;
  font-size:clamp(28px,3.5vw,40px); font-weight:800;
  color:var(--navy); line-height:1.2; word-break:keep-all; margin-bottom:10px;
}
.sec-h2 b { color:var(--blue-mid); font-weight:800; }
.sec-sub { font-size:1.2rem; color:var(--gray-500); line-height:1.8; word-break:keep-all; }
/* services #gallery: 이미지 없이 등록 가능 안내 */
.gallery-sec-note {
  margin-top:14px; max-width:52rem; font-size:1.02rem; color:var(--gray-500);
  line-height:1.75; word-break:keep-all;
}
.gallery-sec-note strong { color:var(--blue-mid); font-weight:700; }
.sec-hd { margin-bottom:52px; }
/* 타이틀 + 더보기 링크가 좌우로 배치되는 헤더 행 */
.sec-hd-row { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:52px; }
/* 더보기 링크 (호버 시 화살표 이동 + 밑줄) */
.more-link { display:inline-flex; align-items:center; gap:6px; font-size:1.1rem; font-weight:700; color:var(--blue-mid); transition:gap .25s; }
.more-link:hover { gap:12px; text-decoration:underline; text-underline-offset:3px; }

/* =====================================================
   STRENGTHS (핵심 강점) — 4열 카드 그리드
   · 상단 색 강조선이 hover 시 좌→우로 펼쳐지는 효과 (scaleX)
   ===================================================== */
.strengths-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.str-card {
  background:white; border:1.5px solid var(--blue-line);
  border-radius:var(--radius); padding:36px 28px;
  text-align:center; transition:all .3s; position:relative; overflow:hidden;
}
/* 카드 상단 컬러 라인 (기본: 안보임) */
.str-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--blue-mid),var(--accent));
  transform:scaleX(0); transform-origin:left; transition:transform .35s;
}
.str-card:hover::before { transform:scaleX(1); } /* hover 시 라인 펼쳐짐 */
.str-card:hover { border-color:var(--blue-mid); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.str-ico {
  width:64px; height:64px; margin:0 auto 18px;
  background:var(--blue-light); border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; transition:background .3s;
}
.str-card:hover .str-ico { background:linear-gradient(135deg,var(--blue-light),#b8f0d0); }
.str-card h3 { font-size:1.2rem; font-weight:700; margin-bottom:8px; color:var(--navy); }
.str-card p  { font-size:1.1rem; color:var(--gray-500); line-height:1.65; word-break:keep-all; }

/* =====================================================
   SERVICES (사업소개) — 서비스 카드 그리드
   · hover 시 위로 살짝 뜨며 그림자 강화
   · 아이콘은 hover 시 확대+회전
   ===================================================== */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc-card {
  background:white; border:1px solid var(--gray-300);
  border-radius:var(--radius); padding:32px 28px;
  display:flex; flex-direction:column; gap:14px; transition:all .3s;
}
.svc-card:hover { border-color:var(--blue-mid); box-shadow:var(--shadow-lg); transform:translateY(-5px); }
.svc-card-top { display:flex; align-items:center; gap:14px; }
.svc-ico {
  width:52px; height:52px; flex-shrink:0;
  background:var(--blue-light); border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; transition:transform .3s;
}
.svc-card:hover .svc-ico { transform:scale(1.1) rotate(-5deg); }
.svc-card h3 { font-size:1.25rem; font-weight:700; color:var(--navy); }
.svc-card p  { font-size:1.1rem; color:var(--gray-500); line-height:1.7; word-break:keep-all; }
/* 기술 태그 그룹 */
.svc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.svc-tag { padding:3px 10px; background:var(--blue-light); color:var(--blue-mid); border-radius:100px; font-size:1.0rem; font-weight:600; }
/* 자세히 보기 링크 (hover 시 화살표 이동 + 밑줄) */
.svc-arrow {
  margin-top:auto; padding-top:14px; border-top:1px solid var(--gray-100);
  font-size:1.1rem; font-weight:700; color:var(--blue-mid);
  display:flex; align-items:center; gap:6px; transition:gap .25s;
}
.svc-card:hover .svc-arrow { gap:12px; text-decoration:underline; text-underline-offset:3px; }

/* =====================================================
   CERTS BAND — 인증/면허 가로 띠
   · flex 레이아웃으로 라벨 + 구분선 + 카드들이 한 줄 배치
   · 모바일에서는 .cert-items가 가로 스크롤로 넘침 방지
   ===================================================== */
.cert-band {
  background:var(--blue-light);
  border-top:1px solid var(--blue-line); border-bottom:1px solid var(--blue-line);
  padding:40px 8%; display:flex; align-items:center; gap:40px; flex-wrap:wrap;
}
.cert-band-lbl { font-size:1.05rem; font-weight:700; color:var(--gray-500); letter-spacing:2px; text-transform:uppercase; white-space:nowrap; }
.cert-divider  { width:1px; height:48px; background:var(--blue-line); flex-shrink:0; }
.cert-items    { display:flex; gap:12px; flex:1; flex-wrap:wrap; }
.cert-item {
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; background:white;
  border:1.5px solid var(--blue-line); border-radius:9px;
  transition:all .25s; flex:1; min-width:140px; justify-content:center;
}
.cert-item:hover { border-color:var(--blue-mid); box-shadow:var(--shadow-sm); }
.cert-item span { font-size:1.4rem; }
.cert-item-txt strong { display:block; font-size:1.1rem; font-weight:700; color:var(--navy); }
.cert-item-txt small  { font-size:1.0rem; color:var(--gray-500); }

/* =====================================================
   PROCUREMENT (조달제품) — 카드 격자 + 더보기 박스
   ===================================================== */
.port-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.port-card {
  background:white; border:1px solid var(--gray-300);
  border-radius:var(--radius-sm); padding:24px 20px; transition:all .3s;
}
.port-card:hover { border-color:var(--blue-mid); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.port-logo {
  width:48px; height:48px; margin-bottom:12px;
  background:var(--blue-light); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.port-client { font-size:1.0rem; font-weight:700; color:var(--accent); letter-spacing:.5px; margin-bottom:5px; }
.port-title  { font-size:1.1rem; font-weight:700; color:var(--navy); line-height:1.5; word-break:keep-all; }
.port-type   { font-size:1.0rem; color:var(--gray-500); margin-top:8px; }
/* 더보기 점선 박스 */
.port-more {
  border:2px dashed var(--gray-300); border-radius:var(--radius-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; font-size:1.1rem; font-weight:700; color:var(--blue-mid);
  cursor:pointer; transition:all .3s; gap:8px;
}
.port-more:hover { border-color:var(--blue-mid); background:var(--blue-light); }
.port-more span { font-size:1.5rem; }

/* =====================================================
   SUPPORT (고객지원) — 공지사항 + 채용정보 2열 레이아웃
   ===================================================== */
.support-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:start; }
.sup-block { background:white; border:1px solid var(--gray-300); border-radius:var(--radius); overflow:hidden; }
/* 블록 헤더 (네이비 배경) */
.sup-block-hd {
  padding:18px 24px; background:var(--navy); color:white;
  display:flex; justify-content:space-between; align-items:center;
}
.sup-block-hd h3 { font-size:1.2rem; font-weight:700; }
.sup-block-hd a  { font-size:1.05rem; color:rgba(255,255,255,.7); transition:color .2s; }
.sup-block-hd a:hover { color:white; }
/* 공지 목록 행 (메인페이지 전용 — support.html의 tr.notice-row 와 충돌 방지) */
.idx-notice-row {
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--gray-100);
  text-decoration:none; color:inherit; transition:background .2s;
}
button.idx-notice-row {
  width:100%; border:none; background:none; font:inherit; cursor:pointer; text-align:left;
}
.idx-notice-row:last-child { border-bottom:none; }
.idx-notice-row:hover { background:var(--blue-light); }
/* 공지 배지 — 메인페이지 전용 (idx-) */
.idx-notice-cat { padding:2px 9px; border-radius:100px; font-size:0.95rem; font-weight:700; background:var(--blue-light); color:var(--blue-mid); flex-shrink:0; }
.idx-notice-cat.cat-notice { background:var(--navy); color:white; }
.idx-notice-cat.cat-news { background:var(--blue-mid); color:white; }
.idx-notice-cat.cat-event { background:#00c46a; color:var(--navy); }
.idx-notice-ttl { flex:1; font-size:1.1rem; color:var(--text); line-height:1.4; word-break:keep-all; display:flex; align-items:center; gap:6px; min-width:0; }
.idx-notice-pin { flex-shrink:0; font-size:0.95rem; line-height:1; }
.idx-notice-dt  { font-size:1.0rem; color:var(--gray-500); flex-shrink:0; }
.idx-notice-row--pinned { background:linear-gradient(90deg, rgba(0,30,64,.04) 0%, transparent 100%); }
.home-support-dynamic .home-support-empty,
.home-support-dynamic .home-support-loading { padding:14px 20px; margin:0; font-size:1rem; color:var(--gray-500); line-height:1.5; }
.home-support-dynamic .home-support-loading { color:var(--blue-mid); }
/* 채용 목록 행 */
.res-row {
  display:flex; align-items:center; gap:12px;
  padding:13px 20px; border-bottom:1px solid var(--gray-100);
  text-decoration:none; color:inherit; transition:background .2s;
}
button.res-row {
  width:100%; border:none; background:none; font:inherit; cursor:pointer; text-align:left;
}
.res-row:last-child { border-bottom:none; }
.res-row:hover { background:var(--blue-light); }
.res-ico { font-size:1.3rem; flex-shrink:0; }
.res-ttl { flex:1; font-size:1.1rem; color:var(--text); }
.res-dt  { font-size:1.0rem; color:var(--gray-500); }

/* =====================================================
   TWIN CARDS (문의/나라장터 CTA) — 2열 컬러 카드
   · 배경 그라디언트로 강렬한 CTA 효과
   · 우하단에 큰 이모지 장식 (opacity 낮게)
   ===================================================== */
.twin-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.twin-card {
  border-radius:var(--radius); padding:44px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  overflow:hidden; position:relative; min-height:200px;
}
.twin-card.contact { background:linear-gradient(130deg,#0e3a22 0%,var(--accent) 100%); }
.twin-card-body { position:relative; z-index:1; flex:1; }
.twin-card h3 { font-size:1.4rem; font-weight:900; color:white; margin-bottom:8px; word-break:keep-all; }
.twin-card p  { font-size:1.1rem; color:rgba(255,255,255,.8); margin-bottom:24px; word-break:keep-all; line-height:1.65; }
.twin-btn {
  padding:10px 22px; background:white; color:var(--navy);
  border-radius:6px; font-size:1.1rem; font-weight:700;
  display:inline-block; transition:all .25s;
}
.twin-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.2); }
/* 배경 이모지 장식 */
.twin-deco {
  font-size:5rem; line-height:1; opacity:.12;
  position:absolute; bottom:16px; right:28px; z-index:0; pointer-events:none;
}

/* =====================================================
   FOOTER
   · 상단 : 사이트맵 4컬럼
   · 하단 : 회사정보 + 링크
   ===================================================== */
footer { background:var(--navy); color:rgba(255,255,255,.75); }
.footer-top {
  padding:56px 8% 48px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:36px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-col h4 { font-size:1.05rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:16px; }
.footer-col a  { display:block; font-size:1.1rem; color:rgba(255,255,255,.7); margin-bottom:10px; transition:color .2s; }
.footer-col a:hover { color:white; }
.footer-bottom { padding:24px 8%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-info { font-size:1.05rem; color:rgba(255,255,255,.4); line-height:1.8; }
.footer-links { display:flex; gap:20px; }
.footer-links a { font-size:1.05rem; color:rgba(255,255,255,.45); transition:color .2s; }
.footer-links a:hover { color:white; }

/* =====================================================
   히어로 인라인 스타일 → CSS 클래스
   (heroCanvas, 글로우 orb, SVG, 서비스 그리드)
   ===================================================== */
/* 히어로 파티클 캔버스 */
.heroCanvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:0.55;
}
/* 배경 글로우 원 공통 */
.orb {
  position:absolute; border-radius:50%;
  pointer-events:none; z-index:0;
}
/* 슬라이드1 — 좌상단 글로우 원 */
.orb-s1-a {
  top:-80px; left:10%; width:420px; height:420px;
  background:radial-gradient(circle,rgba(0,196,106,.18) 0%,transparent 70%);
  animation:orbFloat 8s ease-in-out infinite;
}
/* 슬라이드1 — 우하단 글로우 원 */
.orb-s1-b {
  bottom:-60px; right:5%; width:360px; height:360px;
  background:radial-gradient(circle,rgba(39,168,90,.15) 0%,transparent 70%);
  animation:orbFloat 10s ease-in-out infinite reverse;
}
/* 슬라이드2 — 우상단 글로우 원 */
.orb-s2-a {
  top:-60px; right:8%; width:480px; height:480px;
  background:radial-gradient(circle,rgba(0,196,106,.14) 0%,transparent 70%);
  animation:orbFloat 9s ease-in-out infinite;
}
/* 슬라이드2 — 좌하단 글로우 원 */
.orb-s2-b {
  bottom:-40px; left:6%; width:300px; height:300px;
  background:radial-gradient(circle,rgba(94,240,160,.12) 0%,transparent 70%);
  animation:orbFloat 11s ease-in-out 1s infinite reverse;
}
/* SVG overflow 허용 (네트워크 그래픽 노드 레이블이 박스 밖으로 나올 수 있음) */
.net-svg-visible { overflow:visible; }
/* 사업소개 서비스 그리드 — 2열 고정 레이아웃 */
.services-grid-2col { grid-template-columns:repeat(2,1fr); }

/* =====================================================
   채용정보 인라인 스타일 → CSS 클래스
   (HTML에서 style="" 속성 제거하고 아래 클래스 사용)
   ===================================================== */
/* 채용 직무명 텍스트 */
.res-job-title { display:block; font-size:1.1rem; color:var(--text); font-weight:700; }
/* 채용 담당 업무 보조 텍스트 */
.res-job-sub   { font-size:1.05rem; color:var(--gray-500); }
/* 채용중 상태 뱃지 */
.res-dt-active { font-size:1.1rem; color:var(--blue-mid); font-weight:700; }

/* =====================================================
   CTA 카드 배경 색상 변형 클래스
   (HTML inline style 대체)
   ===================================================== */
/* 문의하기 카드 — 네이비→그린 그라디언트 */
.twin-card-green { background:linear-gradient(130deg,var(--navy) 0%,var(--blue-mid) 100%); }
/* 나라장터 카드 — 딥그린→라임 그라디언트 */
.twin-card-dark  { background:linear-gradient(130deg,#0e3a22 0%,var(--accent) 100%); }

/* 푸터 하단 copyright 텍스트 */
.footer-copy { font-size:0.95rem; color:rgba(255,255,255,.3); margin-top:8px; text-align:right; }

/* =====================================================
   SCROLL REVEAL 애니메이션
   · 기본값은 opacity:1 (표시) — JS 없이도 콘텐츠 보임
   · JS가 body에 .js-ready 추가 → 요소를 숨긴 뒤 스크롤 시 등장
   · .d1~.d4 : 딜레이 단계 (카드 순차 등장 효과)
   ===================================================== */
.reveal { opacity:1; transform:none; }
body.js-ready .reveal { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
body.js-ready .reveal.visible { opacity:1; transform:translateY(0); }
body.js-ready .reveal.d1 { transition-delay:.08s; }
body.js-ready .reveal.d2 { transition-delay:.16s; }
body.js-ready .reveal.d3 { transition-delay:.24s; }
body.js-ready .reveal.d4 { transition-delay:.32s; }



/* [SECTION:MAIN-RESP] =========================================================
   index.html 반응형
   ============================================================================ */
/* =====================================================
   반응형 미디어 쿼리
   · 1100px 이하 : 조달 카드 3열, 푸터 3열
   · 900px 이하  : 히어로 1열(우측 일러스트 숨김), 그리드 축소
   · 768px 이하  : 데스크톱 메뉴 숨김, 햄버거 표시
   · 480px 이하  : 대부분 1열로 전환
   ===================================================== */
@media(max-width:1100px) {
  .port-grid    { grid-template-columns:repeat(3,1fr); }
  .footer-top   { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media(max-width:900px) {
  .hero-slide        { grid-template-columns:1fr; } /* 1열로 전환 */
  .hero-right        { display:none; }              /* 우측 일러스트 숨김 */
  .hero-left         { padding:60px 6% 80px; }
  /* 1열 전환 시 화살표 버튼 → 하단으로 이동, 콘텐츠와 겹치지 않게 */
  .hero-btn-prev,
  .hero-btn-next     {
    top:auto !important;
    bottom:18px !important;
    transform:none !important;
  }
  .hero-btn-prev { left:calc(50% - 52px) !important; }
  .hero-btn-next { right:calc(50% - 52px) !important; }
  .hero-slide        { padding-bottom:60px; }
  .strengths-grid    { grid-template-columns:repeat(2,1fr); }
  .services-grid     { grid-template-columns:1fr 1fr; }
  .support-layout    { grid-template-columns:1fr; }
  .twin-cards        { grid-template-columns:1fr; }
  .port-grid         { grid-template-columns:repeat(2,1fr); }
  .stats-bar         { flex-wrap:wrap; }
  .stat              { min-width:50%; border-bottom:1px solid var(--gray-300); }
}
@media(max-width:768px) {
  nav                       { display:none; }  /* 데스크톱 GNB 숨김 */
  .header-right .btn-contact{ display:none; }
  .hamburger                { display:flex; } /* 햄버거 버튼 표시 */
  .section                  { padding:64px 5%; }
  .cert-divider             { display:none; }
  .footer-top               { grid-template-columns:1fr; gap:28px; }
  .twin-card                { padding:32px 28px; }
  /* 인증 띠 : 모바일에서 라벨 위로 올리고 카드는 2열 수평 배치 */
  .cert-band                { flex-direction:column; align-items:flex-start; gap:16px; padding:32px 5%; }
  .cert-items               { flex-wrap:wrap; gap:10px; width:100%; }
  .cert-item                { flex:0 0 calc(50% - 5px); min-width:0; } /* 2열 */

  /* ── 히어로 모바일 수정 ── */
  /* 1. 고정 높이 해제 → 콘텐츠 높이에 맞게 auto */
  .hero-slide {
    height:auto;
    min-height:480px;
    grid-template-columns:1fr;  /* 1컬럼으로 전환 */
    padding-bottom:56px;        /* 하단 화살표 영역 여백 */
  }
  /* 2. 화살표 버튼 → 하단으로 이동, 콘텐츠와 겹치지 않게 */
  .hero-btn-prev,
  .hero-btn-next {
    top:auto !important;
    bottom:14px !important;     /* 하단 고정 */
    transform:none !important;
  }
  .hero-btn-prev { left:calc(50% - 48px) !important; }
  .hero-btn-next { right:calc(50% - 48px) !important; }
  /* 3. 좌측 콘텐츠 padding 조정 */
  .hero-left { padding:48px 5% 16px; }
}
@media(max-width:480px) {
  .strengths-grid  { grid-template-columns:1fr; }
  .services-grid   { grid-template-columns:1fr; }
  .port-grid       { grid-template-columns:1fr 1fr; }
  .hero-left h1    { font-size:1.75rem; }
  .stat            { min-width:100%; }
  .hero-btns       { flex-direction:column; }
  /* 초소형 화면 — 히어로 최소 높이 추가 조정 */
  .hero-slide      { min-height:420px; }
}


/* [SECTION:SUB-COMMON] ========================================================
   서브페이지 공통 레이아웃
   · about.html / services.html / 이후 추가 서브페이지 모두 사용
   · 페이지 히어로 배너 / 브레드크럼 / 서브내비 / 섹션 공통 / Scroll Reveal
   ============================================================================ */
/* =====================================================
   ④ 서브페이지 공통 레이아웃
   ===================================================== */

/* 헤더 아래 시작점 */
.page-wrap { margin-top:68px; }

/* ── 페이지 히어로 배너 (서브페이지 상단 타이틀 영역) ──
   · 메인비주얼 대신 슬림한 그린 그라디언트 배너 사용 */
.page-hero {
  background:linear-gradient(115deg, var(--navy) 0%, var(--blue) 60%, #1e8c4a 100%);
  padding:56px 8% 52px;
  position:relative; overflow:hidden;
}
/* 배경 도트 패턴 */
.page-hero::after {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none; z-index:0;
}
.page-hero-inner { position:relative; z-index:1; }
/* 브레드크럼 (현재 위치 경로) */
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:1.05rem; color:rgba(255,255,255,.6);
  margin-bottom:16px;
}
.breadcrumb a { color:rgba(255,255,255,.6); transition:color .2s; }
.breadcrumb a:hover { color:white; }
.breadcrumb span { color:rgba(255,255,255,.4); }
.breadcrumb strong { color:rgba(255,255,255,.9); font-weight:600; }
.page-hero h1 {
  font-family:'Outfit',sans-serif;
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:800; color:white; line-height:1.2;
  margin-bottom:10px;
}
.page-hero p { font-size:1.2rem; color:rgba(255,255,255,.75); }

/* ── 서브 내비게이션 탭 (페이지 내 섹션 이동) ──
   · position:sticky — 스크롤 시 헤더 아래 고정
   · 클릭 시 해당 섹션 id로 이동 */
.sub-nav {
  position:sticky; top:68px; z-index:900;
  background:var(--white);
  border-bottom:1px solid var(--gray-300);
  box-shadow:var(--shadow-sm);
  display:flex; align-items:stretch;
  padding:0 8%;
  overflow-x:auto; /* 모바일에서 가로 스크롤 */
}
.sub-nav::-webkit-scrollbar { height:0; } /* 서브내비 스크롤바 숨김 */
.sub-nav a {
  display:flex; align-items:center;
  padding:0 24px; height:52px;
  font-size:1.1rem; font-weight:600; color:var(--gray-500);
  white-space:nowrap; border-bottom:3px solid transparent;
  transition:color .2s, border-bottom-color .2s;
}
.sub-nav a:hover { color:var(--blue-mid); }
/* JS가 스크롤 위치에 따라 활성 탭 표시 */
.sub-nav a.active { color:var(--blue-mid); border-bottom-color:var(--blue-mid); font-weight:700; }

/* ── 섹션 공통 ── */
.section { padding:88px 8%; }
.section.bg-off { background:var(--off-white); }

/* 섹션 헤더 태그·타이틀·서브 */
.sec-tag { display:inline-block; padding:4px 12px; background:var(--blue-light); color:var(--blue-mid); border-radius:100px; font-size:1.05rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px; }
.sec-h2  { font-family:'Outfit',sans-serif; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; color:var(--navy); line-height:1.2; word-break:keep-all; margin-bottom:10px; }
.sec-h2 b { color:var(--blue-mid); }
.sec-sub { font-size:1.2rem; color:var(--gray-500); line-height:1.8; word-break:keep-all; }
.sec-hd  { margin-bottom:52px; }

/* Scroll Reveal */
.reveal { opacity:1; transform:none; }
body.js-ready .reveal { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
body.js-ready .reveal.visible { opacity:1; transform:none; }
body.js-ready .reveal.d1 { transition-delay:.08s; }
body.js-ready .reveal.d2 { transition-delay:.16s; }
body.js-ready .reveal.d3 { transition-delay:.24s; }
body.js-ready .reveal.d4 { transition-delay:.32s; }



/* [SECTION:ABOUT] =============================================================
   about.html 전용
   · ICT 그래픽 도형 (인사말) / 연혁 타임라인 / 인증서 카드 / 오시는 길
   ============================================================================ */
/* =====================================================
   ⑤ 인사말 섹션
   ===================================================== */
.greeting-layout {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:64px; align-items:center;
}

/* ── ICT 그래픽 도형 영역 ── */
.greeting-graphic {
  position:relative;
  width:100%; aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center;
}

/* 중앙 큰 원 — 배경 그라디언트 */
.gg-core {
  position:absolute;
  width:72%; aspect-ratio:1;
  border-radius:50%;
  background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 50%, #1e8c4a 100%);
  box-shadow:0 12px 48px rgba(13,46,26,.35);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}
/* 코어 원 내부 빛 번짐 */
.gg-core::before {
  content:'';
  position:absolute; top:-30%; left:-20%;
  width:80%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(94,240,160,.25) 0%, transparent 70%);
  border-radius:50%;
}
.gg-core::after {
  content:'';
  position:absolute; bottom:-20%; right:-15%;
  width:60%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(0,196,106,.2) 0%, transparent 70%);
  border-radius:50%;
}

/* 코어 원 안 SVG 네트워크 일러스트 */
.gg-core-svg {
  position:relative; z-index:1;
  width:75%; opacity:.85;
}

/* 회전 점선 링 (코어 원 바깥 장식) */
.gg-ring {
  position:absolute;
  width:82%; aspect-ratio:1;
  border-radius:50%;
  border:2px dashed rgba(39,168,90,.4);
  animation:ringRotate 18s linear infinite;
  z-index:0;
}
.gg-ring::before {
  content:'';
  position:absolute; top:-5px; left:38%;
  width:10px; height:10px;
  background:var(--blue-mid); border-radius:50%;
  box-shadow:0 0 8px var(--accent);
}
@keyframes ringRotate { to { transform:rotate(360deg); } }

/* 바깥 얇은 원 장식 */
.gg-ring2 {
  position:absolute;
  width:96%; aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(39,168,90,.18);
  animation:ringRotate 28s linear infinite reverse;
  z-index:0;
}
.gg-ring2::before {
  content:'';
  position:absolute; top:-4px; right:20%;
  width:8px; height:8px;
  background:var(--accent); border-radius:50%;
  opacity:.7;
}

/* ── 위성 버블 (4개) ── */
/* 공통 */
.gg-bubble {
  position:absolute;
  width:30%; aspect-ratio:1;
  border-radius:50%;
  background:var(--white);
  border:3px solid var(--blue-line);
  box-shadow:var(--shadow-md);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  z-index:2;
  transition:transform .3s, box-shadow .3s;
}
.gg-bubble:hover {
  transform:scale(1.08);
  box-shadow:var(--shadow-lg);
  border-color:var(--blue-mid);
}
.gg-bubble-ico  { font-size:1.5rem; line-height:1; }
.gg-bubble-txt  { font-size:1.0rem; font-weight:800; color:var(--navy); text-align:center; line-height:1.2; word-break:keep-all; }

/* 위치 — 이미지 참고: 상(네트워크) / 우상(통합) / 우하(설계) / 하(응용) */
.gg-bubble-1 { top:2%;  left:10%; } /* 상단 좌측 */
.gg-bubble-2 { top:22%; right:0%; } /* 우 상단  */
.gg-bubble-3 { top:52%; right:0%; } /* 우 하단  */
.gg-bubble-4 { bottom:2%; left:15%; } /* 하단 좌측 */

/* 버블 연결선 (SVG 오버레이) */
.gg-lines {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:1;
  overflow:visible;
}

/* 인사말 텍스트 영역 */
.greeting-text {}

/* 메인 슬로건 */
.greeting-slogan {
  font-family:'Noto Sans KR',sans-serif;
  font-size:clamp(1.4rem,2.5vw,1.8rem);
  font-weight:800; color:var(--navy); line-height:1.4;
  word-break:keep-all; margin-bottom:32px;
  padding-bottom:24px; border-bottom:2px solid var(--blue-line);
}
.greeting-slogan em { color:var(--blue-mid); font-style:normal; }

/* 인사말 본문 단락 */
.greeting-body {
  font-size:1.2rem; color:var(--gray-700);
  line-height:2; word-break:keep-all; margin-bottom:36px;
}

/* 서명 (이미지 없이 텍스트만) */
.greeting-sign {
  display:flex; align-items:center; gap:16px;
  padding-top:24px; border-top:1px solid var(--gray-100);
}
.greeting-sign-txt strong { display:block; font-size:1.25rem; font-weight:800; color:var(--navy); }
.greeting-sign-txt span   { font-size:1.1rem; color:var(--gray-500); }

/* =====================================================
   ⑥ 연혁 섹션
   · 타임라인 세로 레이아웃
   · 연도별 점(::before)과 세로 라인으로 시각화
   ===================================================== */
.history-wrap {
  position:relative;
  padding-left:40px; /* 라인 공간 확보 */
}
/* 세로 타임라인 라인 */
.history-wrap::before {
  content:''; position:absolute;
  left:0; top:8px; bottom:8px; width:3px;
  background:linear-gradient(to bottom, var(--blue-mid), var(--blue-line));
  border-radius:2px;
}
/* 연도 그룹 */
.history-year-group {
  margin-bottom:40px;
  position:relative;
}
.history-year-group:last-child { margin-bottom:0; }
/* 연도 라벨 (타임라인 점 포함) */
.history-year {
  display:flex; align-items:center; gap:16px;
  margin-bottom:12px; position:relative;
}
/* 타임라인 점 */
.history-year::before {
  content:'';
  position:absolute; left:-46px; top:50%; transform:translateY(-50%);
  width:14px; height:14px;
  background:var(--blue-mid); border:3px solid white;
  border-radius:50%; box-shadow:0 0 0 3px var(--blue-line);
}
.history-year strong {
  font-family:'Outfit',sans-serif;
  font-size:1.5rem; font-weight:800; color:var(--navy);
}
/* 해당 연도 사건 목록 */
.history-items { padding-left:0; list-style:none; }
.history-items li {
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--gray-100);
  font-size:1.1rem; color:var(--gray-700); line-height:1.6;
  word-break:keep-all;
}
.history-items li:last-child { border-bottom:none; }
/* 항목 앞 초록 점 */
.history-items li::before {
  content:''; flex-shrink:0;
  width:6px; height:6px; margin-top:8px;
  background:var(--blue-mid); border-radius:50%;
}

/* =====================================================
   ⑦ 업/면허 현황 섹션
   · 19개 인증서 이미지가 들어갈 카드 그리드
   · [퍼블리셔] 각 .cert-card 안 img 태그를 삽입하세요
   ===================================================== */
/* 안내 문구 */
.cert-intro {
  background:var(--blue-light); border:1px solid var(--blue-line);
  border-radius:var(--radius-sm); padding:14px 20px;
  font-size:1.1rem; color:var(--blue); margin-bottom:36px;
  display:flex; align-items:center; gap:10px;
}

/* 인증서 카드 그리드 — 기본 4열, 반응형으로 축소 */
.cert-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
/* 개별 인증서 카드 */
.cert-card {
  border:1.5px solid var(--blue-line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--white);
  transition:all .3s;
  cursor:pointer;
}
.cert-card:hover { border-color:var(--blue-mid); box-shadow:var(--shadow-md); transform:translateY(-4px); }
/* 이미지 영역
   · aspect-ratio:3/4 — A4 세로형 인증서 비율
   · [퍼블리셔] <img src="images/cert-01.jpg" alt="인증서명"> 삽입 */
.cert-img-wrap {
  width:100%; aspect-ratio:3/4;
  background:var(--gray-100);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  position:relative; overflow:hidden;
}
/* 이미지 삽입 가이드 표시 */
.cert-img-wrap::after {
  content:''; position:absolute; inset:10px;
  border:1.5px dashed var(--blue-line); border-radius:6px; pointer-events:none;
}
.cert-img-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8px; }
.cert-img-placeholder { font-size:2rem; opacity:.35; }
.cert-img-guide { font-size:1.0rem; color:var(--gray-500); text-align:center; line-height:1.4; }
/* 카드 하단 캡션 */
.cert-caption {
  padding:12px 14px;
  border-top:1px solid var(--gray-100);
  font-size:1.05rem; font-weight:700; color:var(--navy);
  text-align:center; background:var(--white);
}
.cert-caption small { display:block; font-size:1.0rem; font-weight:400; color:var(--gray-500); margin-top:2px; }

/* =====================================================
   ⑧ 오시는 길 섹션
   ===================================================== */
/* 지도 + 정보 레이아웃 */
.map-layout {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:40px; align-items:start;
}
/* ── 오시는 길 — 지도 영역 ──
   · [퍼블리셔] .map-area 안에 iframe 또는 img 삽입
   · 예시: <iframe src="https://map.kakao.com/..." width="100%" height="100%" frameborder="0"></iframe> */
.map-area {
  aspect-ratio:4/3;
  background:var(--gray-100);
  border-radius:var(--radius);
  border:2px solid var(--blue-line);
  overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:12px; color:var(--gray-500);
}
.map-area::after {
  content:''; position:absolute; inset:12px;
  border:2px dashed var(--blue-line); border-radius:8px; pointer-events:none;
}
/* iframe·img 삽입 시 플레이스홀더 덮어씀 */
.map-area iframe,
.map-area img {
  position:absolute; inset:0; width:100%; height:100%; border:none; object-fit:cover;
}
.map-placeholder-ico { font-size:3rem; opacity:.35; }
.map-placeholder-txt { font-size:1.1rem; text-align:center; line-height:1.6; }

/* 교통 정보 카드들 */
.map-info { display:flex; flex-direction:column; gap:16px; }
/* 주소 카드 */
.map-addr-card {
  background:var(--navy); color:white;
  border-radius:var(--radius); padding:28px 24px;
}
.map-addr-card h3 { font-size:1.25rem; font-weight:800; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.map-addr-card p  { font-size:1.1rem; line-height:1.9; color:rgba(255,255,255,.85); }
.map-addr-card a  { color:var(--accent); font-weight:700; transition:opacity .2s; }
.map-addr-card a:hover { opacity:.8; }
/* 구분선 */
.map-addr-divider { height:1px; background:rgba(255,255,255,.15); margin:16px 0; }

/* 교통수단 카드 */
.map-transport {
  background:var(--white); border:1.5px solid var(--blue-line);
  border-radius:var(--radius); overflow:hidden;
}
.map-transport-item {
  display:flex; align-items:flex-start; gap:16px;
  padding:18px 20px; border-bottom:1px solid var(--gray-100);
}
.map-transport-item:last-child { border-bottom:none; }
.transport-ico {
  width:44px; height:44px; flex-shrink:0;
  background:var(--blue-light); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.transport-body strong { display:block; font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:4px; }
.transport-body span  { font-size:1.05rem; color:var(--gray-500); line-height:1.7; word-break:keep-all; }



/* [SECTION:ABOUT-RESP] ========================================================
   about.html 반응형
   ============================================================================ */
/* =====================================================
   ⑩ 반응형
   ===================================================== */
@media(max-width:1100px) {
  .cert-grid       { grid-template-columns:repeat(3,1fr); }
  .footer-top      { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media(max-width:900px) {
  .greeting-layout { grid-template-columns:1fr; }
  .greeting-graphic { max-width:380px; margin:0 auto; }
  .map-layout      { grid-template-columns:1fr; }
  .cert-grid       { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:768px) {
  nav                        { display:none; }
  .header-right .btn-contact { display:none; }
  .hamburger                 { display:flex; }
  .section                   { padding:64px 5%; }
  .cert-grid                 { grid-template-columns:repeat(2,1fr); }
  .footer-top                { grid-template-columns:1fr; gap:28px; }
  .sub-nav a                 { padding:0 16px; font-size:1.05rem; }
  .history-wrap              { padding-left:28px; }
  .page-hero                 { padding:40px 5% 36px; }
}
@media(max-width:480px) {
  .cert-grid   { grid-template-columns:repeat(2,1fr); }
  .map-layout  { gap:24px; }
}



/* [SECTION:SERVICES] ==========================================================
   services.html 전용
   · SVG 허니콤 (사업영역) / 네트워크 서비스 카드
   · 유지관리 점검유형 / ESS 테이블+특징 / 구축사례 갤러리
   ============================================================================ */
/* =====================================================
   ① 사업영역 섹션 — SVG 허니콤 + 인터랙션
   ===================================================== */
.overview-intro {
  text-align:center; margin-bottom:56px;
}
.overview-intro .oi-label {
  font-family:'Outfit',sans-serif; font-size:1.0rem; font-weight:700;
  color:var(--blue-mid); letter-spacing:3px; text-transform:uppercase; margin-bottom:10px;
}
.overview-intro h3 {
  font-family:'Outfit',sans-serif; font-size:clamp(1.8rem,3vw,2.4rem);
  font-weight:800; color:var(--navy); margin-bottom:12px;
}
.overview-intro h3::after {
  content:''; display:block; width:56px; height:3px;
  background:linear-gradient(90deg,var(--blue-mid),var(--accent));
  border-radius:2px; margin:12px auto 0;
}
.overview-intro p { font-size:1.15rem; color:var(--gray-500); }

/* SVG 허니콤 래퍼 */
.honeycomb-svg-wrap {
  display:flex; justify-content:center; align-items:center;
  margin:0 auto; max-width:860px;
  position:relative;
}
.honeycomb-svg-wrap svg { width:100%; height:auto; overflow:visible; }

/* 육각형 그룹 — hover 효과 제거 */
.hc-group { cursor:default; }
.hc-group .hc-hex { transition:filter .3s; transform-origin:center; transform-box:fill-box; }
.hc-group .hc-ico { font-size:28px; dominant-baseline:middle; text-anchor:middle; pointer-events:none; }
.hc-group .hc-name { font-family:'Noto Sans KR',sans-serif; font-size:15px; font-weight:800; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
.hc-group .hc-sub  { font-family:'Outfit',sans-serif; font-size:10.5px; font-weight:600; text-anchor:middle; dominant-baseline:middle; pointer-events:none; letter-spacing:.5px; }

/* 연결선 펄스 애니메이션 */
@keyframes connPulse { 0%,100%{stroke-opacity:.2} 50%{stroke-opacity:.6} }
.hc-connector { animation:connPulse 3s ease-in-out infinite; }

/* 중앙 링 회전 */
@keyframes slowSpin { to { transform:rotate(360deg); } }
.hc-center-ring { transform-origin:center; transform-box:fill-box; animation:slowSpin 20s linear infinite; }

/* 플로팅 점 */
@keyframes floatDot { 0%,100%{opacity:.3;r:3} 50%{opacity:.8;r:5} }
.hc-dot { animation:floatDot 2.5s ease-in-out infinite; }
.hc-dot:nth-child(2) { animation-delay:.5s; }
.hc-dot:nth-child(3) { animation-delay:1s; }
.hc-dot:nth-child(4) { animation-delay:1.5s; }
.hc-dot:nth-child(5) { animation-delay:2s; }

/* =====================================================
   ② 네트워크 서비스 섹션
   ===================================================== */

/* 개요 박스 */
.svc-overview-box {
  background:var(--blue-light); border-left:4px solid var(--blue-mid);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:28px 32px; margin-bottom:52px;
  font-size:1.15rem; color:var(--gray-700); line-height:1.9; word-break:keep-all;
}
.svc-overview-box strong { color:var(--navy); font-weight:700; }

/* 세부 항목 카드 그리드 */
.svc-detail-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
/* 세부 카드 */
.svc-detail-card {
  background:var(--white); border:1.5px solid var(--blue-line);
  border-radius:var(--radius); overflow:hidden;
  transition:all .3s;
}
.svc-detail-card:hover { border-color:var(--blue-mid); box-shadow:var(--shadow-md); transform:translateY(-3px); }
/* 카드 헤더 — 번호 + 타이틀 */
.sdc-head {
  display:flex; align-items:center; gap:14px;
  padding:20px 24px; background:var(--navy);
}
.sdc-num {
  width:32px; height:32px; flex-shrink:0;
  background:var(--blue-mid); color:white;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-size:1.0rem; font-weight:800;
}
.sdc-title { font-size:1.15rem; font-weight:700; color:white; }
/* 카드 본문 */
.sdc-body { padding:20px 24px; }
.sdc-desc { font-size:1.05rem; color:var(--gray-700); line-height:1.75; margin-bottom:16px; word-break:keep-all; }
/* 세부 항목 태그 목록 */
.sdc-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.sdc-tag {
  padding:5px 12px; background:var(--blue-light); color:var(--blue-mid);
  border-radius:100px; font-size:1.0rem; font-weight:600;
}
/* 하단 보충 설명 */
.sdc-note {
  font-size:1.0rem; color:var(--gray-500); line-height:1.65;
  padding-top:12px; border-top:1px solid var(--gray-100);
  word-break:keep-all; margin-bottom:16px;
}

/* =====================================================
   ③ 정보통신 시스템 설계 및 구축 섹션
   · ICT 카드: svc-detail-card 기반 + ict 전용 강조색 적용
   ===================================================== */
/* ICT 카드 헤더 — 딥그린 그라디언트로 차별화 */
.ict-card .sdc-head {
  background:linear-gradient(135deg, var(--navy) 0%, #1a4a2e 100%);
}
/* ICT 번호 원 — 민트 강조 */
.ict-num {
  background:var(--acc, #00c46a); color:var(--navy);
  font-size:0.95rem; font-weight:800;
}
/* 강조 태그 — 특허·인증 등 */
.sdc-tag-accent {
  background:var(--navy); color:#5ef0a0;
  padding:5px 12px; border-radius:100px;
  font-size:1.0rem; font-weight:700;
}
/* ICT 카드 hover 시 왼쪽 보더 강조 */
.ict-card:hover {
  border-color:var(--navy);
  box-shadow:0 8px 24px rgba(13,46,26,.15);
  transform:translateY(-3px);
}
.coming-soon-box {
  background:var(--gray-100); border:2px dashed var(--gray-300);
  border-radius:var(--radius); padding:60px 32px;
  text-align:center; color:var(--gray-500);
}
.coming-soon-box .cs-ico  { font-size:3rem; margin-bottom:16px; }
.coming-soon-box h3 { font-size:1.3rem; font-weight:700; color:var(--gray-700); margin-bottom:8px; }
.coming-soon-box p  { font-size:1.1rem; line-height:1.8; }

/* =====================================================
   ④ 유지관리 서비스 섹션
   ===================================================== */

/* 점검 유형 — 원형 아이콘 + 내용 레이아웃 */
.maint-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }

/* 점검 타입 목록 */
.maint-types { display:flex; flex-direction:column; gap:24px; }
.maint-type-item {
  display:grid; grid-template-columns:100px 1fr;
  gap:20px; align-items:start;
}
/* 원형 라벨 */
.maint-circle {
  width:88px; height:88px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--white); border:2.5px solid var(--blue-mid);
  box-shadow:var(--shadow-sm); flex-shrink:0;
  font-size:1.1rem; font-weight:800; color:var(--navy); text-align:center;
  line-height:1.3;
}
.maint-circle.type-regular { border-color:var(--blue-mid); }
.maint-circle.type-urgent  { border-color:var(--navy); color:var(--navy); }
.maint-circle.type-emerg   { border-color:#e05c3a; color:#e05c3a; }
/* 점검 내용 */
.maint-content h4 { font-size:1.15rem; font-weight:700; color:var(--navy); margin-bottom:10px; }
.maint-bullets { list-style:none; display:flex; flex-direction:column; gap:6px; }
.maint-bullets li {
  display:flex; align-items:flex-start; gap:8px;
  font-size:1.05rem; color:var(--gray-700); line-height:1.6; word-break:keep-all;
}
.maint-bullets li::before {
  content:''; flex-shrink:0; width:6px; height:6px; margin-top:8px;
  background:var(--blue-mid); border-radius:50%;
}

/* 관리 분야 허니콤 */
.maint-fields { display:flex; flex-direction:column; gap:16px; align-items:center; }
.maint-fields-title { font-size:1.1rem; font-weight:700; color:var(--navy); text-align:center; margin-bottom:8px; }
.maint-hex-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:360px; }
.maint-hex {
  width:110px; height:120px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:800; color:white;
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%);
}
.maint-hex.hex-dark { background:linear-gradient(135deg, #0d2e1a 0%, #1a4530 100%); }
.maint-hex.hex-gray { background:linear-gradient(135deg, #3a5a47 0%, #527a60 100%); }
.maint-hex.hex-other { background:linear-gradient(135deg, #2e5040 0%, #3d6b52 100%); }

/* =====================================================
   ⑤ ESS 섹션
   ===================================================== */

/* ESS 핵심 수행 카드 3열 */
.ess-core-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:48px; }
.ess-core-card {
  background:var(--white); border:1.5px solid var(--blue-line);
  border-radius:var(--radius); padding:32px 24px; text-align:center;
  transition:all .3s;
}
.ess-core-card:hover { border-color:var(--blue-mid); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.ess-core-ico {
  width:72px; height:72px; margin:0 auto 16px;
  background:var(--blue-light); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:2rem;
}
.ess-core-card h4 { font-size:1.15rem; font-weight:800; color:var(--blue-mid); margin-bottom:8px; }
.ess-core-card p  { font-size:1.05rem; color:var(--gray-500); line-height:1.7; word-break:keep-all; }

/* ESS 서비스 범위 테이블 */
.ess-service-table { width:100%; border-collapse:collapse; margin-bottom:48px; }
.ess-service-table th {
  background:var(--navy); color:white;
  padding:14px 20px; font-size:1.1rem; font-weight:700; text-align:left;
  border-bottom:2px solid var(--blue-mid);
}
.ess-service-table tr { border-bottom:1px solid var(--gray-100); }
.ess-service-table tr:last-child { border-bottom:none; }
.ess-service-table td { padding:16px 20px; font-size:1.05rem; vertical-align:top; }
.ess-service-table td:first-child {
  width:200px; font-weight:700; color:var(--navy);
  background:var(--blue-light); border-right:1px solid var(--blue-line);
}
.ess-service-table .ess-bullet { display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; line-height:1.6; color:var(--gray-700); }
.ess-service-table .ess-bullet:last-child { margin-bottom:0; }
.ess-service-table .ess-bullet::before {
  content:'-'; flex-shrink:0; color:var(--blue-mid); font-weight:700; margin-top:1px;
}

/* ESS 특징 & 기대효과 2열 박스 */
.ess-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ess-feature-box { border-radius:var(--radius); overflow:hidden; }
.ess-feature-head {
  padding:16px 24px;
  font-size:1.1rem; font-weight:800; color:white;
}
.ess-feature-head.feat { background:var(--navy); }
.ess-feature-head.effect { background:var(--gray-700); }
.ess-feature-body { background:var(--white); border:1.5px solid var(--blue-line); border-top:none; border-radius:0 0 var(--radius) var(--radius); padding:20px 24px; }
.ess-feature-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--gray-100);
  font-size:1.05rem; color:var(--gray-700); line-height:1.65; word-break:keep-all;
}
.ess-feature-item:last-child { border-bottom:none; }
.ess-feature-item::before {
  content:'✓'; flex-shrink:0; color:var(--blue-mid); font-weight:700; margin-top:1px;
}
.ess-feature-item strong { color:var(--navy); font-weight:700; }

/* =====================================================
   ⑥ 구축사례 (갤러리형 게시판)
   ===================================================== */

/* 툴바: 구분(필) + 그리드/리스트 (services #gallery) */
.gallery-toolbar {
  display:flex; flex-direction:column; align-items:stretch; gap:20px; margin-bottom:32px;
}
@media (min-width:900px) {
  .gallery-toolbar {
    flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px;
  }
  .gallery-toolbar .gallery-filter {
    flex:1; min-width:0; justify-content:center;
  }
}
/* 필터(필) — 비선택: 흰 배경·그린 보더·그린 글씨 / 선택: 그린 면·흰 글씨 (구축사례 구분) */
.gallery-filter {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin:0;
}
.filter-btn {
  padding:10px 22px; min-height:40px; border-radius:100px; box-sizing:border-box;
  background:var(--white);
  border:1.5px solid var(--blue-mid);
  font-size:1.05rem; font-weight:600; color:var(--blue-mid);
  cursor:pointer; transition:background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.filter-btn:hover {
  background:var(--blue-light);
  border-color:var(--blue);
  color:var(--navy);
}
.filter-btn.active {
  background:var(--blue-mid);
  border-color:var(--blue-mid);
  color:var(--white);
  box-shadow:0 2px 8px rgba(39, 168, 90, .25);
}
.filter-btn.active:hover {
  background:var(--blue);
  border-color:var(--blue);
  color:var(--white);
}
.filter-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* 갤러리 그리드 */
.gallery-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px;
}
/* 갤러리 카드 */
.gallery-card {
  background:var(--white); border:1.5px solid var(--blue-line);
  border-radius:var(--radius); overflow:hidden;
  transition:all .3s; cursor:pointer;
}
.gallery-card:hover { border-color:var(--blue-mid); box-shadow:var(--shadow-md); transform:translateY(-4px); }
/* 이미지/썸네일 영역
   [퍼블리셔] .gc-thumb 안에 <img src="../image/case-번호.jpg"> 삽입 */
.gc-thumb {
  aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.gc-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* 카테고리 뱃지 */
.gc-badge {
  position:absolute; top:10px; left:10px;
  padding:3px 10px; border-radius:100px;
  font-size:0.9rem; font-weight:700; color:white;
  background:rgba(0,0,0,.45); backdrop-filter:blur(4px);
}
/* 번호 */
.gc-num {
  position:absolute; bottom:10px; right:10px;
  font-family:'Outfit',sans-serif; font-size:2rem; font-weight:900;
  color:rgba(255,255,255,.15); line-height:1;
}
/* 카드 내용 */
.gc-body { padding:14px 16px; }
.gc-title { font-size:1.05rem; font-weight:700; color:var(--navy); line-height:1.4; word-break:keep-all; }
.gc-type  { font-size:0.95rem; color:var(--gray-500); margin-top:4px; }

/* 썸네일 없음 (API에서 thumb 없을 때) */
.gc-thumb--empty {
  background:linear-gradient(145deg, var(--navy) 0%, #143d24 55%, var(--blue) 100%);
}
.gc-noimg {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:10px; text-align:center; z-index:0;
}
.gc-ico { font-size:2.2rem; opacity:.55; line-height:1; }
.gc-noimg-txt {
  font-size:0.78rem; font-weight:700; color:rgba(255,255,255,.58);
  letter-spacing:0.04em; text-transform:uppercase;
}

/* 구축사례 전체 목록 (리스트형 보기용) */
.gallery-list-view { display:none; } /* JS 토글로 표시 */

/* 보기 전환 버튼 (services #gallery 툴바 내) */
.view-toggle {
  display:flex; flex-shrink:0; gap:8px; margin:0; justify-content:center;
}
@media (min-width:900px) {
  .view-toggle { justify-content:flex-end; }
}
.view-btn {
  width:38px; height:38px; border-radius:8px;
  border:1.5px solid var(--gray-300); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.1rem; transition:all .2s; color:var(--gray-500);
}
.view-btn.active, .view-btn:hover { border-color:var(--blue-mid); color:var(--blue-mid); background:var(--blue-light); }

/* 리스트 뷰 */
.gallery-list {
  border:1.5px solid var(--blue-line); border-radius:var(--radius); overflow:hidden;
}
.gallery-list-item {
  display:flex; align-items:center; gap:16px;
  padding:14px 20px; border-bottom:1px solid var(--gray-100);
  transition:background .2s; cursor:pointer;
}
.gallery-list-item:last-child { border-bottom:none; }
.gallery-list-item:hover { background:var(--blue-light); }
.gli-num {
  width:32px; height:32px; flex-shrink:0;
  background:var(--blue-light); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-size:1.0rem; font-weight:700; color:var(--blue-mid);
}
.gli-badge {
  padding:3px 10px; border-radius:100px;
  font-size:0.9rem; font-weight:700; color:white; flex-shrink:0;
}
.gli-title { flex:1; font-size:1.05rem; color:var(--text); line-height:1.4; word-break:keep-all; }

/* 카테고리 배지 색상 */
.badge-network  { background:#27a85a; }
.badge-cctv     { background:#1a6b3a; }
.badge-maintain { background:#0d2e1a; }
.badge-ess      { background:#00c46a; color:var(--navy) !important; }
.badge-ict      { background:#2e5040; }
/* 업/면허 갤러리(about) */
.badge-lreg     { background:#2563a8; }
.badge-lcert    { background:#3d7a28; }
.badge-lip      { background:#a65d2a; }
.badge-ldirect  { background:#1d6b4a; }

#license .license-api-grid { margin-top: 0; }
/* API/JSON으로 채울 때도 퍼블 .cert-card와 동일한 캡션 정렬 */
#license .cert-caption .gc-title { display: block; }
#license .cert-card:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: 2px; }

/* ── 업/면허 섹션 타이틀(메인 퍼블과 동일) ── */
#license .sec-hd--license { margin-bottom: 40px; }
#license .sec-hd--license .sec-tag {
  display: inline-block;
  padding: 6px 16px;
  background: #e6f7ed;
  color: #0f5132;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: 'Outfit', 'Noto Sans KR', sans-serif;
}
#license .sec-h2--license {
  font-family: 'Noto Sans KR', 'Outfit', sans-serif;
  font-size: clamp(1.85rem, 3.2vw, 2.55rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
  color: #1a1f1e;
  letter-spacing: -0.02em;
}
#license .sec-h2--license .sec-h2-ko { color: #1a1f1e; font-weight: 800; }
#license .sec-h2--license b {
  color: #27a85a;
  font-weight: 800;
}
#license .sec-hd--license .sec-sub {
  font-size: 1.12rem;
  color: #6b9278;
  line-height: 1.75;
  margin: 0;
  max-width: 40em;
}
#license .sec-hd--license .sec-sub #licenseItemCount {
  font-weight: 700;
  color: #4a6b58;
}

/* 더보기·총건수 영역 */
.gallery-more {
  text-align:center; margin-top:28px;
  color:var(--gray-500); font-size:1.05rem;
}
.gallery-more strong { color:var(--blue-mid); font-weight:700; }

/* ── 페이지네이션 (구축사례 갤러리) ── */
.gallery-pagination {
  display:flex; align-items:center; justify-content:center;
  gap:6px; margin-top:36px; padding-top:32px;
  border-top:1px solid var(--gray-100);
}
.pg-btn {
  min-width:38px; height:38px; padding:0 10px;
  border-radius:8px; border:1.5px solid var(--gray-300);
  background:var(--white); color:var(--gray-500);
  font-size:1.0rem; font-weight:600; font-family:'Outfit',sans-serif;
  cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center;
}
.pg-btn:hover    { border-color:var(--blue-mid); color:var(--blue-mid); }
.pg-btn.active   { background:var(--blue-mid); border-color:var(--blue-mid); color:white; }
.pg-btn.arrow    { font-size:1.1rem; }
.pg-btn:disabled { opacity:.35; cursor:default; pointer-events:none; }



/* ESS 섹션 인라인 스타일 → CSS 클래스 (services.html inline 제거) */
.ess-section-h3 {
  font-size:1.3rem; font-weight:800; color:var(--navy);
  margin-bottom:20px; padding-left:4px;
  border-left:4px solid var(--blue-mid);
}
.ess-section-h3.has-top-margin { margin-top:48px; }
/* 갤러리 리스트·페이지 초기 숨김 (JS 토글용) */
.gallery-hidden { display:none; }

/* [SECTION:SERVICES-RESP] =====================================================
   services.html 반응형
   ============================================================================ */
/* =====================================================
   반응형
   ===================================================== */
@media(max-width:1100px) {
  .gallery-grid { grid-template-columns:repeat(3,1fr); }
  .footer-top   { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media(max-width:900px) {
  .svc-detail-grid  { grid-template-columns:1fr; }
  .maint-layout     { grid-template-columns:1fr; }
  .ess-core-grid    { grid-template-columns:1fr 1fr; }
  .ess-feature-grid { grid-template-columns:1fr; }
  .gallery-grid     { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  nav                        { display:none; }
  .header-right .btn-contact { display:none; }
  .hamburger                 { display:flex; }
  .section                   { padding:64px 5%; }
  .footer-top                { grid-template-columns:1fr; gap:28px; }
  .sub-nav a                 { padding:0 14px; font-size:1.0rem; }
  .ess-core-grid             { grid-template-columns:1fr; }
  .page-hero                 { padding:40px 5% 36px; }
  .ess-feature-grid          { grid-template-columns:1fr; }
  .maint-type-item           { grid-template-columns:80px 1fr; }
  .maint-circle              { width:72px; height:72px; font-size:1.0rem; }
}
@media(max-width:480px) {
  .gallery-grid  { grid-template-columns:1fr 1fr; }
  .honeycomb-grid { gap:10px; }
  .hex-card      { width:140px; height:155px; }
}


/* [SECTION:PROCUREMENT] ===============================================
   procurement.html 전용
   · 조달제품 카드 갤러리 / 상세 팝업 / 등록·수정 모달 / 확인 팝업
   =================================================================== */


/* ── CSS 변수 (style.css 통합 시 제거) ── */
:root {
  --navy:#0d2e1a; --blue:#1a6b3a; --blue-mid:#27a85a;
  --blue-light:#e6f7ed; --blue-line:#b8e6ca; --accent:#00c46a;
  --white:#ffffff; --off-white:#f4faf6;
  --gray-100:#eef7f2; --gray-300:#c8dfd2; --gray-500:#6b9278; --gray-700:#2e5040;
  --text:#152520;
  --shadow-sm:0 2px 10px rgba(13,46,26,.07);
  --shadow-md:0 6px 28px rgba(13,46,26,.11);
  --shadow-lg:0 16px 48px rgba(13,46,26,.14);
  --radius:12px; --radius-sm:8px;
}

/* ── 리셋 (style.css 통합 시 제거) ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{font-size:15px;}
body{font-family:'Noto Sans KR','Outfit',sans-serif;background:var(--white);color:var(--text);overflow-x:hidden;line-height:1.6;}
::-webkit-scrollbar{width:6px;}::-webkit-scrollbar-track{background:#f0f4f9;}::-webkit-scrollbar-thumb{background:var(--blue-mid);border-radius:3px;}
img{max-width:100%;display:block;} a{text-decoration:none;color:inherit;} button{font-family:inherit;}

/* ── HEADER (style.css 통합 시 제거) ── */
header{position:fixed;top:0;left:0;right:0;z-index:1000;height:68px;background:var(--white);border-bottom:1px solid var(--gray-300);display:flex;align-items:center;padding:0 5%;gap:40px;box-shadow:var(--shadow-sm);transition:box-shadow .3s;}
header.scrolled{box-shadow:var(--shadow-md);}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo-mark{width:38px;height:38px;background:linear-gradient(135deg,var(--navy),var(--blue-mid));border-radius:9px;display:flex;align-items:center;justify-content:center;color:white;font-family:'Outfit',sans-serif;font-size:1.3rem;font-weight:800;}
.logo-name{display:flex;flex-direction:column;line-height:1.15;}
.logo-name strong{font-family:'Outfit',sans-serif;font-size:1.2rem;font-weight:800;letter-spacing:.5px;color:var(--navy);}
.logo-name span{font-size:0.95rem;color:var(--gray-500);letter-spacing:1px;}
nav{flex:1;display:flex;align-items:stretch;height:68px;}
.nav-group{position:relative;display:flex;align-items:center;}
.nav-item{display:flex;align-items:center;height:100%;padding:0 28px;font-size:1.15rem;font-weight:600;color:var(--gray-700);white-space:nowrap;transition:color .2s;border-bottom:3px solid transparent;cursor:pointer;text-decoration:none;}
.nav-item:hover,.nav-group:hover .nav-item{color:var(--blue-mid);border-bottom-color:var(--blue-mid);}
.nav-item.active{color:var(--blue-mid);font-weight:700;border-bottom-color:var(--blue-mid);}
.nav-drop{display:none;position:absolute;top:68px;left:0;min-width:200px;background:var(--white);border:1px solid var(--gray-300);border-top:3px solid var(--blue-mid);border-radius:0 0 10px 10px;box-shadow:var(--shadow-md);padding:8px 0;z-index:999;}
.nav-group:hover .nav-drop{display:block;}
.nav-drop a{display:block;padding:9px 20px;font-size:1.1rem;color:var(--gray-700);border-bottom:1px solid var(--gray-100);transition:background .15s,color .15s;white-space:nowrap;}
.nav-drop a:last-child{border-bottom:none;}
.nav-drop a:hover{background:var(--blue-light);color:var(--blue-mid);}
.nav-drop a.sub-active{color:var(--blue-mid);font-weight:700;background:var(--blue-light);}
.header-right{display:flex;align-items:center;gap:12px;margin-left:auto;}
.btn-contact{padding:9px 20px;background:var(--blue-mid);color:white;border-radius:6px;font-size:1.1rem;font-weight:700;white-space:nowrap;transition:background .2s,transform .2s;}
.btn-contact:hover{background:var(--blue);transform:translateY(-1px);}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;}
.hamburger span{width:22px;height:2px;background:var(--navy);border-radius:2px;transition:all .3s;}
.mob-menu{display:none;position:fixed;top:68px;left:0;right:0;background:white;border-bottom:2px solid var(--blue-line);z-index:999;padding:16px 5%;box-shadow:var(--shadow-md);max-height:calc(100vh - 68px);overflow-y:auto;}
.mob-menu.open{display:block;}
.mob-1dep{display:flex;justify-content:space-between;align-items:center;padding:13px 0;font-size:1.2rem;font-weight:700;color:var(--navy);border-bottom:1px solid var(--gray-100);cursor:pointer;}
.mob-2dep{display:none;padding:4px 0 8px 14px;}
.mob-2dep.open{display:block;}
.mob-2dep a{display:block;padding:7px 0;font-size:1.1rem;color:var(--gray-700);border-bottom:1px solid var(--gray-100);}

/* ── 서브페이지 공통 레이아웃 (style.css 통합 시 제거) ── */
.page-wrap{margin-top:68px;}
.page-hero{background:linear-gradient(115deg,var(--navy) 0%,var(--blue) 60%,#1e8c4a 100%);padding:56px 8% 52px;position:relative;overflow:hidden;}
.page-hero::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none;z-index:0;}
.page-hero-inner{position:relative;z-index:1;}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:1.05rem;color:rgba(255,255,255,.6);margin-bottom:16px;}
.breadcrumb a{color:rgba(255,255,255,.6);transition:color .2s;}.breadcrumb a:hover{color:white;}
.breadcrumb span{color:rgba(255,255,255,.4);}.breadcrumb strong{color:rgba(255,255,255,.9);font-weight:600;}
.page-hero h1{font-family:'Outfit',sans-serif;font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:white;line-height:1.2;margin-bottom:10px;}
.page-hero p{font-size:1.2rem;color:rgba(255,255,255,.75);}
.section{padding:64px 8%;}
.section.bg-off{background:var(--off-white);}
.sec-tag{display:inline-block;padding:4px 12px;background:var(--blue-light);color:var(--blue-mid);border-radius:100px;font-size:1.05rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;}
.sec-h2{font-family:'Outfit',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:var(--navy);line-height:1.2;word-break:keep-all;margin-bottom:10px;}
.sec-h2 b{color:var(--blue-mid);}
.sec-sub{font-size:1.1rem;color:var(--gray-500);line-height:1.8;}
.sec-hd{margin-bottom:36px;}
.reveal{opacity:1;transform:none;}
body.js-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
body.js-ready .reveal.visible{opacity:1;transform:none;}
body.js-ready .reveal.d1{transition-delay:.08s;}
body.js-ready .reveal.d2{transition-delay:.16s;}
body.js-ready .reveal.d3{transition-delay:.24s;}

/* =====================================================
   [SECTION:PROCUREMENT] — 조달제품 전용
   ===================================================== */

/* 요약 카드 */
.proc-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px;}
.proc-sum-card{background:var(--white);border:1.5px solid var(--blue-line);border-radius:var(--radius);padding:22px 24px;display:flex;align-items:center;gap:16px;transition:all .3s;}
.proc-sum-card:hover{border-color:var(--blue-mid);box-shadow:var(--shadow-sm);}
.proc-sum-ico{width:48px;height:48px;border-radius:10px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;}
.proc-sum-num{font-family:'Outfit',sans-serif;font-size:1.7rem;font-weight:900;color:var(--navy);line-height:1;}
.proc-sum-num em{color:var(--blue-mid);font-style:normal;font-size:1.0rem;margin-left:2px;}
.proc-sum-lbl{font-size:0.9rem;color:var(--gray-500);margin-top:4px;}

/* 툴바 */
.proc-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:24px;flex-wrap:wrap;}
.proc-search-wrap{flex:1;min-width:220px;display:flex;align-items:center;border:1.5px solid var(--gray-300);border-radius:8px;background:var(--white);overflow:hidden;transition:border-color .2s;}
.proc-search-wrap:focus-within{border-color:var(--blue-mid);}
.proc-search-wrap input{flex:1;padding:9px 14px;border:none;outline:none;font-size:1.05rem;font-family:inherit;background:transparent;}
.proc-search-wrap button{padding:9px 12px;background:none;border:none;cursor:pointer;color:var(--gray-500);font-size:1.1rem;}
.proc-select{padding:9px 14px;border:1.5px solid var(--gray-300);border-radius:8px;font-size:1.05rem;font-family:inherit;color:var(--gray-700);background:var(--white);cursor:pointer;outline:none;transition:border-color .2s;}
.proc-select:focus{border-color:var(--blue-mid);}
.btn-naramart-sm{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;background:var(--off-white);border:1.5px solid var(--gray-300);font-size:1.05rem;font-weight:700;color:var(--gray-700);cursor:pointer;transition:all .2s;text-decoration:none;}
.btn-naramart-sm:hover{border-color:var(--blue-mid);color:var(--blue-mid);background:var(--blue-light);}

/* ── 제품 등록 버튼 ── */
.btn-add-product{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:8px;background:var(--blue-mid);border:none;font-size:1.05rem;font-weight:700;color:white;cursor:pointer;transition:all .2s;}
.btn-add-product:hover{background:var(--blue);transform:translateY(-1px);}

/* ── 상세 팝업 수정·삭제 버튼 ── */
.dm-btn-edit{display:inline-flex;align-items:center;gap:5px;padding:10px 18px;border-radius:8px;background:var(--blue-light);color:var(--blue-mid);font-size:1.0rem;font-weight:700;border:none;cursor:pointer;transition:all .2s;}
.dm-btn-edit:hover{background:var(--blue-mid);color:white;}
.dm-btn-del{display:inline-flex;align-items:center;gap:5px;padding:10px 18px;border-radius:8px;background:#fce8e8;color:#c0392b;font-size:1.0rem;font-weight:700;border:none;cursor:pointer;transition:all .2s;}
.dm-btn-del:hover{background:#c0392b;color:white;}

/* ── 등록·수정 모달 공통 ── */
.form-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2100;align-items:center;justify-content:center;padding:24px;}
.form-overlay.open{display:flex;}
.form-modal{background:var(--white);border-radius:var(--radius);width:100%;max-width:680px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:modalFadeIn .25s ease both;}
.form-head{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:var(--navy);color:white;border-radius:var(--radius) var(--radius) 0 0;position:sticky;top:0;z-index:1;}
.form-head h3{font-size:1.15rem;font-weight:800;}
.form-head-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:1.4rem;cursor:pointer;transition:color .2s;}
.form-head-close:hover{color:white;}
.form-body{padding:28px;}
.form-group{margin-bottom:18px;}
.form-label{display:block;font-size:1.0rem;font-weight:700;color:var(--navy);margin-bottom:6px;}
.form-label .req{color:#e05c3a;margin-left:2px;}
.form-input,.form-select,.form-textarea{width:100%;padding:9px 13px;border:1.5px solid var(--gray-300);border-radius:8px;font-size:1.0rem;font-family:inherit;color:var(--text);background:var(--white);outline:none;transition:border-color .2s;}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--blue-mid);}
.form-textarea{resize:vertical;min-height:72px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-hint{font-size:0.85rem;color:var(--gray-500);margin-top:3px;}
.form-img-area{border:2px dashed var(--gray-300);border-radius:var(--radius-sm);padding:20px;text-align:center;cursor:pointer;transition:all .2s;color:var(--gray-500);font-size:1.0rem;position:relative;}
.form-img-area:hover{border-color:var(--blue-mid);background:var(--blue-light);}
.form-img-area input[type="file"]{display:none;}
.form-img-preview{max-width:100%;max-height:160px;object-fit:contain;margin:10px auto 0;display:none;border-radius:8px;}
.form-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 28px;border-top:1px solid var(--gray-100);position:sticky;bottom:0;background:var(--white);}
.btn-form-cancel{padding:9px 20px;border-radius:8px;border:1.5px solid var(--gray-300);background:var(--white);color:var(--gray-700);font-size:1.0rem;font-weight:700;cursor:pointer;transition:all .2s;}
.btn-form-cancel:hover{border-color:var(--gray-500);}
.btn-form-submit{padding:9px 20px;border-radius:8px;border:none;background:var(--blue-mid);color:white;font-size:1.0rem;font-weight:700;cursor:pointer;transition:all .2s;}
.btn-form-submit:hover{background:var(--blue);}

/* ── 확인 팝업 (등록·삭제 공용) ── */
.confirm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2200;align-items:center;justify-content:center;padding:24px;}
.confirm-overlay.open{display:flex;}
.confirm-box{background:var(--white);border-radius:var(--radius);width:100%;max-width:400px;padding:36px 28px;text-align:center;box-shadow:var(--shadow-lg);animation:modalFadeIn .2s ease both;}
.confirm-ico{font-size:3rem;margin-bottom:12px;}
.confirm-box h3{font-size:1.2rem;font-weight:800;color:var(--navy);margin-bottom:8px;}
.confirm-box p{font-size:1.05rem;color:var(--gray-500);margin-bottom:24px;line-height:1.6;}
.confirm-btns{display:flex;gap:10px;justify-content:center;}
.btn-confirm-cancel{padding:10px 24px;border-radius:8px;border:1.5px solid var(--gray-300);background:var(--white);color:var(--gray-700);font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .2s;}
.btn-confirm-cancel:hover{border-color:var(--gray-500);}
.btn-confirm-ok{padding:10px 24px;border-radius:8px;border:none;color:white;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .2s;}
.btn-confirm-ok.type-add{background:var(--blue-mid);}
.btn-confirm-ok.type-add:hover{background:var(--blue);}
.btn-confirm-ok.type-del{background:#c0392b;}
.btn-confirm-ok.type-del:hover{background:#a93226;}

@media(max-width:768px){ .form-row{grid-template-columns:1fr;} }

/* 나라장터 배너 */
.naramart-banner{background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);border-radius:var(--radius);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px;}
.naramart-banner-txt h3{font-size:1.2rem;font-weight:800;color:white;margin-bottom:6px;}
.naramart-banner-txt p{font-size:1.0rem;color:rgba(255,255,255,.75);}
.btn-naramart-lg{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:8px;background:white;color:var(--navy);font-size:1.05rem;font-weight:800;cursor:pointer;transition:all .25s;white-space:nowrap;text-decoration:none;border:none;}
.btn-naramart-lg:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.2);}

/* 카테고리·인도조건 배지 */
.cat-badge{display:inline-block;padding:3px 10px;border-radius:6px;font-size:0.85rem;font-weight:700;color:white;white-space:nowrap;}
.cat-cctv{background:#1a6b3a;} .cat-network{background:#27a85a;}
.cat-ess{background:#00c46a;color:var(--navy)!important;} .cat-ict{background:#0d2e1a;} .cat-other{background:#6b9278;}
.cond-badge{display:inline-block;padding:3px 8px;border-radius:5px;font-size:0.85rem;font-weight:700;}
.cond-install{background:var(--blue-light);color:var(--blue-mid);}
.cond-deliver{background:var(--gray-100);color:var(--gray-700);}
.prod-id-badge{display:inline-block;padding:2px 7px;background:var(--blue-light);color:var(--blue-mid);border-radius:4px;font-size:0.8rem;font-weight:600;}

/* 제품 카드 그리드 */
.prod-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.prod-card{background:var(--white);border:1.5px solid var(--blue-line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;}
.prod-card:hover{border-color:var(--blue-mid);box-shadow:var(--shadow-md);transform:translateY(-5px);}

/* 카드 썸네일 */
.pc-thumb{aspect-ratio:4/3;background:var(--gray-100);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-bottom:1px solid var(--blue-line);}
.pc-thumb img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .3s;}
.prod-card:hover .pc-thumb img{transform:scale(1.05);}
.pc-thumb-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:100%;}
.pc-thumb-ico{font-size:2.6rem;opacity:.4;}
.pc-thumb-lbl{font-size:0.82rem;color:var(--gray-300);}
.pc-cat-badge{position:absolute;top:10px;left:10px;}
.pc-code-badge{position:absolute;top:10px;right:10px;padding:3px 8px;border-radius:5px;background:rgba(13,46,26,.75);backdrop-filter:blur(4px);font-size:0.78rem;font-weight:700;color:#5ef0a0;letter-spacing:.5px;}

/* 카드 본문 */
.pc-body{padding:16px;flex:1;display:flex;flex-direction:column;gap:5px;}
.pc-model{font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:800;color:var(--navy);line-height:1.2;}
.pc-name{font-size:0.9rem;color:var(--gray-500);line-height:1.4;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pc-price{margin-top:auto;padding-top:10px;border-top:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between;}
.pc-price-val{font-family:'Outfit',sans-serif;font-size:1.2rem;font-weight:900;color:var(--navy);}
.pc-detail-hint{font-size:0.85rem;font-weight:700;color:var(--blue-mid);}

/* 건수 표시 */
.proc-count{margin-top:20px;font-size:1.0rem;color:var(--gray-500);}

/* 페이지네이션 */
.proc-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:28px;}
.proc-page-info{font-size:1.0rem;color:var(--gray-500);}
.proc-page-btns{display:flex;gap:4px;}
.pp-btn{min-width:34px;height:34px;padding:0 9px;border-radius:7px;border:1.5px solid var(--gray-300);background:var(--white);color:var(--gray-500);font-size:0.95rem;font-weight:600;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;}
.pp-btn:hover{border-color:var(--blue-mid);color:var(--blue-mid);}
.pp-btn.active{background:var(--blue-mid);border-color:var(--blue-mid);color:white;}
.pp-btn:disabled{opacity:.35;cursor:default;pointer-events:none;}

/* ── 상세 팝업 ── */
.detail-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000;align-items:center;justify-content:center;padding:24px;}
.detail-overlay.open{display:flex;}
.detail-modal{background:var(--white);border-radius:var(--radius);width:100%;max-width:780px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:modalFadeIn .25s ease both;}
@keyframes modalFadeIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}

/* 팝업 헤더 */
.dm-head{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:var(--navy);color:white;border-radius:var(--radius) var(--radius) 0 0;position:sticky;top:0;z-index:1;}
.dm-head h3{font-size:1.15rem;font-weight:800;}
.dm-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:1.4rem;cursor:pointer;line-height:1;transition:color .2s;}
.dm-close:hover{color:white;}

/* 팝업 본문 2단 */
.dm-body{display:grid;grid-template-columns:260px 1fr;}

/* 좌: 이미지 — 적정 높이 260px 고정 */
.dm-thumb{
  background:var(--gray-100);
  border-right:1px solid var(--blue-line);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  height:260px;        /* 세로 길이 고정 */
  overflow:hidden;
}
.dm-thumb img{max-width:100%;max-height:212px;object-fit:contain;}
.dm-thumb-placeholder{display:flex;flex-direction:column;align-items:center;gap:10px;}
.dm-thumb-ico{font-size:3.5rem;opacity:.28;}
.dm-thumb-lbl{font-size:0.9rem;color:var(--gray-300);}

/* 우: 정보 */
.dm-info{padding:24px 28px;display:flex;flex-direction:column;gap:0;}
.dm-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.dm-title{font-size:1.05rem;font-weight:800;color:var(--navy);line-height:1.4;margin-bottom:4px;word-break:keep-all;}
.dm-model{font-size:0.95rem;color:var(--gray-500);margin-bottom:16px;}
.dm-price-box{background:var(--blue-light);border-radius:var(--radius-sm);padding:12px 18px;margin-bottom:18px;display:flex;align-items:baseline;gap:8px;}
.dm-price-lbl{font-size:0.95rem;color:var(--blue);font-weight:600;}
.dm-price-val{font-family:'Outfit',sans-serif;font-size:1.75rem;font-weight:900;color:var(--navy);}
.dm-price-unit{font-size:0.88rem;color:var(--gray-500);}

/* 스펙 테이블 */
.dm-spec{width:100%;border-collapse:collapse;}
.dm-spec tr{border-bottom:1px solid var(--gray-100);}
.dm-spec tr:last-child{border-bottom:none;}
.dm-spec th{padding:8px 12px;font-size:0.92rem;font-weight:700;color:var(--navy);background:var(--off-white);width:100px;white-space:nowrap;vertical-align:top;}
.dm-spec td{padding:8px 12px;font-size:0.92rem;color:var(--gray-700);word-break:keep-all;}

/* 팝업 푸터 */
.dm-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 28px;border-top:1px solid var(--gray-100);position:sticky;bottom:0;background:var(--white);flex-wrap:wrap;}
.dm-btn-g2b{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:8px;background:var(--navy);color:white;font-size:1.0rem;font-weight:700;cursor:pointer;text-decoration:none;border:none;transition:all .2s;}
.dm-btn-g2b:hover{background:var(--blue);}
.dm-btn-close{padding:10px 20px;border-radius:8px;background:var(--off-white);border:1.5px solid var(--gray-300);color:var(--gray-700);font-size:1.0rem;font-weight:700;cursor:pointer;transition:all .2s;}
.dm-btn-close:hover{border-color:var(--gray-500);}

/* ── FOOTER (style.css 통합 시 제거) ── */
footer{background:var(--navy);color:rgba(255,255,255,.75);}
.footer-top{padding:56px 8% 48px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:36px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-col h4{font-size:1.05rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:16px;}
.footer-col a{display:block;font-size:1.1rem;color:rgba(255,255,255,.7);margin-bottom:10px;transition:color .2s;}
.footer-col a:hover{color:white;}
.footer-bottom{padding:24px 8%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-info{font-size:1.05rem;color:rgba(255,255,255,.4);line-height:1.8;}
.footer-links{display:flex;gap:20px;}
.footer-links a{font-size:1.05rem;color:rgba(255,255,255,.45);transition:color .2s;}
.footer-links a:hover{color:white;}
.footer-copy{font-size:0.95rem;color:rgba(255,255,255,.3);margin-top:8px;text-align:right;}

/* ── 반응형 ── */
@media(max-width:1100px){ .prod-card-grid{grid-template-columns:repeat(3,1fr);} .footer-top{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media(max-width:900px){
  .prod-card-grid{grid-template-columns:repeat(2,1fr);}
  .proc-summary{grid-template-columns:1fr 1fr;}
  .dm-body{grid-template-columns:1fr;}
  .dm-thumb{border-right:none;border-bottom:1px solid var(--blue-line);height:220px;}
}
@media(max-width:768px){
  nav{display:none;} .header-right .btn-contact{display:none;} .hamburger{display:flex;}
  .section{padding:48px 5%;} .proc-summary{grid-template-columns:1fr;}
  .proc-toolbar{flex-direction:column;align-items:stretch;}
  .footer-top{grid-template-columns:1fr;gap:28px;}
  .naramart-banner{flex-direction:column;}
  /* 푸터: 상단 사이트맵 숨김, 하단 글자 크기·줄바꿈(모바일) — 뒤쪽 중복 .footer-* 규칙보다 우선 */
  footer .footer-top{display:none;}
  .footer-bottom{
    flex-direction:column;
    align-items:stretch;
    padding:20px 5% 56px;
    gap:14px;
  }
  .footer-info{
    font-size:0.8125rem;
    line-height:1.65;
    color:rgba(255,255,255,.45);
    word-break:keep-all;
    overflow-wrap:break-word;
  }
  .footer-links{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 10px;
    column-gap:12px;
  }
  .footer-links a{
    font-size:0.8125rem;
    color:rgba(255,255,255,.5);
    white-space:nowrap;
  }
  .footer-copy{
    font-size:0.72rem;
    line-height:1.5;
    text-align:left;
    width:100%;
    margin-top:4px;
    word-break:keep-all;
  }
}

/* 맨 위로 이동 (main.js #scrollTopBtn) — 모바일만 표시 */
@media (min-width:769px){
  #scrollTopBtn,.scroll-top-btn{display:none !important;}
}
.scroll-top-btn{
  position:fixed;
  z-index:4000;
  right:max(16px, env(safe-area-inset-right, 0px));
  bottom:max(20px, env(safe-area-inset-bottom, 0px));
  width:48px;
  height:48px;
  padding:0;
  margin:0;
  box-sizing:border-box;
  border:none;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-family:'Outfit',system-ui,sans-serif;
  font-size:0.65rem;
  font-weight:800;
  letter-spacing:0.06em;
  line-height:1;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s;
  -webkit-tap-highlight-color:transparent;
}
@media (max-width:768px){
  .scroll-top-btn{display:flex;}
}
.scroll-top-btn.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.scroll-top-btn:hover,
.scroll-top-btn:focus-visible{
  background:var(--blue-mid);
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:2px;
}
.scroll-top-btn:active{transform:translateY(0) scale(.96);}
@media(max-width:480px){
  .prod-card-grid{grid-template-columns:1fr 1fr;}
  .page-hero{padding:40px 5% 36px;} .section{padding:40px 5%;}
  .dm-thumb{height:180px;}
}


/* [SECTION:SUPPORT] ====================================================
   support.html 전용
   · 공지사항 테이블 게시판 / 채용정보 카드 / 상세 팝업 / CRUD UI
   ===================================================================== */

/* ── 공용 툴바 ── */
.sp-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.sp-search-wrap{flex:1;min-width:200px;display:flex;align-items:center;border:1.5px solid var(--gray-300);border-radius:8px;background:var(--white);overflow:hidden;transition:border-color .2s;}
.sp-search-wrap:focus-within{border-color:var(--blue-mid);}
.sp-search-wrap input{flex:1;padding:9px 13px;border:none;outline:none;font-size:1.0rem;font-family:inherit;background:transparent;}
.sp-search-wrap button{padding:9px 12px;background:none;border:none;cursor:pointer;color:var(--gray-500);font-size:1.1rem;}
.sp-select{padding:9px 13px;border:1.5px solid var(--gray-300);border-radius:8px;font-size:1.0rem;font-family:inherit;color:var(--gray-700);background:var(--white);cursor:pointer;outline:none;transition:border-color .2s;}
.sp-select:focus{border-color:var(--blue-mid);}
.sp-btn-add{display:inline-flex;align-items:center;gap:5px;padding:9px 18px;border-radius:8px;background:var(--blue-mid);border:none;font-size:1.0rem;font-weight:700;color:white;cursor:pointer;transition:all .2s;}
.sp-btn-add:hover{background:var(--blue);transform:translateY(-1px);}

/* ── 공용 페이지네이션 ── */
.sp-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:20px;}
.sp-page-info{font-size:1.0rem;color:var(--gray-500);font-weight:500;}
.sp-page-btns{display:flex;gap:4px;}

/* ── 공지사항 테이블 ── */
.sp-table-wrap{border:1.5px solid var(--blue-line);border-radius:var(--radius);overflow:hidden;}
.sp-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.sp-table thead tr{background:var(--navy);color:white;}
.sp-table th{padding:13px 14px;font-size:1.0rem;font-weight:700;text-align:left;white-space:nowrap;overflow:hidden;}
/* 컬럼 너비 — % 단위로 고정 */
.sp-table th:nth-child(1){width:7%;  text-align:center;}  /* 번호 */
.sp-table th:nth-child(2){width:10%;}                     /* 분류 */
.sp-table th:nth-child(3){width:39%;}                     /* 제목 */
.sp-table th:nth-child(4){width:13%; white-space:nowrap;} /* 작성일 */
.sp-table th:nth-child(5){width:10%; white-space:nowrap;} /* 작성자 */
.sp-table th:nth-child(6){width:21%; text-align:center;}  /* 관리 — 버튼 여유있게 */
.sp-table tbody tr{border-bottom:1px solid var(--gray-100);transition:background .15s;cursor:pointer;}
.sp-table tbody tr:last-child{border-bottom:none;}
.sp-table tbody tr:hover{background:var(--blue-light);}
.sp-table td{padding:13px 14px;font-size:1.0rem;color:var(--gray-700);vertical-align:middle;overflow:hidden;}
.sp-table td:nth-child(1){text-align:center;color:var(--gray-500);font-size:0.9rem;}
.sp-table td:nth-child(4){white-space:nowrap;}
.sp-table td:nth-child(5){white-space:nowrap;}
.sp-table td:nth-child(6){text-align:center;}
.sp-table .col-act-cell{text-align:center;white-space:nowrap;}
.sp-table tr.notice-pinned{background:var(--blue-light);}
.sp-table tr.notice-pinned:hover{background:#d4eedd;}
.pin-badge{font-size:0.9rem;}
/* 공지 배지 — 서브페이지(support.html) 전용 (sp-) */
.sp-notice-cat{display:inline-block;padding:3px 9px;border-radius:5px;font-size:0.82rem;font-weight:700;white-space:nowrap;}
.cat-notice{background:var(--navy);color:white;}
.cat-news{background:var(--blue-mid);color:white;}
.cat-event{background:#00c46a;color:var(--navy);}
.notice-hidden{display:none;}
/* 제목 셀 — 말줄임 */
.notice-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--navy);}
td.col-title{overflow:hidden;}
.act-btns{display:flex;gap:5px;justify-content:center;}
.btn-edit,.btn-del{padding:5px 14px;border-radius:6px;font-size:0.87rem;font-weight:700;cursor:pointer;border:none;transition:all .2s;white-space:nowrap;color:#fff;}
.btn-edit{background:var(--blue-mid);}
.btn-edit:hover{background:var(--blue);}
.btn-del{background:#e53935;}
.btn-del:hover{background:#b71c1c;}

/* ── 공지사항 상세 팝업 ── */
.sp-detail-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000;align-items:center;justify-content:center;padding:24px;}
.sp-detail-overlay.open{display:flex;}
.sp-detail-modal{background:var(--white);border-radius:var(--radius);width:100%;max-width:720px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:modalFadeIn .25s ease both;}
@keyframes modalFadeIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.sp-detail-head{padding:20px 28px;background:var(--navy);color:white;border-radius:var(--radius) var(--radius) 0 0;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;position:sticky;top:0;z-index:1;}
.sp-detail-head h3{font-size:1.15rem;font-weight:800;line-height:1.4;word-break:keep-all;margin-top:6px;}
.sp-detail-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:1.4rem;cursor:pointer;flex-shrink:0;transition:color .2s;line-height:1;}
.sp-detail-close:hover{color:white;}
.sp-detail-meta{padding:14px 28px;background:var(--off-white);border-bottom:1px solid var(--gray-100);display:flex;gap:20px;flex-wrap:wrap;font-size:0.95rem;color:var(--gray-500);}
.sp-detail-meta span{display:flex;align-items:center;gap:5px;}
.sp-detail-body{padding:28px;font-size:1.05rem;color:var(--gray-700);line-height:1.9;word-break:keep-all;white-space:pre-line;min-height:120px;}
.sp-detail-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 28px;border-top:1px solid var(--gray-100);position:sticky;bottom:0;background:var(--white);}
.sp-detail-close-btn{padding:9px 20px;border-radius:8px;background:var(--off-white);border:1.5px solid var(--gray-300);color:var(--gray-700);font-size:1.0rem;font-weight:700;cursor:pointer;transition:all .2s;}
.sp-detail-close-btn:hover{border-color:var(--gray-500);}

/* ── 채용정보 카드 ── */
.rc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:8px;}
.rc-card{background:var(--white);border:1.5px solid var(--blue-line);border-radius:var(--radius);padding:24px;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;gap:10px;}
.rc-card:hover{border-color:var(--blue-mid);box-shadow:var(--shadow-md);transform:translateY(-4px);}
.rc-closed{opacity:.6;}
.rc-closed:hover{transform:none;box-shadow:none;border-color:var(--blue-line);}
.rc-head{display:flex;align-items:center;gap:8px;}
.rc-status{display:inline-block;padding:3px 10px;border-radius:100px;font-size:0.82rem;font-weight:700;}
.status-open{background:var(--blue-light);color:var(--blue-mid);}
.status-always{background:#fff3cd;color:#856404;}
.status-closed{background:var(--gray-100);color:var(--gray-500);}
.rc-dept{font-size:0.9rem;color:var(--gray-500);font-weight:600;}
.rc-job{font-size:1.15rem;font-weight:800;color:var(--navy);line-height:1.3;word-break:keep-all;}
.rc-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:0.9rem;color:var(--gray-500);}
.rc-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--gray-100);display:flex;gap:6px;justify-content:flex-end;}

/* 채용 상세 팝업 전용 */
.sp-detail-recruit .sp-detail-head{background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);}
.recruit-section{margin-bottom:20px;}
.recruit-section h4{font-size:1.0rem;font-weight:800;color:var(--navy);margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid var(--blue-light);}
.recruit-list{list-style:none;display:flex;flex-direction:column;gap:5px;}
.recruit-list li{display:flex;align-items:flex-start;gap:8px;font-size:1.0rem;color:var(--gray-700);line-height:1.6;}
.recruit-list li::before{content:'·';color:var(--blue-mid);font-weight:700;flex-shrink:0;}

/* 지원 안내 박스 */
.recruit-apply-box{display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:24px;background:var(--navy);border-radius:var(--radius);padding:28px 32px;margin-top:36px;}
.rab-ico{font-size:2.5rem;}
.rab-txt strong{display:block;font-size:1.05rem;font-weight:800;color:white;margin-bottom:4px;}
.rab-txt p{font-size:0.95rem;color:rgba(255,255,255,.65);margin-bottom:6px;}
.rab-txt a{font-size:1.05rem;font-weight:700;color:var(--accent);transition:opacity .2s;}
.rab-txt a:hover{opacity:.8;}

/* ── 설치파일 준비 중 ── */
.coming-soon-box{background:var(--gray-100);border:2px dashed var(--gray-300);border-radius:var(--radius);padding:64px 32px;text-align:center;color:var(--gray-500);}
.cs-ico{font-size:3rem;margin-bottom:16px;}
.coming-soon-box h3{font-size:1.3rem;font-weight:700;color:var(--gray-700);margin-bottom:8px;}
.coming-soon-box p{font-size:1.1rem;line-height:1.8;}

/* ── 반응형 ── */
@media(max-width:900px){
  .rc-grid{grid-template-columns:repeat(2,1fr);}
  .recruit-apply-box{grid-template-columns:1fr 1fr;} .rab-ico{display:none;}
}
@media(max-width:768px){
  .rc-grid{grid-template-columns:1fr;}
  .sp-toolbar{flex-direction:column;align-items:stretch;}
  .recruit-apply-box{grid-template-columns:1fr;}

  /* ── 공지사항 테이블 모바일 수정 ── */
  /* 1. 작성자·관리 컬럼 숨김 */
  .sp-table th:nth-child(5),
  .sp-table td:nth-child(5) { display:none; }
  .sp-table th:nth-child(6),
  .sp-table td:nth-child(6) { display:none; }

  /* 2. 남은 4개 컬럼 너비 재분배 */
  .sp-table th:nth-child(1) { width:10%; }   /* 번호 */
  .sp-table th:nth-child(2) { width:18%; }   /* 분류 */
  .sp-table th:nth-child(3) { width:52%; }   /* 제목 */
  .sp-table th:nth-child(4) { width:20%; }   /* 작성일 */

  /* 3. 셀 패딩·폰트 축소 */
  .sp-table th { padding:10px 8px; font-size:0.88rem; }
  .sp-table td { padding:10px 8px; font-size:0.88rem; }

  /* 4. 작성일 줄바꿈 허용 (YYYY-MM-DD → 두 줄 가능) */
  .sp-table td:nth-child(4) { white-space:normal; word-break:break-all; font-size:0.8rem; color:var(--gray-500); }

  /* 5. 분류 배지 크기 축소 */
  .sp-notice-cat { padding:2px 6px; font-size:0.75rem; }

  /* 6. 제목 말줄임 유지 */
  .notice-title  { font-size:0.88rem; }
}
@media(max-width:480px){
  /* 480px 이하 — 작성일도 숨기고 번호+분류+제목만 표시 */
  .sp-table th:nth-child(4),
  .sp-table td:nth-child(4) { display:none; }

  .sp-table th:nth-child(1) { width:12%; }   /* 번호 */
  .sp-table th:nth-child(2) { width:22%; }   /* 분류 */
  .sp-table th:nth-child(3) { width:66%; }   /* 제목 */

  .sp-table th { padding:9px 7px; font-size:0.82rem; }
  .sp-table td { padding:9px 7px; font-size:0.82rem; }
}

/* support.html 인라인 스타일 → CSS 클래스 */
.form-label-inline { display:flex; align-items:center; gap:8px; }
.rd-dept-text      { font-size:1.0rem; color:rgba(255,255,255,.7); margin-top:4px; }

/* [SECTION:GALLERY-MODAL] ===============================================
   services.html — 구축사례 갤러리 상세 모달팝업
   ===================================================================== */
.gallery-card { cursor:pointer; }

/* 오버레이 */
.case-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.6); z-index:2000;
  align-items:center; justify-content:center; padding:24px;
}
.case-overlay.open { display:flex; }

/* 모달 박스 */
.case-modal {
  background:var(--white); border-radius:var(--radius);
  width:100%; max-width:700px; max-height:90vh;
  overflow-y:auto;
  animation:casePopIn .25s ease both;
}
@keyframes casePopIn {
  from { opacity:0; transform:scale(.96) translateY(-14px); }
  to   { opacity:1; transform:none; }
}

/* 헤더 */
.case-modal-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; background:var(--navy); color:white;
  border-radius:var(--radius) var(--radius) 0 0;
  position:sticky; top:0; z-index:1;
}
.case-modal-hd-left { display:flex; align-items:center; gap:10px; }
.case-cat-badge {
  padding:3px 12px; border-radius:100px;
  font-size:0.82rem; font-weight:700; color:white;
  background:rgba(255,255,255,.2);
}
.case-num-label { font-size:0.9rem; color:rgba(255,255,255,.45); font-weight:600; }
.case-modal-close {
  background:none; border:none; color:rgba(255,255,255,.6);
  font-size:1.4rem; cursor:pointer; line-height:1; padding:4px 6px;
  transition:color .2s;
}
.case-modal-close:hover { color:white; }

/* 이미지 영역 */
.case-modal-img {
  height:240px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
}
.case-modal-img img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.case-modal-noimg {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; width:100%; height:100%; position:relative; z-index:0;
}
.case-modal-ico { font-size:3.2rem; opacity:.35; line-height:1; }
.case-modal-noimg-txt {
  font-size:0.95rem; font-weight:700; color:rgba(255,255,255,.55);
  letter-spacing:0.04em;
}
.case-modal-img-badges {
  position:absolute; bottom:14px; left:16px;
  display:flex; gap:6px;
}
.case-img-badge {
  padding:4px 12px; border-radius:100px;
  font-size:0.78rem; font-weight:700; color:white;
  background:rgba(0,0,0,.45);
}

/* 본문 */
.case-modal-body { padding:24px; }
.case-modal-title {
  font-size:1.15rem; font-weight:800; color:var(--navy);
  line-height:1.4; word-break:keep-all; margin-bottom:16px;
}

/* 정보 그리드 */
.case-info-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin-bottom:18px;
}
.case-info-item {
  background:var(--off-white); border-radius:var(--radius-sm); padding:11px 14px;
}
.case-info-lbl {
  font-size:0.72rem; font-weight:700; color:var(--gray-500);
  letter-spacing:.5px; text-transform:uppercase; margin-bottom:4px;
}
.case-info-val { font-size:0.95rem; font-weight:700; color:var(--navy); }

/* 설명 */
.case-modal-desc {
  border-left:3px solid var(--blue-mid);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--off-white); padding:14px 16px;
  font-size:1.0rem; color:var(--gray-700);
  line-height:1.8; word-break:keep-all;
}

/* 푸터 */
.case-modal-ft {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px; border-top:1px solid var(--gray-100);
  position:sticky; bottom:0; background:var(--white);
}
.case-nav-btns { display:flex; gap:8px; }
.case-btn-nav {
  padding:8px 18px; border-radius:var(--radius-sm);
  border:1.5px solid var(--gray-300); background:var(--white);
  color:var(--gray-700); font-size:0.95rem; font-weight:700;
  cursor:pointer; transition:all .2s;
}
.case-btn-nav:hover { border-color:var(--blue-mid); color:var(--blue-mid); }
.case-btn-nav:disabled { opacity:.3; cursor:default; pointer-events:none; }
.case-btn-close {
  padding:8px 20px; border-radius:var(--radius-sm);
  border:none; background:var(--blue-mid); color:white;
  font-size:0.95rem; font-weight:700; cursor:pointer; transition:all .2s;
}
.case-btn-close:hover { background:var(--blue); }

/* 반응형 */
@media(max-width:768px) {
  .case-modal-img  { height:180px; }
  .case-modal-body { padding:16px; }
  .case-modal-ft   { padding:12px 16px; }
}
@media(max-width:480px) {
  .case-info-grid   { grid-template-columns:1fr; }
  .case-modal-title { font-size:1.0rem; }
}

/* [SECTION:SUPPORT-FILES-OFF] 설치파일 무결성 — 메뉴·링크 비노출
   (서비스 재오픈 시: 아래 블록 삭제 + support.html #files 섹션·앵커 복구) */
a[href*="support.html#files"] { display: none !important; }