@charset "utf-8";

/* ==========================================================================
   KENTEC 테마 — 반응형
   사진 중심 / 미니멀 헤더 / 전체화면 오버레이 메뉴
   ========================================================================== */

:root {
    --navy-900: #0a1f38;
    --navy-800: #0d2c4b;
    --navy-700: #14406b;
    --navy-100: #e8eef5;
    /* 사업부별 강조색 — 컨셉안 기준
       대기환경 = 녹색계열 / 수질환경 = 파란색계열.
       실제로 쓰는 값은 아래 --accent-* 이며, body 클래스로 갈아끼운다.
       색을 바꾸려면 여기 원색만 고치면 전체에 반영된다. */
    --green-600: #0a8f5f;
    --green-500: #10a86e;
    --blue-600: #0a6aa8;
    --blue-500: #1183cc;

    --accent-600: var(--green-600);
    --accent-500: var(--green-500);
    --gray-900: #1a1d21;
    --gray-700: #4a5158;
    --gray-500: #7c848c;
    --gray-300: #d5d9dd;
    --gray-200: #e6e9ec;
    --gray-100: #f4f6f8;
    --white: #fff;

    --hd-h: 78px;
    --inner: 1360px;
    --radius: 2px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 사업부별 강조색 전환.
   body 에 붙이면 페이지 전체(서브페이지), 개별 요소에 붙이면 그 안에서만 바뀐다.
   서브페이지는 page/_page.php 가 그룹의 accent 값을 body 클래스로 내보내고,
   메인 페이지 카드·GNB 는 head.php 의 $kentec_gnb 'accent' 값을 쓴다. */
.accent-air {
    --accent-600: var(--green-600);
    --accent-500: var(--green-500);
}
.accent-water {
    --accent-600: var(--blue-600);
    --accent-500: var(--blue-500);
}

/* ── 리셋 ────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-900);
    background: var(--white);
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; }
hr { display: none; }

.sound_only {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
#skip_to_container { position: absolute; top: -100px; left: 0; z-index: 1000; padding: 10px 20px; background: var(--navy-800); color: #fff; }
#skip_to_container:focus { top: 0; }

.inner { max-width: var(--inner); margin: 0 auto; padding: 0 32px; }
#hd_login_msg { display: none; }

/* 사진이 아직 없을 때 쓰는 플레이스홀더 — 실제 사진을 넣으면 이 클래스가 빠진다 */
.is-placeholder {
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 10px),
        linear-gradient(150deg, #0a1f38 0%, #14406b 55%, #0f6b4f 100%);
}
.is-placeholder::after {
    content: 'IMAGE';
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px; font-weight: 700; letter-spacing: .3em;
    color: rgba(255,255,255,.28);
}

/* ==========================================================================
   헤더 — 로고 + 언어 + 검색 + 햄버거. 가로 GNB 없음.
   ========================================================================== */
#hd {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.hd-inner {
    position: relative; z-index: 1; /* .gnb-bg(흰 패널)보다 위에 있어야 하위메뉴가 가려지지 않는다 */
    display: flex; align-items: center; justify-content: space-between;
    max-width: var(--inner); margin: 0 auto;
    height: var(--hd-h); padding: 0 32px;
}

/* 로고 — 흰 배경 헤더에서는 네이비, 히어로 위에서는 흰색으로 교체 */
.hd-logo { display: flex; align-items: center; gap: 11px; }
.hd-logo img { width: 132px; height: auto; }
.hd-logo .hd-logo-n { display: none; }
.hd-logo span {
    font-size: 12px; color: rgba(255,255,255,.7);
    transition: color .3s;
    white-space: nowrap;
}
#hd.hd-sub .hd-logo-w, #hd.is-scrolled .hd-logo-w { display: none; }
#hd.hd-sub .hd-logo-n, #hd.is-scrolled .hd-logo-n { display: block; }

/* ── 가로 GNB ────────────────────────────────────────────
   메인 히어로 위(=투명 헤더)에서는 숨기고,
   스크롤하거나 서브페이지에 오면 나타난다.
   ─────────────────────────────────────────────────────── */
#gnb {
    flex: 1;
    display: flex; justify-content: center;
    /* 기본은 숨김. 자리를 차지하되 보이지 않게 해서 로고/우측 버튼이 튀지 않도록 한다 */
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .3s var(--ease), visibility .3s, transform .3s var(--ease);
}
#hd.is-scrolled #gnb,
#hd.hd-sub #gnb {
    opacity: 1; visibility: visible;
    transform: translateY(0);
}

.gnb-list { display: flex; }
/* static 으로 둬야 .gnb-sub 가 .hd-inner 기준으로 전체 폭을 잡는다 */
.gnb-item { position: static; }
.gnb-link {
    display: block;
    padding: 0 26px; line-height: var(--hd-h);
    font-size: 17px; font-weight: 600;
    color: var(--navy-900);
    white-space: nowrap;
    transition: color .2s;
}
.gnb-item:hover > .gnb-link,
.gnb-link:focus { color: var(--accent-600); }

/* 하위메뉴 — 올린 대메뉴의 중메뉴만 가로 한 줄로 펼쳐진다.
   .hd-inner 가 기준(position:relative)이라 헤더 폭 전체를 쓴다. */
.gnb-sub {
    position: absolute; top: var(--hd-h); left: 0; right: 0;
    display: flex; justify-content: center; align-items: center;
    gap: 8px;
    padding: 22px 0;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .22s var(--ease), visibility .22s, transform .22s var(--ease);
}
/* 올린 항목의 하위메뉴만 노출 */
.gnb-item:hover > .gnb-sub,
.gnb-item:focus-within > .gnb-sub {
    opacity: 1; visibility: visible;
    transform: translateY(0);
}
.gnb-sub a {
    display: block;
    padding: 9px 20px;
    font-size: 16px; color: var(--gray-700);
    white-space: nowrap;
    transition: color .2s, background .2s;
}
.gnb-sub a:hover { color: var(--accent-600); font-weight: 700; }

/* 항목 사이 구분점 */
.gnb-sub li + li { position: relative; }
.gnb-sub li + li::before {
    content: ''; position: absolute; left: -4px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 3px;
    background: var(--gray-300); border-radius: 50%;
}

.gnb-item:hover > .gnb-link { color: var(--accent-600); }

/* 하위메뉴 뒤에 깔리는 흰 패널 */
.gnb-bg {
    position: absolute; top: var(--hd-h); left: 0; right: 0;
    z-index: 0; /* .hd-inner 아래 — 하위메뉴를 덮으면 안 된다 */
    height: 0;
    background: #fff;
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 12px 24px rgba(0,0,0,.06);
    overflow: hidden;
    transition: height .28s var(--ease);
}
/* .gnb-bg 의 높이는 theme.js 가 가장 긴 하위메뉴 열에 맞춰 인라인으로 넣는다 */
/* 메가메뉴가 열리면 헤더는 항상 흰 배경 */
#hd.gnb-open { background: #fff; box-shadow: 0 1px 0 var(--gray-200); }
#hd.gnb-open #gnb { opacity: 1; visibility: visible; transform: translateY(0); }
#hd.gnb-open .hd-logo-w { display: none; }
#hd.gnb-open .hd-logo-n { display: block; }
#hd.gnb-open .hd-logo span { color: var(--gray-500); }
#hd.gnb-open .hd-lang,
#hd.gnb-open .hd-search-btn { color: var(--navy-900); }
#hd.gnb-open .hd-menu-btn span { background: var(--navy-900); }

.hd-right { display: flex; align-items: center; gap: 4px; }
.hd-lang {
    padding: 8px 12px;
    font-size: 13px; font-weight: 600; color: #fff;
    transition: color .3s;
}
.hd-search-btn {
    width: 44px; height: 44px;
    font-size: 17px; color: #fff;
    transition: color .3s;
}
.hd-menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px;
}
.hd-menu-btn span {
    display: block; width: 24px; height: 2px;
    margin-left: auto;
    background: #fff;
    transition: background .3s, width .25s var(--ease);
}
.hd-menu-btn span:nth-child(2) { width: 18px; }
.hd-menu-btn:hover span:nth-child(2) { width: 24px; }

/* 스크롤 / 서브페이지에서 흰 배경 전환 */
#hd.hd-sub, #hd.is-scrolled { background: #fff; box-shadow: 0 1px 0 var(--gray-200); }
#hd.hd-sub .hd-logo span,   #hd.is-scrolled .hd-logo span   { color: var(--gray-500); }
#hd.hd-sub .hd-lang,        #hd.is-scrolled .hd-lang,
#hd.hd-sub .hd-search-btn,  #hd.is-scrolled .hd-search-btn  { color: var(--navy-900); }
#hd.hd-sub .hd-menu-btn span, #hd.is-scrolled .hd-menu-btn span { background: var(--navy-900); }

/* 검색 레이어 */
.hd-search { background: #fff; border-top: 1px solid var(--gray-200); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.hd-search-inner { max-width: var(--inner); margin: 0 auto; padding: 0 32px; }
.hd-search form { display: flex; align-items: center; gap: 12px; padding: 20px 0; }
.hd-search input[type=text] {
    flex: 1; height: 50px; padding: 0 4px;
    font-size: 18px;
    border: 0; border-bottom: 2px solid var(--navy-900);
    outline: none; background: transparent;
}
.hd-search button[type=submit] {
    width: 50px; height: 50px; font-size: 18px;
    color: #fff; background: var(--navy-900);
}
.hd-search-close { font-size: 30px; line-height: 1; color: var(--gray-500); padding: 0 6px; }

/* ── 전체메뉴 오버레이 ───────────────────────────────────── */
#allmenu {
    position: fixed; inset: 0; z-index: 300;
    background: var(--navy-900);
    color: #fff;
    overflow-y: auto;
    opacity: 0;
    transition: opacity .3s var(--ease);
}
#allmenu.is-open { opacity: 1; }
.allmenu-head {
    display: flex; align-items: center; justify-content: space-between;
    max-width: var(--inner); margin: 0 auto;
    height: var(--hd-h); padding: 0 32px;
}
.allmenu-close { font-size: 40px; line-height: 1; color: #fff; padding: 0 6px; }

.allmenu-body { max-width: var(--inner); margin: 0 auto; padding: 40px 32px 80px; }
.allmenu-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
}
.allmenu-tit {
    display: block;
    padding-bottom: 18px; margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.18);
}
.allmenu-tit em {
    display: block;
    font-size: 12px; font-style: normal; font-weight: 700;
    letter-spacing: .14em; color: var(--accent-500);
}
.allmenu-tit strong {
    display: block; margin-top: 6px;
    font-size: 24px; font-weight: 800; letter-spacing: -.02em;
}
.allmenu-sub li + li { margin-top: 2px; }
.allmenu-sub a {
    display: block; padding: 9px 0;
    font-size: 15px; color: rgba(255,255,255,.62);
    transition: color .2s, padding-left .2s;
}
.allmenu-sub a:hover { color: #fff; padding-left: 6px; }
body.nav-locked { overflow: hidden; }

/* ==========================================================================
   메인 섹션 스냅 스크롤
   fullPage.js 대신 브라우저 기본 기능(CSS scroll-snap)을 쓴다.
   - 라이브러리 의존성 없음, 라이선스 문제 없음
   - html.snap 은 theme.js 가 메인 페이지에서만 붙인다 (서브페이지 제외)
   ========================================================================== */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    /* 위치 이동은 theme.js 의 섹션 페이저가 담당한다 (휠 한 번 = 한 섹션).
       CSS scroll-snap 을 같이 걸면 두 방식이 서로 위치를 잡으려 해서 떨린다. */
    html.snap { scroll-padding-top: var(--hd-h); }

    html.snap .snap-sec {
        min-height: 100vh;
        display: flex; flex-direction: column; justify-content: center;
    }
    /* 히어로는 자체적으로 100vh + 절대배치라 위 규칙에서 제외 */
    html.snap .hero { display: block; }

    /* 한 화면(최소 768px 높이)에 담기도록 여백과 카드 크기를 줄인다 */
    html.snap .sec { padding: 48px 0; }
    html.snap .sec-head { margin-bottom: 24px; }
    html.snap .stats-strip { margin-bottom: 20px; }
    html.snap .stats-strip li { padding: 14px 12px; }
    html.snap .stats-strip strong { font-size: 26px; }
    html.snap .bizlist { gap: 16px; }
    html.snap .bizcard { grid-template-columns: 200px 1fr; }
    html.snap .bizcard-photo { min-height: 168px; }
    html.snap .bizcard-body { padding: 20px 24px; }
    html.snap .bizcard-title { font-size: 21px; }
    html.snap .bizcard-desc { margin-top: 8px; font-size: 14px; }
    html.snap .bizcard-btn { margin-top: 14px; height: 40px; padding: 0 18px; }

    /* 푸터는 마지막 이동 지점(문서 끝)에서 노출된다 — theme.js 가 처리 */
}

/* ==========================================================================
   메인 비주얼 — 전체화면 사진 + 이탤릭 영문 타이틀 + 아이콘 퀵메뉴
   ========================================================================== */
.hero {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    color: #fff;
}
/* 배경 레이어 — 동영상(hero.mp4) 또는 사진(hero-poster.jpg) */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* 포스터 이미지 위에 얹혀 페이드인한다. 재생이 시작돼야 is-on 이 붙으므로
   로딩 중이나 자동재생 차단 시에는 포스터가 그대로 보인다. */
.hero-video {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s var(--ease);
}
.hero-video.is-on { opacity: 1; }
.hero-photo {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
}
/* 배경 위 어둡게 깔아 글자 가독성 확보 */
.hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(6,20,36,.82) 0%, rgba(6,20,36,.52) 50%, rgba(6,20,36,.34) 100%);
}

.hero-copy {
    position: absolute; z-index: 2;
    left: max(32px, calc(50vw - var(--inner) / 2 + 32px));
    top: 50%; transform: translateY(-50%);
    max-width: 640px;
}
.hero-title {
    font-size: 76px; font-weight: 700; font-style: italic;
    line-height: 1.12; letter-spacing: -.02em;
    text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero-sub {
    margin-top: 24px;
    font-size: 18px; line-height: 1.7;
    color: rgba(255,255,255,.9);
    text-shadow: 0 1px 12px rgba(0,0,0,.4);
}

/* 히어로 위 아이콘 퀵메뉴 */
.hero-quick {
    position: absolute; z-index: 2;
    right: max(32px, calc(50vw - var(--inner) / 2 + 32px));
    top: 50%; transform: translateY(-50%);
}
.hero-quick ul { display: flex; gap: 8px; }
.hero-quick a {
    display: flex; flex-direction: column; align-items: center;
    width: 116px; padding: 22px 8px 20px;
    text-align: center;
    border-radius: var(--radius);
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.hero-quick a:hover { background: rgba(255,255,255,.12); transform: translateY(-4px); }
.hero-quick i { font-size: 26px; }
.hero-quick em {
    display: block; margin-top: 14px;
    font-size: 11px; font-style: normal; font-weight: 800;
    letter-spacing: .06em; line-height: 1.3;
}
.hero-quick strong {
    display: block; margin-top: 4px;
    font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,.85);
}
.hero-quick-plus {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-top: 14px;
    font-size: 15px; line-height: 1;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%;
    transition: background .25s, border-color .25s, color .25s;
}
.hero-quick a:hover .hero-quick-plus {
    background: var(--accent-500); border-color: var(--accent-500); color: #fff;
}

/* 히어로 하단 뉴스 토글 */
.hero-news-toggle {
    position: absolute; z-index: 2;
    left: max(32px, calc(50vw - var(--inner) / 2 + 32px));
    bottom: 46px;
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; color: rgba(255,255,255,.9);
}
.hero-news-toggle i { transition: transform .3s var(--ease); }
.hero-news-toggle:hover i { transform: translateY(3px); }

/* ==========================================================================
   공통 섹션
   ========================================================================== */
.sec { padding: 110px 0; }
.sec-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 44px;
}
.sec-title {
    font-size: 38px; font-weight: 800; letter-spacing: -.02em;
    color: var(--navy-900);
}
.sec-more {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: var(--gray-700);
    transition: color .2s;
}
.sec-more:hover { color: var(--accent-600); }

/* ── 뉴스 카드 ───────────────────────────────────────────── */
.cardlist {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

/* ── 뉴스 캐러셀 ─────────────────────────────────────────── */
.sec-head-right { display: flex; align-items: center; gap: 20px; }
.news-nav { display: flex; gap: 6px; }
.news-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    font-size: 17px; color: var(--navy-900);
    border: 1px solid var(--gray-300);
    background: #fff;
    transition: all .2s;
}
.news-arrow:hover {
    color: #fff;
    background: var(--navy-900);
    border-color: var(--navy-900);
}

.news-slider { position: relative; }
.news-viewport { overflow: hidden; }

/* 슬라이드 모드일 때만 그리드 → 가로 트랙으로 전환한다.
   항목이 한 화면에 다 들어가면 JS 가 is-sliding 을 떼고 그리드로 되돌린다. */
.news-slider.is-sliding .cardlist {
    display: flex;
    gap: 0;
    transition: transform .55s var(--ease);
    will-change: transform;
}
/* 노출 개수는 theme.js 의 calcPerView() 와 반드시 같아야 한다.
   1280+ → 4개, 1024+ → 3개, 640+ → 2개, 그 미만 → 1개 */
.news-slider.is-sliding .cardlist-item {
    flex: 0 0 25%;
    padding-right: 28px;
    box-sizing: border-box;
}
@media (max-width: 1279px) {
    .news-slider.is-sliding .cardlist-item { flex-basis: 33.3333%; padding-right: 20px; }
}
@media (max-width: 1023px) {
    .news-slider.is-sliding .cardlist-item { flex-basis: 50%; }
}
@media (max-width: 639px) {
    .news-slider.is-sliding .cardlist-item { flex-basis: 100%; padding-right: 0; }
}

.news-dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.news-dot {
    width: 8px; height: 8px;
    background: var(--gray-300);
    border-radius: 50%;
    transition: background .2s, width .2s;
}
.news-dot.is-active { width: 24px; border-radius: 4px; background: var(--navy-900); }
.card { display: block; height: 100%; }
.card-thumb {
    position: relative;
    display: block; overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--gray-100);
}
.card-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s var(--ease);
}
.card:hover .card-thumb img { transform: scale(1.06); }
.card-thumb-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: var(--gray-300);
}
.card-body { display: block; padding-top: 20px; }
.card-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 18px; font-weight: 700; line-height: 1.45;
    color: var(--navy-900);
    transition: color .2s;
}
.card:hover .card-title { color: var(--accent-600); }
.card-excerpt {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px;
    font-size: 14px; line-height: 1.65; color: var(--gray-500);
}
.card-date {
    display: block; margin-top: 16px;
    font-size: 13px; color: var(--gray-500);
}
.cardlist-empty {
    grid-column: 1 / -1;
    padding: 80px 0; text-align: center;
    color: var(--gray-500);
    background: var(--gray-100);
}

/* ── 사업분야 분할 카드 ──────────────────────────────────── */
.sec-biz { background: var(--gray-100); }
.bizlist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.bizcard {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: 100%;
    background: #fff;
    overflow: hidden;
    /* 사업부 강조색 띠. accent 지정이 없는 카드는 띠가 없다. */
    border-top: 3px solid transparent;
}
.accent-air > .bizcard,
.accent-water > .bizcard { border-top-color: var(--accent-500); }
.bizcard-photo {
    position: relative;
    background-size: cover; background-position: center;
    min-height: 240px;
}
.bizcard-body {
    display: flex; flex-direction: column;
    padding: 32px 32px 28px;
}
.bizcard-en {
    font-size: 12px; font-style: normal; font-weight: 800;
    letter-spacing: .14em; color: var(--accent-600);
}
.bizcard-title {
    margin-top: 8px;
    font-size: 24px; font-weight: 800; color: var(--navy-900);
}
.bizcard-desc {
    flex: 1;
    margin-top: 14px;
    font-size: 15px; line-height: 1.7; color: var(--gray-700);
}
.bizcard-btn {
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start;
    margin-top: 22px; padding: 11px 22px;
    font-size: 14px; font-weight: 600;
    color: var(--navy-900);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    transition: background .25s, color .25s, border-color .25s, gap .25s;
}
.bizcard-btn:hover {
    background: var(--accent-600); color: #fff; border-color: var(--accent-600);
    gap: 14px;
}

/* ==========================================================================
   서브 페이지
   ========================================================================== */
.sub-visual {
    display: flex; align-items: center;
    height: 260px; margin-top: var(--hd-h);
    background: linear-gradient(100deg, var(--navy-900) 0%, var(--navy-700) 100%);
    color: #fff;
}
.sub-visual-title { font-size: 38px; font-weight: 800; letter-spacing: -.02em; }
.sub-breadcrumb {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px;
    font-size: 14px; color: rgba(255,255,255,.62);
}
.sub-breadcrumb span::before { content: '/'; margin-right: 10px; }

.container-sub { padding: 76px 0 110px; }
.container-sub > * { max-width: var(--inner); margin: 0 auto; padding: 0 32px; }

.sub-layout { display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: start; }
.sub-layout:not(:has(.lnb)) { grid-template-columns: 1fr; }

.lnb { position: sticky; top: calc(var(--hd-h) + 20px); }
.lnb-title {
    padding-bottom: 18px; margin-bottom: 18px;
    font-size: 22px; font-weight: 800; color: var(--navy-900);
    border-bottom: 2px solid var(--navy-900);
}
.lnb-list li + li { margin-top: 2px; }
.lnb-list a {
    display: block; padding: 12px 14px;
    font-size: 15px; color: var(--gray-700);
    transition: background .2s, color .2s;
}
.lnb-list a:hover { background: var(--gray-100); color: var(--navy-900); }
.lnb-list .is-active a { background: var(--navy-100); color: var(--navy-900); font-weight: 700; }

.pg-sec + .pg-sec { margin-top: 64px; }
.pg-eyebrow { margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--accent-600); }
.pg-title { margin-bottom: 20px; font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--navy-900); }
.pg-subtitle {
    padding-left: 14px; margin-bottom: 22px;
    font-size: 22px; font-weight: 700; color: var(--navy-900);
    border-left: 4px solid var(--accent-500);
}
.pg-lead { font-size: 17px; line-height: 1.85; color: var(--gray-700); }
.pg-todo { padding: 40px; text-align: center; color: var(--gray-500); background: var(--gray-100); }

.pg-table { width: 100%; border-top: 2px solid var(--navy-900); }
.pg-table th, .pg-table td { padding: 16px 20px; font-size: 15px; text-align: left; border-bottom: 1px solid var(--gray-200); }
.pg-table th { width: 180px; font-weight: 700; color: var(--navy-900); background: var(--gray-100); }

.pg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-cards--2 { grid-template-columns: repeat(2, 1fr); }
.pg-cards li { padding: 28px 24px; border: 1px solid var(--gray-200); }
.pg-cards strong { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 700; color: var(--navy-900); }
.pg-cards p { font-size: 15px; line-height: 1.7; color: var(--gray-700); }
/* 카드 제목 아래 영문 정식명칭 한 줄 */
.pg-cards-sub {
    margin: -6px 0 10px; font-size: 13px; font-weight: 600;
    letter-spacing: .02em; color: var(--accent-600);
}
.pg-cards strong a { color: inherit; }
.pg-cards strong a:hover { color: var(--accent-600); text-decoration: underline; }

.pg-cta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    margin-top: 64px; padding: 32px 36px;
    background: var(--navy-100);
}
.pg-cta p { font-size: 16px; color: var(--navy-900); }

.pg-caption { margin-top: 14px; font-size: 14px; line-height: 1.7; color: var(--gray-500); }
.pg-caption a { color: var(--accent-600); font-weight: 600; }
.pg-note {
    margin-top: 40px; padding: 20px 24px;
    font-size: 15px; color: var(--gray-700);
    background: var(--gray-100);
}
.pg-note a { color: var(--accent-600); font-weight: 600; text-decoration: underline; }

.pg-table--center th, .pg-table--center td { text-align: center; }
.pg-table--center th { width: auto; }
.pg-table thead th { background: var(--navy-100); color: var(--navy-900); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .pg-table { min-width: 720px; }

/* 태그 / 체크 목록 */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tag-list li {
    padding: 5px 11px;
    font-size: 12px; font-weight: 600; color: var(--navy-700);
    background: var(--navy-100); border-radius: 100px;
}
.check-list { display: grid; gap: 10px; }
.check-list li {
    position: relative;
    padding: 12px 16px 12px 40px;
    font-size: 16px;
    background: var(--gray-100);
}
.check-list li::before {
    content: '\f00c'; font-family: FontAwesome;
    position: absolute; left: 16px; top: 12px;
    font-size: 13px; color: var(--accent-600);
}

/* 스펙 목록 (면적 / 생산능력) */
.spec-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.spec-list li {
    padding: 26px 22px;
    text-align: center;
    border: 1px solid var(--gray-200);
}
.spec-label { display: block; font-size: 14px; color: var(--gray-500); }
.spec-value {
    display: block; margin-top: 10px;
    font-size: 22px; font-weight: 800; color: var(--navy-900);
}

/* 고객사 — 텍스트형 */
.client-list { display: flex; flex-wrap: wrap; gap: 10px; }
.client-list li {
    padding: 13px 22px;
    font-size: 15px; font-weight: 600; color: var(--navy-900);
    background: var(--gray-100);
}
.client-list--accent li { background: var(--navy-100); color: var(--navy-800); }

/* 고객사 — 로고 그리드 */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--gray-200);
    border: 1px solid var(--gray-200);
}
.logo-item {
    display: flex; align-items: center; justify-content: center;
    min-height: 116px; padding: 20px;
    background: #fff;
    transition: background .25s var(--ease);
}
.logo-item:hover { background: var(--gray-100); }
.logo-item img {
    max-width: 100%; max-height: 56px;
    width: auto; height: auto;
    /* 로고 색이 제각각이라 기본은 톤을 눌러두고, hover 시 원색을 보여준다 */
    filter: grayscale(100%);
    opacity: .72;
    transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.logo-item:hover img { filter: grayscale(0); opacity: 1; }
.logo-text {
    font-size: 15px; font-weight: 700; color: var(--navy-900);
    text-align: center;
}

/* 연혁 */
.hist { border-top: 2px solid var(--navy-900); }
.hist-row {
    display: grid; grid-template-columns: 200px 1fr;
    gap: 32px;
    padding: 34px 0;
    border-bottom: 1px solid var(--gray-200);
}
.hist-year {
    font-size: 30px; font-weight: 800; letter-spacing: -.02em;
    color: var(--accent-600); line-height: 1.2;
}
.hist-items li {
    position: relative;
    display: flex; gap: 16px;
    padding: 8px 0 8px 18px;
}
.hist-items li::before {
    content: ''; position: absolute; left: 0; top: 18px;
    width: 5px; height: 5px;
    background: var(--gray-300); border-radius: 50%;
}
.hist-month {
    flex: none; width: 30px;
    font-size: 15px; font-weight: 700; color: var(--navy-800);
}
.hist-text { font-size: 16px; color: var(--gray-700); }

/* 조직도 */
.org-ceo {
    padding: 22px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px; font-weight: 800; color: #fff;
    background: var(--navy-900);
}
.org-ceo span { font-size: 14px; font-weight: 400; color: rgba(255,255,255,.6); }
.org-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.org-item {
    padding: 24px 20px;
    border: 1px solid var(--gray-200);
    border-top: 3px solid var(--accent-500);
}
.org-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.org-head strong { font-size: 17px; font-weight: 700; color: var(--navy-900); }
.org-count {
    flex: none;
    font-size: 13px; font-weight: 700; color: var(--accent-600);
}
.org-en {
    display: block; margin-top: 4px;
    font-size: 12px; font-style: normal; color: var(--gray-500);
}
.org-role { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--gray-700); }

/* 오시는 길 — 카카오맵 */
.map-tabs { display: flex; gap: 4px; margin-bottom: 20px; }
.map-tab {
    padding: 13px 26px;
    font-size: 15px; font-weight: 600; color: var(--gray-700);
    border: 1px solid var(--gray-300);
    transition: all .2s;
}
.map-tab:hover { background: var(--gray-100); }
.map-tab.is-active {
    color: #fff; background: var(--navy-900); border-color: var(--navy-900);
}

.map-canvas {
    width: 100%; height: 460px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
}
.map-canvas--empty {
    display: flex; align-items: center; justify-content: center;
    padding: 24px; text-align: center;
    font-size: 15px; line-height: 1.8; color: var(--gray-500);
}
.map-canvas--empty code {
    padding: 2px 6px;
    font-size: 13px; color: var(--navy-800);
    background: var(--navy-100);
}
/* 지도 위 마커 라벨 */
.map-pin {
    padding: 7px 14px;
    font-size: 13px; font-weight: 700; color: #fff;
    white-space: nowrap;
    background: var(--navy-900);
    border-radius: 100px;
}

.map-info-list { margin-top: 24px; }
.map-info { display: none; padding: 28px 30px; border: 1px solid var(--gray-200); border-top: 3px solid var(--accent-500); }
.map-info.is-active { display: block; }
.map-info-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.map-info-head strong { font-size: 20px; font-weight: 800; color: var(--navy-900); }
.map-info-head em { font-size: 13px; font-style: normal; color: var(--gray-500); }
.map-info-rows li { display: flex; gap: 14px; padding: 5px 0; font-size: 15px; color: var(--gray-700); }
.map-info-rows span { flex: none; width: 44px; font-weight: 700; color: var(--navy-800); }
.map-info-rows a { color: var(--accent-600); font-weight: 600; }
.map-info-btns { display: flex; gap: 8px; margin-top: 20px; }
.btn-line-navy {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 20px;
    font-size: 14px; font-weight: 600; color: var(--navy-900);
    border: 1px solid var(--gray-300);
    transition: all .2s;
}
.btn-line-navy:hover { color: #fff; background: var(--navy-900); border-color: var(--navy-900); }

/* CEO */
.ceo-box { padding: 8px 0; }
.ceo-sign { margin-top: 28px; text-align: right; font-size: 16px; color: var(--gray-700); }
.ceo-sign strong { font-size: 19px; color: var(--navy-900); }

/* ==========================================================================
   게시판
   ========================================================================== */
.bd-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--navy-900);
}
.bd-total { font-size: 15px; color: var(--gray-700); }
.bd-total strong { color: var(--navy-900); font-weight: 800; }
.bd-total span { margin-left: 10px; font-size: 14px; color: var(--gray-500); }

.bd-tools { display: flex; align-items: center; gap: 8px; }
.bd-search-btn {
    width: 42px; height: 42px;
    font-size: 16px; color: var(--navy-900);
    border: 1px solid var(--gray-300);
}
.bd-search-btn:hover { background: var(--gray-100); }
.bd-write-btn {
    display: inline-flex; align-items: center;
    height: 42px; padding: 0 22px;
    font-size: 14px; font-weight: 600;
    color: #fff; background: var(--navy-900);
}
.bd-write-btn:hover { background: var(--accent-600); }

.bd-search {
    display: flex; gap: 8px;
    padding: 18px 0;
    border-bottom: 1px solid var(--gray-200);
}
.bd-search select, .bd-search input[type=text] {
    height: 44px; padding: 0 12px;
    font-size: 15px;
    border: 1px solid var(--gray-300);
    background: #fff;
}
.bd-search input[type=text] { flex: 1; }
.bd-search button {
    height: 44px; padding: 0 24px;
    font-size: 14px; font-weight: 600;
    color: #fff; background: var(--navy-900);
}

.bd-admin-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 14px 16px;
    font-size: 14px;
    background: var(--gray-100);
}
.bd-admin-bar input[type=submit] {
    padding: 8px 14px;
    font-size: 13px; color: var(--navy-900);
    background: #fff; border: 1px solid var(--gray-300);
    cursor: pointer;
}
.bd-admin-bar input[type=submit]:hover { background: var(--navy-100); }

/* 리스트형 */
.bd-list { border-top: 0; }
.bd-item {
    display: flex; align-items: center; gap: 20px;
    padding: 20px 8px;
    border-bottom: 1px solid var(--gray-200);
    transition: background .2s;
}
.bd-item:hover { background: var(--gray-100); }
.bd-item.is-notice { background: var(--navy-100); }

.bd-chk { flex: none; }
.bd-num {
    flex: none; width: 56px;
    text-align: center;
    font-size: 14px; color: var(--gray-500);
}
.bd-badge {
    display: inline-block; padding: 4px 9px;
    font-size: 11px; font-style: normal; font-weight: 700;
    color: #fff; background: var(--navy-800);
}
.bd-subject {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; color: var(--gray-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color .2s;
}
.bd-subject:hover { color: var(--accent-600); }
.bd-subject .fa { color: var(--gray-500); font-size: 13px; }
.bd-new {
    flex: none;
    padding: 2px 6px;
    font-size: 11px; font-style: normal; font-weight: 700;
    color: #fff; background: var(--accent-500);
}
.bd-meta {
    flex: none;
    display: flex; gap: 20px;
    font-size: 14px; color: var(--gray-500);
}
.bd-hit { min-width: 60px; }

.bd-empty {
    padding: 90px 0;
    text-align: center; color: var(--gray-500);
    border-bottom: 1px solid var(--gray-200);
}

/* 갤러리형 */
.bd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; padding-top: 32px; }
.bd-grid-item { position: relative; }
.bd-grid-item .bd-chk { position: absolute; top: 10px; left: 10px; z-index: 2; }
.bd-card { display: block; }
.bd-card-thumb {
    position: relative;
    display: block; overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--gray-100);
}
.bd-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.bd-card:hover .bd-card-thumb img { transform: scale(1.06); }
.bd-card-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: var(--gray-300);
}
.bd-card-body { display: block; padding-top: 18px; }
.bd-card-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--navy-900);
    transition: color .2s;
}
.bd-card:hover .bd-card-title { color: var(--accent-600); }
.bd-card-date { display: block; margin-top: 10px; font-size: 13px; color: var(--gray-500); }

/* ── 글쓰기 폼 ───────────────────────────────────────────── */
.bw { border-top: 2px solid var(--navy-900); }
.bw-row {
    display: grid; grid-template-columns: 160px 1fr;
    gap: 24px; align-items: start;
    padding: 22px 4px;
    border-bottom: 1px solid var(--gray-200);
}
.bw-label {
    padding-top: 12px;
    font-size: 15px; font-weight: 700; color: var(--navy-900);
}
.bw-label em {
    font-style: normal; font-weight: 700; color: var(--accent-600);
}
.bw-field { min-width: 0; }
.bw-field--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.bw-input, .bw-select {
    width: 100%; height: 46px; padding: 0 14px;
    font-size: 15px; color: var(--gray-900);
    background: #fff;
    border: 1px solid var(--gray-300);
    outline: none;
    transition: border-color .2s;
}
.bw-input:focus, .bw-select:focus { border-color: var(--navy-800); }
.bw-select { cursor: pointer; }

.bw-help {
    margin-bottom: 10px;
    font-size: 13px; line-height: 1.7; color: var(--gray-500);
}
.bw-help strong { color: var(--navy-800); }

/* 내용 (textarea 또는 에디터) */
.bw-content textarea {
    width: 100%; min-height: 340px; padding: 16px;
    font: inherit; font-size: 15px; line-height: 1.7;
    border: 1px solid var(--gray-300);
    outline: none; resize: vertical;
}
.bw-content textarea:focus { border-color: var(--navy-800); }

/* 옵션 체크박스 */
.bw-opts { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 12px; }
.bw-opts li { display: flex; align-items: center; gap: 7px; }
.bw-opts label { font-size: 15px; cursor: pointer; }

/* 첨부파일 */
.bw-file {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 12px 0;
}
.bw-file + .bw-file { border-top: 1px dashed var(--gray-200); }
.bw-file-btn {
    display: inline-flex; align-items: center; gap: 8px;
    flex: none;
    height: 44px; padding: 0 18px;
    font-size: 14px; font-weight: 600; color: var(--navy-900);
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    cursor: pointer;
    transition: background .2s;
}
.bw-file-btn:hover { background: var(--navy-100); }
/* 실제 file input 은 숨기고 label 을 버튼으로 쓴다 */
.bw-file-input {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
}
.bw-file-input:focus + .bw-file-name { outline: 2px solid var(--navy-800); }
.bw-file-name { font-size: 14px; color: var(--gray-500); }
.bw-file-name.is-set { color: var(--navy-900); font-weight: 600; }
.bw-file-desc { flex: 1 1 100%; height: 42px; }
.bw-file-del { flex: 1 1 100%; font-size: 14px; color: var(--gray-700); }

/* 캡차 */
.bw-captcha { padding-top: 6px; }
.bw-captcha #captcha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bw-captcha input[type=text] {
    height: 46px; padding: 0 14px;
    font-size: 15px; border: 1px solid var(--gray-300);
}

/* 임시저장 */
.bw-autosave {
    margin-top: 8px;
    font-size: 13px; color: var(--gray-500);
    text-decoration: underline;
}
#autosave_pop { display: none; }
#autosave_pop.is-open { display: block; }

/* 버튼 */
.bw-btns { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.bw-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 150px; height: 54px; padding: 0 30px;
    font-size: 16px; font-weight: 600;
    transition: background .2s, color .2s;
}
.bw-btn--cancel {
    color: var(--gray-700); background: #fff;
    border: 1px solid var(--gray-300);
}
.bw-btn--cancel:hover { background: var(--gray-100); }
.bw-btn--submit { color: #fff; background: var(--navy-900); border: 1px solid var(--navy-900); }
.bw-btn--submit:hover { background: var(--accent-600); border-color: var(--accent-600); }
.bw-btn--submit:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   회원 (로그인 / 회원가입 / 비밀번호 찾기)
   그누보드 기본 스킨의 마크업(.mbskin, .frm_input …)을 그대로 두고
   스타일만 테마에 맞춘다. 검증 JS 를 건드리지 않기 위함.
   ========================================================================== */
.mbskin, .register {
    max-width: 480px;
    margin: 0 auto;
}
.register { max-width: 900px; }

.mbskin h1, .register h1 {
    margin-bottom: 28px;
    font-size: 30px; font-weight: 800; letter-spacing: -.02em;
    color: var(--navy-900); text-align: center;
}

/* 로그인 / 회원가입 탭 */
.mb_log_cate { display: flex; margin-bottom: 28px; }
.mb_log_cate h2, .mb_log_cate .join {
    flex: 1;
    padding: 15px 0;
    font-size: 16px; font-weight: 700; text-align: center;
    border-bottom: 2px solid var(--gray-300);
    color: var(--gray-500);
}
.mb_log_cate h2 { color: var(--navy-900); border-bottom-color: var(--navy-900); }
.mb_log_cate .join:hover { color: var(--navy-900); }

/* 입력 필드 */
.frm_input, .frm_address {
    width: 100%; height: 48px; padding: 0 14px;
    margin-bottom: 8px;
    font-size: 15px; color: var(--gray-900);
    background: #fff;
    border: 1px solid var(--gray-300);
    outline: none;
    transition: border-color .2s;
}
.frm_input:focus, .frm_address:focus { border-color: var(--navy-800); }
.frm_input.required, .frm_input.required:focus { background: #fff; }
.full_input { width: 100%; }

#login_fs { border: 0; padding: 0; margin: 0; }

/* 버튼 */
.btn_submit {
    width: 100%; height: 52px;
    font-size: 16px; font-weight: 600;
    color: #fff; background: var(--navy-900);
    border: 1px solid var(--navy-900);
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.btn_submit:hover { background: var(--accent-600); border-color: var(--accent-600); }

.btn_frmline {
    height: 48px; padding: 0 16px;
    font-size: 14px; font-weight: 600; white-space: nowrap;
    color: var(--navy-900); background: var(--gray-100);
    border: 1px solid var(--gray-300);
    cursor: pointer;
}
.btn_frmline:hover { background: var(--navy-100); }

.btn_confirm { display: flex; justify-content: center; gap: 10px; margin-top: 36px; }
.btn_confirm .btn_submit { width: auto; min-width: 160px; padding: 0 30px; }
.btn_confirm .btn_close, .btn_confirm .btn_cancel {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 140px; height: 52px; padding: 0 26px;
    font-size: 16px; font-weight: 600;
    color: var(--gray-700); background: #fff;
    border: 1px solid var(--gray-300);
}
.btn_confirm .btn_close:hover, .btn_confirm .btn_cancel:hover { background: var(--gray-100); }

/* 로그인 하단 (자동로그인 / 아이디·비번 찾기) */
#login_info {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-top: 18px;
    font-size: 14px; color: var(--gray-700);
}
#login_info a { color: var(--navy-800); text-decoration: underline; }
#login_info a:hover { color: var(--accent-600); }

/* 체크박스 묶음 */
.chk_box { display: flex; align-items: center; gap: 7px; }
.chk_box label { cursor: pointer; }
.chk_li { display: flex; align-items: center; gap: 7px; padding: 4px 0; }

/* 회원가입 폼 테이블 */
.tbl_wrap { overflow-x: auto; }
.tbl_frm01 { width: 100%; border-top: 2px solid var(--navy-900); }
.tbl_frm01 th, .tbl_frm01 td {
    padding: 16px 18px;
    font-size: 15px; text-align: left; vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}
.tbl_frm01 th {
    width: 170px; font-weight: 700; color: var(--navy-900);
    background: var(--gray-100);
    white-space: nowrap;
}
.tbl_frm01 td .frm_input { margin-bottom: 0; }
.tbl_frm01 .frm_info {
    display: block; margin-top: 6px;
    font-size: 13px; line-height: 1.6; color: var(--gray-500);
}

/* 약관 동의 */
.register .fregister_agree { margin-top: 8px; }
.consent-line {
    padding: 20px 0;
    border-bottom: 1px solid var(--gray-200);
}
.consent-date { font-size: 14px; color: var(--gray-700); }
.js-open-consent {
    margin-left: 8px;
    font-size: 13px; color: var(--navy-800);
    text-decoration: underline; cursor: pointer;
}
.register textarea {
    width: 100%; min-height: 180px; padding: 16px;
    font: inherit; font-size: 14px; line-height: 1.7;
    color: var(--gray-700);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    resize: vertical;
}

/* 툴팁 */
.tooltip { position: relative; display: inline-block; }
.tooltip_icon { color: var(--gray-500); cursor: help; }
.tooltip_icon:hover ~ .tooltip_txt, .tooltip_txt:hover { display: block; }
.tooltip_txt {
    display: none;
    position: absolute; left: 0; top: 24px; z-index: 10;
    width: 260px; padding: 12px 14px;
    font-size: 13px; line-height: 1.6; color: #fff;
    background: var(--navy-900);
}

/* 필수 표시 */
.register_form_inner .required::placeholder { color: var(--gray-500); }

/* 비밀번호 찾기 등 별창 레이아웃 */
.new_win { max-width: 560px; margin: 0 auto; }
.new_win .win_desc { margin-bottom: 20px; font-size: 15px; color: var(--gray-700); }
.new_win .win_ul { display: flex; gap: 8px; margin-bottom: 24px; }

/* 페이지네이션 (그누보드 $write_pages) */
.pg_wrap { display: flex; justify-content: center; margin-top: 48px; }
.pg { display: flex; gap: 4px; }
.pg_page, .pg_current {
    display: flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 10px;
    font-size: 15px;
    border: 1px solid var(--gray-300);
    transition: background .2s, color .2s, border-color .2s;
}
.pg_page { color: var(--gray-700); background: #fff; }
.pg_page:hover { background: var(--gray-100); color: var(--navy-900); }
.pg_current {
    color: #fff; font-weight: 700;
    background: var(--navy-900); border-color: var(--navy-900);
}

/* ══════════════════════════════════════════════════════════
   서브 페이지 시각 컴포넌트
   글만 나열되지 않게 쓰는 것들. 전부 사진 없이도 성립한다.
   ══════════════════════════════════════════════════════════ */

/* ── 서브 상단 비주얼 배경 사진 ───────────────────────────
   page/_page.php 가 그룹별 배경을 지정한다. 파일이 없으면
   기존 네이비 그라데이션이 그대로 보인다. */
/* 레이어 순서: 사진(0) → 영상(1) → 스크림(2) → 글자(3) */
.sub-visual { position: relative; overflow: hidden; }
.sub-visual > .inner { position: relative; z-index: 3; }
.sub-visual-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    transform: scale(1.04);
}
/* 사진 위에 얹히는 배경 영상. 재생이 시작돼야 보이므로
   로딩 중·자동재생 차단 시에는 사진이 그대로 남는다. */
.sub-visual-video {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s var(--ease);
}
.sub-visual-video.is-on { opacity: 1; }
/* 배경(사진·영상)이 있을 때만 깔아서 제목 가독성을 확보한다.
   배경이 없으면 .sub-visual 자체의 네이비 그라데이션만 보인다. */
.sub-visual.has-bg::before {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(100deg, rgba(10,31,56,.9) 0%, rgba(13,44,75,.66) 60%, rgba(20,64,107,.5) 100%);
}

/* ── KPI 블록 — 문단에 묻히는 수치를 끄집어낸다 ───────────── */
.pg-kpi {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 1px;
    background: var(--gray-200); border: 1px solid var(--gray-200);
}
.pg-kpi li { padding: 26px 18px; text-align: center; background: #fff; }
.pg-kpi strong {
    display: block;
    font-size: 40px; font-weight: 800; line-height: 1;
    letter-spacing: -.03em; color: var(--navy-900);
}
.pg-kpi strong span { margin-left: 2px; font-size: 17px; color: var(--accent-600); }
.pg-kpi em {
    display: block; margin-top: 10px;
    font-size: 14px; font-style: normal; font-weight: 600; color: var(--gray-700);
}
.pg-kpi i {
    display: block; margin-top: 4px;
    font-size: 12px; font-style: normal; color: var(--gray-500);
}

/* ── 공정 플로우 — 가로 스텝 체인 ─────────────────────────── */
/* overflow:hidden — 화살표(::after)는 gap 안에 그려지는데, 줄바꿈으로 어떤
   항목이 행의 마지막이 되면 화살표가 컨테이너 밖으로 20px 삐져나와 문서 폭을
   늘린다(768px 에서 6px 초과). 행 끝 화살표만 잘라낸다. */
.pg-flow { display: flex; flex-wrap: wrap; gap: 30px; overflow: hidden; }
.pg-flow li {
    position: relative; flex: 1 1 140px;
    padding: 20px 14px; text-align: center;
    background: var(--gray-100);
    border-top: 3px solid var(--accent-500);
}
.pg-flow li::after {
    content: ''; position: absolute; top: 50%; right: -30px;
    width: 0; height: 0; transform: translateY(-50%);
    border-left: 10px solid var(--gray-300);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}
.pg-flow li:last-child::after { display: none; }
.pg-flow strong {
    display: block; font-size: 15px; font-weight: 700; color: var(--navy-900);
}
.pg-flow span {
    display: block; margin-top: 6px;
    font-size: 13px; line-height: 1.55; color: var(--gray-500);
}
/* 강조 단계 (핵심 공정) */
.pg-flow li.is-key { background: var(--navy-900); border-top-color: var(--accent-500); }
.pg-flow li.is-key strong { color: #fff; }
.pg-flow li.is-key span { color: rgba(255,255,255,.66); }

/* ── 사진 프레임 ─────────────────────────────────────────
   실제 파일이 있으면 사진, 없으면 자리만 잡아두는 프레임.
   나중에 img/ 에 파일만 넣으면 코드 수정 없이 교체된다. */
.pg-figure { margin: 0; }
.pg-figure img { display: block; width: 100%; height: auto; }
.pg-figure-ph {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    aspect-ratio: 4 / 3;
    background: var(--gray-100);
    border: 1px dashed var(--gray-300);
    color: var(--gray-500);
}
.pg-figure-ph i { font-size: 26px; opacity: .5; }
.pg-figure-ph span { font-size: 13px; letter-spacing: .02em; }
.pg-figure figcaption {
    margin-top: 10px;
    font-size: 13px; line-height: 1.6; color: var(--gray-500);
}
.pg-figure figcaption strong {
    display: block; margin-bottom: 2px;
    font-size: 14px; font-weight: 700; color: var(--navy-900);
}

/* 사진 + 설명 2단 */
.pg-media { display: grid; grid-template-columns: 360px 1fr; gap: 34px; align-items: start; }
.pg-media--rev { grid-template-columns: 1fr 360px; }
.pg-media--rev .pg-figure { order: 2; }
.pg-media p { font-size: 15px; line-height: 1.75; color: var(--gray-700); }
.pg-media p + p { margin-top: 12px; }

/* 사진 여러 장 */
.pg-figrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pg-figrow--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1023px) {
    .pg-media, .pg-media--rev { grid-template-columns: 1fr; gap: 22px; }
    .pg-media--rev .pg-figure { order: 0; }
    .pg-media .pg-figure { max-width: 420px; }
    .pg-figrow { grid-template-columns: repeat(2, 1fr); }
    .pg-kpi strong { font-size: 34px; }
}
@media (max-width: 639px) {
    /* 좁은 화면에서는 스텝을 세로로 쌓고 화살표를 아래로 돌린다 */
    .pg-flow { flex-direction: column; gap: 22px; }
    .pg-flow li { flex: none; }
    .pg-flow li::after {
        top: auto; bottom: -22px; right: 50%;
        transform: translateX(50%);
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 10px solid var(--gray-300);
        border-bottom: 0;
    }
    .pg-figrow, .pg-figrow--2 { grid-template-columns: 1fr; }
    .pg-kpi { grid-template-columns: repeat(2, 1fr); }
    /* 홀수 개일 때 마지막 칸이 빈 상자로 남는다 → 한 줄 전체를 쓰게 한다 */
    .pg-kpi li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .pg-kpi strong { font-size: 30px; }
}

/* ── 인증서 갤러리 ───────────────────────────────────────
   스캔 이미지가 들어오면 썸네일이 뜨고, 없으면 자리만 잡는다.
   data-full 이 있는 항목만 클릭해서 확대할 수 있다. */
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cert-item {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--gray-200);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cert-item[data-full] { cursor: zoom-in; }
.cert-item[data-full]:hover,
.cert-item[data-full]:focus-visible {
    border-color: var(--accent-500);
    box-shadow: 0 6px 22px rgba(10,31,56,.12);
}
.cert-thumb {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1.414;          /* A4 세로 비율 */
    background: var(--gray-100); overflow: hidden;
}
.cert-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cert-thumb-ph {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 100%;
    border-bottom: 1px dashed var(--gray-300);
    color: var(--gray-500);
}
.cert-thumb-ph i { font-size: 22px; opacity: .5; }
.cert-thumb-ph span { font-size: 12px; }
.cert-body { padding: 16px 16px 18px; border-top: 1px solid var(--gray-200); }
.cert-name { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--navy-900); }
.cert-desc { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--gray-700); }
.cert-meta { margin-top: 8px; font-size: 12px; color: var(--gray-500); }
.cert-meta strong { font-weight: 700; color: var(--accent-600); }

/* 확대 보기 */
.cert-viewer {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 60px 24px 24px;
    background: rgba(10,31,56,.92);
}
.cert-viewer[hidden] { display: none; }
.cert-viewer-inner { position: relative; display: flex; flex-direction: column; max-width: 880px; }
.cert-viewer img {
    max-width: 100%; max-height: calc(100vh - 160px);
    object-fit: contain; background: #fff;
}
.cert-viewer-cap { margin-top: 14px; text-align: center; font-size: 14px; color: rgba(255,255,255,.9); }
.cert-viewer-close {
    position: absolute; top: -46px; right: 0;
    width: 38px; height: 38px;
    font-size: 30px; line-height: 1; color: #fff;
}

@media (max-width: 1023px) {
    .cert-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
    .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .cert-body { padding: 12px 12px 14px; }
    .cert-name { font-size: 14px; }
}

/* ── 실적 지표 스트립 (사업분야 섹션 안) ─────────────────────
   독립 섹션으로 두면 화면 한 장을 얇은 숫자 밴드에 쓰게 되고
   흐름도 끊긴다. 사업분야 카드 위에 붙여 근거로 읽히게 한다. */
.stats-strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-bottom: 32px;
    background: var(--gray-200);
    border: 1px solid var(--gray-200);
}
.stats-strip li { background: #fff; }
.stats-strip a {
    display: flex; align-items: baseline; justify-content: center;
    gap: 10px;
    height: 100%; padding: 20px 16px;
    transition: background .2s var(--ease);
}
.stats-strip a:hover { background: var(--gray-100); }
.stats-strip a:hover em { color: var(--accent-600); }
.stats-strip strong {
    font-size: 30px; font-weight: 800; line-height: 1;
    letter-spacing: -.02em; color: var(--navy-900);
}
.stats-strip strong span {
    font-size: 16px; font-weight: 700; color: var(--accent-600);
}
.stats-strip em {
    font-size: 14px; font-style: normal; color: var(--gray-500);
    white-space: nowrap;
}
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    height: 50px; padding: 0 32px;
    font-size: 15px; font-weight: 600;
    color: #fff; background: var(--accent-500);
    border-radius: var(--radius);
    transition: background .25s;
}
.btn-primary:hover { background: var(--accent-600); }

/* ==========================================================================
   푸터 — 가운데 정렬 미니멀
   ========================================================================== */
#ft { position: relative; background: var(--gray-100); text-align: center; }
.ft-links {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 0;
    padding: 22px 32px;
    border-bottom: 1px solid var(--gray-200);
}
.ft-links a {
    position: relative;
    padding: 0 22px;
    font-size: 14px; color: var(--gray-700);
    transition: color .2s;
}
.ft-links a + a::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 12px; background: var(--gray-300);
}
.ft-links a:hover { color: var(--navy-900); }
.ft-links .is-strong { font-weight: 700; color: var(--navy-900); }

.ft-info { padding: 32px 32px 40px; }
.ft-addr { font-size: 14px; color: var(--gray-700); }
.ft-copy { margin-top: 8px; font-size: 13px; color: var(--gray-500); }

#top_btn {
    position: fixed; right: 28px; bottom: 28px; z-index: 150;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px;
    width: 54px; height: 54px;
    color: #fff; background: var(--navy-900);
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s, background .2s;
}
#top_btn span { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
#top_btn.is-visible { opacity: 1; visibility: visible; }
#top_btn:hover { background: var(--accent-600); }

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1279px) {
    .hero-title { font-size: 58px; }
    .hero-quick a { width: 96px; padding: 18px 6px; }
    .hero-quick em { font-size: 10px; }
    .cardlist { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
    .allmenu-list { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
}

@media (max-width: 1023px) {
    /* 태블릿 이하에서는 가로 GNB 를 접고 햄버거(전체메뉴)만 쓴다 */
    #gnb { display: none; }
    .gnb-bg { display: none; }
    .hd-lang { display: none; }

    /* 퀵메뉴는 히어로 아래로 내려 가로 스크롤 처리 */
    .hero { min-height: 620px; }
    .hero-copy {
        position: static; transform: none;
        max-width: none;
        padding: calc(var(--hd-h) + 90px) 24px 0;
    }
    .hero-title { font-size: 42px; }
    .hero-sub { font-size: 16px; margin-top: 18px; }

    .hero-quick {
        position: absolute; right: auto; left: 0; transform: none;
        top: auto; bottom: 86px;
        width: 100%;
    }
    .hero-quick ul {
        gap: 4px; padding: 0 16px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .hero-quick a { width: 92px; flex: none; padding: 14px 6px; }
    .hero-quick i { font-size: 21px; }
    .hero-quick-plus { display: none; }
    .hero-news-toggle { left: 24px; bottom: 28px; }

    .sec { padding: 72px 0; }
    .sec-title { font-size: 30px; }
    .inner { padding: 0 24px; }

    .bizlist { grid-template-columns: 1fr; gap: 20px; }

    .sub-visual { height: 200px; }
    .sub-visual-title { font-size: 30px; }
    .container-sub { padding: 56px 0 80px; }
    .container-sub > * { padding: 0 24px; }

    /* LNB → 가로 탭
       주의: 그리드 아이템의 min-width 기본값은 auto 라서, 안쪽 탭이
       white-space:nowrap 이면 열 자체가 탭 전체 길이(수질환경사업 기준 950px)
       까지 벌어진다. .lnb-list 의 overflow-x:auto 는 그 뒤에야 걸리므로
       소용이 없고, 결국 문서 폭이 950px 이 돼 모바일 브라우저가 페이지
       전체를 축소해 버렸다. minmax(0,1fr) + min-width:0 으로 막는다. */
    .sub-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .lnb, .sub-content { min-width: 0; }
    .lnb { position: static; }
    .lnb-title { display: none; }
    .lnb-list {
        display: flex; gap: 6px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--gray-200);
    }
    .lnb-list li + li { margin-top: 0; }
    .lnb-list a { white-space: nowrap; }
    .lnb-list .is-active a { background: transparent; border-bottom: 2px solid var(--accent-500); }

    .pg-title { font-size: 28px; }
    .pg-cards, .pg-cards--2 { grid-template-columns: repeat(2, 1fr); }

    .allmenu-list { grid-template-columns: repeat(2, 1fr); }
    .allmenu-tit strong { font-size: 20px; }


    .spec-list { grid-template-columns: repeat(2, 1fr); }
    .org-list { grid-template-columns: repeat(2, 1fr); }
    .hist-row { grid-template-columns: 130px 1fr; gap: 20px; }
    .hist-year { font-size: 24px; }

    .bd-grid { grid-template-columns: repeat(2, 1fr); }
    .map-canvas { height: 360px; }
    .logo-grid { grid-template-columns: repeat(3, 1fr); }

    /* 지표 스트립 — 라벨 nowrap + 아이템 min-width:auto 조합이
       4열을 화면 밖으로 밀어낸다. 줄바꿈을 허용하고 열을 줄인다. */
    .stats-strip li, .stats-strip a { min-width: 0; }
    .stats-strip a { padding: 18px 12px; }
    .stats-strip em { white-space: normal; }
}

@media (max-width: 639px) {
    body { font-size: 15px; }
    :root { --hd-h: 62px; }

    .hero { min-height: 560px; }
    .hero-title { font-size: 32px; }
    .hero-copy { padding-top: calc(var(--hd-h) + 60px); }

    .sec { padding: 56px 0; }
    .sec-head { margin-bottom: 28px; }
    .sec-title { font-size: 25px; }

    .cardlist { grid-template-columns: 1fr; gap: 28px; }

    /* 지표 스트립 — 폰에서는 2열, 숫자 위 / 라벨 아래 */
    .stats-strip { grid-template-columns: repeat(2, 1fr); margin-bottom: 24px; }
    .stats-strip a {
        flex-direction: column; align-items: center; justify-content: center;
        gap: 4px; padding: 16px 10px; text-align: center;
    }
    .stats-strip strong { font-size: 25px; }
    .stats-strip em { font-size: 13px; }

    /* 사업 카드는 사진 위 / 텍스트 아래로 */
    .bizcard { grid-template-columns: 1fr; }
    .bizcard-photo { min-height: 180px; }
    .bizcard-body { padding: 24px; }
    .bizcard-title { font-size: 21px; }

    .allmenu-list { grid-template-columns: 1fr; gap: 24px; }
    .allmenu-body { padding: 24px 24px 60px; }

    .pg-title { font-size: 24px; }
    .pg-lead { font-size: 15px; }
    .pg-cards, .pg-cards--2 { grid-template-columns: 1fr; }
    .pg-table th { width: 104px; padding: 14px; font-size: 14px; }
    .pg-table td { padding: 14px; font-size: 14px; }
    .pg-cta { padding: 24px; }
    .pg-cta .btn-primary { width: 100%; }

    .ft-links { gap: 4px 0; padding: 18px 20px; }
    .ft-links a { padding: 4px 14px; font-size: 13px; }
    .ft-links a + a::before { display: none; }
    .ft-info { padding: 24px 20px 32px; }
    .ft-addr { font-size: 13px; }


    .spec-list { grid-template-columns: 1fr; }
    .org-list { grid-template-columns: 1fr; }
    .hist-row { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
    .hist-year { font-size: 22px; }
    .loc-item { padding: 22px; }
    .loc-info li { flex-direction: column; gap: 2px; }
    .client-list li { padding: 10px 16px; font-size: 14px; }
    .logo-grid { grid-template-columns: repeat(2, 1fr); }
    .logo-item { min-height: 92px; padding: 16px; }
    .logo-item img { max-height: 42px; }

    /* 게시판 — 번호/조회수는 숨기고 제목+날짜만 */
    .bd-item { gap: 12px; padding: 16px 4px; flex-wrap: wrap; }
    .bd-num { width: auto; min-width: 34px; }
    .bd-hit { display: none; }
    .bd-subject { flex: 1 1 100%; order: 2; white-space: normal; }
    .bd-meta { order: 3; }
    .bd-grid { grid-template-columns: 1fr; gap: 28px; }
    .bd-head { padding-bottom: 14px; }
    .bd-search { flex-wrap: wrap; }
    .bd-search input[type=text] { flex: 1 1 100%; }

    /* 글쓰기 폼 — 라벨을 필드 위로 */
    .bw-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
    .bw-label { padding-top: 0; }
    .bw-field--grid { grid-template-columns: 1fr; }
    .bw-content textarea { min-height: 260px; }
    .bw-btns { flex-direction: column-reverse; }
    .bw-btn { width: 100%; }

    /* 지도 */
    .map-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .map-tab { flex: none; padding: 11px 18px; font-size: 14px; white-space: nowrap; }
    .map-canvas { height: 300px; }
    .map-info { padding: 22px; }
    .map-info-rows li { flex-direction: column; gap: 2px; }
    .map-info-btns { flex-direction: column; }

    #top_btn { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}