.cta-base {
  /* layout */
  height: calc(var(--base-row-unit) * 2);
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  /* style */
  border-radius: 5px;
  background: var(--color-primary);
  color: var(--color-white);
}

/*============== 주후산: 1st_project_nav ==============*/
.cta-nav {
  height: fit-content;
  padding: 0 22px;
  background: var(--color-primary);
}

.nav-link-base {
  height: 39px;
  /* padding: 0 22px; */
}
/*============== 주후산: 1st_project_nav ==============*/

.cta-icon {
  width: 150px;
  height: fit-content;
  padding: 8.75px 22px;
  gap: 10px;
  letter-spacing: -1.2px;
}

.cta-reversed {
  /* layout */
  padding-top: 6.75px;
  padding-bottom: 6.75px;
  /* style */
  background: var(--color-transparent);
  color: var(--color-light-primary);
  border: 2px solid var(--color-light-primary);
}

.info-rounded {
  /* layout */
  height: var(--base-row-unit);
  padding: 3.75px 12px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  /* style */
  border-radius: 9999px;
  background: var(--color-white-low-transparency);
  border: 1px solid var(--color-white);
}

/*============== 주후산: 1st_project_nav ==============*/
/*======= nav =======*/
.hidden-text {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-black);
}
header > div:first-child {
  padding-top: 0;
  padding-bottom: 0;
}
header > div > div {
  height: calc(var(--base-row-unit) * 3);
  width: calc(100% - calc(var(--base-col-unit) * 2));
  /* padding-left: var(--base-col-unit); */
  margin: auto;
}
nav > ul {
  gap: calc(var(--base-row-unit) * 1.5);
}
.logo {
  align-items: center;
}
.hamburger-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger-btn span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-white);
}
/*======= nav =======*/

/*======= hero =======*/
.hero-wrapper {
  height: 540px;
  padding-top: calc(var(--base-row-unit) * 3);
  margin-bottom: calc(var(--base-row-unit) * 3);
  background: radial-gradient(
    circle 960px at center,
    var(--color-navy) 0%,
    var(--color-black) 100%
  );
}
.hero-wrapper > div {
  width: fit-content;
  height: 100%;
  gap: 47.5px;
}
/*======= hero =======*/

@media (max-width: 767px) {
  .hamburger-btn {
    display: flex;
  }
  nav > ul {
    /* layout */
    flex-direction: column;
    position: absolute;
    top: calc(var(--base-row-unit) * 3 + 10px);
    right: var(--base-col-unit);
    width: 200px;
    z-index: 9999;
    padding: 20px;
    gap: var(--base-row-unit);
    /* style */
    background: var(--color-light-black);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }
  nav > ul li:last-child > a {
    background-color: transparent;
    height: fit-content;
  }

  .hero-wrapper > div {
    scale: calc(100vw / 767px);
  }
}
/*============== 주후산: 1st_project_nav ==============*/

/*============== 주후산: 강좌 소개 ==============*/
.course-wrapper {
  /* layout */
  height: fit-content;
  padding: var(--base-row-unit) var(--base-col-unit);
  display: flex;
  flex-direction: column;
  gap: var(--base-row-unit);
  box-sizing: border-box;
  /* style */
  background-color: var(--color-light-black);
  border-radius: 20px;
}

/*--- toggle button ---*/
.hidden-radio {
  display: none;
}
.toggle-label {
  cursor: pointer;
}
.toggle-label a {
  pointer-events: none;
}

#toggle-online:checked ~ .cta-group .both-btn,
#toggle-both:checked ~ .cta-group .online-btn {
  /* layout */
  padding-top: 6.75px;
  padding-bottom: 6.75px;
  /* style */
  background: var(--color-transparent);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
}
/*--- toggle button ---*/

.course-card {
  /* layout */
  width: 392px;
  height: fit-content;
  padding: var(--base-row-unit) var(--base-col-unit);
  box-sizing: border-box;
  /* style */
  background: var(--color-black);
  border-radius: 20px;
  /* animation */
  transition: transform 0.3s ease;
}

.course-card:hover {
  /* animation */
  transform: scale(1.02);
  box-shadow: 1px 1px 15px rgba(255, 255, 0, 0.75);
}

.course-card-row {
  width: 100%;
  gap: var(--base-col-unit);
}

/* 
.course-wrapper > div:last-child > div:last-child article:last-child {
  background: var(--color-transparent);
}
   */

.course-card-header > span:last-child {
  background: var(--color-red-low-transparency);
  border-color: var(--color-red);
  color: var(--color-red);
}

.course-card-title {
  height: calc(var(--base-row-unit) * 3);
}

.course-card-main {
  gap: 16px;
}

.course-card-main p {
  margin-bottom: var(--base-row-unit);
}

.course-card-main hr {
  border: 0;
  height: 1px;
  width: 100%;
  margin: 0;
  background: var(--color-gray);
}

.course-card-title {
  height: calc(var(--base-row-unit) * 3);
}

.course-card-main-difficulty {
  gap: 10px;
  height: var(--base-row-unit);
}

.course-card-main-difficulty > span {
  font-size: var(--base-font);
}

.course-card-main-difficulty > ul {
  display: flex;
  gap: 3px;
}

.course-card-main-difficulty > span {
  color: var(--color-super-light-gray);
}

.difficulty-gui {
  /* layout */
  display: flex;
  align-items: center;
  width: 10px;
  height: 10px;
  /* style */
  background-color: var(--color-light-primary);
  border-radius: 50%;
}

.difficulty-gui-off {
  /* layout */
  display: flex;
  align-items: center;
  width: 10px;
  height: 10px;
  /* style */
  background-color: var(--color-gray);
  border-radius: 50%;
}

.course-card-main-stack {
  gap: 10px;
}

.course-card-main-stack span:first-child {
  color: var(--color-light-primary);
}

.course-card-main-stack span:last-child {
  color: var(--color-light-gray);
}

.course-card-main-cta span {
  background: var(--color-light-primary-low-transparency);
  border-color: var(--color-light-primary);
  color: var(--color-light-primary);
}

@media (max-width: 1023px) {
  .course-wrapper {
    border-radius: 0px;
    padding-top: 27px;
  }

  .course-card-row {
    flex-wrap: wrap;
  }

  .course-card {
    flex: 0 0 calc(50% - calc(var(--base-col-unit) / 2));
  }
}

@media (max-width: 767px) {
  /* .container {
    width: 100%;
    } */

  .course-card-row {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: calc(100% + 27px);
  }

  .course-card-row {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: calc(100% + 27px);
  }

  .course-card {
    /* layout */
    width: 100%;
  }

  .course-card:hover {
    /* animation */
    transform: scale(1.01);
  }

  .course-card-title {
    height: fit-content;
  }
}
/*============== 주후산: 강좌 소개 ==============*/

/* 최윤지: roadmap 시작 */
.roadmap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--base-row-unit) * 3) calc(var(--base-col-unit) * 2); /* 81px 48px */
  box-sizing: border-box;
  overflow: hidden;
  gap: calc(var(--base-row-unit) * 2); /* 54px */
}

/* roadmap-left */
.roadmap-left {
  max-width: 393px;
  width: 100%;
  padding-top: calc(var(--base-row-unit) * 2); /* 54px */
  padding-right: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--base-row-unit) * 2); /* 54px */
  position: sticky;
  top: calc(var(--base-row-unit) * 3); /* 81px */
  box-sizing: border-box;
}

.roadmap-title {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.roadmap-left span {
  font-size: var(--font-heading-l);
  line-height: calc(var(--base-row-unit) * 2);
  color: var(--color-light-primary);
  font-weight: bold;
}

.roadmap-left h2 {
  font-size: var(--font-heading-l);
  line-height: calc(var(--base-row-unit) * 2);
  color: var(--color-white);
  margin: 0;
  font-weight: bold;
}

.roadmap-desc {
  display: flex;
  flex-direction: column;
}

.roadmap-desc p {
  font-size: var(--font-body-l);
  line-height: calc(var(--base-row-unit) * 2);
  color: var(--color-super-light-gray);
  margin: 0;
  white-space: nowrap; /* 파이어폭스 줄바꿈 방지 */
}

.roadmap-desc p + p {
  margin-top: -12px;
}

/* roadmap-right */
.roadmap-right {
  max-width: 540px;
  width: 100%;
  max-height: 630px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: var(--base-row-unit);
  background-color: var(--color-light-black);
  border-radius: 16px;
  scrollbar-width: none; /* firefox */
}

.roadmap-right::-webkit-scrollbar {
  display: none;
}

/* roadmap-card */
.roadmap-card {
  max-width: 540px;
  width: 100%;
  padding: var(--base-col-unit); /* 24px */
  gap: var(--base-row-unit); /* 27px */
  border-radius: 16px;
  background-color: var(--color-light-black);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex-shrink: 0;
}

.roadmap-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: calc(var(--base-row-unit) * 2); /* 54px */
}

.roadmap-card-icon {
  width: calc(var(--base-row-unit) * 2); /* 54px */
  height: calc(var(--base-row-unit) * 2); /* 54px */
  padding: 13px 15px 14px 15px;
  border-radius: 15px;
  background-color: var(--color-light-primary-low-transparency);
  border: 1px solid var(--color-roadmap-card-1);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease;
}

.roadmap-card-icon span {
  color: var(--color-roadmap-card-1);
  font-size: var(--font-body-icon-l);
}

.card-2 .roadmap-card-icon {
  background-color: rgba(30, 95, 192, 0.15);
  border-color: var(--color-roadmap-card-2);
}
.card-2 .roadmap-card-icon span {
  color: var(--color-roadmap-card-2);
}
.card-2 .roadmap-badge {
  background-color: var(--color-roadmap-card-2);
}
.card-3 .roadmap-card-icon {
  background-color: rgba(18, 84, 187, 0.15);
  border-color: var(--color-roadmap-card-3);
}
.card-3 .roadmap-card-icon span {
  color: var(--color-roadmap-card-3);
}
.card-3 .roadmap-badge {
  background-color: var(--color-roadmap-card-3);
}
.card-4 .roadmap-card-icon {
  background-color: rgba(12, 77, 182, 0.15);
  border-color: var(--color-roadmap-card-4);
}
.card-4 .roadmap-card-icon span {
  color: var(--color-roadmap-card-4);
}
.card-4 .roadmap-badge {
  background-color: var(--color-roadmap-card-4);
}
.roadmap-card:hover .roadmap-card-icon {
  box-shadow: 0 0 15px rgba(47, 104, 197, 0.5);
}
.card-2:hover .roadmap-card-icon {
  box-shadow: 0 0 15px rgba(30, 95, 192, 0.5);
}
.card-3:hover .roadmap-card-icon {
  box-shadow: 0 0 15px rgba(18, 84, 187, 0.5);
}
.card-4:hover .roadmap-card-icon {
  box-shadow: 0 0 15px rgba(12, 77, 182, 0.5);
}

.roadmap-badge {
  height: var(--base-row-unit); /* 27px */
  padding: 3.75px 12px;
  border-radius: 9999px;
  background-color: var(--color-roadmap-card-1);
  color: var(--color-white);
  white-space: nowrap;
  box-sizing: border-box;
  font-size: var(--font-body-s-plus);
  display: inline-flex;
  align-items: center;
}

.roadmap-card-image {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

.roadmap-card-image img {
  width: 100%;
  height: 306.67px;
  object-fit: cover;
  border-radius: 8px;
}

.roadmap-card h3 {
  font-size: var(--font-heading-m);
  line-height: calc(var(--base-row-unit) * 2);
  color: var(--color-white);
  margin: 0;
  font-weight: 700;
}

.roadmap-card-desc {
  font-size: var(--font-body-m-plus);
  line-height: var(--base-row-unit);
  color: var(--color-super-light-gray);
  margin: 0;
}

@media (max-width: 1023px) {
  .roadmap {
    flex-direction: column;
    align-items: center;
    padding: calc(var(--base-row-unit) * 2) calc(var(--base-col-unit) * 1);
    overflow: visible;
  }

  .roadmap-left {
    position: static;
    width: 100%;
    text-align: center;
  }

  .roadmap-desc p {
    white-space: normal;
    word-break: keep-all;
  }

  .roadmap-right {
    width: 100%;
    max-width: 100%;
  }

  .roadmap-card {
    width: 100%;
    max-width: 100%;
  }
}
/* 최윤지: roadmap 끝 */
/* --- 최수민 : 추천 대상 및 교육 혜택 스타일 (최종본) --- */

.target-section {
  width: 100%;
  margin: 50px 0;
}

.target-inner {
  max-width: 1272px; /* 강사님 피드백 반영 너비 */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-navy);
  padding: 60px 80px;
  border-radius: 20px;
  color: var(--color-white);
  gap: 50px;
  flex-direction: row-reverse;
}

.target-list {
  display: flex;
  flex-direction: column;
  gap: 35px;
  flex: 1;
}

.target-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  cursor: pointer;
}

.icon-box {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-light-primary);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-light-primary-low-transparency);
  transition: all 0.3s ease;
}

.icon-box span {
  font-size: 24px;
  color: var(--color-light-primary);
}

.target-item:hover .icon-box {
  transform: scale(1.1) rotate(5deg);
  background-color: var(--color-light-primary);
}

.target-item:hover .icon-box span {
  color: var(--color-white);
}

.target-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.target-text strong {
  font-size: var(--font-body-m);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.4;
}

.target-text p {
  font-size: var(--font-body-s-plus);
  color: var(--color-super-light-gray);
  line-height: 1.6;
  margin: 0;
}

.target-header {
  flex-shrink: 0;
  width: 320px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.target-header h2 {
  font-size: var(--font-heading-m);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.target-header .highlight {
  color: var(--color-light-primary);
}

.target-header p {
  font-size: var(--font-body-m);
  color: var(--color-super-light-gray);
  line-height: 1.6;
  margin: 0;
}

/* --- 최수민 : 콘텐츠 섹션 스타일 (최종본) --- */

.contents-section {
  padding: 80px 0;
}

.contents-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contents-header {
  text-align: center;
  margin-bottom: 50px;
}

.contents-header h2 {
  font-size: var(--font-heading-m);
  font-weight: 700;
  color: var(--color-light-primary);
  margin-bottom: 10px;
}

.card-list {
  display: flex;
  gap: 30px;
  justify-content: center;
  width: 100%;
}

.contents-card {
  flex: 1;
  background: var(--color-light-black);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
}

.contents-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.card-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.more-link {
  margin-top: auto;
  padding-top: 20px;
  color: var(--color-light-primary);
  text-decoration: none;
  font-size: var(--font-body-s);
  transition: color 0.3s ease;
}

.contents-card:hover .more-link {
  color: var(--color-white);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: var(--base-row-unit) var(--base-col-unit);
    border-radius: 0;
    box-sizing: border-box;
  }

  .target-inner {
    display: flex;
    flex-direction: column;
  }

  .target-header {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
  }

  .target-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .target-item {
    width: 100%;
    box-sizing: border-box;
  }

  .target-text {
    word-break: keep-all;
  }

  .contents-header {
    text-align: center;
    margin-bottom: 30px;
  }

  .card-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .contents-card {
    width: 100%;
    box-sizing: border-box;
  }

  .card-image img {
    width: 100%;
    height: auto;
  }
}

/* 최성호: FAQ */
.course-wrapper .hidden-radio {
  display: none;
}

.faq-section {
  width: 100%;
  padding: calc(var(--base-row-unit) * 3) 0;
}

.faq-title {
  font-weight: 700;
  font-size: var(--font-heading-l);
  color: var(--color-light-primary);
  text-align: center;
  margin-bottom: calc(var(--base-row-unit) * 2);
}

.faq-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: 100%;
}

.faq-item {
  background-color: var(--color-light-black);
  border-radius: 15px;
  border: 1px solid var(--color-light-gray);
  margin-bottom: var(--base-row-unit);
  overflow: hidden;
}

.faq-item:last-child {
  margin-bottom: 0;
}

/* 질문 버튼 스타일 */
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: var(--base-col-unit) 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-body-m-plus-2);
  color: var(--color-white);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.faq-answer {
  /* 열림 효과 */
  max-height: 0;
  overflow: hidden;
  padding: 0 30px;
  font-size: var(--font-body-m); /* 16px */
  color: var(--color-super-light-gray); /* #CFCFCF */
  line-height: 1.6;
  transition: all 0.3s ease-out;
}

/* 열림 상태 */
.faq-item.is-open .faq-answer {
  max-height: 500px;
  padding-bottom: 30px;
}

.faq-item.is-open .icon-arrow {
  transform: rotate(180deg);
  color: var(--color-white);
}

.faq-question:hover .icon-arrow {
  color: var(--color-white);
}

.icon-arrow {
  display: inline-block;
  font-size: var(--font-body-icon-m);
  color: var(--color-light-gray);
  transition: transform 0.3s ease;
}

/* 최성호: 퀵 메뉴 */
.quick-menu {
  position: fixed;
  right: var(--base-col-unit);
  bottom: 50px;
  z-index: 1000;
}

.quick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-btn {
  width: 64px;
  height: 64px;
  background-color: var(--color-gray);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-btn:hover {
  background-color: var(--color-primary);
}

/* 모바일 대응 */
@media (max-width: 767px) {
  .faq-section {
    padding: calc(var(--base-row-unit) * 1.5) 0;
  }
  .faq-title {
    font-size: var(--font-heading-m);
  }
  .faq-question {
    font-size: var(--font-body-m);
    padding: 16px 20px;
  }
  .faq-answer {
    font-size: var(--font-body-s-plus);
  }
}

/*============== 주후산: popup, feature-footer ==============*/
/*======= popup =======*/
#popup {
  position: fixed;
  left: calc(var(--base-col-unit) * 2);
  top: calc(var(--base-row-unit) * 4);
  width: fit-content;
  height: fit-content;
  padding: calc(var(--base-row-unit) * 2) var(--base-col-unit);
  background: navy;
  z-index: 999999;
  border-radius: 20px;
}

#popup div:last-child a {
  gap: 3px;
}

#popup div:last-child > a:hover {
  background: white;
  color: navy;
}

#popup div:last-child > label > a {
  padding-left: 10px;
  padding-right: 10px;
  background: #c70000;
}

#popup hr {
  border: 0;
  height: 1px;
  width: 100%;
  margin: 0;
  background: var(--color-light-primary);
}

article:has(#toggle-popup:checked) {
  display: none;
}

@media (max-width: 767px) {
  #popup {
    width: 80vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
/*======= popup =======*/

/*======= footer-cta-section =======*/
.footer-cta-section {
  padding: calc(var(--base-row-unit) * 3);
  background: linear-gradient(
    to bottom,
    var(--color-black) 0%,
    var(--color-navy) 50%,
    var(--color-black) 100%
  );
}
.footer-cta-section > div {
  gap: calc(var(--base-row-unit) * 5);
}
.footer-cta-section img {
  position: absolute;
  bottom: 0;
  left: calc(50% - calc(111px / 2));
  z-index: 1;
}
.footer-cta-section img + a {
  position: relative;
  z-index: 2;
}
.footer-cta-section div:has(img) {
  position: relative;
}
.footer-cta-section div h2 > strong {
  color: var(--color-light-primary);
}

@media (max-width: 1023px) {
  .footer-cta-section > div > div:first-child {
    scale: calc(100vw / 1023px);
    transform-origin: bottom;
    width: max-content;
  }
}
/*======= footer-cta-section =======*/
/* 최윤지: footer 시작 */
footer {
  padding: var(--base-row-unit) var(--base-col-unit);
  gap: calc(var(--base-row-unit) * 2);
  box-sizing: border-box;
  background-color: var(--color-black);
}
/* footer-top */
.footer-top {
  align-items: flex-end;
  height: 139px;
  padding: 0 var(--base-col-unit);
  box-sizing: border-box;
}
.footer-info {
  gap: var(--base-row-unit);
  box-sizing: border-box;
}
.footer-info-text {
  gap: 12px;
}
.company-name {
  font-size: var(--font-body-m-plus-2-upper);
  line-height: var(--base-row-unit);
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}
.address {
  font-size: var(--font-body-m);
  line-height: var(--base-row-unit);
  color: var(--color-super-light-gray);
  margin: 0;
}
.sns-icons {
  gap: 20px;
}
.sns-icons a {
  color: var(--color-icon-gray);
  font-size: var(--font-body-icon-l);
  line-height: var(--base-row-unit);
}
/* footer-links */
.footer-links {
  gap: calc(var(--base-col-unit) * 2);
  height: 139px;
}
.link-column {
  height: 139px;
}
.link-column ul {
  gap: 12px;
}
.link-column strong {
  font-size: var(--font-body-m);
  font-weight: bold;
  color: var(--color-white);
}
.link-column ul li a {
  display: block;
  font-size: var(--font-body-s-plus);
  line-height: normal;
  color: var(--color-super-light-gray);
}
.link-column ul li:last-child a {
  line-height: 20px;
}
/* footer-bottom-wrapper */
.footer-bottom-wrapper {
  gap: var(--base-row-unit);
}
/* footer-divider */
.footer-divider {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--color-gray);
}
/* footer-bottom */
.footer-bottom {
  gap: 1px;
  height: fit-content;
  box-sizing: border-box;
}
.bottom-text {
  height: fit-content;
  padding: 0 var(--base-col-unit);
  box-sizing: border-box;
}
.copyright,
.slogan {
  font-size: var(--font-body-s-plus-auto);
  line-height: normal;
  color: var(--color-light-gray);
  margin: 0;
}
@media (max-width: 1023px) {
  footer {
    gap: var(--base-row-unit);
  }
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    height: fit-content;
    gap: var(--base-row-unit);
  }
  .footer-links {
    height: fit-content;
  }
  .link-column {
    height: fit-content;
    justify-content: flex-start;
    gap: var(--base-row-unit);
  }
  .footer-bottom-wrapper {
    gap: 12px;
  }
  .bottom-text {
    flex-direction: column;
    height: fit-content;
    gap: 4px;
  }
  .footer-bottom {
    height: fit-content;
  }
}
/* 최윤지: footer 끝 */
/*============== 주후산: feature-footer ==============*/