@charset "UTF-8";

/* Menu-only styles extracted from the approved UI/UX reference. */
.skip-link {
  position: fixed;
  top: -48px;
  left: 8px;
  z-index: 1300;
  padding: 10px 16px;
  border-radius: 0 0 6px 6px;
  background: #182c3c;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
}

.app-sidebar {
  width: 240px;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #182c3c;
  color: #c9d2df;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.2s ease;
}

.app-sidebar *,
.app-sidebar *::before,
.app-sidebar *::after,
.gnb-flyout *,
.gnb-flyout *::before,
.gnb-flyout *::after {
  box-sizing: border-box;
}

.app-sidebar + main {
  margin-left: 240px;
  transition: margin-left 0.2s ease;
}

.app-sidebar.is-collapsed + main {
  margin-left: 72px;
}

.app-sidebar a:focus-visible,
.app-sidebar button:focus-visible,
.app-sidebar select:focus-visible,
.gnb-flyout a:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid #6cc7c2;
  outline-offset: 2px;
  border-radius: 6px;
}

.app-sidebar__logo {
  position: relative;
  flex-shrink: 0;
  margin: 0;
  padding: 18px 16px 14px;
}

.app-sidebar__logo a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
}

.app-sidebar__logo .kt-logo {
  display: block;
  width: 100%;
  max-width: 168px;
  height: 34px;
  margin: 0 auto;
}

.app-sidebar__nav {
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding: 6px 10px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  scrollbar-width: thin;
}

.app-sidebar__nav::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
}

.app-sidebar__nav::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
}

.app-sidebar__nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

.app-sidebar__nav ul {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-sidebar__nav .gnb-item {
  width: 100%;
  margin: 0;
  background: none;
  cursor: default;
}

.app-sidebar__nav .gnb-item + .gnb-item {
  margin-top: 2px;
}

.app-sidebar__nav .gnb-toggle {
  display: flex;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #c9d2df;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-sidebar__nav .gnb-toggle:hover,
.app-sidebar__nav .gnb-toggle[aria-expanded="true"] {
  color: #fff;
}

.app-sidebar__nav .gnb-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}

.app-sidebar__nav .gnb-ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #8f9bb0;
  background-color: currentColor;
  -webkit-mask: var(--gnb-ico, none) no-repeat center / contain;
  mask: var(--gnb-ico, none) no-repeat center / contain;
}

.app-sidebar__nav .gnb-ico--legacy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
}

.app-sidebar__nav .gnb-ico--legacy .nav-ico,
.app-sidebar__nav .gnb-ico--legacy > svg {
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  background-size: 20px;
}

.app-sidebar__nav .gnb-toggle:hover .gnb-ico,
.app-sidebar__nav .gnb-toggle[aria-expanded="true"] .gnb-ico,
.app-sidebar__nav .gnb-toggle.is-current .gnb-ico {
  color: #2dbdb6;
}

.app-sidebar__nav .gnb-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar__nav .gnb-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #7a869c;
  background-color: currentColor;
  -webkit-mask: var(--gnb-chevron) no-repeat center / contain;
  mask: var(--gnb-chevron) no-repeat center / contain;
  transition: transform 0.2s ease;
}

.app-sidebar__nav .gnb-toggle[aria-expanded="true"] .gnb-arrow {
  transform: rotate(180deg);
}

.app-sidebar__nav .gnb-sub {
  display: block;
  padding: 3px 0 6px;
}

.app-sidebar__nav .gnb-sub[hidden] {
  display: none;
}

.app-sidebar__nav .gnb-sub li {
  margin: 0;
  background: none;
}

.app-sidebar__nav .gnb-sub a {
  display: block;
  width: 100%;
  padding: 9px 12px 9px 44px;
  border-radius: 8px;
  color: #aab3c2;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-sidebar__nav .gnb-sub a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.app-sidebar__nav .gnb-sub a.is-current,
.app-sidebar__nav .gnb-sub a[aria-current="page"] {
  border: 0;
  background: #bfeae6;
  color: #16233a;
  font-weight: 700;
}

.app-sidebar__foot {
  flex-shrink: 0;
  padding: 14px 16px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #182c3c;
}

.app-sidebar__user {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
  gap: 8px;
}

.app-sidebar__user .user-ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #8f9bb0;
  background-color: currentColor;
  -webkit-mask: var(--gnb-user) no-repeat center / contain;
  mask: var(--gnb-user) no-repeat center / contain;
}

.app-sidebar__user .user-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: #c9d2df;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar__user .btn-logout {
  flex-shrink: 0;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  background: transparent;
  color: #c9d2df;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  transition: background-color 0.15s ease;
}

.app-sidebar__user .btn-logout:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.app-sidebar__brand {
  margin-bottom: 12px;
}

.app-sidebar__brand .brand-select {
  width: 100%;
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  appearance: none;
  background-color: #24405f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23d3dae4'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  color: #f2f5f9;
  font-family: inherit;
  font-size: 13px;
}

.app-sidebar__brand .brand-select option {
  background: #fff;
  color: #1f2937;
}

.app-sidebar__collapse {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #c9d2df;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.2s ease;
}

.app-sidebar__collapse:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.app-sidebar__collapse::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--gnb-collapse) no-repeat center / contain;
  mask: var(--gnb-collapse) no-repeat center / contain;
  transition: transform 0.2s ease;
}

.app-sidebar.is-collapsed {
  width: 72px;
}

.app-sidebar.is-collapsed .app-sidebar__logo {
  padding: 14px 8px 10px;
}

.app-sidebar.is-collapsed .app-sidebar__logo a {
  padding: 6px;
}

.app-sidebar.is-collapsed .app-sidebar__logo .kt-logo {
  width: 44px;
  height: 34px;
}

.app-sidebar.is-collapsed .gnb-toggle {
  justify-content: center;
  padding: 12px 0;
  gap: 0;
}

.app-sidebar.is-collapsed .gnb-label,
.app-sidebar.is-collapsed .gnb-arrow,
.app-sidebar.is-collapsed .gnb-sub,
.app-sidebar.is-collapsed .app-sidebar__user .user-name,
.app-sidebar.is-collapsed .app-sidebar__user .btn-logout,
.app-sidebar.is-collapsed .app-sidebar__brand {
  display: none;
}

.app-sidebar.is-collapsed .app-sidebar__foot {
  padding-right: 16px;
  padding-left: 16px;
  text-align: left;
}

.app-sidebar.is-collapsed .app-sidebar__user {
  justify-content: center;
}

.app-sidebar.is-collapsed .app-sidebar__collapse::before {
  transform: rotate(180deg);
}

.app-sidebar.is-collapsed .gnb-item:hover .gnb-toggle,
.app-sidebar.is-collapsed .gnb-item:focus-within .gnb-toggle {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.gnb-flyout {
  position: fixed;
  z-index: 1200;
  min-width: 190px;
  max-width: 260px;
  max-height: calc(100vh - 16px);
  padding: 8px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #1f3350;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

.gnb-flyout__title {
  margin: 0 0 4px;
  padding: 6px 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.gnb-flyout__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gnb-flyout__list a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: #c9d2df;
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.gnb-flyout__list a:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.gnb-flyout__list a.is-current,
.gnb-flyout__list a[aria-current="page"] {
  background: #bfeae6;
  color: #16233a;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .app-sidebar *,
  .app-sidebar + main,
  .skip-link,
  .gnb-flyout__list a {
    transition: none !important;
  }
}

/* GNB icon set from the approved UI/UX reference. */
.gnb-ico--service {
  --gnb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

.gnb-ico--media {
  --gnb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M21 3H3c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 13H3V5h18v11z'/%3E%3C/svg%3E");
}

.gnb-ico--material {
  --gnb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
}

.gnb-ico--campaign {
  --gnb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='a'%3E%3Crect x='2' y='4' width='20' height='16' rx='4' fill='%23fff'/%3E%3Ctext x='12' y='16.4' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='11' font-weight='700' fill='%23000'%3EAd%3C/text%3E%3C/mask%3E%3Crect x='2' y='4' width='20' height='16' rx='4' fill='%23fff' mask='url(%23a)'/%3E%3C/svg%3E");
}

.gnb-ico--content {
  --gnb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z'/%3E%3C/svg%3E");
}

.gnb-ico--board {
  --gnb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z'/%3E%3C/svg%3E");
}

.gnb-ico--xlboard {
  --gnb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 5h18v4H3V5zm0 6h18v4H3v-4zm0 6h18v4H3v-4z'/%3E%3C/svg%3E");
}

.gnb-ico--schedule {
  --gnb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z'/%3E%3C/svg%3E");
}

.gnb-ico--system {
  --gnb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
}

.app-sidebar {
  --gnb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  --gnb-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
  --gnb-collapse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
}