/* 로그인 페이지 START */
main.login {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: max-content;
  padding-top: 6.25rem;
  padding-bottom: 6.25rem;
  background: radial-gradient(
    42.58% 75.69% at 50% 50%,
    #353848 0%,
    #16171c 100%
  );

  &::after {
    position: absolute;
    bottom: 9.25rem;
    z-index: 0;
    content: '';
    width: 100%;
    height: 23.75rem;
    background: url('../images/visuals/login_bg.png') no-repeat center bottom /
      contain;
  }

  .bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    &::after,
    &::before {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      content: '';
      width: 100%;
    }
    &::before {
      height: 2.625rem;
      background: linear-gradient(
        270deg,
        #0b2662 0%,
        #143170 50%,
        #0b2662 100%
      );
    }
    &::after {
      height: 6.625rem;
      bottom: 2.625rem;
      background: linear-gradient(
        90deg,
        #1d3b7d 10.12%,
        #304d8f 48.94%,
        #1d3b7d 87.75%
      );
    }
    .logo2 {
      position: absolute;
      left: 50%;
      bottom: 4.125rem;
      transform: translateX(-50%);
      z-index: 100;
      width: 9.375rem;
      height: 9.375rem;
      border: 2px solid #00215d;
      border-radius: 50%;
      background-color: var(--white1);
      &::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 7.5rem;
        height: 3.625rem;
        background: #00215d;
        mask: url('../images/common/logo.svg') no-repeat center / contain;
      }
    }
  }

  .login_wrap {
    position: relative;
    z-index: 1;
    .logo {
      width: 9rem;
      height: 4.5rem;
      margin: 0 auto;
      background: #ffffff;
      mask: url('../images/common/logo.svg') no-repeat center / contain;
    }
    h2 {
      margin-top: 2.5rem;
      font-size: 2.5rem;
      font-weight: 700;
      line-height: 1.75rem;
      text-align: center;
      color: var(--white1);
    }
    p {
      margin-top: 2.5rem;
      line-height: 150%;
      font-size: 1.0625rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.7);
      text-align: center;
    }
    form {
      width: calc(100% - 40px);
      max-width: 28.125rem;
      margin: 3.75rem auto 0;
    }
    label {
      display: block;
      margin-bottom: 0.75rem;
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 0.6875rem;
      color: var(--white1);
    }
    input {
      width: 100%;
      height: 3.5rem;
      margin-bottom: 1.5rem;
      padding: 0 1rem;
      font-size: 1.0625rem;
      border-radius: 0.5rem;
      background-color: #fff;
      border: 1px solid #717171;
      outline: none;

      &::placeholder {
        color: #8e8e8e;
      }
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px white inset !important;
      }
    }
    input[type='checkbox'] {
      width: 1.25rem;
      height: 1.25rem;
      min-width: 1.25rem;
      min-height: 1.25rem;
      margin: 0;
      margin-right: 0.5rem;
      padding: 0;
      cursor: pointer;
      appearance: checkbox;
      -webkit-appearance: checkbox;
      -moz-appearance: checkbox;
      background-color: #fff;
      border: 1px solid #717171;
      border-radius: 0.25rem;
      flex-shrink: 0;
    }
    input[type='radio'] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    input[type='radio'] + label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      position: relative;
      width: max-content;
      min-width: max-content;
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 1.5;
      color: var(--white1);

      &::before {
        display: block;
        content: '';
        width: 1.25rem;
        height: 1.25rem;
        min-width: 1.25rem;
        min-height: 1.25rem;
        border-radius: 50%;
        background-color: #fff;
        flex-shrink: 0;
      }
      &::after {
        display: block;
        position: absolute;
        top: 0.625rem;
        left: 0.625rem;
        transform: translate(-50%, -50%);
        content: '';
        width: 0.625rem;
        height: 0.625rem;
        min-width: 0.625rem;
        min-height: 0.625rem;
        border-radius: 50%;
        background-color: #063a74;
        opacity: 0;
      }
    }
    input[type='radio']:checked + label {
      &::before {
        border-color: #063a74;
        outline-color: rgba(6, 58, 116, 1);
      }
      &::after {
        opacity: 1;
      }
    }
    .checkbox_wrap {
      margin-bottom: 1.5rem;
      label {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 0.9375rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--white1);
        margin-bottom: 0;
      }
      span {
        display: inline;
      }
    }
    button[type='submit'] {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 3.5rem;
      margin-bottom: 1.5rem;
      border-radius: 0.5rem;
      background-color: #063a74;
      font-size: 1.0625rem;
      font-weight: 400;
      color: var(--white1);
    }
    a {
      display: block;
      font-size: 1.0625rem;
      font-weight: 400;
      text-align: center;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
/* 로그인 페이지 END */

/* 주간식단  START*/
.weekly_controller {
  .prev,
  .next {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid #cdd1d5;
    background-color: var(--white1);

    &:before {
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 24px;
      height: 24px;
      background: #33363d;
      mask: url('../images/icons/ico_breadcrumb_arrow.svg') no-repeat center /
        cover;
      content: '';
    }
  }
  .prev:before {
    transform: translate(-50%, -50%) scaleX(-1);
  }
  .weekly_title {
    text-align: center;
  }

  .weekly_title-main {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--txtbasic);
  }

  .weekly_title-range {
    display: block;
    margin-top: 1rem;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--txtsubtit);
  }
}
.weekly_list {
  width: 100%;
  border-collapse: collapse;
  tr {
    border-bottom: 1px solid #d6e0eb;
  }
  th:first-of-type,
  td:first-of-type {
  }
  th:not(:first-of-type),
  td:not(:first-of-type) {
    /* width : calc(100% / 5 - 6.25rem); */
  }

  p {
    font-size: 0.9375rem;
    padding: 0.5rem 1rem;
  }
  p:first-of-type {
    background-color: #eef2f7;
    font-weight: 700;
    color: var(--txtbolder);
  }
  p:not(:first-of-type),
  textarea {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 150%;
    color: var(--txtsubtit);
    outline: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid transparent;
    appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    overflow: hidden;
  }
  textarea:not([readonly]) {
    overflow-y: scroll;
  }

  textarea.editable-meal.is-editing {
    outline: none;
    border-color: #2f6fec;
    background: rgba(47, 111, 236, 0.06);
  }

  & + .add_weekly {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    padding: 0.625rem 1rem;
    font-size: 1.063rem;
    font-weight: 400;
    color: var(--white1);
    border-radius: 0.375rem;
    background-color: #063a74;
    &::before {
      display: block;
      content: '';
      width: 1.25rem;
      height: 1.25rem;
      background-color: #fff;
      mask: url('../images/icons/ico_plus.svg') no-repeat center / cover;
    }

    &.off {
      display: none;
    }
  }
  & ~ .btns {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;

    button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 6.125rem;
      height: 4rem;
      font-size: 1.188rem;
      font-weight: 500;
      border-radius: 0.5rem;
    }
    .cancel_btn {
      border: 1px solid #256ef4;
      color: #256ef4;
      background-color: #ecf2fe;
    }
    .save_btn {
      background-color: #063a74;
      color: #fff;
    }
  }
  & ~ .btns.on {
    display: flex;
  }
}
/* 주간식단  END*/

/* 게시판 상세 START */
.board_print {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--point1) url('../images/icons/ico_print.svg') no-repeat
    center / 1.25rem;
}
.board_view {
  .view_hd {
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--gray50);

    p {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      span {
        font-size: 0.938rem;
        font-weight: 400;
      }
    }

    h3 {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      margin-top: 1.5rem;
      font-size: 2rem;
      font-weight: 700;
      line-height: 2.5rem;
    }
    h4 {
      margin-top: 1.5rem;
      font-size: 1.188rem;
      font-weight: 600;
      line-height: 150%;
      color: var(--gray90);
    }
    & > div {
      display: flex;
      align-items: center;
      font-size: 0.938rem;
      font-weight: 400;
      line-height: 150%;
      color: var(--gray70);
      margin-top: 1.5rem;

      span:first-of-type {
        display: flex;
        align-items: center;
      }
      span:first-of-type::after {
        content: '';
        display: block;
        width: 1px;
        height: 0.625rem;
        background-color: #aaa;
        margin: 0 0.5rem;
      }
    }
  }
  .view_sub_hd {
    padding: 1.125rem 0;
    border-bottom: 1px solid var(--gray50);

    strong {
      display: block;
      min-width: 7.5rem;
      font-size: 1.063rem;
      font-weight: 700;
      color: var(--gray90);
    }
    li:not(:last-of-type) {
      margin-bottom: 1.25rem;
    }
    a {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      font-size: 1.063rem;
      font-weight: 400;
      line-height: 0.75rem;
      color: var(--gray70);
    }
    a::after {
      content: '';
      width: 1.25rem;
      height: 1.25rem;
      background: #33363d;
      mask: url('../images/icons/ico_download.svg') no-repeat center / cover;
    }
    .all_download {
      padding: 0 0.563rem;
      border-radius: 0.25rem;
      border: 1px solid #58616a;
      font-size: 0.938rem;
      line-height: 2rem;
      vertical-align: middle;
      color: var(--txtbasic);
    }
  }
  .view_bd {
    padding: 3.25rem 0;
    .cont {
      position: relative;
      font-size: 1.063rem;
      line-height: 150%;
    }
    .btns {
      margin-top: 3.25rem;
      a,
      button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 6.125rem;
        height: 4rem;
        font-size: 1.188rem;
        font-weight: 400;
        line-height: 150%;
        border-radius: 0.5rem;
      }
      .stroke {
        border: 1px solid #256ef4;
        background-color: #ecf2fe;
        color: #256ef4;
      }
      .fill {
        background-color: #063a74;
        color: var(--white1);
      }
    }
    .swiper {
      position: static;
      width: calc(100% - 12.75rem);
      height:48.25rem;
      padding-bottom: 0;
      padding-bottom:5rem;
      margin: 0 auto;
      .swiper-slide {
        display: flex;
        align-items: center;
        margin-right: 0;
      }
      .swiper-slide img {
        width: 100%;
        max-width:max-content;
        height:auto;
        max-height:100%;
        margin: 0 auto;
      }
      .controller {
        position: static;
        margin-top: 1.5rem;
      }
      .swiper-button-prev,
      .swiper-button-next {
        position: absolute;
        top: calc(50% - 1.5rem);
      }
      .swiper-button-prev {
        right: auto;
        left: 0;
        transform: translateY(-50%) rotate(-180deg);
      }
      .swiper-button-next {
        left: auto;
        right: 0;
        transform: translateY(-50%);
      }
    }
  }
  .view_ft {
    .paging {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      padding: 2rem 0;
      border-top: 1px solid #8e8e8e;
      border-bottom: 1px solid #8e8e8e;

      strong {
        width: 100%;
        max-width: 7.5rem;
        font-size: 1.063rem;
        font-weight: 400;
        color: #555;
      }
      span {
        display: block;
        min-width: max-content;
        font-size: 1.063rem;
        font-weight: 400;
        color: #555;
      }
      p {
        width: 100%;
        font-size: 1.063rem;
        font-weight: 600;
        color: #1d1d1d;
      }
    }
    a.list_back_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 7.125rem;
      height: 4rem;
      border-radius: 0.5rem;
      border: 1px solid #58616a;
      font-size: 1.188rem;
      font-weight: 400;
      color: var(--txtbasic);
      margin: 2.5rem auto 0;
    }
  }
}
/* 게시판 상세  END */

/* 게시판 작성 / 수정 START */
.write_wrap {
  .ipt {
    margin-bottom: 2.5rem;
  }
   .select_wrap {
      display: block;
      width: 100%;
      max-width: 22.5rem;

      select {
        border-radius: 0.5rem;
        border: 1px solid var(--iptborder);
        padding: 0 1rem;
        width: 100%;
        height: 3.5rem;
        font-size: 1.1875rem;
        color: var(--txtdisabled);
      }
      select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('../images/icons/ico_select_arrow.svg');
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1.5rem;
        color: var(--gray90);

        option {
          color: var(--txtdisabled);
        }
      }
    }
  .label {
    display: block;
    margin-bottom: 1.25rem;
    font-size: 1.063rem;
    font-weight: 600;
    line-height: 0.75rem;
  }
  input[type='radio'] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  input[type='radio'] + label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    width: max-content;
    min-width: max-content;
    font-size: 1.1875rem;
    font-weight: 400;
    line-height: 150%;
    color: var(--txtbolder);

    &::before {
      display: block;
      content: '';
      min-width: 1.5rem;
      min-height: 1.5rem;
      border-radius: 50%;
      border: 1px solid var(--iptborder);
      outline: 1px solid rgba(6, 58, 116, 0);
    }
    &::after {
      display: block;
      position: absolute;
      top: 0.5rem;
      left: 0.4375rem;
      content: '';
      min-width: 0.75rem;
      min-height: 0.75rem;
      border-radius: 50%;
      background-color: #063a74;
      opacity: 0;
    }
  }
  input[type='radio']:checked + label {
    &::before {
      border-color: #063a74;
      outline-color: rgba(6, 58, 116, 1);
    }
    &::after {
      opacity: 1;
    }
  }
  textarea,
  input[type='text'] {
    width: 100%;
    height: 3.5rem;
    border-radius: 0.5rem;
    padding: 0 1rem;
    font-size: 1.1875rem;
    font-weight: 400;
    border: 1px solid var(--iptborder);
    &::placeholder {
      color: var(--txtdisabled);
    }
  }
  textarea {
    height: 9rem;
    max-height: 9rem;
    padding: 0.5rem 1rem;
  }

  .calendar_wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    input[type='text'] {
      min-width: 20rem;
      background: url('../images/icons/ico_calendar.svg') no-repeat
        calc(100% - 1rem) 1rem / 1.5rem;
    }
  }
  input[type='file'] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
  }
  .drop_zone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    width: 100%;
    height: 14.375rem;
    background-color: var(--gray10);
    border-radius: 0.75rem;
    border: 1px dashed var(--gray40);

    p {
      font-size: 1.1875rem;
      font-weight: 400;
      color: var(--gray90);
    }
    label {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.25rem;
      width: 7.1875rem;
      height: 3rem;
      border-radius: 0.5rem;
      background-color: var(--point1);
      font-size: 1.0625rem;
      font-weight: 400;
      color: var(--white1);
      &::before {
        display: block;
        content: '';
        width: 1.25rem;
        height: 1.25rem;
        background: var(--white1);
        mask: url('../images/icons/ico_upload.svg') no-repeat center / cover;
      }
    }
  }
  .result_wrap {
    display: none;
    margin-top: 1.5rem;
    &.on {
      display: block;
    }

    .num {
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--gray90);
      span {
        color: #063a74;
      }
    }
    .files_remove_btn,
    .file_remove_btn {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 1.0625rem;
      font-weight: 400;
      color: var(--gray90);
      &::before {
        display: block;
        content: '';
        min-width: 1.25rem;
        min-height: 1.25rem;
        background: var(--gray80);
        mask: url('../images/icons/ico_close.svg') no-repeat center / cover;
      }
    }
    .file {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      position: relative;
      width: 100%;
      height: 3.5rem;
    }
    .file:not(.error) {
      border-radius: 0.5rem;
      border: 1px solid var(--gray30);
      padding: 0 1rem;
    }
    .file:not(:last-child) {
      margin-bottom: 1rem;
    }
    /* 기존 첨부파일 목록과 새로 추가된 파일 사이 간격 */
    .result_wrap > .existing-attaches {
      margin-bottom: 1.5rem;
    }
    /* 기존 첨부파일 목록의 마지막 파일에도 하단 여백 추가 */
    .existing-attaches .file:last-child {
      margin-bottom: 1.5rem;
    }
    .file p {
      font-size: 1.0625rem;
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    /* 사진게시판 첫 번째 파일 "대표" 표시 */
    .thumb-label {
      display: inline-block;
      padding: 0.125rem 0.5rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: #063a74;
      background-color: #eef5ff;
      border: 1px solid #063a74;
      border-radius: 0.25rem;
      white-space: nowrap;
    }
    /* 드래그 가능한 파일 스타일 */
    .file.is-sort {
      cursor: move;
      transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .file.is-sort:hover {
      background-color: #f5f5f5;
    }
    .file.is-sort:active {
      cursor: grabbing;
    }
    /* 드래그 중인 파일 스타일 */
    .file.file-dragging {
      opacity: 0.5;
      transform: scale(0.98);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border-color: #063a74;
      background-color: #f0f4ff;
    }
    /* 드롭 인디케이터 */
    .file-drop-indicator {
      height: 2px;
      background-color: #063a74;
      margin: 4px 0;
      border-radius: 1px;
      box-shadow: 0 0 4px rgba(6, 58, 116, 0.5);
    }
    .load {
      min-width: 1.25rem;
      min-height: 1.25rem;
      background: url('../images/icons/ico_load.svg') no-repeat center / cover;
      animation: rotation 1s linear infinite;
    }
    .check {
      min-width: 1.25rem;
      min-height: 1.25rem;
      background: url('../images/icons/ico_checked.svg') no-repeat center /
        cover;
    }
    .file.error {
      flex-direction: column;
      align-items: flex-start;
      position: relative;
      background-color: #fdf2f3;
      height: max-content;
      padding: 1rem;
      border-radius: 0.5rem;
      border: 2px solid var(--danger);
      > .error {
        width: 100%;
        border-top: 1px solid #d8d8d8;
      }
      .info {
        position: relative;
        padding-top: 0.75rem;
        padding-left: 1.5rem;
        font-size: 1.0625rem;
        font-weight: 400;
        color: var(--danger);
      }
      .info::before {
        display: block;
        position: absolute;
        left: 0;
        content: '';
        width: 1.25rem;
        height: 1.25rem;
        background: url('../images/icons/ico_info_error.svg') no-repeat center /
          cover;
      }
      .error.file_remove_btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: max-content;
      }
    }
  }
  .btns {
    button,
    a {
      padding: 1.09375rem 1.5rem;
      border-radius: 0.5rem;
      font-size: 1.1875rem;
      font-weight: 600;
    }
    .stroke_b {
      border: 1px solid #256ef4;
      color: #256ef4;
      background-color: #ecf2fe;
    }
    .fill {
      background-color: #063a74;
      color: #fff;
    }
    .stroke_w {
      border: 1px solid #58616a;
      color: var(--txtbasic);
    }
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.dim {
  position: fixed;
  z-index: 1000000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
}
.dim.active {
  opacity: 1;
  visibility: visible;
}
#addWeeklyModal {
  z-index: 100000001;
  width: calc(100% - 40px);
  max-width: 40rem;
  border-radius: 0.5rem;
  background-color: var(--white1);
  padding: 2.5rem 2.5rem 3.125rem;

  .modal_hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 1.063rem;
      font-weight: 700;
      color: var(--txtbolder);
    }
    .close_modal {
      width: 1.5rem;
      height: 1.5rem;
      background: var(--icongray);
      mask: url('../images/icons/ico_close.svg') no-repeat center / cover;
    }
  }

  input[type='file'] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
  }
  .drop_zone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    width: 100%;
    height: 14.375rem;
    background-color: var(--gray10);
    border-radius: 0.75rem;
    border: 1px dashed var(--gray40);

    p {
      font-size: 1.1875rem;
      font-weight: 400;
      color: var(--gray90);
    }
    label {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.25rem;
      width: 7.1875rem;
      height: 3rem;
      border-radius: 0.5rem;
      background-color: var(--point1);
      font-size: 1.0625rem;
      font-weight: 400;
      color: var(--white1);
      &::before {
        display: block;
        content: '';
        width: 1.25rem;
        height: 1.25rem;
        background: var(--white1);
        mask: url('../images/icons/ico_upload.svg') no-repeat center / cover;
      }
    }
  }
  .result_wrap {
    display: none;
    margin-top: 1.5rem;
    &.on {
      display: block;
    }

    .num {
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--gray90);
      span {
        color: #063a74;
      }
    }
    .files_remove_btn,
    .file_remove_btn {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 1.0625rem;
      font-weight: 400;
      color: var(--gray90);
      &::before {
        display: block;
        content: '';
        min-width: 1.25rem;
        min-height: 1.25rem;
        background: var(--gray80);
        mask: url('../images/icons/ico_close.svg') no-repeat center / cover;
      }
    }
    .file {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      position: relative;
      width: 100%;
      height: max-content;
      min-height: 3.5rem;
    }
    .file:not(.error) {
      border-radius: 0.5rem;
      border: 1px solid var(--gray30);
      padding: 1rem;
    }
    .file:not(:last-child) {
      margin-bottom: 1rem;
    }
    /* 기존 첨부파일 목록과 새로 추가된 파일 사이 간격 */
    .result_wrap > .existing-attaches {
      margin-bottom: 1.5rem;
    }
    /* 기존 첨부파일 목록의 마지막 파일에도 하단 여백 추가 */
    .existing-attaches .file:last-child {
      margin-bottom: 0;
    }
    .file p {
      font-size: 1.0625rem;
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .file.error p{
      padding-right: 3.25rem
    }
    /* 사진게시판 첫 번째 파일 "대표" 표시 */
    .thumb-label {
      display: inline-block;
      padding: 0.125rem 0.5rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: #063a74;
      background-color: #eef5ff;
      border: 1px solid #063a74;
      border-radius: 0.25rem;
      white-space: nowrap;
    }
    /* 드래그 가능한 파일 스타일 */
    .file.is-sort {
      cursor: move;
      transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .file.is-sort:hover {
      background-color: #f5f5f5;
    }
    .file.is-sort:active {
      cursor: grabbing;
    }
    /* 드래그 중인 파일 스타일 */
    .file.file-dragging {
      opacity: 0.5;
      transform: scale(0.98);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border-color: #063a74;
      background-color: #f0f4ff;
    }
    /* 드롭 인디케이터 */
    .file-drop-indicator {
      height: 2px;
      background-color: #063a74;
      margin: 4px 0;
      border-radius: 1px;
      box-shadow: 0 0 4px rgba(6, 58, 116, 0.5);
    }
    .load {
      min-width: 1.25rem;
      min-height: 1.25rem;
      background: url('../images/icons/ico_load.svg') no-repeat center / cover;
      animation: rotation 1s linear infinite;
    }
    .check {
      min-width: 1.25rem;
      min-height: 1.25rem;
      background: url('../images/icons/ico_checked.svg') no-repeat center /
        cover;
    }
    .file.error {
      flex-direction: column;
      align-items: flex-start;
      position: relative;
      background-color: #fdf2f3;
      height: max-content;
      padding: 1rem;
      border-radius: 0.5rem;
      border: 2px solid var(--danger);
      > .error {
        width: 100%;
        border-top: 1px solid #d8d8d8;
      }
      .info {
        position: relative;
        padding-top: 0.75rem;
        padding-left: 1.5rem;
        font-size: 1.0625rem;
        font-weight: 400;
        color: var(--danger);
      }
      .info::before {
        display: block;
        position: absolute;
        left: 0;
        content: '';
        width: 1.25rem;
        height: 1.25rem;
        background: url('../images/icons/ico_info_error.svg') no-repeat center /
          cover;
      }
      .error.file_remove_btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: max-content;
      }
    }
  }
  .btns {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
    gap: 1rem;

    button,
    a {
      padding: 1.09375rem 1.5rem;
      border-radius: 0.5rem;
      font-size: 1.1875rem;
      font-weight: 600;
    }
    .stroke_b {
      border: 1px solid #256ef4;
      color: #256ef4;
      background-color: #ecf2fe;
    }
    .fill {
      background-color: #063a74;
      color: #fff;
    }
    .stroke_w {
      border: 1px solid #58616a;
      color: var(--txtbasic);
    }
  }
}
/* 게시판 작성 / 수정 END */

@media all and (max-width: 768px) {
  .board_view {
    .view_hd {
      h3 {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 6px;
        font-size: 25px;
        line-height: 150%;
      }
      h4 {
        margin-top: 6px;
        font-size: 19px;
        line-height: 150%;
      }
      & > div {
        font-size: 15px;
        span:first-of-type::after {
          height: 10px;
          margin: 0 8px;
        }
      }
    }
    .view_sub_hd {
      strong {
        min-width: 100%;
        font-size: 17px;
      }
      a {
        gap: 10px;
        font-size: 17px;
        line-height: 150%;
      }
      li:not(:last-of-type) {
        margin-bottom: 14px;
      }
      .all_download {
        padding: 0 10px;
        font-size: 15px;
        line-height: 32px;
        border-radius: 4px;
      }
    }
    .view_bd {
      padding: 40px 0;
      .cont {
        font-size: 17px;
      }
      .btns {
        margin-top: 40px;
      }
      .swiper {
        width: 100%;
        height:450px;
        .controller {
          margin-top: 24px;
        }
        .swiper-button-prev,
        .swiper-button-next {
          display: none;
        }
      }
    }
    .view_ft {
      .paging {
        strong {
          max-width: 60px;
          font-size: 17px;
        }
        p,
        span {
          font-size: 17px;
        }
      }
      a.list_back_btn {
        font-size: 19px;
      }
    }
  }
  .write_wrap {
    .select_wrap{
      max-width: 100%;
    }
    .btns {
      margin-top: 64px;
      .wv_modal_btn {
        margin-bottom: 64px;
      }
    }
    & input[type='radio'] + label {
      gap: 8px;
      font-size: 19px;
      &::before {
        min-width: 24px;
        min-height: 24px;
      }
    }
    .calendar_wrap {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      input[type='text'] {
        margin-left: 32px;
        min-width: 240px;
        max-width: calc(100% - 32px);
      }
    }
    .drop_zone {
      gap: 24px;
      height: 210px;
      p {
        font-size: 19px;
      }
      label {
        width: 91px;
      }
      label::before {
        display: none;
      }
    }
    .result_wrap {
      .file {
        height: 50px;
      }
      .file p:not(.info) {
        padding-right: 60px;
      }
    }
  }
  .weekly_list {
    &.m_show {
      display: table !important;
    }
    th {
      text-align: left;
      vertical-align: middle;
      line-height: 150%;
    }
    td:not(:first-of-type) {
      vertical-align: top;
    }
    p {
      width: 100%;
      padding: 8px 16px;
      font-size: 17px;
      font-weight: 400;
    }
    p:first-of-type {
      background-color: transparent;
      color: var(--txtbolder);
      font-weight: 400;
    }
    p:not(:first-of-type),
    textarea {
      width: 100%;
      border-bottom: none;
      color: var(--txtsubtit);
      overflow: hidden;

      &:last-of-type {
        border-top: none;
      }
    }

    .weekly_hd {
      width: 100%;
      max-width: 100%;
      textarea,
      p {
        display: block;
        padding: 8px 16px;
        font-size: 15px;
        font-weight: 700;
        background-color: #eef2f7;
        border-bottom: 1px solid #d6e0eb;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
      }
      p:nth-of-type(2) {
        min-width: 80px;
        max-width: 80px;
      }
    }
    li {
      flex-direction: row;
      flex: 1;
      border-bottom: 1px solid #cdd1d5;
    }
    li:not(.weekly_hd) {
      flex: 1;
      width: 100%;

      p {
        padding: 12px 16px;
        font-size: 17px;
        font-weight: 400;
        color: var(--txtsubtit);
      }

      p:first-of-type {
        display: flex;
        align-items: center;
        min-width: 80px;
        max-width: 80px;
        border-bottom: none;
      }
    }
    & + .add_weekly {
      margin: 20px auto 0;
    }
    & ~ .btns {
      margin-top: 40px;
    }
  }

  main.login {
    padding-top: 60px;
    background: radial-gradient(
        68.91% 54.4% at 50% 50%,
        #353848 0%,
        #16171c 100%
      ),
      #edf1f5;

    &::after {
      bottom: 0;
      height: 29.74vw;
      background: url('../images/visuals/login_bg.png') no-repeat center bottom /
        126.67vw auto;
    }

    .login_wrap {
      width: calc(100% - 32px);
      margin: 0 auto;
      .logo {
        width: 90px;
        height: 45px;
      }
      h2 {
        margin-top: 30px;
        font-size: 28px;
        font-weight: 700;
        line-height: 150%;
      }
      p {
        margin-top: 30px;
        font-size: 17px;
        letter-spacing: -0.06em;
      }
      form {
        max-width: 100%;
        width: 100%;
        margin: 40px auto 0;
      }
      label {
        margin-bottom: 12px;
        font-size: 15px;
        line-height: 11px;
      }
      input {
        height: 56px;
        margin-bottom: 24px;
        padding: 0 16px;
        font-size: 19px;
        border-radius: 8px;
      }
      button[type='submit'] {
        height: 56px;
        margin-bottom: 30px;
        border-radius: 8px;
        font-size: 19px;
      }
      a {
        font-size: 17px;
      }
      & input[type='radio'] + label {
        gap: 8px;
        font-size: 15px;
        &::before {
          width: 20px;
          height: 20px;
          min-width: 20px;
          min-height: 20px;
        }
        &::after {
          width: 10px;
          height: 10px;
          min-width: 10px;
          min-height: 10px;
          top: 10px;
          left: 10px;
          transform: translate(-50%, -50%);
        }
      }
    }
  }

  #addWeeklyModal{

    .drop_zone {
      gap: 24px;
      height: 210px;
      p {
        font-size: 17px;
      }
      label {
        width: 91px;
      }
      label::before {
        display: none;
      }
    }
    .result_wrap {
      .file p:not(.info) {
      }
    }
  }
}