/* 기존 설정 유지 */
html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f0f2f5;
    overflow: hidden; /* 가로 스크롤 방지 */
}

/* 전체 페이지의 기본 설정 */
body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

/* 공통 컨테이너 */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.container { padding: 0 !important; }

.header-content, .dashboard-content, .content {
  padding: 0 10px;
}

/* 모든 input, textarea, select에 기본 스타일 적용 */
input, textarea, select {
    width: auto;
    padding: 2px;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 13px;
    transition: border-color 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input:disabled, textarea:disabled, select:disabled {
    background-color: #f9f9f9;
    cursor: not-allowed;
}

label {
    font-weight: bold;
    margin-left: 5px;
}

:root{
  --topbar-h: 38px;     /* 탑바/푸터 공통 높이 */
  --topbar-pad-x: 18px;
}

/* 헤더와 푸터 */
header, footer {
  flex-shrink: 0;
  text-align: center;
  color: white;
}

/* ===== Footer ===== */
footer {
  width: 100%;
  height: var(--topbar-h);        /* 🔥 핵심 */
  min-height: var(--topbar-h);    /* 🔥 핵심 */
  line-height: var(--topbar-h);   /* 🔥 세로 가운데 정렬 보조 */

  background: linear-gradient(90deg, #0b1220, #0e1a33, #0b1220);
  color: #e6ebf2;

  padding: 0;                     /* ← 기존 1px 0 제거 */
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 auto;

  display: flex;                  /* 가운데 정렬을 위해 */
  align-items: center;

  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

/* 푸터 내부 컨테이너 */
.footer-container {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px; /* 좌우 여백 */
}

/* 좌측 */
.footer-container .left-align {
  text-align: left;
  flex: 1;
}

/* 가운데 */
.footer-container .center-align {
  text-align: center;
  flex: 0 0 auto;
}


.top-bar{
  position: fixed;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;   /* 좌/우 분리 */
  width: 100%;
  padding: 0 var(--topbar-pad-x);
  background: linear-gradient(90deg, #0b1220, #0e1a33, #0b1220);
  color: #e6ebf2;
}

/* 중앙 문구 → 이제는 중앙이 아니라 "로고 옆" */
.top-bar-content{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.top-bar-content strong{
  font-weight: 700;
}

.topbar-left{
  display: flex;
  align-items: center;
  gap: 10px;          /* 🔥 로고와 문구 간격 */
}

.topbar-logo{
  display: flex;
  align-items: center;
}

.topbar-logo img{
  height: 18px;        /* 🔥 핵심: 탑바에 딱 맞는 크기 */
  width: auto;
  display: block;
}

#excel-status{
  margin-left: 8px;   /* 로고 옆 문구 기준 */
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ff4d4d, #ff7a7a);
  box-shadow: 0 0 0 0 rgba(255,77,77,0.6);
  animation: excelPulse 1.6s infinite;
  display: none; /* JS에서 켜짐 */
}

@keyframes excelPulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,77,77,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(255,77,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); }
}


/* 로고 이미지 사이즈 줄이기 (핵심) */
.logo-container img{
  height: 20px;     /* ← 지금 스샷 기준: 32~36px 추천 */
  width: auto;
  display: block;
}


.logo-container:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 32px rgba(0,0,0,0.24),
    0 1px 0 rgba(255,255,255,0.9) inset;
}


.dashboard-visual-wrapper {
    position: relative;
    width: 100%;
    height: calc(100vh - 140px); /* header/footer 제외 높이 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

.dashboard-bg-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 1;
    z-index: 1;
}

.dashboard-logo-text {
    position: absolute;
    text-align: center;
    z-index: 2;
    color: #ffffff;
    text-shadow: 0 0 10px #1e90ff;
    animation: floatLogo 5s ease-in-out infinite;
    padding: 10px;
}

.dashboard-logo-text h1 {
    font-size: 6vw; /* 반응형 */
    margin: 0;
}

.dashboard-logo-text p {
    font-size: 3vw; /* 반응형 */
    margin: 5px 0 0 0;
}

@keyframes floatLogo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .dashboard-logo-text h1 {
        font-size: 8vw;
    }

    .dashboard-logo-text p {
        font-size: 4vw;
    }
}


/* 메뉴를 top-bar 안에 ‘같은 높이’로 맞춤 */
.main-menu{
  position: absolute;
  top: 0;
  right: var(--topbar-pad-x);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  z-index: 2100;
}

/* 가로 정렬 + 간격 */
.main-menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

/* 메인메뉴 버튼 크기 축소 */
.main-menu .menu-item a{
  padding: 5px 10px;          /* ← 세로/가로 줄임 */
  border-radius: 999px;
  font-size: 11px;            /* ← 12 → 11 */
  font-weight: 700;           /* ← 800 → 700 */
  letter-spacing: 0.15px;

  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.30);
  color: #0b1220;

  box-shadow: 0 8px 14px rgba(0,0,0,0.10);
  transition: transform 0.14s ease,
              background-color 0.14s ease,
              box-shadow 0.14s ease,
              border-color 0.14s ease;
}

/* hover도 과하지 않게 */
.main-menu .menu-item a:hover{
  transform: translateY(-1px);
  background: #007bff;  /* 살짝만 */
  border-color: rgba(0, 123, 255, 0.30);
  box-shadow: 0 12px 20px rgba(0,0,0,0.14);
}

/* 클릭 */
.main-menu .menu-item a:active{
  transform: translateY(0px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
}

.main-menu{
  margin-right: calc(var(--topbar-pad-x) * 2.0);
}

/* 키보드 포커스 */
.main-menu .menu-item a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25), 0 14px 26px rgba(0,0,0,0.12);
}

/* 기본: 블루 */
.main-menu .menu-item:last-child a[href*="logout"]{
  color: #ffffff;
  background: linear-gradient(135deg, #007bff, #0056b3);
  border-color: rgba(0,123,255,0.35);
  box-shadow: 0 14px 26px rgba(0,123,255,0.22);
}

/* 🔥 hover: 네이비 계열로 확실히 변화 */
.main-menu .menu-item:last-child a[href*="logout"]:hover{
  background: linear-gradient(135deg, #0b1220, #1b2a44);
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 18px 34px rgba(0,0,0,0.35);
}

/* 반응형: 좁아지면 padding 살짝 줄이기 */
@media (max-width: 520px){
  .main-menu{
    right: 10px;
    top: 10px;
  }
  .main-menu ul{
    gap: 6px;
  }
  .main-menu .menu-item a{
    padding: 6px 10px;
    font-size: 11px;
  }
}

.dashboard-content {
    display: flex-start;
    flex-grow: 1;
    padding: 8px;
    margin-left: 75px; /* 사이드바 너비 만큼의 여백 추가 */
    margin-top: 0px; /* 대시보드를 아래로 10px 내림 */
    align-items: flex-start; /* 추가: 좌측 정렬 */
}

.dashboard-content a {
    color: blue;
    text-decoration: none;
    cursor: pointer;
}

.dashboard-content a:hover {
    text-decoration: none;
}

.dashboard-content button {
    cursor: pointer;
}

.dashboard-content td {
    cursor: default; /* 기본으로 클릭 불가 표시 */
}

.dashboard-content td.clickable {
    cursor: pointer; /* 클릭 가능한 셀만 포인터 표시 */
}

.dashboard-content h2 {
    position: relative;
    top: 20px; /* 글자만 10px 내려감 */
}

.dashboard-content h2::before {
    content: "👉 ";
    font-size: 20px;
    position: relative;
    top: -5px; /* 손가락 위치 미세조정 */
}

/* 기존 컨테이너 높이 100vh → auth-bg가 담당 */
.login-container, .register-container, .forgot-password-container, .reset-password-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding: 0;
}

/* ===== Card ===== */
.login-card.pro {
  width: 100%;
  max-width: 420px;
  padding: 30px 30px 26px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.35),
    0 1px 0 rgba(255,255,255,0.65) inset;
  border: 1px solid rgba(255,255,255,0.55);
  text-align: left;
  margin-left: 0; /* 기존 -35px 제거 */
  position: relative;
  overflow: hidden;
}

/* 카드 상단 은은한 라인 */
.login-card.pro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,123,255,0.18), transparent 40%),
    linear-gradient(45deg, rgba(255,255,255,0.35), transparent 55%);
  pointer-events: none;
}

.login-header {
  margin-bottom: 20px;
}

.login-title {
  margin: 0;
  line-height: 1.3;
}

.login-desc {
  margin-top: 10px;
  line-height: 1.5;
  color: #556070;
}

/* ===== Brand ===== */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.logo-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007bff, #00c2ff);
  box-shadow: 0 0 0 6px rgba(0,123,255,0.12);
}
.brand-title {
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #0b1220;
  font-size: 15px;
}
.brand-sub {
  font-size: 12px;
  color: #5a6475;
  margin-top: 1px;
}

/* ===== Title / Desc ===== */
.login-title {
  margin: 8px 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: #0b1220;
  position: relative;
  z-index: 1;
}
.login-desc {
  margin: 0 0 18px;
  font-size: 13px;
  color: #556070;
  position: relative;
  z-index: 1;
}

/* ===== Inputs ===== */
.login-input-group {
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.login-input-group label {
  display: block;
  margin-bottom: 8px;
  color: #2c3545;
  font-weight: 700;
  font-size: 13px;
}

.input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(12, 20, 40, 0.14);
  background: rgba(255,255,255,0.7);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(0,123,255,0.10);
  color: #0b3b8f;
  font-size: 14px;
  flex: 0 0 30px;
}

.login-input-group input {
  width: 100%;
  padding: 8px 2px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #0b1220;
}

.input-wrap:focus-within {
  border-color: rgba(0,123,255,0.55);
  box-shadow: 0 10px 25px rgba(0,123,255,0.18);
  transform: translateY(-1px);
}

/* ===== Button ===== */
.login-button {
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #007bff, #0056b3);
  box-shadow: 0 16px 30px rgba(0,123,255,0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}

.login-button:hover {
  filter: brightness(1.03);
  box-shadow: 0 18px 40px rgba(0,123,255,0.32);
  transform: translateY(-1px);
}
.login-button:active {
  transform: translateY(0px);
  box-shadow: 0 10px 22px rgba(0,123,255,0.22);
}

/* ===== Links ===== */
.pro-links {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}

.link-btn {
  flex: 1;
  text-align: center;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  color: #0b3b8f;
  background: rgba(0,123,255,0.10);
  border: 1px solid rgba(0,123,255,0.16);
  transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.link-btn:hover {
  transform: translateY(-1px);
  background: rgba(0,123,255,0.14);
  border-color: rgba(0,123,255,0.26);
}

.link-btn.ghost {
  color: #2c3545;
  background: rgba(12, 20, 40, 0.06);
  border: 1px solid rgba(12, 20, 40, 0.12);
}
.link-btn.ghost:hover {
  background: rgba(12, 20, 40, 0.09);
  border-color: rgba(12, 20, 40, 0.16);
}

/* ===== (중요) 전역 button 스타일이 로그인버튼까지 망가뜨리는 문제 방지 ===== */
/* 너의 기존 코드: button, button.button { padding:0.5px; width:90px; ... } 때문에 로그인 버튼이 작아질 수 있음 */
.login-card.pro button.login-button {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 12px;
  margin-left: 0;
}


/* 반응형 버튼 스타일 */
button,
button.button {
    margin-left: 2px;
    padding: 0.5px;
    font-size: 13px;
    border-radius: 2px;
    width: 90px;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* 반응형 버튼 스타일 */
.btn-primary, .btn-secondary, .btn-danger {
    margin-left: 3px;
    padding: 0px;
    font-size: 11px;
    border-radius: 2px;
    width: 50px;
    cursor: pointer;
    transition: background-color 0.2s;
}



.links {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.links a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
    transition: color 0.2s;
}

.links a:hover {
    color: #0056b3;
}

.message-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    color: red;
}

.sidebar {
    width: 150px; /* 화면 너비의 7% */
    padding: 10px;
    box-sizing: border-box;
    position: fixed;
    
    top: 38px; /* 헤더 아래 위치 */
    bottom: 0px; /* 푸터 위에 위치 */
    margin-top: 0px;
    
    background-color: #0056b3;
    
    height: calc(100vh - 76px); /* 전체 높이에서 헤더(50px)와 여백(20px) 제외 */
    min-height: 600px; /* 최소 높이 */
    max-height: 95vh; /* 최대 높이 */
}

.sidebar-button {
    width: 90%;
    height:auto;
    padding: 5px;
    margin-bottom: 0; /* 버튼 아래 여백 없애기 */
    margin-bottom: 13px;
    background-color: #0056b3;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
    transition: background-color 0.2s;
}

.sidebar {
    padding-top: 40px;   /* 버튼 전체가 아래로 내려감 */
}

.sidebar-button::before {
    content: "▶";
    color: #aaa126;           /* 아이콘 색상 */
    font-size: 13px;       /* 아이콘 크기 */
    vertical-align: middle;
}

.sidebar-button:hover {
    background-color: #003d80;
}

.sidebar-button .count {
    color: rgb(72, 255, 0);
    font-weight: bold;
}

.sidebar-button.active {
    background-color: #272a46; /* 활성화된 메뉴의 배경색 */
    color: rgb(229, 241, 62); /* 텍스트 색상 */
    font-weight: bold; /* 텍스트 굵기 */
}

.sidebar-submenu {
    margin: 0;
    padding: 5px 0 30px 0;
}

.sidebar-sub-button {
    padding: 3px 10px; /* 위아래 살짝만 공간 */
    margin: 0;
    background: none;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    color: #ffffff; /* 노란색으로 보이게 */
}

.sidebar-sub-button:hover {
    background-color: #003d80;
}

.sidebar-sub-button.active {
    font-weight: bold;
    color: #fdf910;
}

.sidebar-sub-button .count {
    color: rgb(72, 255, 0);
    font-weight: bold;
}

/* 하위메뉴 컨테이너: 위 간격/아래 패딩 줄이기 */
.sidebar-submenu {
    margin-top: -12px;      /* 기존 0 → 4px (상위와의 간격만 살짝) */
    padding: 0 0 3px 0;  /* 기존 5px 0 30px 0 → 0 0 10px 0 */
}

/* 하위버튼: 우측 정렬 */
.sidebar-sub-button {
    text-align: right;    /* ✅ 우측정렬 */
    padding: 4px 10px;    /* 기존 3px 10px → 4px 10px (클릭영역 살짝 보강) */
}

.sidebar-sub-button {
    display: block;
    width: 90%;
    margin-left: auto; /* 오른쪽으로 붙이기 */
    text-align: right;
}
/* 좌/우 공통: 세로 스크롤 주체 */
.std-scroll-y {
  position: relative;
  border: 1px solid #e5e5e5;
}

/* 좌측: sticky 헤더(세로 고정) */
.std-wrap .fixed-part thead th {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* 우측: 헤더/바디 분리 패턴 */
.scroll-head-wrap {
  position: sticky;   /* 세로 고정은 여기서 */
  top: 0;
  z-index: 12;        /* 본문/좌측 헤더보다 위 */
  overflow: hidden;   /* 안쪽만 가로로 움직임 */
}

/* 헤더 가로 이동용 컨테이너(translateX 적용 대상) */
.scroll-head-inner {
  will-change: transform;
}

/* 헤더 th 자체 스타일 */
.scroll-part-head thead th {
  z-index: 12;
  /* border-collapse 충돌 회피 */
}

/* 두 표 모두 ‘지정한 폭’을 그대로 쓰도록 */
.scroll-part-head,
.scroll-part-body {
  table-layout: fixed;       /* ← 지정폭을 신뢰 */
  border-collapse: separate; /* sticky 안정화 */
  border-spacing: 0;
}

/* 셀 박스계산 통일(폭 계산 흔들림 방지) */
.scroll-part-head th,
.scroll-part-body td {
  box-sizing: border-box;
}

/* 우측 바디: 가로 스크롤 담당 */
.std-right-x {
  overflow-x: auto;      /* 가로 스크롤 */
  overflow-y: visible;   /* 세로는 관여 X (sticky가 .std-scroll-y를 보게) */
  padding-bottom: 16px;  /* 하단 바와 간격 */
}

/* 하단 가짜 스크롤바 유지 */
.std-right-bottombar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: #fff;
  overflow-x: auto;
  height: 16px;
  border-top: 1px solid #e5e5e5;
}
.hscroll-proxy { height: 1px; }

/* 표 공통: sticky 안정화 위해 collapse 해제 */
.std-wrap table.fixed-part,
.std-wrap table.scroll-part-head,
.std-wrap table.scroll-part-body {
  border-collapse: separate !important;
  border-spacing: 0;
}

/* td는 말줄임 유지, th는 overflow 주지 않음 */
.corrections-table td, .std-table td {
  border: 1px solid #ddd;
  padding: 3px;
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 19px;
  background: #fff;
}
.corrections-table thead th, .std-table thead th {
  border: 1px solid #ddd;
  padding: 3px;
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
  line-height: 19px;
}

/* 헤더 색상 */
.corrections-table thead th, .std-table thead th {
  background-color: #d8b7b7;
  font-weight: bold;
}

/* 좌/우 배치가 반드시 한 줄에 있도록 강제 */
.std-flex {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;  /* 높이 차이로 인한 줄바꿈 방지 */
  min-width: 0;
}

/* 좌측은 내용폭만큼, 우측은 남는 폭 전부 */
.std-left  { flex: 0 0 auto; width: max-content; }
.std-right { flex: 1 1 auto; min-width: 0; }   /* ← 중요: 0 허용해야 우측이 줄바꿈 안 됨 */

/* 우측 가로 스크롤 컨테이너는 가로만 스크롤, 세로는 관여 X */
.std-right-x {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 16px;
}

/* 헤더는 sticky(세로 고정), 가로 이동은 transform로 동행 */
.scroll-head-wrap {
  position: sticky;
  top: 0;
  z-index: 12;
  overflow: hidden;        /* 안쪽만 translateX로 이동 */
}
.scroll-head-inner {
  will-change: transform;
}

/* sticky 안정화: 해당 표만 separate */
.std-wrap table.fixed-part,
.std-wrap table.scroll-part-head,
.std-wrap table.scroll-part-body {
  border-collapse: separate !important;
  border-spacing: 0;
}

/* th sticky */
.scroll-part-head thead th,
.fixed-part thead th {
  position: sticky;
  top: 0;
  z-index: 12;
}

.std-scroll-y .pagination {
  position: fixed;      /* absolute → fixed(뷰포트 기준) */
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* 스크롤바 숨김(브라우저별) */
.std-right-x::-webkit-scrollbar { height: 0 !important; }
.std-right-x { scrollbar-width: none; }

/* 우측 테이블은 고정 레이아웃 + 박스계산 통일 */
.scroll-part {
  table-layout: fixed;        /* 셀 폭을 colgroup/width로 고정 */
}
.scroll-part th,
.scroll-part td {
  box-sizing: border-box;     /* 측정/적용 오차 줄이기 */
}

/* (안전) thead가 본문을 가리지 않도록 z-index 조정은 유지 */
.std-wrap .scroll-part thead th {
  z-index: 7 !important;
}
.std-wrap .fixed-part thead th {
  z-index: 7 !important;
}

.fixed-part th, .fixed-part td,
.scroll-part th, .scroll-part td {
  box-sizing: border-box;
}

/* ===== 표준기관리 전용: 행/셀 높이 강제 고정 ===== */
.std-wrap { --row-h: 24px; --head-h: 26px; }  /* 원하는 높이로 조정 가능 */

.std-wrap .corrections-table thead th {
  height: var(--head-h) !important;
  line-height: var(--head-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
}

/* tbody 행/셀 높이 완전 고정(좌/우 테이블 공통) */
.std-wrap .corrections-table tbody tr {
  height: var(--row-h) !important;
}
.std-wrap .corrections-table tbody td {
  height: var(--row-h) !important;
  line-height: var(--row-h) !important;  /* 한 줄 중앙정렬 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
}

/* 셀 내부에 flex/div가 있는 경우도 높이를 강제로 맞춤 */
.std-wrap .corrections-table tbody td > div {
  height: var(--row-h) !important;
  display: flex;
  align-items: center;
  overflow: hidden;       /* 버튼/텍스트가 넘치면 잘라냄 */
}

.preview-header {
    display: flex;
    align-items: center;      /* 세로 가운데 정렬 */
    justify-content: space-between; /* 제목 왼쪽, 닫기 오른쪽 */
    padding: 5px 5px 0px 5px;
}

.preview-header h3 {
    margin: 0;
    font-size: 20px;
}

.preview-close {
    cursor: pointer;
    font-size: 24px;
    padding: 0 10px;
    line-height: 1;
}

#excelPreviewModal h3 {
    margin: 5px 0;
    padding: 0;
}

#excelPreviewModal .modal-content {
    padding-top: 10px;
}

.table-container.auto-fit{
  overflow-y: auto;
}

.corrections-table.table-hover tbody tr:hover,
.corrections-table.table-hover tbody tr:hover td {
    background-color: #c7bbbc !important;
}

/* JS로 제어할 hover 클래스 */
.row-hover,
.row-hover td {
    background-color: #c7bbbc !important;
}

/* 연체(도래) row - 셀 배경에 직접 색을 넣기 */
.overdue-row td {
    background-color: #f4b0b0 !important;
}

/* 마우스 오버 시 색 변경까지 하고 싶으면 */
.overdue-row:hover td {
    background-color: #d1cdcd !important;
}

.preview-row {
    cursor: pointer;
}

/* 게이지류 행 기본 배경 */
.gauge-row td {
    background-color: lightgray !important;
}

/* 게이지류 행 hover 시 */
.gauge-row:hover td {
    background-color: ivory !important;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; /* 절대 위치 설정 */
    bottom: 45px; /* 대시보드의 하단에서 20px 위로 */
    left: 50%; /* 페이지 가운데 정렬 */
    transform: translateX(-50%); /* 가로 정렬을 위한 변환 */
    gap: 5px;
    font-size: 13px;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 6px 10px;
    margin: 0 2px;
    border: 1px solid #007bff;
    border-radius: 4px;
    color: #007bff;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.pagination a:hover {
    background-color: #007bff;
    color: white;
}

.pagination .pagination-current {
    font-weight: bold;
    color: #000;
}

.pagination .disabled {
    color: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}


.button:hover {
    background-color: #9cc5f1;
}

.slideshow-container {
    text-align: center; /* 컨테이너 안의 콘텐츠를 중앙 정렬 */
    width: 100%;
    margin-bottom: 1px; /* services와 간격 조정 */
}

.slideshow-container img {
    width: 45%; /* 배너 이미지를 화면 폭의 60%로 설정 */
    margin: 0 auto; /* 중앙 정렬 */
    display: block;
}

/* ✅ pro 카드 공통을 register/reset에도 적용 */
.register-card.pro,
.reset-password-card.pro,
.forgot-password-card.pro {
  width: 100%;
  max-width: 420px;
  padding: 30px 30px 26px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.65) inset;
  border: 1px solid rgba(255,255,255,0.55);
  text-align: left;
  margin-left: 0;
  position: relative;
  overflow: hidden;
}

/* 카드 상단 은은한 라인 */
.register-card.pro::before,
.reset-password-card.pro::before,
.forgot-password-card.pro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,123,255,0.18), transparent 40%),
    linear-gradient(45deg, rgba(255,255,255,0.35), transparent 55%);
  pointer-events: none;
}

/* 제목/설명 겹침 방지 + 간격 통일 */
.login-header{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  position: relative;
  z-index: 5;
}
.login-title{ margin: 0; line-height: 1.3; position: relative; z-index: 5; }
.login-desc { margin: 0; line-height: 1.5; position: relative; z-index: 5; }

/* 입력 그룹 이름이 달라도 input-wrap 공통 사용 */
.register-input-group,
.reset-password-input-group,
.forgot-password-input-group {
  margin-bottom: 14px;
  position: relative;
  z-index: 5;
}
.register-input-group label,
.reset-password-input-group label,
.forgot-password-input-group label {
  display: block;
  margin-bottom: 8px;
  color: #2c3545;
  font-weight: 700;
  font-size: 13px;
}

/* 기존 input 스타일이 남아있으면 덮어쓰기 */
.register-input-group input,
.reset-password-input-group input,
.forgot-password-input-group input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 8px 2px;
  font-size: 14px;
  color: #0b1220;
}

/* 안내문(회원가입 하단) */
.auth-note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(12, 20, 40, 0.06);
  border: 1px solid rgba(12, 20, 40, 0.10);
  color: #2c3545;
  font-size: 13px;
  position: relative;
  z-index: 5;
}

/* 비밀번호 규칙 리스트도 카드 톤에 맞춤 */
.password-rule{
  margin: 10px 0 0;
  padding-left: 18px;
  color: #556070;
  font-size: 12.5px;
}
.password-rule li{
  margin: 4px 0;
}
.input-check-msg{
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #556070;
}

/* ✅ 전역 button 스타일(90px/0.5px) 영향 제거 */
.register-card.pro button,
.reset-password-card.pro button,
.forgot-password-card.pro button {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  margin-left: 0;
}

/* 입력 그룹 스타일 */
.calibration-register-input-group {
    display: flex;  /* 가로 정렬 */
    align-items: center;
    margin-bottom: 12px;  /* 그룹 간의 간격 조정 */
    width: 1000px;

}

/* 레이블 스타일 */
.calibration-register-input-group label {
    width: 70px;  /* 레이블의 고정 너비 */
    margin-right: 10px;
    color: #555;
    font-weight: bold;
    font-size: 12px;
}

/* 입력 필드 스타일 */
.calibration-register-input-group input,
.calibration-register-input-group select {
    flex: 1;
    padding: 7px;  /* 입력 필드 패딩 조정 */
    border: 1px solid #ccc;
    border-radius: 5px;  /* 모서리 둥글게 */
    font-size: 12px;
    transition: border-color 0.3s ease;
}

/* 입력 필드 포커스 스타일 */
.calibration-register-input-group input:focus,
.calibration-register-input-group select:focus {
    border-color: #007bff;  /* 포커스 시 파란색 테두리 */
    outline: none;
}


/* 캘린더 스타일 */
#calendar-container {
    width: 100%;
    max-width: 1630px; /* 더 적절한 너비로 조정 */
    margin: 20px 0 0 0; /* 위 20px, 오른쪽 0, 아래 0, 왼쪽 0 */
    padding: 15px;
    border-radius: 12px;
    box-shadow: none; /* ✅ 그림자 제거 */
    background-color: transparent; /* 배경 제거 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 헤더 스타일 */
#calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 30px;
    color: #333;
    font-weight: 800;
}

#calendar-header button {
    background-color: #4a90e2;
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

#calendar-header button:hover {
    background-color: #357abd;
}

/* 테이블 스타일 */
#calendar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #555;
    table-layout: fixed;
    height: calc(100vh - 200px); /* 화면 높이에서 header/footer 제외한 공간 확보 */
    overflow-y: auto;
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#calendar-table th {
    position: sticky;      /* ✅ sticky로 고정 */
    top: 0;                /* ✅ 상단에 고정 */
    z-index: 2;            /* ✅ 셀보다 위에 보이도록 z-index 설정 */
    background-color: #fafafa; /* 원하는 색상 */
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    height: 30px; /* 줄인 높이 설정 */
    padding: 8px; /* 상하 패딩을 줄여 요일 칸 높이 조절 */
    font-size: 14px; /* 글자 크기를 줄여서 간결하게 */
}

#calendar-table td {
    border: 2px solid #f0f0f0;
    text-align: left;
    width: 14.28%;
    min-width: 220px;  /* ✅ 일정이 없어도 너무 좁아지지 않도록 최소폭 추가 */
    vertical-align: top;
    transition: background-color 0.3s ease;
    position: relative;
    overflow: hidden;
    padding: 5px;
    height: 100px; /* 고정 높이 */
    background-color: #fff; /* 날짜 칸 배경 */
}

#calendar-table td:hover {
    background-color: #f8e6e6;
    cursor: pointer;
}

#calendar-table td .event {
    max-height: 60px; /* 한 셀에서 최대 높이 제한 */
    overflow-y: auto;
    display: block;
}

/* 주말 색상 설정 */
.saturday {
    color: #5b6aec; /* 빨간색 */
}

.sunday {
    color: #FF4500; /* 빨간색 */
}

.today {
    background-color: #f3eba6;
    border: 1px solid #007BFF;
    border-radius: 4px;
}

.date-number.dimmed {
    color: #ccc;
}

/* 이벤트 스타일 */
.event {
    background-color: #b6d4f7;
    color: rgb(43, 40, 40);
    font-size: 11px;
    border-radius: 3px;
    padding: 2px 3px;
    margin-top: 5px;
    display: inline-block;
    max-width: 100%;
    /* 삭제 또는 수정할 부분 ↓ */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event:hover {
    background-color: #357abd;
}

#eventModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    width: 400px;
}

.event-tooltip {
    position: relative;
    display: inline-block;
}

.event-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: pre-wrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    max-width: 250px;
}

.event-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}


#modalOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 900;
}

#eventForm label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: bold;
}

#eventForm input[type="text"], #eventForm textarea, #eventForm input[type="date"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

#eventForm button {
    padding: 10px 20px;
    margin-right: 10px;
    background-color: #007bff;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1em;
}

#eventForm button:hover {
    background-color: #0056b3;
}

#eventForm #deleteBtn {
    background-color: #dc3545;
}

#eventForm #deleteBtn:hover {
    background-color: #c82333;
}

#eventForm #closeModal {
    background-color: #6c757d;
}

#eventForm #closeModal:hover {
    background-color: #5a6268;
}

/* 버튼 스타일 통일 */
.btn-save, .btn-edit {
    background-color: #007bff; /* 성적서 관리와 동일한 파란색 버튼 */
    color: white;
    padding: 5px 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-save:hover, .btn-edit:hover {
    background-color: #0056b3;
}

/* Flash 메시지 스타일 성적서 관리와 통일 */
.flash-messages {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 15px; /* 패딩 증가 */
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.flash-messages.show {
    opacity: 1;
}

.flash-messages .alert {
    margin-bottom: 5px;
}

/* 검색 필드 스타일 */
.search-bar {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}


/* 사용자 수정 페이지 컨테이너 */
.user-edit-container {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 130px auto;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
}

/* 페이지 제목 */
.user-edit-container h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
}

/* 입력 폼의 스타일 */
.user-edit-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 각 입력 필드 스타일 */
.user-edit-form .form-group {
    display: flex;
    flex-direction: column;
}

.user-edit-form label {
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
}

.user-edit-form input[type="text"],
.user-edit-form input[type="email"],
.user-edit-form select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

/* 입력 필드에 포커스 시 */
.user-edit-form input[type="text"]:focus,
.user-edit-form input[type="email"]:focus,
.user-edit-form select:focus {
    border-color: #007bff;
    outline: none;
}

/* 간단한 팝업 스타일 */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    z-index: 1000;
}
.popup-content ul {
    list-style: none;
    padding: 0;
}
.popup-content ul li {
    cursor: pointer;
    margin: 5px 0;
}

/* 오버레이 드롭다운 스타일 */
.autocomplete-overlay {
    position: absolute;
    border: 1px solid #ccc;
    background-color: #fff;
    max-height: 150px;
    overflow-y: auto;
    z-index: 1000;
    width: 100%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 12px; /* 폰트 크기 설정 */
}
.autocomplete-overlay div {
    padding: 8px;
    cursor: pointer;
}
.autocomplete-overlay div:hover, .autocomplete-overlay .highlighted {
    background-color: #c7bebe;
}


/* ✅ 모달 배경 (공통) */
.modal {
  display: none; /* 기본적으로 숨김 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6); /* 반투명한 검은 배경 */
  animation: fadeIn 0.3s ease-out;
  align-items: center;
  justify-content: center;
}

/* ✅ 모달 콘텐츠 (공통 속성) */
.modal-content,
.edit-modal-content {
  position: absolute;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  transition: all 0.2s ease-in-out;
  cursor: default;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: slideIn 0.4s ease-out;
}

/* ✅ 기존 크기 유지 */
.modal-content {
  width: 90%;
  max-width: 1200px;
  height: 95vh;
  top: 30%; /* 중앙보다 살짝 위 */
  margin: 10% auto;
  padding: 20px 30px;
}
.edit-modal-content {
  width: 50%;
  max-width: 600px;
  height: 45vh;
  top: 50%;
  padding: 20px 30px;
}

/* ✅ 제목 스타일 */
.modal-content h3,
.edit-modal-content h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

/* ✅ 입력 그룹 */
.modal-content .input-group,
.edit-modal-content .input-group {
  margin-bottom: 15px;
}

/* ✅ 라벨 */
.modal-content label,
.edit-modal-content label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #555;
}

/* ✅ 입력 필드 */
.modal-content input[type="text"],
.modal-content input[type="date"],
.modal-content textarea,
.edit-modal-content input[type="text"],
.edit-modal-content input[type="date"],
.edit-modal-content textarea {
  width: calc(100% - 10px);
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.modal-content input:focus,
.modal-content textarea:focus,
.edit-modal-content input:focus,
.edit-modal-content textarea:focus {
  border-color: #007bff;
  outline: none;
}

/* ✅ 버튼 */
.modal-content .button,
.edit-modal-content .button {
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 10px;
}

.modal-content .button:hover,
.edit-modal-content .button:hover {
  background-color: #0056b3;
}

.modal-content .button:last-child,
.edit-modal-content .button:last-child {
  background-color: #6c757d;
}

.modal-content .button:last-child:hover,
.edit-modal-content .button:last-child:hover {
  background-color: #5a6268;
}

/* ✅ 헤더 */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f3f3f3;
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  cursor: move; /* 드래그 가능 영역 */
}

.modal-header h3 {
  flex: 1;
  text-align: left;
  margin: 0;
}

#closePdfBtn {
  margin-left: auto;
}

#photoModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); align-items:center; justify-content:center; z-index:9999; }
#photoModal .content {
    background: #fff;
    max-width: 90vw;        /* ❗ 400vw → 화면 기준으로 제한 */
    max-height: 90vh;
    padding: 12px;
    border-radius: 8px;
    overflow-x: hidden;    /* ✅ 좌우 스크롤 차단 */
    box-sizing: border-box;
}
#photoModal .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;    /* ✅ 좌우 스크롤 방지 */
}
#photoModal img { width:100%; height:400px; object-fit:cover; border:1px solid #eee; border-radius:6px; cursor:pointer; }
#photoModal .top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }

.password-rule {
    margin-top: 5px;
    padding-left: 15px;
    font-size: 12px;
    color: #666;
    list-style: none;
}

.password-rule li {
    margin: 3px 0;
}

.password-rule li.valid {
    color: green;
}

.password-rule li.invalid {
    color: red;
}

.input-check-msg {
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

.input-check-msg.valid {
    color: green;
}

.input-check-msg.invalid {
    color: red;
}

.row-mismatch { background-color:#ffe5e5; }

/* 애니메이션 효과 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 닫기 버튼 */
.close-button {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
}


/* 폼 스타일 */
#add-equipment-form {
    display: flex;
    flex-direction: column;
}

#add-equipment-form label {
    font-weight: bold;
    margin-top: 8px;
    font-size: 13px;
}

#add-equipment-form input[type="text"],
#add-equipment-form input[type="date"],
#add-equipment-form input[type="number"],
#add-equipment-form textarea,
#add-equipment-form select {
    padding: 6px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
}

#add-equipment-form textarea {
    resize: vertical; /* 세로 크기 조절 가능 */
}

#add-equipment-form button[type="submit"] {
    background-color: #4CAF50; /* 저장 버튼 색상 */
    color: white;
    padding: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 13px;
}

#add-equipment-form button[type="submit"]:hover {
    background-color: #45a049;
}

/* 폼 스타일 */
#edit-equipment-form {
    display: flex;
    flex-direction: column;
}

#edit-equipment-form label {
    font-weight: bold;
    margin-top: 8px;
    font-size: 13px;
}

#edit-equipment-form input[type="text"],
#edit-equipment-form input[type="date"],
#edit-equipment-form input[type="number"],
#edit-equipment-form textarea,
#edit-equipment-form select {
    padding: 6px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
}

#edit-equipment-form textarea {
    resize: vertical; /* 세로 크기 조절 가능 */
}

#edit-equipment-form button[type="submit"] {
    background-color: #4CAF50; /* 저장 버튼 색상 */
    color: white;
    padding: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 13px;
}

#edit-equipment-form button[type="submit"]:hover {
    background-color: #45a049;
}


/* ===== Certificate Verification Page ===== */
.veri-page{
  min-height: calc(100vh - (var(--topbar-h, 38px) * 1.5));
  display: flex;
  justify-content: center;
  padding: 24px 16px;
}

.veri-card{
  width: 100%;
  max-width: 680px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(12,20,40,0.12);
  box-shadow: 0 30px 70px rgba(0,0,0,0.12),
              0 1px 0 rgba(255,255,255,0.7) inset;

  padding: 22px 22px 20px;

  /* 🔥 핵심 */
  height: calc(
    100vh
    - var(--topbar-h, 38px)   /* 상단 탑바 */
    - var(--topbar-h, 38px)   /* 하단 푸터 */
    - 90px                    /* 푸터 위 여백 */
  );

  overflow: hidden; /* 내부 스크롤은 veri-result에서만 */
}

.veri-header{
  margin-bottom: 10px;
}

.veri-title{
  margin: 0 0 6px 0;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: #0b1220;
  font-size: 20px;      /* 22 → 20 */
  line-height: 1.2;     /* 1.3 → 1.2 */
}

.veri-sub{
  margin: 0;
  font-size: 12.5px;
  color: #556070;
  line-height: 1.4;
}

/* 폼 */
.veri-form{
  display: grid;
  gap: 10px;            /* 12 → 10 */
  margin-top: 12px
}

.veri-field label{
  display: block;
  margin-bottom: 6px;   /* 8 → 6 */
  font-size: 12.5px;
  font-weight: 800;
  color: #2c3545;
}

.veri-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(12,20,40,0.14);
  background: rgba(255,255,255,0.75);
  font-size: 13.5px;
  outline: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  box-sizing: border-box;
}

.veri-input:focus{
  border-color: rgba(0,123,255,0.55);
  box-shadow: 0 10px 25px rgba(0,123,255,0.18);
  transform: translateY(-1px);
}

/* 버튼 */
.veri-btn{
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 900;
  font-size: 13.5px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.veri-btn.primary{
  color: #fff;
  background: linear-gradient(135deg, #007bff, #0056b3);
  box-shadow: 0 16px 30px rgba(0,123,255,0.22);
}

.veri-btn.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0,123,255,0.28);
}

.veri-btn.danger{
  width: auto;
  padding: 10px 12px;
  color: #fff;
  background: linear-gradient(135deg, #ff4d4d, #d83434);
  box-shadow: 0 14px 26px rgba(255,77,77,0.18);
}

.veri-btn.danger:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(255,77,77,0.22);
}

/* 힌트 */
.veri-hint{
  margin-top: 2px;
  font-size: 12px;
  color: #6a7587;
  line-height: 1.4;
}

/* 결과 */
.veri-result{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(12,20,40,0.12);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 18px 35px rgba(0,0,0,0.08);
  padding: 16px;

  /* 🔥 핵심 */
  max-height: calc(
    100vh 
    - var(--topbar-h, 38px)   /* 상단 고정 탑바 */
    - var(--topbar-h, 38px)   /* 하단 푸터 */
    - 16px                    /* 푸터 위 여백 */
    - 220px                   /* 위쪽(헤더+폼) 대략 높이 */
  );

  overflow-y: auto;
}

.veri-result-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.veri-result-head h3{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #0b1220;
}

.veri-grid{
  display: grid;
  gap: 5px;
}

.veri-grid .row{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(12,20,40,0.04);
  border: 1px solid rgba(12,20,40,0.08);
}

.veri-grid .k{
  font-weight: 900;
  color: #2c3545;
  font-size: 12.5px;
}

.veri-grid .v{
  color: #0b1220;
  font-weight: 700;
  word-break: break-word;
}

/* 하단 안내 */
.veri-footer-note{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(12,20,40,0.18);
  font-size: 12px;
  color: #445062;
}

/* 모바일 최적화 */
@media (max-width: 520px){
  .veri-card{ padding: 20px 16px; }
  .veri-grid .row{ grid-template-columns: 1fr; }
  .veri-result-head{ flex-direction: column; align-items: stretch; }
  .veri-btn.danger{ width: 100%; }
}

/* 탑바 고정일 때: 진위확인 페이지 상단 여백 추가 */
.veri-page{
  padding-top: calc(var(--topbar-h, 38px) + 16px);
}

.btn-primary {
    background-color: blue;
    color: white;
}
.btn-secondary {
    background-color: rgb(105, 104, 104);
    color: white;
}

.btn-danger {
    background-color: rgb(233, 97, 97);
    color: white;
}

/* 공통 버튼 전환 효과 */
.btn-primary,
.btn-secondary,
.btn-danger {
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Primary */
.btn-primary:hover {
    background-color: #0047b3; /* blue보다 살짝 어둡게 */
    transform: translateY(-1px);
}

/* Secondary */
.btn-secondary:hover {
    background-color: rgb(80, 79, 79);
    transform: translateY(-1px);
}

/* Danger */
.btn-danger:hover {
    background-color: rgb(200, 70, 70);
    transform: translateY(-1px);
}

/* 클릭 시 */
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

/* 전체 컨테이너에 가로 스크롤 허용 */
.container, .dashboard-content {
    overflow-x: auto;
}

#companyOverlay {
    font-size: 12px; /* 폰트 크기 조정 */
    line-height: 1.4; /* 가독성을 위한 줄 간격 */
}

/* 툴팁 스타일 */
.tooltip {
    position: fixed; /* fixed로 설정하여 화면에 항상 보이도록 설정 */
    display: none; /* 초기에는 숨김 */
    background-color: rgba(0, 0, 0, 0.75); /* 어두운 배경 */
    color: #fff; /* 흰색 텍스트 */
    padding: 5px 10px; /* 여백 추가 */
    border-radius: 5px; /* 둥근 모서리 */
    font-size: 12px; /* 글자 크기 */
    z-index: 1000; /* 다른 요소 위에 표시 */
    pointer-events: none; /* 마우스 이벤트 무시 */
    white-space: nowrap; /* 줄바꿈 방지 */
}

/* 상단메뉴-일자형 */
#single-line-bar {
    display: flex;
    align-items: center;
    gap: 10px; /* 요소 간 간격 */
    flex-wrap: nowrap; /* 줄바꿈 방지 */
}

#single-line-bar form {
    margin: 0;
    display: flex;
    align-items: center;
}

#single-line-bar input,
#single-line-bar select,
#single-line-bar button {
    margin-left: 2px;
    padding: 0.5px;
    font-size: 13px;
    border-radius: 2px;
    width: 90px;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* ✅ 테이블 컨테이너에 스크롤 추가 */
.scrollable-table {
    width: 100%;
    max-height: 490px;  /* 원하는 높이 지정 */
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ddd;  /* 테두리 추가 */
}

/* ✅ 테이블 헤더 고정 */
.scrollable-table table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.scrollable-table thead {
    position: sticky;
    top: 0;
    background: #f4f4f4;
    z-index: 1;
}

#performance-result {
    display: flex;
    align-items: center;
    gap: 10px;  /* 요소 간격 조절 */
    font-size: 16px;  /* 가독성을 위해 글자 크기 통일 */
}

#performance-result h3 {
    margin: 0;
    font-size: 16px;  /* 제목 크기 */
}

#performance-result p {
    margin: 0;
    font-weight: bold;
}

.prev-month, .next-month {
    color: #ccc; /* 흐리게 */
}


/* =========================================
   🔥 Auth 페이지 제목/설명 겹침 완전 차단
   ========================================= */

/* 1️⃣ 로그인 / 회원가입 / 비번변경 공통 */
.login-card.pro h2,
.login-card.pro p,
.register-card.pro h2,
.register-card.pro p,
.reset-password-card.pro h2,
.reset-password-card.pro p {
  position: static !important;   /* ← absolute 제거 */
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2️⃣ 제목/설명 레이아웃 강제 분리 */
.login-header {
  display: block !important;
  margin-bottom: 18px !important;
  position: relative !important;
  z-index: 10 !important;
}

.login-header .login-title {
  display: block !important;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;   /* ← 핵심 */
}

.login-header .login-desc {
  display: block !important;
  font-size: 13px;
  line-height: 1.5 !important;
  color: #556070;
}

/* 3️⃣ 혹시라도 상위가 absolute인 경우 대비 */
.register-card.pro,
.reset-password-card.pro,
.login-card.pro {
  position: relative !important;
}

.login-card.pro {
  margin-left: -30px;
}

/* 회원가입 카드만 위로 이동 */
.register-card.pro {
  transform: translateY(-30px);   /* -20 ~ -50px 취향 조절 */
  margin-left: -30px;
}

.reset-password-card.pro {
  margin-left: -30px;
}

/* 🔥 성적서 진위확인 제목/설명 겹침 강제 해결 */
.veri-header,
.veri-header * {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

/* 제목/설명 레이아웃 재정의 */
.veri-header {
  display: block !important;
  margin-bottom: 12px !important;
}

.veri-title {
  display: block !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.25 !important;
}

.veri-sub {
  display: block !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}