/* 협력업체 포털 — 슬레이트 블루 헤더 + 라이트 네비 */
:root {
  --app-accent: #1a5cff;
  --app-accent-dark: #0d47d9;
  --app-navy: #0f172a;
  --app-navy-deep: #081637;
  --app-header-bg: #021d3d;
  --app-header-bg-dark: #283a4f;
  --app-slate-text: #1e293b;
  --app-slate-muted: #64748b;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fafc;
  --app-border: #e2e8f0;
  --nav-bg: var(--app-surface);
  --nav-border: var(--app-border);
  --nav-text: var(--app-slate-text);
  --nav-text-muted: var(--app-slate-muted);
  --nav-active-bg: rgba(26, 92, 255, 0.1);
  --nav-hover-bg: #f1f5f9;
  --nav-icon: #475569;
  --nav-sub-bg: var(--app-surface-soft);
}

#primary-nav,
#primary-nav aside,
aside#primary-nav {
  width: 220px !important;
  background: var(--nav-bg) !important;
  border-right: 1px solid var(--nav-border);
  box-shadow: none;
}

.hidden-menu #primary-nav {
  left: -215px;
}

.hidden-menu #main {
  margin-left: 10px;
}

@media (min-width: 992px) {
  #main {
    margin-left: 220px;
  }
}

@media (max-width: 991px) {
  #main {
    margin-left: 10px !important;
    left: auto !important;
    position: relative;
  }

  #primary-nav {
    left: -220px;
  }

  .hidden-menu #primary-nav {
    left: 0;
    z-index: 904;
  }

  .hidden-menu #main {
    margin-left: 10px !important;
    left: 220px;
    position: relative;
  }
}

#primary-nav .left-nav,
#primary-nav nav,
.fixed-navigation nav {
  background: var(--nav-bg);
  border-top: none !important;
  box-shadow: none;
  padding-bottom: 40px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fixed-navigation nav::-webkit-scrollbar,
#primary-nav nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.fixed-navigation nav > ul {
  padding: 12px 8px 24px 6px;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fixed-navigation nav > ul::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#primary-nav nav ul {
  padding: 8px 0 16px;
}

#primary-nav nav ul li {
  border-bottom: none;
  width: 100%;
}

#primary-nav nav > ul > li > a {
  display: flex;
  align-items: center;
  margin: 3px 10px;
  padding: 11px 0 11px 10px !important;
  border-radius: 12px;
  color: var(--nav-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  transition: background 0.2s, color 0.2s;
}

#primary-nav nav > ul > li > a:hover {
  background: var(--nav-hover-bg);
  color: var(--nav-text);
  text-decoration: none;
}

#primary-nav nav > ul > li.active > a,
#primary-nav nav > ul > li.open.active > a {
  background: var(--nav-active-bg);
  color: var(--app-accent-dark);
  font-weight: 600;
}

#primary-nav nav > ul > li.active > a i,
#primary-nav nav > ul > li.open.active > a i,
#primary-nav nav > ul > li.active > a .menu-item-parent i,
#primary-nav nav > ul > li.open.active > a .menu-item-parent i {
  color: var(--app-accent);
}

#primary-nav nav ul li.active > a::before,
#primary-nav nav ul li.active.open > a::before {
  display: none !important;
  content: none !important;
}

#primary-nav nav > ul > li > a i,
#primary-nav nav > ul > li > a .menu-item-parent i {
  color: var(--nav-icon);
  width: 20px;
  min-width: 20px;
  margin-left: 2px;
  margin-right: 12px;
  font-size: 16px;
  text-align: center;
}

#primary-nav nav > ul > li > a .menu-item-parent {
  flex: 1;
  display: inline-flex;
  align-items: center;
}

#primary-nav nav > ul > li > a b.collapse-sign {
  color: var(--nav-text-muted);
  font-size: 12px;
  margin-left: auto;
  margin-top: 0;
  float: none;
  line-height: 1;
}

#primary-nav nav > ul > li.open > a,
#primary-nav nav > ul > li.open > a b {
  color: var(--nav-text) !important;
}

#primary-nav nav ul ul {
  background: var(--nav-sub-bg);
  border-top: none;
  margin: 2px 10px 6px;
  border-radius: 10px;
  padding: 4px 0;
}

#primary-nav nav ul ul li {
  border-bottom: none;
}

#primary-nav nav ul ul li > a {
  padding: 9px 14px 9px 38px;
  color: var(--nav-text-muted);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  margin: 2px 8px;
}

#primary-nav nav ul ul li > a:hover {
  background: var(--nav-hover-bg) !important;
  color: var(--nav-text) !important;
}

#primary-nav nav ul ul li.active {
  background: transparent !important;
}

#primary-nav nav ul ul li.active > a,
#primary-nav nav ul ul li.active > a:hover {
  position: relative;
  background: transparent !important;
  color: var(--app-accent-dark) !important;
  font-weight: 700;
  border-left: none;
  padding-left: 38px;
  margin: 2px 8px;
}

#primary-nav nav ul ul li.active > a::before,
#primary-nav nav ul ul li.active > a:hover::before {
  display: block !important;
  content: "" !important;
  font-family: none !important;
  position: absolute;
  left: 22px;
  top: 50%;
  right: auto !important;
  width: 6px;
  height: 6px;
  line-height: normal !important;
  border: none !important;
  border-radius: 50%;
  background: var(--app-accent);
  color: transparent !important;
  transform: translateY(-50%);
  z-index: 2;
}

#primary-nav nav > ul > li > ul::before,
#primary-nav nav > ul ul li::before {
  display: none !important;
}

/* ── 헤더: 그리드 헤더(#3d5575)와 동일 계열 슬레이트 블루 ── */
.fixed-header #header,
#header {
  background-color: var(--app-header-bg) !important;
  background-image: linear-gradient(180deg, var(--app-header-bg-dark) 0%, var(--app-header-bg) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 10px rgba(40, 58, 79, 0.28) !important;
}

#header .btn-header a,
#header .btn-header a i,
#header #login-info .btn,
#header #login-info strong {
  color: rgba(255, 255, 255, 0.92) !important;
}

#header .btn-header > span > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s;
}

#header .btn-header > span > a:hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#header .btn-header > span > a i {
  color: inherit !important;
  font-size: 15px !important;
}

#header #selectUsrModule {
  width: auto !important;
  min-width: 96px !important;
  max-width: 140px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 32px 0 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 30px !important;
  float: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='rgba(255,255,255,0.85)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

#header #selectUsrModule:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

#header #selectUsrModule:focus {
  border-color: var(--app-accent) !important;
  box-shadow: 0 0 0 2px rgba(26, 92, 255, 0.25) !important;
  outline: none !important;
}

#header #selectUsrModule option {
  color: var(--app-slate-text);
  background: #fff;
}

#header .header-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  min-height: 46px;
  padding: 0 12px 0 0;
}

#header .header-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}

@media (min-width: 992px) {
  #header .header-left {
    width: 220px;
    position: relative;
  }
}

#header .header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

#header #logo-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  float: none;
  vertical-align: middle;
  height: 42px;
  margin: 0;
  padding: 0;
}

@media (min-width: 992px) {
  #header #logo-group {
    width: 100%;
    position: relative;
  }
}

#header #logo {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

#header #logo img {
  display: block;
  height: 32px;
  width: auto;
  padding: 0 0 0 12px;
  margin: 0;
}

#header #login-info {
  margin: 0;
  align-items: center;
}

#header .btn-header {
  margin: 0;
  float: none;
}

#header #hide-menu-t,
#header .nav-menu-toggle {
  position: relative;
  left: auto;
  top: auto;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  background: transparent;
  background-image: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 906;
  transition: background 0.2s;
}

@media (min-width: 992px) {
  #header #hide-menu-t,
  #header .nav-menu-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .hidden-menu #header .header-left {
    width: auto;
  }

  .hidden-menu #header #hide-menu-t,
  .hidden-menu #header .nav-menu-toggle {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
  }
}

#header #hide-menu-t a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  text-decoration: none;
}

#header #hide-menu-t:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hidden-menu #header #hide-menu-t a,
.hidden-menu #hide-menu-t a {
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 991px) {
  #header .header-bar-inner {
    padding-right: 8px;
  }

  #header #logo img {
    padding-left: 8px;
  }
}

#primary-nav .minifyme {
  background: #e2e8f0;
  border: 1px solid var(--nav-border);
  border-right: none;
  color: var(--nav-text-muted);
}

#primary-nav .minifyme:hover {
  background: #cbd5e1;
  color: var(--nav-text);
}

/* ── 로그인 스타일 레이어 팝업 (내정보관리 등) ── */
body.login-layer-open .ui-widget-overlay {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ui-dialog.layerPopup {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  background: #fff;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22), 0 8px 20px rgba(26, 92, 255, 0.12);
  font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

.ui-dialog.layerPopup .ui-dialog-titlebar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 8px 14px 20px;
  border: none;
  border-bottom: 1px solid #dbeafe;
  background: #eef4ff;
  border-radius: 0;
}

.ui-dialog.layerPopup .ui-dialog-title {
  flex: 1 1 auto;
  float: none !important;
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: left;
  border-left: 3px solid var(--app-accent);
}

.ui-dialog.layerPopup .ui-dialog-titlebar-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 0 0 auto;
  padding: 0;
  border: none !important;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
  color: #64748b;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.ui-dialog.layerPopup .ui-dialog-titlebar-close .ui-icon,
.ui-dialog.layerPopup .ui-dialog-titlebar-close .ui-button-icon-space {
  display: none !important;
}

.ui-dialog.layerPopup .ui-dialog-titlebar-close::before {
  content: "\f00d" !important;
  display: block !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased;
}

.ui-dialog.layerPopup .ui-dialog-titlebar-close::after {
  content: none !important;
  display: none !important;
}

.ui-dialog.layerPopup .ui-dialog-titlebar-close:hover,
.ui-dialog.layerPopup .ui-dialog-titlebar-close:focus {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #1e293b;
  outline: none;
  border: none !important;
  box-shadow: none !important;
}

.ui-dialog.layerPopup .ui-dialog-content {
  padding: 0 !important;
  background: #fff;
  border: none;
  overflow: hidden;
}

.ui-dialog.layerPopup .ui-dialog-content iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
  border: 0;
}

@media screen and (max-width: 599px) {
  .ui-dialog.layerPopup .ui-dialog-titlebar {
    padding: 12px 6px 12px 16px;
  }

  .ui-dialog.layerPopup .ui-dialog-title {
    font-size: 15px;
  }
}

/* gfnVpDialog — 타이틀바 닫기 */
.ui-dialog.vp-dialog-ui .ui-dialog-titlebar-close {
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: hidden;
}

.ui-dialog.vp-dialog-ui .ui-dialog-titlebar-close .ui-button-text,
.ui-dialog.vp-dialog-ui .ui-dialog-titlebar-close .ui-icon,
.ui-dialog.vp-dialog-ui .ui-dialog-titlebar-close .ui-button-icon-space {
  display: none !important;
}

.ui-dialog.vp-dialog-ui .ui-dialog-titlebar-close::before {
  content: "\f00d" !important;
  display: block !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased;
}

/* gfnVpDialog — 하단 버튼 영역 */
.ui-dialog.vp-dialog-ui .ui-dialog-buttonpane {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--app-border, #e2e8f0);
  background: var(--app-surface-soft, #f8fafc);
}

.ui-dialog.vp-dialog-ui .ui-dialog-buttonset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.ui-dialog.vp-dialog-ui .ui-dialog-buttonpane button,
.ui-dialog.vp-dialog-ui .ui-dialog-buttonpane button.ui-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 82px;
  height: 36px;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.ui-dialog.vp-dialog-ui .ui-dialog-buttonpane .ui-button-text {
  display: inline !important;
  padding: 0 !important;
  line-height: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.ui-dialog.vp-dialog-ui .vp-dialog-btn--primary,
.ui-dialog.vp-dialog-ui .vp-dialog-btn--primary.ui-button {
  border: none !important;
  background: linear-gradient(135deg, var(--app-accent, #1a5cff) 0%, var(--app-accent-dark, #0d47d9) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(26, 92, 255, 0.28);
}

.ui-dialog.vp-dialog-ui .vp-dialog-btn--primary .ui-button-text {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.ui-dialog.vp-dialog-ui .vp-dialog-btn--primary:hover,
.ui-dialog.vp-dialog-ui .vp-dialog-btn--primary.ui-state-hover,
.ui-dialog.vp-dialog-ui .vp-dialog-btn--primary.ui-state-focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 92, 255, 0.35);
  color: #fff !important;
  border: none !important;
  background: linear-gradient(135deg, var(--app-accent, #1a5cff) 0%, var(--app-accent-dark, #0d47d9) 100%) !important;
}

.ui-dialog.vp-dialog-ui .vp-dialog-btn--secondary,
.ui-dialog.vp-dialog-ui .vp-dialog-btn--secondary.ui-button {
  border: 1px solid var(--app-border, #cbd5e1) !important;
  background: #fff !important;
  color: var(--app-slate-text, #475569) !important;
}

.ui-dialog.vp-dialog-ui .vp-dialog-btn--secondary .ui-button-text {
  color: inherit !important;
  background: transparent !important;
  border: none !important;
}

.ui-dialog.vp-dialog-ui .vp-dialog-btn--secondary:hover,
.ui-dialog.vp-dialog-ui .vp-dialog-btn--secondary.ui-state-hover,
.ui-dialog.vp-dialog-ui .vp-dialog-btn--secondary.ui-state-focus {
  background: var(--app-surface-soft, #f8fafc) !important;
  border-color: #94a3b8 !important;
  color: var(--app-navy, #1e293b) !important;
}

.ui-dialog.vp-dialog-ui .vp-dialog-btn--danger,
.ui-dialog.vp-dialog-ui .vp-dialog-btn--danger.ui-button {
  border: none !important;
  background: #ef4444 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.ui-dialog.vp-dialog-ui .vp-dialog-btn--danger .ui-button-text {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.ui-dialog.vp-dialog-ui .vp-dialog-btn--danger:hover,
.ui-dialog.vp-dialog-ui .vp-dialog-btn--danger.ui-state-hover,
.ui-dialog.vp-dialog-ui .vp-dialog-btn--danger.ui-state-focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.32);
  color: #fff !important;
  border: none !important;
  background: #dc2626 !important;
}

.ui-dialog.vp-dialog-ui .ui-dialog-buttonpane button:disabled,
.ui-dialog.vp-dialog-ui .ui-dialog-buttonpane button[disabled],
.ui-dialog.vp-dialog-ui .ui-dialog-buttonpane button.ui-state-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

@media screen and (max-width: 599px) {
  .ui-dialog.vp-dialog-ui .ui-dialog-buttonpane {
    padding: 12px 14px;
  }

  .ui-dialog.vp-dialog-ui .ui-dialog-buttonset {
    justify-content: stretch !important;
  }

  .ui-dialog.vp-dialog-ui .ui-dialog-buttonpane button,
  .ui-dialog.vp-dialog-ui .ui-dialog-buttonpane button.ui-button {
    flex: 1 1 auto;
    min-width: 0;
  }
}