/* base.css */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;   /* 전체 화면 스크롤 제거 -- 전체 화면 필요한 부분 있으면 해당 화면에서 적용 */
}


/* logo */
.logo {
    height: 40px;
    flex-shrink: 0;
    font-size: 30px;
}

/* body */
body {
  display: flex;
  flex-direction: column; /* 값들을 세로로 배치 */
  min-height: 100vh;
  background-color: var(--body-background-color);
  color: var(--font-color);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


/* header */
header {
    /* width: 100%; */
    /* background-color: #a8d08d; */
    background-color: var(--Header-Footer-Background-Color);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: space-between;
    height: 40px;
}

.header-div-menu {
  display: flex;
  align-items: center;
  gap: 40px;
}


/* main */
main {
  padding: 20px;
  flex: 1; /* 여백을 채우기 위한 핵심 */
  /* height: 100vh - 100px; */
  margin-bottom: 0;
}

/* footer */
footer {
    /* position: fixed;
    bottom: 0;
    left: 0; */
    width: 100%;        
    background-color: var(--Header-Footer-Background-Color);
    padding: 10px 20px; 
    box-sizing: border-box;
    height: 40px;
    position: relative;
}
footer > div {
    color: var(--Header-Footer-Font-Color);
    text-align: right;
    max-width: 1200px;
    margin-left: auto;
}

/* 기본 margin, padding 없애기 */
h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 10px 0 ;
  padding: 0;
}


/* 헤더 솔루션명(AI.Law.All) a 태그 처리  */
.btn-comp {
  color: var(--secondary-100);
  text-decoration: none;
} 

/* 일반 화면 내에 있는 버튼의 공통 */
/* 버튼 그룹 공통 스타일 */
.button-group {
    display: flex;                /* Flexbox로 버튼들을 가로로 배치 */
    gap: 10px;                     /* 버튼들 사이에 8px 간격 */
    justify-content: center;      /* 버튼들을 수평 중앙에 배치 */
    align-items: center;          /* 버튼들을 수직 중앙에 배치 */
    margin-top: 20px;             /* 상단 여백 */
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

/* table 내에 있는 버튼의 공통 */
.btn-tbl {
    padding: 2px 12px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
    /* display: inline-block; */
}

/* Button - Primary */
.btn-primary {
  color: var(--btn-text);
  background-color: var(--primary-btn);
  border-color: var(--primary-btn);
}

.btn-primary:hover{
  background-color: var(--primary-btn-hover);
  border-color: var(--primary-btn-hover);
}

/* Button - Secondary */
.btn-secondary{
  color: var(--btn-text);
  background-color: var(--secondary-btn);
  border-color: var(--secondary-btn);
}

.btn-secondary:hover{
  background-color: var(--secondary-btn-hover);
  border-color: var(--secondary-btn-hover);
}


.btn-danger{
  color: var(--btn-text);
  background-color: var(--danger-btn);
  border-color: var(--danger-btn);
}
.btn-danger:hover{
  background-color: var(--danger-btn-hover);
  border-color: var(--danger-btn-hover);
}

/* 버튼 투명, 글씨 파란색 */
.btn-link {
  background-color: #F3FBFF;  /* 배경 없애기 */
  /* border: none; */
  border: 1px solid #00594F;      /* 테두리를 글씨 색과 동일하게 */  
  color: #104861;                /* 파란색 글씨 */
  padding: 3px 10px;                /* 위아래 4px, 좌우 8px 여백 */
  cursor: pointer;                /* 마우스 포인터 */
  font-size: 1rem;                /* 글씨 크기 */
}

.btn-link:hover {
  text-decoration: underline;     /* 마우스 오버 시 밑줄 */
  background-color: transparent;  /* 배경 유지 */
}

/* Button 영역 - 뒤로 버튼 */
.btn-back {
    color: var(--btn-text) ;
    background-color: var(--back-btn);
    border-color: var(--back-btn);
}
.btn-back:hover {
    background-color: var(--back-btn-hover);
    border-color: var(--back-btn-hover);
}


/* === 공통 아이콘 버튼 === */
.icon-btn {
  background: none;       /* 배경 제거 */
  border: none;           /* 테두리 제거 */
  padding: 0;             /* 여백 제거 */
  margin: 0 10px;          /* 버튼 간 간격 (선택사항) */
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* hover 시 살짝 확대 효과 */
/* .icon-btn:hover {
  transform: scale(1.1);
  opacity: 0.85;
} */

/* 비활성화 상태 */
.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* === 아이콘 이미지 크기 === */
.icon-img {
  width: 35px;
  height: 35px;
  display: inline-block;
  vertical-align: middle;
}

.icon-img-tbl {
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
}

/* === 아이콘별 색상 === */
/* new 버튼 (딥 블루그린 계열) */
.new-icon {
    filter: invert(26%) sepia(62%) saturate(520%) hue-rotate(185deg) brightness(92%) contrast(96%);
}

/* save 버튼 (메인보다 밝은 블루 계열) */
.save-icon {
  filter: invert(26%) sepia(62%) saturate(520%) hue-rotate(185deg) brightness(92%) contrast(96%);
}

/* delete 버튼 (차분한 딥 레드 계열) */
.del-icon {
  filter: invert(26%) sepia(62%) saturate(520%) hue-rotate(185deg) brightness(92%) contrast(96%);
}

/* 설정 버튼 (네이비 그레이 계열) */
.config-icon {
  filter: invert(26%) sepia(62%) saturate(520%) hue-rotate(185deg) brightness(92%) contrast(96%);
}

/* 비활성 버튼 */
.disable-icon {
  filter: invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(65%);
}

/* 아이콘 + 텍스트 세로 정렬 */
.icon-wrapper {
  display: flex;
  flex-direction: column;      /* 위: 아이콘 / 아래: 텍스트 */
  align-items: center;
  justify-content: center;
}

/* 텍스트 스타일 */
.icon-label {
  margin-top: 5px;
  font-size: 12px;
  color: #393939;              /* 연한 검정 */
  text-align: center;
  white-space: nowrap;         /* 줄바꿈 방지 (필요 시 제거) */
}

/* 버튼 전체 간격 조절 */
.icon-btn {
  background: none;
  border: none;
  padding: 0 0px;             /* 버튼 간격 */
  cursor: pointer;
}


/* 페이징 버튼 */
.pagination {
  width: max-content;
  margin: 0 auto;
}

.btn-page{
  color: var(--black)
}

.btn-page:hover{
  color: var(--secondary-500)
}


input {
    font-weight: 500;              /* 폰트 크기 */
    padding: 4px;                  /* 안쪽 여백 */
    /* border: 1px solid #ccc;         테두리 색 */
    /* border-radius: 4px;             둥근 테두리 */
    /* outline: none;                  포커스 시 기본 외곽선 제거 */
    /* background-color: #f9f9f9;      배경색 */
    color: #333;                    /* 텍스트 색상 */
    /* transition: border-color 0.3s;  테두리 색상 변경 시 애니메이션 */
}