/* 드라마틱한 라이트 테마: Bootstrap 변수 + 주요 컴포넌트 + 상태별 효과까지 확장 */
:root {
  --bs-body-bg: #f8fafc;
  --bs-body-color: #1a1e22;
  --bs-primary: #1976d2;
  --bs-secondary: #e3e6ea;
  --bs-border-color: #dee2e6;
  --bs-card-bg: #fff;
  --bs-table-bg: #fff;
  --bs-table-striped-bg: #f3f6fa;
  --bs-table-hover-bg: #e3e6ea;
  --bs-btn-bg: #1976d2;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #ff9800;
  --bs-btn-hover-color: #fff;
  --bs-link-color: #1976d2;
  --bs-link-hover-color: #ff9800;
  --bs-alert-bg: #e3e6ea;
  --bs-alert-color: #23272b;
  --bs-alert-success-bg: #e6f4ea;
  --bs-alert-success-color: #1976d2;
  --bs-alert-danger-bg: #fbeaea;
  --bs-alert-danger-color: #d32f2f;
  --bs-badge-bg: #1976d2;
  --bs-badge-color: #fff;
  --bs-navbar-bg: #f8fafc;
  --bs-navbar-color: #23272b;
  --bs-modal-bg: #fff;
  --bs-modal-color: #23272b;
  --bs-dropdown-bg: #fff;
  --bs-dropdown-link-color: #23272b;
  --bs-dropdown-link-hover-bg: #e3e6ea;
  --bs-pagination-bg: #fff;
  --bs-pagination-color: #23272b;
  --bs-pagination-hover-bg: #ff9800;
  --bs-pagination-hover-color: #fff;
  --bs-progress-bg: #e3e6ea;
  --bs-progress-bar-bg: #1976d2;
}
body {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  font-size: 16px !important; /* iOS 줌 방지 */
  -webkit-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
}

/* 텍스트 색상 강화 */
.text-muted {
  color: #495057 !important; /* 기본 #6c757d보다 더 진함 */
}

.text-secondary {
  color: #495057 !important;
}
/* 헤딩/굵은 텍스트 가독성 강화 */
h1, h2, h3, .page-title {
  color: #1f2937 !important; /* 높은 대비의 진회색 */
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}
.page-title { text-shadow: 0 1px 0 rgba(0,0,0,0.04) !important; }
.card {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1.5px solid #b0b8c1 !important; /* 기존보다 더 진한 회색 */
  box-shadow: 0 2px 8px #1976d233;
  border-radius: 0.75rem !important;
}
.table {
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-body-color) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--bs-table-striped-bg) !important;
}
.table-hover > tbody > tr:hover {
  background-color: var(--bs-table-hover-bg) !important;
}
input, select, textarea {
  background-color: #fff !important;
  color: #1a1e22 !important;
  border-color: #dee2e6 !important;
  font-size: 16px !important; /* iOS 줌 방지 */
}
input:disabled, select:disabled, textarea:disabled {
  background-color: #f3f6fa !important;
  color: #bbb !important;
}
::placeholder {
  color: #bbb !important;
  opacity: 1;
}
a {
  color: var(--bs-link-color) !important;
}
a:hover {
  color: var(--bs-link-hover-color) !important;
}
/* 접근성: 링크를 버튼으로 사용할 때 대비 강화 (글자색 고정) */
a.btn, a.btn:link, a.btn:visited { text-decoration: none !important; }
.btn-primary, .btn-success, .btn-danger, .btn-info { color: #ffffff !important; }
a.btn-primary, a.btn-success, a.btn-danger, a.btn-info { color: #ffffff !important; }
.btn-warning, a.btn-warning { color: #212529 !important; }

/* Outline 버튼 텍스트 색상 강화 */
.btn-outline-primary { color: #0d47a1 !important; border-color: #1976d2 !important; }
.btn-outline-secondary { color: #212529 !important; border-color: #6c757d !important; }
.btn-outline-success { color: #1b5e20 !important; border-color: #28a745 !important; }
.btn-outline-danger { color: #c62828 !important; border-color: #dc3545 !important; }
.btn-outline-warning { color: #e65100 !important; border-color: #ffc107 !important; }
.btn-outline-info { color: #01579b !important; border-color: #17a2b8 !important; }

.btn-outline-primary:hover { background-color: #1976d2 !important; color: #fff !important; }
.btn-outline-secondary:hover { background-color: #6c757d !important; color: #fff !important; }
.btn-outline-success:hover { background-color: #28a745 !important; color: #fff !important; }
.btn-outline-danger:hover { background-color: #dc3545 !important; color: #fff !important; }
.btn-outline-warning:hover { background-color: #ffc107 !important; color: #212529 !important; }
.btn-outline-info:hover { background-color: #17a2b8 !important; color: #fff !important; }
.btn-primary, .btn-secondary {
  background-color: var(--bs-btn-bg) !important;
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-border-color) !important;
  box-shadow: 0 2px 8px #1976d233;
  min-height: 44px !important; /* 터치 친화적 */
  font-size: 16px !important;
  border-radius: 0.5rem !important;
}
.btn-primary:hover, .btn-secondary:hover {
  background-color: var(--bs-btn-hover-bg) !important;
  color: var(--bs-btn-hover-color) !important;
}
.btn-sm {
  min-height: 36px !important;
  font-size: 14px !important;
}
.alert {
  background-color: var(--bs-alert-bg) !important;
  color: var(--bs-alert-color) !important;
  border-color: var(--bs-border-color) !important;
  border-radius: 0.75rem !important;
}
.alert-success {
  background-color: var(--bs-alert-success-bg) !important;
  color: var(--bs-alert-success-color) !important;
}
.alert-danger {
  background-color: var(--bs-alert-danger-bg) !important;
  color: var(--bs-alert-danger-color) !important;
}
.badge {
  background-color: var(--bs-badge-bg) !important;
  color: var(--bs-badge-color) !important;
}
.navbar {
  background-color: var(--bs-navbar-bg) !important;
  color: var(--bs-navbar-color) !important;
  box-shadow: 0 2px 8px #1976d233;
}
.modal-content {
  background-color: var(--bs-modal-bg) !important;
  color: var(--bs-modal-color) !important;
  box-shadow: 0 4px 32px #1976d233;
  backdrop-filter: blur(2px);
  border-radius: 1rem !important;
}
.dropdown-menu {
  background-color: var(--bs-dropdown-bg) !important;
  color: var(--bs-dropdown-link-color) !important;
  border-color: var(--bs-border-color) !important;
  border-radius: 0.75rem !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--bs-dropdown-link-hover-bg) !important;
  color: #ff9800 !important;
}
.pagination {
  background-color: var(--bs-pagination-bg) !important;
  color: var(--bs-pagination-color) !important;
}
.page-link:hover {
  background-color: var(--bs-pagination-hover-bg) !important;
  color: var(--bs-pagination-hover-color) !important;
}
.progress {
  background-color: var(--bs-progress-bg) !important;
}
.progress-bar {
  background-color: var(--bs-progress-bar-bg) !important;
}
::-webkit-scrollbar {
  width: 10px;
  background: #e3e6ea;
}
::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 8px;
}
/* 라이트 모드 체크박스 커스텀 스타일 */
input[type="checkbox"] {
  background-color: #fff;
  border: 2px solid #bbb;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  box-shadow: none;
  background-image: none;
  filter: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
input[type="checkbox"]:checked {
  background-color: #1976d2;
  border-color: #1976d2;
}
input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 10.5L9 14.5L15 7.5' stroke='%2323272b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% 80%;
  z-index: 2;
}
input[type="checkbox"]:focus {
  box-shadow: 0 0 0 2px #1976d255;
}
/* 거래처 카드 아이콘/텍스트 라이트모드 스타일 */
.card .d-flex[style*="background:#f3f6fb"] {
    background: #f3f6fb !important;
    border-color: #e3eafc !important;
}
.card .d-flex[style*="background:#f3f6fb"] img {
    filter: none;
}
.card .form-control-lg.fw-bold {
    color: #23272b !important;
    opacity: 1;
}
.navbar .nav-link span.user-icon {
  font-size: 1.2rem;
}
.navbar .nav-link.user-name {
  font-weight: 600;
}
.navbar .nav-link {
  font-weight: 500;
}
.navbar .nav-link:hover {
  color: #ff9800 !important;
}
.navbar {
  box-shadow: 0 2px 8px #1976d233;
}
/* 모든 테이블 필드명(헤더) 중앙정렬 */
.table th {
  text-align: center !important;
  vertical-align: middle !important;
}
.table, .table-bordered > :not(caption) > * > * {
  border-color: #dee2e6 !important;
}
.table-light th {
  background-color: #f8f9fa !important;
  color: #495057 !important;
}
/* 확장 편집 모드 스타일 */
.editable-row.row-expanded td { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.editable-row.row-expanded .addr-lines { display: grid; gap: 0.3rem; }
.editable-row.row-expanded .stack-inputs input { height: 40px; }
/* 테이블 뷰 가로 스크롤 제거 및 래핑 강화 */
#view-table .table-responsive { overflow-x: hidden !important; padding-right: 0 !important; }
#view-table .table { width: 100% !important; table-layout: auto !important; }
#view-table .table th, #view-table .table td { white-space: normal !important; word-break: break-word !important; }
#view-table .addr-cell,
.editable-row td.stack-inputs,
.editable-row.row-expanded .addr-cell,
.editable-row.row-expanded td.stack-inputs { min-width: 0 !important; }
/* 미지급금/정산 컬럼 폭 조정 */
#view-table .unpaid-col { width: 140px !important; }
#view-table th:last-child, #view-table td:last-child { width: auto !important; padding-left: .75rem !important; padding-right: .75rem !important; box-sizing: border-box !important; }
#view-table td:last-child .btn,
#view-table td:last-child .form-control { width: 100% !important; max-width: none !important; margin: .25rem 0 !important; box-sizing: border-box !important; }
/* 모바일 최적화 - 기본 폰트 크기 조정 */
.container, .container-fluid, .card-body, .table, .form-control, .form-label, .form-select, .form-text, .input-group-text, .page-title, .alert, .dropdown-menu, .modal-content {
  font-size: 0.97rem !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.page-title {
  font-size: 1.15em !important;
  font-weight: 700;
  color: #23272b;
}
/* 모바일 환경 개선 (576px 이하) */
@media (max-width: 768px) {
  .container, .container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .card {
    margin-bottom: 1rem !important;
    border-radius: 0.5rem !important;
  }
  
  .card-body {
    padding: 1rem !important;
  }
  
  .card-header {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
  }
  
  .table {
    font-size: 0.9rem !important;
  }
  
  .table th, .table td {
    padding: 0.5rem 0.3rem !important;
    vertical-align: middle !important;
  }
  
  .btn {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
  }
  
  .btn-sm {
    min-height: 36px !important;
    font-size: 14px !important;
    padding: 0.375rem 0.75rem !important;
  }
  
  .form-control, .form-select {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
  }
  
  .input-group .form-control {
    border-radius: 0.5rem 0 0 0.5rem !important;
  }
  
  .input-group .btn {
    border-radius: 0 0.5rem 0.5rem 0 !important;
  }
  
  .modal-dialog {
    margin: 0.5rem !important;
  }
  
  .modal-content {
    border-radius: 0.75rem !important;
  }
  
  .navbar {
    padding: 0.5rem 0.75rem !important;
  }
  
  .navbar-brand {
    font-size: 1.1rem !important;
  }
  
  .navbar-toggler {
    padding: 0.375rem !important;
    border-radius: 0.375rem !important;
  }
  
  .dropdown-menu {
    border-radius: 0.5rem !important;
    margin-top: 0.25rem !important;
  }
  
  .dropdown-item {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
  }
  
  /* 입력 그룹 모바일 최적화 */
  .input-group {
    flex-direction: column !important;
  }
  
  .input-group > .form-control,
  .input-group > .form-select {
    border-radius: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .input-group > .btn {
    border-radius: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .input-group-text {
    border-radius: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
}
@media (max-width: 576px) {
  .container, .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  .page-title {
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .card {
    margin-bottom: 0.75rem !important;
  }
  
  .card-body {
    padding: 0.75rem !important;
  }
  
  .card-header {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.95rem !important;
  }
  
  .table {
    font-size: 0.85rem !important;
  }
  
  .table th, .table td {
    padding: 0.4rem 0.2rem !important;
    white-space: nowrap !important;
  }
  
  .btn {
    min-height: 40px !important;
    font-size: 15px !important;
    padding: 0.375rem 0.75rem !important;
  }
  
  .btn-sm {
    min-height: 32px !important;
    font-size: 13px !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  .form-control, .form-select {
    min-height: 40px !important;
    font-size: 15px !important;
    padding: 0.375rem 0.5rem !important;
  }
  
  .table-responsive {
    font-size: 0.8rem !important;
  }
  
  .table-responsive .table th,
  .table-responsive .table td {
    padding: 0.3rem 0.15rem !important;
  }
  
  .btn-group .btn {
    min-height: 36px !important;
    font-size: 14px !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  /* 작은 화면에서 컬럼 레이아웃 조정 */
  .row .col-md-3, .row .col-md-4, .row .col-md-6 {
    margin-bottom: 1rem !important;
  }
  
  #inboundTable thead {
    display: none;
  }
  #inboundTable tbody tr {
    display: block;
    margin-bottom: 1.2rem;
    border-radius: 0.7rem;
    border: 2px solid var(--bs-border-color);
    background: #fff;
    box-shadow: 0 2px 8px #1976d233;
    padding: 1rem 0.7rem 0.7rem 0.7rem;
  }
  #inboundTable td {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100% !important;
    border: none;
    padding: 0.5rem 0.2rem !important;
    margin-bottom: 0.2rem;
  }
  #inboundTable td:before {
    content: attr(data-label);
    font-size: 1rem;
    font-weight: 700;
    color: #1976d2;
    margin-bottom: 0.2rem;
    opacity: 1 !important;
  }
  #inboundTable .form-control, #inboundTable .form-select {
    min-height: 44px !important;
    font-size: 1.1rem !important;
    margin-bottom: 0.1rem;
  }
  #inboundTable .remove-row {
    width: 100%;
    min-height: 44px;
    font-size: 1.1rem;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
  }
}
@media (max-width: 480px) {
  .container {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  
  .page-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .card {
    margin-bottom: 0.5rem !important;
    border-radius: 0.375rem !important;
  }
  
  .card-body {
    padding: 0.5rem !important;
  }
  
  .card-header {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.9rem !important;
  }
  
  .btn {
    min-height: 36px !important;
    font-size: 14px !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  .form-control, .form-select {
    min-height: 36px !important;
    font-size: 14px !important;
    padding: 0.25rem 0.375rem !important;
  }
  
  .table {
    font-size: 0.75rem !important;
  }
  
  .table th, .table td {
    padding: 0.25rem 0.1rem !important;
  }
  
  .table-responsive {
    font-size: 0.7rem !important;
  }
  
  .table-responsive .table th,
  .table-responsive .table td {
    padding: 0.2rem 0.1rem !important;
  }
}
@media (max-width: 400px) {
  .container {
    padding-left: 0.125rem !important;
    padding-right: 0.125rem !important;
  }
  
  .page-title {
    font-size: 1rem !important;
    margin-bottom: 0.375rem !important;
  }
  
  .card {
    margin-bottom: 0.375rem !important;
    border-radius: 0.25rem !important;
  }
  
  .card-body {
    padding: 0.375rem !important;
  }
  
  .card-header {
    padding: 0.25rem 0.375rem !important;
    font-size: 0.85rem !important;
  }
  
  .btn {
    min-height: 32px !important;
    font-size: 13px !important;
    padding: 0.2rem 0.375rem !important;
  }
  
  .form-control, .form-select {
    min-height: 32px !important;
    font-size: 13px !important;
    padding: 0.2rem 0.25rem !important;
  }
  
  .table {
    font-size: 0.7rem !important;
  }
  
  .table th, .table td {
    padding: 0.2rem 0.05rem !important;
  }
}
/* 모바일 오프캔버스 메뉴바 세로 패딩/간격 다크테마와 통일 */
.offcanvas {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  padding-top: 2.2rem !important;
  padding-bottom: 2.2rem !important;
}
.offcanvas .nav-link,
.offcanvas .dropdown-item {
  color: var(--bs-body-color) !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.5rem !important;
  margin: 0.25rem 0 !important;
}
.offcanvas .nav-link:hover {
  background-color: var(--bs-dropdown-link-hover-bg) !important;
}
.offcanvas hr {
  border-color: var(--bs-border-color) !important;
}
.offcanvas .user-info {
  background-color: var(--bs-card-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  margin: 2.5rem 0 1.2rem 0 !important;
  text-align: center;
}
.offcanvas .logout-link {
  color: #dc3545 !important;
  margin: 2.2rem 0 1.2rem 0 !important;
  text-align: center;
}
.offcanvas .theme-toggle {
  background-color: var(--bs-btn-bg) !important;
  color: var(--bs-btn-color) !important;
  margin: 2.2rem auto 0 auto !important;
  display: flex;
  justify-content: center;
}
/* 초소형 모바일(400px 이하) 대응 */
@media (max-width: 400px) {
  .offcanvas {
    width: 100% !important;
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
  }
  
  .offcanvas .nav-link,
  .offcanvas .dropdown-item {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
  }
  
  .offcanvas .user-info,
  .offcanvas .logout-link {
    margin: 1.2rem 0 0.7rem 0 !important;
  }
  
  .offcanvas .theme-toggle {
    margin: 1.1rem auto 0 auto !important;
  }
  
  .of-btn {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-weight: 500 !important;
  }
}
/* 공통 버튼 스타일 */
.of-btn {
  min-height: 44px !important;
  font-size: 16px !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.of-btn-primary {
  background-color: var(--bs-primary) !important;
  color: white !important;
}
.of-btn-primary:hover, .of-btn-primary:focus {
  background-color: var(--bs-btn-hover-bg) !important;
  transform: translateY(-1px) !important;
}
.of-btn-secondary {
  background-color: var(--bs-secondary) !important;
  color: var(--bs-body-color) !important;
}
.of-btn-secondary:hover, .of-btn-secondary:focus {
  background-color: #d1d5db !important;
  transform: translateY(-1px) !important;
}
@media (max-width: 767px) {
  .of-btn {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
  }
}
/* 모바일에서 입력 그룹 텍스트 개선 */
.input-group-text {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #495057 !important;
  min-height: 44px !important;
  font-size: 16px !important;
}
/* 자동 계산 필드 스타일 */
.auto-calc-field {
  background-color: #e8f5e8 !important;
  font-weight: bold !important;
  color: #155724 !important;
}
/* 덜 중요한 필드 스타일 */
.less-visible-field[type="number"],
.less-visible-field[type="text"] {
  background-color: #f8f9fa !important;
  color: #495057 !important; /* 더 진한 회색으로 변경 */
  font-style: italic !important;
}
.less-visible-field {
  opacity: 0.85 !important; /* 투명도 줄임 */
}
@media (prefers-color-scheme: dark) {
  .less-visible-field {
    background-color: #343a40 !important;
    color: #adb5bd !important;
  }
}