@charset "utf-8";
/* ==========================================================================
   KENTEC — 2026-08-10 고객사 시안(Kentec-web-site-version2 by SJ) 이식본
   --------------------------------------------------------------------------
   고객사가 넘긴 정적 HTML 의 화면을 그대로 재현하되, 그쪽 CSS 가 !important
   덧대기로 누적돼 있어 그대로 쓰지 않고 이 파일로 정리해 옮겼다.

   default.css 는 본문 컴포넌트(pg-*, 게시판 등)를 계속 담당하고,
   이 파일은 화면 뼈대(헤더 · 서브히어로 · 서브탭 · 섹션 · 푸터 · 메인 히어로)를 담당한다.
   마크업 클래스명이 서로 달라 충돌하지 않는다.

   원칙
     · 그리드 아이템에는 반드시 minmax(0,1fr) / min-width:0 — 가로 넘침 방지
     · 고정 px 대신 clamp() — 320px~2560px 까지 한 규칙으로 대응
     · 배경 영상은 히어로 그라데이션 뒤에 깔린다 (theme.js 가 재생 판단)
   ========================================================================== */

:root {
    /* 고객사 시안 팔레트 */
    --k-primary:      #1d7fc4;
    --k-primary-dark: #0d5f9f;
    --k-primary-deep: #0b4272;
    --k-accent:       #62b9ff;
    --k-accent-soft:  #a9ddff;
    /* 서브 히어로 덮개처럼 투명도가 필요한 자리용 RGB 3원색.
       rgba() 안에 hex 를 넣을 수 없어 팔레트마다 같이 정의한다. */
    --k-primary-rgb:      29, 127, 196;
    --k-primary-deep-rgb: 11, 66, 114;
    --k-accent-soft-rgb:  169, 221, 255;
    --k-text:         #1b3043;
    --k-muted:        #5f7890;
    --k-line:         #d7e9f8;
    --k-bg:           #f3f9ff;

    --k-header-h:     84px;
    --k-subnav-h:     56px;
    --k-radius:       22px;
    --k-radius-lg:    28px;
    /* 설비 사진 한 규격 — 폭 320px · 비율 4:3 (설비 소개 행 · 본문 미디어 공통) */
    --k-photo-w:      320px;
    --k-shadow:       0 18px 42px rgba(22, 64, 100, .06);
    --k-inner:        1180px;
}

/* ── 대메뉴별 대표색 ────────────────────────────────────────
   2026-08-10 고객사 시안은 섹션마다 팔레트가 다르다. 각 섹션 style.css 의
   :root 값을 그대로 옮겼다. body 클래스는 page/_page.php 가 붙인다.
     회사소개    #1d7fc4  밝은 파랑
     대기환경    #0b7f5a  초록
     수질환경    #0057a8  진한 파랑
     화공기기    #b8742a  브라운
     생산·연구   #6d3fd3  보라
     고객지원    #0f5f73  틸
   ──────────────────────────────────────────────────────── */
body.accent-company {
    --k-primary: #1d7fc4; --k-primary-dark: #0d5f9f; --k-primary-deep: #0b4272;
    --k-accent: #62b9ff; --k-accent-soft: #a9ddff;
    --k-primary-rgb: 29, 127, 196; --k-primary-deep-rgb: 11, 66, 114;
    --k-accent-soft-rgb: 169, 221, 255;
    --k-line: #d7e9f8; --k-bg: #eaf3fd; --k-muted: #5f7890;
}
body.accent-air {
    --k-primary: #0b7f5a; --k-primary-dark: #064b3a; --k-primary-deep: #043a2d;
    --k-accent: #21b985; --k-accent-soft: #9fe6cb;
    --k-primary-rgb: 11, 127, 90; --k-primary-deep-rgb: 4, 58, 45;
    --k-accent-soft-rgb: 159, 230, 203;
    --k-line: #dcebe5; --k-bg: #ebf6f1; --k-muted: #627789;
}
body.accent-water {
    --k-primary: #0057a8; --k-primary-dark: #073a68; --k-primary-deep: #052d52;
    --k-accent: #13a6db; --k-accent-soft: #a5dcf2;
    --k-primary-rgb: 0, 87, 168; --k-primary-deep-rgb: 5, 45, 82;
    --k-accent-soft-rgb: 165, 220, 242;
    --k-line: #e3ebf3; --k-bg: #e9f1fa; --k-muted: #627789;
}
body.accent-equipment {
    --k-primary: #b8742a; --k-primary-dark: #7a4a18; --k-primary-deep: #3a2a1c;
    --k-accent: #f1b568; --k-accent-soft: #f6d6ac;
    --k-primary-rgb: 184, 116, 42; --k-primary-deep-rgb: 58, 42, 28;
    --k-accent-soft-rgb: 246, 214, 172;
    --k-line: #eadfce; --k-bg: #f7f0e3; --k-muted: #667384;
    --k-text: #1c2733;
}
body.accent-rnd {
    --k-primary: #6d3fd3; --k-primary-dark: #4a2a94; --k-primary-deep: #2b2357;
    --k-accent: #a78bfa; --k-accent-soft: #cfc2fd;
    --k-primary-rgb: 109, 63, 211; --k-primary-deep-rgb: 43, 35, 87;
    --k-accent-soft-rgb: 207, 194, 253;
    --k-line: #e3dcfb; --k-bg: #f0ecfd; --k-muted: #667085;
    --k-text: #1f2633;
}
body.accent-support {
    --k-primary: #0f5f73; --k-primary-dark: #0a4756; --k-primary-deep: #093844;
    --k-accent: #f2a541; --k-accent-soft: #f8d199;
    --k-primary-rgb: 15, 95, 115; --k-primary-deep-rgb: 9, 56, 68;
    --k-accent-soft-rgb: 248, 209, 153;
    --k-line: #dbe8ec; --k-bg: #e9f4f6; --k-muted: #627789;
}

/* default.css 의 본문 컴포넌트(pg-*, 게시판)도 현재 섹션 색을 따르게 토큰을 이어준다.
   위 body.accent-* 가 --k-* 를 갈아끼우면 아래 매핑이 그대로 따라간다. */
:root,
body[class*="accent-"] {
    --accent-600: var(--k-primary-dark);
    --accent-500: var(--k-primary);
    --navy-900:   var(--k-text);
    --navy-800:   #22405c;
    --navy-700:   var(--k-primary-dark);
    --navy-100:   #e8f3fc;
    --gray-200:   var(--k-line);
    --gray-100:   var(--k-bg);
    --radius:     14px;
    --inner:      1180px;
}

/* ==========================================================================
   본문 컴포넌트 — 고객사 시안의 카드 시스템으로 재정의
   --------------------------------------------------------------------------
   시안은 섹션마다 [영문 kicker + 제목] 을 두고, 내용을 흰 카드(라운드 22px,
   얇은 테두리, 부드러운 그림자)에 담는다. 강조 항목에는 파란 배지가 붙는다.
   default.css 의 각진 카드 대신 여기서 덮어쓴다 — 마크업은 그대로 두고
   전 페이지에 한 번에 적용된다.
   ========================================================================== */

/* 섹션 — 한 칸 걸러 배경색.
   색은 사업부 대표색을 따른다(body.accent-* 가 --k-bg 를 갈아끼운다).
   2026-08-25 — 기존 값은 색조가 2~3% 뿐이라 전부 회색으로 보인다는 지적이 있어
   각 대표색 계열이 눈에 들어올 만큼 올렸다. */
.sub-content .pg-sec {
    padding: clamp(24px, 2.8vw, 42px) clamp(18px, 2.5vw, 36px);
    margin-inline: calc(clamp(18px, 2.5vw, 40px) * -1);
    border-radius: var(--k-radius-lg);
}
.sub-content .pg-sec + .pg-sec { margin-top: clamp(12px, 1.5vw, 24px); }
.sub-content .pg-sec:nth-of-type(even) { background: var(--k-bg); }

/* 섹션 제목 — 좌측 세로선 대신 시안의 kicker + 굵은 제목 */
.pg-subtitle {
    padding-left: 0; border-left: 0;
    margin-bottom: clamp(16px, 2vw, 26px);
    font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 800;
    line-height: 1.25; letter-spacing: -.035em; color: var(--k-text);
    word-break: keep-all;
}
.pg-subtitle .pg-cards-sub { display: inline; margin-left: 8px; font-size: 0.9375rem; }
.pg-eyebrow {
    font-size: 0.8125rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--k-primary);
}
.pg-title {
    font-size: clamp(1.5rem, 2.8vw, 2.5rem); letter-spacing: -.04em; color: var(--k-text);
}
.pg-lead { font-size: clamp(1rem, 1.2vw, 1.1875rem); line-height: 1.8; color: var(--k-text); }
.sub-content p { color: var(--k-muted); line-height: 1.8; }
.sub-content .pg-lead { color: var(--k-text); }

/* 섹션 kicker — 시안은 제목 위에 영문 대문자 라벨을 둔다 */
.pg-kicker {
    margin: 0 0 10px;
    font-size: 0.8125rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--k-muted);
}

/* 카드 — 한 줄에 3개로 통일 (2026-08-12 요청).
   예전에는 auto-fit 이라 폭이 남으면 4~5열까지 늘어나 페이지마다 열 수가 달랐다. */
.pg-cards,
.pg-cards--2,
.pg-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.4vw, 20px);
}
/* 개수에 따라 줄이 고르게 떨어지도록 열 수를 정한다.
   기본 3열이면 4개짜리가 3+1 로 남아 한 칸이 붕 뜬다.
     1개 → 1열 · 2개 → 2열 · 4개 → 2열(2+2) · 그 외 → 3열
   (:has 는 이미 인쇄용 규칙에서도 쓰고 있다) */
.pg-cards:has(> li:first-child:nth-last-child(1)),
.step-grid:has(> li:first-child:nth-last-child(1)) { grid-template-columns: minmax(0, 1fr); }
.pg-cards:has(> li:first-child:nth-last-child(2)),
.pg-cards:has(> li:first-child:nth-last-child(4)),
.step-grid:has(> li:first-child:nth-last-child(2)),
.step-grid:has(> li:first-child:nth-last-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 7개(3+3+1) · 10개(3+3+3+1) 는 마지막 줄에 한 칸만 남는다 → 4열로 (4+3, 4+3+3) */
.pg-cards:has(> li:first-child:nth-last-child(7)),
.pg-cards:has(> li:first-child:nth-last-child(10)),
.step-grid:has(> li:first-child:nth-last-child(7)),
.step-grid:has(> li:first-child:nth-last-child(10)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .pg-cards, .pg-cards--2, .pg-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .pg-cards, .pg-cards--2, .pg-cards--3 { grid-template-columns: minmax(0, 1fr); }
}
.pg-cards li {
    position: relative;
    padding: clamp(20px, 2vw, 28px);
    background: #fff;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius);
    box-shadow: var(--k-shadow);
    min-width: 0;
}
.pg-cards strong {
    margin-bottom: 10px;
    font-size: clamp(1rem, 1.3vw, 1.25rem); font-weight: 700; color: var(--k-text);
    word-break: keep-all;
}
.pg-cards p { color: var(--k-muted); }
.pg-cards-sub { color: var(--k-primary); }
.pg-cards strong a:hover { color: var(--k-primary); }

/* 배지 붙은 카드 — .pg-cards--badge 를 함께 주면 A·B·C… 배지가 자동으로 붙는다 */
.pg-cards--badge { counter-reset: kcard; }
.pg-cards--badge li { counter-increment: kcard; padding-top: clamp(20px, 2vw, 28px); }
.pg-cards--badge li::before {
    content: counter(kcard, upper-alpha);
    display: grid; place-items: center;
    width: 46px; height: 46px; margin-bottom: 16px;
    border-radius: 14px;
    background: var(--k-primary); color: #fff;
    font-size: 1.0625rem; font-weight: 800;
}
/* 숫자 배지 버전 */
.pg-cards--num li::before { content: counter(kcard, decimal-leading-zero); }

/* 공정 흐름 — 시안의 스텝 카드 */
.pg-flow { gap: clamp(12px, 1.2vw, 18px); }
.pg-flow li {
    padding: clamp(18px, 1.8vw, 24px) clamp(14px, 1.4vw, 18px);
    background: #fff;
    border: 1px solid var(--k-line);
    border-top: 3px solid var(--k-primary);
    border-radius: var(--k-radius);
    box-shadow: var(--k-shadow);
}
.pg-flow li::after { border-left-color: var(--k-accent); }
.pg-flow strong { font-size: 1rem; color: var(--k-text); }
.pg-flow span { color: var(--k-muted); }
.pg-flow li.is-key { background: linear-gradient(135deg, var(--k-primary-dark), var(--k-primary)); border-color: transparent; }
.pg-flow li.is-key strong { color: #fff; }
.pg-flow li.is-key span { color: rgba(255, 255, 255, .82); }

/* KPI 블록 */
.pg-kpi {
    gap: clamp(12px, 1.2vw, 18px); background: none; border: 0;
}
.pg-kpi li {
    background: #fff; border: 1px solid var(--k-line);
    border-radius: var(--k-radius); box-shadow: var(--k-shadow);
}
.pg-kpi strong { color: var(--k-primary-dark); }
.pg-kpi strong span { color: var(--k-primary); }

/* 체크 목록 — 시안은 2~3열 카드형 체크 그리드 */
.check-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(10px, 1vw, 14px);
}
.check-list li {
    padding: 16px 18px 16px 44px;
    font-weight: 400; color: var(--k-text);
    background: #fff; border: 1px solid var(--k-line);
    border-radius: 14px; box-shadow: var(--k-shadow);
}

/* 태그 pill */
.tag-list li {
    padding: 8px 14px; border-radius: 999px;
    background: var(--k-bg); border: 1px solid var(--k-line);
    color: var(--k-primary-dark);
    font-size: 0.8125rem; font-weight: 600;
}

/* 텍스트 칩 목록 */
.client-list li {
    padding: 12px 20px; border-radius: 999px;
    background: #fff; border: 1px solid var(--k-line);
    font-weight: 600; color: var(--k-text);
}
.client-list--accent li { background: var(--k-bg); border-color: var(--k-line); color: var(--k-primary-dark); }

/* 표 */
.pg-table { border-radius: var(--k-radius); overflow: hidden; border: 1px solid var(--k-line); }
.pg-table thead th { background: var(--k-bg); color: var(--k-primary-dark); }
.pg-table th { background: var(--k-bg); color: var(--k-text); }

/* 사진 프레임 */
.pg-figure img, .pg-figure-ph { border-radius: var(--k-radius); }

/* 하단 CTA — 시안의 파란 그라데이션 배너 */
.pg-cta {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(18px, 2.5vw, 40px); flex-wrap: wrap;
    padding: clamp(26px, 3vw, 44px);
    background: linear-gradient(110deg, var(--k-primary-dark), var(--k-primary));
    border-radius: var(--k-radius-lg);
    color: #fff;
}
/* 제목 + 설명이 함께 오면 왼쪽 한 덩어리로 쌓고, 버튼만 오른쪽에 둔다
   (2026-08-10 고객사 시안 하단 Contact Us 배너 구성) */
.pg-cta > h4 {
    flex: 1 1 100%;
    margin: 0 0 -8px;
    font-size: clamp(1.125rem, 1.7vw, 1.5625rem); font-weight: 800; letter-spacing: -.02em;
    color: #fff; word-break: keep-all;
}
.pg-cta > h4 + p { flex: 1 1 420px; }
.pg-cta p { margin: 0; color: #d8ecf8; max-width: 800px; word-break: keep-all; }
.pg-cta .btn-primary {
    background: #fff; color: var(--k-primary);
    border-radius: 999px; font-weight: 800; white-space: nowrap;
}
.pg-cta .btn-primary:hover { background: var(--k-bg); }

/* 안내 문단 */
.pg-note { color: var(--k-muted); }
.pg-note a { color: var(--k-primary); font-weight: 600; }
.pg-caption { color: var(--k-muted); }

/* 표 본문은 굵게 쓰지 않는다 (고객사 시안 반복 요청 사항).
   행 머리(th)는 구분을 위해 굵기를 남긴다. */
.pg-table tbody td,
.pg-table tbody td a,
.bd-list td { font-weight: 400; }

/* ── 공통 래퍼 ─────────────────────────────────────────────── */
.k-container {
    width: min(100% - 40px, var(--k-inner));
    margin-inline: auto;
}

/* ==========================================================================
   헤더 — 흰 배경 sticky. 고객사 시안은 히어로 위에서도 흰 헤더를 유지한다.
   ========================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.header-inner {
    width: min(100% - 40px, 1600px);
    margin-inline: auto;
    min-height: var(--k-header-h);
    display: flex; align-items: center; gap: clamp(14px, 2vw, 34px);
}
.site-logo { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.site-logo img { width: clamp(112px, 10vw, 150px); height: auto; display: block; }
.site-logo strong {
    font-size: clamp(0.9375rem, 1.2vw, 1.3125rem); font-weight: 500;
    color: var(--k-text); letter-spacing: -.03em; white-space: nowrap;
}

/* 헤더 가로 메뉴 — 메인(레퍼런스 첫 화면 구성)에서만 감추고,
   서브 페이지에서는 그대로 보여 준다. body.is-index 는 head.php 가 붙인다. */
.global-nav {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(14px, 2.2vw, 40px);
    flex: 1 1 auto; min-width: 0;
}
body.is-index .global-nav { display: none; }
body.is-index .header-inner { justify-content: space-between; }
body.is-index .hd-burger { display: block; }
/* 히어로를 지나 스크롤하면 메인에도 가로 메뉴가 나타난다 (theme.js 가 붙임) */
/* 모바일·태블릿은 원래대로 햄버거만 쓴다 (좁은 폭에 가로 메뉴를 띄우면 로고와 겹친다) */
@media (min-width: 1024px) {
    body.is-index.is-past-hero .global-nav { display: flex; animation: navFadeIn .35s var(--ease) both; }
    body.is-index.is-past-hero .header-inner { justify-content: flex-start; }
    body.is-index.is-past-hero .hd-burger { display: none; }
}
@keyframes navFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.global-nav a {
    position: relative;
    font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; line-height: 1;
    color: #344b5f; white-space: nowrap;
    padding: 8px 2px;
    transition: color .2s;
}
.global-nav a:hover { color: var(--k-primary); }
.global-nav a.is-active { color: var(--k-primary); }
.global-nav a.is-active::after {
    content: ''; position: absolute; left: 0; right: 0;
    bottom: calc((var(--k-header-h) - 100%) / -2 + 1px);
    height: 3px; background: var(--k-primary);
}

.header-util { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* 검색 — 글자 대신 돋보기 아이콘. 다른 헤더 요소와 같은 원형 톤. */
.header-util .site-search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0;
    border: 1px solid var(--k-line); background: #fff; border-radius: 50%;
    font-size: 0.9375rem; color: #52677a;
    cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.header-util .site-search-toggle:hover {
    border-color: var(--k-primary); color: var(--k-primary); background: var(--k-bg);
}
/* 언어 전환 KOR / EN */
.header-util .k-lang {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8125rem; font-weight: 800; letter-spacing: .01em;
}
.header-util .k-lang a { color: var(--k-muted); transition: color .2s; }
.header-util .k-lang a:hover { color: var(--k-primary); }
.header-util .k-lang a.is-active { color: var(--k-primary); }
.header-util .k-lang span { color: var(--k-line); font-weight: 500; }

/* 영문으로 볼 때 본문이 아직 국문인 페이지 위에 붙는 안내 */
.lang-notice {
    margin: 0 0 clamp(18px, 2vw, 28px);
    padding: 13px 18px;
    background: var(--k-bg); border: 1px solid var(--k-line); border-radius: 12px;
    font-size: 0.875rem; line-height: 1.65; color: var(--k-muted);
}
.lang-notice a { color: var(--k-primary); font-weight: 700; }

/* 모바일 햄버거 — 시안에는 없지만 좁은 화면에서 GNB 를 대신한다 */
.hd-burger {
    display: none; flex: 0 0 auto;
    width: 42px; height: 42px; padding: 10px;
    background: none; border: 0; cursor: pointer;
}
.hd-burger span {
    display: block; height: 2px; margin: 4px 0;
    background: var(--k-text); border-radius: 2px;
    transition: transform .25s, opacity .2s;
}

/* ==========================================================================
   메인 히어로 — 딥블루 그라데이션 + (뒤에) 배경 영상
   ========================================================================== */
.main-hero {
    position: relative; isolation: isolate;
    color: #fff;
    background: var(--k-primary-deep);
    overflow: hidden;
}
/* 배경 사진·영상 */
.main-hero-media {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
}
/* 레퍼런스와 동일: 처음부터 보이게 두고 화면을 꽉 채운다.
   (예전엔 opacity 0 으로 숨겨두고 JS 이벤트로만 켜서, 이벤트가 안 오면 영영 안 보였다) */
.main-hero-media video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    /* default.css 의 옛 규칙이 top/left 50% + translate(-50%,-50%) 로 가운데 정렬을 하고 있어
       영상이 자기 높이의 절반만큼 위로 밀려 상단 일부만 보였다. 전부 되돌린다. */
    top: 0; left: 0; right: 0; bottom: 0;
    transform: none;
    min-width: 0; min-height: 0; max-width: none; max-height: none;
    object-fit: cover;
    opacity: 1;
}
/* 영상이 배경이므로 덮개는 글자가 읽힐 만큼만 얇게 깐다.
   (예전엔 딥블루를 92% 로 덮어 영상이 파란 이미지처럼 보였다) */
.main-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(6, 24, 44, .45), rgba(6, 24, 44, .30) 45%, rgba(6, 24, 44, .55));
}
.main-hero > .k-container { position: relative; z-index: 2; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
    padding: clamp(48px, 7vw, 104px) 0;
}
/* ==========================================================================
   메인 배경 영상 — 페이지 전체에 깔린다
   히어로 안에 두면 첫 화면을 지나는 순간 영상이 같이 밀려 올라가 흰 배경이 드러났다.
   화면에 고정해 두고, 아래 구역들이 반투명 유리처럼 그 위를 지나가게 한다.
   ========================================================================== */
body.is-index { background: #06182c; }
.main-bg-media {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    background: #06182c;
}
/* 히어로 자체 배경은 걷어낸다 (고정 영상이 그대로 비쳐야 한다).
   overflow:hidden 은 그대로 둔다 — 퀵메뉴 칸의 세로 띠가 아래 구역까지 새어 나가지 않게. */
body.is-index .main-hero { background: transparent; }
/* 본문 구역은 영상 위 레이어 */
body.is-index .sec,
body.is-index .site-footer { position: relative; z-index: 1; }

/* 뉴스 · 누적 실적 · 사업분야 — 영상이 비치는 반투명 판.
   실적 화면은 숫자를 보여 주는 자리라 가장 옅게 덮어 영상이 그대로 살아 있게 한다. */
body.is-index .sec-news  { background: rgba(6, 20, 36, .68); }
body.is-index .sec-stats { background: rgba(6, 20, 36, .52); }
body.is-index .sec-biz   { background: rgba(6, 20, 36, .78); }
body.is-index .sec-news,
body.is-index .sec-stats,
body.is-index .sec-biz { color: #e6eef6; backdrop-filter: blur(3px); }
body.is-index .sec-title { color: #fff; }
body.is-index .sec-more { color: #cfe0ef; }
body.is-index .sec-more:hover { color: #fff; }
body.is-index .card-title { color: #fff; }
body.is-index .card:hover .card-title { color: #9fd0ff; }
body.is-index .card-excerpt,
body.is-index .card-date { color: #b6c8d8; }
body.is-index .news-arrow {
    background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .28); color: #fff;
}
body.is-index .news-arrow:hover { background: rgba(255, 255, 255, .22); }
/* 실적 숫자 띠 · 사업분야 카드 — 유리판 */
body.is-index .stats-strip {
    background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .16);
}
body.is-index .stats-strip li { background: rgba(9, 26, 44, .55); }
body.is-index .stats-strip a:hover { background: rgba(255, 255, 255, .10); }
body.is-index .stats-strip strong,
body.is-index .stats-strip strong span { color: #fff; }
body.is-index .stats-strip em { color: #b6c8d8; }
body.is-index .bizcard {
    background: rgba(9, 26, 44, .62);
    border: 1px solid rgba(255, 255, 255, .12);
    border-top-width: 3px;
}
body.is-index .bizcard-title { color: #fff; }
body.is-index .bizcard-desc { color: #b6c8d8; }
body.is-index .bizcard-btn { color: #fff; border-color: rgba(255, 255, 255, .38); }
body.is-index .bizcard-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
/* ── 누적 실적 화면 ─────────────────────────────────────────
   얇은 숫자 밴드로 붙여 두면 그냥 스쳐 지나간다. 한 화면을 통째로 주고
   숫자를 크게 세운 뒤, 화면에 들어올 때 0 부터 올라가게 한다(theme.js). */
.sec-head-center { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.sec-head-center .sec-lead {
    margin: 0; font-size: clamp(0.875rem, 1.1vw, 1.0625rem); line-height: 1.7;
    color: #b6c8d8; word-break: keep-all;
}
.stats-big {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 22px);
    margin: clamp(24px, 4vw, 56px) 0 0; padding: 0; list-style: none;
}
.stats-big > li { min-width: 0; }
.stats-big a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; height: 100%;
    padding: clamp(22px, 3vw, 40px) clamp(6px, 1vw, 18px);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--k-radius);
    background: rgba(9, 26, 44, .34);
    transition: background .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
.stats-big a:hover {
    background: rgba(9, 26, 44, .58);
    border-color: rgba(255, 255, 255, .34);
    transform: translateY(-6px);
}
.stats-big strong {
    display: flex; align-items: baseline; gap: 2px;
    font-size: clamp(2.125rem, 4.6vw, 4.625rem); font-weight: 800; line-height: 1;
    letter-spacing: -.045em; color: #fff;
    font-variant-numeric: tabular-nums;         /* 숫자가 올라갈 때 폭이 흔들리지 않게 */
}
.stats-big strong span {
    font-size: clamp(0.9375rem, 1.5vw, 1.5rem); font-weight: 700;
    letter-spacing: -.02em; color: var(--k-accent-soft);
}
.stats-big em {
    font-style: normal; font-size: clamp(0.75rem, 1vw, 1rem); font-weight: 500;
    color: #b6c8d8; text-align: center; word-break: keep-all;
}
/* li 가 display:flex (카드 높이 통일 규칙) 라서 안쪽 <a> 가 내용 폭으로 줄어든다.
   PC 는 칸이 좁아 티가 안 났지만 모바일에서 카드가 제각각 좁아 보였다. 칸을 꽉 채운다. */
.stats-big a { width: 100%; }

@media (max-width: 1023px) {
    .stats-big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stats-big > li:last-child { grid-column: 1 / -1; }   /* 5개 → 2·2·1 */
}
@media (max-width: 400px) {
    .stats-big a { padding: 18px 8px; gap: 10px; }
}

/* ── 사업분야 캐러셀 — 한 화면에 4개, 나머지는 좌우로 ─────────
   노출 개수는 theme.js 의 calcPerView() 와 반드시 같아야 한다.
   1280+ → 4개, 1024+ → 3개, 640+ → 2개, 그 미만 → 1개 */
.slider-viewport { overflow: hidden; }
.js-slider { position: relative; }
.slider-nav { display: flex; gap: 6px; }
.js-slider.is-sliding .slider-track {
    display: flex; gap: 0;
    transition: transform .55s var(--ease);
    will-change: transform;
}
.js-slider.is-sliding .slider-item {
    flex: 0 0 25%; padding-right: 24px; box-sizing: border-box;
}
@media (max-width: 1279px) { .js-slider.is-sliding .slider-item { flex-basis: 33.3333%; padding-right: 20px; } }
@media (max-width: 1023px) { .js-slider.is-sliding .slider-item { flex-basis: 50%; } }
@media (max-width: 639px)  { .js-slider.is-sliding .slider-item { flex-basis: 100%; padding-right: 0; } }

/* 4개가 한 줄에 들어가려면 카드가 세로형이어야 한다 (사진 위 · 글 아래) */
body.is-index .bizlist { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
html.snap body.is-index .bizcard,
body.is-index .bizcard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
}
html.snap body.is-index .bizcard-photo,
body.is-index .bizcard-photo { min-height: 0; aspect-ratio: 4 / 3; }
html.snap body.is-index .bizcard-body,
body.is-index .bizcard-body { padding: 20px 22px 22px; }
html.snap body.is-index .bizcard-title,
body.is-index .bizcard-title { font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); }
body.is-index .bizcard-desc {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 0.875rem; line-height: 1.65;
}
body.is-index .bizcard-btn { margin-top: auto; }
/* 어두운 배경 위에서는 점 표시도 밝게 */
body.is-index .news-dot { background: rgba(255, 255, 255, .32); }
body.is-index .news-dot.is-active { background: #fff; }
@media (max-width: 1023px) {
    body.is-index .bizlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    body.is-index .bizlist { grid-template-columns: minmax(0, 1fr); }
}

/* 푸터도 같은 톤으로 (흰 판이 끝에 다시 나오지 않게) */
body.is-index .site-footer {
    background: rgba(4, 14, 26, .88); border-top-color: rgba(255, 255, 255, .14); color: #a9bdcf;
}
body.is-index .footer-link-row { border-bottom-color: rgba(255, 255, 255, .14); }
body.is-index .footer-link-row a { color: #e6eef6; }
body.is-index .footer-link-row a:hover { color: #fff; }
body.is-index .footer-link-row span { color: rgba(255, 255, 255, .3); }
body.is-index .footer-company-info .k-copy { color: #8298ab; }

/* ── 메인: 레퍼런스(ecoprohn.com)처럼 한 구역이 한 화면 ──────────
   구역 이동 자체는 theme.js 의 initSectionPager() 가 맡고(휠 한 번 = 한 구역),
   CSS 스냅은 JS 스크롤과 부딪히므로 끈다.
   내용은 세로 가운데 정렬 — 예전처럼 아래에 빈 공간이 남지 않는다.
   1024px 미만(모바일·태블릿)에서는 페이저가 꺼지므로 높이도 자연스럽게 둔다. */
html.snap { scroll-snap-type: none; }

@media (min-width: 1024px) {
    html.snap .snap-sec {
        min-height: calc(100vh - var(--k-header-h));
        display: flex; flex-direction: column; justify-content: center;
        scroll-snap-align: none;
    }
    html.snap .snap-sec > .inner,
    html.snap .snap-sec > .k-container { width: 100%; }
    html.snap .sec { padding: clamp(32px, 4vw, 64px) 0; }
    html.snap .main-hero .hero-copy-center { min-height: 0; }
}

@media (max-width: 1023px) {
    html.snap .snap-sec { min-height: 0; height: auto; display: block; }
    html.snap .sec { padding: clamp(44px, 7vw, 72px) 0; }
}

/* ── 첫 화면 퀵링크 — 레퍼런스(ecoprohn.com)와 같은 구성 ──────────
   화면을 꽉 채운 배경영상 위, 가운데에 대메뉴 6개를 한 줄로 놓는다.
   각 항목은 아이콘 → 한글 라벨 → + 버튼 순. (영문 라벨은 쓰지 않는다) */
/* 2026-09-01 — 아래쪽 여백을 줘서 가운데 정렬 축을 위로 올린다.
   하위 메뉴가 링크 아래로 펼쳐지는데, 정확히 화면 한가운데에 두면
   9개짜리(회사소개·대기환경)가 화면 아래로 잘렸다.
   레퍼런스(ecoprohn.com)도 메뉴가 화면의 39% 지점에 있다. */
.main-hero {
    min-height: calc(100vh - var(--k-header-h));
    display: flex; align-items: center;
    padding-bottom: clamp(80px, 14vh, 170px);
}
/* 왼쪽 문구 · 오른쪽 메뉴(회사소개 … 고객지원 가로 나열) — 배경은 영상 */
/* 슬로건과 메뉴를 모두 화면 가운데에 세로로 쌓는다 (레퍼런스 배치 + 슬로건 유지) */
/* 왼쪽 문구 · 오른쪽 메뉴. 메뉴 폭은 레퍼런스와 같은 57.5% 라 왼쪽에 여백이 생긴다. */
.hero-inner {
    position: relative; z-index: 2;
    width: min(100% - 40px, 1400px); margin-inline: auto;
    display: grid; grid-template-columns: minmax(0, 42.5fr) minmax(0, 57.5fr);
    gap: clamp(20px, 2.5vw, 40px);
    align-items: center;
}
.hero-inner .hero-copy-center {
    width: auto; margin: 0; min-height: 0; padding: 0;
    max-width: none; text-align: left;
}
/* 문장이 두 줄(<br> 기준)로 떨어지도록 폭을 넉넉히 준다 */
.hero-inner .hero-headline {
    font-size: clamp(1.375rem, 2.4vw, 2.375rem);
    line-height: 1.35;
    white-space: normal; word-break: keep-all;   /* 좁은 왼쪽 칸에 맞춰 접힌다 */
}
.hero-inner .hero-headline { margin: 0; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }

/* default.css 의 옛 히어로에서 .hero-quick 은 absolute 였다.
   지금은 문구 아래에 흐르는 블록이라 위치 지정을 되돌린다 (안 그러면 문구와 겹친다). */
.main-hero .hero-quick {
    position: static; transform: none;
    right: auto; left: auto; top: auto; bottom: auto;
    width: 100%;
}
/* 오른쪽 메뉴 — 항목 생김새는 레퍼런스 그대로(아이콘 위 · 이름 · + 원형 버튼),
   배치만 오른쪽 칸에 3열 × 2줄로 넣는다. */
/* 레퍼런스는 영상이 화면 전체를 덮고, 메뉴 블록만 오른쪽 약 57% 에 놓인다.
   그래서 왼쪽에 여백이 생긴다 (x 612 / 1440 지점부터 메뉴 시작).
   같은 비율로 오른쪽에 붙인다. */
.hero-quick > ul {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(4px, 1vw, 16px);
    width: 100%;
}
.hero-quick > ul > li { min-width: 0; }
.hero-quick > ul > li > a {
    /* default.css 옛 규칙이 남지 않도록 방향·크기를 모두 다시 잡는다 */
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    width: 100%; padding: clamp(12px, 1.4vw, 20px) 2px;
    text-align: center; color: #fff;
    background: none; border: 0; border-radius: var(--k-radius);
    transition: background .22s var(--ease), transform .22s var(--ease);
}
.hero-quick > ul > li > a:hover { background: none; }
.hero-quick > ul > li > a i { font-size: clamp(1.5rem, 2.2vw, 2.125rem); line-height: 1; }
/* 영문 라벨 — 레퍼런스처럼 한글 위에 대문자로 (아이콘 바로 아래) */
.hero-quick > ul > li > a em {
    display: block; margin: 0 0 -6px;
    font-style: normal; font-weight: 800;
    font-size: clamp(0.625rem, .8vw, 0.75rem); letter-spacing: .04em; line-height: 1.25;
    text-transform: uppercase; color: rgba(255, 255, 255, .92);
    word-break: keep-all;
}
.hero-quick > ul > li > a strong {
    display: block; margin: 0;
    font-size: clamp(0.8125rem, 1.05vw, 1rem); font-weight: 700; letter-spacing: -.01em;
    color: #fff; word-break: keep-all;
}
/* + 버튼 — 흰 원 안의 십자.
   마우스오버하면 원 배경을 없애고 흰색 가로 막대(−)만 남긴다. */
.hero-quick-plus {
    position: relative;
    width: 32px; height: 32px;
    background: #fff; border-radius: 50%;
    transition: background .2s, transform .2s;
}
.hero-quick-plus::before,
.hero-quick-plus::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    background: var(--k-primary-deep);
    transform: translate(-50%, -50%);
    transition: opacity .2s, background .2s, width .2s;
}
.hero-quick-plus::before { width: 13px; height: 2px; }              /* 가로선 */
.hero-quick-plus::after  { width: 2px;  height: 13px; }             /* 세로선 */

/* ── 마우스오버: 칸이 세로 패널로 열리고 하위 메뉴가 펼쳐진다 ────── */
.hero-quick > ul > li { position: relative; }
/* 히어로가 overflow:hidden 이라 위아래로 길게 뽑아도 화면 안에서만 보인다 */
/* 각 칸의 반투명 세로 배경 — 레퍼런스와 동일 (li 배경 rgba(0,0,0,.25) 가 칸 전체 높이).
   히어로가 overflow:hidden 이라 위아래로 길게 뽑아도 화면 안에서만 보인다. */
.hero-quick > ul > li::before {
    content: ''; position: absolute; left: 0; right: 0; top: -100vh; bottom: -100vh;
    /* 2026-08-25 고객사 요청 — 메뉴 칸을 회색 판으로.
       예전 rgba(0,0,0,.12) 는 거의 안 보여, 밝은 배경 위에서 흰 글자가 묻혔다.
       색은 --k-menu-rgb / 진하기는 --k-menu 한 값으로 조절한다. */
    background: rgba(var(--k-menu-rgb), var(--k-menu));
    transition: background .25s var(--ease);
    pointer-events: none;
}
.hero-quick > ul {
    --k-menu-rgb: 92, 102, 114; --k-menu: .34;
    /* 칸 사이를 띄우면 그 틈으로 영상이 비쳐 회색 판이 줄무늬처럼 끊긴다.
       간격을 없애 판을 하나로 잇고, 경계는 아래 1px 선으로만 표시한다. */
    gap: 0;
}
.hero-quick > ul > li:hover::before,
.hero-quick > ul > li:focus-within::before { background: rgba(var(--k-menu-rgb), calc(var(--k-menu) + .14)); }
/* 칸 사이 경계선 — 회색 판이 6칸으로 나뉜 게 보이도록 */
.hero-quick > ul > li + li::after {
    content: ''; position: absolute; left: 0; top: -100vh; bottom: -100vh;
    width: 1px; background: rgba(255, 255, 255, .14); pointer-events: none;
}

.hero-quick > ul > li:hover .hero-quick-plus,
.hero-quick > ul > li:focus-within .hero-quick-plus {
    background: none; transform: none;
}
.hero-quick > ul > li:hover .hero-quick-plus::before,
.hero-quick > ul > li:focus-within .hero-quick-plus::before { background: #fff; width: 18px; }
.hero-quick > ul > li:hover .hero-quick-plus::after,
.hero-quick > ul > li:focus-within .hero-quick-plus::after { opacity: 0; }  /* 세로선만 지워 − 로 */

/* 2026-09-01 — 하위 메뉴가 레이아웃 높이를 차지하고 있어서, 항목이 많은 칸
   (회사소개·대기환경 9개)을 열면 히어로 가운데 정렬이 다시 계산되며
   메뉴와 왼쪽 문구가 통째로 171px 위로 튀어 올랐다.
   자리에서 띄워(absolute) 링크 바로 아래에 겹쳐 놓으면 높이가 안 변해 아무것도 안 움직인다.
   (레퍼런스 ecoprohn.com 도 같은 방식이다)
   ⚠ 위쪽 링크가 --k-hero-lift 만큼 올라가 있으므로 하위 메뉴도 같이 올려야 간격이 맞다. */
.hero-quick .hero-quick-sub {
    position: absolute; left: 0; right: 0; top: 100%;
    transform: translateY(calc(-1 * var(--k-hero-lift)));
    z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: 6px;
    margin-top: 0; padding: 0;
    max-height: 0; overflow: hidden;
    opacity: 0; visibility: hidden;
    /* 열릴 때는 여유 있게, 닫힐 때는 조금 빠르게 — 툭 떨어지는 느낌을 없앤다 */
    transition: max-height .28s cubic-bezier(.4, 0, .2, 1),
                margin-top .28s cubic-bezier(.4, 0, .2, 1),
                opacity .2s ease,
                visibility .28s;
}
.hero-quick > ul > li:hover .hero-quick-sub,
.hero-quick > ul > li:focus-within .hero-quick-sub {
    max-height: 420px; margin-top: 18px;
    opacity: 1; visibility: visible;
    transition: max-height .5s cubic-bezier(.22, .61, .36, 1),
                margin-top .5s cubic-bezier(.22, .61, .36, 1),
                opacity .45s ease .05s,
                visibility 0s;
}

/* 항목이 하나씩 차례로 올라오게 — 한꺼번에 튀어나오면 경박해 보인다 */
.hero-quick .hero-quick-sub > li {
    position: static; min-width: 0;
    opacity: 0; transform: translateY(10px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}
.hero-quick .hero-quick-sub > li::before { content: none; }
.hero-quick > ul > li:hover .hero-quick-sub > li,
.hero-quick > ul > li:focus-within .hero-quick-sub > li {
    opacity: 1; transform: translateY(0);
}
.hero-quick > ul > li:hover .hero-quick-sub > li:nth-child(1),
.hero-quick > ul > li:focus-within .hero-quick-sub > li:nth-child(1) { transition-delay: .10s; }
.hero-quick > ul > li:hover .hero-quick-sub > li:nth-child(2),
.hero-quick > ul > li:focus-within .hero-quick-sub > li:nth-child(2) { transition-delay: .15s; }
.hero-quick > ul > li:hover .hero-quick-sub > li:nth-child(3),
.hero-quick > ul > li:focus-within .hero-quick-sub > li:nth-child(3) { transition-delay: .20s; }
.hero-quick > ul > li:hover .hero-quick-sub > li:nth-child(4),
.hero-quick > ul > li:focus-within .hero-quick-sub > li:nth-child(4) { transition-delay: .25s; }
.hero-quick > ul > li:hover .hero-quick-sub > li:nth-child(5),
.hero-quick > ul > li:focus-within .hero-quick-sub > li:nth-child(5) { transition-delay: .30s; }
.hero-quick > ul > li:hover .hero-quick-sub > li:nth-child(6),
.hero-quick > ul > li:focus-within .hero-quick-sub > li:nth-child(6) { transition-delay: .35s; }
.hero-quick > ul > li:hover .hero-quick-sub > li:nth-child(7),
.hero-quick > ul > li:focus-within .hero-quick-sub > li:nth-child(7) { transition-delay: .40s; }
.hero-quick > ul > li:hover .hero-quick-sub > li:nth-child(8),
.hero-quick > ul > li:focus-within .hero-quick-sub > li:nth-child(8) { transition-delay: .45s; }
.hero-quick > ul > li:hover .hero-quick-sub > li:nth-child(9),
.hero-quick > ul > li:focus-within .hero-quick-sub > li:nth-child(9) { transition-delay: .50s; }

.hero-quick .hero-quick-sub a {
    /* ⚠ default.css 의 옛 히어로 규칙 '.hero-quick a { width: 116px }' 가 여기까지 먹는다.
       칸은 133px 인데 링크만 116px 이라 가운데 정렬을 해도 글자가 8px 왼쪽으로 밀렸다.
       (위쪽 아이콘·라벨은 '.hero-quick > ul > li > a { width:100% }' 로 이미 풀어 놨다) */
    /* 2026-09-01 — 9개짜리 하위 메뉴가 화면 밖으로 나가서 줄간격을 조금 좁혔다 */
    display: block; width: 100%; padding: 2px 4px;
    font-size: clamp(0.75rem, .95vw, 0.875rem); font-weight: 500; line-height: 1.4;
    color: rgba(255, 255, 255, .82); text-align: center;
    background: none; border-radius: 0;
    transition: color .2s ease;
}
.hero-quick .hero-quick-sub a:hover { color: #fff; background: none; transform: none; text-decoration: none; }

/* 아이콘·라벨도 같은 속도로 부드럽게 자리를 잡는다 */
/* 2026-09-01 고객사 요청 — 마우스를 올렸을 때만 6px 올라가던 것을 항상 올라간
   상태로 고정했다. 칸마다 오르내리는 움직임이 사라져 줄이 흔들리지 않는다.
   왼쪽 문구도 같은 값만큼 올려야 두 블록의 글자 줄이 같은 높이에서 시작·끝난다.
   두 곳이 같이 움직이도록 값을 변수 하나로 묶어 둔다. */
:root { --k-hero-lift: 6px; }
.hero-quick > ul > li > a { transform: translateY(calc(-1 * var(--k-hero-lift))); }
.hero-inner .hero-copy-center { transform: translateY(calc(-1 * var(--k-hero-lift))); }
/* 두 칸을 위쪽 기준으로 맞춘다. 가운데 정렬이면 문구와 메뉴의 높이가 달라
   (넓은 화면은 문구가 더 길고 좁은 화면은 메뉴가 더 길다) 첫 줄 높이가 계속 어긋났다.
   문구 칸에 메뉴 링크와 같은 위 여백을 줘서 '헤드라인 첫 줄 = 아이콘' 이 되게 한다. */
.hero-inner { align-items: start; }
.hero-inner .hero-copy-center { padding-top: clamp(12px, 1.4vw, 20px); }

/* 모션 최소화 설정에서는 애니메이션 없이 바로 */
@media (prefers-reduced-motion: reduce) {
    .hero-quick .hero-quick-sub,
    .hero-quick .hero-quick-sub > li,
    .hero-quick > ul > li > a { transition: none; }
}

/* ── 모바일·태블릿 첫 화면 ────────────────────────────────────
   PC 는 왼쪽 문구 · 오른쪽 6칸이지만, 390px 에서 그 배치를 그대로 쓰면
   메뉴가 190px 칸에 6열로 밀려 글자가 겹치고 사실상 안 보인다.
   좁은 화면에서는 문구를 위, 메뉴를 아래 3열 × 2줄 타일로 쌓는다. */
@media (max-width: 1023px) {
    html.snap .main-hero {
        min-height: calc(100svh - var(--k-header-h));
        display: flex; align-items: center;
        padding: clamp(24px, 7vw, 48px) 0;
    }
    .hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(22px, 6vw, 36px);
    }
    .hero-inner .hero-headline {
        font-size: clamp(1.25rem, 5.2vw, 1.875rem); line-height: 1.4;
    }
    .hero-quick > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .hero-quick > ul > li > a {
        height: 100%; gap: 9px; padding: 16px 6px; justify-content: center;
    }
    .hero-quick > ul > li > a i { font-size: 1.625rem; }
    .hero-quick > ul > li > a em { font-size: 0.625rem; margin-bottom: -4px; }
    .hero-quick > ul > li > a strong { font-size: 0.8125rem; }
    /* 세로로 길게 뽑은 띠 대신 칸마다 하나의 타일 */
    .hero-quick > ul > li::before {
        top: 0; bottom: 0;
        border-radius: 12px;
        background: rgba(0, 0, 0, .30);
    }
    /* 터치 화면엔 마우스오버가 없다 — + 버튼과 하위 메뉴는 감추고 타일 전체를 링크로 */
    .hero-quick-plus,
    .hero-quick .hero-quick-sub { display: none; }
    .hero-quick > ul > li:hover > a,
    .hero-quick > ul > li > a:hover { transform: none; }
}
@media (max-width: 360px) {
    .hero-quick > ul { gap: 8px; }
    .hero-quick > ul > li > a { padding: 13px 4px; }
    .hero-quick > ul > li > a strong { font-size: 0.75rem; }
}

.hero-eyebrow {
    font-size: 0.8125rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--k-accent-soft);
    margin: 0 0 14px;
}
.hero-headline {
    margin: 0 0 22px;
    font-size: clamp(1.875rem, 4.4vw, 3.875rem);
    font-weight: 800; line-height: 1.16; letter-spacing: -.045em;
    word-break: keep-all;
}
.hero-lead {
    margin: 0; max-width: 46ch;
    font-size: clamp(0.9375rem, 1.2vw, 1.1875rem); line-height: 1.7;
    color: rgba(255, 255, 255, .88);
    word-break: keep-all;
}

/* 우측 바로가기 박스 */
.hero-links { display: grid; gap: 12px; min-width: 0; }
.hero-links a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: clamp(14px, 1.5vw, 22px) clamp(16px, 1.8vw, 26px);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .20);
    backdrop-filter: blur(8px);
    color: #fff;
    transition: background .22s, transform .22s;
}
.hero-links a:hover { background: rgba(255, 255, 255, .22); transform: translateX(4px); }
.hero-links b {
    font-size: clamp(0.75rem, 1vw, 0.9375rem); font-weight: 800; letter-spacing: .01em;
    min-width: 0; word-break: keep-all;
}
.hero-links b span { font-weight: 600; }
.hero-links i { font-style: normal; font-size: 1.125rem; color: var(--k-accent-soft); }

/* ==========================================================================
   서브 히어로 — 브레드크럼 + 타이틀 + 우측 요약 패널
   ========================================================================== */
.sub-hero {
    position: relative; isolation: isolate; color: #fff;
    background: var(--k-primary-deep);
    overflow: hidden;
}
.sub-hero-media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; overflow: hidden; }
/* 서브 상단 배경 영상 — 사진 위에 얹힌다. 재생 전에는 사진이 그대로 보인다. */
.sub-hero-media video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    top: 0; left: 0; right: 0; bottom: 0; transform: none;
    min-width: 0; min-height: 0; max-width: none; max-height: none;
    object-fit: cover;
    opacity: 0; transition: opacity .6s var(--ease);
}
.sub-hero-media video.is-on { opacity: 1; }
/* 덮개 색은 현재 섹션 팔레트를 따른다.
   예전엔 파랑이 하드코딩돼 있어, 대기환경(초록)·화공기기(브라운) 페이지도
   전부 파란 화면으로 보였다. */
.sub-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(125deg,
            rgba(var(--k-primary-deep-rgb), .90),
            rgba(var(--k-primary-rgb), .74)),
        radial-gradient(circle at 85% 18%,
            rgba(var(--k-accent-soft-rgb), .30), transparent 42%);
}
.sub-hero > .k-container { position: relative; z-index: 2; }
.sub-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(24px, 4vw, 50px); align-items: center;
    /* 2026-09-04 — 리드 자리를 2줄로 고정하면서(.sub-hero-lead) 히어로가 한 줄만큼
       키가 커졌다. 위아래 여백에서 그만큼(반 줄씩) 덜어 원래 높이로 되돌린다.
       em 으로 빼는 이유: 글자 크기 조절(가－/가＋)을 쓰면 늘어난 줄도 같이 커지므로
       빼는 양도 따라 커져야 높이가 유지된다. */
    padding: calc(clamp(38px, 5.5vw, 88px) - 0.85em) 0;
}
.k-breadcrumb {
    margin: 0 0 clamp(18px, 2.4vw, 34px);
    font-size: 0.875rem; color: rgba(255, 255, 255, .75);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.k-breadcrumb a { color: inherit; }
.k-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.k-breadcrumb i { font-style: normal; opacity: .55; }
.k-eyebrow {
    margin: 0 0 12px;
    font-size: 0.8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--k-accent-soft);
}
.sub-hero h2 {
    margin: 0 0 18px;
    font-size: clamp(1.75rem, 3.4vw, 3.25rem); font-weight: 800;
    line-height: 1.14; letter-spacing: -.04em; word-break: keep-all;
}
.sub-hero-lead {
    margin: 0; font-size: clamp(0.9375rem, 1.15vw, 1.1875rem); line-height: 1.7;
    color: rgba(255, 255, 255, .86); word-break: keep-all;
    /* 2026-09-04 — 리드 길이에 따라 히어로 높이가 페이지마다 달랐다.
       회사소개 그룹에서 CEO 인사말(103자)·핵심역량(88자)만 화면이 좁아지면 2줄이 되어,
       같은 배경 사진이 그 두 페이지에서만 아래로 내려앉아 보였다.
       리드 자리를 항상 2줄로 잡아 높이를 고정한다. 3줄이 되는 폭에서는 다시 늘어나지만,
       그때는 한 단 구성(1024px 이하)이라 페이지끼리 비교될 일이 없다. */
    min-height: calc(1.7em * 2);
}
.sub-hero-panel {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: var(--k-radius-lg);
    padding: clamp(20px, 2.2vw, 32px);
    backdrop-filter: blur(10px);
    min-width: 0;
}
.sub-hero-panel .panel-label {
    margin: 0 0 12px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: .12em;
    /* 색은 아래 '서브 상단 비주얼' 블록에서 페이지 대표색 계열로 덮어쓴다 */
    color: #c7eaff;
}
.sub-hero-panel h3 {
    margin: 0 0 12px; font-size: clamp(1.125rem, 1.7vw, 1.6875rem);
    line-height: 1.3; font-weight: 700; word-break: keep-all;
}
.sub-hero-panel p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: rgba(255, 255, 255, .84); word-break: keep-all; }

/* ==========================================================================
   서브 탭 내비 — 헤더 바로 아래 sticky
   ========================================================================== */
.subnav-wrap {
    position: sticky; top: var(--k-header-h); z-index: 46;
    background: #fff;
    border-bottom: 1px solid var(--k-line);
    box-shadow: 0 8px 22px rgba(18, 64, 102, .06);
}
.subnav {
    width: min(100% - 40px, var(--k-inner));
    margin-inline: auto;
    display: flex; align-items: stretch;
    overflow-x: auto; scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
    display: flex; align-items: center;
    height: var(--k-subnav-h); padding: 0 clamp(14px, 1.6vw, 24px);
    font-size: clamp(0.875rem, 1vw, 1rem); color: #52677a; white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s, background .2s;
}
.subnav a:hover { color: var(--k-primary); background: var(--k-bg); }
.subnav a.is-active {
    color: var(--k-primary); font-weight: 800;
    border-color: var(--k-primary); background: var(--k-bg);
}

/* 본문 앵커가 sticky 메뉴에 가리지 않도록 */
:target { scroll-margin-top: calc(var(--k-header-h) + var(--k-subnav-h) - 2px); }

/* ==========================================================================
   본문 섹션
   ========================================================================== */
.k-section { padding: clamp(44px, 5.5vw, 84px) 0; }
.k-section--tint { background: var(--k-bg); }
.k-section-head { max-width: 850px; margin-bottom: clamp(22px, 2.6vw, 36px); }
.k-section-head h3 {
    margin: 0 0 14px;
    font-size: clamp(1.375rem, 2.4vw, 2.25rem); font-weight: 800;
    line-height: 1.25; letter-spacing: -.035em; color: var(--k-text);
    word-break: keep-all;
}
.k-section-head p { margin: 0; color: var(--k-muted); font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); line-height: 1.7; }

/* ==========================================================================
   하단 CTA
   ========================================================================== */
.k-cta {
    background: linear-gradient(110deg, var(--k-primary-dark), var(--k-primary));
    color: #fff;
    padding: clamp(34px, 4vw, 56px) 0;
}
.k-cta-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
}
.k-cta h3 {
    margin: 0 0 10px; font-size: clamp(1.25rem, 2.2vw, 2rem);
    font-weight: 800; line-height: 1.25; letter-spacing: -.035em; word-break: keep-all;
}
.k-cta p { margin: 0; color: #d8ecf8; max-width: 800px; word-break: keep-all; }
.k-cta-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 24px; border-radius: 999px;
    font-weight: 800; white-space: nowrap;
    background: #fff; color: var(--k-primary);
    transition: transform .2s, box-shadow .2s;
}
.k-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }

/* ==========================================================================
   푸터 — 링크 한 줄 + 회사정보 중앙 정렬 (고객사 최종 수정본 기준)
   ========================================================================== */
.site-footer {
    background: #f4f6f8;
    border-top: 1px solid #e2e8ee;
    color: #5f7890;
    padding: clamp(26px, 3vw, 40px) 20px;
    text-align: center;
}
.footer-link-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px 14px;
    padding-bottom: 18px; margin-bottom: 18px;
    border-bottom: 1px solid #e2e8ee;
}
.footer-link-row a {
    font-size: 0.9375rem; font-weight: 600; color: var(--k-text); white-space: nowrap;
}
.footer-link-row a:hover { color: var(--k-primary); }
.footer-link-row span { color: #c3ced8; }
.footer-company-info p { margin: 4px 0; font-size: 0.8125rem; line-height: 1.7; }
.footer-company-info .k-copy { margin-top: 12px; color: #8a9bab; }

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1100px) {
    :root { --k-header-h: 72px; --k-subnav-h: 52px; }
    .global-nav { display: none; }
    .hd-burger { display: block; }
    .header-inner { justify-content: space-between; }
    .hero-grid, .sub-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .sub-hero-panel { order: -1; }
}

@media (max-width: 720px) {
    :root { --k-header-h: 64px; --k-subnav-h: 50px; }
    .k-container, .subnav { width: min(100% - 32px, var(--k-inner)); }
    .header-util .site-search-toggle { padding: 7px 12px; }
    .header-util .k-lang { font-size: 0.75rem; gap: 4px; }

    /* 폰에서는 6개를 한 줄에 다 못 넣으므로 3열 두 줄 */
    .hero-quick > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-inner .hero-copy-center { max-width: none; }
    /* 좁은 화면에서는 한 줄이 화면을 넘으므로 nowrap 을 푼다 */
    .hero-inner .hero-headline { white-space: normal; word-break: keep-all; }

    .hero-links a { padding: 13px 16px; border-radius: 16px; }
    .hero-links b { font-size: 0.8125rem; }

    .k-cta-inner { flex-direction: column; align-items: flex-start; }
    .k-cta-btn { width: 100%; }

    .footer-link-row { gap: 8px 10px; }
    .footer-link-row a { font-size: 0.875rem; }
}

/* 아주 좁은 화면 — 로고 옆 회사명은 뺀다 */
@media (max-width: 400px) {
    .site-logo strong { display: none; }
}

/* ==========================================================================
   설치실적 PDF 저장 — 인쇄 스타일
   --------------------------------------------------------------------------
   버튼을 누르면 브라우저 인쇄창이 열리고, 대상에서 "PDF로 저장" 을 고르면
   PDF 파일이 만들어진다. 서버에 PDF 라이브러리를 얹지 않아도 되고,
   한글이 깨지지 않으며, 표 내용이 항상 화면과 같다.
   ========================================================================== */
.pdf-save {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 999px;
    border: 1px solid var(--k-primary);
    background: #fff; color: var(--k-primary);
    font-size: 0.9375rem; font-weight: 700; cursor: pointer;
    transition: background .2s, color .2s;
}
.pdf-save:hover { background: var(--k-primary); color: #fff; }
.pdf-save-note { margin-top: 10px; font-size: 0.8125rem; color: var(--k-muted); }
/* 절 제목 왼쪽 · 버튼 오른쪽 */
.pg-subhead {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px;
}
.pg-subhead > .pg-subtitle { margin: 0; }
@media (max-width: 560px) {
    .pg-subhead { align-items: stretch; }
    .pg-subhead .pdf-save { justify-content: center; }
}

/* ── 카드 높이 통일 ────────────────────────────────────────
   같은 줄의 카드는 글 길이가 달라도 같은 높이로 맞춘다.
   (그리드 항목을 늘리고, 카드 자체를 세로 플렉스로 만들어 버튼을 아래에 붙인다) */
/* 같은 줄 카드 높이 맞추기.
   .equip-list > li 는 여기서 빼야 한다 — .equip-item 이 grid(사진|글) 인데
   flex 로 덮이면 사진 칸이 제 폭을 잃고 제각각 커진다. */
.pg-cards > li,
.contact-cards > li,
.bizlist > li,
.stats-big > li { display: flex; }
.equip-list > li { align-items: stretch; }
.pg-cards > li { flex-direction: column; }
.pg-cards > li > p:last-child { margin-bottom: 0; }
.contact-card,
.equip-item,
.bizcard { width: 100%; }
.contact-card .contact-meta { margin-top: auto; }

/* ── 번호가 붙는 단계 카드 (01~) ─────────────────────────── */
.step-grid {
    list-style: none; margin: clamp(20px, 2.4vw, 32px) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
}
.step-grid > li {
    display: flex; flex-direction: column;
    padding: clamp(20px, 2vw, 28px);
    background: #fff; border: 1px solid var(--k-line); border-radius: var(--k-radius);
    border-top: 3px solid var(--k-primary);
}
.step-no {
    display: block; font-size: 0.8125rem; font-weight: 800; letter-spacing: .08em;
    color: var(--k-primary);
}
.step-grid strong {
    display: block; margin-top: 10px;
    font-size: clamp(1rem, 1.3vw, 1.1875rem); font-weight: 800; color: var(--k-text);
}
.step-grid p { margin: 8px 0 0; font-size: 0.875rem; line-height: 1.7; color: var(--k-muted); word-break: keep-all; }

/* ── 연혁 — 연도별 소제목 + 성장 방향 요약 카드 ────────────
   (고객사 시안 about/history 구성) */
.hist-head {
    margin: 0 0 12px;
    font-size: clamp(0.9375rem, 1.25vw, 1.125rem); font-weight: 800;
    letter-spacing: -.02em; color: var(--k-text); word-break: keep-all;
}
.hist-body { min-width: 0; }
.summary-card {
    padding: clamp(24px, 2.8vw, 40px);
    background: var(--k-bg); border: 1px solid var(--k-line);
    border-radius: var(--k-radius-lg);
}
.summary-card h4 {
    margin: 0 0 12px;
    font-size: clamp(1.0625rem, 1.5vw, 1.4375rem); font-weight: 800;
    letter-spacing: -.02em; color: var(--k-text); word-break: keep-all;
}
.summary-card p {
    margin: 0; font-size: clamp(0.875rem, 1.05vw, 1rem); line-height: 1.8;
    color: var(--k-muted); word-break: keep-all;
}

/* ── 핵심역량 — 고객사 시안 about/capability 구성 ──── */
.mini-label {
    display: inline-block; margin: 0 0 12px;
    font-size: clamp(0.6875rem, .95vw, 0.8125rem); font-weight: 800; letter-spacing: .12em;
    color: var(--k-primary);
}
.integrated-hero {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: clamp(22px, 3vw, 48px); align-items: center;
    padding: clamp(22px, 2.6vw, 40px);
    background: #fff; border: 1px solid var(--k-line); border-radius: var(--k-radius-lg);
}
.integrated-hero .pg-title { margin-top: 0; }
.integration-diagram {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: clamp(18px, 2vw, 28px);
    background: var(--k-bg); border-radius: var(--k-radius);
}
.domain-pill {
    display: block; width: 100%; max-width: 260px; padding: 12px 18px;
    border-radius: 999px; text-align: center;
    font-size: clamp(0.875rem, 1.1vw, 1rem); font-weight: 800; color: #fff;
}
.domain-pill--air   { background: #0b7f5a; }
.domain-pill--water { background: #0057a8; }
.plus-mark, .arrow-down { font-size: 1.125rem; font-weight: 800; line-height: 1; color: var(--k-muted); }
.result-pill {
    display: block; width: 100%; max-width: 260px; padding: 14px 18px;
    border-radius: 999px; text-align: center;
    background: var(--k-text); color: #fff;
    font-size: clamp(0.875rem, 1.15vw, 1.0625rem); font-weight: 800; letter-spacing: -.01em;
}
.capability-columns {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
}
.capability-box {
    padding: clamp(20px, 2.2vw, 30px);
    background: #fff; border: 1px solid var(--k-line); border-radius: var(--k-radius);
    border-top: 3px solid var(--k-primary);
}
.box-title { display: flex; align-items: baseline; gap: 12px; }
.box-title span { font-size: 0.8125rem; font-weight: 800; letter-spacing: .08em; color: var(--k-primary); }
.box-title h4 {
    margin: 0; font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); font-weight: 800;
    letter-spacing: -.02em; color: var(--k-text);
}
.capability-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.capability-list li {
    position: relative; padding-left: 18px;
    font-size: clamp(0.8125rem, 1.05vw, 0.9375rem); line-height: 1.65;
    color: var(--k-muted); word-break: keep-all;
}
.capability-list li::before {
    content: ''; position: absolute; left: 0; top: .62em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--k-primary);
}
.capability-list strong { color: var(--k-text); font-weight: 800; }
.capability-list .sub-text { color: var(--k-primary); font-weight: 700; white-space: nowrap; }
.one-stop-process {
    list-style: none; margin: clamp(18px, 2vw, 28px) 0 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.one-stop-process li {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px;
    background: #fff; border: 1px solid var(--k-line);
    font-size: clamp(0.8125rem, 1.05vw, 0.9375rem); font-weight: 700; color: var(--k-text);
    white-space: nowrap;
}
.one-stop-process li:not(:last-child)::after {
    content: '\203A'; margin-left: 2px; color: var(--k-muted); font-weight: 400;
}
/* 한 줄 3개 기준 (2026-08-12 요청). 4개짜리는 3 + 1 로 떨어진다. */
.step-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(22px, 2.6vw, 36px); }
@media (max-width: 1100px) { .step-grid, .step-grid--3, .step-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .integrated-hero { grid-template-columns: minmax(0, 1fr); }
    .step-grid, .step-grid--3, .step-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* 한 줄에 세 칸 — 01 02 03 / 04 05 06 으로 딱 떨어지게 */
.step-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
    .step-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* 두 칸짜리 큰 단계 카드 (보유 면허 / 수행 경험) */
.step-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.step-grid--2 .check-list { margin-top: 14px; }
/* 흐름을 태그처럼 늘어놓는 형태 (기초조사 → … → A/S) */
.pg-flow--tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-flow--tags > li {
    flex: 0 0 auto; min-width: 0;
    padding: 10px 18px; border-radius: 999px;
    background: #fff; border: 1px solid var(--k-line);
}
.pg-flow--tags > li::before,
.pg-flow--tags > li::after { content: none; }
.pg-flow--tags > li strong { font-size: 0.875rem; font-weight: 700; color: var(--k-text); }
.pg-flow--tags > li.is-key { background: var(--k-primary); border-color: var(--k-primary); }
.pg-flow--tags > li.is-key strong { color: #fff; }

/* ── 사명 KENTEC — KEN / TEC 두 줄로 딱 떨어지게 ─────────────
   한 줄에 세 글자씩. 좁은 화면에서도 3열을 유지해 단어가 갈라지지 않는다. */
.name-groups { display: grid; gap: clamp(18px, 2.2vw, 30px); margin-top: clamp(18px, 2vw, 28px); }
.name-group { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 1.8vw, 26px); align-items: start; }
.name-word {
    margin: 0; padding-top: 4px;
    font-size: clamp(1.625rem, 3.4vw, 2.875rem); font-weight: 800; line-height: 1;
    letter-spacing: -.02em; color: var(--k-primary);
}
.name-cards {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 16px);
}
.name-cards > li {
    display: flex; flex-direction: column;
    padding: clamp(14px, 1.5vw, 22px);
    background: #fff; border: 1px solid var(--k-line); border-radius: var(--k-radius);
    min-width: 0;
}
.name-initial {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin-bottom: 10px;
    border-radius: 10px;
    background: var(--k-bg); color: var(--k-primary);
    font-size: 0.9375rem; font-weight: 800; line-height: 1;
}
.name-cards strong {
    font-size: clamp(0.875rem, 1.15vw, 1.0625rem); font-weight: 800;
    letter-spacing: -.01em; color: var(--k-text); word-break: keep-all;
}
.name-ko { margin-top: 2px; font-size: 0.75rem; font-weight: 600; color: var(--k-primary); }
.name-cards p {
    margin: 10px 0 0; font-size: clamp(0.75rem, .95vw, 0.875rem); line-height: 1.6;
    color: var(--k-muted); word-break: keep-all;
}
@media (max-width: 700px) {
    .name-group { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .name-word { padding-top: 0; }
    .name-cards { gap: 8px; }
    .name-cards > li { padding: 12px 10px; }
    .name-initial { width: 26px; height: 26px; font-size: 0.8125rem; margin-bottom: 8px; }
}

/* 표·목록 위에 붙는 작은 소제목 */
.pg-caption-strong {
    margin: 0 0 12px;
    font-size: 0.875rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--k-primary);
}

/* ── 담당자 연락처 — 정보 목록 + 담당자 카드 ──────────────
   2026-08-10 고객사 시안 support/contact/index.html 구성. */
.info-list { list-style: none; margin: clamp(18px, 2vw, 28px) 0 0; padding: 0; display: grid; gap: 0; }
.info-list li {
    display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--k-line);
    font-size: clamp(0.875rem, 1.05vw, 1rem);
}
.info-list li:first-child { border-top: 1px solid var(--k-line); }
.info-list strong { font-weight: 700; color: var(--k-text); }
.info-list span { color: var(--k-muted); min-width: 0; word-break: keep-all; }
.info-list a { color: var(--k-primary); font-weight: 700; }

.contact-cards {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
.contact-card {
    display: flex; flex-direction: column;
    padding: clamp(20px, 2vw, 28px);
    background: #fff;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius);
    border-top: 3px solid var(--k-primary);
}
.contact-task {
    display: inline-block; align-self: flex-start;
    padding: 5px 11px; border-radius: 999px;
    background: var(--k-bg);
    font-size: 0.75rem; font-weight: 700; color: var(--k-primary);
    word-break: keep-all;
}
.contact-name {
    margin: 14px 0 0;
    font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 800;
    letter-spacing: -.02em; color: var(--k-text);
}
.contact-office { margin: 5px 0 0; font-size: 0.875rem; color: var(--k-muted); }
.contact-meta {
    margin: 16px 0 0; padding-top: 14px;
    border-top: 1px solid var(--k-line);
    display: grid; gap: 8px;
}
.contact-meta > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.contact-meta dt { font-size: 0.8125rem; font-weight: 600; color: var(--k-muted); }
.contact-meta dd { margin: 0; font-size: 0.875rem; color: var(--k-text); min-width: 0; word-break: break-all; }
.contact-meta dd a { color: var(--k-primary); font-weight: 600; }
@media (max-width: 560px) {
    .info-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* 태블릿 구간(1024px 미만)에서도 같은 규격을 유지한다.
   default.css 가 이 구간에서 .pg-media .pg-figure 를 max-width:420px 로 키우고 있었다. */
@media (max-width: 1023px) and (min-width: 768px) {
    .pg-media .pg-figure { max-width: var(--k-photo-w); }
}

/* 사진 나열(.pg-figrow)도 같은 규격 — 장수가 3장이든 4장이든 사진 크기는 같다 */
.pg-figrow, .pg-figrow--2 {
    grid-template-columns: repeat(auto-fill, minmax(0, var(--k-photo-w)));
    gap: clamp(14px, 1.6vw, 22px);
    justify-content: start;
}

/* 본문 2단 미디어(.pg-media)의 사진도 설비 소개 행과 같은 규격으로 */
.pg-media { grid-template-columns: minmax(0, var(--k-photo-w)) minmax(0, 1fr); align-items: start; }
.pg-media--rev { grid-template-columns: minmax(0, 1fr) minmax(0, var(--k-photo-w)); }

/* ── 설비 소개 행 — 사진(좌) · 제목/설명(우) ────────────────
   2026-08-12 '대기환경사업부분 UI 구성' 문서의 배치. */
.equip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 26px); }
.equip-item {
    display: grid;
    /* 설비 사진은 사이트 전체에서 같은 폭(320px)·같은 비율(4:3)로 통일한다 */
    grid-template-columns: minmax(0, var(--k-photo-w)) minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 34px);
    align-items: center;
    padding: clamp(16px, 1.8vw, 26px);
    background: #fff;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius);
    counter-increment: spec;
}
.equip-photo { position: relative; overflow: hidden; border-radius: 14px; background: var(--k-bg); }
.equip-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.equip-photo-ph {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    aspect-ratio: 4 / 3;
    color: var(--k-muted); font-size: 0.8125rem;
    background: repeating-linear-gradient(135deg, var(--k-bg), var(--k-bg) 12px, #fff 12px, #fff 24px);
}
.equip-photo-ph i { font-size: 1.625rem; opacity: .55; }
.equip-body { min-width: 0; }
.equip-title {
    margin: 0; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); font-weight: 800;
    letter-spacing: -.02em; color: var(--k-text); word-break: keep-all;
}
.equip-en {
    margin: 5px 0 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: .01em;
    color: var(--k-primary); word-break: keep-all;
}
.equip-desc {
    margin: 12px 0 0; font-size: clamp(0.875rem, 1.05vw, 1rem); line-height: 1.75;
    color: var(--k-muted); word-break: keep-all;
}
@media (max-width: 767px) {
    /* 좁은 화면에서는 사진이 칸 폭을 꽉 채운다 (사진끼리는 여전히 같은 크기).
       default.css 의 .pg-media .pg-figure { max-width: 420px } 도 함께 풀어 준다. */
    :root { --k-photo-w: 100%; }
    .pg-media, .pg-media--rev { grid-template-columns: minmax(0, 1fr); }
    .pg-media .pg-figure { max-width: none; }
    .pg-figrow, .pg-figrow--2 { grid-template-columns: minmax(0, 1fr); }
    /* 카드 좌우 여백을 없애 사진이 다른 사진과 같은 폭이 되게 한다.
       (여백이 있으면 카드 안 사진만 그만큼 좁아진다) */
    .equip-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 0 0 16px;
        background: none; border: 0; border-radius: 0;
        border-bottom: 1px solid var(--k-line);
    }
    .equip-list { gap: 18px; }
    .equip-list > li:last-child .equip-item { border-bottom: 0; padding-bottom: 0; }
    .equip-photo { border-radius: 12px; }
    .equip-desc { margin-top: 8px; }
}

/* ── 기술협력사 — 탈수기 개념 도식 ─────────────────────────
   고객사 시안 biz-water/partners 와 같은 구성 (헤드 · 여과판 7장 · 테일).
   사진 자산이 아니라 CSS 도식이라 그대로 옮겼다. */
.partner-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 2.6vw, 44px); align-items: center;
    margin-top: clamp(18px, 2vw, 26px);
}
.partner-visual {
    margin: 0; padding: clamp(22px, 2.4vw, 32px);
    background: var(--k-primary-deep);
    border-radius: var(--k-radius-lg);
}
.machine { height: 190px; display: flex; align-items: center; justify-content: center; }
.press-head, .press-tail { width: 48px; height: 130px; background: #fff; border-radius: 12px; }
.plates { display: flex; gap: 5px; margin: 0 14px; }
.plates i {
    display: block; width: 24px; height: 110px; border-radius: 7px;
    background: linear-gradient(180deg, #7bd3ff, #118bd0);
}
.machine-caption { text-align: center; margin-top: 14px; }
.machine-caption strong { display: block; font-size: clamp(1.1875rem, 1.8vw, 1.5rem); font-weight: 800; color: #fff; }
.machine-caption span { display: block; margin-top: 6px; font-size: 0.8125rem; color: #cfe4f3; word-break: keep-all; }
@media (max-width: 900px) {
    .partner-card { grid-template-columns: minmax(0, 1fr); }
    .machine { height: 150px; }
    .press-head, .press-tail { width: 38px; height: 104px; }
    .plates i { width: 18px; height: 88px; }
}

/* ── 온라인 상담 접수 양식 ─────────────────────────────────
   좌: 안내 패널 / 우: 폼 (고객사 시안 support/online 구성) */
/* default.css 의 .container-sub > * { margin: 0 auto } 로 가운데 정렬되는데,
   여기서 margin:0 을 주면 그 정렬이 깨져 폼이 왼쪽으로 붙는다. 좌우 auto 를 남긴다. */
.bw--online { margin: 0 auto; }
.online-layout {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
    gap: clamp(20px, 2.6vw, 40px); align-items: start;
}
.online-guide {
    padding: clamp(22px, 2.4vw, 32px);
    background: var(--k-bg); border: 1px solid var(--k-line); border-radius: var(--k-radius);
    position: sticky; top: calc(var(--k-header-h) + 16px);
}
.online-guide h3 {
    margin: 0 0 12px; font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); font-weight: 800;
    letter-spacing: -.02em; color: var(--k-text);
}
.online-guide p { margin: 0 0 14px; font-size: 0.875rem; line-height: 1.7; color: var(--k-muted); word-break: keep-all; }
.online-guide .pg-note { margin-top: 16px; }
.bw-row--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.bw--online .bw-row { display: block; margin-bottom: 16px; }
.bw--online .bw-row--2 { display: grid; }
.bw--online .bw-label { display: block; margin-bottom: 7px; font-size: 0.875rem; font-weight: 700; color: var(--k-text); }
.bw--online .bw-label em { font-style: normal; margin-left: 4px; font-size: 0.75rem; color: #d4453b; }
.bw--online .bw-input,
.bw--online .bw-select,
.bw--online .bw-textarea {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--k-line); border-radius: 10px;
    font-size: 0.9375rem; color: var(--k-text); background: #fff;
}
.bw--online .bw-textarea { min-height: 200px; line-height: 1.7; resize: vertical; }
.bw--online .bw-input:focus,
.bw--online .bw-select:focus,
.bw--online .bw-textarea:focus { outline: none; border-color: var(--k-primary); }
.bw--online .bw-help { margin-top: 8px; font-size: 0.8125rem; color: var(--k-muted); }
.privacy-box {
    margin-top: 18px; padding: 16px 18px;
    background: var(--k-bg); border: 1px solid var(--k-line); border-radius: 12px;
}
.privacy-box .check-label { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 700; color: var(--k-text); }
.privacy-box .check-label em { font-style: normal; color: #d4453b; font-size: 0.75rem; }
.privacy-box p { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.65; color: var(--k-muted); }
.privacy-box a { color: var(--k-primary); font-weight: 700; }
.bw--online .bw-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.bw--online .bw-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 130px; height: 48px; padding: 0 24px; border-radius: 999px;
    font-size: 0.9375rem; font-weight: 800; cursor: pointer; border: 1px solid var(--k-line); background: #fff; color: var(--k-text);
}
.bw--online .bw-btn--submit { background: var(--k-primary); border-color: var(--k-primary); color: #fff; }
.bw--online .bw-btn--submit:hover { background: var(--k-primary-dark); }
@media (max-width: 900px) {
    .online-layout { grid-template-columns: minmax(0, 1fr); }
    .online-guide { position: static; }
    .bw-row--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ── 설치실적 표 — 구분 필터 · 검색 · 더 보기 ──────────────── */
.pj-filter {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 16px;
}
.pj-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--k-line); background: #fff;
    font-size: 0.875rem; font-weight: 600; color: var(--k-muted);
    cursor: pointer; transition: all .18s var(--ease);
}
.pj-chip b { font-weight: 700; font-size: 0.75rem; color: var(--k-primary); }
.pj-chip:hover { border-color: var(--k-primary); color: var(--k-primary); }
.pj-chip.is-active {
    background: var(--k-primary); border-color: var(--k-primary); color: #fff;
}
.pj-chip.is-active b { color: rgba(255, 255, 255, .85); }
.pj-search { position: relative; flex: 1 1 260px; max-width: 380px; }
.pj-search i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--k-muted); font-size: 0.875rem; pointer-events: none;
}
.pj-search input {
    width: 100%; height: 42px; padding: 0 14px 0 36px;
    border: 1px solid var(--k-line); border-radius: 999px;
    background: #fff; font-size: 0.875rem; color: var(--k-text);
}
.pj-search input:focus { outline: none; border-color: var(--k-primary); }
.pj-count { margin: 0 0 10px; font-size: 0.8125rem; color: var(--k-muted); }
.pj-tag {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    background: var(--k-bg); border: 1px solid var(--k-line);
    font-size: 0.75rem; font-weight: 600; color: var(--k-primary); white-space: nowrap;
}
.pj-empty { margin: 24px 0; text-align: center; color: var(--k-muted); }
/* 관리자에게만 보이는 등록 줄 */
.pj-admin {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    margin: 0 0 16px;
    font-size: 0.875rem;
}
.pj-admin .btn-primary { padding: 9px 18px; border-radius: 999px; font-size: 0.875rem; }
.pj-admin > a:not(.btn-primary) { color: var(--k-muted); text-decoration: underline; }
.pj-admin > a:not(.btn-primary):hover { color: var(--k-primary); }
.pj-more-wrap { margin-top: 18px; text-align: center; }
.pj-more {
    padding: 11px 26px; border-radius: 999px;
    border: 1px solid var(--k-line); background: #fff;
    font-size: 0.875rem; font-weight: 700; color: var(--k-text);
    cursor: pointer; transition: all .18s var(--ease);
}
.pj-more:hover { border-color: var(--k-primary); color: var(--k-primary); }
@media (max-width: 640px) {
    .pj-search { max-width: none; }
    .pj-chip { padding: 7px 12px; font-size: 0.8125rem; }
}

.pj-print-note { display: none; }

@media print {
    /* PDF 는 '지금 보고 있는 조건' 그대로 나간다.
       - 접기(더 보기)로 감춰진 행은 다시 편다
       - 필터·검색에서 빠진 행(.pj-out)은 인쇄에서도 뺀다 */
    .pj-row[hidden]:not(.pj-out) { display: table-row !important; }
    .pj-row.pj-out { display: none !important; }
    .pj-filter, .pj-count, .pj-more-wrap, .pj-empty, .pj-admin { display: none !important; }
    /* 설치실적 PDF 는 '목록만' 나오면 된다 —
       도입 문단·지표·집계표·현장 사진 절은 빼고 표가 든 절만 남긴다.
       (.pj-print 는 설치실적 페이지에만 붙어 있어 다른 페이지 인쇄에는 영향이 없다) */
    body:has(.pj-print) .sub-content .pg-sec { display: none !important; }
    body:has(.pj-print) .sub-content .pg-sec.pj-print { display: block !important; }
    body:has(.pj-print) .pg-caption { display: none !important; }
    /* 2026-09-02 고객사 지적 — PDF 맨 위에 제목처럼 보이는 줄이 셋이었다.
         1) .print-head h1  "주식회사 켄텍 — 수질환경사업 설치실적"  ← 문서 제목
         2) .pj-print .pg-subtitle  "전체 설치실적"                  ← 1) 과 같은 말
         3) .pj-print-note  "수질환경사업 전체 · 26건"               ← 굵은 10pt 라 제목처럼 보였다
       2) 는 없애고 3) 은 머리말 아래 작은 글씨로 낮춰, 제목은 하나만 남긴다.
       머리말이 없는 보유 장비 PDF 는 절 제목이 유일한 제목이므로 건드리지 않는다. */
    body:has(.print-head) .pj-print .pg-subtitle { display: none !important; }
    body:has(.print-head) .print-head { margin-bottom: 2mm; }
    .table-scroll { overflow: visible !important; }
    .pj-print-note {
        display: block; margin: 0 0 6mm;
        font-size: 10pt; font-weight: 700; color: #000;
    }
    /* 문서 제목이 따로 있는 PDF 에서는 머리말 둘째 줄처럼 보이게 낮춘다 */
    body:has(.print-head) .pj-print-note {
        margin: 0 0 6mm; font-size: 9pt; font-weight: 400; color: #444;
    }
    @page { size: A4 landscape; margin: 12mm 10mm; }

    /* 화면 전용 요소는 인쇄에서 뺀다 */
    .site-header, .subnav-wrap, .site-footer, .sub-hero,
    .pg-cta, #top_btn, .hd-search, #allmenu,
    .pdf-save, .pdf-save-note, .pg-note { display: none !important; }

    html, body { background: #fff; }
    body { font-size: 10pt; }
    .sub-content .pg-sec {
        padding: 0 !important; margin: 0 0 10mm !important;
        background: none !important; box-shadow: none !important;
    }
    .k-container, .inner, .sub-layout { width: auto; max-width: none; padding: 0; }

    /* 인쇄 머리말 — 화면에는 안 보이고 인쇄물에만 나온다 */
    .print-head { display: block !important; margin-bottom: 6mm; }
    /* 2026-09-07 — 실적 PDF 에 머리말이 둘 찍혔다.
       브로슈어 머리말 .print-head--bro 는 .print-head 도 함께 달고 있어 바로 위
       규칙에 같이 걸리는데, 이를 막던 .print-head--bro { display:none } 은
       화면용(@media print 밖)이라 !important 를 못 이겼다.
       인쇄에서는 여기서 다시 감추고, 브로슈어일 때만 아래에서 되살린다. */
    .print-head--bro { display: none !important; }
    .print-head h1 { margin: 0 0 2mm; font-size: 16pt; font-weight: 800; color: #000; }
    .print-head p { margin: 0; font-size: 9pt; color: #444; }

    /* 표 — 페이지가 넘어가도 머리행이 반복되고 행이 잘리지 않게 */
    .table-scroll { overflow: visible !important; }
    .table-scroll .pg-table { min-width: 0 !important; }
    .pg-table { width: 100%; border: 1px solid #999; box-shadow: none; page-break-inside: auto; }
    .pg-table thead { display: table-header-group; }
    .pg-table tr { page-break-inside: avoid; }
    .pg-table th, .pg-table td {
        padding: 4px 6px; font-size: 9pt; border-bottom: 1px solid #ccc;
        background: none !important; color: #000 !important;
    }
    .pg-table thead th { background: #eee !important; font-weight: 700; }

    .pg-kpi, .pg-cards, .client-list { page-break-inside: avoid; }
    .pg-kpi li, .pg-cards li { box-shadow: none; border: 1px solid #ccc; }
    a { color: #000; text-decoration: none; }
}

/* 인쇄 머리말은 화면에서 감춘다 */
.print-head { display: none; }

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .hero-links a, .k-cta-btn { transition: none; }
    .main-hero-media video { display: none; }
}

/* ==========================================================================
   원페이지 구성 (수질환경사업) — 2026-08-24 고객사 회신 1번
   한 페이지 안에서 상단 탭·드롭다운으로 절을 오간다.
   ========================================================================== */

/* 앵커로 내려갈 때 sticky 헤더·탭에 제목이 가리지 않게 한다.
   :target 규칙은 주소창에 #가 있을 때만 걸리는데, 탭을 눌러 이동할 때도
   같은 여백이 필요하므로 절 자체에 준다. */
/* 2026-09-01 — 절 링크로 이동하면 고정 메뉴 바로 밑에 앞 절의 색 판 끝자락이
   얇게 남아 보였다(De-NOx 위 초록 띠). +16px 여유가 딱 그만큼의 틈을 만든 것이라
   여유를 없애고 2px 더 내려 앞 절이 메뉴 밑으로 완전히 들어가게 한다.
   (절 안쪽에 자체 여백이 있어 제목이 메뉴에 가려지지는 않는다) */
.pg-anchor { scroll-margin-top: calc(var(--k-header-h) + var(--k-subnav-h) - 2px); }

/* 탭을 누르면 뚝 끊기지 않고 흘러내리게 — 모션 최소화 설정은 존중한다 */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* 절 머리의 영문 라벨 (SERVICE PORTFOLIO · WHY CONSULTING? …) */
.pg-eyebrow { margin: 0 0 10px; }

/* 절 안의 작은 제목 — 절 제목(.pg-subtitle)보다 한 단 낮다 */
.pg-subtitle--sm {
    margin-top: clamp(28px, 3vw, 44px);
    font-size: clamp(1rem, 1.3vw, 1.25rem);
}

/* 서비스 4종은 PPT 처럼 한 줄에 넷.
   위쪽 .pg-cards:has(> li:first-child:nth-last-child(4)) 규칙이 4개짜리를 2열로 잡는다.
   그 규칙과 특이도를 같게 맞춰야(.sub-content + ul + 클래스 둘) 뒤에 온 이 규칙이 이긴다. */
.sub-content ul.pg-cards.pg-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .sub-content ul.pg-cards.pg-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .sub-content ul.pg-cards.pg-cards--4 { grid-template-columns: minmax(0, 1fr); } }

/* 서비스 카드 — 카드 전체가 해당 절로 내려가는 링크다 */
.svc-cards li { padding: 0; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.svc-cards li:hover { border-color: var(--k-primary); box-shadow: 0 14px 30px rgba(18, 64, 102, .12); }
.svc-cards li > a {
    display: flex; flex-direction: column; flex: 1;
    padding: clamp(20px, 2vw, 28px);
    color: inherit;
}
.svc-cards strong {
    margin-bottom: 4px;
    font-size: clamp(0.9375rem, 1.15vw, 1.125rem); font-weight: 800;
    letter-spacing: -.01em; color: var(--k-primary);
}
.svc-cards em {
    margin-bottom: 10px;
    font-style: normal; font-size: 0.875rem; font-weight: 700; color: var(--k-text);
}
.svc-cards p { margin: 0; font-size: 0.875rem; color: var(--k-muted); }

/* ── 실적 표 — 표시 기간 토글 (최근 3개년 / 전체) ─────────────
   2026-08-24 회신 2번. 화면은 최근 실적만, PDF 는 전체 기간이 나간다. */
.pj-years { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.pj-year {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px;
    border: 1px solid var(--k-line); background: #fff;
    font-size: 0.875rem; font-weight: 600; color: var(--k-muted);
    cursor: pointer; transition: all .18s var(--ease);
}
.pj-year b { font-weight: 700; font-size: 0.75rem; color: var(--k-primary); }
.pj-year:hover { border-color: var(--k-primary); color: var(--k-primary); }
.pj-year.is-active {
    background: var(--k-bg); border-color: var(--k-primary);
    color: var(--k-primary); font-weight: 800;
}
.pj-year.is-active b { color: var(--k-primary); }

/* 항목이 6개처럼 3의 배수일 때 줄이 고르게 떨어지도록 3열로 고정한다.
   기본 .check-list 는 auto-fit 이라 폭에 따라 4+2 로 어긋난다. */
.check-list.check-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .check-list.check-list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .check-list.check-list--3 { grid-template-columns: minmax(0, 1fr); } }

/* .pj-chip 은 display:inline-flex 라 hidden 속성만으로는 안 감춰진다.
   (기간 토글에 따라 건수 0 인 구분 칩을 JS 가 hidden 으로 내린다) */
.pj-chip[hidden] { display: none; }

/* ==========================================================================
   수질환경사업 PDF 보정 (2026-08-24 켄텍_수질환경사업_업데이트_V0.pdf 기준)
   ========================================================================== */

/* 절 안쪽 소제목 위에 붙는 영문 라벨 — 절 머리 라벨보다 한 톤 낮춘다 */
.pg-eyebrow--sub { margin-top: clamp(28px, 3vw, 44px); color: var(--k-muted); }
.pg-eyebrow--sub + .pg-subtitle--sm { margin-top: 0; }

/* 공정 구성·수행체계 — 번호(01 · STEP 01)와 영문명을 함께 얹은 흐름 카드 */
.pg-flow--num b, .pg-flow--step b {
    display: block; margin-bottom: 8px;
    font-size: 0.8125rem; font-weight: 800; letter-spacing: .08em;
    color: var(--k-primary);
}
.pg-flow--num em {
    display: block; margin: 2px 0 8px;
    font-style: normal; font-size: 0.75rem; font-weight: 700;
    letter-spacing: .02em; color: var(--k-primary);
}
.pg-flow--num span, .pg-flow--step span { font-size: 0.8125rem; line-height: 1.65; }
.pg-flow li.is-key b, .pg-flow li.is-key em { color: rgba(255, 255, 255, .82); }

/* O&M 지원 3단계 — BASIC / STANDARD / ADVANCED */
.om-tiers .om-level {
    display: block; margin-bottom: 10px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: .14em;
    color: var(--k-primary);
}
.om-tiers .om-items {
    margin: 14px 0 0; padding: 14px 0 0;
    border-top: 1px solid var(--k-line);
    display: grid; gap: 7px;
}
.om-tiers .om-items li {
    /* .pg-cards li 의 카드 모양(흰 배경·테두리·그림자·여백)이 여기까지 내려온다.
       중첩 목록은 글머리표만 쓰므로 되돌린다. */
    position: relative;
    padding: 0 0 0 14px; margin: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    font-size: 0.875rem; line-height: 1.55; color: var(--k-muted);
}
.om-tiers .om-items li::before {
    content: ''; position: absolute; left: 0; top: .62em;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--k-primary);
}
/* 가운데(STANDARD)를 한 단 도드라지게 — PDF 도 가운데 카드만 배경을 준다 */
.om-tiers li.is-key { background: var(--k-bg); border-color: var(--k-primary); }

/* K-DWOS — 항목 목록(좌) · 대시보드 화면(우) */
.kdwos-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(16px, 2vw, 28px); align-items: start;
}
.kdwos-row .check-list.check-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kdwos-row .pg-figure { margin: 0; }
@media (max-width: 900px) {
    .kdwos-row { grid-template-columns: minmax(0, 1fr); }
    .kdwos-row .check-list.check-list--2 { grid-template-columns: minmax(0, 1fr); }
}

/* 브로슈어 다운로드 버튼 */
.bro-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.bro-save { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.bro-note { font-size: 0.8125rem; color: var(--k-muted); }

/* 브로슈어 인쇄 머리말은 브로슈어로 뽑을 때만 나온다 */
.print-head--bro { display: none; }

@media print {
    /* 브로슈어 모드 — .bro-sec 로 표시한 절만 담는다 (PDF 5·6쪽에 해당).
       설치실적 PDF 모드(body:has(.pj-print))보다 뒤·더 무겁게 두어 이쪽이 이긴다. */
    body.doc-brochure .sub-content .pg-sec { display: none !important; }
    body.doc-brochure .sub-content .pg-sec.bro-sec { display: block !important; }
    body.doc-brochure .print-head { display: none !important; }
    body.doc-brochure .print-head--bro { display: block !important; }
    body.doc-brochure .pg-caption { display: block !important; }
    body.doc-brochure .bro-wrap { display: none !important; }
    /* 용지 방향은 위쪽 @page(A4 가로) 를 그대로 쓴다.
       @page 는 body 클래스로 갈라 쓸 수 없고, 브로슈어에도 실적표가 들어가
       가로가 아니면 표가 잘린다. */
}

/* ==========================================================================
   회사지명원(2026.08) 메시지 반영 — 2026-08-24
   ========================================================================== */

/* 메인 히어로 부제 — 큰 문구 아래 켄텍의 차별점 한 줄 */
.hero-sub {
    margin: 18px 0 0;
    font-size: clamp(0.9375rem, 1.25vw, 1.1875rem); font-weight: 500; line-height: 1.6;
    color: rgba(255, 255, 255, .88); word-break: keep-all;
}

/* 사업분야 아래 적용 산업 띠 */
.biz-industry {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px 14px; margin-top: clamp(20px, 2.2vw, 32px);
}
.biz-industry-label {
    font-size: 0.8125rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--k-muted);
}
.biz-industry .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* 켄텍의 강점 — 회사지명원(2026.08) 3쪽 */
.claim-list { margin-bottom: clamp(18px, 2vw, 28px); }
.strength-cards { align-items: stretch; }
.strength-cards > li { padding-bottom: clamp(18px, 1.8vw, 24px); }
.strength-cards .strength-en {
    display: block; margin: -6px 0 12px;
    font-style: normal; font-size: 0.8125rem; font-weight: 700;
    letter-spacing: .04em; color: var(--k-primary);
}
.strength-cards .capability-list { margin: 0; }
.strength-cards .capability-list li {
    /* .pg-cards li 의 카드 모양이 중첩 목록까지 내려온다 — 글머리표만 남긴다 */
    padding: 0 0 0 14px; margin: 0 0 8px;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    position: relative; font-size: 0.875rem; line-height: 1.6; color: var(--k-muted);
}
.strength-cards .capability-list li:last-child { margin-bottom: 0; }
.strength-cards .capability-list li::before {
    content: ''; position: absolute; left: 0; top: .62em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--k-primary);
}
.strength-cards .sub-text { display: block; margin-top: 3px; font-size: 0.8125rem; color: var(--k-muted); opacity: .85; }

/* 설비 라인업 압축형 — 원페이지 요약 절에서 쓴다 (사진 위 · 글 아래 3열).
   전폭 사진 행(.equip-item)으로 깔면 설비 6종만으로 화면 두 개가 넘어간다. */
.equip-list--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.equip-list--compact .equip-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px; align-items: start;
    padding: clamp(14px, 1.4vw, 18px);
}
.equip-list--compact .equip-photo img,
.equip-list--compact .equip-photo-ph { aspect-ratio: 16 / 10; }
.equip-list--compact .equip-title { font-size: 1rem; }
.equip-list--compact .equip-en { font-size: 0.75rem; }
.equip-list--compact .equip-desc {
    font-size: 0.84375rem; line-height: 1.6;
    /* 2026-09-01 고객사 요청 — 세 줄에서 자르던 것을 풀었다.
       원래는 카드 높이를 맞추려고 -webkit-line-clamp:3 을 걸고 "전문은 상세 페이지에"
       라고 안내했는데, 2026-08-24 에 설비 상세 페이지를 내리면서 전문을 볼 곳이 없어졌다.
       설명이 길면 카드 높이가 달라지지만 내용이 잘리는 것보다 낫다. */
}
@media (max-width: 1000px) { .equip-list--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .equip-list--compact { grid-template-columns: minmax(0, 1fr); } }

/* 인증서 번호 — 이름 옆 작은 회색 글씨 */
.cert-no { display: inline-block; margin-left: 4px; font-size: 0.75rem; color: var(--k-muted); opacity: .85; }
.cert-expired { color: #b4553f; font-weight: 700; }

/* '자세히 보기' 링크 — 요약 절 끝에서 상세 페이지로 넘긴다.
   접힌 절 제목을 이어 붙이면 "이런 경우에 도움이 됩니다 자세히 보기" 처럼 문장이 깨진다.
   절 이름 하나만 쓰고 화살표를 붙인다. */
.more-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; color: var(--k-primary); text-decoration: none;
}
.more-link i { transition: transform .18s var(--ease); }
.more-link:hover { text-decoration: underline; }
.more-link:hover i { transform: translateX(4px); }

/* ==========================================================================
   메인 밝은 톤 (2026-08-25 고객사 요청 — "어두컴컴하다")
   ==========================================================================
   메인은 배경 영상 위에 짙은 남색 판을 겹쳐 왔다. 영상이 밝은 화면으로 바뀌면서
   판이 영상을 눌러 페이지 전체가 어두워졌다.
   판을 흰 유리로 뒤집고 글자를 어두운 색으로 바꾼다. 히어로는 흰 글자를 써야 해서
   덮개를 완전히 걷지 않고 얇게만 남긴다.

   되돌리려면 이 블록만 지우면 위쪽 원래 규칙이 그대로 살아난다.
   ========================================================================== */

/* 바탕 — 영상·사진이 못 덮는 자리에 드러나는 색 */
body.is-index { background: #dde7f1; }
.main-bg-media { background: #dde7f1; }

/* 히어로 덮개 — 2026-08-25 고객사 요청으로 걷어냈다. 영상이 원래 색 그대로 나온다.
   덮개가 없으면 흰 글자가 하늘에 묻히므로, 글자 쪽 대비는 아래 두 가지가 대신 잡는다.
     · 헤드라인·부제  : 그림자를 진하게
     · 우측 메뉴      : 회색 판(.hero-quick > ul > li::before)
   다시 씌우려면 아래 background 주석을 풀면 된다. */
.main-hero::before {
    background: none;
    /* background: linear-gradient(180deg,
        rgba(6, 24, 44, .20)  0%, rgba(6, 24, 44, .12) 22%,
        rgba(6, 24, 44, .44) 50%, rgba(6, 24, 44, .58) 100%); */
}
/* 덮개가 없어진 만큼 글자 그림자로 대비를 잡는다 */
body.is-index .hero-inner .hero-headline {
    text-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 4px 28px rgba(0, 0, 0, .55);
}
body.is-index .hero-sub { text-shadow: 0 1px 4px rgba(0, 0, 0, .5), 0 2px 18px rgba(0, 0, 0, .6); }
body.is-index .hero-quick > ul > li > a em,
body.is-index .hero-quick > ul > li > a strong { text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
body.is-index .hero-quick > ul > li > a i { text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }

/* 본문 구역 — 짙은 남색 판을 '흰 유리' 로.
   불투명한 흰색으로 덮으면 밝긴 한데 뒤에 깔린 영상이 통째로 가려져
   스크롤을 내리는 순간 그냥 흰 페이지가 된다. 원래 이 화면의 핵심은
   '고정된 영상 위를 반투명 판이 지나간다' 는 것이라, 흰색을 얹되 비치게 둔다.
   --k-glass 로 한 번에 조절한다 (값이 클수록 불투명·밝다). */
/* 순백으로 얹으면 판이 하얗게 떠서 눈이 부시다. 아주 옅은 청회색을 섞어 톤을 낮춘다.
     --k-glass-rgb  판 색 (밝기 조절)
     --k-glass      진하기 (클수록 불투명, 작을수록 영상이 잘 비친다) */
body.is-index { --k-glass-rgb: 228, 236, 245; --k-glass: .78; }
body.is-index .sec-news  { background: rgba(var(--k-glass-rgb), var(--k-glass)); backdrop-filter: blur(7px); }
body.is-index .sec-stats { background: rgba(var(--k-glass-rgb), calc(var(--k-glass) - .16)); backdrop-filter: blur(4px); }
body.is-index .sec-biz   { background: rgba(var(--k-glass-rgb), calc(var(--k-glass) + .08)); backdrop-filter: blur(9px); }
body.is-index .sec-news,
body.is-index .sec-stats,
body.is-index .sec-biz { color: var(--k-text); }
body.is-index .sec-title { color: var(--k-text); }
body.is-index .sec-more { color: var(--k-primary); }
body.is-index .sec-more:hover { color: var(--k-primary-dark); }
body.is-index .sec-head-center .sec-lead { color: var(--k-muted); }

/* 뉴스 카드 */
body.is-index .card-title { color: var(--k-text); }
body.is-index .card:hover .card-title { color: var(--k-primary); }
body.is-index .card-excerpt,
body.is-index .card-date { color: var(--k-muted); }
body.is-index .news-arrow {
    background: rgba(252, 253, 255, .95); border-color: var(--k-line); color: var(--k-text);
}
body.is-index .news-arrow:hover { background: var(--k-bg); border-color: var(--k-primary); color: var(--k-primary); }
body.is-index .news-dot { background: rgba(18, 64, 102, .22); }
body.is-index .news-dot.is-active { background: var(--k-primary); }

/* 누적 실적 */
body.is-index .stats-strip {
    background: rgba(255, 255, 255, .70); border-color: var(--k-line);
}
body.is-index .stats-strip li { background: rgba(252, 253, 255, .95); }
body.is-index .stats-strip a:hover { background: var(--k-bg); }
body.is-index .stats-strip strong,
body.is-index .stats-strip strong span { color: var(--k-primary-dark); }
body.is-index .stats-strip em { color: var(--k-muted); }
body.is-index .stats-big a {
    background: rgba(252, 253, 255, .95); border-color: var(--k-line); box-shadow: var(--k-shadow);
}
body.is-index .stats-big a:hover {
    background: var(--k-bg); border-color: var(--k-primary);
}
body.is-index .stats-big strong,
body.is-index .stats-big strong span { color: var(--k-primary-dark); }
body.is-index .stats-big em { color: var(--k-muted); }

/* 사업분야 카드 */
body.is-index .bizcard {
    background: rgba(252, 253, 255, .96);
    border: 1px solid var(--k-line);
    border-top-width: 3px;
    box-shadow: var(--k-shadow);
}
body.is-index .bizcard-title { color: var(--k-text); }
body.is-index .bizcard-desc { color: var(--k-muted); }
body.is-index .bizcard-btn { color: var(--k-primary); border-color: var(--k-line); }
body.is-index .bizcard-btn:hover { background: var(--k-primary); border-color: var(--k-primary); color: #fff; }
body.is-index .biz-industry-label { color: var(--k-muted); }

/* 푸터 */
body.is-index .site-footer {
    background: rgba(var(--k-glass-rgb), calc(var(--k-glass) + .14));
    backdrop-filter: blur(9px);
    border-top-color: var(--k-line);
    color: var(--k-muted);
}
body.is-index .footer-link-row { border-bottom-color: var(--k-line); }
body.is-index .footer-link-row a { color: var(--k-text); }
body.is-index .footer-link-row a:hover { color: var(--k-primary); }
body.is-index .footer-link-row span { color: rgba(18, 64, 102, .28); }
body.is-index .footer-company-info .k-copy { color: var(--k-muted); }

/* ── 비전 & 미션 — 2026-08-25 고객사 시안(비전 & 미션.png) 배치 ──────
   경영이념 문구 → Mission 3 → Vision(목표) → Core Value 3 → 핵심가치 4.
   좌측에 라벨(Mission·Vision·Core Value)이 붙고 오른쪽에 카드가 온다. */
/* 배경은 원래 .pg-sec:nth-of-type(even) 규칙에 얹혀 옅은 판으로 나왔는데,
   2026-09-01 에 앞 절(제목+리드)을 서브 히어로로 옮기면서 순번이 홀수가 돼 흰색이 됐다.
   순번과 무관하게 판이 깔리도록 여기서 못 박는다. */
.vm-sec { --vm-eco: #2f9e5f; background: var(--k-bg); }

/* 맨 위 경영이념 문구 */
.vm-credo {
    margin: 0 0 clamp(30px, 4vw, 54px);
    text-align: center; word-break: keep-all;
    font-size: clamp(1.0625rem, 1.7vw, 1.625rem); font-weight: 700; line-height: 1.65;
    color: var(--k-text);
}
.sub-content .vm-credo { color: var(--k-text); }
.vm-credo b { color: var(--k-primary); }
.vm-credo b.is-eco { color: var(--vm-eco); }

.vm-map { display: grid; gap: clamp(16px, 2vw, 26px); }

/* 한 줄 = 좌측 라벨 + 우측 카드 */
.vm-row { display: grid; grid-template-columns: clamp(120px, 13vw, 176px) minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); align-items: center; }
.vm-side { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.vm-side .vm-svg { width: clamp(24px, 2.2vw, 32px); color: var(--k-primary); margin-bottom: 6px; }
.vm-side strong { font-size: clamp(1rem, 1.5vw, 1.4375rem); font-weight: 800; color: var(--k-primary); letter-spacing: -.01em; }
.vm-side strong.is-eco { color: var(--vm-eco); }
.vm-side span { font-size: 0.8125rem; color: var(--k-muted); }

/* 카드 3개 한 줄 */
.vm-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.2vw, 18px); }
.vm-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-cards > li {
    display: flex; align-items: flex-start; gap: 14px;
    padding: clamp(16px, 1.7vw, 24px);
    background: #fff; border: 1px solid var(--k-line);
    border-radius: var(--k-radius); box-shadow: var(--k-shadow);
    min-width: 0;
}
.vm-cards > li > div { min-width: 0; }
.vm-cards em {
    display: block; font-style: normal;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: .08em;
    color: var(--k-primary);
}
.vm-cards strong {
    display: block; margin: 2px 0 8px;
    font-size: clamp(0.9375rem, 1.35vw, 1.3125rem); font-weight: 800; letter-spacing: -.01em;
    color: var(--k-primary);
}
.vm-cards p { margin: 0; font-size: 0.84375rem; line-height: 1.55; color: var(--k-muted); word-break: keep-all; }
.vm-cards > li.is-eco em,
.vm-cards > li.is-eco strong { color: var(--vm-eco); }

/* 아이콘 — 원형 배경을 걷고 선 아이콘만 둔다. 원 안에 넣으면 스톡 배지처럼 보인다. */
.vm-ico { flex: 0 0 auto; display: grid; place-items: center; color: var(--k-primary); }
.vm-svg { width: clamp(30px, 2.8vw, 40px); height: auto; }
.vm-cards > li.is-eco .vm-ico { color: var(--vm-eco); }
.vm-ico.is-solid { color: var(--k-primary-dark); }

/* 카드 — 그림자를 걷고 얇은 테두리만. 위쪽에 대표색 선을 둬 위계를 만든다. */
.vm-cards > li {
    box-shadow: none;
    border-top: 2px solid var(--k-primary);
}
.vm-cards > li.is-eco { border-top-color: var(--vm-eco); }

/* 번호 — 카드 오른쪽 위에 옅게 깔아 장식으로 쓴다 */
.vm-cards > li { position: relative; overflow: hidden; }
.vm-cards em {
    position: absolute; right: 10px; top: 2px;
    font-size: clamp(2.125rem, 3.4vw, 3.125rem); font-weight: 800; letter-spacing: -.04em;
    color: var(--k-primary); opacity: .10; pointer-events: none;
}
.vm-cards > li.is-eco em { color: var(--vm-eco); }

/* 줄 사이 점선 — Mission → Vision → Core Value 가 이어진 체계로 읽히게 한다.
   ⚠ .vm-row 는 grid 라 ::before 를 그냥 넣으면 그리드 칸으로 들어가 배치가 깨진다.
      absolute 로 띄워 레이아웃에서 빼야 한다. */
.vm-row { position: relative; }
.vm-row + .vm-row::before {
    content: ''; position: absolute;
    left: 62%; top: calc(clamp(16px, 2vw, 26px) * -1);
    width: 0; height: clamp(16px, 2vw, 26px);
    border-left: 2px dotted var(--k-line);
    pointer-events: none;
}
@media (max-width: 1000px) { .vm-row + .vm-row::before { display: none; } }

/* Vision — 초록 테두리 알약 */
.vm-vision {
    position: relative;
    padding: clamp(34px, 4vw, 54px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 38px);
    border: 2px solid var(--vm-eco); border-radius: 999px;
    background: linear-gradient(180deg, #fbfdfb, #eef7f1);
    text-align: center;
}
.vm-goal {
    position: absolute; left: 50%; top: -15px; transform: translateX(-50%);
    padding: 6px 20px; border-radius: 999px;
    background: var(--vm-eco); color: #fff;
    font-size: 0.8125rem; font-weight: 800;
}
.sub-content .vm-vision p {
    margin: 0; color: var(--k-text); word-break: keep-all;
    font-size: clamp(0.9375rem, 1.4vw, 1.3125rem); line-height: 1.5;
}
.vm-vision p b {
    display: block; margin-top: 4px;
    font-size: clamp(1.375rem, 2.6vw, 2.5rem); font-weight: 800; letter-spacing: -.03em;
}

/* 맨 아래 핵심가치 4 */
.vm-values {
    list-style: none; margin: clamp(6px, 1vw, 12px) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 18px);
}
.vm-values li {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: clamp(13px, 1.4vw, 18px);
    background: #fff; border: 1px solid var(--k-line);
    border-radius: var(--k-radius); box-shadow: var(--k-shadow);
}
.vm-values .vm-svg { width: 20px; color: var(--k-primary); flex: 0 0 auto; }
.vm-values li { box-shadow: none; }
.vm-values strong { font-size: clamp(0.8125rem, 1.05vw, 1rem); font-weight: 700; color: var(--k-text); }

@media (max-width: 1000px) {
    .vm-row { grid-template-columns: minmax(0, 1fr); }
    .vm-side { flex-direction: row; align-items: center; gap: 10px; }
    .vm-side i { margin-bottom: 0; }
    .vm-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vm-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vm-vision { border-radius: var(--k-radius-lg); }
}
@media (max-width: 620px) {
    .vm-cards--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ── 서브 상단 비주얼 덮개 제거 (2026-08-25 고객사 요청) ──────────
   메인 히어로와 같이 배경 사진·영상이 원래 색으로 보이게 한다.
   예전 덮개는 .90/.74 로 아주 진해서 사진이 거의 단색 판처럼 보였다.
   덮개가 없어진 만큼 흰 글자 대비는 아래 세 가지가 대신 잡는다.
     · 제목·리드·브레드크럼 : 그림자
     · 우측 패널            : 유리판을 조금 더 진하게
     · 사진이 없을 때       : .sub-hero 자체 배경색이 그대로 보인다 (기존과 동일)
   다시 씌우려면 이 블록의 .sub-hero::before 규칙만 지우면 된다. */
/* 덮개 없음 — 사진·영상이 원래 색으로 보인다 (2026-08-25 고객사 요청).
   페이지 대표색은 아래 .sub-hero-panel 이 맡는다. */
.sub-hero::before { background: none; }

/* 덮개가 없으니 반투명 흰색은 사진에 묻힌다 — 불투명하게 올리고 그림자를 준다 */
.sub-hero h2 { text-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 4px 26px rgba(0, 0, 0, .55); }
.sub-hero-lead {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6), 0 2px 16px rgba(0, 0, 0, .55);
}
.k-breadcrumb {
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .65), 0 2px 12px rgba(0, 0, 0, .5);
}
.k-breadcrumb i { opacity: .8; }
.k-eyebrow { text-shadow: 0 1px 4px rgba(0, 0, 0, .6), 0 2px 14px rgba(0, 0, 0, .5); }

/* 우측 패널 — 페이지 대표색을 입힌다 (2026-08-25 고객사 요청).
   색은 body.accent-* 가 갈아끼우는 --k-primary-rgb / --k-primary-deep-rgb 를 그대로 쓴다.
     대기 초록 · 수질 파랑 · 화공기기 브라운 · 생산연구 보라 · 고객지원 청록 · 회사소개 파랑
   사진 위에 바로 얹히므로 흰 글자가 묻히지 않을 만큼은 진해야 한다. */
.sub-hero-panel {
    /* 2026-08-25 — 판이 뜬다는 지적으로 더 투명하게. 대신 흐림을 키워
       뒤 사진이 뭉개진 색면으로 깔리게 해서 글자가 읽히게 한다. */
    background: linear-gradient(135deg,
        rgba(var(--k-primary-rgb),      .34),
        rgba(var(--k-primary-deep-rgb), .48));
    border-color: rgba(255, 255, 255, .34);
    backdrop-filter: blur(20px) saturate(140%);
}
/* 판이 투명해진 만큼 글자는 또렷하게 — 라벨은 페이지 대표색 계열의 밝은 톤을 쓴다 */
.sub-hero-panel .panel-label { color: var(--k-accent-soft); }
.sub-hero-panel h3 { color: #fff; }
.sub-hero-panel p { color: rgba(255, 255, 255, .94); }
.sub-hero-panel h3,
.sub-hero-panel p,
.sub-hero-panel .panel-label { text-shadow: 0 1px 5px rgba(0, 0, 0, .45); }
.sub-hero-panel h3,
.sub-hero-panel p,
.sub-hero-panel .panel-label { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }

/* 회사 현황의 본사 사진 — 기본 사진칸(320px)보다 넓게.
   원본이 323x345 로 작아 크게 늘리면 흐려진다. 420px 선에서 멈춘다. */
/* 사진 칸 폭 — 오른쪽 회사 현황표와 세로 길이가 비슷하게 떨어지도록 맞춘 값이다.
   표 항목이 늘거나 줄면 이 값도 같이 손봐야 한다. */
.pg-media.about-hq { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: start; }
.pg-media.about-hq .pg-figure { max-width: 400px; }
.pg-media.about-hq .pg-figure img { width: 100%; height: auto; }
@media (max-width: 1100px) { .pg-media.about-hq { grid-template-columns: minmax(0, 1fr); } }

/* 항목표(사명·대표자·매출액 …) — 좁은 칸에서도 가로 스크롤이 안 생기게.
   제목 열 폭을 묶고 값은 줄바꿈시킨다. */
/* ⚠ table-layout:fixed 를 주면 셀의 width 가 통째로 무시되고 칸이 5:5 로 갈린다
   (fixed 는 <colgroup><col> 만 본다). auto 로 둬야 아래 th 폭이 먹는다. */
.pg-table--info { table-layout: auto; width: 100%; }
/* 2026-08-25 — 제목 열이 넓어 '사명' 과 값 사이가 벌어져 보였다. 좁히고 안쪽 여백도 줄인다. */
.pg-table--info th { width: 130px; padding-right: 8px; }
@media (max-width: 900px) { .pg-table--info th { width: 104px; } }
@media (max-width: 520px) { .pg-table--info th { width: 88px; padding-left: 14px; } }
.pg-table--info td { padding-left: 14px; word-break: keep-all; overflow-wrap: anywhere; }

/* 본문 안 외부 링크 — 링크인 줄 알아보게 굵게 + 밑줄.
   (본문 글자색과 같아 링크인지 모르겠다는 지적이 있었다) */
.sub-content a.ext-link {
    font-weight: 700; color: var(--k-primary);
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
.sub-content a.ext-link:hover { color: var(--k-primary-dark); }
.sub-content a.ext-link .fa-external-link {
    margin-left: 5px; font-size: .82em; vertical-align: baseline;
    text-decoration: none; opacity: .8;
}

/* 회사 현황 왼쪽 사진 묶음 — 사옥(큰 사진) + 공장 전경·공장동(작은 사진 둘) */
/* 2026-08-31 — 왼쪽 사진 칸의 아래끝을 오른쪽 표의 아래끝과 맞춘다.
   격자 줄 높이는 더 긴 쪽(표)이 정하고, 왼쪽은 stretch 로 그 높이를 채운다.
   남는 높이는 위쪽 사옥 사진이 minmax(0,1fr) 로 흡수하므로
   작은 사진 두 장이 표 밑으로 삐져나오지 않는다. */
.pg-media.about-hq { align-items: stretch; }
.hq-shots { display: flex; flex-direction: column; gap: 10px; }
.hq-shots .pg-figure { margin: 0; }
.hq-shots-sub { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* 사옥 사진 — 세로 원본(375x500)이라 가로칸에 넣으면 위아래가 잘린다.
   object-position:top 으로 옥상을 살리고 앞쪽 아스팔트를 잘라낸다.
   ⚠ 아래 두 줄은 2290 줄 '.pg-media.about-hq .pg-figure img { height:auto }' 보다
     특이도가 낮으면 통째로 무시된다. 선택자 깊이를 맞춰 둘 것. */
.pg-media.about-hq .hq-shots > .pg-figure { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* height:0 + flex-basis:0 이라야 사진의 원본 높이가 칸 높이를 밀어올리지 않는다.
   (height:100% 로 두면 원본 533px 이 그대로 최소높이가 돼 표보다 길어진다) */
.pg-media.about-hq .hq-shots > .pg-figure img {
    flex: 1 1 0; height: 0; min-height: 190px; width: 100%;
    aspect-ratio: auto; object-fit: cover; object-position: top;
}
.hq-shots-sub .pg-figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.hq-shots-sub figcaption { font-size: 0.75rem; }
/* 한 칸으로 접히면 높이를 맞출 표가 옆에 없으니 원래 비율로 돌린다 */
@media (max-width: 1100px) {
    .pg-media.about-hq .hq-shots > .pg-figure { display: block; }
    .pg-media.about-hq .hq-shots > .pg-figure img { flex: none; height: auto; aspect-ratio: 4 / 3.4; }
}
    .pg-media.about-hq .hq-shots > .pg-figure img { height: auto; aspect-ratio: 4 / 3.4; }
}

/* ── 온라인 상담 폼 — 자동등록방지·첨부 정리 (2026-08-26) ───────────
   캡차는 그누보드 플러그인이 <fieldset>+<legend> 로 자체 마크업을 뿌린다.
   그대로 두면 테두리 상자와 범례가 사이트 톤과 따로 논다. 폼 다른 칸과 같게 맞춘다. */
.bw-captcha #captcha,
.bw-captcha .captcha_box {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin: 0; padding: 0; border: 0;
}
.bw-captcha fieldset {
    margin: 0; padding: 0; border: 0;
}
.bw-captcha legend { display: none; }
.bw-captcha #captcha_img {
    height: 44px; border: 1px solid var(--k-line); border-radius: 8px; background: #fff;
}
.bw-captcha #captcha_key {
    height: 44px; width: 120px; padding: 0 12px;
    border: 1px solid var(--k-line); border-radius: 8px;
    font-size: 0.9375rem; letter-spacing: .1em; text-align: center;
}
.bw-captcha #captcha_key:focus { border-color: var(--k-primary); outline: none; }
.bw-captcha #captcha_reload,
.bw-captcha #captcha_mp3 {
    height: 44px; padding: 0 14px;
    border: 1px solid var(--k-line); border-radius: 8px; background: #fff;
    font-size: 0.8125rem; color: var(--k-muted); cursor: pointer;
}
.bw-captcha #captcha_reload:hover,
.bw-captcha #captcha_mp3:hover { border-color: var(--k-primary); color: var(--k-primary); }
.bw-captcha #captcha_info,
.bw-captcha .captcha_info {
    flex-basis: 100%; margin: 2px 0 0;
    font-size: 0.8125rem; color: var(--k-muted);
}

/* 첨부 두 줄 — 줄 간격을 띄우고 파일명이 버튼에 붙지 않게 */
.bw-file + .bw-file { margin-top: 8px; }
.bw-file { display: flex; align-items: center; gap: 10px; }
.bw-file-name { font-size: 0.8125rem; color: var(--k-muted); }

/* ── 구역 머리 — 좁은 화면에서 줄바꿈 (2026-08-28) ──────────────
   .sec-head 는 제목·리드문구·화살표를 한 줄에 놓는다(space-between).
   모바일에서는 세 개가 한 줄에 끼어 리드문구가 서너 글자씩 끊긴다.
   제목과 화살표를 한 줄에 두고, 리드문구는 그 아래 전체 폭으로 내린다. */
@media (max-width: 720px) {
    .sec-head { flex-wrap: wrap; align-items: center; gap: 12px 16px; }
    .sec-head .sec-title { flex: 1 1 auto; }
    .sec-head .sec-head-right { flex: 0 0 auto; margin-left: auto; }
    .sec-head .sec-lead {
        flex: 1 1 100%; order: 3;
        margin: 0; text-align: left;
    }
    /* 가운데 정렬 머리(누적 실적)는 원래 세로 배치라 건드리지 않는다 */
    .sec-head-center .sec-lead { order: 0; text-align: center; }
}

/* 푸터 웹메일 — 외부 링크 표시를 글자에 붙인다 */
.footer-link-row a .fa-external-link { margin-left: 5px; font-size: .8em; opacity: .7; }

/* ── 서브 상단 우측 패널 — 2026-08-31 고객사 요청으로 우선 숨김 ──────
   되살리려면 이 블록만 지우면 된다. 마크업(head.php)과 문구($kentec_panel,
   page/_hero-copy.php)는 그대로 두었다. */
.sub-hero-panel { display: none; }
.sub-hero-grid { grid-template-columns: minmax(0, 1fr); }

/* ── 설치실적 표 — '적용' 칸 한 줄로 (2026-09-01) ────────────────
   칸 폭이 8열로 균등하게 갈려 138px 밖에 안 되니 "Process vent gas" 가
   세 줄로 접혔다. 이 칸만 줄바꿈을 막고, 표는 내용에 맞춰 폭을 나누게 한다.
   좁은 화면에서는 감싸고 있는 .table-scroll 이 가로 스크롤을 준다. */
.pj-table { table-layout: auto; }
/* 2026-09-01 — '적용' 칸만이 아니라 모든 칸을 한 줄로.
   행마다 높이가 1~3줄로 달라 눈이 흔들리고 읽기가 어려웠다.
   폭은 내용에 맞춰 나뉘고, 1280px 이상에서는 본문 폭 안에 그대로 들어간다.
   그보다 좁으면 감싸고 있는 .table-scroll 이 가로 스크롤을 준다. */
.pj-table th, .pj-table td { white-space: nowrap; }
/* 여덟 칸이라 좌우 여백이 20px 씩이면 표가 금방 넘친다. 조금 줄인다. */
.pj-table th, .pj-table td { padding-left: 14px; padding-right: 14px; }
/* 숫자 폭을 고정해 용량·연도가 자릿수별로 세로로 맞아떨어지게 한다 */
.pj-table td { font-variant-numeric: tabular-nums; }
/* 행 구분이 눈에 들어오게 — 한 줄이 되면 행 높이가 같아 줄무늬가 잘 먹는다 */
.pj-table tbody tr:hover { background: var(--k-bg); }

/* ==========================================================================
   메인 첫 화면 — 2026-09-01 고객사 요청 (에코프로 구성 참고)
     · 헤더(로고)를 영상 위에 얹어 영상이 화면 최상단부터 꽉 차게 한다
     · 문구는 화면 왼쪽 끝으로
     · 오른쪽 바로가기는 화면의 정확히 절반을 차지하게
     · 회색 판은 걷어내고, 마우스 올린 칸만 진해지게
     · 칸을 나누던 흰 세로선 삭제
   ========================================================================== */

/* ── 헤더를 영상 위로 ──────────────────────────────────────────
   배경 영상(.main-bg-media)은 이미 화면 전체에 position:fixed 로 깔려 있다.
   헤더가 흰색으로 그 위를 덮고 있었을 뿐이라, 배경만 걷으면 영상이 그대로 비친다.
   레이아웃은 건드리지 않는다 (sticky 그대로 — 자리를 차지해야 아래 구역이 안 가린다).
   ⚠ 히어로 덮개(.main-hero::before)는 2026-08-25 요청으로 걷어낸 상태라
     헤더에 단색을 깔면 y=84 지점에 가로 경계선이 그어진다. 위에서 아래로
     투명해지는 그라데이션이라야 경계가 안 생긴다. 로고가 있는 위쪽만 덮는다. */
body.is-index .site-header {
    background: linear-gradient(180deg, rgba(6, 24, 44, .42) 0%, rgba(6, 24, 44, .16) 62%, rgba(6, 24, 44, 0) 100%);
    /* 아래 경계선은 색만 투명하게 두면 그 1px 줄에 그라데이션이 다시 처음부터 칠해져
       가로줄이 그어진다. 선 자체를 없애고 padding 으로 높이(85px)를 맞춘다. */
    border-bottom-width: 0; padding-bottom: 1px;
    transition: background .3s var(--ease), border-color .3s var(--ease);
}
body.is-index .site-logo strong { color: #fff; }
body.is-index .header-util .site-search-toggle {
    background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .45); color: #fff;
}
body.is-index .header-util .site-search-toggle:hover {
    background: rgba(255, 255, 255, .22); border-color: #fff; color: #fff;
}
body.is-index .k-lang a { color: rgba(255, 255, 255, .78); }
body.is-index .k-lang a.is-active { color: #fff; }
body.is-index .k-lang span { color: rgba(255, 255, 255, .45); }
body.is-index .hd-burger span { background: #fff; }

/* 로고 두 장 중 한 장만 보인다 — 서브페이지·히어로 통과 후에는 원래 남색 로고.
   ⚠ 위의 '.site-logo img { display:block }' 보다 특이도가 낮으면 안 먹는다.
     그래서 .site-logo 를 앞에 붙여 둔다(그냥 .site-logo-light 로는 두 장 다 보인다). */
.site-logo .site-logo-light { display: none; }
body.is-index .site-logo .site-logo-dark  { display: none; }
body.is-index .site-logo .site-logo-light { display: block; }

/* 히어로를 지나면 원래 흰 헤더로 되돌린다 (theme.js 가 .is-past-hero 를 붙인다) */
body.is-index.is-past-hero .site-header {
    background: #fff;
    border-bottom-width: 1px; border-bottom-color: rgba(0, 0, 0, .07); padding-bottom: 0;
}
body.is-index.is-past-hero .site-logo strong { color: var(--k-text); }
body.is-index.is-past-hero .site-logo .site-logo-dark  { display: block; }
body.is-index.is-past-hero .site-logo .site-logo-light { display: none; }
body.is-index.is-past-hero .header-util .site-search-toggle {
    background: #fff; border-color: var(--k-line); color: #52677a;
}
body.is-index.is-past-hero .k-lang a { color: #52677a; }
body.is-index.is-past-hero .k-lang a.is-active { color: var(--k-primary); }
body.is-index.is-past-hero .k-lang span { color: var(--k-line); }
body.is-index.is-past-hero .hd-burger span { background: var(--k-text); }

/* ── 문구는 왼쪽 끝 · 바로가기는 오른쪽 절반 ──────────────────
   예전에는 hero-inner 를 1400px 로 묶어 가운데 정렬했다. 그래서 넓은 화면일수록
   문구가 화면 가운데로 몰리고, 바로가기도 오른쪽 끝에 닿지 않았다.
   폭 제한을 풀고 오른쪽 칸을 50vw 로 못 박는다. */
.hero-inner {
    width: 100%; margin-inline: 0;
    grid-template-columns: minmax(0, 1fr) 50vw;
    gap: clamp(16px, 2vw, 36px);
}
.hero-inner .hero-copy-center { padding-left: clamp(24px, 4.5vw, 90px); }

/* ── 바로가기 — 기본 판 없이, 마우스 올린 칸만 진해진다 ────────
   회색 판(--k-menu)을 상시로 깔면 그 판의 왼쪽 끝이 화면 한가운데에
   세로선처럼 보였다. 기본값을 0 으로 두고 hover 에서만 색을 준다. */
.hero-quick > ul { --k-menu: 0; }
/* 회색 판이 대비를 잡아 주던 자리라, 판을 없앤 만큼 글자 그림자로 대신한다
   (헤드라인이 쓰는 방식과 같다 — 2011 줄 '히어로 덮개' 주석 참고) */
.hero-quick > ul > li > a i,
.hero-quick > ul > li > a em,
.hero-quick > ul > li > a strong {
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5), 0 2px 16px rgba(0, 0, 0, .45);
}
.hero-quick-plus { box-shadow: 0 2px 10px rgba(0, 0, 0, .28); }
.hero-quick > ul > li:hover::before,
.hero-quick > ul > li:focus-within::before { background: rgba(var(--k-menu-rgb), .46); }
/* 칸 사이 흰 세로선 삭제 — 판이 없으니 나눌 것도 없고, 영상 위에 잔선으로만 보였다 */
.hero-quick > ul > li + li::after { content: none; }

@media (max-width: 1023px) {
    /* 좁은 화면에서는 문구 아래로 바로가기가 내려간다 — 절반 고정은 의미가 없다.
       폭 제한과 좌우 여백도 원래대로 되돌린다 (안 그러면 글자가 화면 끝에 붙는다). */
    .hero-inner {
        grid-template-columns: minmax(0, 1fr);
        width: min(100% - 40px, 1400px); margin-inline: auto;
    }
    .hero-inner .hero-copy-center { padding-left: 0; }
}

/* ==========================================================================
   글자 크기 · 넓은 화면 비율 — 2026-09-01 고객사 요청
     "글씨가 너무 작다 / 넓은 모니터에서 화면이 헐렁해 보인다"

   CSS 안의 font-size 를 전부 rem 으로 바꿔 뒀으므로(2026-09-01 일괄 변환)
   여기 html 의 기준 크기 하나만 바꾸면 사이트 글자가 통째로 커진다.
   본문 폭도 같은 비율로 함께 넓혀야 글자만 커지고 여백이 좁아지는 일이 없다.
     16px → 1180px  (기준)
     17px → 1254px  18px → 1328px  19px → 1402px
   ⚠ 앞으로 CSS 를 더할 때 font-size 는 px 이 아니라 rem 으로 쓸 것.
      (px 로 쓰면 그 글자만 커지지 않고 남는다)
   ========================================================================== */
/* 기준 크기는 화면 폭이 정하고(--k-fs-base), 방문자가 고른 배율(--k-fs-scale)을 곱한다.
   배율은 헤더의 '글자 크기' 버튼이 html 인라인 스타일로 넣는다 (theme.js · 기본 1). */
:root { --k-fs-base: 16px; --k-fs-scale: 1; }
html { font-size: calc(var(--k-fs-base) * var(--k-fs-scale)); }

@media (min-width: 1024px) { :root { --k-fs-base: 17px; --k-inner: 1254px; --inner: 1254px; } }
@media (min-width: 1440px) { :root { --k-fs-base: 18px; --k-inner: 1328px; --inner: 1328px; } }
@media (min-width: 1800px) { :root { --k-fs-base: 19px; --k-inner: 1402px; --inner: 1402px; } }

/* ── 글자 크기 조절 버튼 (헤더) ────────────────────────────────
   가－ / 가 / 가＋ 세 개. 가운데를 누르면 원래대로 돌아온다.
   고른 값은 브라우저에 저장돼 다음 방문에도 유지된다. */
.k-fontsize {
    display: none;               /* 좁은 화면에서는 감춘다 (아래 미디어쿼리에서 켠다) */
    align-items: center; gap: 4px;
    padding-left: 10px; margin-left: 2px;
    border-left: 1px solid var(--k-line);
}
@media (min-width: 1024px) { .k-fontsize { display: flex; } }
.k-fontsize button {
    display: inline-flex; align-items: center; justify-content: center; gap: 1px;
    width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--k-line); border-radius: 50%;
    background: #fff; color: #52677a;
    font-size: 0.8125rem; font-weight: 700; line-height: 1;
    cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.k-fontsize button i { font-style: normal; font-size: 0.625rem; font-weight: 700; }
.k-fontsize button:hover:not(:disabled) { border-color: var(--k-primary); color: var(--k-primary); background: var(--k-bg); }
.k-fontsize button:disabled { opacity: .35; cursor: default; }

/* 메인 첫 화면 — 헤더가 영상 위에 얹히는 동안은 흰 테두리로 */
body.is-index .k-fontsize { border-left-color: rgba(255, 255, 255, .35); }
body.is-index .k-fontsize button {
    background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .45); color: #fff;
}
body.is-index .k-fontsize button:hover:not(:disabled) {
    background: rgba(255, 255, 255, .22); border-color: #fff; color: #fff;
}
body.is-index.is-past-hero .k-fontsize { border-left-color: var(--k-line); }
body.is-index.is-past-hero .k-fontsize button {
    background: #fff; border-color: var(--k-line); color: #52677a;
}

/* ── 아주 좁은 화면(320px 대) 마무리 — 2026-09-01 ─────────────────
   갤럭시 폴드 접힌 화면(280) · 아이폰 SE 1세대(320) 같은 폭에서
   가로 스크롤이 생기던 두 곳을 잡는다. */

/* 핵심역량 — auto-fit minmax(320px) 라 화면이 320px 이하로 좁아지면
   칸이 320px 을 유지해 좌우 여백만큼 넘쳤다. 최소폭을 화면에 맡긴다. */
@media (max-width: 400px) {
    .capability-columns { grid-template-columns: minmax(0, 1fr); }
}
/* 지표 카드 — 2열이면 한 칸이 172px 씩이라 320px 화면에서 넘친다. 한 줄에 하나로. */
@media (max-width: 400px) {
    .pg-kpi { grid-template-columns: minmax(0, 1fr); }
    .pg-kpi li:last-child:nth-child(odd) { grid-column: auto; }
}

/* ── hidden 이 먹지 않던 곳 정리 — 2026-09-01 ──────────────────────
   브라우저 기본 규칙 [hidden]{display:none} 은 특이도가 0 이라
   '.slider-nav { display:flex }' 같은 클래스 규칙에 진다.
   그래서 JS 가 hidden 을 걸어도 화살표·점이 그대로 보였다.
   (사업분야 카드가 6개 → 4개로 줄어 슬라이드가 필요 없어지면서 드러났다) */
.slider-nav[hidden],
.news-nav[hidden],
.news-dots[hidden],
.pj-years[hidden],
.pj-more-wrap[hidden] { display: none; }

/* ── 관리자 바로가기 띠 — 2026-09-01 ───────────────────────────────
   담당자로 로그인했을 때만 화면 아래에 고정으로 붙는다 (theme/kentec/tail.php).
   푸터 안에 두면 맨 아래까지 내려야 보여서 실제로는 안 쓰게 된다.
   방문자에게는 마크업 자체가 안 나가므로 색만 눈에 띄게 잡는다. */
.adm-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--k-text); color: #dbe6f0;
    border-top: 3px solid var(--k-primary);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
}
.adm-bar-inner {
    width: min(100% - 28px, var(--k-inner)); margin-inline: auto;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
    padding: 9px 0;
    font-size: 0.8125rem;
}
.adm-bar-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #fff; white-space: nowrap; }
.adm-bar-title i { opacity: .8; }
.adm-bar-links { display: flex; flex-wrap: wrap; gap: 6px; }

/* 한 묶음 = [게시판 이름][＋등록] — 목록으로 갈지 바로 등록할지 한 번에 고른다 */
.adm-item { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; }
.adm-item .adm-go,
.adm-item .adm-add {
    display: inline-flex; align-items: center; padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    color: #eaf2fa; white-space: nowrap; line-height: 1.2;
    transition: background .18s, border-color .18s;
}
.adm-item .adm-go  { border-radius: 999px 0 0 999px; border-right: 0; }
.adm-item .adm-add { border-radius: 0 999px 999px 0; background: rgba(255, 255, 255, .12); font-weight: 700; }
/* ＋등록이 없는 항목(온라인 상담)은 혼자서도 둥글게 */
.adm-item .adm-go:only-child { border-radius: 999px; border-right: 1px solid rgba(255, 255, 255, .28); }
.adm-item .adm-go:hover  { background: rgba(255, 255, 255, .16); }
.adm-item .adm-add:hover { background: var(--k-primary); border-color: var(--k-primary); }

.adm-bar-who { margin-left: auto; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.adm-bar-out,
.adm-bar-toggle {
    padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
    background: none; color: #eaf2fa; white-space: nowrap; cursor: pointer;
    font-size: inherit; font-family: inherit; line-height: 1.2;
}
.adm-bar-out:hover, .adm-bar-toggle:hover { background: rgba(255, 255, 255, .14); }

/* 접은 상태 — 오른쪽 아래 작은 손잡이만 남는다 */
.adm-bar.is-folded {
    left: auto; right: 14px; bottom: 14px;
    border-radius: 999px; border-top: 0;
    background: var(--k-primary);
}
.adm-bar.is-folded .adm-bar-inner { width: auto; padding: 0; gap: 0; }
.adm-bar.is-folded .adm-bar-title,
.adm-bar.is-folded .adm-bar-links,
.adm-bar.is-folded .adm-bar-who,
.adm-bar.is-folded .adm-bar-out { display: none; }
.adm-bar.is-folded .adm-bar-toggle { border: 0; padding: 9px 16px; font-weight: 700; color: #fff; }

/* 띠가 본문 끝을 가리지 않게 아래 여백을 준다 (띠는 관리자에게만 그려진다) */
body:has(.adm-bar:not(.is-folded)) { padding-bottom: 58px; }

@media (max-width: 760px) {
    .adm-bar-who { display: none; }          /* 좁은 화면에서는 링크를 우선한다 */
    .adm-bar-inner { gap: 6px 8px; padding: 8px 0; font-size: 0.75rem; }
    .adm-item .adm-go, .adm-item .adm-add { padding: 5px 9px; }
    body:has(.adm-bar:not(.is-folded)) { padding-bottom: 92px; }
}
/* 인쇄물(설치실적 PDF)에는 나오지 않게 */
@media print { .adm-bar { display: none !important; } }

/* ── 설치실적 등록 — 사업분야 고르기 (2026-09-01) ──────────────────
   대기/수질을 먼저 고르게 해서 엉뚱한 구분으로 등록되는 것을 막는다. */
.pj-area-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-area-opt {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--k-line); border-radius: 999px;
    background: #fff; cursor: pointer;
    font-weight: 600; color: var(--k-text);
    transition: border-color .18s, background .18s, color .18s;
}
.pj-area-opt:hover { border-color: var(--k-primary); }
.pj-area-opt input { margin: 0; accent-color: var(--k-primary); }
.pj-area-opt:has(input:checked) {
    border-color: var(--k-primary); background: var(--k-bg); color: var(--k-primary-dark);
}

/* ── 영문 첫 화면 바로가기 정렬 (2026-09-01) ────────────────────────
   영문 이름은 길이가 제각각이라 1~3줄로 접힌다. 그대로 두면 ⊕ 버튼 줄이
   칸마다 다른 높이에 놓여 삐뚤어 보인다. 이름칸을 늘려 ⊕ 를 바닥에 맞춘다. */
body.lang-en .hero-quick > ul > li > a { justify-content: flex-start; height: 100%; }   /* li 높이를 다 채워야 ⊕ 가 바닥에 맞는다 */
body.lang-en .hero-quick > ul > li > a strong { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }

/* ── 설치실적 게시판 목록 — 구분·고객사·연도 함께 표시 (2026-09-01) ──
   제목만 보이면 대기인지 수처리인지 알 수 없어 담당자가 찾기 어려웠다. */
.bd-cat {
    display: inline-block; margin-right: 8px; padding: 2px 9px;
    border-radius: 999px; font-style: normal; font-size: 0.75rem; font-weight: 700;
    vertical-align: middle; white-space: nowrap;
}
.bd-cat--air   { background: #e6f3ec; color: #1d6b45; }   /* 대기 = 녹색 계열 */
.bd-cat--water { background: #e6effa; color: #1b4f8f; }   /* 수질 = 파란 계열 */
.bd-pjinfo { display: block; margin-top: 3px; font-size: 0.8125rem; color: var(--k-muted); font-weight: 400; }
@media (max-width: 700px) { .bd-pjinfo { font-size: 0.75rem; } }

/* ── 설치실적 목록 — 사업분야 필터 (2026-09-01) ────────────────────── */
.bd-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 4px; }
.bd-filter-btn {
    display: inline-block; padding: 6px 14px;
    border: 1px solid var(--k-line); border-radius: 999px;
    background: #fff; color: var(--k-text); font-size: 0.875rem; font-weight: 600;
    white-space: nowrap; transition: border-color .18s, background .18s, color .18s;
}
.bd-filter-btn:hover { border-color: var(--k-primary); color: var(--k-primary); }
.bd-filter-btn.is-on { background: var(--k-primary); border-color: var(--k-primary); color: #fff; }
.bd-filter-btn--sm { padding: 4px 11px; font-size: 0.8125rem; font-weight: 500; }
/* 대기환경 안에서 다시 좁히는 줄 — 한 칸 들여 구분한다 */
.bd-filter-sub {
    display: inline-flex; flex-wrap: wrap; gap: 5px;
    margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--k-line);
}
@media (max-width: 700px) {
    .bd-filter-sub { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; }
}

/* 순번(nth-of-type)에 따라 깔리는 옅은 판을 끄고 흰 바탕으로 둔다.
   표가 들어가는 절에 쓴다 — 판 위에 표가 얹히면 지저분해 보인다. (2026-09-01) */
.sub-content .pg-sec.is-plain { background: #fff; }