/* �⑤벏�꽰 */
.main__bullet-title {
  background: url("../images/bullet.svg") no-repeat left;
  background-size: 5px;
  margin-bottom: 8px;
  position: relative;
}
.main__bullet-title > h3 {
  font-size: 20px;
  font-weight: 800;
  padding-left: 14px;
  white-space: nowrap;
}
.main__bullet-title.info {
  display: flex;
  align-items: center;
}
.main__bullet-title.info img,
.info-message img,
img.info {
  width: 16px;
  align-items: center;
}

.main__bullet-title.info span,
.info-message {
  display: inline-flex;
  line-height: 16px;
  color: var(--navy-400); /* #5A7FB0 */
  font-size: 15px;
  font-weight: 500;
  margin-left: 10px;
  align-items: center;
}
.main__bullet-title .grid-count {
  position: absolute;
  right: 0;
  color: var(--gray-800);
  font-size: 15px;
}

.main__bullet-title .grid-count b {
  font-weight: 600;
  color: var(--red-500);
}

/* 甕곌쑵�뱣 */
.button--large {
  min-width: 60px;
  padding: 0 12px;
  height: 36px;
  border-radius: 4px;
  font-weight: 500;
}
.button--large.filled {
  background: var(--navy-700); /* #1C3A5C */
  color: #fff;
}
.button--large.outlined {
  border: 2px solid var(--navy-700);
  color: var(--navy-700);
  background: #fff;
  font-weight: 600;
}
.button--large.negative {
  border: 2px solid var(--red-500); /* #FF4931 */
  color: var(--red-500);
  background: #fff;
  font-weight: 600;
}

.button--medium {
  padding: 0 8px;
  height: 28px;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  white-space: nowrap;
  min-width: 60px;
}

.button--medium.filled {
  background: var(--navy-600);
  color: #fff;
}
.button--medium.outlined {
  border: 1px solid var(--navy-600);
  color: var(--navy-600);
  background: #fff;
  font-weight: 600;
}
.button--medium.negative {
  border: 1px solid var(--red-500);
  color: var(--red-500);
  background: #fff;
  font-weight: 600;
}

.field-add-wrap {
  width: 100%;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.field-add-wrap .button--option-add {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  padding: 0 10px;
  /*  border: 1px solid var(--navy-500); #2C5282
    background: #fff; */
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: var(--navy-500);
  margin: 0 0 4px;
  justify-content: center;
}

.field-add-wrap .button--option-add:hover {
  background: var(--navy-500);
  transition: all 0.3s ease;
  color: #fff;
}

.button--option-add img {
  width: 16px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
}

.field-add-wrap .button--option-add.small {
  margin-top: 8px;
  font-size: 16px;
}
.field-add-wrap .button--option-add.filled {
  background: var(--navy-500);
  border: none;
  color: #fff;
}

.button--option-add.border {
  border: 1px solid var(--navy-500);
  background: #fff;
}

.field-add-wrap.half-button > button {
  flex: 1;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  border: 1px solid var(--navy-500);
}

.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 30px;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="month"],
select {
  border: 1px solid var(--gray-400); /* #D1D5DB */
  border-radius: 4px;
  padding: 4px 8px;
  height: 27px;
  font-size: 15px;
  width: 100%;
  background-color: #fff;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder {
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 300;
}

.email-form {
  display: flex;
  gap: 4px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 8px;
  margin: 0;
  font-size: 15px;
  background: #fff;
  background-image: url("../images/select-arrow.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 8px) center;
  background-size: 10px;
  padding-right: 36px;
}

input[type="text"]:disabled,
select:disabled {
  opacity: 1;
  background: var(--navy-200);
  border: 1px solid var(--gray-400);
  color: var(--gray-700);
}

select:disabled {
  background-image: url("../images/select-arrow.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 8px) center;
  background-size: 10px;
  padding-right: 36px;
}

textarea {
  width: 100%;
  min-height: 27px;
  padding: 4px 8px;
  box-sizing: border-box;
  flex: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-date-wrapper {
  position: relative;
  width: 100%;
  min-height: 27x;
  border: 1px solid var(--gray-400);
  border-radius: 4px;
  background: #fff url("../images/calendar-icon.svg") no-repeat;
  background-size: 14px;
  background-position: calc(100% - 12px) center;
  display: flex;
  align-items: center;
  padding: 0 8px;
}

input[type="date"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  height: 27px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.fake-date-ui {
  font-size: 15px;
  color: var(--text-placeholder); /* #757575 */
  pointer-events: none;
  z-index: 1;
}

.custom-date-wrapper.is-selected .fake-date-ui {
  color: var(--black); /* #333 */
}

/**************************** header ****************************/
header.page-title {
  min-width: 768px;
  margin: 20px auto 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 99;
}
.page-title__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--gray-900);
}
header.page-title .page-title__guide {
  font-size: 16px;
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 4px;
}
header.page-title .page-title__warning {
  color: var(--red-500);
  font-size: 14px;
}

main:not(.signUp-main) {
  min-width: 768px;
}

/* 占쎄틙1 */

.tab-container {
  margin-top: 20px;
}

.tab-depth .tab-container {
  margin-top: 0;
}

.tab-container__contents {
  border: 1px solid var(--gray-500);
  background: #fff;
  border-radius: 4px;
  padding: 4px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-top-left-radius: 0;
}

.tab-container__tabs {
  display: flex;
  gap: 1px;
  align-items: center;
  position: relative;
}

.tab-container__tabs .tab-container__title {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  background: var(--navy-300); /* #BEC9D8 */
  height: 32px;
  padding: 0 12px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.tab-container__tabs .tab-container__title.active {
  background: var(--navy-500);
}

.score-badge {
  display: inline-block;
  min-width: 40px;
  height: 20px;
  padding: 0 4px;
  line-height: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  border-radius: 4px;
  color: var(--gray-600);
  background: rgba(255, 255, 255, 0.95);
  margin-left: 6px;
}

.tab-container__tabs .tab-container__title.active .score-badge {
  font-weight: 700;
  color: var(--navy-500);
  background: rgba(255, 255, 255, 0.95);
}

.score-badge.type1 {
  background: none;
  font-weight: 500;
  padding: 0 8px;
  font-size: 13px;
  margin-left: 0;
  color: var(--navy-500);
}

.tab-container__tabs .tab-container__title h5 {
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
  white-space: nowrap;
}
.tab-container__tabs .tab-container__title .tab-container__tab-close {
  width: 16px;
  height: 16px;
  display: inline-block;
  background: url("../images/tab-x.svg") no-repeat;
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

.tab-control {
  position: absolute;
  right: 0;
  top: 50%;
  height: 28px;
  display: flex;
  gap: 4px;
  transform: translate(0, -50%);
}
.tab-control button {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background-position: center center;
  background-color: var(--navy-300);
  background-repeat: no-repeat;
  background-size: auto;
}
.tab-control button:hover {
  background-color: var(--gray-800); /* #4B5563 */
}
.tab-control button.tab-pre {
  background-image: url("../images/tab-pre.svg");
}
.tab-control button.tab-next {
  background-image: url("../images/tab-next.svg");
}
.tab-control button.tab-add {
  background-image: url("../images/tab-add.svg");
  background-color: var(--navy-500);
}
.tab-control button.tab-add:hover {
  background-color: var(--navy-600); /* #23466F */
}

/* 占쎄틙2 */
.tab-container2 {
  width: 100%;
  background: #fff;
  border: 1px solid var(--gray-400);
  border-radius: 4px;
  padding: 12px 20px;
}

.tab-container2__tabs {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--gray-300);
  position: relative;
}
.tab-container2__tabs .tab-container2__title {
  height: 36px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.tab-container2__tabs .tab-container2__title h5 {
  font-size: 18px;
  color: var(--gray-700); /* #6B7280 */
  font-weight: 600;
}
.tab-container2__tabs .tab-container2__title .tab-container2__tab-close {
  width: 16px;
  height: 16px;
  display: inline-block;
  background: url("../images/tab2-x.svg") no-repeat;
  background-size: 100%;
}
.tab-container2__tabs .tab-container2__title.active {
  border-bottom: 2px solid var(--navy-500);
}
.tab-container2__tabs .tab-container2__title.active h5 {
  color: var(--navy-500);
}
.tab-container2__tabs .tab-container2__title.active .tab-container2__tab-close {
  width: 16px;
  height: 16px;
  display: inline-block;
  background: url("../images/tab2--active-x.svg") no-repeat;
  background-size: 100%;
}
/* 占쎈툡占쎈땾 占쎈ご占쎈뻻 */
.required {
  color: var(--red-500);
  padding-left: 4px;
}

/* 筌ｋ똾寃�, 占쎌뵬占쎈탵占쎌궎 */
input[type="checkbox"] {
  display: none;
}

.hdrcell input[type="checkbox"] {
  display: initial;
}

input[type="checkbox"] + label {
  display: inline-block;
  padding-left: 24px;
  font-size: 15px;
  background: url("../images/checkbox--normal.svg") no-repeat left center;
  background-size: 16px;
  white-space: nowrap;
}

input[type="checkbox"]:checked + label {
  background: url("../images/checkbox--checked.svg") no-repeat left center;
  background-size: 16px;
}

.req {
  margin-right: 12px;
}

/* 占쎈펶占쎈뻼 占쎌삂占쎄쉐 */

.box-item {
  position: relative;
  border: 1px solid var(--gray-400);
  background: var(--gray-200);
  border-radius: 4px;
  padding: 4px 6px;
  transition: border 0.2s ease;
}

.tab-container__contents .box-item:first-child {
  margin-top: 0 !important;
}

.box-item:last-child {
  margin-bottom: 0 !important;
}

/* 占쎈펶占쎈뻼 占쎌깏占쏙옙 占쎄틙 �빊遺쏙옙�몴占� 占쎌맄占쎈립 �룯�뜃由� 占쎌넅筌롳옙 */
.initial-screen {
  width: 100%;
  background: var(--gray-200);
  padding: 12px 12px;
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--gray-400),
      var(--gray-400) 8px,
      transparent 8px,
      transparent 12px
    ),
    repeating-linear-gradient(
      180deg,
      var(--gray-400),
      var(--gray-400) 8px,
      transparent 8px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      var(--gray-400),
      var(--gray-400) 8px,
      transparent 8px,
      transparent 12px
    ),
    repeating-linear-gradient(
      180deg,
      var(--gray-400),
      var(--gray-400) 8px,
      transparent 8px,
      transparent 12px
    );
  background-position:
    left top,
    right top,
    left bottom,
    left top;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size:
    100% 1px,
    1px 100%,
    100% 1px,
    1px 100%;
  border-radius: 4px;
  padding: 24px 0;

  border: none;
  text-align: center;
}

.field-name,
.field-type,
.field-chk,
.field-options,
.field-guide,
.field-score,
.field-scoreType {
  display: flex;
}

.field-guide {
  width: 100%;
}

.field-name label.input-label,
.field-type label.input-label,
.field-chk label.input-label,
.field-options label.input-label,
.field-guide label.input-label,
.field-score .input-label,
.field-lineCount .input-label,
.field-scoreType .input-label,
.field-guide .input-label,
.field-scoreType .input-label {
  min-width: 70px;
  color: var(--navy-900); /* #0F2237 */
  font-weight: 500;
  font-size: 14px;
  height: 27px;
  line-height: 27px;
  white-space: nowrap;
}

.input-label {
  font-weight: 500;
  white-space: nowrap;
}

.layout-2col,
.layout-3col,
.layout-4col,
.layout-table {
  width: 100%;
  display: flex;
  gap: 16px;
  position: relative;
  align-items: center;
}

.layout-table {
  padding: 4px 0;
  flex-direction: column;
}

.layout-table:first-child {
  padding-top: 4px;
}

.layout-table:last-child {
  padding-bottom: 4px;
}

.layout-2col > * {
  width: 50%;
}

/********************** 占쎈뻿筌ｏ옙占쎄퐣 占쎈펶占쎈뻼 占쎌삂占쎄쉐 **********************/

.layout-3col .field-name {
  width: 40%;
}

/* .field-group .field-name {
  width: calc(40% - 2px);
} */

.field-group.group3depth .field-name {
  width: calc(40% - 4px);
}

.field-group.group4depth .field-name {
  width: calc(40% - 6px);
}

.field-group.group5depth .field-name {
  width: calc(40% - 8px);
}

.layout-3col .field-type {
  width: 230px;
  min-width: 230px;
}

.field-lineCount {
  padding: 0 10px;
}

.field-lineCount .input-label {
  margin-right: 4px;
}

.field-lineCount input[type="text"] {
  width: 48px;
}

.field-scoreType {
  width: 190px;
}
.field-scoreType .input-label {
  min-width: 90px;
}

.field-scoreType select {
  min-width: 90px;
}

.field-group .field-type {
  width: 230px;
  min-width: 230px;
}

.layout-3col .field-type.widthBtn select {
  margin-right: 4px;
}

.layout-3col .field-chk {
  width: 120px;
}

.field-group .field-chk {
  width: 120px;
}

.field-group.depth3 .field-guide {
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--gray-400),
      var(--gray-400) 8px,
      transparent 8px,
      transparent 12px
    ),
    repeating-linear-gradient(
      180deg,
      var(--gray-400),
      var(--gray-400) 8px,
      transparent 8px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      var(--gray-400),
      var(--gray-400) 8px,
      transparent 8px,
      transparent 12px
    ),
    repeating-linear-gradient(
      180deg,
      var(--gray-400),
      var(--gray-400) 8px,
      transparent 8px,
      transparent 12px
    );
  background-position:
    left top,
    right top,
    left bottom,
    left top;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size:
    100% 1px,
    1px 100%,
    100% 1px,
    1px 100%;
}

.field-guide {
  display: flex;
}

/********************** 獄쏄퀣�젎 占쎈펶占쎈뻼 占쎌삂占쎄쉐 **********************/

.layout-4col .field-name {
  width: 40%;
  min-width: 40%;
}

.field-group .layout-score .field-name {
  width: calc(40% - 47px);
  min-width: calc(40% - 47px);
}

.layout-4col .field-type {
  width: 230px;
  min-width: 230px;
}

.field-group .layout-score .field-type {
  width: 230px;
  min-width: 230px;
}

@media (max-width: 810px) {
  /* 占쎌넅筌롫똻�뵠 768px 占쎌뵠占쎈릭占쎌뵬 占쎈르 占쎌읅占쎌뒠 */
  .layout-4col .field-type {
    width: 200px;
    min-width: 200px;
  }

  .field-group .layout-score .field-type {
    width: 200px;
    min-width: 200px;
  }
}

.layout-4col .field-score {
  width: 110px;
}

.field-group .layout-score .field-score {
  width: 110px;
}

.field-score .input-label {
  min-width: 40px;
}

.field-score input[type="text"] {
  width: 48px;
}

.field-score span {
  font-size: 15px;
  vertical-align: middle;
  line-height: 28px;
}

.field-score span b {
  color: var(--blue-500);
  font-weight: 600;
}

.field-options {
  display: flex;
}
.field-options .field-options__group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}
.field-options__group .field-options__item {
  width: calc(25% - 4px);
  display: flex;
  gap: 4px;
  align-items: center;
}

.field-group.group2depth.eval .field-name:first-child {
  width: 40%;
}

.field-group.group2depth.eval > div {
  margin-bottom: 8px;
}
.field-group.group2depth.eval > div:last-child {
  margin-bottom: 0;
}

.box-x {
  width: 24px;
  height: 24px;
  background: url("../images/box-x.svg") no-repeat;
  background-size: 24px;
}

.delete {
  width: 20px;
  height: 20px;
  background: url("../images/delete.svg") no-repeat;
  background-size: 100%;
}

.delete-item {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.field-group {
  width: 100%;
  padding-left: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: border-color 0.15s ease;
}

.box-item:focus-within {
  border-color: var(--navy-500);
  border-width: 1px;
}

/* .field-group:focus-within {
  border-color: var(--navy-500);
  border-width: 1px;
} */

/* .field-group:focus-within:has(.field-group:focus-within) {
  border-color: transparent;
} */

/* 占쎈릭占쎌맄占쎈퉮筌뤴뫗�벥 占쎌젎占쎄퐨 占쎈�믭옙紐®뵳占� 筌띾슢諭얏묾占� */
.field-group > div {
  width: 100%;
  background: var(--gray-200); /* #F3F4F6 */
  padding: 4px 12px;
  border: none;
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--gray-400),
      var(--gray-400) 8px,
      transparent 8px,
      transparent 12px
    ),
    repeating-linear-gradient(
      180deg,
      var(--gray-400),
      var(--gray-400) 8px,
      transparent 8px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      var(--gray-400),
      var(--gray-400) 8px,
      transparent 8px,
      transparent 12px
    ),
    repeating-linear-gradient(
      180deg,
      var(--gray-400),
      var(--gray-400) 8px,
      transparent 8px,
      transparent 12px
    );

  background-position:
    left top,
    right top,
    left bottom,
    left top;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size:
    100% 1px,
    1px 100%,
    100% 1px,
    1px 100%;
  border-radius: 4px;
}

.field-group.column-box > div,
.field-group.group2depth > div,
.field-group.group4depth > div {
  background-color: #fff;
}

.tab2depth,
.tab3depth {
  margin: 0 8px 8px;
}

.field-group .field-name .input-label {
  min-width: 58px;
}

header.page-title.withTable {
  flex-direction: column;
}

.withTable__div {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

header.page-title.withTable table {
  margin-top: 20px;
  border-left: 1px solid var(--blue-200); /* #D6E5FF */
}
header.page-title.withTable th,
header.page-title.withTable td {
  min-height: 40px;
  vertical-align: middle;
  font-size: 15px;
  padding: 8px 16px;
  text-align: left;
}
header.page-title.withTable th {
  border-top: 1px solid var(--blue-200);
  border-right: 1px solid var(--blue-200);
  font-weight: 500;
  color: var(--blue-700); /* #276AC0 */
  background: var(--blue-50); /* #F5F9FF */
  width: 20%;
}
header.page-title.withTable td {
  border-top: 1px solid var(--gray-300);
  border-right: 1px solid var(--gray-300);
  color: var(--navy-900);
}
header.page-title.withTable tr:last-child th {
  border-bottom: 1px solid var(--blue-200);
}
header.page-title.withTable tr:last-child td {
  border-bottom: 1px solid var(--gray-300);
}

b {
  font-weight: 600;
}

.split-screen {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 768px;
  height: calc(100vh - 184px);
}

.split-screen__section1 .split-screen__div {
  border: 1px solid var(--gray-400);
}

.split-screen__section1 {
  width: 30%;
  min-width: 240px;
  display: flex;
  min-height: 0;
  max-height: 80vh;
  flex-direction: column;
}

.split-screen__section2 {
  flex: 1;
  min-height: 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.split-screen__section2 .scroll-area {
  /* overflow-y: auto; */
}

.split-screen__section2.no-scroll {
  overflow-y: visible;
}

.split-screen__section2 .tab-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.split-screen__section2 .tab-container__tabs {
  flex: 0 0 40px;
}

.split-screen__section2 .tab-container__contents {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.split-screen__section2 > .select-wrap {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--gray-400);
}

.select-wrap select {
  height: 40px;
  margin-bottom: 4px;
  font-weight: 600;
}

.evaluation-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-500);
  display: inline-block;
  margin-bottom: 8px;
}
.evaluation-title img {
  width: 16px;
  vertical-align: middle;
  margin-left: 4px;
}

/* split-screen__section0 */

.split-screen__section0 > .select-wrap {
  display: flex;
  height: 40px;
  align-items: center;
  background: #fff;
  margin-bottom: 4px;
}

.split-screen__section0 ul {
  border: 1px solid var(--gray-300);
}

.eval-point {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eval-point span {
  font-size: 14px;
}

.eval-point input[type="text"] {
  width: 40px;
}

small {
  display: inline-block;
  font-size: 14px;
  color: var(--gray-500); /* #9CA3AF */
}

.evaluation-list li {
  border-bottom: 1px solid var(--gray-300);
  background: var(--gray-100);
}

.score-summary-wrap {
  position: sticky;
  bottom: 0;
}

.score-summary {
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: var(--blue-100);
  border: 1px solid var(--blue-300);
  border-radius: 4px;
  text-align: right;
  padding: 0 12px;
  margin-top: 8px;
}
.score-summary span {
  position: relative;
  display: inline-block;
  color: var(--navy-800); /* #152E49 */
  margin-right: 16px;
}
.score-summary span::after {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translate(0, -50%);
  width: 1px;
  height: 24%;
  background: var(--blue-300); /* #AECBFF */
  content: "";
}
.score-summary span:last-child {
  margin-right: 0;
}
.score-summary span:last-child::after {
  background: none;
}
.score-summary span b {
  color: var(--navy-500);
}

.SelectionGroup {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 4px;
  row-gap: 4px;
  width: 100%;
}

/* 1. 占쎄맒占쎌맄 域밸챶竊� �뚢뫂�믭옙�뵠占쎄섐: 占쎌읈筌ｏ옙 占쎄쉭嚥∽옙 占쎌젎占쎄퐨 �꽴占썹뵳占� */
.box-item.group-form {
  position: relative;
  padding-left: 12px; /* 揶쏉옙嚥≪뮇苑묕옙�뵠 域밸챶�젻筌욑옙 占쎌뇢筌잞옙 占쎈연獄쏉옙 占쎌넇癰귨옙 */
}

.box-item > .group-form::before {
  content: "";
  position: absolute;
  left: 4px; /* �겫占쏙쭗�뫁�벥 padding-left 筌띾슦寃� 占쎌뇢筌잛럩�몵嚥∽옙 獄쏉옙占쎈선占쎄퐣 占쎄쉭嚥≪뮇苑묕옙肉� 獄쏉옙筌∽옙 */
  top: 12px; /* 占쎈릭占쎌맄 占쎈퉮筌륅옙 占쎌뵬甕겸뫁�벥 餓λ쵐釉� 占쎈꼥占쎌뵠 */
  width: 24px; /* 揶쏉옙嚥∽옙 占쎌젎占쎄퐨占쎌벥 疫뀀챷�뵠 */
  height: 2px;
  background-image: linear-gradient(
    to right,
    var(--gray-400) 33%,
    rgba(255, 255, 255, 0) 0%
  );
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

.attached-form-box {
  background: #fff;
  border: 1px solid var(--gray-400);
  padding: 2px 12px;
  border-radius: 4px;
  min-height: 60px;
  max-height: 200px;
  overflow-y: auto;
}

.attached-form-box > li {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--gray-400);
  padding: 8px 0;
}

.attached-form-box > li:last-child {
  border-bottom: 0;
}

.attached-form-box img {
  width: 18px;
}
.attached-form-box .file-name {
  color: var(--gray-800);
  font-weight: 500;
  color: var(--gray-900);
}

.attached-form-box .file-size {
  font-size: 14px;
  color: var(--gray-500);
}

.attached-form-box .attached-del {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: url("../images/attached-del.svg") no-repeat center;
  background-size: 16px;
  margin-left: 2px;
}

.attached-form-box .attached-del:hover {
  background: url("../images/attached-del--hover.svg") no-repeat center;
  background-size: 16px;
}

table.grid-form {
  border-left: 0;
  border-right: 0;
  background: #fff;
}

table.grid-form th {
  background: var(--blue-50);
  border-top: 1px solid var(--blue-300);
  border-bottom: 1px solid var(--blue-300);
  border-left: 0;
  border-right: 0;
  color: var(--blue-700);
  font-size: 15px;
  font-weight: 600;
}

table.grid-form td,
table.grid-form th {
  height: 40px;
  min-width: 40px;
  vertical-align: middle;
}

table.grid-form td {
  text-align: center;
  vertical-align: middle;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--gray-400);
  font-size: 15px;
  color: var(--gray-900);
  padding: 2px 4px;
}

table.grid-form tr:hover {
  background-color: #fff9e5 !important;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

table.grid-form td.center,
table.grid-form th.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/************** 占쎈뙅占쎈샍 **************/
.tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  vertical-align: middle;
  z-index: 99;
  margin-left: 4px;
}

/* 1. 占쎈뙅占쎈샍 癰귣챷猿�: 占쎈툡占쎌뵠�굜占� 占쎌맄嚥∽옙 獄쏄퀣�뒄 */
.tooltip {
  display: none;
  position: absolute;
  /* 占쎈툡占쎌뵠�굜占�(wrapper)占쎌벥 占쎄맒占쎈뼊占쎈퓠占쎄퐣 10px 占쎈쐭 占쎌맄嚥∽옙 占쎌뱽占쏙옙 */
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);

  padding: 8px 12px;
  background-color: var(--gray-800, #333);
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  z-index: 1000;
  width: max-content;
  max-width: 300px;
  line-height: 1.4;
}

/* 2. 占쎌넅占쎄땀占쎈ご: 占쎈뙅占쎈샍 獄쏅벡�뮞 '占쎈툡占쎌삋'占쎈퓠 �겫�늿堉깍옙苑� 占쎈툡占쎌뵠�굜占�(占쎈툡占쎌삋)占쎌뱽 揶쏉옙�뵳�뗪땀 */
.tooltip-top::after {
  content: "";
  position: absolute;
  /* 獄쏅벡�뮞 獄쏅뗀�뼅占쎈퓠 �겫�늿�뿫 */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);

  width: 0;
  height: 0;
  /* 占쎈툡占쎌삋�몴占� 揶쏉옙�뵳�뗪텕占쎈뮉 占쎄땔揶쏄낱�굨 (border-top 占쎄텢占쎌뒠) */
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 6px solid var(--gray-800, #333) !important;
  border-bottom: none !important;

  display: block !important;
}

.tooltip-wrapper:hover .tooltip {
  display: block;
}

.box-item.bg--White {
  background: #fff;
}

/*************************** �굜遺얠컲占쎈뱜 *********************************/

.comment-form ul {
  margin-bottom: 20px;
}

.comment-form li {
  border-bottom: 1px solid var(--gray-300);
  padding: 16px 4px;
}

.comment-form li:first-child {
  border-top: 1px solid var(--gray-300);
}

.comment-form__info {
  display: flex;
  gap: 4px;
  justify-content: space-between;
  margin-bottom: 4px;
}

.comment-form__info > div:first-child {
  display: flex;
  gap: 10px;
  align-items: center;
}

.comment-form__info > div:last-child {
  position: relative;
}

.comment-form__comment {
  color: var(--gray-900);
  font-size: 15px;
}

.comment-form__org-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-900);
}

.comment-form__writer,
.comment-form__date {
  font-size: 14px;
  color: var(--gray-600);
  font-weight: 400;
  position: relative;
  margin-right: -4px;
}

.comment-form__writer img,
.comment-form__date img {
  width: 14px;
  vertical-align: middle;
  margin-top: -3px;
}

.comment-form__more {
  width: 12px;
  height: 12px;
  background: url("../images/comment-form__more.svg") no-repeat center;
  background-size: 16px;
}

.comment-form__menu {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  width: 70px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  /* display: none; */
  position: absolute;
  top: 0;
  right: 16px;
}

.comment-form .comment-form__menu > div {
  padding: 6px 12px;
  text-align: center;
  border-bottom: 1px solid var(--gray-300);
  cursor: pointer;
}

.comment-form .comment-form__menu div:hover {
  background: var(--gray-200);
}

.comment-form .comment-form__menu div:last-child {
  border-bottom: 0;
}

.comment-form .comment-form__menu div button {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 14px;
}

.comment-form__input {
  display: flex;
  gap: 8px;
}

.comment-form__input button {
  width: 100px;
  height: auto;
}

/* 占쎈뻿筌ｏ옙占쎄퐣 占쎈즸揶쏉옙占쎌쁽 */
.eval-reviewer {
  align-items: flex-start;
}

.eval-reviewer > * {
  min-height: 200px;
  height: 300px;
  overflow-y: auto;
}

.eval-reviewer .box-item.grid-wrap {
  padding: 0;
  border-top: 1px solid var(--blue-300);
  border-radius: 2px;
}

.eval-reviewer .box-item.grid-wrap .grid-form th {
  border-top: none;
}

.eval-reviewer .box-item.grid-wrap .grid-form tr:last-child td {
  border-bottom: none;
}

/* 占쎈땾占쎈쇇 占쎈즸揶쏉옙 占쎌삂占쎄쉐 */
.eval-split-screen {
  display: flex;
  gap: 8px;
  height: stretch;
}

.split-screen .performance-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--gray-400);
}

.split-screen .performance-list .performance-list__filter {
  background: var(--gray-200);
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-right: none;
  height: 100px;
}

.performance-list__filter input {
  flex: 1;
  min-width: 0;
}
.split-screen .performance-list__items {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.split-screen .performance-list__items > li {
  padding: 8px;
  border-bottom: 1px solid var(--gray-300);
  position: relative;
  cursor: pointer;
}

.split-screen .performance-list__items > li.active {
  background: #fff9e5;
}
.split-screen .performance-list__items span {
  display: inline-block;
  font-size: 14px;
  color: var(--gray-800);
}
.split-screen .performance-list__items span img {
  width: 16px;
  vertical-align: middle;
  margin-right: 6px;
}
.split-screen .performance-list__items .performance-list__items__date {
}
.split-screen .performance-list__items .performance-list__items__text {
  font-weight: 700;
  color: var(--navy-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.performance-list__items__info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.performance-list__items__info > div {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* 날짜: 줄바꿈 방지, 내용만큼 */
.performance-list__items__info > div:nth-child(1) {
  flex: 0 0 auto;
}

/* 시간: 남는 공간 최대 사용 */
.performance-list__items__info > div:nth-child(2) {
  flex: 0 1 auto;
  min-width: 0;
}

/* 인원: 내용만큼 */
.performance-list__items__info > div:nth-child(3) {
  flex: 1 1 auto;
  min-width: 0;
}

.info_date {
  white-space: nowrap;
}

.info_time,
.info_people {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info_time {
  display: block;
  flex: 1;
}

.info_people {
  display: block;
  max-width: 120px;
}
.split-screen .performance-list__items .performance-list__items__badge {
  border-radius: 2px;
  padding: 0 2px;
  height: 18px;
  line-height: 17px;
  display: inline-block;
  font-size: 12px;
}
.split-screen
  .performance-list__items
  .performance-list__items__badge.mentoring {
  background: #dff3ef;
  color: #0e755f;
  border: 1px solid #96d1c5;
}
.split-screen .performance-list__items .performance-list__items__badge.meeting {
  background: #e4efff;
  color: #1f5799;
  border: 1px solid #bed1ed;
}
.split-screen
  .performance-list__items
  .performance-list__items__badge.counseling {
  background: #ffecf0;
  color: #ca3754;
  border: 1px solid #f7d1d9;
}

.eval-split-screen .performance__view {
  width: 100%;
}

/* 占쎈퉮筌륅옙 占쎈떄占쎄퐣 癰귨옙野껓옙 */
.reorder-controls {
  position: absolute;
  top: 0;
  right: -5%;
  z-index: 99;
  height: 24px;
  pointer-events: none;
}

.reorder-controls.inTab {
  right: calc(-6% + 4px);
}

.reorder-controls button {
  width: 24px;
  height: 24px;
  padding: 0;
  pointer-events: auto;
}

.reorder-controls button:first-child {
  margin-right: 6px;
  background-image: url("../images/redorder-top.svg");
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center;
}

.reorder-controls button:first-child:hover {
  background-image: url("../images/redorder-top--hover.svg");
  background-color: var(--navy-500);
}

.reorder-controls button:last-child {
  background: url("../images/redorder-down.svg") no-repeat center;
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center;
}

.reorder-controls button:last-child:hover {
  background-image: url("../images/redorder-down--hover.svg");
  background-color: var(--navy-500);
}

.reorder-controls.app {
}

/* 域밸챶�봺占쎈굡 獄쏅쵐肉� select 獄쏅벡�뮞 */
.p-select-list-container .p-select-option.p-select-option-selected.p-focus {
  background: var(--gray-200);
  color: var(--blue-500);
}

.p-select-list-container .p-select-option.p-select-option-selected {
  background: none;
  color: var(--blue-500);
}

/** survey **/

.field-options {
  width: 100%;
}

.field-options > .field-options__group {
  width: 100%;
}
.field-options.survey .field-options__group {
  flex-direction: column;
}

.field-options.survey .field-options__group > div {
  width: 100%;
}

.survey-graphic {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.survey-graphic span {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  flex: 1;
}

.progress-text {
  white-space: nowrap;
}
.progress-text b {
  color: var(--blue-500);
  font-weight: 600;
}

/* 占쎌읈筌ｏ옙 �뚢뫂�믭옙�뵠占쎄섐 */
.progress-container {
  width: 100%;
  height: 6px;
  background-color: var(--blue-200);
  border-radius: 20px;
  overflow: hidden;
}

/* 筌욊쑵六양몴占� 獄쏉옙 */
.progress-bar {
  height: 6px;
  width: 50%;
  background-color: var(--blue-500);
  border-radius: 20px;
}

.box-item.survey-item {
  margin-bottom: 4px;
  padding: 8px 12px;
}

.SelectionGroup.survey-group {
  display: flex;
  flex-direction: column;
}

.survey-group input[type="radio"] + label {
  font-weight: 300;
}

.SelectionGroup label {
  white-space: nowrap;
}

.SelectionGroup.survey-group .option-other {
  display: flex;
  align-items: center;
}

/* 占쎌뵬占쎈탵占쎌궎 */
input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  display: inline-block;
  padding-left: 24px;
  font-size: 15px;
  background: url("../../img/mon/Radio--normal.svg") no-repeat left center;
  background-size: 16px;
  white-space: nowrap;
}

input[type="radio"]:checked + label {
  background: url("../../img/mon/Radio--selected.svg") no-repeat left center;
  background-size: 16px;
}

input[type="radio"]:checked:disabled + label {
  background: url("../../img/mon/Radio--selected-disabled.svg") no-repeat left
    center;
  background-size: 16px;
}

/* �굜遺얠컲占쎈뱜 占쎈땾占쎌젟 �뿆�뫁�꺖*/
.edit-cancel {
  font-size: 15px;
  color: var(--gray-700);
}

/* 野껓옙占쎄퉳占쎈선 占쎌뿯占쎌젾 */
.search-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 12px 0 16px;
}

.search-area {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 4px;
}

.search-area input[type="text"] {
  width: 240px;
  min-width: 240px;
}

.search-button {
  border-radius: 4px;
  background: var(--navy-500);
  color: #fff;
  white-space: nowrap;
  font-size: 15px;
  text-align: center;
  min-width: 52px;
  padding: 0 8px;
  height: 28px;
}

.search-wrap .search-count {
  color: var(--gray-800);
  font-size: 15px;
  position: absolute;
  right: 0;
}

.search-wrap .search-count b {
  font-weight: 600;
  color: var(--red-500);
}

/* 筌욑옙占쎈즲占쎌읈�눧紐꾩벥 筌〓챷肉э옙�뵥占쎌젾 */

.mentorMember-box-group,
.ResidentMember-box-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.mentorMember-box,
.ResidentMember-box {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 8px;
}

.mentorMember-box p:last-child,
.ResidentMember-box p:last-child {
  display: flex;
  flex-direction: column;
}

.ResidentMember-box {
  cursor: pointer;
}

.mentorMember-box .name,
.ResidentMember-box .name {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.mentorMember-box .hospName,
.ResidentMember-box .hospName {
  color: var(--gray-900);
  font-size: 14px;
  line-height: 1.4;
}

/* .mentorMember-box .hospName::after {
  content: '';
  width: 1px;
  height: 60%;
  background: var(--gray-500);
  position: absolute;
  right: -8px;
  top: 50%;

  transform: translate(-50%, -50%);
} */

.mentorMember-box .career,
.ResidentMember-box .date {
  color: var(--gray-700);
  font-size: 14px;
  display: inline-block;
}

/* 筌욑옙占쎈즲占쎌읈�눧紐꾩벥, 占쎌읈�⑤벊�벥 獄�猿뗰옙 �⑤벏�꽰  */
.mentorMember-badege,
.ResidentMember-badege {
  border-radius: 2px;
  padding: 0 4px;
  height: 36px;
  font-size: 14px;
  white-space: nowrap;
}
/* 筌욑옙占쎈즲占쎌읈�눧紐꾩벥 �뤃癒��몓占쎌읈占쎈뼖 獄�猿뗰옙 */
.mentorMember-badege.eduStaff,
.ResidentMember-badege.R1 {
  background: var(--blue-100);
  color: var(--blue-500);
}

.ResidentMember-badege.R2 {
  background: var(--green-100);
  color: var(--green-500);
}

.mentorMember-badege.mainChief,
.ResidentMember-badege.R3 {
  background: #ffefe5;
  color: #eb721d;
}

.mentorMember-badege.subChief,
.ResidentMember-badege.R4 {
  background: #f5f0ff;
  color: #8b5cf6;
}

/* 占쎌읈�⑤벊�벥 筌〓챷肉э옙�뵥占쎌젾 �뤃�딄쉐 */
.ResidentMember-split {
  display: flex;
  gap: 8px;
}

.box-item.ResidentMember_filter-wrap {
  width: 30%;
}

.box-item.ResidentMember_filter-wrap + .box-item {
  width: 70%;
  min-height: 500px;
  max-height: 700px;
  overflow-y: auto;
}

.ResidentMember-split .select-div {
  display: flex;
  gap: 4px;
}
.ResidentMember_filter-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.resiYear-checkboxes-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ResidentMember-box > p:first-child {
  position: relative;
}
.ResidentMember-box img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  position: absolute;
  right: 4px;
  display: none;
}

.ResidentMember-box.selected {
  border: 2px solid var(--navy-500);
}

.ResidentMember-box.selected img {
  display: inline-block;
}

/* 占쎄텢占쎈씜�꽴占썹뵳占� */
.how-to-use,
.brief {
  width: 100%;
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: 4px;
  padding: 16px 12px;
  display: flex;
  gap: 4px;
  margin-top: 12px;
}

.how-to-use strong {
  font-size: 15px;
  color: var(--navy-500);
  font-weight: 600;
}

.how-to-use li {
  font-size: 15px;
  color: var(--gray-900);
}

.box-item.business-management-filter {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.box-item.business-management-filter > div {
  display: flex;
  align-items: center;
}

.box-item.business-management-filter > div > span {
  display: inline-flex;
  align-items: center;
  width: 50%;
}

.box-item.business-management-filter label {
  white-space: nowrap;
  margin-right: 8px;
}

/* �겫�뜄�뵺占쎌뵠 占쎌뿳占쎈뮉 占쎈꺖占쎌젫筌륅옙(甕곌쑵�뱣) */
.main__bullet-title.button {
  display: flex;
  justify-content: space-between;
}

.main__bullet-title-button-wrap {
  display: flex;
  gap: 4px;
}

button.excel-download img {
  width: 14px;
  padding-bottom: 2px;
}

.router-link-wrap {
  position: relative;
}

.router-link-wrap a {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: var(--navy-300);
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  padding: 0 12px;
  gap: 12px;
  cursor: pointer;
  color: #fff;
  min-width: 100px;
  text-align: center;
}

.router-link-wrap .active a {
  background: var(--navy-500);
}

.router-link-contents {
  border: 1px solid var(--gray-500);
  background: #fff;
  border-radius: 4px;
  padding: 8px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-top-left-radius: 0;
}

/* 甕곌쑵�뱣 占쎄틙 */
.tab-wrap > div:not(.tab-container__contents) {
  /*   display: flex; */
  justify-content: space-between;
  align-items: center;
}

.tab-wrap .tab-control {
  position: initial;
  transform: initial;
}
.tabButtons {
  display: flex;
  gap: 1px;
}
.tabButtons button {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: var(--navy-300);
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
  padding: 0 12px;
  gap: 12px;
  cursor: pointer;
  color: #fff;
  min-width: 100px;
  text-align: center;
}

.tabButtons button.active {
  background: var(--navy-500);
}

.tabContents {
  border: 1px solid var(--gray-500);
  background: #fff;
  border-radius: 4px;
  padding: 8px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-top-left-radius: 0;
}

.search-filter {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 36px;
  height: 60px;
  align-items: center;
}

.category-summary {
  border: 1px solid var(--blue-300);
  background: #f0f5fd;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  gap: 56px;
  margin-bottom: 8px;
}

.category-summary > div {
  text-align: center;
}

.category-summary p {
  color: var(--gray-700);
}

.category-summary b {
  color: var(--gray-800);
  font-size: 17px;
}

.category-add {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.category-add button {
  flex: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-add-add-img {
  width: 18px;
  margin-right: 4px;
}

/* datepicker */
.p-datepicker-panel {
  width: 160px !important;
}
.p-datepicker-month-view {
  width: 130px;
}

.brief {
  display: flex;
  flex-direction: column;
}

.brief li {
  position: relative;
  padding-left: 14px;
}

.brief li::before {
  position: absolute;
  top: 12px;
  left: 4px;
  width: 4px;
  height: 4px;
  background: var(--navy-500);

  content: "";
}

.brief h5 {
  font-size: 18px;
  font-weight: 600;
  color: var(--blue-900);
  margin-bottom: 4px;
}

.BusinessInfo span {
  margin-right: 24px;
  font-size: 16px;
  position: relative;
  color: var(--gray-800);
}

.BusinessInfo span::after {
  position: absolute;
  top: 50%;
  right: -12px;
  width: 1px;
  height: 60%;
  background: var(--gray-500);
  transform: translate(0, -50%);
  content: "";
}

.BusinessInfo span:last-child::after {
  display: none;
}

.BusinessInfo span strong {
  font-size: 18px;
}

.BusinessPurpose {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.BusinessPurpose p {
  color: var(--gray-900);
  max-width: calc(100% - 30px);
  min-height: 1.5em;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.BusinessPurpose p.expanded {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.more {
  display: none;
  flex: 0 0 24px;
}

.more img {
  transition: transform 0.3s ease;
}

.more.active img {
  transform: rotate(180deg);
}

/* dashboard ver2*/

.dashboard-wrap {
  border: 1px solid var(--navy-300);
  padding: 20px;
}

.dashboard-wrap__header h1 {
  font-size: 20px;
  font-weight: 700;
}

.dashboard-wrap__header h1 + p {
  font-size: 15px;
  color: var(--gray-800);
}

.dashboard-wrap__contents {
  display: flex;
}

.dashboard-wrap__contents .box {
  border: 1px solid var(--gray-300);
  padding: 12px 8px;
  border-radius: 2px;
}

.dashboard-wrap__contents .box h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.dashboard-wrap__contents .progress-status {
  display: flex;
  justify-content: space-between;
}

.dashboard-wrap__contents .progress-status span {
  color: var(--gray-600);
  font-size: 14px;
}

.dashboard-wrap__contents .progress-status strong {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dashboard-wrap__contents .progress.done + .progress-status strong {
  color: var(--blue-500);
  font-weight: 600;
}

.dashboard-wrap__contents .progress.doing + .progress-status strong {
  color: var(--green-600);
  font-weight: 600;
}

.dashboard-wrap__contents .progress.toDo + .progress-status strong {
  color: var(--gray-600);
  font-weight: 600;
}

.progress-status__circle {
  width: 4px;
  height: 4px;
  border-radius: 999px;
}

.dashboard-wrap__contents
  .progress.done
  + .progress-status
  strong
  .progress-status__circle {
  background: var(--blue-500);
}

.dashboard-wrap__contents
  .progress.doing
  + .progress-status
  strong
  .progress-status__circle {
  background: var(--green-600);
  animation: blinkCircle 1.2s ease-in-out infinite;
}

@keyframes blinkCircle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.dashboard-wrap__contents
  .progress.toDo
  + .progress-status
  strong
  .progress-status__circle {
  background: var(--gray-600);
}

.dashboard-wrap__contents .icon {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 20px;
  margin-bottom: 12px;
}

.dashboard-wrap__contents .icon.done {
  background-image: url("../images/dashboard-done.svg");
}

.dashboard-wrap__contents .icon.doing {
  background-image: url("../images/dashboard-doing.svg");
}

.dashboard-wrap__contents .icon.toDo {
  background-image: url("../images/dashboard-toDo.svg");
}

.dashboard-wrap__contents .progress {
  width: 240px;
  height: 4px;
  margin-bottom: 4px;
  background: var(--green-200);
}

.dashboard-wrap__contents .progress__bar {
  display: block;
  height: 100%;
  width: 0;
  transition:
    width 0.3s ease,
    background-color 0.3s ease;
}

/* done */
.dashboard-wrap__contents .progress.done .progress__bar {
  width: 100%;
  background: linear-gradient(to right, #41b4f2, #368fff);
}

/* doing */
.dashboard-wrap__contents .progress.doing .progress__bar {
  width: 70%;
  background: linear-gradient(90deg, #32c4b7 0%, #2c8aff 50%, #32c4b7 100%);
  background-size: 200% 100%;
  background-repeat: repeat;
  animation: flowLoop 2.5s linear infinite;
}

@keyframes flowLoop {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* todo */
.dashboard-wrap__contents .progress.toDo .progress__bar {
  width: 100%;
  background-color: var(--gray-400);
}

.dashboard-wrap__contents button {
  width: 100%;
  height: 36px;
  font-size: 15px;
  font-weight: 600;
}

.dashboard-wrap__contents .progress.done ~ button {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  color: var(--blue-500);
}

.dashboard-wrap__contents .progress.doing ~ button {
  background: var(--green-600);
  color: #fff;
}

.dashboard-wrap__contents .progress.toDo ~ button {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  color: var(--blue-500);
}

.dashboard-wrap__contents .summary {
  width: 100%;
  background: #fafafa;
}

.dashboard-wrap__contents .summary li {
  padding: 6px;
  display: flex;
  justify-content: space-between;
}

.dashboard-wrap__contents .summary li span {
  padding-left: 18px;
  color: var(--gray-800);
  font-size: 15px;
}

.dashboard-wrap__contents
  .progress.done
  ~ ul.summary
  li.dashboard-building
  span:first-child {
  background: url("../images/dashboard-building--blue.svg") no-repeat;
  background-position: 0 center;
  background-size: 16px;
}

.dashboard-wrap__contents
  .progress.doing
  ~ ul.summary
  li.dashboard-building
  span:first-child {
  background: url("../images/dashboard-building--green.svg") no-repeat;
  background-position: 0 center;
  background-size: 16px;
}

.dashboard-wrap__contents
  .progress.toDo
  ~ ul.summary
  li.dashboard-building
  span:first-child {
  background: url("../images/dashboard-building--gray.svg") no-repeat;
  background-position: 0 center;
  background-size: 16px;
}

/********************* 占쎌돳占쎌뜚揶쏉옙占쎌뿯 *********************/

/* �븣由쇱갹 */
#wrap_notice {
  min-width: 400px;
  max-width: 600px;
  max-height: 500px;
  position: fixed;
  background: #fff;
  border: 1px solid var(--gray-500);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

#wrap_notice hr {
  margin: 0;
}

#header_notice {
  padding: 12px 16px 0;
}

#header_notice + hr {
  display: none;
}

#header_notice h2 {
  font-size: 14px;
  color: var(--gray-900);
  font-weight: 600;
  padding-bottom: 8px;
}

#content_notice {
  font-size: 14px;
  color: var(--gray-900);
  padding: 0 8px 12px 16px;
}

#content_notice div {
  max-height: 300px;
  overflow-y: auto;
  border-top: 1px solid var(--gray-400);
  padding: 12px 16px 0 0;
}

.btn_confirm .glyphicon-ok {
  display: none;
}

.ac {
  text-align: center !important;
}
.mt10 {
  margin-top: 10px !important;
}

.tabButtons {
  display: flex;
  gap: 2px;
}

.tab-btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

.tab-btn.active {
  background: #2f6bff;
  color: #fff;
}

.tab-pane {
  display: none;
  margin-top: 16px;
}

.tab-pane.active {
  display: block;
}

.contents_wrap {
  padding: 0 8px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.popup_footer_box {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.btn_confirm {
  background: var(--navy-500);
  color: #fff;
  padding: 0 8px;
  height: 32px;
  border-radius: 4px;
  font-weight: 400;
  font-size: 13px;
  white-space: nowrap;
  min-width: 60px;
}

#btnNoConfirm {
  background: #fff;
  border: 1px solid #2c5282;
  color: #2c5282;
}

#btnPopupClose,
#btnPopupSave {
  width: 60px;
}

#btnPopupClose {
  border: 1px solid var(--gray-800);
  color: var(--gray-800);
}

.control-button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 4px;
  align-items: flex-start;
  z-index: 1;
}

.box-up,
.box-down {
  width: 22px;
  height: 22px;
  border: 1px solid var(--navy-600);
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
}

.box-up {
  background-image: url("../images/up.svg");
}

.box-down {
  background-image: url("../images/down.svg");
}

.project-nav {
  width: 100%;
  height: 32px;
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  margin-top: 12px;
}

.project-nav li {
  background: var(--navy-300);
  border-radius: 4px;
  color: #fff;
  padding: 0 16px;
  line-height: 32px;
  cursor: pointer;
  font-size: 15px;
}

.project-nav li:hover {
  background: var(--green-700);
}

.project-nav li.active {
  background: var(--green-700);
}

.project-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.project-box {
  width: 100%;
  border-radius: 2px;
}

.project-box.map {
  display: flex;
  gap: 12px;
}

.project-box.flex {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.project-box form {
  display: flex;
  gap: 12px;
  align-items: center;
}

.project-box form label {
  white-space: nowrap;
  font-size: 14px;
  display: inline-block;
  min-width: 56px;
}

.project-box form select {
  width: 200px;
}

.project-table {
  width: 100%;
  border-left: 1px solid var(--blue-300);
  border-top: 1px solid var(--blue-300);
}

.project-table th,
.project-table td {
  border-right: 1px solid var(--blue-300);
  border-bottom: 1px solid var(--blue-300);
  padding: 8px 10px;
  text-align: center;
  font-size: 14px;
  min-height: 28px;
}
.project-table td {
  background: #fff;
  min-width: 120px;
}

.project-table th {
  background: #e4efff;

  color: var(--blue-700);
  min-width: 120px;
  font-weight: 500;
}

.forms {
  display: flex;
  gap: 24px;
}

.forms + button {
  width: 56px;
  height: 30px;
  display: inline-block;
  background: var(--blue-600);
  color: #fff;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 600;
}

.project-tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-300);
}

.project-tabs__button {
  padding: 10px 16px;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
  font-size: 16px;
}

.project-tabs__button.active {
  border-bottom: 3px solid var(--green-600);
  font-weight: bold;
  color: var(--green-600);
}

.project-tab-content {
  display: none;
  padding: 12px 0;
}

.project-tab-content.active {
  display: block;
}

.project-table strong {
  color: var(--blue-500);
  font-weight: 600;
}

.project-board thead {
  background: var(--gray-200);
  height: 36px;
  line-height: 36px;
  font-weight: 500;
  border-top: 1px solid var(--gray-700);
  border-bottom: 1px solid var(--gray-400);
}

.project-board th,
.project-board td {
  font-size: 14px;
  text-align: center;
}

.project-board td {
  border-bottom: 1px solid var(--gray-300);
  min-height: 28px;
  padding: 8px 0;
}

.project-board a:hover {
  text-decoration: underline;
}

.project-board-view__title {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}

.project-board-view__info {
  display: flex;
  align-items: center;
  padding: 6px 0 20px;
  border-bottom: 1px solid var(--gray-300);
  justify-content: center;
}

.project-board-view__info span {
  position: relative;
  padding: 0 12px;
  font-size: 14px;
  color: var(--gray-800);
}

.project-board-view__info span:first-child {
  padding-left: 0;
}

.project-board-view__info span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 8px;
  background: var(--gray-400);
  transform: translateY(-50%);
}

.project-board-view__info span:last-child::after {
  display: none;
}

.project-board-view__category {
  color: var(--blue-500);
  font-weight: bolder;
  text-align: center;
  display: block;
  margin-bottom: 4px;
}

.project-board-view__contents {
  min-height: 400px;
}

.project-board-view__footer {
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 0 24px;
  margin-bottom: 16px;
}

.project-board-view__footer__div {
  padding: 12px 0;
}

.project-board-view__footer__div.prev {
  border-bottom: 1px solid var(--gray-300);
}

.project-board-view__footer__div > span {
  padding-left: 20px;
  font-weight: 500;
  margin-right: 16px;
  display: inline-block;
  font-size: 14px;
}
.project-board-view__footer__div.prev span {
  background: url("../../assets/images/up.svg") no-repeat left center;
}

.project-board-view__footer__div.next span {
  background: url("../../assets/images/down.svg") no-repeat left center;
}

.project-board-view__footer__div a {
  color: var(--gray-900);
  font-size: 14px;
  cursor: pointer;
}
.project-board-view__footer__div a:hover {
  color: var(--blue-500);
  text-decoration: underline;
}
.project-board-view__buttons {
  display: flex;
  gap: 4px;
  justify-content: space-between;
}

/* 오른쪽 패널 */
.project-box.map .panel {
  width: 100%;
  padding: 36px 20px;
  border: 1px solid var(--gray-300);
  background: #fff;
  border-radius: 16px;
}

.project-box.map .panel h3 {
  font-weight: 600;
  font-size: 22px;
}

.project-box.map .panel h3 + span {
  font-size: 14px;
  color: var(--gray-800);
  margin-bottom: 12px;
  display: inline-block;
}

.metric-list li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 2px 4px;
  border-bottom: 1px solid var(--gray-300);
}

.metric-list li span {
  font-size: 16px;
}

.metric-list li .value {
  font-size: 18px;
  font-weight: bold;
  color: var(--blue-700);
}

.root-el:last-child {
  margin-bottom: 0 !important;
}

.large-popup {
  min-width: 800px;
  max-width: 800px;
  max-height: 1000px;
  position: fixed;
  background: #fff;
  padding: 12px 12px 0 12px;
  border: 1px solid var(--gray-500);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.large-popup__header {
  font-size: 16px;
  font-weight: 600;
  padding: 0 0 8px 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--gray-300);
}

.project-box-wrap-header {
  background: url("../images/businessMap-popup.svg") no-repeat;
  background-position: right 20px top 24px;
  background-size: 20%;
}

.project-box-wrap {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 12px;
  border: 1px solid var(--gray-300);
  background: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* ===== 팝업 검색조건 전용 (한줄 정렬) ===== */

.popup-search-box {
  padding: 6px 10px;
}

.popup-search-layout {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 🔥 필드를 쪼개지 말고 붙이기 */
.popup-search-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 첫 번째 필드 */
.popup-search-field:first-child {
  margin-right: 8px; /* 두 필드 사이 간격 */
}

/* 라벨 */
.popup-search-label {
  width: 70px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.popup-search-label.name {
  width: 36px;
}

.popup-search-label.name-long {
  width: 72px;
}

/* input */
.popup-search-field input.popup-search-input[type="text"] {
  width: 180px !important;
  height: 27px;
  padding: 0 8px;
  font-size: 13px;
  box-sizing: border-box;
}

/* 버튼 */
.popup-search-btn {
  margin-left: auto;
  height: 27px;
  padding: 0 14px;
  font-size: 13px;
}

.comment-empty-box {
  padding: 20px;
  text-align: center;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.comment-empty-text {
  font-size: 14px;
}

/* 새로운 로그인 */

.login-wrap {
  width: 1440px;
  margin: 30px auto 0;
}

.vertical-split {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 50%;
}

.login-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4px;
}

.login-header p {
  color: var(--navy-500);
  font-weight: 600;
}

.login-box {
  border-radius: 24px;
  border: 1px solid #bbdddb;
  background: #e0f4f2;
  width: 58%;
  height: 372px;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login-box:hover {
  border: 1px solid #41a199;
}
.login-box > p {
  font-size: 20px;
  text-align: center;
}

.login-contents {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.login-visual {
  border-radius: 24px;
  width: 50%;
  height: 640px;
  overflow: hidden;
  position: relative;
}

.login-visual .slides {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}
.login-visual .slides img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

.login-visual p {
  position: absolute;
  bottom: 24px;
  right: 24px;
  color: #fff;
  z-index: 5;
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  transition: border-color 0.5s;
  background: #fff;
  height: 45px;
  gap: 2px;
}

.input-group:focus-within {
  border-color: var(--navy-500);
}

.input-icon {
  flex-shrink: 0;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.input-icon img {
  width: 16px;
  height: 16px;
}

.input-group input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 14px 14px 14px 8px;
  font-size: 14px;
  outline: none;
}

.input-group input::placeholder {
  color: var(--gray-mid);
  font-weight: 300;
}

.btn-login {
  width: 100px;
  height: 94px;
  border-radius: 4px;
  background: var(--green-700);
  color: #fff;
}

.btn-login:hover {
  background: var(--green-800);
}

.form-meta {
  width: 320px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

.checkbox-login {
  display: none;
}

.checkbox-login + label.checkbox-label {
  display: inline-block;
  padding-left: 20px;
  font-size: 14px;
  background: url("../images/login/checkbox-normal.svg") no-repeat left center;
  background-size: 14px;
  white-space: nowrap;
  color: var(--gray-800);
  cursor: pointer;
}

.checkbox-login:checked + label.checkbox-label {
  background: url("../images/login/checkbox-checked.svg") no-repeat left center;
  background-size: 14px;
}

.login-box form {
  width: 320px;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}

.find-link,
.btn-join {
  color: var(--gray-800);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
  display: inline-block;
}

.find-link:hover,
.btn-join:hover {
  text-decoration: underline;
}

.btn-join {
  font-weight: bolder;
  position: relative;
  padding-right: 10px;
}

.btn-join::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 2px;
  width: 1px;
  height: 10px;
  background: #aaa;
}

.vertical-top {
  display: flex;
  gap: 16px;
}

.banner-area {
  width: 42%;
  height: 372px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.banner-area > a {
  border-radius: 16px;
  padding: 18px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  min-height: 0;
  justify-content: center;
}

.banner-area p {
  font-size: 15px;
  color: #222;
  line-height: 140%;
}

.business-info {
  background: #eaf2ff;
  border: 1px solid #cee1ff;
}

.business-info:hover {
  border: 1px solid #7191c2;
}

.banner-area > a span {
  font-weight: 600;
}

.business-info span {
  color: var(--blue-800);
}

.business-info img,
.faq img {
  position: absolute;
  top: 28px;
  right: 30px;
  width: 65px;
}

.faq img {
  top: 35px;
}

.faq {
  background: #feeff6;
  border: 1px solid #fbcce2;
}
.faq:hover {
  border: 1px solid #ed8bb9;
}

.faq span {
  color: #fb5075;
}

.family-site {
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  flex: 1;
  border-radius: 16px;
  padding: 12px 24px;
  line-height: 130%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.family-site img {
  width: 32px;
  display: block;
}

.family-site:hover {
  border: 1px solid #999;
}

.vertical-bottom {
  border-radius: 24px;
  border: 1px solid var(--gray-400);
  padding: 24px 24px 0;
  flex: 1;
}

.vertical-bottom:hover {
  border: 1px solid var(--gray-800);
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notice-header h5 {
  font-size: 18px;
  color: var(--gray-900);
  font-weight: 700;
}

.notice-more {
  color: var(--gray-800);
  font-size: 14px;
  background: url("../images/login/notice-more.svg") no-repeat center right;
  padding-right: 16px;
}

.notice-more:hover {
  color: var(--blue-800);
  font-weight: 600;
  background: url("../images/login/notice-more--hover.svg") no-repeat center
    right;
}

.notice-content {
}

.notice_content_item {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gray-300);
}

.notice_content_item:last-child {
  border-bottom: none;
}

.notice_content_item p {
  cursor: pointer;
  max-width: 85%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}

.notice_content_item p:hover {
  text-decoration: underline;
}

.notice_content_item span {
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
}

.banner-swiper {
  width: 100%;
  border-top: 1px solid var(--gray-400);
  border-bottom: 1px solid var(--gray-400);
  margin-bottom: 10px;
}

.banner-swiper__wrap {
  width: 1440px;
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-box {
  height: 24px;
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 150px;
  z-index: 10;
}

.pagination-box > div {
  display: flex;
}

.pagination-box .tit {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-right: auto;
}

.ctrl-btn {
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  padding: 0;
}

.ctrl-btn.btn-prev {
  background: url("../images/login/banner-icon-prev.png") no-repeat center;
  background-size: 4px;
  border: 1px solid var(--gray-500);
  border-right: none;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.ctrl-btn.btn-toggle {
  background: url("../images/login/banner-icon-pause.png") no-repeat center;
  background-size: 4px;
  border: 1px solid var(--gray-500);
}
.ctrl-btn.btn-next {
  background: url("../images/login/banner-icon-next.png") no-repeat center;
  background-size: 4px;
  border: 1px solid var(--gray-500);
  border-left: none;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.ctrl-btn.btn-toggle.paused {
  background: url("../images/login/banner-icon-pause-off.png") no-repeat center;
  background-size: 5px;
}

.banner-window {
  overflow: hidden;
  width: 1260px;
}
.banner-track {
  width: max-content;
  display: flex;
  gap: 40px;
  transition: transform 0.4s ease;
}

.banner-slide {
  width: 220px;
}

.banner-slide img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.banner-slide a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* login-footer */

.login-footer {
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.login-footer p {
  color: var(--gray-600);
  font-size: 14px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  margin-top: 12px;
}

.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  text-decoration: none;
  color: var(--gray-700);

  border-radius: 6px;
  font-size: 15px;
}

.pagination a:hover {
  color: var(--blue-500);
}

.pagination a.active {
  color: var(--blue-500);
}

.pagination a.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* left  */
.pagination-double-arrow-left {
  background: url("../images/pagination-double-arrow-left.svg") no-repeat center;
}

.pagination-double-arrow-left:hover {
  background: url("../images/pagination-double-arrow-left--hover.svg") no-repeat
    center;
}

.pagination-arrow-left {
  background: url("../images/pagination-arrow-left.svg") no-repeat center;
}

.pagination-arrow-left:hover {
  background: url("../images/pagination-arrow-left--hover.svg") no-repeat center;
}

/* right */
.pagination-double-arrow-right {
  background: url("../images/pagination-double-arrow-right.svg") no-repeat
    center;
}

.pagination-double-arrow-right:hover {
  background: url("../images/pagination-double-arrow-right--hover.svg")
    no-repeat center;
}

.pagination-arrow-right {
  background: url("../images/pagination-arrow-right.svg") no-repeat center;
}

.pagination-arrow-right:hover {
  background: url("../images/pagination-arrow-right--hover.svg") no-repeat
    center;
}

/****/

@media screen and (max-width: 1440px) {
  /* 화면 너비가 1440px 이하일 때 적용할 CSS를 여기에 작성하세요 */
  .login-visual {
    display: none;
  }

  .login-header,
  .vertical-split,
  .vertical-top,
  .login-box {
    width: 100%;
  }

  .login-header {
    justify-content: center;
  }

  .login-header p {
    display: none;
  }

  .vertical-top {
    flex-direction: column;
  }

  .banner-area {
    width: 100%;
  }

  .vertical-bottom {
    margin-bottom: 24px;
  }

  .banner-swiper {
    display: none;
  }

  .login-wrap {
    width: 840px;
    margin: 45px auto 0;
  }

  .banner-swiper {
    max-width: 840px;
    overflow: hidden;
    margin: 0 auto;
    border-top: none;
  }
}