@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-barun-gothic.css');

:root {
    --wt-black: #000;
    --wt-black-rgb: #000000;
    --wt-blue: #0b4dda;
    --wt-body-bg: #1f2020;
    --wt-body-bg-rgb: #16162F;
    --wt-body-color: #c0c0c0;
    --wt-body-color-rgb: #FFFFFF;
    --wt-body-font-family: var(--wt-font-naver);
    --wt-body-font-size: 0.9rem;
    --wt-body-font-weight: 400;
    --wt-body-line-height: 1.5;
    --wt-border-color: #3c3c3c;
    --wt-border-color-translucent: rgba(255, 255, 255, 0.15);
    --wt-border-radius: 0.375rem;
    --wt-border-radius-sm: 0.25rem;
    --wt-border-radius-lg: 0.5rem;    
    --wt-border-radius-xl: 1rem;
    --wt-border-radius-2xl: var(--wt-border-radius-xxl);
    --wt-border-radius-xxl: 2rem;
    --wt-border-radius-pill: 50rem;
    --wt-border-style: solid;
    --wt-border-width: 1px;
    --wt-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --wt-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 
    --wt-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --wt-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --wt-code-color: #C0C0C0;
    --wt-cyan: #287bb5; 
    --wt-danger: #c52420;
    --wt-danger-bg: var(--wt-danger-bg-subtle);
    --wt-danger-bg-subtle: #4d1b18;
    --wt-danger-bg-subtle: #fae1e0;
    --wt-danger-border-subtle: #b33f38;
    --wt-danger-color: var(--wt-danger-text-emphasis);
    --wt-danger-rgb: 197, 36, 32;
    --wt-danger-text-emphasis: #ff9c96; 
    --wt-dark-bg-subtle: #1a1a1a;
    --wt-dark-border-subtle: #333333;
    --wt-dark-text-emphasis: #e6e6e6;
    --wt-disabled-color: #c7ccd6;
    --wt-emphasis-color: #fff;
    --wt-emphasis-color-rgb: 255, 255, 255; 
    --wt-focus-ring-color: rgba(11, 77, 218, 0.25);
    --wt-focus-ring-opacity: 0.25;
    --wt-focus-ring-width: 0.25rem;
    --wt-font-monospace: "Source Code Pro", monospace; /**/
    --wt-font-sans-serif: "Source Sans Pro", Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
    --wt-font-naver: 'NanumBarunGothicUltraLight', 'NanumBarunGothicLight', 'NanumBarunGothic', 'NanumBarunGothicBold';
    --wt-form-invalid-border-color: #ff5a50;
    --wt-form-invalid-color: #ff5a50;
    --wt-form-valid-border-color: #54ab98;
    --wt-form-valid-color: #54ab98;
    --wt-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --wt-heading-color: inherit;
    --wt-highlight-bg: #655d29;
    --wt-highlight-color: #ffffff;
    --wt-honey-bg: #fa903e;
    --wt-honey-bg-subtle: rgba(253, 198, 156, 0.1019607843);
    --wt-honey-border-subtle: rgba(253, 198, 156, 0.1490196078);
    --wt-honey-text-emphasis: #fdc69c;
    --wt-indigo: #6610f2;
    --wt-info: #007be6;
    --wt-info-bg: var(--wt-info-bg-subtle);
    --wt-info-bg-subtle: #143b3e;
    --wt-info-border-subtle: #2e8992;
    --wt-info-color: var(--wt-info-text-emphasis);
    --wt-info-rgb: 0, 123, 230;
    --wt-info-text-emphasis: #8edbe3;
    --wt-input-border-color: #3c3c3c; 
    --wt-light-bg-subtle: #333333;
    --wt-light-border-subtle: #4d4d4d;
    --wt-lightred-bg: #f48385;
    --wt-lightred-bg-subtle: rgba(253, 218, 206, 0.1019607843);
    --wt-lightred-border-subtle: rgba(253, 218, 206, 0.1490196078);
    --wt-lightred-text-emphasis: #fddace;
    --wt-light-text-emphasis: #f9f9f9;
    --wt-link-color: #3c3c3c;
    --wt-link-color-rgb: 255, 255, 255;
    --wt-link-decoration: none;
    --wt-link-hover-color: #C0C0C0;
    --wt-link-hover-color-rgb: 134, 170, 249;
    --wt-malachite-bg: #01d667;
    --wt-malachite-bg-subtle: rgba(173, 247, 175, 0.1019607843);
    --wt-malachite-border-subtle: rgba(173, 247, 175, 0.1490196078);
    --wt-malachite-text-emphasis: #adf7af;
    --wt-orange: #e57300;
    --wt-pink: #000000;
    --wt-primary: #3c3c3c;
    --wt-primary-bg: var(--wt-primary-bg-subtle);
    --wt-primary-bg-subtle: #28334b;
    --wt-primary-border-subtle: #5e77ae;
    --wt-primary-color: var(--wt-primary-text-emphasis);
    --wt-primary-rgb: 11, 77, 218;
    --wt-primary-text-emphasis: #b6ccfb;
    --wt-purple: #6f42c1;
    --wt-purple-bg: #d272ff;
    --wt-purple-bg-subtle: rgba(229, 175, 255, 0.1019607843);
    --wt-purple-border-subtle: rgba(229, 175, 255, 0.1490196078);
    --wt-purple-text-emphasis: #e5afff;
    --wt-red: #c52420;
    --wt-secondary-bg: #232c42;
    --wt-secondary-bg-rgb: 35, 44, 66;
    --wt-secondary-bg-subtle: #141414;
    --wt-secondary-border-subtle: #3d3d3d;
    --wt-secondary-color: #c3d2e8;
    --wt-secondary-color-rgb: 195, 210, 232;
    --wt-secondary-text-emphasis: #a3a3a3;
    --wt-success: #39ac4c;
    --wt-success-bg: var(--wt-success-bg-subtle);
    --wt-success-bg-subtle: #19332e;
    --wt-success-border-subtle: #3b786a;
    --wt-success-color: var(--wt-success-text-emphasis);
    --wt-success-rgb: 57, 172, 76;
    --wt-success-text-emphasis: #98cdc1;
    --wt-teal: #20c997;
    --wt-tertiary-bg: #2f3d5c;
    --wt-tertiary-bg-rgb: 47, 61, 92;
    --wt-tertiary-color: #C0C0C0;
    --wt-tertiary-color-rgb: 137, 151, 180;
    --wt-warning: #e57300;
    --wt-warning-bg: var(--wt-warning-bg-subtle);
    --wt-warning-bg-subtle: #4d470e;
    --wt-warning-border-subtle: #b3a620;
    --wt-warning-color: var(--wt-warning-text-emphasis);
    --wt-warning-rgb: 229, 115, 0;
    --wt-warning-text-emphasis: #fff482;
    --wt-white: #fff;
    --wt-white-rgb: 255, 255, 255;
    --wt-yellow: #fce967;  
      }

      *,
      *::before,
      *::after {
     box-sizing: border-box;
      }

      @media (prefers-reduced-motion: no-preference) {
     :root {
       scroll-behavior: smooth;
     }
      }

      body {
        margin: 0;
        font-family: var(--wt-body-font-family);
        font-size: var(--wt-body-font-size);
        font-weight: var(--wt-body-font-weight);
        line-height: var(--wt-body-line-height);
        color: var(--wt-body-color);
        /* text-align: var(--wt-body-text-align);  사용되지 않음*/
        background-color: var(--wt-body-bg);
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }

      hr {
        margin: 1rem 0;
        color: var(--wt-border-color);
        border: 0;
        border-top: var(--wt-border-width) solid;
        opacity: 1;
      }

      h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-weight: 500;
        line-height: 1.2;
        color: var(--wt-heading-color);
      }


    .container,
    .container_haeder,
    .container_footer,
    .container-fluid,
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm {
      --wt-gutter-x: 1.5rem;
      --wt-gutter-y: 0;
        width: 100%;
        padding-right: calc(var(--wt-gutter-x)*.5);
        padding-left: calc(var(--wt-gutter-x)*.5);
        margin-right: auto;
        margin-left: auto;
  }
/* 
  @media(min-width: 576px) {

    .container-sm,
    .container {
        max-width: 540px
    }
}

@media(min-width: 768px) {

    .container-md,
    .container-sm,
    .container {
        max-width: 720px
    }
}

@media(min-width: 992px) {

    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 960px
    }
}

@media(min-width: 1200px) {

    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1140px
    }
} */

@media(min-width: 1400px) {

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1320px
    }
}

  :root {
  --wt-breakpoint-xs: 0;
  --wt-breakpoint-sm: 576px;
  --wt-breakpoint-md: 768px;
  --wt-breakpoint-lg: 992px;
  --wt-breakpoint-xl: 1200px;
  --wt-breakpoint-xxl: 1400px
  }
 

  input,
  button,
  select,
  optgroup,
  textarea {
      margin: 0;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit
  }


  .hstack {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
  }

  .vstack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch;
  }


  p {
    margin-top: 0;
    margin-bottom: 1rem
  }

  
  .m-auto {
    margin: auto !important
  }


  .m-0 {
    margin: 0 !important
  }

  .m-1 {
      margin: .25rem !important
  }

  .m-2 {
      margin: .5rem !important
  }

  .m-3 {
      margin: 1rem !important
  }

  .m-4 {
      margin: 1.5rem !important
  }

  .m-5 {
      margin: 3rem !important
  }

  .mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important
  }

  .mx-1 {
      margin-right: .25rem !important;
      margin-left: .25rem !important
  }

  .mx-2 {
      margin-right: .5rem !important;
      margin-left: .5rem !important
  }

  .mx-3 {
      margin-right: 1rem !important;
      margin-left: 1rem !important
  }

  .mx-4 {
      margin-right: 1.5rem !important;
      margin-left: 1.5rem !important
  }

  .mx-5 {
      margin-right: 3rem !important;
      margin-left: 3rem !important
  }

  .mx-auto {
      margin-right: auto !important;
      margin-left: auto !important
  }       

  .align-items-center {
    align-items: center !important
  }

  .col-auto {
    flex: 0 0 auto;
    width: auto
  }

  .col-1 {
    flex: 0 0 auto;
    width: 8.33333333%
  }

  .col-2 {
    flex: 0 0 auto;
    width: 16.66666667%
  }

  .col-3 {
    flex: 0 0 auto;
    width: 25%
  }

  .col-4 {
    flex: 0 0 auto;
    width: 33.33333333%
  }

  .col-5 {
    flex: 0 0 auto;
    width: 41.66666667%
  }

  .col-6 {
    flex: 0 0 auto;
    width: 50%
  }

  .col-7 {
    flex: 0 0 auto;
    width: 58.33333333%
  }

  .col-8 {
    flex: 0 0 auto;
    width: 66.66666667%
  }

  .col-9 {
    flex: 0 0 auto;
    width: 75%
  }

  .col-10 {
    flex: 0 0 auto;
    width: 83.33333333%
  }

  .col-11 {
    flex: 0 0 auto;
    width: 91.66666667%
  }

  .col-12 {
    flex: 0 0 auto;
    width: 100%
  }


  .w-75 {
      width: 75% !important
  }

  .w-100 {
      width: 100% !important
  }

  .w-auto {
      width: auto !important
  }


  .gap-0 {
      gap: 0 !important
  }

  .gap-1 {
      gap: .25rem !important
  }

  .gap-2 {
      gap: .5rem !important
  }

  .gap-3 {
      gap: 1rem !important
  }

  .gap-4 {
      gap: 1.5rem !important
  }

  .gap-5 {
      gap: 3rem !important
  }


  [hidden] {
    display: none !important
  }



  .border {
    border: var(--wt-border-width) var(--wt-border-style) var(--wt-border-color) !important
  }

  .border-0 {
      border: 0 !important
  }

  .border-top {
      border-top: var(--wt-border-width) var(--wt-border-style) var(--wt-border-color) !important
  }

  .border-top-0 {
      border-top: 0 !important
  }

  .border-end {
      border-right: var(--wt-border-width) var(--wt-border-style) var(--wt-border-color) !important
  }

  .border-end-0 {
      border-right: 0 !important
  }

  .justify-content-center {
    justify-content: center !important
  }

  a {
    color: rgba(var(--wt-body-color), var(--wt-link-opacity, 1));
    text-decoration: none
  }

  a:hover {
    color:  #ffffff;
      /* font-weight: bold; */ 

  }

  a:not([href]):not([class]),
  a:not([href]):not([class]):hover {
      color: inherit;
      text-decoration: none
  }


  ol,
  ul {
      padding-left: 2rem
  }
 
  ol,
  ul,
  dl {
      margin-top: 0;
      margin-bottom: 1rem
  }
 
  ol ol,
  ul ul,
  ol ul,
  ul ol {
      margin-bottom: 0
  }

  label {
    display: inline-block
  }

  .text-truncate { /* 출력하는 값이 길이가 길 경우 주어진 영역을 넘어서는 부분은 표시하지 않도록 함*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    width: 100%;          /* 출력 영역을 페이지 너비에 맞추기 */
    word-wrap: break-word; /* 단어 단위로 줄바꿈 설정 */
  /*  white-space: normal; */  /* 줄바꿈이 가능하도록 설정 */
  }



  .file-control {
    display: inline-block;
    width: 100%;
    align-items: center; /* 가로 중앙 정렬 */
    padding: .5rem .5rem;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--wt-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(0, 0, 0, 0);
    background-clip: padding-box;
    /*border: var(--wt-border-width) solid #a6b1c9;*/
    border-radius: var(--wt-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
  }

  @media(prefers-reduced-motion: reduce) {
      .file-control {
          transition: none
      }
  }

  .file-control[type=file] {
      overflow: hidden
  }

  .file-control[type=file]:not(:disabled):not([readonly]) {
      cursor: pointer
  }

  .file-control:focus {
      color: var(--wt-body-color);
      background-color: rgba(0, 0, 0, 0);
      border-color: var(--wt-primary);
      outline: 0;
      box-shadow: initial
  }

  .file-control::-webkit-date-and-time-value {
      min-width: 85px;
      height: 1.5em;
      margin: 0
  }

  .file-control::-webkit-datetime-edit {
      display: block;
      padding: 0
  }

  .file-control::-webkit-input-placeholder {
      color: var(--wt-input-placeholder-color, var(--wt-tertiary-color));
      opacity: 1
  }

  .file-control::-ms-input-placeholder {
      color: var(--wt-input-placeholder-color, var(--wt-tertiary-color));
      opacity: 1
  }

  .file-control::placeholder {
      color: var(--wt-input-placeholder-color, var(--wt-tertiary-color));
      opacity: 1
  }

  .file-control:disabled {
      color: var(--wt-disabled-color);
      background-color: var(--wt-file-control-disabled-bg);
      border-color: var(--wt-disabled-color);
      opacity: 1
  }


  .file-control-plaintext {
    display: block;
    width: 100%;
    padding: .5rem 0;
    margin-bottom: 0;
    line-height: 1.5;
    color: var(--wt-body-color);
    background-color: rgba(0, 0, 0, 0);
    border: solid rgba(0, 0, 0, 0);
    border-width: var(--wt-border-width) 0
  }

  .file-control-plaintext:focus {
      outline: 0
  }

  .file-control-plaintext.file-control-sm,
  .file-control-plaintext.file-control-lg {
      padding-right: 0;
      padding-left: 0
  }

  .file-control-sm {
      min-height: calc(1.5em + 1rem + calc(var(--wt-border-width) * 2));
      padding: .5rem .5rem;
      font-size: 0.875rem;
      border-radius: var(--wt-border-radius-sm)
  }

  .file-control-sm::-webkit-file-upload-button {
      padding: .5rem .5rem;
      margin: -0.5rem -0.5rem;
      -webkit-margin-end: .5rem;
      margin-inline-end: .5rem
  }

  .file-control-sm::file-selector-button {
      padding: .5rem .5rem;
      margin: -0.5rem -0.5rem;
      -webkit-margin-end: .5rem;
      margin-inline-end: .5rem
  }

  .file-control-lg {
      min-height: calc(1.5em + 1rem + calc(var(--wt-border-width) * 2));
      padding: .5rem .5rem;
      font-size: 1.25rem;
      border-radius: var(--wt-border-radius-lg)
  }

  .file-control-lg::-webkit-file-upload-button {
      padding: .5rem .5rem;
      margin: -0.5rem -0.5rem;
      -webkit-margin-end: .5rem;
      margin-inline-end: .5rem
  }

  .file-control-lg::file-selector-button {
      padding: .5rem .5rem;
      margin: -0.5rem -0.5rem;
      -webkit-margin-end: .5rem;
      margin-inline-end: .5rem
  }

  textarea.file-control {
      min-height: calc(1.5em + 1rem + calc(var(--wt-border-width) * 2))
  }

  textarea.file-control-sm {
      min-height: calc(1.5em + 1rem + calc(var(--wt-border-width) * 2))
  }

  textarea.file-control-lg {
      min-height: calc(1.5em + 1rem + calc(var(--wt-border-width) * 2))
  }

  .file-control-color {
      width: 3rem;
      height: calc(1.5em + 1rem + calc(var(--wt-border-width) * 2));
      padding: .5rem
  }

  .file-control-color:not(:disabled):not([readonly]) {
      cursor: pointer
  }

  .file-control-color::-moz-color-swatch {
      border: 0 !important;
      border-radius: var(--wt-border-radius)
  }

  .file-control-color::-webkit-color-swatch {
      border: 0 !important;
      border-radius: var(--wt-border-radius)
  }

  .file-control-color.file-control-sm {
      height: calc(1.5em + 1rem + calc(var(--wt-border-width) * 2))
  }

  .file-control-color.file-control-lg {
      height: calc(1.5em + 1rem + calc(var(--wt-border-width) * 2))
  }



  .file-control,
  .form-select,
  .multiselect-trigger {
      border: var(--wt-border-width) solid var(--wt-input-border-color)
  }


html {
    overflow-y: scroll;        
    scrollbar-color: #C1C1C1
 /*   var(--wt-input-border-color) 
    var(--wt-tertiary-bg) */
}


.section-header {
    border-bottom: 1px solid var(--wt-border-color);
    padding: .5rem 1rem;
    display: flex;
    align-items: center
}

.section-header .title {
    font-weight: bold;
    font-size: 1.2rem
}


.section-header_sm {    
    border-bottom: 1px solid var(--wt-border-color);    
    padding: .4rem 1rem;
    display: flex;
    align-items: center
}

.section-header_sm .title {
    font-weight: bold;
    font-size: 1.0rem
}


.position-relative {
    position: relative !important
}