/* 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    line-height: 1.5;
    background-color: #fff;
    overflow-x: hidden;
}

ul { list-style: none; }
a { text-decoration: none; color: inherit; }

/* 접근성: 화면엔 숨기되 스크린리더에선 읽힘 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pc-only {
  display: inline;
}

/* ---------------- HEADER ---------------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    z-index: 9999;
    
    /* 테두리 및 그림자 */
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    
    /* 애니메이션 효과 */
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.header-inner {
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 40px;
    
    /* 로고와 메뉴 양쪽 정렬 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 로고 스타일 */
.header-title a {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    text-decoration: none; /* 링크 밑줄 제거 */
}

/* 메뉴 리스트 (ul) */
.header-nav ul {
    display: flex;
    gap: clamp(20px, 8vw, 120px); /* 반응형 간격 */
    list-style: none; /* 리스트 점 제거 */
}

/* 메뉴 아이템 (a) */
.header-nav ul li a {
    font-size: 18px;
    font-weight: 400;
    color: #333;
    text-decoration: none; /* 링크 밑줄 제거 */
    transition: font-weight 0.2s; /* 호버 효과 부드럽게 */
}

/* 메뉴 호버 효과 */
.header-nav ul li a:hover {
    font-weight: 700;
}

/* 모바일 헤더 메뉴 (햄버거 + 오프캔버스) */
.mobile-menu-btn {
    display: none; /* 모바일에서만 표시 */
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.mobile-menu-icon {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: #111;
    border-radius: 2px;
}

.mobile-menu-icon::before,
.mobile-menu-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: #111;
    border-radius: 2px;
}

.mobile-menu-icon::before { top: -6px; }
.mobile-menu-icon::after { top: 6px; }

.mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 10000;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 86vw);
    background: #fff;
    box-shadow: -10px 0 24px rgba(0,0,0,0.18);
    transform: translateX(105%);
    transition: transform 0.25s ease;
    z-index: 10001;
    padding: 84px 18px 18px 18px;
}

.mobile-menu-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-menu-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-menu-list a {
    display: block;
    padding: 14px 12px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 500;
    color: #111;
}

.mobile-menu-list a:hover {
    background: rgba(0,0,0,0.05);
}

.mobile-menu-list a.active {
    font-weight: 700;
    background: rgba(0,0,0,0.06);
}

body.menu-open {
    overflow: hidden;
}

body.menu-open .mobile-menu {
    transform: translateX(0);
}

body.menu-open .mobile-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* ---------------- HERO ---------------- */
.hero {
    position: relative;
    width: 100%;
    height: 600px;
    background-color: #999;
    display: flex;
    justify-content: left;
    align-items: center;
    text-align: left;
    margin-top: 70px;
    overflow: hidden; /* 이미지가 튀어나가는 것 방지 */
}

/* 배경 이미지 */
.hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    background-image: url('../images/main.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    z-index: 0; /* 배경의 층수 */
}

/* 텍스트 컨테이너 (수정된 부분) */
.hero-content {
    /* [중요] 배경 위에 올라오게 하기 위한 설정 */
    position: relative; 
    z-index: 1; /* 배경(0)보다 높은 숫자로 설정 */

    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding-left: clamp(32px, 7vw, 120px);
    padding-right: clamp(16px, 5vw, 60px);

    box-sizing: border-box;
}

.hero-inner h2 {
    font-size: 60px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 32px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.hero-inner p {
    font-size: 20px;
    color: #f1f1f1;
    font-weight: 400;
    line-height: 1.8;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

@media (min-width: 768px) {
    .hero-inner h2 {
        min-width: 700px;
        font-size: 70px;
    }
    .hero-inner p {
        min-width: 700px;
        font-size: 22px;
    }
}


/* ---------------- COMPANY INTRO ---------------- */
.company-intro {
    width: 100%;
    height: 600px;
    padding: 100px 20px;
    background-color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-content h2 {
    font-size: 30px;
    font-weight: 700;
    color: #222;
    line-height: 1.6;
    margin-bottom: 32px;
}

.intro-content .highlight {
    color: #007BFF; /* 이미지의 파란색 */
    font-weight: 700;
}

.intro-content .sub-desc {
    font-size: 20px;
    color: #666;
    line-height: 1.6;
}

/* ---------------- SLIDER SECTIONS ---------------- */
.slider-section {
    width: 100%;
    padding: 60px 0 80px 0;
    background-color: #fff;
}

.slider-section.bg-gray {
    /* 주요 생산품 등 구분을 위해 배경색 다르게 할 경우 */
    background-color: #fff; 
}

.slider-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

/* 섹션 헤더 (제목 + 자세히 버튼) */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

.section-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #111;
}

.details-btn {
    background: #fff;
    border: 1px solid #3e3e3e;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    color: #3e3e3e;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s;
}

.details-btn:hover {
    border-color: #000000;
    color: #000;
}

/* 슬라이더 영역 래퍼 */
.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.slider-container {
    overflow: hidden;
    width: 100%;
}

.slider-track {
    display: flex;
    gap: 20px; /* 아이템 사이 간격 */
    transition: transform 0.5s ease-in-out;
}

/* 슬라이드 아이템 (반응형: PC 기준 4개 노출) */
.slider-item {
    flex: 0 0 calc(25% - 15px); /* 4개 배치 (gap 고려) */
    min-width: 250px;
    text-align: center;
}

.img-box {
    width: 100%;
    height: 250px; /* 이미지 높이 고정 */
    background-color: #e0e0e0;
    overflow: hidden;
    margin-bottom: 15px;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.slider-item:hover .img-box img {
    transform: scale(1.05); /* 호버 시 약간 확대 효과 */
}

.slider-item p {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

/* 슬라이드 좌우 버튼 */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-80%); /* 이미지 중앙 정렬 보정 */
    width: 50px;
    height: 50px;
    background-color: rgba(241, 241, 241, 0.8);
    border: 1px solid #333;
    border-radius: 50%; /* 원형 버튼 */
    font-size: 18px;
    color: #333;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.3s;
}

.slider-btn:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

.prev-btn { left: -30px; }
.next-btn { right: -30px; }


/* ---------------- FOOTER ---------------- */
.footer {
    background-color: #2F3E59; /* 이미지의 짙은 남색 */
    color: #fff;
    padding: 30px 0;
    font-size: 14px;
}

.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-info {
    display: flex;
    gap: 10px;
    color: #ccc;
}

.divider {
    color: #555;
    font-size: 12px;
    margin: 0 2px;
}

.footer-copy {
    color: #888;
}

/* ---------------- MEDIA QUERIES ---------------- */
@media (max-width: 992px) {
    .slider-item {
        flex: 0 0 calc(33.33% - 14px); /* 태블릿 3개 */
    }
    .pc-only {
        display: none;
    }
}

@media (max-width: 768px) {

    :root {
        --mobile-slider-gap: 10px;
    }

    .pc-only {
        display: none;
    }

    /* Header */
    .header-inner { padding: 0 16px; }
    .header-title a { font-size: 22px; }

    .header-nav { display: none; }
    .mobile-menu-btn { display: inline-flex; }

    /* Company intro */
    .company-intro {
        height: auto;
        padding: 72px 16px;
    }
    .intro-content h2 {
        font-size: clamp(18px, 4.8vw, 24px);
        margin-bottom: 18px;
    }
    .intro-content .sub-desc {
        font-size: 15px;
    }

    /* Slider sections (mobile: 1 item per view + buttons + swipe) */
    .slider-section { padding: 50px 0 60px 0; }
    .slider-inner { padding: 0 16px; position: relative; }

    .section-header {
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 18px;
        padding-bottom: 12px;
    }

    .details-btn { margin-left: auto; }

    /* ✅ 버튼이 보이도록 */
    .slider-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;

        border-radius: 999px;
        border: 1px solid rgba(0,0,0,0.15);
        background: rgba(255,255,255,0.92);
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);

        /* 컨테이너 위에 뜨게 */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;

        /* 터치감 */
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }

    /* ✅ 버튼이 비활성일 때 자연스럽게 */
    .slider-btn:disabled {
        opacity: 0.35;
        pointer-events: none;
    }

    /* ✅ 슬라이더 래퍼가 버튼의 absolute 기준이 되도록 */
    .slider-wrap,
    .slider-inner { position: relative; }

    .slider-container {
        overflow-x: auto;
        overflow-y: hidden;

        /* ✅ 스와이프 + 스냅 */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        padding: 0;
        scrollbar-width: none;
        touch-action: pan-y;
    }
    .slider-container::-webkit-scrollbar { display: none; }

    .slider-track {
        gap: var(--mobile-slider-gap);
        padding-bottom: 4px;
        padding-left: calc((100% - (100% - var(--mobile-slider-gap))) / 2);
        padding-right: calc((100% - (100% - var(--mobile-slider-gap))) / 2);
    }

    /* ✅ 화면에 1장만 보이게 고정 */
    .slider-item {
        flex: 0 0 100%;            /* ✅ 한 화면 1장 고정 */
        min-width: 100%;
        scroll-snap-align: start;
    }

    .img-box { height: 220px; }
    .img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;         /* ✅ 두 섹션 “느낌” 통일 핵심 */
        display: block;
    }

    /* Footer */
    .footer-inner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .footer-info {
        flex-direction: column;
        gap: 5px;
    }
    .divider { display: none; }
}


@media (max-width: 480px) {
    .hero { height: 380px; }
    .slider-item { flex: 0 0 88%; }
}


/* =========================================
   [서브 페이지 전용 스타일] - intro.html
   ========================================= */

/* 헤더: 서브페이지는 항상 흰색 배경에 검은 글씨 */
.header.sub-header {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.header.sub-header .header-title a,
.header.sub-header .header-nav ul li a {
    color: #333;
}
.header-nav ul li a.active {
    font-weight: 700;
    color: #000;
}

/* 메인 컨텐츠 영역 (헤더 높이만큼 여백) */
.sub-page-content {
    margin-top: 70px;
    padding-bottom: 100px;
    background-color: #fff;
}

/* 공통 섹션 스타일 */
.intro-section {
    padding: 80px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.section-inner {
    padding: 0 20px;
}

.section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #111;
}
.mb-50 { margin-bottom: 50px; }

/* 서브페이지(회사소개 등) 모바일 텍스트/간격 최적화 */
@media (max-width: 768px) {
    .intro-section { padding: 56px 0; }
    .intro-section img { display:block; margin:0 auto; }
    .section-inner { padding: 0 16px; }
    .section-title { font-size: 22px; }
    .img-wrapper img { width: 100%; }
    .company-logo img, .intro-logo img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    .map-wrap,
    .map-container,
    .location-map {
        width: 100%;
    }

    .map-wrap iframe,
    .map-container iframe {
        width: 100%;
        height: 320px;
        border: 0;
        display: block;
    }

    .product-list.bottom,
        .product-grid.bottom {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .product-list.bottom .product-item,
    .product-grid.bottom .product-item {
        width: 100%;
    }

    /* 회사소개 로고(오른쪽 로고 영역) 모바일 100% */
    .right-logo {
        width: 100%;
        display: flex;
        justify-content: center;  /* ✅ 수평 중앙 */
        align-items: center;
    }

    .right-logo img {
        display: block;
        width: min(80%, 320px);  /* ✅ 너무 커지지 않게 */
        max-width: 320px;
        height: auto;
        margin: 0 auto;          /* (보험) */
    }

    /* 회사소개 오시는길 지도(iframe) 모바일 100% */
    iframe.location-map {
        width: 100% !important;
        height: 320px;
        border: 0;
        display: block;
    }
}

/* ----------------------------------
   1. 레이아웃 분할 (이미지 vs 텍스트)
   ---------------------------------- */
.split-layout {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: stretch;
}

.left-content, .right-content {
    flex: 1;
}

.right-logo {
    width: 100%;
    height: auto;

    display: flex;
    justify-content: center;    /* ✅ 가로 가운데 */
    align-items: center;
}

/* 이미지 래퍼 */
.img-wrapper img {
    width: 90%;
    height: auto;
    border-radius: 4px; /* 살짝 둥글게 */
    object-fit: cover;
    display: block;
    margin: 0 auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* ----------------------------------
   2. 회사 개요 테이블 스타일
   ---------------------------------- */
.info-table {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /*border-top: 2px solid #333;*/
}

.info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* 텍스트 상단 정렬 */
}
 
.info-row .label {
    font-size: 16px;
    font-weight: 700;
    width: 80px;
    color: #333;
}

.info-row .divider {
    color: #ccc;
    margin: 0 15px;
    font-weight: 300;
}

.info-row .value {
    color: #555;
    width: 200px; /* 기본 너비 */
    font-size: 16px;
}

/* 주생산품처럼 내용이 길 경우 */
.info-row .value.full-width {
    width: calc(100% - 130px); /* 전체 너비에서 라벨 제외 */
    line-height: 1.6;
}

/* 두 번째 줄부터는 라벨 간격 조정 (PC 화면 기준 2열 배치) */
@media (min-width: 768px) {
    .info-row {
        display: flex;
        align-items: baseline;
    }
    /* 설립일 등 오른쪽 열 */
    .info-row .label:nth-of-type(2) {
        margin-left: 30px; 
    }
}

/* ----------------------------------
   3. 오시는 길 텍스트
   ---------------------------------- */
.location-info {
    margin-bottom: 32px;
}

.location-info h4 {
    font-size : 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.location-info p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

.gray-text {
    color: #888;
    font-size: 14px;
}

/* ----------------------------------
   4. 조직도 (Org Chart) - 핵심 디자인
   ---------------------------------- */
.org-section {
    text-align: center; /* 제목 중앙 정렬 */
}

.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

/* 박스 공통 스타일 */
.org-box {
    background-color: #EBF2F6; /* 이미지의 연한 하늘색 */
    border: 1px solid #C0D0D8;
    color: #333;
    text-align: center;
    padding: 15px 10px;
    width: 160px;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* CEO 박스 */
.org-box.ceo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 10px;
}
.org-box.ceo strong { font-size: 16px; }

/* 선 색상 */
.org-chart .line-vertical-1,
.org-chart .line-horizontal,
.org-chart .line-vertical-2 {
    background-color: #999;
}

/* 1단 세로선 */
.line-vertical-1 {
    width: 1px;
    height: 40px;
}

/* 가로선 (전체 팀 너비를 커버) */
.line-horizontal {
    width: 75%; /* 팀들의 전체 너비에 맞춰 조정 (대략 3/4) */
    height: 1px;
}

/* 레벨 2 컨테이너 */
.level-2 {
    display: flex;
    justify-content: center;
    gap: 40px; /* 박스 사이 간격 */
    width: 100%;
}

.team-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2단 세로선 (가로선에서 박스로 내려오는 선) */
.line-vertical-2 {
    width: 1px;
    height: 20px;
    margin-bottom: 0;
}

.org-box.team {
    padding: 12px 0;
}

/* ----------------------------------
   반응형 처리 (Mobile)
   ---------------------------------- */
@media (max-width: 992px) {
    .split-layout {
        flex-direction: column;
        gap: 30px;
    }
    .split-layout.reverse-mobile {
        flex-direction: column-reverse;
    }
    .info-row .value { width: auto; }
    .line-horizontal { width: 90%; }
    .level-2 { gap: 10px; }
    .org-box { width: 100px; font-size: 13px; }
}

@media (max-width: 576px) {
    .level-2 {
        flex-wrap: wrap; /* 모바일에서 두 줄로 */
        gap: 10px;
    }
    .line-horizontal { display: none; } /* 모바일에선 선 복잡해서 숨김 */
    .line-vertical-2 { display: none; }
    
    .team-wrapper {
        width: 45%;
        margin-top: 10px;
    }
    .org-box { width: 100%; }
}

/* =========================================
   [설비소개 페이지 전용 스타일] - facility.html
   ========================================= */

.facility-page-section {
    padding: 60px 0 100px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.page-title {
    font-size: 30px;
    font-weight: 700;
    color: #111;
    margin-bottom: 40px;
    padding-left: 20px; /* 좌측 여백 */
}

/* GRID 레이아웃: 무한 확장 대응
   - PC: 2열 (repeat(2, 1fr))
   - 간격: 가로 40px, 세로 80px 
*/
.facility-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px; /* 좌우 카드 사이 간격 넓게 */
    row-gap: 80px;    /* 위아래 줄바꿈 간격 */
    padding: 0 20px;
    margin-bottom: 80px;
}

/* 개별 설비 카드 */
.facility-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 1. 카드 헤더 (제목 부분) */
.card-header {
    background-color: #F1F1F1; /* 연한 회색 배경 */
    padding: 5px 20px;
    margin-bottom: 20px;
    border-left: 5px solid #555; /* 좌측 포인트 선 (선택사항, 이미지 느낌 살림) */
}

.card-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

/* 2. 카드 이미지 */
.card-image {
    width: 100%;
    height: 350px; /* 이미지 높이 고정 */
    background-color: #ccc;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.facility-card:hover .card-image img {
    transform: scale(1.03);
}

/* 3. 스펙 테이블 (핵심 디자인) */
.card-specs table {
    width: 100%;
    border-collapse: separate; /* 셀 간격 분리 가능하도록 */
    border-spacing: 0 2px;     /* 행 사이 흰색 간격 2px */
}

/* 왼쪽 라벨 (어두운 회색) */
.card-specs th {
    background-color: #5D5D5D;
    color: #fff;
    font-weight: 500;
    width: 30%; /* 라벨 너비 */
    padding: 10px 0;
    text-align: center;
    font-size: 16px;
}

/* 오른쪽 값 (밝은 회색) */
.card-specs td {
    background-color: #F5F5F5;
    color: #333;
    padding: 10px 20px;
    text-align: left;
    font-size: 16px;
}

/* ----------------------------------
   페이지네이션 (하단 < 1 / 10 >)
   ---------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.page-btn {
    background: #fff;
    border: 1px solid #ddd;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    transition: all 0.3s;
}

.page-btn:hover {
    border-color: #333;
    color: #333;
}

.page-num {
    font-size: 14px;
    color: #666;
}
.page-num strong {
    color: #000;
    font-weight: 700;
}

/* ----------------------------------
   반응형 (Mobile)
   ---------------------------------- */
@media (max-width: 992px) {
    .facility-grid {
        column-gap: 30px;
    }
}

@media (max-width: 768px) {
    .facility-page-section { padding: 44px 0 80px 0; }
    .page-title {
        font-size: 24px;
        margin-bottom: 24px;
        padding-left: 16px;
    }

    .facility-grid {
        grid-template-columns: 1fr; /* 모바일에서는 1열로 변경 */
        row-gap: 50px;
    }
    .facility-grid-2 {
        grid-template-columns: 1fr !important;
        row-gap: 50px;
        column-gap: 0 !important;
    }
    .card-image {
        height: 250px; /* 모바일 이미지 높이 줄임 */
    }
    .card-header h3 { font-size: 20px; }
    .card-specs th,
    .card-specs td { font-size: 14px; }
}

/* =========================================
   [주요생산품 페이지 전용 스타일] - product.html
   ========================================= */

.product-page-section {
    padding: 60px 0 100px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.product-list {
    display: flex;
    flex-direction: column;
    gap: 80px; /* 제품 간 간격 */
    padding: 0 20px;
}

/* 개별 제품 행 (Row) */
.product-row {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* 상단 정렬 */
}

/* 1. 좌측 메인 이미지 */
.product-main-img {
    flex: 0 0 45%; /* 좌측 너비 45% */
    height: 400px; /* 고정 높이 */
    background-color: #f0f0f0;
    overflow: hidden;
}

.product-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. 우측 상세 정보 영역 */
.product-details {
    flex: 1; /* 나머지 공간 차지 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 텍스트는 위, 슬라이더는 아래 */
    height: 400px; /* 좌측 이미지와 높이 맞춤 */
}

.product-info-text h3 {
    font-size: 22px;
    font-weight: "bold";
    color: #333;
    margin-bottom: 10px;
    
    background-color: #F1F1F1; /* 연한 회색 배경 */
    padding: 5px 20px;
    border-left: 5px solid #555; /* 좌측 포인트 선 (선택사항, 이미지 느낌 살림) */
}

.product-info-text p {
    font-size: 20px;
    color: #555;
    font-weight: 500; 
    /*margin-left: 26px;*/
}

/* 3. 미니 슬라이더 (우측 하단) */
.mini-slider-wrapper {
    position: relative;
    width: 100%;
    padding: 0 50px; /* 좌우 버튼 공간 확보 */
}

.mini-slider-container {
    overflow: hidden;
    width: 100%;
}

.mini-slider-track {
    display: flex;
    gap: 15px; /* 썸네일 간격 */
    transition: transform 0.4s ease;
}

/* 미니 아이템 (한 화면에 3개 보이도록 계산) */
.mini-item {
    flex: 0 0 calc(33.333% - 10px); /* 3등분에서 gap 보정 */
    text-align: center;
}

.mini-img {
    width: 100%;
    height: 220px;
    background-color: #f9f9f9;
    margin-bottom: 10px;
}
.mini-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-img img:hover {
  transform: scale(1.1);
  opacity: 0.85;
}

.mini-item span {
    font-size: 12px;
    color: #666;
    letter-spacing: -0.5px;
}

/* 미니 슬라이더 버튼 (회색 사각형) */
.mini-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-60%); /* 텍스트 고려해서 살짝 위로 */
    width: 35px;
    height: 35px;
    background-color: #888; /* 이미지의 회색 */
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s;
}

.mini-btn:hover {
    background-color: #555;
}
.mini-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.mini-prev { left: 0; }
.mini-next { right: 0; }

.bottom_margin {margin-top: 15px;}

.card-header-2 {
    background-color: #F1F1F1; /* 연한 회색 배경 */
    padding: 5px 20px;
    margin-bottom: 20px;
    border-left: 5px solid #555; /* 좌측 포인트 선 (선택사항, 이미지 느낌 살림) */
}

.card-header-2 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.facility-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 95px; /* 좌우 카드 사이 간격 넓게 */
    row-gap: 80px;    /* 위아래 줄바꿈 간격 */
}


/* ----------------------------------
   반응형 (Mobile)
   ---------------------------------- */
@media (max-width: 992px) {
    .product-page-section { padding: 44px 0 80px 0; }
    .product-list { gap: 56px; padding: 0 16px; }

    .product-row {
        flex-direction: column; /* 모바일: 세로 배치 */
        height: auto;
        gap: 20px;
    }
    .product-main-img {
        width: 100%;
        height: 250px;
        flex: none;
    }
    .product-details {
        width: 100%; 
        height: auto;
    }
    .product-info-text h3 { font-size: 20px; }
    .product-info-text p { font-size: 16px; }
    .mini-slider-wrapper {
        margin-top: 20px;
        padding: 0 40px;
    }
    .mini-img { height: 180px; }
    .mini-item {
        flex: 0 0 calc(50% - 8px); /* 모바일: 썸네일 2개 노출 */
    }
}


/* ----------------------------------
   회사 개요 테이블 스타일 (세로형 수정)
   ---------------------------------- */
.info-table.vertical-type {
    display: flex;
    flex-direction: column; /* 무조건 세로로 쌓임 */
    gap: 14px; /* 항목 간 간격 */
    border-top: 1px solid #ddd;
    padding-top: 32px;
}

/* 각 행 스타일 */
.info-table.vertical-type .info-row {
    display: flex;
    align-items: flex-start; /* 내용이 길어져도 텍스트 상단 정렬 */
    width: 100%;
    font-size: 15px;
    border-bottom: 1px solid #eee; /* (선택사항) 항목마다 밑줄을 넣고 싶으면 유지, 아니면 삭제 */
    padding-bottom: 15px;          /* (선택사항) 밑줄과 텍스트 간격 */
}

/* 마지막 줄은 밑줄 제거 (선택사항) */
.info-table.vertical-type .info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 라벨 (기업명, 설립일 등) 너비 고정 */
.info-table.vertical-type .label {
    display: inline-block;
    width: 80px;  /* 너비를 고정해서 세로 라인을 맞춤 */
    font-weight: 700;
    color: #000;
    flex-shrink: 0; /* 줄어들지 않음 */
}

/* 구분선 (|) */
.info-table.vertical-type .divider {
    color: #ccc;
    margin: 0 20px; /* 좌우 여백 */
    font-weight: 300;
}

/* 값 (시티이엔지, 날짜 등) */
.info-table.vertical-type .value {
    color: #555;
    flex: 1; /* 남은 공간 모두 차지 */
    line-height: 1.6; /* 줄간격 확보 */
    word-break: keep-all; /* 단어 단위 줄바꿈 */
}

/* =========================================
   [추가] 하단 기타 설비 테이블 스타일
   ========================================= */

.facility-table-container {
    width: 100%;
    margin-top: 60px; /* 위쪽 그리드와 간격 */
    margin-bottom: 40px;
    padding: 0 20px;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 테이블 헤더 */
.custom-table thead th {
    background-color: #5D5D5D; /* 이미지의 진한 파란색 */
    color: #fff;
    padding: 15px;
    font-weight: 700;
    border: 1px solid #fff; /* 흰색 구분선 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* 텍스트 그림자 */
    font-size : 16px;
}

/* 테이블 본문 행*/
.custom-table tbody td {
    background-color: #F5F5F5; /* 이미지의 연한 하늘색 */
    color: #333; /* 이미지의 진한 파란색 글씨 */
    padding: 12px;
    font-weight: 500;
    border: 1px solid #737373; /* 흰색 구분선 */
    font-size : 16px;
}

/* 호버 효과*/
.custom-table tbody tr:hover td {
    background-color: #dadada;
}

/* 반응형: 모바일에서는 글씨 크기 조정 */
@media (max-width: 768px) {
    .custom-table {
        font-size: 14px;
    }
    .custom-table th, .custom-table td {
        padding: 10px 5px;
    }

    .bottom-products {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .bottom-products .product-item {
        width: 100%;
    }
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main,
.sub-page-content {
    flex: 1;
}