/* =========================================
   1. 폰트 정의 (IBM Plex Sans KR)
   ========================================= */
/* @font-face {
    font-family: 'IBMPlexSansKR';
    font-weight: 300; src: url('/static/fonts/IBMPlexSansKR-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'IBMPlexSansKR';
    font-weight: 400; src: url('/static/fonts/IBMPlexSansKR-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'IBMPlexSansKR';
    font-weight: 500; src: url('/static/fonts/IBMPlexSansKR-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'IBMPlexSansKR';
    font-weight: 600; src: url('/static/fonts/IBMPlexSansKR-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'IBMPlexSansKR';
    font-weight: 700; src: url('/static/fonts/IBMPlexSansKR-Bold.ttf') format('truetype');
} */
/* =========================================
   1. 폰트 정의 (IBM Plex Sans KR)
   ========================================= */
@font-face {
    font-family: 'Pretendard';
    font-weight: 300; src: url('/static/fonts/Pretendard-Light.woff2') format('truetype');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400; src: url('/static/fonts/Pretendard-Regular.woff2') format('truetype');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500; src: url('/static/fonts/Pretendard-Medium.woff2') format('truetype');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600; src: url('/static/fonts/Pretendard-SemiBold.woff2') format('truetype');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700; src: url('/static/fonts/Pretendard-Bold.woff2') format('truetype');
}

/* =========================================
   2. 전역 스타일 및 타이포그래피
   ========================================= */

html, body {
    height: 100%; /* 전체 높이를 브라우저에 맞춤 */
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* 요소를 세로로 배치 */
    min-height: 100vh; 
    font-family: 'Pretendard', sans-serif !important;
    background-color: #ffffff !important;
    letter-spacing: -0.02em;
    overflow-x: hidden;
}

/* 2. 메인 컨테이너: 헤더와 푸터 사이의 가변 공간 확보 */
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 화면 높이만큼 최소 크기 확보 */
    flex: 1; 
    width: 100%;
}

/* 메인 콘텐츠 영역 보정 */
.main-content {
    flex: 1 0 auto; /* 남는 공간을 차지하되 줄어들지 않음 */
    /* 헤더 높이가 70px이므로, 최소 높이는 화면의 100% - 70px이 되어야 합니다. */
    /* min-height: calc(100vh - 70px - 150px); */
    padding-top: 70px; /* 헤더 높이만큼 여백 */
}

/* 푸터가 항상 가장 아래에 위치하도록 설정 */
.footer-dark-bg, .clip-footer {
    flex-shrink: 0; /* 푸터 높이가 압축되지 않도록 방어 */
    background-color: #222529 !important;
    color: #fff;
    width: 100%;
    margin-top: auto; /* 핵심: 위쪽 공간을 모두 밀어내어 바닥에 안착 */
}

/* 제목 태그별 굵기 및 크기 정의 */
h1, h2, h3 { 
    font-weight: 700 !important; 
    color: #111;
    letter-spacing: -0.04em; 
}
h4, h5, h6 { 
    font-weight: 600 !important; 
    color: #222;
}

h1 { font-size: calc(1.5rem + 1.5vw); }
h2 { font-size: calc(1.3rem + 1.0vw); }
h3 { font-size: calc(1.1rem + 0.5vw); }

p, span, a, button, td {
    font-weight: 400; /* 기본적으로 모든 텍스트는 레귤러 */
}

a { text-decoration: none; color: inherit; transition: 0.2s; }

.clip-btn {
    transition: all 0.3s ease;
}
@media (hover: hover) {
    .clip-btn:hover {
        background: #ee1c25 !important;
        border-color: #ee1c25 !important;
        color: #fff !important;
    }
    .clip-btn:hover span {
        color: #fff !important;
    }
    .clip-btn:hover img {
        filter: brightness(0) invert(1);
    }
}

/* =========================================
   3. 헤더 및 네비게이션 (PC/모바일 통합)
   ========================================= */
.header-main {
    width: 100%;
    height: 70px; 
    background-color: #111 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    z-index: 1000;
}

.page-main { margin-top: 70px; }
.page-content { padding: 3rem 0; }
.depth1 { gap: 50px; }
.menu-item { position: relative; }

.menu-title {
    display: block;
    line-height: 70px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.sub-menu {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 140px;
    background: rgba(17, 17, 17, 0.95);
    list-style: none;
    padding: 15px 20px;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-radius: 0 0 5px 5px;
}

.menu-item:hover .sub-menu { opacity: 1; visibility: visible; }
.menu-item:hover .menu-title { color: #ee1c25; }

.sub-menu li a {
    color: #bbb;
    font-size: 14px;
    display: block;
    padding: 8px 0;
    text-decoration: none;
}
.sub-menu li a:hover { color: #fff; text-decoration: none; }

/* 모바일 메뉴 (991px 이하) */
@media (max-width: 991px) {
    .header-main { height: 70px !important; display: flex !important; align-items: center !important; }
    .navbar-collapse {
        position: absolute; top: 70px; left: 0; right: 0;
        background-color: #111 !important;
        z-index: 9999; padding: 20px !important;
        border-bottom: 2px solid #ee1c25;
        max-height: calc(100dvh - 70px); overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
    .depth1 { gap: 0 !important; }
    .menu-item { margin-bottom: 25px; position: static !important; }
    .menu-title {
        color: #fff !important; font-size: 1.2rem !important;
        line-height: 1.4 !important;
        padding-bottom: 10px !important; border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .sub-menu {
        display: block !important; position: static !important;
        opacity: 1 !important; visibility: visible !important;
        transform: none !important; background: transparent !important;
        padding: 10px 0 0 15px !important; box-shadow: none !important;
    }
    .sub-menu li a { font-size: 1rem !important; color: #999 !important; text-decoration: none !important; }
}

/* =========================================
   4. 공지사항 및 DataTables (최종 보정)
   ========================================= */
/* .notice-head { 
    font-size: 2.25rem; 
    font-weight: 700 !important; 
    color: #111; 
    margin-bottom: 2rem; 
}
.notice-head span { color: #ee1c25; margin-right: 10px; } */

/* 테이블 스타일 */
#noticeTable { border-top: 2px solid #333; width: 100% !important; }
#noticeTable thead th { 
    background-color: #f8f9fa; 
    color: #333; 
    font-weight: 600; 
    padding: 15px !important; 
    text-align: center; 
    border-bottom: 1px solid #dee2e6;
}
#noticeTable tbody td { 
    font-weight: 400 !important; 
    padding: 15px !important; 
    vertical-align: middle; 
}
.common-table-border{
    border: 1px solid;
    border-color: rgb(181, 181, 181) !important;
}


/* 제목 링크 */
.notice-title-link { 
    color: #333; 
    text-decoration: none; 
    transition: 0.2s; 
    cursor: pointer; 
    font-weight: 500;
}
.notice-title-link:hover { color: #ee1c25; text-decoration: underline; }

/* DataTables 페이지네이션 커스텀 */
.dataTables_wrapper .pagination { justify-content: center; margin-top: 30px; }
.page-item.active .page-link { 
    background-color: #ee1c25 !important; 
    border-color: #ee1c25 !important; 
    color: #fff !important; 
}
.page-link { color: #333; border-radius: 4px; margin: 0 3px; }

/* =========================================
   5. 공통 모달 스타일
   ========================================= */
.modal-header { border-bottom: 2px solid #ee1c25; background-color: #f8f9fa; }
.modal-title { font-weight: 700 !important; }

/* 질문(Q) 및 공지사항 본문 박스 */
.notice-content-box, .inquiry-content-box, .modal-body-content { 
    padding: 30px 25px; 
    line-height: 1.8 !important; /* 위아래 눌림 방지 */
    color: #444; 
    font-weight: 400 !important; /* 본문은 반드시 레귤러 */
    font-size: 1.05rem;
    white-space: pre-wrap; /* 줄바꿈 유지 */
    word-break: break-all;
}

/* =========================================
   6. 서비스 소개 및 연혁 (IBCC / History)
   ========================================= */
/* 서비스 페이지 로고 이미지 반응형 */
.service-logo-img {
    display: block;
    margin: 0 auto;
    height: auto;
    width: auto;
    max-height: 120px;
    max-width: 100%;
}

/* 서비스 소개 타이틀 */
.service-intro-title {
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    color: #666;
    text-transform: uppercase;
}
.service-intro-title span {
    font-weight: 700;
    color: #ee1c25;
}

/* 특장점 카드 */
.feature-card {
    padding: 40px 30px; border: 1px solid #eee; border-radius: 8px;
    background: #fff; height: 100%; transition: 0.3s;
}
.feature-card:hover { border-color: #ee1c25; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.feature-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 5px; display: flex; justify-content: center; align-items: center; }
.feature-card h3::after { content: ''; display: inline-block; width: 14px; margin-left: 0.5rem; flex-shrink: 0; }
.feature-card .sub-lang { font-size: 0.9rem; font-weight: 500; color: #ee1c25; }
.feature-card p { font-size: 0.95rem; line-height: 1.7; color: #555; margin-top: 20px; }

/* 주요 기능 아이콘 카드 */
.function-grid-card {
    padding: 30px 20px;
    border-radius: 4px;
    background: #f8f9fa;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.function-grid-card:hover { background: #fff; border-color: #eee; transform: translateY(-5px); }
.function-grid-card i { color: #ee1c25; margin-bottom: 15px; display: block; }
.function-grid-card h6 { font-weight: 600; font-size: 1.05rem; margin-bottom: 10px; color: #111; }
.function-grid-card p { font-size: 0.85rem; color: #777; line-height: 1.5; }

/* 연혁 타임라인 */
.year-title { font-size: 3.5rem; font-weight: 700; color: #111; line-height: 1; }
.year-hr { width: 60px; height: 3px; background-color: #ee1c25; border: none; opacity: 1; margin: 20px 0; }
.history-container { display: none; flex-direction: column; gap: 15px; border-left: 2px solid #eee; padding-left: 30px; }
.history-title-item { font-size: 1.15rem; font-weight: 400; color: #444; position: relative; line-height: 1.6; }
.history-title-item::before {
    content: ""; position: absolute; left: -37px; top: 10px; width: 12px; height: 12px;
    background-color: #fff; border: 2px solid #ee1c25; border-radius: 50%;
}

/* =========================================
   7. 기타 유틸리티
   ========================================= */

.text-red { color: #ee1c25 !important; }


/* =========================================
   8. 나의 요청내역 (Contact History) 전용
   ========================================= */
/* .history-section { padding-top: 30px; padding-bottom: 30px; } */
.history-section {
    flex: 1; 
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    display: block; /* flex 대신 block을 사용하여 자식의 width 자유도 확보 */
    width: 100%;
}

.history-header { font-size: 1.8rem; font-weight: 700; color: #111; margin-bottom: 40px; }
.history-header span { color: #ee1c25; margin-right: 10px; }

/* 검색 상자: 너비 복구 핵심 */
.search-container {
    width: 100%;        /* 부모 너비를 최대한 채우려 시도 */
    max-width: 600px;   /* 하지만 600px까지만 늘어남 */
    margin: 0 auto 50px auto; /* 중앙 정렬 */
    padding: 30px;
    background-color: #f8f9fa;
    border-top: 3px solid #ee1c25;
    box-sizing: border-box; /* 패딩이 너비에 영향을 주지 않도록 설정 */
}

.btn-search-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ee1c25 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    height: 50px;
    width: 100%; /* 버튼이 검색 박스 가득 채우기 */
    transition: all 0.2s ease;
    cursor: pointer;
}
btn-search-custom:hover {
    background-color: #c4161d !important;
}

/* .btn-search-custom:hover { background-color: #c4161d; color: white; } */

/* 문의/답변 박스 (모달 내부) */
.q-box { background: #fff5f5; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
.a-box { background: #f0f7ff; padding: 20px; border-radius: 8px; }
.label-text { font-weight: 700; color: #555; font-size: 0.9rem; margin-bottom: 8px; display: block; }

/* 상태 배지 */
.status-badge-complete { color: #0d6efd; font-weight: 600; font-size: 0.9rem; }
.status-badge-wait { color: #666; font-weight: 400; font-size: 0.9rem; }


/* 나의 요청에 대한 검색 결과 영역 초기 숨김 시 공간 차지 방지 */
#tableWrapper {
    display: none; /* jQuery fadeIn 전까지 물리적 공간을 차지하지 않음 */
    margin-top: 30px;
}

/* 모바일 전용 테이블 레이아웃 (반응형) */
@media (max-width: 768px) {
    #inquiryTable thead { display: none; }
    #inquiryTable, #inquiryTable tbody, #inquiryTable tr, #inquiryTable td { display: block; width: 100%; }
    #inquiryTable tr { 
        margin-bottom: 15px; border: 1px solid #eee !important; 
        padding: 15px; background: #fff; cursor: pointer; 
    }
    #inquiryTable td { 
        text-align: right !important; padding: 8px 0 !important; 
        border: none !important; position: relative; font-size: 0.95rem; 
    }
    #inquiryTable td::before { 
        content: attr(data-label); position: absolute; left: 0; 
        font-weight: 700; color: #888; font-size: 0.85rem; 
    }
}


/* =========================================
   9. 소개 및 윤리강령 (Ethics & Introduce)
   ========================================= */
.ethic-wrapper {
    width: 100%;
}

.ethic-section {
    margin-bottom: 5rem;
}

.ethic-title {
    font-size: 2.5rem;
    font-weight: 700 !important;
    color: #111;
    margin-bottom: 1.5rem;
}

.ethic-content {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.8;
    color: #444;
}

/* 포인트 강조 */
.ethic-content b, 
.ethic-content strong {
    font-weight: 600 !important;
    color: #000;
}

/* 윤리경영 리스트 스타일 */
.ethic-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.ethic-list-item {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
}

.ethic-list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background-color: #ee1c25;
    border-radius: 2px;
}

/* 반응형 조절 */
@media (max-width: 991px) {
    .ethic-title { font-size: 1.8rem; }
    .ethic-content { font-size: 1rem; }
    .ethic-section { margin-bottom: 3rem; }
}

/* 문의하기 페이지(asking.html)는 폼(Form) 요소가 많아 레이아웃이 깨지기 쉽고, 특히 푸터가 본문 내용에 따라 위로 올라오는 현상이 자주 발생하는 페이지입니다.

이를 방지하기 위해 1) 중복된 레이아웃 태그 제거, 2) 스타일의 homepage.css 통합, 3) Sticky Footer 대응 구조로 코드를 정리해 드립니다.

🛠️ 1. homepage.css에 추가할 스타일
폼 요소와 버튼, 체크박스 스타일을 homepage.css의 '기타 유틸리티' 또는 '문의하기 전용' 섹션에 추가해 주세요.

CSS */
/* =========================================
   10. 문의하기 (Asking Form) 전용
   ========================================= */
.btn-submit-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #ee1c25;
    color: #fff;
    border: none;
    padding: 15px 50px;
    font-size: 1.1rem;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    max-width: 250px;
}

.btn-submit-custom:hover {
    background-color: #c4161d;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(238, 28, 37, 0.3);
}

.info-alert-box {
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    line-height: 1.6;
}

/* 커스텀 체크박스 정렬 */
.form-check-input-custom {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    accent-color: #ee1c25;
}

.form-check-label-custom {
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
}

/* 입력 필드 포커스 효과 */
.form-control:focus, .form-select:focus {
    border-color: #ee1c25;
    box-shadow: 0 0 0 0.25rem rgba(238, 28, 37, 0.1);
}


/* =========================================
   11. 문의하기 통합 레이아웃 (Asking Page)
   ========================================= */
/* 서브 배너 상단 여백 보정 */
.sub-banner {
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
    margin-bottom: 3rem;
}

/* 탭 메뉴 */
.nav-tabs-custom {
    display: flex;
    justify-content: center;
    border: none !important;
    gap: 20px;
}
.nav-tabs-custom .nav-item {
    flex: 1;
    text-align: center;
}
.nav-tabs-custom .nav-link {
    width: 100%;
    font-weight: 600 !important;
    color: #999;
    border: none !important;
    background: transparent !important;
    padding: 10px 25px 20px 25px;
    transition: 0.3s;
}
.nav-tabs-custom .nav-link.active {
    color: #ee1c25 !important;
    border-bottom: 3px solid #ee1c25 !important;
}
@media (max-width: 575px) {
    .nav-tabs-custom { gap: 0; }
    .nav-tabs-custom .nav-link { padding: 10px 8px 18px 8px; font-size: 0.9rem; }
}

/* 폼 카드 */
.main-form-card {
    background: #ffffff;
    border: none !important;
    border-top: 3px solid #ee1c25 !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 40px;
    margin-bottom: 60px;
}

.contact-us-title {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
}


/* =========================================
   12. 모달 상세 텍스트 (Modal Typography)
   ========================================= */
.modal-content-scroll {
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.modal-content-scroll::-webkit-scrollbar {
    width: 6px;
}

.modal-content-scroll::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}

/* 정책 문서용 리스트 스타일 */
.policy-list {
    list-style: none;
    padding-left: 0.5rem;
    border-left: 2px solid #f1f1f1;
    margin-left: 0.25rem;
}

.policy-list li {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    color: #555;
}

.policy-list strong {
    color: #222;
    font-weight: 600;
}


/* =========================================
   13. 문의하기/업무제휴 최종 (image_f597e2 스타일)
   ========================================= */

/* 입력 필드 레이블 스타일 */
.form-label-custom {
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 5px;
}

/* 폼 컨트롤 테두리 연하게 */
.form-control-custom {
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    padding: 10px 15px !important;
    font-size: 0.95rem;
}

/* 안내 박스 스타일 보정 */
.side-info-box {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 25px;
    height: 100%;
}

.side-info-box .info-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
}

/* .side-info-box .info-text-card {
    background: #fff;
    border: 1px solid #eee !important;
    border-color: None !important; 
    border-left-color:  #eee !important ;
    padding: 15px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #666;
} */

.side-info-box .info-text-card {
    background : #fff;
    padding    : 15px;
    font-size  : 0.9rem;
    line-height: 1.6;
    color      : #666;
}


/* =========================================
   14. 체크박스 및 동의 섹션 (인라인 스타일 복원)
   ========================================= */

.agree-section {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important; /* 기존 이미지 간격 반영 */
    margin-bottom: 30px !important;
}

/* 체크박스: 기존의 16px 크기와 인라인의 강제 스타일 혼합 */
.form-check-input-custom {
    width: 18px !important;  /* 이미지와 인라인의 중간값으로 최적화 */
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    appearance: auto !important; /* 브라우저 기본 체크박스 스타일 강제 */
    -webkit-appearance: checkbox !important;
    position: relative !important;
    z-index: 11 !important;
    flex-shrink: 0;
}

.form-check-label-custom {
    font-size: 1.0rem !important; /* 인라인 스타일 값 반영 */
    font-weight: 500 !important;
    color: #333 !important;
    cursor: pointer !important;
    user-select: none !important;
    line-height: 1 !important; /* 텍스트 쏠림 방지 핵심 */
    z-index: 11 !important;
}

/* [내용 보기] 링크 */
.btn-view-policy {
    font-size: 0.95rem !important;
    color: #ee1c25 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 12 !important;
    cursor: pointer !important;
}

/* =========================================
   14. 요청하기 버튼
   ========================================= */
.btn-action-red {
    background-color: #ee1c25 !important;
    border: none !important;
    color: #ffffff !important;
    height: 64px !important; /* 높이 고정 반영 */
    padding: 0 60px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    transition: background 0.2s !important;
}

.btn-action-red:hover { background-color: #c4161d !important; }

.btn-action-red i {
    font-size: 1.4rem !important;
    margin-left: 12px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 0 !important;
}