﻿/* ===================================================================
   Zenith Autotech - 서브페이지 공통
   =================================================================== */

/* ---------- 페이지 상단 배너 ---------- */
.page-banner{
    position:relative;height:446px;display:flex;align-items:center;justify-content:center;
    text-align:center;color:#fff;overflow:hidden;margin-top:0;
}
.page-banner .banner-bg{
    position:absolute;inset:0;
    background:
        linear-gradient(rgba(13,16,21,.42),rgba(13,16,21,.42)),
        radial-gradient(120% 120% at 70% 20%,#006CA7 0%,#03357E 60%),
        repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 10px);
}
/* 대메뉴 배너 사진 + 가독성용 어두운 필터 */
.page-banner .banner-photo{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;z-index:0;
}
.page-banner.has-photo .banner-bg{
    z-index:1;
    background:
        linear-gradient(180deg,rgba(6,11,24,.50),rgba(6,11,24,.60)),
        radial-gradient(120% 130% at 50% 38%,rgba(6,11,24,0) 38%,rgba(6,11,24,.42) 100%);
}
.page-banner.has-photo .b-eyebrow{text-shadow:0 1px 12px rgba(0,0,0,.5)}
.page-banner.has-photo h1{text-shadow:0 2px 18px rgba(0,0,0,.55)}
.page-banner .banner-inner{position:relative;z-index:2;padding-top:40px}
.page-banner .b-eyebrow{font-family:'Dancing Script',cursive;font-weight:700;letter-spacing:0;
    font-size:var(--fs-lg);text-transform:lowercase;color:var(--c-accent);margin-bottom:10px}
.page-banner .b-eyebrow::first-letter{text-transform:uppercase}
.page-banner .b-eyebrow--caps{text-transform:uppercase}
.page-banner h1{font-family:var(--font-en);font-weight:800;font-size:var(--fs-h1);letter-spacing:-.5px}

/* ---------- 서브 탭 (소메뉴) ---------- */
.sub-tabs{background:#fff;border-bottom:1px solid var(--c-line);position:sticky;top:60px;z-index:50}
.sub-tabs-inner{width:min(1280px,90%);margin:0 auto;display:flex;justify-content:center;gap:6px;overflow-x:auto;scrollbar-width:none}
.sub-tabs-inner::-webkit-scrollbar{display:none}
.sub-tab{padding:22px 26px;font-weight:500;color:var(--c-gray);position:relative;white-space:nowrap;transition:.3s}
.sub-tab::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:3px;background:var(--c-accent);transition:width .3s var(--ease)}
.sub-tab:hover{color:var(--c-ink)}
.sub-tab.active{color:var(--c-ink);font-weight:700}
.sub-tab.active::after{width:100%}

/* ---------- 본문 영역 ---------- */
.page-body{padding:120px 0 160px;word-break:keep-all;overflow-wrap:break-word}
.page-body .container{max-width:1100px}
.content-head{text-align:center;margin-bottom:80px}
.content-head .c-title{font-family:var(--font-en);font-weight:800;font-size:var(--fs-h2);margin-bottom:18px}
.content-head .c-sub{color:var(--c-gray);font-size:var(--fs-md)}
/* 여러 줄 제목이 마지막에 한 단어(한 글자)만 남지 않도록 균형 배분 — 한/영 모바일 공통 */
.page-body h1,.page-body h2,.page-body h3,.page-body h4,
.content-head .c-title,.content-head .c-sub{text-wrap:balance}
.divider{width:46px;height:24px;background:url(image/divide.svg) center/contain no-repeat;margin:0 auto 28px}

/* placeholder 박스 */
.ph-box{
    border:1.5px dashed var(--c-line);border-radius:14px;background:var(--c-bg-soft);
    min-height:220px;display:flex;align-items:center;justify-content:center;
    color:var(--c-gray);font-size:var(--fs-base);text-align:center;padding:30px;
}
.ph-img{min-height:340px;background:linear-gradient(135deg,#222c38,#0d1015);color:rgba(255,255,255,.22)}

/* 2단 그리드 */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:104px}
.two-col:last-child{margin-bottom:0}
.two-col h3{font-size:var(--fs-2xl);font-weight:700;margin-bottom:24px}
.two-col p{color:var(--c-gray);font-size:var(--fs-md);margin-bottom:16px}
.ceo-img{min-height:420px}
.ceo-sig{margin-top:36px!important;font-weight:700!important;color:var(--c-ink)!important}
/* 데스크탑 역순: 사진(1st child)→오른쪽, 텍스트(2nd child)→왼쪽 */
.two-col-reverse > *:first-child{order:2}
.two-col-reverse > *:last-child{order:1}

/* 카드 그리드 */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:34px}
.card{background:#fff;border:1px solid var(--c-line);border-radius:14px;overflow:hidden}
.card .card-img{min-height:190px;background:linear-gradient(135deg,#222c38,#0d1015);
    display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.22);font-size:var(--fs-sm)}
.card .card-cont{padding:30px}
.card h4{font-size:var(--fs-lg);font-weight:700;margin-bottom:12px}
.card p{color:var(--c-gray);font-size:var(--fs-base)}

/* 연혁 타임라인 */
.timeline{position:relative;max-width:760px;margin:0 auto;padding-left:30px}
.timeline::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--c-line)}
.tl-item{position:relative;padding:0 0 58px 44px}
.tl-item::before{content:"";position:absolute;left:-7px;top:6px;width:16px;height:16px;border-radius:50%;
    background:var(--c-accent);box-shadow:0 0 0 5px rgba(44,146,205,.15)}
.tl-year{font-family:var(--font-en);font-weight:800;font-size:var(--fs-xl);color:var(--c-accent);margin-bottom:10px}
.tl-item p{color:var(--c-steel);margin-bottom:6px}
.tl-main{color:var(--c-ink)!important;font-weight:600!important;margin-bottom:8px!important}
.tl-period{font-size:.88em;color:var(--c-gray);font-weight:400}

/* 견적/문의 폼 */
.form-wrap{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--c-line);border-radius:16px;padding:60px}
.form-row{margin-bottom:30px}
.form-row label{display:block;font-weight:600;margin-bottom:11px;font-size:var(--fs-base)}
.form-row label .req{color:var(--c-accent)}
.form-row input,.form-row textarea,.form-row select{
    width:100%;border:1px solid var(--c-line);border-radius:9px;padding:14px 16px;font-size:var(--fs-base);
    font-family:inherit;transition:.25s;background:#fff;
}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(44,146,205,.12)}
.form-row textarea{min-height:140px;resize:vertical}
.form-submit{width:100%;background:var(--c-ink);color:#fff;border:none;padding:17px;border-radius:9px;
    font-size:var(--fs-md);font-weight:600;cursor:pointer;transition:.3s}
.form-submit:hover{background:var(--c-accent)}

/* FAQ */
.faq-list{max-width:860px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--c-line)}
.faq-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;
    padding:30px 50px 30px 0;font-size:var(--fs-md);font-weight:600;position:relative;color:var(--c-ink)}
.faq-q::before{content:"Q";font-family:var(--font-en);color:var(--c-accent);font-weight:800;margin-right:14px}
.faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:var(--fs-xl);color:var(--c-gray);transition:.3s}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);color:var(--c-gray)}
.faq-item.open .faq-a{max-height:300px}
.faq-a-inner{padding:0 0 30px 36px}

/* 지도 / 오시는길 */
.map-box{min-height:420px;border-radius:14px;overflow:hidden;border:1px solid var(--c-line)}
.info-table{width:100%;border-top:2px solid var(--c-ink);margin-top:48px}
.info-table th,.info-table td{padding:20px 24px;border-bottom:1px solid var(--c-line);text-align:left;font-size:var(--fs-base)}
.info-table th{background:var(--c-bg-soft);width:160px;font-weight:600}

@media(max-width:900px){
    .two-col{grid-template-columns:1fr;gap:26px}
    /* 모바일: 역순 해제 → HTML 순서대로 (사진 위, 텍스트 아래) */
    .two-col-reverse > *:first-child{order:0}
    .two-col-reverse > *:last-child{order:0}
    .sub-tabs{top:60px}
    .sub-tabs-inner{justify-content:flex-start}
    .page-body{padding:70px 0 90px}
    .form-wrap{padding:30px}
}

/* ---------- 폰(≤600px) 공통 폴리시: 과한 여백·고정 높이 축소 ---------- */
@media(max-width:600px){
    /* 상단 배너: 폰에서 340px는 과함 → 축소 */
    .page-banner{height:240px}
    .page-banner .banner-inner{padding-top:24px}
    /* 본문 상·하 여백 및 제목 묶음 간격 압축 */
    .page-body{padding:52px 0 72px}
    .content-head{margin-bottom:48px}
    /* 서브 탭: 칸 줄여 한 화면에 더 많이 보이게 */
    .sub-tab{padding:16px 14px;font-size:var(--fs-sm)}
    /* 폼: 가장자리 여백 더 확보 */
    .form-wrap{padding:24px 18px}
    /* 정보 테이블: 라벨 칸 폭 축소(가로 넘침 방지) */
    .info-table th{width:104px;padding:14px 12px}
    .info-table td{padding:14px 12px}
    /* 큰 플레이스홀더/지도 높이 축소 */
    .ph-img{min-height:240px}
    .map-box{min-height:300px}
}

/* ---------- 설비현황 테이블 ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;box-shadow:0 4px 24px rgba(13,16,21,.08)}
.facility-table{width:100%;min-width:780px;border-collapse:collapse;font-size:var(--fs-sm)}
.facility-table thead th{
    background:var(--c-ink);color:#fff;font-weight:600;font-size:var(--fs-sm);
    padding:16px 14px;text-align:center;letter-spacing:.6px;white-space:nowrap;
    border:1px solid rgba(255,255,255,.1)
}
.facility-table tbody td{border:1px solid var(--c-line);padding:15px 16px;vertical-align:middle;text-align:center}
/* 대분류 (설비현황) */
.fc-main{
    background:var(--c-ink);color:#fff;font-weight:700;font-size:var(--fs-sm);
    writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:5px;
    width:38px;padding:16px 10px
}
/* 중분류 (설비 / 유틸리티) */
.fc-mid{
    background:#1e2a38;color:rgba(255,255,255,.85);font-weight:600;font-size:var(--fs-sm);
    writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;
    width:38px;padding:16px 10px
}
/* 소분류1 */
.fc-sub1{background:#f5f5f5;font-weight:600;color:var(--c-ink);font-size:var(--fs-sm);white-space:nowrap}
/* 소분류2 */
.fc-sub2{background:#f8f9fb;color:var(--c-steel);font-size:var(--fs-sm);width:140px}
/* 내용 */
.fc-content{text-align:left;color:var(--c-ink);font-weight:500;padding-left:20px}
/* 비고 */
.fc-note{color:var(--c-accent);font-weight:700;font-size:var(--fs-sm);white-space:nowrap}
/* 행 호버 */
.facility-table tbody tr:hover .fc-content,
.facility-table tbody tr:hover .fc-sub2{background:rgba(44,146,205,.05)}
@media(max-width:900px){.facility-table{font-size:var(--fs-xs)}.facility-table tbody td{padding:10px 8px}}
/* 모바일: 설비명 + 수량 두 열만 표시 (사양·제조사 숨김), 가로 스크롤 해제 */
@media(max-width:767px){
    .facility-table{min-width:0}
    .facility-table .fc-spec,.facility-table .fc-manuf{display:none}
}

/* ---------- 설비 아코디언 (패드공정) ---------- */
.equip-accordion{border-top:2px solid var(--c-ink);max-width:980px;margin:0 auto}
.eq-item{border-bottom:1px solid var(--c-line)}
.eq-head{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:24px;
    padding:36px 50px 36px 0;text-align:left;position:relative;transition:.3s}
.eq-head .eq-no{font-family:var(--font-en);font-weight:800;font-size:var(--fs-lg);color:var(--c-accent)}
.eq-head .eq-title{font-size:var(--fs-xl);font-weight:700;color:var(--c-ink)}
.eq-head::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
    font-size:var(--fs-2xl);color:var(--c-gray);font-weight:300;transition:.3s}
.eq-item.open .eq-head::after{content:"−";color:var(--c-accent)}
.eq-head:hover{padding-left:14px}
.eq-body{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.eq-item.open .eq-body{max-height:600px}
.eq-body-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:10px 0 44px;align-items:center}
.eq-desc h4{font-size:var(--fs-lg);font-weight:700;margin-bottom:14px}
.eq-desc p{color:var(--c-gray);font-size:var(--fs-md)}
@media(max-width:900px){.eq-body-inner{grid-template-columns:1fr;gap:20px}.eq-item.open .eq-body{max-height:900px}}

/* ===================================================================
   요소 간격 넓히기 — Bootstrap 기반 서브 페이지 전용
   서브 본문은 모두 .page-body 안에 있고, 카드·컬럼 사이(거터)와
   블록 사이(세로 마진)를 Bootstrap 유틸리티로 잡고 있다.
   여기서 .page-body 범위에만 기본값을 키워, 헤더/푸터/메인엔 영향 없이
   "요소들끼리의 간격"(가로 거터 + 세로 블록)을 전반적으로 넓힌다.
   (Bootstrap 유틸은 !important 라 더 높은 특이도 + !important 로 덮어씀)
   =================================================================== */

/* 1) 그리드 거터 — 카드/컬럼 사이 가로·세로 간격 (g-N 은 x·y 동시) */
.page-body .g-3{--bs-gutter-x:1.5rem; --bs-gutter-y:1.5rem}   /* 16 → 24px */
.page-body .g-4{--bs-gutter-x:2.25rem;--bs-gutter-y:2.25rem}  /* 24 → 36px */
.page-body .g-5{--bs-gutter-x:3.5rem; --bs-gutter-y:3.5rem}   /* 48 → 56px */

/* 2) 블록 사이 세로 간격 — 섹션/블록 단위 구분 마진 */
.page-body .mb-4{margin-bottom:2.25rem!important}  /* 24 → 36px */
.page-body .mt-4{margin-top:2.25rem!important}
.page-body .mb-5{margin-bottom:4rem!important}     /* 48 → 64px */
.page-body .mt-5{margin-top:4rem!important}
.page-body .py-4{padding-top:2rem!important;padding-bottom:2rem!important} /* 24 → 32px */

/* ===================================================================
   이용약관 · 개인정보처리방침 (법적 고지 문서)
   =================================================================== */
.legal{max-width:880px;margin:0 auto;font-size:.875rem}   /* 문서 전체 기준 크기 — 이 값만 바꾸면 전체 축소/확대 */
.legal-meta{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:36px}
.legal-badge{display:inline-block;font-size:.82em;font-weight:600;color:var(--c-accent-deep);
    background:rgba(44,146,205,.09);border:1px solid rgba(44,146,205,.22);border-radius:999px;padding:6px 14px}
.legal-updated{font-size:.9em;color:var(--c-gray)}
.legal-intro{color:var(--c-gray);font-size:1em;line-height:1.85;margin:0 0 44px;
    padding:22px 24px;background:var(--c-bg-soft);border-radius:14px}
.legal-art{margin-bottom:38px;scroll-margin-top:120px}
.legal-art > h3{font-size:1.18em;font-weight:700;color:var(--c-ink);line-height:1.45;
    margin:0 0 16px;padding-left:15px;border-left:3px solid var(--c-accent)}
.legal-art p{margin:0 0 12px;color:#3c4149;line-height:1.85;font-size:1em}
.legal-art ol{margin:6px 0 14px;padding-left:20px;color:#3c4149;line-height:1.8}
.legal-art ol li{margin-bottom:8px}
.legal-art ol li::marker{color:var(--c-accent-deep);font-weight:600}
.legal-art ul{list-style:none;margin:6px 0 14px;padding-left:4px;color:#3c4149;line-height:1.8}
.legal-art ul > li{position:relative;padding-left:18px;margin-bottom:8px}
.legal-art ul > li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;
    border-radius:50%;background:var(--c-accent)}
/* 표(개인정보 수집 항목 등) */
.legal-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:.96em}
.legal-table th,.legal-table td{border:1px solid var(--c-line);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.7}
.legal-table thead th{background:var(--c-ink);color:#fff;font-weight:600}
.legal-table tbody th{background:var(--c-bg-soft);font-weight:600;color:var(--c-ink);white-space:nowrap;width:34%}
/* 개인정보 보호책임자 등 연락 박스 */
.legal-contact{margin:10px 0 0;padding:22px 24px;border:1px solid var(--c-line);border-radius:14px;background:#fff}
.legal-contact dl{display:grid;grid-template-columns:132px 1fr;gap:12px 18px;margin:0}
.legal-contact dt{color:var(--c-gray);font-size:.92em}
.legal-contact dd{margin:0;color:var(--c-ink);font-weight:500}
.legal-foot{margin-top:46px;padding-top:24px;border-top:1px solid var(--c-line);color:var(--c-gray);font-size:.92em;line-height:1.8}

@media(max-width:640px){
    .legal-art > h3{font-size:1.06em}
    .legal-contact dl{grid-template-columns:1fr;gap:2px 0}
    .legal-contact dd{margin-bottom:12px}
    .legal-table th,.legal-table td{padding:10px 11px}
    .legal-table tbody th{width:40%}
}
