.btn-primary{
    background:var(--navy) !important;
}
.btn-primary:hover {
    color: #fff;
    background-color: var(--navyDark) !important;
    border-color:  var(--navyDark) !important;
}
.nav-link{color:var(--navy) !important}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link,.btn-primary {
    color: #fff !important; 
    background:var(--navy) !important;
    border-color:var(--navy) !important;
}
.btn {font-size:14px !important;}
.carousel-control-next, .carousel-control-prev{
    width: 10% !important;
}
#accordionMenu{
    background-color: #fff;
    height: 100%;
}
.accordion-title,.accordion-button{
    padding: 1rem !important;
}
.accordion-title{
    font-size: 1.25rem;
    font-weight: bold;
    color: #fff;
    background-color: var(--navy) !important;
    padding-bottom: 4rem !important;
}
.accordion-body{
    & ul{
        padding: 0.8rem !important;
        cursor: pointer;
        & li{
            padding: 5px 0 !important;
        }
        & li::before {
            content: "•";
            display: inline-block;
            margin-right: 4px; 
            color: var(--navy);
            font-size: 16px; 
            vertical-align: middle;
        }
    }
}
.accordion-button:not(.collapsed){
    color: var(--navy) !important;
    font-weight: bold;
}
/* .accordion-button{padding:0 !important} */
#accordionMenu .btn-link{
    font-weight: 400;
    color: inherit !important;
    text-decoration: none !important;
    padding: 0 !important;
}
.page-item.active .page-link{
    color: #fff !important;
}
.tab-content{
    padding: 15px !important;
}
.AM.TO_BG1.TO_R1.TO_B1.TO_TT{
    background: #e7f1ff;
    font-weight: bold;
    border:1px solid #c1c1c1 !important;
}
.AM.TO_BG2.TO_B2.TO_R2{
    background: #f4f8fd;
}
.modal-dialog{
    margin: 1.75rem auto !important;
}
.modal-header {
    padding: 1rem !important;
}
.modal-body {
    padding: 1rem !important;
}
.modal-footer{
    padding: .75rem !important;
}
.modal-title{
    font-size: 1rem !important;
    font-weight: bold;
}
.bi::before, [class*=" bi-"]::before, [class^=bi-]::before{
    transform: translateY(1.2px);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    font-weight: bold;
}

/* ── 필드 (로그인 폼 등) : 사이트 공통 네이비 톤 ─────────────────── */
.field { margin-bottom: 24px; }

.field label {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    transition: color .2s;
}
.field.on  label { color: var(--navy); }
.field.err label { color: var(--kpiRed); }

.input-wrap { position: relative; }

.field input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    background: #f6f8fb;
    border: 1px solid #d7dbe0;
    border-radius: 10px;
    color: #1f2937;
    font-size: 15px;
    outline: none;
    transition: background .2s, border-color .2s;
    caret-color: var(--navy);
}
.field input::placeholder { color: var(--muted); }
.field.on input {
    background: #fff;
    border-color: var(--navy);
}
/* 포커스 시 하단 컬러 바가 중앙에서 펼쳐짐 */
.bar {
    position: absolute;
    bottom: 0; left: 50%;
    display: block;
    width: 0; height: 2px;
    background: linear-gradient(90deg, var(--navy), var(--navyDark));
    border-radius: 0 0 10px 10px;
    transition: width .3s ease, left .3s ease;
}
.field.on .bar { width: 100%; left: 0; }

/* 필드 에러 상태 */
.field.err input {
    border-color: rgba(229,72,77,.55);
    background: var(--kpiRedBg);
}
.field.err .bar {
    width: 100%; left: 0;
    background: var(--kpiRed);
}
.field.err label { color: var(--kpiRed); }

/* 입력칸 shake */
.shake { animation: inputShake .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes inputShake {
    0%,100% { transform: translateX(0); }
    15%     { transform: translateX(-7px); }
    30%     { transform: translateX(6px); }
    45%     { transform: translateX(-5px); }
    60%     { transform: translateX(4px); }
    75%     { transform: translateX(-2px); }
    90%     { transform: translateX(1px); }
}

/* 필드 에러 메시지 */
.field-err {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 7px 12px;
    background: var(--kpiRedBg);
    border: 1px solid rgba(229,72,77,.2);
    border-left: 2px solid var(--kpiRed);
    border-radius: 0 8px 8px 0;
    color: var(--kpiRed);
    font-size: 12px;
    line-height: 1;
    animation: errSlide .32s cubic-bezier(.34,1.56,.64,1);
}
.field-err::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px; height: 16px;
    background: var(--kpiRed);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}
@keyframes errSlide {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   공통 서브페이지 표 디자인
   (공지사항/FAQ/도움말/통계/단속정보조회 등에서 쓰는 표 헤더·본문을 전부 통일)
   페이지별 <style>에 각자 넣지 말고 이 파일에서만 관리한다.
   layout.css의 "#contentsArea .contents table ..." 규칙이 id 선택자를 포함해 우선순위가 높으므로,
   여기서도 동일하게 #contentsArea를 붙여 우선순위를 맞춘다.
   ============================================================ */
#contentsArea .noticeTable,
#contentsArea .infoTable,
#contentsArea .raceTable,
#contentsArea .accidentTable,
#contentsArea .crackdownTable,
#contentsArea .equipInstallTable,
#contentsArea .permissionTable,
#contentsArea .limitsTable,
#contentsArea .agencyTable,
body.mainPage .top10Table {
    width: 100%;
    border-collapse: collapse;
}

/* 헤더: 옅은 파란 배경 + 진한 굵은 글자로 통일 */
#contentsArea .noticeTable thead tr,
#contentsArea .infoTable thead tr,
#contentsArea .raceTable thead tr,
#contentsArea .accidentTable thead tr,
#contentsArea .crackdownTable thead tr,
#contentsArea .equipInstallTable thead tr,
#contentsArea .permissionTable thead tr,
#contentsArea .limitsTable thead tr,
#contentsArea .agencyTable thead tr,
body.mainPage .top10Table thead tr {
    background: #e7f1ff !important;
}
#contentsArea .noticeTable th,
#contentsArea .infoTable th,
#contentsArea .raceTable th,
#contentsArea .accidentTable th,
#contentsArea .crackdownTable th,
#contentsArea .equipInstallTable th,
#contentsArea .permissionTable th,
#contentsArea .limitsTable th,
#contentsArea .agencyTable th,
body.mainPage .top10Table th {
    color: #1f2937 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: center !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #c1c1c1 !important;
}

/* 본문 셀 공통 */
#contentsArea .noticeTable td,
#contentsArea .infoTable td,
#contentsArea .raceTable td,
#contentsArea .accidentTable td,
#contentsArea .crackdownTable td,
#contentsArea .permissionTable td,
#contentsArea .limitsTable td,
#contentsArea .agencyTable td,
body.mainPage .top10Table td {
    padding: 10px 12px !important;
    font-size: 14px !important;
    text-align: center !important;
    border-bottom: 1px solid #f4f5f6 !important;
}
#contentsArea .noticeTable tbody tr:hover,
#contentsArea .infoTable tbody tr:hover,
#contentsArea .raceTable tbody tr:hover,
#contentsArea .accidentTable tbody tr:hover,
#contentsArea .crackdownTable tbody tr:hover,
#contentsArea .permissionTable tbody tr:hover,
#contentsArea .limitsTable tbody tr:hover,
#contentsArea .agencyTable tbody tr:hover,
body.mainPage .top10Table tbody tr:hover {
    background: #f6f9ff !important;
}

/* ---- 공지사항 / FAQ 표 (noticeTable) ---- */
#contentsArea .noticeTable { margin-top: 18px !important; }
#contentsArea .noticeTable td:nth-child(2), #contentsArea .noticeTable td:nth-child(3),
#contentsArea .noticeTable th:nth-child(2), #contentsArea .noticeTable th:nth-child(3) { text-align: left !important; }

/* ---- 도움말 / 단속 담당기관 표 (infoTable) ---- */
#contentsArea .infoTable { margin-top: 8px !important; }
#contentsArea .infoTable td:nth-child(1) { color: var(--navy) !important; font-weight: 700 !important; white-space: nowrap; }
#contentsArea .infoTable td:nth-child(2) { text-align: left !important; }

/* ---- 화물차량운행통계 표 (raceTable) ---- */
#contentsArea .raceTable th, #contentsArea .raceTable td { border: 1px solid #eef0f2 !important; }
#contentsArea .raceTable tbody th {
    background: #fafbfc !important; color: #1f2937 !important; font-weight: 700 !important;
    text-align: left !important; white-space: nowrap; padding: 10px 12px !important; font-size: 14px !important;
}

/* ---- 화물차량사고통계 표 (accidentTable): 사망자/부상자 강조 ---- */
#contentsArea .accidentTable thead th { position: sticky; top: 0; background: #e7f1ff !important;}
#contentsArea .accidentTable thead th:nth-child(4) { color: var(--kpiRed) !important; }
#contentsArea .accidentTable thead th:nth-child(5) { color: var(--kpiBlue) !important; }
#contentsArea #accident-list .red { color: var(--kpiRed) !important; font-weight: 700 !important; }
#contentsArea #accident-list .blue { color: var(--kpiBlue) !important; font-weight: 700 !important; }
#contentsArea #accident-list .rankNum {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: #eef1f4; color: var(--muted); font-size: 11px; font-weight: 700;
}
#contentsArea #accident-list tr:nth-child(-n+3) .rankNum { background: var(--navy); color: #fff; }

/* ---- 단속정보조회 표 (crackdownTable) ---- */
#contentsArea .crackdownTable th, #contentsArea .crackdownTable td { white-space: nowrap; }
#contentsArea .crackdownTable .danger { color: var(--kpiRed) !important; font-weight: 700 !important; }
#contentsArea .crackdownTable .ok { color: var(--kpiGreen) !important; font-weight: 700 !important; }
#contentsArea .crackdownTable .warn { color: var(--kpiOrange) !important; font-weight: 700 !important; }

/* ---- 단속장비 설치정보 표 (equipInstallTable, 라벨형) ---- */
#contentsArea .equipInstallTable th, #contentsArea .equipInstallTable td { border: 1px solid #e5e7eb !important; text-align: left !important; }
#contentsArea .equipInstallTable th { width: 90px; }
#contentsArea .equipInstallTable td { color: #333 !important; }

/* ---- 운행허가통계 상세 표 (permissionTable): 연도별 허가건수/증감 ---- */
#contentsArea .permissionTable th, #contentsArea .permissionTable td { border: 1px solid #eef0f2 !important; white-space: nowrap; }
#contentsArea .permissionTable tbody th {
    background: #fafbfc !important; color: #1f2937 !important; font-weight: 700 !important;
    text-align: left !important; white-space: nowrap; position: sticky; left: 0;
    padding: 10px 12px !important; font-size: 14px !important;
}
#contentsArea .permissionTable .up { color: var(--kpiRed) !important; font-weight: 700 !important; }
#contentsArea .permissionTable .down { color: var(--kpiBlue) !important; font-weight: 700 !important; }

/* ---- 제한차량단속통계 상세 표 (limitsTable): 단속유형별 연도 현황 + 전년대비/연평균 증가율 ---- */
#contentsArea .limitsTable th, #contentsArea .limitsTable td { border: 1px solid #eef0f2 !important; white-space: nowrap; }
#contentsArea .limitsTable tbody th {
    background: #fafbfc !important; color: #1f2937 !important; font-weight: 700 !important;
    text-align: left !important; white-space: nowrap; position: sticky; left: 0;
    padding: 10px 12px !important; font-size: 14px !important;
}
#contentsArea .limitsTable .dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
}
#contentsArea .limitsTable .up { color: var(--kpiRed) !important; font-weight: 700 !important; }
#contentsArea .limitsTable .down { color: var(--kpiBlue) !important; font-weight: 700 !important; }
#contentsArea .limitsTable .totalRow th, #contentsArea .limitsTable .totalRow td {
    background: #f6f9ff !important; font-weight: 700 !important;
}

/* ---- 단속 담당기관 상세 현황 표 (agencyTable) ---- */
#contentsArea .agencyTable th, #contentsArea .agencyTable td { border: 1px solid #eef0f2 !important; white-space: nowrap; }
#contentsArea .agencyTable td:nth-child(2), #contentsArea .agencyTable td:nth-child(3) { text-align: left !important; white-space: normal; }
#contentsArea .agencyTable .totalRow td {
    background: #f6f9ff !important; font-weight: 700 !important;
}

/* ---- 메인화면 주요 사고 지점 TOP10 표 (top10Table) ---- */
body.mainPage .top10Table { font-size: 14px; }
/* sticky th는 부모 tr의 배경이 아니라 th 자체에 불투명 배경이 있어야 스크롤 시 tbody 행이 비쳐 겹쳐 보이지 않는다 */
body.mainPage .top10Table th { position: sticky; top: 0; background: #e7f1ff !important; z-index: 1; }
body.mainPage .top10Table td:nth-child(2) { text-align: center !important; }
body.mainPage .top10Table th:nth-child(3) { color: var(--kpiRed) !important; }
body.mainPage .top10Table th:nth-child(4) { color: var(--kpiBlue) !important; }
body.mainPage .top10Table td:nth-child(3) { color: var(--kpiRed); font-weight: 700; }
body.mainPage .top10Table td:nth-child(4) { color: var(--kpiBlue); font-weight: 700; }
body.mainPage .top10Table .rankNum {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: #eef1f4; color: var(--muted); font-size: 11px; font-weight: 700;
}
body.mainPage .top10Table tr:nth-child(-n+3) .rankNum { background: var(--navy); color: #fff; }

/* ── 에러 메시지 ─────────────────────────────────── */
.err-msg {
    color: var(--kpiRed);
    font-size: 14px;
    text-align: center;
    margin: -16px 0 16px;
    padding: 8px 12px;
    background: var(--kpiRedBg);
    border: 1px solid rgba(229,72,77,.28);
    border-radius: 8px;
    animation: shake .4s ease;
}
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-8px); }
    40%     { transform: translateX(8px); }
    60%     { transform: translateX(-5px); }
    80%     { transform: translateX(5px); }
}

/* ============================================================
   목록 페이징 (listPanel-foot) — Bootstrap pagination + N개씩 보기
   common/common.html의 listPaging 프래그먼트에서 공통으로 사용.
   페이지별 <style>에 넣지 말고 이 파일에서만 관리한다.
   ============================================================ */
.listPanel-foot { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-md) !important; position: relative; }
.listPanel-foot .pagination { margin-bottom: 0 !important; }
.listPanel-foot .pageSize { position: absolute; right: 0; }
.listPanel-foot .pageSize select {
    border: 1px solid #d7dbe0; border-radius: 8px; padding: 6px 10px !important; font-size: 13px; background: #fff;
}
@media (max-width: 992px) {
    .listPanel-foot { flex-direction: column; }
    .listPanel-foot .pageSize { position: static; }
}



/* 로딩 스피너 스타일 */
#loading {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* 다른 요소들보다 위에 표시 */
}

.spinner {
    border: 12px solid #f3f3f3; /* 밝은 회색 */
    border-top: 12px solid #3498db; /* 파란색 */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

/* 스피너 회전 애니메이션 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}