:root {
  --swal2-width: 38em !important;
  /* form-group 변수 정의 (common.css에서 사용하기 위해 :root에 정의) */
  --krds-form-group--message-error-text-color: var(--krds-light-color-text-danger);
  --krds-form-group--message-pc-font-size: var(--krds-pc-font-size-label-xsmall);
}

.swal2-html-container {
  font-size: 1.875em;
}

.swal2-container {
  z-index: 9998 !important;
}
.swal2-popup {
  z-index: 9999 !important;  
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
  background-color: rgb(37, 110, 244) !important;
  border-color: rgb(37, 110, 244) !important;
  color: #fff !important;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny) {
  background-color: rgb(236, 242, 254) !important;
  border-color: rgb(37, 110, 244) !important;
  color: rgb(11, 80, 208) !important;
}

.swal2-html-container {
  text-align: left !important;
}

.inner-wide {
  margin: 0 auto !important;
  max-width: 100% !important;
  padding-left: 35px !important;
  padding-right: 35px !important;
}

.inner-medium {
  margin: 0 auto !important;
  max-width: 1439px !important;
  padding-left: 35px !important;
  padding-right: 35px !important;
}

.inner-medium .inner {
  margin: 0 auto !important;
  max-width: 1439px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.apply-aside {
  width: 364px;
  /* height: 1050px; */
}

.apply-aside .btn-accordion {
  background: #1065b6 !important;
  color: #ffff !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-radius: 0px !important;
}

.apply-aside .krds-accordion {
  --krds-accordion--color-icon: #ffff; /* 원하는 색상으로 변경 */
}


.apply-aside .krds-accordion .accordion-item .btn-accordion::after {
  position: absolute;
  top: 50%;
  right: var(--krds-accordion--padding);
  transform: translateY(-50%) rotate(0deg);
}

.apply-aside .krds-accordion .accordion-item .btn-accordion.active::after {
  transform: translateY(-50%) rotate(180deg);
}

.apply-aside .krds-accordion .accordion-body {
  padding: 16px !important;
}

.apply-aside .search-condition {
  max-height: 930px !important;
}

.apply-aside .krds-form-select {
  height: 40px !important;
  font-size: var(--krds-form-check--pc-font-size-medium) !important;
}

.apply-aside .krds-input {
  height: 40px !important;
  font-size: var(--krds-form-check--pc-font-size-medium) !important;
}

.apply-aside .krds-form-check label {
  font-size: 16px !important;
}

.apply-aside .btn-ico-wrap .btn-search-text {
  right: 0.2rem !important;
}

.apply-aside .btn-ico-wrap .btn-place-search {
  right: 0.2rem !important;
}

.apply-aside .btn-ico-wrap .btn-clear-text {
  right: 2.6rem !important;
}

.apply-aside .btn-ico-wrap .btn-clear-place {
  right: 2.6rem !important;
}

.apply-aside .btn-ico-wrap .btn-remove-stopover {
  right: 2.6rem !important;
}

.tbl-apply tbody td {
  padding: 10px 10px 10px 10px !important;
}

.apply-accordion {
  padding: 0px !important;
  border-top: 0px !important;
  background-color: var(--krds-accordion--color-action-open) !important;
}

.apply-accordion.krds-accordion .accordion-item {
  padding: 0px !important;
  margin-bottom: 4px !important;
}

.apply-aside .table-simple-link-list {
  width: 100% !important;
}

.apply-aside .table-simple-link-list td {
  padding: 2px 2px 2px 2px !important;
  font-size: 14px !important;
}

.place-list {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  width: 100%;
  height: 240px;
  background: #f2f3f5;
  scrollbar-width: auto !important; /* Firefox - 항상 표시 */
  scrollbar-color: #888 #f1f1f1 !important; /* Firefox */
  -webkit-overflow-scrolling: touch;
}

/* Webkit 브라우저용 스크롤바 스타일 */
.place-list::-webkit-scrollbar {
  width: 8px !important;
  display: block !important;
}

.place-list::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

.place-list::-webkit-scrollbar-thumb {
  background: #888 !important;
  border-radius: 4px !important;
}

.place-list::-webkit-scrollbar-thumb:hover {
  background: #555 !important;
}

/* Firefox 전용 스크롤바 설정 */
@supports (scrollbar-width: auto) {
  .place-list {
    scrollbar-width: auto !important;
    scrollbar-color: #888 #f1f1f1 !important;
  }

}

.place-list .path {
  overflow: hidden;
  width: 100%;
  border-top: 1px solid #e7e9ec;
  padding: 15px 15px 15px 15px !important;
  cursor: pointer;
}

.place-list .path-name {
  font-weight: 700;
}


.map-addr-pop {
  padding: 10px;
}

.map-addr-pop .title-box {
  margin-bottom: 20px;
}

/* close-info-window 클래스에 X 버튼 스타일 추가 */
.close-info-window {
  position: absolute;
  top: 2px;
  right: 0px;
  width: 20px;
  height: 20px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  color: #666;
  z-index: 10;
  transition: all 0.2s ease;
}

.close-info-window:hover {
  background: #e0e0e0;
  color: #333;
  transform: scale(1.1);
}

.close-info-window:active {
  transform: scale(0.95);
}

.map-addr-pop .title-box {
  position: relative;
  padding-right: 35px;
}

.map-addr-pop .map-addr-title {
  word-break: break-all;
  line-height: 1.4;
}

/* 맵 요소의 포커스 테두리 제거 */
#map:focus,
#map *:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 네이버 지도 컨테이너의 포커스 테두리 제거 */
.naver-map-container:focus,
.naver-map-container *:focus {
  outline: none !important;
  box-shadow: none !important;
}

.node_poi{width:28px; height: 50px; background: url(/images/map/map-marker-poi.png.png)right center no-repeat; cursor:pointer;}
.node_poi_start {width: 28px; height: 50px; background: url(/images/map/map-marker-start.png)right center no-repeat; cursor: pointer;}
.node_poi_finish {width: 28px; height: 50px; background: url(/images/map/map-marker-end.png)right center no-repeat; cursor: pointer;}
.node_poi_stopover0{width:28px; height: 50px; background: url(/images/map/map-marker-stopover1.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover1{width:28px; height: 50px; background: url(/images/map/map-marker-stopover2.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover2{width:28px; height: 50px; background: url(/images/map/map-marker-stopover3.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover4{width:28px; height: 50px; background: url(/images/map/map-marker-stopover5.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover5{width:28px; height: 50px; background: url(/images/map/map-marker-stopover6.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover6{width:28px; height: 50px; background: url(/images/map/map-marker-stopover7.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover7{width:28px; height: 50px; background: url(/images/map/map-marker-stopover8.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover8{width:28px; height: 50px; background: url(/images/map/map-marker-stopover9.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover9{width:28px; height: 50px; background: url(/images/map/map-marker-stopover10.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover10{width:28px; height: 50px; background: url(/images/map/map-marker-stopover11.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover11{width:28px; height: 50px; background: url(/images/map/map-marker-stopover12.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover12{width:28px; height: 50px; background: url(/images/map/map-marker-stopover13.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover13{width:28px; height: 50px; background: url(/images/map/map-marker-stopover14.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover14{width:28px; height: 50px; background: url(/images/map/map-marker-stopover15.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover15{width:28px; height: 50px; background: url(/images/map/map-marker-stopover16.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover16{width:28px; height: 50px; background: url(/images/map/map-marker-stopover17.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover17{width:28px; height: 50px; background: url(/images/map/map-marker-stopover18.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover18{width:28px; height: 50px; background: url(/images/map/map-marker-stopover19.png)right center no-repeat; cursor:pointer;}
.node_poi_stopover19{width:28px; height: 50px; background: url(/images/map/map-marker-stopover20.png)right center no-repeat; cursor:pointer;}


.user-apply .btn-show-link.on {
  background-color: rgb(37, 110, 244) !important;
  color: white !important;
  border: 0px !important;
}

.scrollable-table-container {
  /* 원하는 테이블의 최대 높이 */
  max-height: 500px; 
  /* 가로 스크롤이 필요할 경우 overflow-x: auto; */
  overflow-y: auto;
  border: 1px solid #ccc;
  width: 100%;
}

.scrollable-table-container table {
  width: 100%;
  border-collapse: collapse;
}

.scrollable-table-container thead {
  /* 헤더를 테이블 위에 고정 */
  position: sticky;
  top: 0;
  /* 스크롤 시 헤더가 가려지지 않도록 z-index 설정 */
  z-index: 10;
  background-color: #f2f2f2;
}

/* 셀 너비를 맞게 */
.scrollable-table-container th,
.scrollable-table-container td {
  padding: 10px;
  text-align: left;
  white-space: nowrap; /* 셀 내용이 줄바꿈되지 않도록 */
}

/* 테이블 셀 줄바꿈 처리 */
.tbl-word-wrap th,
.tbl-word-wrap td {
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 테이블 셀 내용이 길 때 줄바꿈 강제 적용 */
.tbl-word-wrap th,
.tbl-word-wrap td {
  line-height: 1.4;
  vertical-align: top;
}

    
    /* 버튼 포커스 스타일 제거 */
    .krds-btn:focus {
      outline: none !important;
      box-shadow: none !important;
    }
    
    /* 페이지 버튼 영역의 버튼들 포커스 제거 */
    .page-btn-wrap .krds-btn:focus {
      outline: none !important;
      box-shadow: none !important;
    }

    /* 단계별 요약 섹션 스타일 */
    .step-summary-section {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 1.5rem;
    }

    .step-summary-section h4 {
      color: #1e40af;
      border-bottom: 2px solid #3b82f6;
      padding-bottom: 0.5rem;
      font-size: 16px;
    }

    /* 지도 컨테이너 스타일 */
    .map-container {
      background: white;
      padding: 1rem;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    /* 최종 확인 섹션 스타일 */
    .final-confirmation {
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
      border: 1px solid #93c5fd;
      border-radius: 12px;
    }

    /* 경고 알림 스타일 */
    .warning-notice {
      border-radius: 8px;
    }

    /* 반응형 그리드 */
    @media (max-width: 768px) {
      .grid-cols-2 {
        grid-template-columns: 1fr;
      }
    }

    .krds-table-wrap .tbl-column-2 th {
      background-color: rgb(238, 242, 247);
    }


    .search-area {
      margin-bottom: 1rem;
      display: flex !important;
      justify-content: flex-end !important;
      width: 100% !important;
    }
    
    .search-input-group {
      display: flex;
      gap: 0.5rem;
      max-width: 500px;
      margin-left: auto !important;
      justify-content: flex-end;
    }
    
    .search-area form {
      width: 100% !important;
      display: flex !important;
      justify-content: flex-end !important;
    }
    
    .search-area .search-form {
      width: 100% !important;
      display: flex !important;
      justify-content: flex-end !important;
    }
    
    .search-area #search-form {
      width: 100% !important;
      display: flex !important;
      justify-content: flex-end !important;
    }
    
    .g-conts-area .search-area {
      text-align: right !important;
      display: flex !important;
      justify-content: flex-end !important;
    }
    
    .search-input-group .krds-input {
      flex: 1;
      height: 40px; /* 검색 버튼과 높이 일치 */
      width: 300px;
      box-sizing: border-box;
    }
    
    .search-input-group .krds-btn {
      height: 40px !important; /* 검색 입력창과 높이 일치 */
      box-sizing: border-box;
    }
    
    .loading-spinner {
      display: inline-block;
      width: 2rem;
      height: 2rem;
      border: 3px solid #f3f3f3;
      border-top: 3px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .krds-pagination-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      margin-top: 2rem;
    }
    
    .pagination-item {
      display: inline-block;
      padding: 0.5rem 0.75rem;
      margin: 0 0.25rem;
      border: 1px solid #d1d5db;
      border-radius: 0.375rem;
      text-decoration: none;
      color: #374151;
      cursor: pointer;
    }
    
    .pagination-item:hover {
      background-color: #f3f4f6;
    }
    
    .pagination-item.active {
      background-color: #3b82f6;
      color: white;
      border-color: #3b82f6;
    }
    
    .pagination-item.disabled {
      color: #9ca3af;
      cursor: not-allowed;
      pointer-events: none;
    }
    
    .notice-row {
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .notice-row:hover {
      background-color: #f8fafc;
    }
    
    .notice-title {
      text-align: left;
      padding-left: 1rem;
    }
    
    .notice-title a {
      color: #1f2937;
      text-decoration: none;
    }
    
    .notice-title a:hover {
      color: #3b82f6;
      text-decoration: underline;
    }


.stopover-option {
  display:none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; 
  background: white; 
  border-radius: 8px; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.15); 
  padding: 20px; 
  min-width: 300px; 
  max-width: 400px;
}

.stopover-option .drag-handle {
  cursor: move;
  padding: 10px 0;
  margin: -20px -20px 10px -20px;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid #007bff;
}

.stopover-item {
  margin-top: 10px;
}




/* ===== PAGINATION 공통 스타일 ===== */

/* 페이징 컨테이너 가운데 정렬 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  text-align: center;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}

/* 이전 버튼 스타일 */
.pagination .page-navi.prev {
  padding: 0 0.8rem 0 0.4rem;
}

/* 다음 버튼 스타일 */
.pagination .page-navi.next {
  padding: 0 0.4rem 0 0.8rem;
}

/* 이전, 다음 버튼 스타일 */
.pagination .page-navi {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-width: 6.2rem;
  height: 4rem;
  color: var(--iw-gray-70);
  border-radius: 0.6rem;
  transition: 0.4s ease-in-out;
  text-decoration: none;
}

/* 비활성화된 이전, 다음 버튼 스타일 */
.pagination .page-navi.disabled {
  color: var(--iw-gray-40);
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* 페이지 버튼 스타일 */
.pagination .page-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 0.8rem;
}

/* 선택된 버튼 스타일 */
.pagination .page-links a.active {
  color: #fff;
  font-weight: 700;
  background-color: #063a74;
}



.pagination .page-links a, .pagination .page-links span {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 4rem;
  height: 4rem;
  color: var(--iw-gray-70);
  border-radius: 0.6rem;
  transition: 0.4s ease-in-out;
  text-decoration: none;
}



/* 페이징 목록 안의 페이징 스타일 */
/* 상세 목록 내부의 페이징도 가운데 정렬 */
table .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  text-align: center;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}

/* 페이징 컨테이너가 테이블 내부에 있을 때도 가운데 정렬 */
td .pagination,
th .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  text-align: center;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}

/* 페이징 래퍼 스타일 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 20px 0;
  text-align: center;
}

/* 상세 목록 내부의 페이징 래퍼 */
td .pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 20px 0;
  text-align: center;
}

/* ===== PAGINATION 공통 스타일 END ===== */

.form-inline {
    flex-direction: row !important
}

.invisible {
  display: none !important;
}

.modal-small {
  width: 500px;
}

.map-address-only {
  padding: 10px;
}

.just-validate-error-label {
  color: var(--krds-form-group--message-error-text-color) !important;
  font-size: var(--krds-form-group--message-pc-font-size) !important;
}

.just-validate-error-field {
  border-color: var(--krds-form-group--message-error-text-color) !important;
}

.table-bottom-btn-wrap {
  z-index: 10;
  display: flex
;
  justify-content: flex-end;
  gap: var(--krds-gap-5);
  margin-top: var(--krds-gap-5);
}

.no-border {
  border: none !important;
}

/* QR 코드 가운데 정렬 */
.qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 10px;
}

.ospermit-info-list {
  --krds-info-list--depth1-list-margin-top: 0;
  --krds-info-list--depth2-list-margin-top: var(--krds-gap-5);
  --krds-info-list--depth3-list-margin-top: var(--krds-gap-4);
  --krds-info-list--depth1-padding-left: var(--krds-number-12);
  --krds-info-list--depth2-padding-left: var(--krds-number-10);
  --krds-info-list--depth3-padding-left: var(--krds-number-9);
  --krds-info-list--gap-layout-depth1-li-li: var(--krds-gap-4);
  --krds-info-list--gap-layout-depth2-li-li: var(--krds-gap-3);
  --krds-info-list--gap-layout-depth3-li-li: var(--krds-gap-3);
  --krds-info-list--pc-text-depth1: var(--krds-pc-font-size-body-medium);
  --krds-info-list--mobile-text-depth1: var(--krds-mobile-font-size-body-medium);
  --krds-info-list--pc-text-depth2: var(--krds-pc-font-size-body-medium);
  --krds-info-list--mobile-text-depth2: var(--krds-mobile-font-size-body-medium);
  --krds-info-list--pc-text-depth3: var(--krds-pc-font-size-body-small);
  --krds-info-list--mobile-text-depth3: var(--krds-mobile-font-size-body-small);
  --krds-info-list--info-txt-margin-top: var(--krds-number-7);
  --krds-info-list--depth1-color-text: var(--krds-light-color-text-subtle);
  --krds-info-list--depth2-color-text: var(--krds-light-color-text-subtle);
  --krds-info-list--depth3-color-text: var(--krds-light-color-text-subtle);
  display: flex;
  flex-direction: column;
  margin-top: var(--krds-info-list--depth1-list-margin-top);
}

.ospermit-info-list > li {
  position: relative;
  padding-left: var(--krds-info-list--depth1-padding-left);
  color: var(--krds-info-list--depth1-color-text);
  font-size: var(--krds-info-list--pc-text-depth1);
}

.ospermit-info-list.bar > li {
  padding-left: 1.2rem;
}

.ospermit-info-list.bar > li::before {
  content: "- ";
  position: absolute;
  color: var(--krds-info-list--depth1-color-text);
  left: 0;
  top: 0;
}

.g-wrap #container .inner-wide .krds-side-navigation {
  width: 20rem !important;
}

/* ===== 글자·화면 설정 스타일 ===== */

/* 글자 크기 조절 */
body.scale-small {
  font-size: 0.875rem !important; /* 14px */
}

body.scale-small * {
  font-size: inherit;
}

body.scale-medium {
  font-size: 17px !important; /* 17px - 기본 (이전 기본값) */
}

body.scale-medium * {
  font-size: inherit;
}

body.scale-large {
  font-size: 1.125rem !important; /* 18px */
}

body.scale-large * {
  font-size: inherit;
}

body.scale-xlarge {
  font-size: 1.25rem !important; /* 20px */
}

body.scale-xlarge * {
  font-size: inherit;
}

body.scale-xxlarge {
  font-size: 1.5rem !important; /* 24px */
}

body.scale-xxlarge * {
  font-size: inherit;
}

/* 화면 표시 모드 */
body.view-mode-light,
html.view-mode-light {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body.view-mode-high-contrast,
html.view-mode-high-contrast {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.view-mode-high-contrast a,
html.view-mode-high-contrast a {
  color: #ffff00 !important;
}

body.view-mode-high-contrast button,
html.view-mode-high-contrast button {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

body.view-mode-high-contrast input,
body.view-mode-high-contrast select,
body.view-mode-high-contrast textarea,
html.view-mode-high-contrast input,
html.view-mode-high-contrast select,
html.view-mode-high-contrast textarea {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.view-mode-theme,
html.view-mode-theme {
  /* 시스템 테마에 따라 자동 적용 */
}

/* 다크 모드 감지 시 */
@media (prefers-color-scheme: dark) {
  body.view-mode-theme,
  html.view-mode-theme {
    background-color: #000000 !important;
    color: #ffffff !important;
  }
  
  body.view-mode-theme a,
  html.view-mode-theme a {
    color: #ffff00 !important;
  }
}

/* 모달이 열렸을 때 모달 내부 요소들이 클릭 가능하도록 설정 */
#modal_adjust_display.in,
#modal_adjust_display.shown {
  pointer-events: auto !important;
}

#modal_adjust_display.in *,
#modal_adjust_display.shown * {
  pointer-events: auto !important;
}

/* 모달 내부 label과 input 요소들이 클릭 가능하도록 설정 */
#modal_adjust_display.in label,
#modal_adjust_display.shown label,
#modal_adjust_display.in input,
#modal_adjust_display.shown input,
#modal_adjust_display.in button,
#modal_adjust_display.shown button {
  pointer-events: auto !important;
}

/* ===== 글자·화면 설정 스타일 END ===== */

.tab.full.small-tab .btn-tab {
  height: var(--krds-tab--button-size-height) !important;
  padding: 0;
  font-size: var(--krds-tab--button-pc-font-size) !important;
}

.main-box-responsive .in.news-tab {
  padding-top: 20px;
}

.main-sect .news-tbl-list {
  gap: 0.9rem !important;
}