@charset "UTF-8";
@font-face {
  font-family: Pretendard;
  font-weight: 300;
  src: url(/font/Pretendard-Light.eot);
  src: local("※"), url(/font/Pretendard-Light.woff) format("woff");
}
@font-face {
  font-family: Pretendard;
  font-weight: 400;
  src: url(/font/Pretendard-Regular.eot);
  src: local("※"), url(/font/Pretendard-Regular.woff) format("woff");
}
@font-face {
  font-family: Pretendard;
  font-weight: 500;
  src: url(/font/Pretendard-Medium.eot);
  src: local("※"), url(/font/Pretendard-Medium.woff) format("woff");
}
@font-face {
  font-family: Pretendard;
  font-weight: 600;
  src: url(/font/Pretendard-SemiBold.eot);
  src: local("※"), url(/font/Pretendard-SemiBold.woff) format("woff");
}
@font-face {
  font-family: Pretendard;
  font-weight: 700;
  src: url(/font/Pretendard-Bold.eot);
  src: local("※"), url(/font/Pretendard-Bold.woff) format("woff");
}
#wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#nFooter {
  margin-top: auto;
}

.hidden {
  display: none !important;
}

.dropDown button.on + .dropDownList {
  opacity: 1;
  visibility: visible;
}
.dropDown a.on + .dropDownList {
  opacity: 1;
  visibility: visible;
}
.dropDown .dropDownList {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
}

/* 태그 배지 */
.tag-badge {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

.tag-badge.noPd {
  padding: 0;
}

.tag-badge.tealblue {
  background: #D6F3F9;
  color: #006C9C;
}

.tag-badge.blue {
  background: #CFE6FF;
  color: #0078FE;
}

.tag-badge.green {
  background: #DBF6E5;
  color: #118D57;
}

.tag-badge.yellow {
  background: #FFF1D6;
  color: #B76E00;
}

.tag-badge.red {
  background: #FFE4DE;
  color: #8B3B38;
}

.tag-badge.gray {
  background: #f3f4f6;
  color: #4b5563;
  font-weight: 500;
}

.tag-badge.rTealblue {
  background: #006C9C;
  color: #fff;
}

.tag-badge.rBlue {
  background: #0078FE;
  color: #fff;
}

.tag-badge.rGreen {
  background: #118D57;
  color: #fff;
}

.tag-badge.rYellow {
  background: #B76E00;
  color: #fff;
}

.tag-badge.rRed {
  background: #8B3B38;
  color: #fff;
}

.tag-badge.rGray {
  background: #4b5563;
  color: #fff;
  font-weight: 500;
}

.header-with-tabs .recHeader {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-with-tabs .recHeader.center {
  margin-top: 40px;
  justify-content: center;
}
.header-with-tabs .recHeader .fArea {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.header-with-tabs .recHeader .fArea .edit {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid rgba(145, 158, 171, 0.32);
}
.header-with-tabs .recSubTit {
  padding-bottom: 19px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: #8C969F;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  border-bottom: 1px solid #DADADA;
}
.header-with-tabs .recSubTit .info_con {
  position: relative;
  display: flex;
  align-items: center;
}
.header-with-tabs .recSubTit .info_con svg:hover + .info_box {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: all;
}
.header-with-tabs .recSubTit .info_con .info_box {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  padding: 10px 15px;
  width: 200px;
  border-radius: 12px;
  background: #1E284D;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: all 0.15s ease-in-out;
}
.header-with-tabs .recSubTit .info_con .info_box p {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}
.header-with-tabs .recSubTit .info_con .info_box::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #1E284D;
}
.header-with-tabs .recTit {
  color: #1C252E;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.64px;
}
.header-with-tabs .recTit strong {
  color: #396E9C;
  font-weight: 600;
}
.header-with-tabs .recGlobal {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #565F67;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
}
.header-with-tabs .recGlobal .refreshBtn {
  width: 29px;
  height: 29px;
}
.header-with-tabs .recGlobal .refreshBtn.rotating {
  animation: rotate360 0.6s ease-in-out;
}
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media screen and (max-width: 1024px) {
  .header-with-tabs .recGlobal {
    font-size: 17px;
  }
  .header-with-tabs .recTit {
    font-size: 26px;
  }
}
@media screen and (max-width: 767px) {
  .header-with-tabs .recGlobal {
    font-size: 16px;
  }
  .header-with-tabs .recGlobal .refreshBtn {
    width: 25px;
    height: 25px;
  }
  .header-with-tabs .recGlobal .refreshBtn svg {
    width: 25px;
    height: 25px;
  }
  .header-with-tabs .recTit {
    font-size: 22px;
  }
}

/* 국내/글로벌 탭 스타일 */
.main-category {
  margin: 20px 0 17px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
}

.category-item {
  flex: 1;
  padding: 30px 20px;
  text-align: center;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.48px;
  transition: 0.3s;
  cursor: pointer;
}
.category-item:not(.active):hover {
  filter: brightness(0.8);
}
.category-item.active {
  border: 1px solid var(--color);
}
.category-item:nth-child(1) {
  background: rgba(0, 184, 217, 0.14);
  --color: #00B8D9;
  color: var(--color);
}
.category-item:nth-child(2) {
  background: rgba(255, 113, 91, 0.24);
  --color: #FF715B;
  color: var(--color);
}
.category-item:nth-child(3) {
  background: rgba(0, 167, 111, 0.21);
  --color: #00A76F;
  color: var(--color);
}
.category-item:nth-child(4) {
  background: rgba(145, 158, 171, 0.2);
  --color: #676767;
  color: var(--color);
}
.category-item:nth-child(5) {
  background: rgba(104, 116, 224, 0.21);
  --color: #6874E0;
  color: var(--color);
}
.category-item:nth-child(6) {
  background: rgba(255, 171, 0, 0.2);
  --color: #FFAB00;
  color: var(--color);
}
.category-item:nth-child(7) {
  background: rgba(208, 19, 88, 0.2);
  --color: #D01358;
  color: var(--color);
}
.category-item:nth-child(8) {
  background: rgba(47, 116, 185, 0.2);
  --color: #2F74B9;
  color: var(--color);
}
.category-item:nth-child(9) {
  background: rgba(69, 79, 91, 0.31);
  --color: #454F5B;
  color: var(--color);
}
@media screen and (max-width: 767px) {
  .category-item {
    font-size: 15px;
    line-height: 35px;
  }
}

.sub-category-wrapper {
  position: relative;
  padding: 10px 0;
  border-radius: 8px;
  background: #496176;
}

.sub-category {
  margin: 0 45px;
  overflow: hidden;
}
.sub-category .swiper-slide {
  padding: 7px 19px;
  width: auto;
  border-radius: 30px;
  color: #FFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 133%;
  letter-spacing: -0.45px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.sub-category .swiper-slide.active {
  background: #FFF;
  color: #637381;
}
.sub-category .swiper-slide:not(.active):hover {
  background: rgba(0, 0, 0, 0.1);
}
.sub-category .swiper-button-prev, .sub-category .swiper-button-next {
  color: #fff;
  transform: scale(0.4);
}

.subjectDetail {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 4px 15px;
  flex-wrap: wrap;
}
.subjectDetail li.active a {
  color: #396E9C;
  border-bottom: 2px solid #396E9C;
}
.subjectDetail li.active a::before {
  background: #396E9C;
}
.subjectDetail a {
  position: relative;
  padding-left: 12px;
  display: block;
  color: #5B5B5B;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.15s ease-in-out;
}
.subjectDetail a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  background: #5B5B5B;
  border-radius: 50%;
  transform: translateY(-50%);
}
.subjectDetail a:hover {
  color: #111;
}
.subjectDetail a:hover::before {
  background: #111;
}

.subjectsTab {
  margin-top: 20px;
  margin-bottom: 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-y: auto;
}
.subjectsTab::-webkit-scrollbar {
  height: 4px;
}
.subjectsTab::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.subjectsTab li.active a {
  background: #396E9C;
  color: #fff;
}
.subjectsTab li:not(.active) a:hover {
  background: rgba(30, 40, 77, 0.1450980392);
}
.subjectsTab li a {
  padding: 0 12px;
  display: block;
  width: 100%;
  min-width: 100px;
  text-align: center;
  line-height: 40px;
  border-radius: 40px;
  background: rgba(145, 158, 171, 0.13);
  color: #676767;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.48px;
  box-sizing: border-box;
  transition: all 0.15s ease-in-out;
}
@media screen and (max-width: 767px) {
  .subjectsTab li a {
    line-height: 35px;
  }
}

.article-type-tabs {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 0;
}

.article-type-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 145px;
  height: 40px;
  font-size: 16px;
  color: #5C5C5C;
  font-weight: 500;
  border-bottom: 1px solid #E0E0E0;
  cursor: pointer;
  transition: all 0.2s ease;
}
.article-type-tab:hover {
  border-color: #0078FE;
}
.article-type-tab.active {
  font-size: 17px;
  color: #0078FE;
  font-weight: 700;
  border-bottom: 2px solid #0078FE;
}

.researchDesc {
  max-height: 481px;
  overflow-y: auto;
}
.researchDesc::-webkit-scrollbar {
  width: 6px;
}
.researchDesc::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.resDescBox {
  padding: 25px 0 20px;
  display: flex;
  border-bottom: 1px solid #ECECEC;
}
.resDescBox:hover .number {
  color: #1E284D;
}
.resDescBox .number {
  flex-shrink: 0;
  width: 65px;
  color: #919EAB;
  font-family: "Public Sans";
  font-size: 32px;
  font-weight: 900;
  transition: color 0.15s ease-in-out;
}
.resDescBox .desc {
  flex: 1;
}
.resDescBox .quote {
  margin-bottom: 8px;
  color: #00B8D9;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
}
.resDescBox .quote span {
  font-weight: 600;
}
.resDescBox .pin {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_1951_6360)'%3E%3Cpath d='M10.6485 14.5848L15.156 19.198L14.4375 15.1353L20.5703 7.56855L24 7.7523L16.422 -0.00195312V2.95155L9.207 9.5958L4.69125 8.4903L9.3825 13.4748L0 23.998L10.6485 14.5848Z' fill='%23FF715B'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1951_6360'%3E%3Crect width='24' height='24' fill='white' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center/cover;
}
@media screen and (max-width: 767px) {
  .resDescBox .pin {
    width: 20px;
    height: 20px;
  }
}
.resDescBox h4 {
  margin-bottom: 6px;
  color: #1C252E;
  font-size: 18px;
  font-weight: 700;
  line-height: 133%;
  letter-spacing: -0.36px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  height: auto;
}
.resDescBox .info {
  margin-bottom: 12px;
  color: #595959;
  font-size: 15px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resDescBox .text {
  color: #828282;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resDescBox:has(+ .viewMore) {
  border-bottom: none;
}

.resDescBox + .viewMore {
  margin-top: -1px;
}

.viewMore {
  margin: 20px auto 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  width: -moz-fit-content;
  width: fit-content;
  color: #6A6A6A;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.42px;
}
.viewMore::before {
  order: 1;
}

.recommend-section {
  margin-top: 90px;
}
.recommend-section h3 {
  padding-bottom: 20px;
  color: #222;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  border-bottom: 1px solid #E0E0E0;
}
.recommend-section .recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 30px;
}
@media screen and (max-width: 767px) {
  .recommend-section .recommend-grid {
    grid-template-columns: 1fr;
  }
}
.recommend-section .recommend-grid .resDescBox .pin {
  margin-right: 0;
  margin-left: 30px;
  align-self: flex-start;
}
@media screen and (max-width: 767px) {
  .recommend-section .recommend-grid .resDescBox {
    flex-wrap: nowrap;
  }
  .recommend-section .recommend-grid .resDescBox .pin {
    margin-left: 15px;
  }
}
@media screen and (max-width: 1024px) {
  .recommend-section h3 {
    padding-bottom: 16px;
    font-size: 26px;
  }
}
@media screen and (max-width: 767px) {
  .recommend-section {
    margin-top: 70px;
  }
  .recommend-section h3 {
    padding-bottom: 12px;
    font-size: 24px;
  }
}

.postit-section {
  position: relative;
  margin-top: 100px;
  background: url(/image/common/bg_post.png) no-repeat center/cover;
  padding: 40px;
  border-radius: 16px;
  min-height: 300px;
}
.postit-section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  z-index: 0;
}
.postit-section > * {
  position: relative;
  z-index: 1;
}
.postit-section h2 {
  margin-bottom: 8px;
  color: #FFF;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
}
.postit-section h3 {
  position: relative;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFF;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  z-index: 2;
}
.postit-section .tooltipCon {
  position: relative;
  display: flex;
  align-items: center;
}
.postit-section svg:hover + .tooltipD {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: all;
}
.postit-section .tooltipD {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  padding: 15px 20px;
  width: 300px;
  border-radius: 12px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  box-shadow: 0 20px 40px -4px rgba(145, 158, 171, 0.16);
  transition: all 0.15s ease-in-out;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  .postit-section .tooltipD {
    width: 250px;
  }
}
.postit-section .tooltipD::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #fff;
}
.postit-section .tooltipD p {
  color: #121212;
  font-size: 14px;
  font-weight: 600;
}
.postit-section .tooltipD p strong {
  color: #396E9C;
  font-weight: 700;
}
@media screen and (max-width: 1024px) {
  .postit-section {
    margin-top: 70px;
  }
  .postit-section h2 {
    font-size: 26px;
  }
}
@media screen and (max-width: 767px) {
  .postit-section {
    padding: 25px 20px;
  }
  .postit-section h2 {
    font-size: 24px;
  }
}

.postit-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.postit-container .postit-item {
  padding: 20px 15px 15px 15px;
  min-height: 206px;
  background: #FFF0C0;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.25);
  transform: rotate(-1deg);
}
.postit-container .postit-item:nth-child(even) {
  transform: rotate(2deg);
}
.postit-container .postit-item .postTags {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.postit-container .postit-item .postTags .tag-badges {
  color: #1E284D;
  font-size: 15px;
  font-weight: 500;
}
.postit-container .postit-item h4 {
  margin-bottom: 4px;
  color: #1C252E;
  font-size: 18px;
  font-weight: 700;
  line-height: 133%;
  letter-spacing: -0.36px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  height: auto;
}
.postit-container .postit-item .info {
  margin-bottom: 8px;
  color: #595959;
  font-size: 15px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.postit-container .postit-item .text {
  color: #626262;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  text-overflow: ellipsis;
}
.postit-container .postit-item .pin {
  vertical-align: middle;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_1951_6360)'%3E%3Cpath d='M10.6485 14.5848L15.156 19.198L14.4375 15.1353L20.5703 7.56855L24 7.7523L16.422 -0.00195312V2.95155L9.207 9.5958L4.69125 8.4903L9.3825 13.4748L0 23.998L10.6485 14.5848Z' fill='%23FF715B'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1951_6360'%3E%3Crect width='24' height='24' fill='white' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center/cover;
}
.postit-container .postit-item .topInfo {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.postit-container .postit-item .topInfo a {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #7D8B98;
}
.postit-container .postit-item .topInfo a .point {
  color: #FF715B;
  font-weight: 500;
}
.postit-container .postit-item .topInfo .del {
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M2.25 4.78169C2.25 4.41869 2.50875 4.12394 2.82825 4.12394H4.827C5.22375 4.11194 5.574 3.82469 5.709 3.40019L5.7315 3.32519L5.81775 3.03194C5.87025 2.85194 5.916 2.69444 5.9805 2.55419C6.234 1.99994 6.7035 1.61519 7.24575 1.51694C7.38375 1.49219 7.52925 1.49219 7.69575 1.49219H10.3043C10.4715 1.49219 10.617 1.49219 10.7542 1.51694C11.2965 1.61519 11.7667 1.99994 12.0195 2.55419C12.084 2.69444 12.1297 2.85119 12.183 3.03194L12.2685 3.32519L12.291 3.40019C12.426 3.82469 12.846 4.11269 13.2435 4.12394H15.171C15.4913 4.12394 15.75 4.41869 15.75 4.78169C15.75 5.14469 15.4913 5.43944 15.1718 5.43944H2.8275C2.50875 5.43944 2.25 5.14469 2.25 4.78169Z' fill='%23FF5630'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.697 16.4922H9.303C11.3903 16.4922 12.4335 16.4922 13.113 15.8277C13.791 15.1632 13.86 14.0734 13.9988 11.8939L14.199 8.75294C14.274 7.57019 14.3115 6.97844 13.9718 6.60419C13.6312 6.22919 13.0568 6.22919 11.907 6.22919H6.093C4.94325 6.22919 4.368 6.22919 4.02825 6.60419C3.68775 6.97919 3.72525 7.57019 3.801 8.75294L4.00125 11.8939C4.14 14.0734 4.209 15.1639 4.88775 15.8277C5.5665 16.4922 6.60975 16.4922 8.697 16.4922ZM7.6845 9.13394C7.6545 8.80844 7.3785 8.57144 7.0695 8.60369C6.75975 8.63594 6.53475 8.92619 6.5655 9.25169L6.9405 13.1989C6.9705 13.5244 7.2465 13.7614 7.5555 13.7292C7.86525 13.6969 8.09025 13.4067 8.0595 13.0812L7.6845 9.13394ZM10.9312 8.60369C11.2402 8.63594 11.466 8.92619 11.4345 9.25169L11.0595 13.1989C11.0295 13.5244 10.7527 13.7614 10.4445 13.7292C10.1347 13.6969 9.90975 13.4067 9.9405 13.0812L10.3155 9.13394C10.3455 8.80844 10.623 8.57144 10.9312 8.60369Z' fill='%23FF5630'/%3E%3C/svg%3E") no-repeat center/cover;
}
@media screen and (max-width: 767px) {
  .postit-container .postit-item h4 {
    font-size: 17px;
  }
}

.academic-tab-area {
  margin-top: 20px;
  margin-bottom: 30px;
}

.academic-tabs {
  padding: 8px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  border-radius: 12px;
  border: 1px solid #ededed;
  background: #f6f6f6;
}

.academic-tabs li {
  flex: 1;
  text-align: center;
}

.academic-tabs li a {
  padding: 18px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  color: #8e8e8e;
  font-size: 18px;
  font-weight: 700;
  transition: all 0.15s ease-in-out;
}

.academic-tabs li:not(.on) a:hover {
  color: #374151;
  background: rgba(0, 0, 0, 0.1);
}

.academic-tabs li.on a {
  background-color: #1E284D;
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
}

@media screen and (max-width: 1024px) {
  .academic-tabs li a {
    padding: 15px 0;
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  .academic-tabs li a {
    padding: 10px 0;
    font-size: 14px;
  }
}
/* =========================================
    [2] 상단 컨트롤 (탭 & 로그인)
    ========================================= */
.control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 24px;
}
.control-bar .nav-tab-group {
  display: inline-flex;
  background-color: #f3f4f6;
  padding: 6px;
  border-radius: 8px;
  gap: 6px;
}
.control-bar .nav-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.2s;
}
.control-bar .nav-tab.active {
  background: #fff;
  color: #637381;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.control-bar .nav-tab:not(.active):hover {
  background: rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 767px) {
  .control-bar {
    margin-top: 8px;
    margin-bottom: 16px;
  }
  .control-bar .nav-tab {
    padding: 6px 12px;
  }
}

.snu-card {
  position: relative;
  margin-bottom: 24px;
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
}
.snu-card .section-wrapper {
  margin-bottom: 24px;
}
.snu-card .section-wrapper .page-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px 0;
}
.snu-card .section-wrapper .page-desc {
  font-size: 15px;
  color: #6b7280;
  margin: 0;
}
.snu-card .timetable-layout {
  display: flex;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  flex-direction: column;
}
.snu-card {
  /* 좌측 시간축 */
}
.snu-card .time-sidebar {
  width: 60px;
  flex-shrink: 0;
  border-right: 1px solid #f3f4f6;
  position: relative;
  z-index: 5;
  background-color: #ffffff;
  padding-top: 0;
  border-top: none;
}
.snu-card .time-marker {
  height: 60px;
  position: relative;
  text-align: center;
}
.snu-card {
  /* 시간 텍스트 */
}
.snu-card .time-text {
  font-size: 11px;
  color: #9ca3af; /* gray-400 */
  top: 0;
  right: 12px;
  transform: translateY(-50%);
  background-color: #ffffff;
  padding: 0 4px;
  z-index: 6;
}
.snu-card {
  /* 우측 그리드 컨테이너 */
}
.snu-card .main-grid-wrapper {
  display: flex;
  position: relative;
}
.snu-card .grid-container {
  flex: 1;
  position: relative;
}
.snu-card {
  /* 요일 헤더 */
}
.snu-card .day-header {
  display: grid;
  grid-template-columns: 60px repeat(5, 1fr);
  height: 40px;
  align-items: center;
  text-align: center;
  background-color: #f9fafb; /* gray-50 */
  position: relative;
  z-index: 5;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563; /* gray-600 */
}
.snu-card .header-time-label {
  font-size: 11px;
  color: #9ca3af;
  border-right: 1px solid #f3f4f6;
}
.snu-card .grid-canvas {
  position: relative;
  height: 540px;
  border-bottom: 1px solid #f3f4f6;
}
.snu-card {
  /* 배경선 */
}
.snu-card .grid-lines-vertical {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: none;
}
.snu-card .line-v {
  border-right: 1px dashed #e5e7eb;
}
.snu-card .line-v:last-child {
  border-right: none;
}
.snu-card .grid-lines-horizontal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.snu-card .line-h {
  flex: 1;
  border-bottom: 1px solid #f3f4f6;
  position: relative;
}
.snu-card .line-h::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px dashed #e5e7eb;
}
.snu-card {
  /* 강의 셀 - 접근성: 버튼으로 변경 */
}
.snu-card .timetable-cell {
  position: absolute;
  z-index: 25;
  border-radius: 4px;
  padding: 8px;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  border-width: 1px;
  border-style: solid;
  text-align: left; /* 버튼 텍스트 정렬 */
  background: transparent;
}
.snu-card .timetable-cell:hover, .snu-card .timetable-cell:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 30;
}
.snu-card .cell-title {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
  color: #1f2937;
}
.snu-card .cell-loc {
  font-size: 11px;
  opacity: 0.8; /* 대비 개선 */
  color: #374151;
  display: block;
}
.snu-card .cell-selected {
  box-shadow: 0 0 0 2px #3b82f6, 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
  z-index: 3 !important;
}
.snu-card .gap-cell {
  z-index: 0;
  background-color: transparent;
}
.snu-card .gap-cell:hover, .snu-card .gap-cell:focus {
  background-color: rgba(59, 130, 246, 0.05);
}
.snu-card .gap-cell.has-event {
  background-color: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  z-index: 5;
}
.snu-card .event-indicator-pill {
  position: relative;
  height: 28px;
  width: 28px;
  background-color: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  overflow: hidden;
  z-index: 10;
}
.snu-card {
  /* 부모가 hover/focus 될 때 내부 pill 확장 */
}
.snu-card .timetable-cell:hover .event-indicator-pill,
.snu-card .timetable-cell:focus .event-indicator-pill {
  width: auto;
  min-width: 120px;
  max-width: 160px;
  background-color: #ffffff;
  border-color: #f59e0b;
  padding: 0 10px;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
  justify-content: flex-start;
  z-index: 20;
}
.snu-card .pill-text {
  display: none;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: #d97706;
  margin-left: 6px;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.2s 0.1s;
}
.snu-card .timetable-cell:hover .pill-text,
.snu-card .timetable-cell:focus .pill-text {
  display: block;
  opacity: 1;
  transform: translateX(0);
}
.snu-card .pill-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.snu-card {
  /* 시간표 동적 색상 팔레트 (Hex Fallback) */
}
.snu-card .bg-red-200 {
  background-color: #fecaca;
}
.snu-card .border-red-300 {
  border-color: #fca5a5;
}
.snu-card .bg-orange-200 {
  background-color: #fed7aa;
}
.snu-card .border-orange-300 {
  border-color: #fdba74;
}
.snu-card .bg-amber-200 {
  background-color: #fde68a;
}
.snu-card .border-amber-300 {
  border-color: #fcd34d;
}
.snu-card .bg-yellow-200 {
  background-color: #fef08a;
}
.snu-card .border-yellow-300 {
  border-color: #fde047;
}
.snu-card .bg-lime-200 {
  background-color: #d9f99d;
}
.snu-card .border-lime-300 {
  border-color: #bef264;
}
.snu-card .bg-green-200 {
  background-color: #bbf7d0;
}
.snu-card .border-green-300 {
  border-color: #86efac;
}
.snu-card .bg-emerald-200 {
  background-color: #a7f3d0;
}
.snu-card .border-emerald-300 {
  border-color: #6ee7b7;
}
.snu-card .bg-teal-200 {
  background-color: #99f6e4;
}
.snu-card .border-teal-300 {
  border-color: #5eead4;
}
.snu-card .bg-cyan-200 {
  background-color: #a5f3fc;
}
.snu-card .border-cyan-300 {
  border-color: #67e8f9;
}
.snu-card .bg-sky-200 {
  background-color: #bae6fd;
}
.snu-card .border-sky-300 {
  border-color: #7dd3fc;
}
.snu-card .bg-blue-200 {
  background-color: #bfdbfe;
}
.snu-card .border-blue-300 {
  border-color: #93c5fd;
}
.snu-card .bg-indigo-200 {
  background-color: #c7d2fe;
}
.snu-card .border-indigo-300 {
  border-color: #a5b4fc;
}
.snu-card .bg-violet-200 {
  background-color: #ddd6fe;
}
.snu-card .border-violet-300 {
  border-color: #c4b5fd;
}
.snu-card .bg-purple-200 {
  background-color: #e9d5ff;
}
.snu-card .border-purple-300 {
  border-color: #d8b4fe;
}
.snu-card .bg-fuchsia-200 {
  background-color: #f5d0fe;
}
.snu-card .border-fuchsia-300 {
  border-color: #f0abfc;
}
.snu-card .bg-pink-200 {
  background-color: #fbcfe8;
}
.snu-card .border-pink-300 {
  border-color: #f9a8d4;
}
.snu-card .bg-rose-200 {
  background-color: #fecdd3;
}
.snu-card .border-rose-300 {
  border-color: #fda4af;
}
.snu-card .bg-slate-200 {
  background-color: #e2e8f0;
}
.snu-card .border-slate-300 {
  border-color: #cbd5e1;
}
.snu-card .bg-gray-200 {
  background-color: #e5e7eb;
}
.snu-card .border-gray-300 {
  border-color: #d1d5db;
}
.snu-card .bg-stone-200 {
  background-color: #e7e5e4;
}
.snu-card .border-stone-300 {
  border-color: #d6d3d1;
}

.empty-guide-container {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 12px -4px rgba(145, 158, 171, 0.12);
}
.empty-guide-container .noLecture {
  padding: 30px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.empty-guide-container .noLecture .circle {
  margin-bottom: 30px;
  width: 165px;
  height: 165px;
  border-radius: 50%;
  background: #E9ECEE;
  display: flex;
  justify-content: center;
  align-items: center;
}
.empty-guide-container .noLecture .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.empty-guide-container .noLecture .text p {
  text-align: center;
  color: #565656;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.32px;
}
.empty-guide-container .noLecture .text p.strong {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.empty-guide-container .noLecture .text .loginTxt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #394263;
  font-family: "Public Sans";
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.empty-guide-container .noLecture .text .loginTxt::before {
  order: 1;
}
.empty-guide-container .noLecture .text .loginTxt:hover {
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  .empty-guide-container .noLecture .circle {
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
  }
  .empty-guide-container .noLecture .circle svg {
    width: 50px;
    height: 50px;
  }
  .empty-guide-container .noLecture .text p {
    font-size: 15px;
  }
  .empty-guide-container .noLecture .text p.strong {
    font-size: 17px;
  }
  .empty-guide-container .noLecture .text .loginTxt {
    font-size: 15px;
  }
}

.detail-container {
  min-height: 240px;
  margin-top: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}
.detail-container .detail-placeholder {
  flex: 1;
  display: flex;
  padding: 40px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 15px;
}
.detail-container .xi-time-o {
  display: flex;
  align-items: center;
  gap: 4px;
}
.detail-container .row-flex {
  display: flex;
  align-items: center;
}
.detail-container .gap-2 {
  gap: 8px;
}
.detail-container .flex-wrap {
  flex-wrap: wrap;
}
.detail-container .detail-icon-large {
  font-size: 40px;
  margin-bottom: 12px;
}
.detail-container .detail-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(145, 158, 171, 0.16);
}
.detail-container .detail-subject {
  font-size: 18px;
  font-weight: 600;
  color: #222;
}
.detail-container .culture-grid-3col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.detail-container .culture-grid-3col:has(.no-culture) {
  min-height: 100px;
}
.detail-container {
  /* 접근성: 버튼으로 변경 */
}
.detail-container .culture-item-card {
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  width: 100%;
}
.detail-container .culture-item-card:hover, .detail-container .culture-item-card:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #1877F2;
  text-decoration: none;
}
.detail-container .culture-card-top {
  display: flex;
  flex-direction: column;
}
.detail-container .culture-title {
  margin-top: 12px;
  margin-bottom: 6px;
  color: #1C252E;
  font-weight: 700;
  font-size: 16px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.detail-container .culture-desc {
  margin-bottom: 10px;
  font-size: 15px;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.detail-container .section-heading {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 700;
  color: #2A2A2A;
}
.detail-container .xi-maker {
  color: #676767;
  font-size: 14px;
}
.detail-container .xi-maker::before {
  color: #FF715B;
}
.detail-container .no-culture {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #6b7280;
  font-size: 15px;
}

/* 공강 플러스 */
#view-snunow .snu-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  position: relative;
}
#view-snunow .col-flex {
  display: flex;
  flex-direction: column;
}
#view-snunow .row-flex {
  display: flex;
  align-items: center;
}
#view-snunow .gap-2 {
  gap: 8px;
}
#view-snunow .gap-6 {
  gap: 24px;
}
#view-snunow .section-heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
#view-snunow .count-badge {
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  background: #CFE6FF;
  color: #0078FE;
}
#view-snunow .section-header {
  margin-bottom: 10px;
}
#view-snunow .slider-root {
  position: relative;
}
#view-snunow .slider-root .snunowS {
  position: relative;
  overflow: hidden;
}
#view-snunow .slider-root .snunowS a {
  display: block;
  margin-bottom: 20px;
  padding: 24px;
  border-radius: 8px;
  max-width: 100%;
  border: 1px solid rgba(0, 184, 217, 0.16);
  background: rgba(0, 184, 217, 0.05);
  transition: all 0.2s ease-in-out;
}
#view-snunow .slider-root .snunowS a:hover {
  background: rgba(0, 184, 217, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
#view-snunow .slider-root .swiper-button-prev, #view-snunow .slider-root .swiper-button-next {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease-in-out;
}
#view-snunow .slider-root .swiper-button-prev::after, #view-snunow .slider-root .swiper-button-next::after {
  display: none;
}
#view-snunow .slider-root .swiper-button-prev:hover, #view-snunow .slider-root .swiper-button-next:hover {
  background: rgba(255, 255, 255, 0.8);
}
#view-snunow .slider-root .swiper-button-prev {
  left: -17px;
}
#view-snunow .slider-root .swiper-button-next {
  right: -17px;
}
#view-snunow .slider-root .swiper-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 3px;
}
#view-snunow .slider-root .swiper-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  border-radius: 30px;
  transition: all 0.3s ease-in-out;
}
#view-snunow .slider-root .swiper-pagination .swiper-pagination-bullet-active {
  width: 20px;
}
#view-snunow .slider-root .swiper-pagination-bullet-active {
  background: #396E9C;
}
#view-snunow .evt-badge-row {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#view-snunow .xi-users {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #637381;
  font-size: 14px;
  font-weight: 500;
}
#view-snunow .evt-title {
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #1C252E;
  font-size: 18px;
  font-weight: 600;
  line-height: 133%;
  letter-spacing: -0.36px;
}
#view-snunow .evt-data-con {
  display: flex;
  gap: 24px;
}
#view-snunow .img-con {
  width: 120px;
  aspect-ratio: 3/4;
  border-radius: 10px;
  border: 1px solid rgba(145, 158, 171, 0.28);
  overflow: hidden;
}
#view-snunow .img-con img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#view-snunow .evt-desc-con {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#view-snunow .evt-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  font-size: 16px;
}
#view-snunow .xi-maker::before {
  color: #FF715B;
}
#view-snunow .evt-data-con:not(:has(img)) .evt-recruit {
  margin-top: 51px;
}
#view-snunow .evt-recruit {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(145, 158, 171, 0.16);
  display: flex;
  align-items: center;
  gap: 6px;
  color: #396E9C;
  font-size: 14px;
}
#view-snunow .accordion-wrap {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 32px;
}
#view-snunow .accordion-summary {
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}
#view-snunow .accordion-content {
  padding: 16px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 8px 8px;
}
#view-snunow .search-box {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}
#view-snunow .search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: #9ca3af;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  background: transparent;
}
#view-snunow .search-icon:hover {
  color: #0078FE;
}
#view-snunow .search-field {
  width: 100%;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(145, 158, 171, 0.2);
  border-radius: 8px;
  outline: none;
  font-size: 13px;
  background-color: #fff;
}
#view-snunow .search-field::-moz-placeholder {
  color: #919EAB;
}
#view-snunow .search-field::placeholder {
  color: #919EAB;
}
#view-snunow .search-field:focus {
  border-color: #0078FE;
}
#view-snunow .filter-group {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
#view-snunow .date-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #637381;
  font-size: 13px;
  font-weight: 600;
}
#view-snunow .date-field {
  border-radius: 6px;
  font-size: 14px;
  color: #919EAB;
}
#view-snunow .chk {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#view-snunow .check-icon {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  border: 1px solid rgba(145, 158, 171, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}
#view-snunow .check-icon::after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
}
#view-snunow .chk-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
#view-snunow .chk:checked + .chk-custom {
  border-color: #007AFF;
}
#view-snunow .chk:checked + .chk-custom .check-icon {
  background: #007AFF;
  border-color: #007AFF;
}
#view-snunow .chk:checked + .chk-custom .check-icon::after {
  opacity: 1;
}
#view-snunow .snunowS-type2 {
  overflow-x: clip;
}
#view-snunow .snunowS-type2 a {
  display: block;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease-in-out;
}
#view-snunow .snunowS-type2 a:hover {
  transform: translateY(-3px);
}
#view-snunow .lib-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#view-snunow .lib-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(136, 136, 136, 0.16);
  background: rgba(0, 167, 111, 0.05);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
  text-decoration: none;
}
#view-snunow .lib-item:hover {
  background: rgba(0, 167, 111, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
#view-snunow .lib-meta {
  display: flex;
  align-items: center;
  gap: 6px 16px;
  flex-wrap: wrap;
  color: #9E9E9E;
}
#view-snunow .lib-meta span {
  font-weight: 500;
}
#view-snunow .lib-title {
  margin-bottom: 8px;
  color: #2A2A2A;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.54px;
}
@media screen and (max-width: 767px) {
  #view-snunow .snu-card {
    padding: 24px 16px;
  }
  #view-snunow .section-header {
    margin-bottom: 7px;
  }
  #view-snunow .section-wrapper {
    margin-bottom: 16px;
  }
  #view-snunow .slider-root .snunowS a {
    padding: 16px;
  }
  #view-snunow .slider-root .snunowS-type2 a {
    padding: 16px;
  }
  #view-snunow .img-con {
    width: 90px;
  }
  #view-snunow .evt-data-con {
    gap: 16px;
  }
  #view-snunow .evt-title {
    font-size: 16px;
  }
  #view-snunow .evt-meta-row {
    font-size: 14px;
  }
  #view-snunow .evt-data-con:not(:has(img)) .evt-recruit {
    margin-top: 20px;
  }
}

/* 모달 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open {
  display: flex;
}
.modal-overlay .modal-content-box {
  background: #fff;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
}
.modal-overlay .modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  color: #637381;
}
.modal-overlay .modal-header-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.modal-overlay .modal-title {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #1C252E;
  line-height: 1.4;
}
.modal-overlay .modal-body-scroll {
  overflow-y: auto;
  padding-right: 4px;
  flex: 1;
}
.modal-overlay .info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 14px;
}
.modal-overlay .info-table th {
  text-align: left;
  color: #637381;
  font-weight: 600;
  width: 80px;
  padding: 6px 0;
  vertical-align: top;
}
.modal-overlay .info-table td {
  color: #1C252E;
  padding: 6px 0;
  vertical-align: top;
  line-height: 1.5;
}
.modal-overlay .section-title {
  font-size: 15px;
  font-weight: 600;
  color: #1C252E;
  margin: 24px 0 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}
.modal-overlay .desc-content {
  font-size: 14px;
  line-height: 1.6;
  color: #637381;
  white-space: pre-line;
  min-height: 80px;
}
.modal-overlay .btn-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  background-color: #396E9C;
  color: white;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.modal-overlay .btn-apply:hover {
  background-color: #2C5F85;
}
.modal-overlay .btn-apply.disabled {
  background-color: #d1d5db;
  cursor: not-allowed;
  pointer-events: none;
}
.modal-overlay .box-caution {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 86, 48, 0.16);
  background: rgba(255, 86, 48, 0.08);
  color: #B71D18;
  font-size: 14px;
}
.modal-overlay .btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  background-color: #f3f4f6;
  font-size: 14px;
  color: #637381;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.2s;
}
.modal-overlay .btn-secondary:hover {
  background-color: #e5e7eb;
  color: #1C252E;
}
.modal-overlay .btn-secondary:hover svg path {
  stroke: #1C252E;
}
@media screen and (max-width: 767px) {
  .modal-overlay .modal-content-box {
    padding: 24px 16px;
    width: 95%;
  }
  .modal-overlay .modal-title {
    margin-bottom: 10px;
    font-size: 17px;
  }
  .modal-overlay .info-table th {
    padding: 4px 0;
  }
  .modal-overlay .info-table td {
    padding: 4px 0;
  }
  .modal-overlay .section-title {
    margin: 18px 0 6px 0;
  }
  .modal-overlay .desc-content {
    min-height: 50px;
  }
  .modal-overlay .box-caution {
    padding: 10px;
  }
}

/* 레이아웃 래퍼 */
.tw-wrapper {
  margin-bottom: 24px;
}

.mj-container {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 24px;
}

@media screen and (max-width: 767px) {
  .mj-container {
    gap: 32px;
    padding-top: 12px;
  }
}
.mj-hidden {
  display: none !important;
}

/* 색션공통 */
.mj-section-title {
  margin: 0 0 12px 0;
  font-size: 28px;
  font-weight: 700;
  color: #222;
}
@media screen and (max-width: 767px) {
  .mj-section-title {
    margin-bottom: 8px;
    font-size: 22px;
  }
}

.mj-section-desc {
  font-size: 16px;
  color: #676767;
  margin: 0 0 24px 0;
}
@media screen and (max-width: 767px) {
  .mj-section-desc {
    margin-bottom: 16px;
    font-size: 15px;
  }
}

/* 트렌드 탭 영역 */
.mj-rec-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  background-color: #f3f4f6;
  border-radius: 8px;
  padding: 4px;
}

.mj-rec-tab-btn {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}
.mj-rec-tab-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  color: #111827;
}
.mj-rec-tab-btn.active {
  background-color: #3b82f6;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mj-rec-content {
  display: none;
}
.mj-rec-content.active {
  display: block;
  animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================
    [2] 맞춤 전공 추천 (Recommendations)
    ========================================= */
.mj-rec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media screen and (min-width: 992px) {
  .mj-rec-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 550px) {
  .mj-rec-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

.mj-rec-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  transition: all 0.2s;
  height: 100%;
  transition: all 0.2s;
  height: 100%;
}
.mj-rec-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mj-rec-item.best {
  border-color: #396E9C;
  box-shadow: 0 0 0 1px #396E9C;
}
.mj-rec-item.best .mj-rec-rank {
  color: rgba(57, 110, 156, 0.5411764706);
}
@media screen and (max-width: 767px) {
  .mj-rec-item {
    padding: 18px;
  }
}

.mj-rec-rank {
  font-size: 32px;
  font-weight: 700;
  color: #d1d5db;
  line-height: 1;
  margin-bottom: 12px;
}
@media screen and (max-width: 767px) {
  .mj-rec-rank {
    font-size: 28px;
    margin-bottom: 8px;
  }
}

.mj-rec-name {
  font-size: 17px;
  font-weight: 700;
  color: #2A2A2A;
  margin: 0 0 8px 0;
}
@media screen and (max-width: 767px) {
  .mj-rec-name {
    margin-bottom: 3px;
  }
}

.mj-rec-text {
  font-size: 15px;
  color: #737373;
  line-height: 1.5;
  margin-bottom: 16px;
  min-height: 42px;
}

.mj-rec-btn {
  width: 100%;
  padding: 10px 0;
  border-radius: 8px;
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.mj-rec-btn.primary {
  background-color: #396E9C;
  color: #fff;
}

.mj-rec-btn.primary:hover {
  background-color: #2c5d7a;
}

.mj-rec-btn.secondary {
  background-color: #4b5563;
  color: #fff;
  border: 1px solid #e5e7eb;
}

.mj-rec-btn.secondary:hover {
  background-color: #374151;
}

/* =========================================
[3] 트렌드 & 시너지 (Trends)
========================================= */
.mj-trend-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .mj-trend-layout {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .mj-trend-layout {
    gap: 16px;
  }
}
.mj-card-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: #1E284D;
  margin: 0 0 20px 0;
}

.mj-chart-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mj-chart-list .mj-chart-item:nth-child(1) .mj-chart-fill {
  opacity: 1;
}

.mj-chart-list .mj-chart-item:nth-child(2) .mj-chart-fill {
  opacity: 0.8;
}

.mj-chart-list .mj-chart-item:nth-child(3) .mj-chart-fill {
  opacity: 0.6;
}

.mj-chart-list .mj-chart-item:nth-child(4) .mj-chart-fill {
  opacity: 0.4;
}

.mj-chart-list .mj-chart-item:nth-child(5) .mj-chart-fill {
  opacity: 0.2;
}

.mj-chart-item {
  width: 100%;
}

.mj-chart-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 500;
}

.mj-chart-label {
  color: #1C2525;
  font-size: 15px;
}

.mj-chart-label.top {
  color: #396E9C;
  font-weight: 700;
}

.mj-chart-val {
  color: #595959;
  font-size: 14px;
}

.mj-chart-val.top {
  color: #396E9C;
  font-weight: 700;
}

.mj-chart-bg {
  width: 100%;
  height: 10px;
  background-color: #f3f4f6;
  border-radius: 99px;
  overflow: hidden;
}

.mj-chart-fill {
  height: 100%;
  border-radius: 99px;
  background-color: #396E9C;
  transition: width 1s ease-out;
}

.mj-chart-fill.top {
  background-color: #396E9C;
}

@media screen and (max-width: 767px) {
  .mj-card-subtitle {
    margin-bottom: 16px;
    font-size: 17px;
  }
  .mj-chart-list {
    gap: 12px;
  }
  .mj-chart-label {
    font-size: 14px;
  }
}
.mj-syn-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.mj-syn-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background-color: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
}

.mj-syn-rank {
  width: 24px;
  font-size: 18px;
  font-weight: 700;
  color: #7D8B98;
  text-align: center;
  margin-right: 12px;
}

.mj-syn-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mj-syn-plus {
  color: #9ca3af;
  font-weight: 700;
  font-size: 0.875rem;
}

/* 학과 배지 스타일 */
.mj-dept-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-soc {
  background-color: #f3e8ff;
  color: #6b21a8;
}

.badge-biz {
  background-color: #dbeafe;
  color: #1e40af;
}

.badge-hum {
  background-color: #fce7f3;
  color: #9d174d;
}

.badge-nat {
  background-color: #dcfce7;
  color: #166534;
}

.badge-eng {
  background-color: #dcfce7;
  color: #15803d;
}

.badge-etc {
  background-color: #fef9c3;
  color: #854d0e;
}

/* 공통 카드 박스 */
.mj-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100%;
}

.mj-card.no-pad {
  padding: 0;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .mj-card {
    padding: 20px 18px;
  }
}
/* 트렌드 탭 영역 */
.mj-trend-tabs {
  display: flex;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #9ca3af;
}

@media screen and (max-width: 767px) {
  .mj-trend-tabs {
    font-size: 15px;
    gap: 6px;
  }
}
.mj-trend-sep {
  color: #d1d5db;
  font-weight: 400;
  margin: 0 4px;
}

.mj-rec-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  background-color: #f3f4f6;
  border-radius: 8px;
  padding: 4px;
}

.mj-rec-tab-btn {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

.mj-rec-tab-btn:hover {
  color: #111827;
  background-color: rgba(255, 255, 255, 0.5);
}

.mj-rec-tab-btn.active {
  background-color: #3b82f6;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mj-rec-content {
  display: none;
}

.mj-rec-content.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mj-syn-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
}

.mj-syn-tab-btn {
  background-color: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  position: relative;
}

.mj-syn-tab-btn.active {
  background-color: #3b82f6;
  color: #ffffff;
  font-weight: 700;
  border-radius: 4px;
}

.mj-syn-sep {
  display: flex;
  align-items: center;
  color: #d1d5db;
  font-size: 0.8rem;
  margin: 0 4px;
}

/* =========================================
[4] 단과대학 현황 (College View)
========================================= */
.mj-col-view {
  display: flex;
  gap: 24px;
  min-height: 600px;
  align-items: stretch;
}

@media (max-width: 768px) {
  .mj-col-view {
    flex-direction: column;
    height: auto;
    gap: 8px;
  }
}
.mj-col-nav {
  width: 240px;
  flex-shrink: 0;
  background-color: #ffffff;
  border: 1px solid #E2E2E2;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: auto;
  overflow: hidden;
}

.mj-nav-head {
  flex-shrink: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  background-color: #fff;
}

.mj-nav-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mj-nav-list::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}

.mj-nav-list::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 3px;
}

.mj-nav-list::-webkit-scrollbar-track {
  background-color: transparent;
}

.mj-nav-btn {
  width: 100%;
  text-align: left;
  padding: 14px 20px;
  background: transparent;
  border-left: 2px solid transparent;
  font-family: "Public Sans";
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s;
}

.mj-nav-btn:hover {
  background-color: #f9fafb;
}

.mj-nav-btn.active {
  background-color: #F1F3F4;
  color: #1E284D;
  font-size: 15px;
  font-weight: 700;
  border-left-color: #1E284D;
}

@media (max-width: 768px) {
  .mj-col-nav {
    width: 100%;
  }
  .mj-nav-list {
    display: flex;
  }
  .mj-nav-btn {
    padding: 10px 16px;
  }
  .mj-nav-btn.active {
    border-left: 0;
    border-top: 2px solid #1E284D;
  }
}
.mj-col-detail {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

@media screen and (max-width: 767px) {
  .mj-col-detail {
    padding: 18px;
  }
}
.mj-col-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.mj-col-name {
  font-size: 24px;
  font-weight: 700;
  color: #1E284D;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .mj-col-name {
    font-size: 21px;
  }
}
.mj-col-period {
  font-size: 14px;
  font-weight: 500;
  color: #9E9E9E;
  margin-top: 4px;
}

.mj-col-link {
  font-size: 15px;
  color: #396E9C;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 10px;
}

.mj-col-link:hover {
  color: #396E9C;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .mj-col-link {
    margin-bottom: 5px;
  }
}
.mj-col-desc {
  font-size: 15px;
  color: #737373;
  line-height: 1.6;
  margin-bottom: 24px;
  padding-bottom: 0;
  border-bottom: none;
}

@media screen and (max-width: 767px) {
  .mj-col-desc {
    margin-bottom: 16px;
    font-size: 14px;
  }
}
.mj-dept-area {
  margin-bottom: 32px;
}

.mj-sub-head {
  font-size: 18px;
  font-weight: 700;
  color: #2A2A2A;
  margin: 0 0 12px 0;
}

.mj-dept-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mj-dept-btn {
  padding: 7px 12px;
  background: rgba(145, 158, 171, 0.12);
  border-radius: 10px;
  font-family: "Public Sans";
  font-size: 13px;
  font-weight: 500;
  color: #1C252E;
  cursor: pointer;
  transition: all 0.2s;
}

.mj-dept-btn:hover {
  background: rgba(145, 158, 171, 0.2);
  border-color: #d1d5db;
  color: #1f2937;
}

.mj-dept-btn.active {
  background-color: #eff6ff;
  border-color: #3b82f6;
  color: #3b82f6;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.1);
}

.mj-stat-area {
  flex: 1;
  background-color: #f9fafb;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #f3f4f6;
}

.mj-stat-row {
  margin-bottom: 16px;
}

.mj-stat-row:last-child {
  margin-bottom: 0;
}

.mj-stat-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.mj-stat-label {
  font-weight: 400;
  color: #1C2525;
  font-size: 15px;
}

.mj-stat-val {
  color: #595959;
  font-size: 14px;
}

.mj-stat-bar-bg {
  width: 100%;
  height: 8px;
  background-color: rgba(145, 158, 171, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.mj-stat-bar-fill {
  height: 100%;
  background-color: #396E9C;
  border-radius: 4px;
  width: 0;
  opacity: 0.2;
  transition: width 0.8s ease-out;
}

.mj-stat-row.top .mj-stat-label {
  color: #396E9C;
  font-weight: 700;
}

.mj-stat-row.top .mj-stat-val {
  color: #396E9C;
  font-weight: 700;
}

.mj-stat-row.top .mj-stat-bar-fill {
  background-color: #396E9C;
}

.mj-stat-area .mj-stat-row:nth-child(1) .mj-stat-bar-fill {
  opacity: 1;
}

.mj-stat-area .mj-stat-row:nth-child(2) .mj-stat-bar-fill {
  opacity: 0.9;
}

.mj-stat-area .mj-stat-row:nth-child(3) .mj-stat-bar-fill {
  opacity: 0.8;
}

.mj-stat-area .mj-stat-row:nth-child(4) .mj-stat-bar-fill {
  opacity: 0.7;
}

.mj-stat-area .mj-stat-row:nth-child(5) .mj-stat-bar-fill {
  opacity: 0.6;
}

.mj-stat-area .mj-stat-row:nth-child(6) .mj-stat-bar-fill {
  opacity: 0.5;
}

.mj-stat-area .mj-stat-row:nth-child(7) .mj-stat-bar-fill {
  opacity: 0.4;
}

.mj-stat-area .mj-stat-row:nth-child(8) .mj-stat-bar-fill {
  opacity: 0.3;
}

@media screen and (max-width: 767px) {
  .mj-sub-head {
    font-size: 17px;
  }
  .mj-stat-row {
    margin-bottom: 12px;
  }
  .mj-stat-area {
    padding: 16px;
  }
  .mj-stat-label {
    font-size: 14px;
  }
}
/* =========================================
[5] 특별 전공 (Special Majors)
========================================= */
.mj-tab-menu {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 24px;
}

.mj-tab-link {
  padding: 6px 12px;
  border-bottom: 2px solid transparent;
  font-family: "Pretendard", -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s;
}

.mj-tab-link:hover {
  color: #374151;
  text-decoration: none;
}

.mj-tab-link.active {
  border-bottom-color: #396E9C;
  color: #396E9C;
  font-weight: 600;
}

.mj-spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .mj-spec-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.mj-spec-box {
  padding: 24px;
  border-radius: 12px;
  height: 100%;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
}

.mj-spec-box.union {
  background-color: #eff6ff;
  border-color: #dbeafe;
}

.mj-spec-box.link {
  background-color: rgba(0, 167, 111, 0.08);
  border-color: rgba(136, 136, 136, 0.16);
}

.mj-spec-head {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mj-spec-head.blue {
  color: #0078FE;
}

.mj-spec-head.green {
  color: #367D73;
}

.mj-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}

/* 접근성: 버튼 스타일 */
.mj-spec-chip {
  position: relative;
  padding: 8px 16px;
  background-color: #fff;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.union .mj-spec-chip {
  color: #0078FE;
  border-color: #dbeafe;
}

.union .mj-spec-chip:hover {
  background-color: #CFE6FF;
}

.link .mj-spec-chip {
  color: #118D57;
  border-color: #dcfce7;
}

.link .mj-spec-chip:hover {
  background-color: #DBF6E5;
}

.mj-spec-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mj-table-head {
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
}

@media screen and (max-width: 767px) {
  .mj-table-head {
    padding: 18px;
  }
}
.mj-table-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.mj-table-desc {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0;
}

.mj-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.mj-data-table th {
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #374151;
}

.mj-data-table td {
  padding: 18px 24px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
  font-size: 0.9rem;
  color: #374151;
}

.mj-data-table tr:hover {
  background-color: #f9fafb;
}

.mj-year-txt {
  color: #3b82f6;
  font-weight: 700;
  width: 100px;
}

.mj-list-ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.mj-list-ul li {
  margin-bottom: 4px;
}

/* 트렌드 탭 영역 */
.mj-trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.mj-trend-tab-btn {
  padding: 6px 12px;
  background: none;
  font-family: "Pretendard", -apple-system, sans-serif;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.mj-trend-tab-btn:hover {
  color: #1C2525;
  text-decoration: none;
}

.mj-trend-tab-btn.active {
  color: #396E9C;
  font-weight: 600;
  border-bottom: 2px solid #396E9C;
}

.mj-trend-sep {
  color: #d1d5db;
  font-weight: 400;
  margin: 0 4px;
}

.mj-trend-period {
  margin-top: 16px;
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  color: #9E9E9E;
}

@media screen and (max-width: 767px) {
  .mj-trend-header {
    margin-bottom: 16px;
  }
}
.mj-rec-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  background-color: #f3f4f6;
  border-radius: 8px;
  padding: 4px;
}

.mj-rec-tab-btn {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

.mj-rec-tab-btn:hover {
  color: #111827;
  background-color: rgba(255, 255, 255, 0.5);
}

.mj-rec-tab-btn.active {
  background-color: #3b82f6;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mj-rec-content {
  display: none;
}

.mj-rec-content.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mj-syn-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
}

.mj-syn-tab-btn {
  background-color: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  position: relative;
}

.mj-syn-tab-btn.active {
  background-color: #3b82f6;
  color: #ffffff;
  font-weight: 700;
  border-radius: 4px;
}

.mj-syn-sep {
  display: flex;
  align-items: center;
  color: #d1d5db;
  font-size: 0.8rem;
  margin: 0 4px;
}

.mj-syn-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* 툴팁 */
.mj-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 140px;
  background-color: rgba(31, 41, 55, 0.95);
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 400;
  z-index: 10;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.mj-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: rgba(31, 41, 55, 0.95) transparent transparent transparent;
}

.mj-spec-chip:hover .mj-tooltip, .mj-spec-chip:focus .mj-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.tooltip-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.tooltip-row:last-child {
  margin-bottom: 0;
}

.tooltip-total {
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.mj-simple-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e5e7eb;
}

.mj-list-row {
  display: flex;
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
}

.mj-list-year {
  width: 100px;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 700;
  color: #396E9C;
  line-height: 1.5;
}

.mj-list-content {
  flex: 1;
}

.mj-list-header {
  background: #ededed;
}

.mj-list-header .mj-list-content,
.mj-list-header .mj-list-year {
  font-size: 18px;
  font-weight: 700;
  color: #1C252E;
}

.mj-major-ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  color: #374151;
  line-height: 1.6;
}

.mj-major-ul li {
  margin-bottom: 4px;
  font-size: 0.95rem;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .mj-list-row {
    padding: 14px 18px;
  }
  .mj-list-year {
    font-size: 17px;
    width: 80px;
  }
  .mj-major-ul li {
    font-size: 0.9rem;
    margin-bottom: 2px;
  }
  .mj-list-header .mj-list-content, .mj-list-header .mj-list-year {
    font-size: 17px;
  }
}
/* =========================================
2. Top Area (Header + Dashboard)
========================================= */
.roadmap-header {
  background-color: #396E9C;
  color: #ffffff;
  padding: 20px 24px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.roadmap-header p {
  font-size: 15px;
  font-weight: 500;
}

.roadmap-dashboard {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.roadmap-dash-left {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.roadmap-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.roadmap-input-label {
  font-size: 13px;
  font-weight: 600;
  color: #676767;
}

@media screen and (max-width: 767px) {
  .roadmap-header {
    padding: 16px 18px;
  }
  .roadmap-dashboard {
    padding: 18px;
  }
  .roadmap-dash-left {
    gap: 10px;
  }
}
/* =========================================
3. Action Panel (Pink Box) & Search
========================================= */
.roadmap-action-panel {
  background: #F5EFED;
  border: 1px solid rgba(255, 86, 48, 0.16);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .roadmap-action-panel {
    padding: 18px;
  }
}

.roadmap-panel-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
  .roadmap-panel-top {
    flex-direction: column;
    gap: 6px;
  }
}

.roadmap-panel-title h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: 700;
  color: #AE3611;
  display: flex;
  align-items: center;
  gap: 6px;
}

.roadmap-panel-desc {
  font-size: 15px;
  color: #737373;
  font-weight: 500;
  letter-spacing: -0.48px;
}

.roadmap-btn-pdf {
  flex-shrink: 0;
  background-color: #396E9C;
  font-family: "Pretendard", -apple-system, sans-serif;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}
@media screen and (max-width: 767px) {
  .roadmap-btn-pdf {
    padding: 6px 10px;
  }
}

.roadmap-btn-pdf:hover {
  background-color: #2c5d7a;
}

.roadmap-example-text {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #828282;
  font-size: 13px;
}
@media screen and (max-width: 767px) {
  .roadmap-example-text {
    margin-bottom: 6px;
  }
}

.roadmap-search-row {
  display: flex;
  width: 100%;
  gap: 8px;
  position: relative;
  align-items: stretch;
}

.roadmap-search-input[type=text] {
  flex: 1;
  width: 100%;
  padding: 0 14px;
  border: 1px solid rgba(145, 158, 171, 0.2);
  border-radius: 8px;
  font-family: "Pretendard", -apple-system, sans-serif;
  font-size: 14px;
}
.roadmap-search-input[type=text]::-moz-placeholder {
  color: rgb(145, 158, 171);
  font-size: 13px;
}
.roadmap-search-input[type=text]::placeholder {
  color: rgb(145, 158, 171);
  font-size: 13px;
}

.roadmap-search-input:focus {
  border-color: #1E284D;
}

.roadmap-btn-search {
  background-color: #1E284D;
  font-family: "Pretendard", -apple-system, sans-serif;
  color: #fff;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.2s;
}
@media screen and (max-width: 767px) {
  .roadmap-btn-search {
    padding: 0 12px;
    font-size: 13px;
  }
}

.roadmap-btn-search:hover {
  background-color: #16203a;
}

/* =========================================
5. Tags & Grid Components
========================================= */
.roadmap-rec-area {
  margin-bottom: 20px;
}

.roadmap-rec-title {
  color: #2A2A2A;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.roadmap-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 접근성: 버튼으로 변경 */
.roadmap-rec-tag {
  padding: 6px 14px;
  background-color: rgba(0, 167, 111, 0.16);
  font-family: "Pretendard", -apple-system, sans-serif;
  color: #00A76F;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s;
  display: inline-block;
}

.roadmap-rec-tag:hover, .roadmap-rec-tag:focus {
  transform: scale(1.05);
  background-color: rgba(0, 167, 111, 0.24);
}

/* Grid Layout */
.roadmap-grid-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.roadmap-year-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.roadmap-year-head {
  background: #EDF1F6;
  padding: 16px 20px;
  color: #0B61C5;
  font-size: 17px;
  font-weight: 700;
  border-bottom: 1px solid #e5e7eb;
}
.roadmap-year-head span {
  font-size: 14px;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .roadmap-year-head {
    font-size: 16px;
    padding: 14px 18px;
  }
}

.roadmap-sem-row {
  display: flex;
}
@media screen and (max-width: 767px) {
  .roadmap-sem-row {
    flex-direction: column;
  }
}

.roadmap-sem-col {
  flex: 1;
  padding: 20px;
  border-right: 1px solid #f3f4f6;
  min-height: 150px;
}
@media screen and (max-width: 767px) {
  .roadmap-sem-col {
    padding: 16px 18px;
  }
}

.roadmap-sem-col:last-child {
  border-right: none;
}

.roadmap-sem-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}
@media screen and (max-width: 767px) {
  .roadmap-sem-title {
    margin-bottom: 10px;
    font-size: 15px;
  }
}

/* Course Card */
.roadmap-c-list .roadmap-course-card:last-child {
  margin-bottom: 0;
}

.roadmap-course-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  position: relative;
  transition: all 0.15s ease-in-out;
}

.roadmap-course-card.custom-added {
  border-color: rgba(145, 158, 171, 0.3);
  background-color: #F1F3F5;
  cursor: pointer;
}
.roadmap-course-card.custom-added:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.roadmap-course-card-title {
  margin-bottom: 6px;
  color: #2A2A2A;
  font-size: 15px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .roadmap-course-card-title {
    font-size: 14px;
  }
}

.roadmap-course-card-credit {
  text-align: right;
  font-size: 14px;
  color: #676767;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .roadmap-course-card-credit {
    font-size: 13px;
  }
}

.roadmap-course-card-score {
  text-align: right;
  font-size: 13px;
  color: #676767;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .roadmap-course-card-score {
    font-size: 12px;
  }
}

/* 삭제 버튼 접근성 개선 */
.roadmap-del-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 27px;
  height: 27px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg opacity='0.9'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.3332 9.99935C18.3332 14.6018 14.6023 18.3327 9.99984 18.3327C5.39734 18.3327 1.6665 14.6018 1.6665 9.99935C1.6665 5.39685 5.39734 1.66602 9.99984 1.66602C14.6023 1.66602 18.3332 5.39685 18.3332 9.99935ZM7.47484 7.47435C7.59203 7.35731 7.75088 7.29157 7.9165 7.29157C8.08213 7.29157 8.24098 7.35731 8.35817 7.47435L9.99984 9.11601L11.6415 7.47435C11.76 7.36395 11.9167 7.30385 12.0786 7.3067C12.2405 7.30956 12.395 7.37515 12.5095 7.48966C12.624 7.60418 12.6896 7.75866 12.6925 7.92058C12.6953 8.0825 12.6352 8.2392 12.5248 8.35768L10.8832 9.99935L12.5248 11.641C12.6352 11.7595 12.6953 11.9162 12.6925 12.0781C12.6896 12.24 12.624 12.3945 12.5095 12.509C12.395 12.6235 12.2405 12.6891 12.0786 12.692C11.9167 12.6949 11.76 12.6347 11.6415 12.5243L9.99984 10.8827L8.35817 12.5243C8.23969 12.6347 8.08299 12.6949 7.92107 12.692C7.75915 12.6891 7.60466 12.6235 7.49015 12.509C7.37564 12.3945 7.31005 12.24 7.30719 12.0781C7.30433 11.9162 7.36444 11.7595 7.47484 11.641L9.1165 9.99935L7.47484 8.35768C7.3578 8.24049 7.29205 8.08164 7.29205 7.91602C7.29205 7.75039 7.3578 7.59154 7.47484 7.47435Z' fill='%23FF715B'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center/cover;
  border-radius: 50%;
  cursor: pointer;
  display: none; /* hover시 표시되지만 포커스 시에도 표시 필요 */
  align-items: center;
  justify-content: center;
  z-index: 10;
  line-height: 1;
}

/* 키보드 포커스 시에도 삭제 버튼 표시 */
.roadmap-course-card:hover .roadmap-del-btn,
.roadmap-course-card:focus-within .roadmap-del-btn,
.roadmap-del-btn:focus {
  display: flex;
}

.roadmap-add-form {
  margin-top: 15px;
  background: #fff;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: none;
  animation: slideDown 0.2s ease-out;
}
@media screen and (max-width: 767px) {
  .roadmap-add-form {
    padding: 16px;
  }
}

.roadmap-add-form.active {
  display: block;
}

.roadmap-add-form.rec-style {
  border: 1px solid #e5e7eb;
  background-color: #fff;
  margin-bottom: 30px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.roadmap-sel-info {
  margin-bottom: 12px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background: #F1F3F5;
  border: 1px solid rgba(145, 158, 171, 0.3);
  border-radius: 6px;
}

.roadmap-sel-info-name {
  margin-right: 5px;
  font-size: 15px;
  font-weight: 600;
  color: #2A2A2A;
}
@media screen and (max-width: 767px) {
  .roadmap-sel-info-name {
    font-size: 14px;
  }
}

.roadmap-sel-info-code {
  font-size: 13px;
  color: #595959;
}
@media screen and (max-width: 767px) {
  .roadmap-sel-info-code {
    font-size: 12px;
  }
}

.roadmap-sel-info-credit {
  margin-left: 5px;
  font-size: 13px;
  font-weight: 700;
}

.roadmap-form-controls {
  display: flex;
  gap: 10px;
}

.roadmap-form-controls div {
  flex: 1;
}

.rec_book_con {
  margin-top: 25px;
}
.rec_book_con .rec_tab_visual {
  margin-bottom: 90px;
  display: flex;
  gap: 30px;
}
.rec_book_con .rec_tab_visual .sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rec_book_con .rec_tab_visual .sidebar h2 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #1C252E;
}
.rec_book_con .rec_tab_visual .menu_list {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(145, 158, 171, 0.12);
}
.rec_book_con .rec_tab_visual .menu_list li {
  padding: 0 16px;
  display: flex;
  align-items: center;
  width: 300px;
  height: 48px;
  color: #637381;
  font-family: "Public Sans";
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.rec_book_con .rec_tab_visual .menu_list li.active {
  border-left: 2px solid #1C252E;
  background: rgba(145, 158, 171, 0.14);
  color: #1C252E;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.36px;
}
.rec_book_con .rec_tab_visual .menu_list li:hover {
  background: rgba(145, 158, 171, 0.12);
  color: #1C252E;
}
.rec_book_con .rec_tab_visual .main_content {
  margin-top: 32px;
  flex: 1;
}
.rec_book_con .rec_tab_visual .rec_select_area {
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 15px 40px;
  border-radius: 12px;
  background: #F1F3F5;
}
.rec_book_con .rec_tab_visual .rec_select_area .select_label {
  color: #396E9C;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.rec_book_con .rec_tab_visual .rec_select_area .select_con {
  display: flex;
  gap: 12px;
}
.rec_book_con .rec_tab_visual .rec_select_area .dropDownBtn {
  min-width: 200px;
}
.rec_book_con .rec_tab_visual .rec_subject_area {
  margin-bottom: 40px;
}
.rec_book_con .rec_tab_visual .rec_subject_area .subject_tab {
  display: flex;
  align-items: center;
  gap: 6px 12px;
  flex-wrap: wrap;
}
.rec_book_con .rec_tab_visual .rec_subject_area .subject_tab li {
  padding: 13px 23px;
  border-radius: 50px;
  background: #E9ECEE;
  color: #637381;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.rec_book_con .rec_tab_visual .rec_subject_area .subject_tab li.active {
  background: #396E9C;
  color: #fff;
}
.rec_book_con .rec_tab_visual .book_con {
  max-height: 675px;
  overflow-y: scroll;
}
.rec_book_con .rec_tab_visual .book_con::-webkit-scrollbar {
  width: 8px;
}
.rec_book_con .rec_tab_visual .book_con::-webkit-scrollbar-thumb {
  background-color: rgba(145, 158, 171, 0.3);
}
.rec_book_con .rec_tab_visual .book_con .book_list {
  display: grid;
  gap: 40px 20px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 172px));
}
.rec_book_con .rec_tab_visual .book_con .book_list .img_con {
  margin-bottom: 15px;
  aspect-ratio: 157/236;
}
.rec_book_con .rec_tab_visual .book_con .book_list .img_con img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.rec_book_con .rec_tab_visual .book_con .book_list .book_title {
  color: #1E284D;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.48px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec_book_con .rec_tab_visual .book_con .book_list .book_author {
  color: #595959;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.42px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec_book_con .rec_tab_visual .book_con .book_list .tag_con {
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.rec_book_con .rec_tab_visual .book_con .book_list .tag_con span {
  padding: 3px 8px;
  border-radius: 4px;
  background: #919EAB;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.45px;
}
.rec_book_con .title_box {
  position: relative;
  margin-bottom: 30px;
}
.rec_book_con .title_box .title_eyebrow {
  margin-bottom: 4px;
  display: block;
  color: #396E9C;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
}
.rec_book_con .title_box h2 {
  display: flex;
  gap: 4px;
  color: #3E3A39;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.56px;
}
.rec_book_con .title_box .title-more {
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 49px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='16' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='2' d='M35 1c8.982 8.982 15 14 15 14H1'/%3E%3C/svg%3E") no-repeat center center/contain;
}
.rec_book_con .search-book {
  margin-bottom: 90px;
}
.rec_book_con .rec_tab {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rec_book_con .rec_tab li.active a {
  background: #396E9C;
  color: #fff;
}
.rec_book_con .rec_tab li a {
  display: block;
  padding: 13px 20px;
  border-radius: 50px;
  background: #E9ECEE;
  color: #637381;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.15s ease-in-out;
}
.rec_book_con .rec_tab li a:hover {
  background: #396E9C;
  color: #fff;
}
.rec_book_con #nCollectionMain .collectionRecommend {
  padding-top: 0;
}
.rec_book_con .pop_collection {
  margin-bottom: 60px;
}
.rec_book_con .knowledge_books {
  margin-top: 55px;
}
.rec_book_con .visual {
  position: relative;
  height: 356px;
  border-radius: 20px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .rec_book_con .visual {
    height: 270px;
  }
}
.rec_book_con .visual .visualS {
  height: 100%;
}
.rec_book_con .visual .visualS .imgCon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.rec_book_con .visual .visualS .imgCon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.rec_book_con .visual .visualS .imgCon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.rec_book_con .visual .descCon {
  padding: 45px 60px;
}
@media screen and (max-width: 767px) {
  .rec_book_con .visual .descCon {
    padding: 25px 30px;
  }
}
.rec_book_con .visual .descCon .subTit {
  margin-bottom: 28px;
  padding: 7px 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  border-radius: 50px;
  border: 1px solid #FBCE40;
  background: rgba(251, 206, 64, 0.26);
  color: #FBCE40;
  font-size: 15px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .rec_book_con .visual .descCon .subTit {
    margin-bottom: 15px;
    font-size: 13px;
    padding: 3px 12px;
  }
  .rec_book_con .visual .descCon .subTit svg {
    transform: scale(0.8);
  }
}
.rec_book_con .visual .descCon .tit {
  margin-bottom: 19px;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 767px) {
  .rec_book_con .visual .descCon .tit {
    margin-bottom: 10px;
    font-size: 24px;
  }
}
.rec_book_con .visual .descCon p {
  margin-bottom: 28px;
  max-width: 45%;
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  height: auto;
}
@media screen and (max-width: 767px) {
  .rec_book_con .visual .descCon p {
    max-width: 100%;
    margin-bottom: 15px;
    font-size: 15px;
  }
}
.rec_book_con .visual .descCon .linkTo {
  color: #FBCE40;
  font-size: 16px;
  font-weight: 700;
  text-decoration-line: underline;
  text-underline-position: from-font;
}
.rec_book_con .visual .swiper-button {
  position: absolute;
  right: 27px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 1;
}
.rec_book_con .visual .swiper-button .visualPagination {
  display: flex;
  align-items: center;
  gap: 9px;
}
.rec_book_con .visual .swiper-button .visualPagination .progress__bar {
  width: 51px;
  height: 3px;
  background: #D5D5D5;
  border-radius: 10px;
}
.rec_book_con .visual .swiper-button .visualPagination .progress__bar .progress__fill {
  display: block;
  height: 100%;
  background: #0078FE;
  border-radius: 10px;
}
.rec_book_con .visual .swiper-button .visualPagination span {
  color: #FFF;
  font-size: 12px;
  font-weight: 700;
}
.rec_book_con .visual .swiper-button .control-buttons {
  display: flex;
  gap: 7px;
}
.rec_book_con .visual .swiper-button .control-buttons button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
}
.rec_book_con .visual .swiper-button .control-buttons button.control-buttons-pause {
  background: #0078FE;
}
.rec_book_con .visual .swiper-button .control-buttons button.control-buttons-play {
  background: #fff;
}
.rec_book_con .newsLetter-list-area {
  margin-top: 19px;
}
.rec_book_con .newsLetter-list-area .newsLetter-list li {
  padding: 19px 0;
  border-bottom: 1px solid #e2e2e2;
}
.rec_book_con .newsLetter-list-area .newsLetter-list li a {
  display: flex;
  gap: 25px;
}
@media screen and (max-width: 1024px) {
  .rec_book_con .newsLetter-list-area .newsLetter-list li a {
    gap: 20px;
  }
}
.rec_book_con .newsLetter-list-area .newsLetter-list li a .newsLetter-list-img {
  flex-shrink: 0;
  width: 258px;
  aspect-ratio: 258/152;
  border-radius: 12px;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .rec_book_con .newsLetter-list-area .newsLetter-list li a .newsLetter-list-img {
    width: 220px;
  }
}
@media screen and (max-width: 767px) {
  .rec_book_con .newsLetter-list-area .newsLetter-list li a .newsLetter-list-img {
    width: 190px;
  }
}
@media screen and (max-width: 500px) {
  .rec_book_con .newsLetter-list-area .newsLetter-list li a .newsLetter-list-img {
    width: 110px;
    aspect-ratio: 1/1;
  }
}
.rec_book_con .newsLetter-list-area .newsLetter-list li a .newsLetter-list-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.rec_book_con .newsLetter-list-area .newsLetter-list li a .newsLetter-list-txt {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* flex 아이템이 텍스트에 의해 늘어나는 것을 방지 */
}
.rec_book_con .newsLetter-list-area .newsLetter-list li a .newsLetter-list-tit {
  color: #000;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .rec_book_con .newsLetter-list-area .newsLetter-list li a .newsLetter-list-tit {
    font-size: 16px;
  }
}
.rec_book_con .newsLetter-list-area .newsLetter-list li a .desc {
  color: #8f8f8f;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  height: auto;
}
.rec_book_con .newsLetter-list-area .newsLetter-list li a .newsLetter-list-date {
  margin: auto 0 25px 0;
  color: #6a6a6a;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .rec_book_con .newsLetter-list-area .newsLetter-list li a .newsLetter-list-date {
    margin: auto 0 0 0;
  }
}
@media screen and (max-width: 1250px) {
  .rec_book_con .rec_tab_visual .menu_list li {
    width: 240px;
  }
  .rec_book_con .rec_tab_visual .rec_subject_area .subject_tab li {
    padding: 10px 20px;
  }
}
@media screen and (max-width: 1024px) {
  .rec_book_con .rec_tab_visual {
    gap: 25px;
  }
  .rec_book_con .rec_tab_visual .menu_list li {
    width: 190px;
  }
  .rec_book_con .rec_tab_visual .rec_select_area {
    padding: 15px 20px;
    gap: 5px 25px;
  }
  .rec_book_con .rec_tab_visual .rec_select_area .select_label {
    font-size: 18px;
  }
  .rec_book_con .rec_tab_visual .rec_select_area .dropDownBtn {
    min-width: 150px;
  }
  .rec_book_con .rec_tab_visual .rec_subject_area .subject_tab {
    gap: 6px 8px;
  }
  .rec_book_con .rec_tab_visual .rec_subject_area .subject_tab li {
    padding: 10px 16px;
    font-size: 14px;
  }
  .rec_book_con .rec_tab_visual .book_con {
    max-height: 455px;
  }
  .rec_book_con .rec_tab_visual .book_con .book_list {
    grid-template-columns: repeat(auto-fill, minmax(130px, 150px));
  }
  .rec_book_con .rec_tab_visual .book_con .book_list .img_con {
    margin-bottom: 10px;
    aspect-ratio: 157/236;
  }
}
@media screen and (max-width: 767px) {
  .rec_book_con .title_box h2 {
    font-size: 24px;
  }
  .rec_book_con .title_box h2 svg, .rec_book_con .title_box h2 img {
    transform: scale(0.9);
  }
  .rec_book_con .rec_tab_visual {
    flex-direction: column;
  }
  .rec_book_con .rec_tab_visual .sidebar h2 {
    font-size: 19px;
  }
  .rec_book_con .rec_tab_visual .menu_list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rec_book_con .rec_tab_visual .menu_list li {
    width: auto;
    height: 40px;
  }
  .rec_book_con .rec_tab_visual .main_content {
    margin-top: 0;
  }
  .rec_book_con .rec_tab_visual .rec_select_area {
    flex-wrap: wrap;
    gap: 15px;
  }
  .rec_book_con .rec_tab_visual .rec_select_area .select_label {
    font-size: 17px;
  }
  .rec_book_con .rec_tab_visual .rec_select_area .select_con {
    flex-wrap: wrap;
  }
  .rec_book_con .rec_tab_visual .rec_select_area .dropDownBtn {
    min-width: 140px;
  }
  .rec_book_con .rec_tab_visual .book_con {
    max-height: 360px;
  }
  .rec_book_con .rec_tab_visual .book_con .book_list {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .rec_book_con .rec_tab_visual .book_con .book_list .img_con {
    margin-bottom: 10px;
    aspect-ratio: 157/236;
  }
  .rec_book_con .rec_tab_visual .book_con .book_list .tag_con span {
    font-size: 13px;
  }
}

#help_con {
  padding-bottom: 80px;
}
#help_con .help_header {
  padding: 80px 0;
  text-align: center;
  background: #1E284D;
}
#help_con .help_header .icon_con {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
#help_con .help_header h2 {
  margin: 20px 0 5px;
  color: #fff;
  font-family: "Public Sans";
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  line-height: 1;
}
#help_con .help_header h3 {
  color: #fff;
  font-family: "Public Sans";
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.48px;
}
#help_con .help_section_con {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
#help_con .title_con {
  margin-bottom: 30px;
  text-align: center;
}
#help_con .title_con h4 {
  color: #1C252E;
  font-size: 22px;
  font-weight: 700;
}
#help_con .title_con p {
  margin-top: 8px;
  color: #595959;
  font-size: 16px;
  font-weight: 500;
}
#help_con .guide_list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
#help_con .guide_list li {
  padding: 20px;
  text-align: center;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 0 2px 0 rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#help_con .guide_list li:hover {
  border-color: rgba(145, 158, 171, 0.3);
  box-shadow: 0 0 4px 0 rgba(145, 158, 171, 0.3), 0 16px 32px -4px rgba(145, 158, 171, 0.2);
}
#help_con .guide_list li .icon_box {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #396E9C;
}
#help_con .guide_list li .tit {
  margin-top: 10px;
  color: #1C252E;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
}
#help_con .guide_list li .sub_titl {
  color: #637381;
  font-size: 15px;
  font-weight: 400;
}
#help_con .helpTabList {
  margin-bottom: 20px;
  padding: 5px;
  display: flex;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid #ededed;
  background: #e6ebef;
}
#help_con .helpTabList li {
  flex: 1;
}
#help_con .helpTabList li.on a {
  background: #fff;
  color: #1E284D;
}
#help_con .helpTabList a {
  display: flex;
  justify-content: center;
  padding: 10px 5px;
  color: #777;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  border-radius: 12px;
}
#help_con .helpListW {
  margin-bottom: 60px;
}
#help_con .helpListW .list {
  display: none;
}
#help_con .helpListW .list.on {
  display: block;
}
#help_con .help_info {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
}
#help_con .help_info h4 {
  color: #637381;
  font-size: 17px;
  font-weight: 600;
}
#help_con .help_info span {
  padding: 4px 6px;
  border-radius: 6px;
  background: #BEC5CD;
  color: #FFF;
  font-family: "Public Sans";
  font-size: 13px;
  font-weight: 700;
  line-height: 166%;
}
#help_con .faq li {
  padding: 0 20px;
  border-radius: 10px;
  background-color: #ffffff;
  border: 1px solid #e1e1e1;
  box-sizing: border-box;
  transition: all 0.3s ease;
}
#help_con .faq li.on .q::after {
  transform: rotate(0deg);
}
#help_con .faq li.on .asw {
  padding: 20px 0;
  height: auto;
  border-top: 1px dashed #c8c8c8;
}
#help_con .faq li:not(:last-child) {
  margin-bottom: 10px;
}
#help_con .faq li .q {
  font-size: 17px;
  color: #070707;
  font-weight: 500;
  line-height: 1.4em;
  position: relative;
  padding: 20px 24px 20px 0;
  cursor: pointer;
}
#help_con .faq li .q::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  top: 20px;
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.9999 13.9999C19.0004 14.2336 18.919 14.46 18.7699 14.6399C18.6004 14.8445 18.3564 14.9731 18.0919 14.9975C17.8274 15.0219 17.564 14.94 17.3599 14.7699L11.9999 10.2899L6.62994 14.6099C6.42335 14.7777 6.1584 14.8562 5.89376 14.8281C5.62912 14.7999 5.38662 14.6674 5.21994 14.4599C5.03591 14.2508 4.94747 13.9743 4.97594 13.6972C5.00442 13.42 5.14722 13.1673 5.36994 12.9999L11.3699 8.16995C11.7389 7.86663 12.2709 7.86663 12.6399 8.16995L18.6399 13.1699C18.8854 13.3734 19.0191 13.6817 18.9999 13.9999Z' fill='%231C252E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(180deg);
  transition: all 0.3s ease;
}
#help_con .faq li .asw {
  font-size: 16px;
  color: #838383;
  font-weight: 500;
  line-height: 1.4em;
  padding: 0;
  border-top: 0px dashed #c8c8c8;
  box-sizing: border-box;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}
#help_con .inquiry_box {
  margin: 0 auto;
  padding: 40px 20px;
  max-width: 900px;
  width: 100%;
  text-align: center;
  border-radius: 16px;
  border: 1px solid rgba(145, 158, 171, 0.16);
  background: #FFF;
  box-shadow: 0 12px 12px -4px rgba(145, 158, 171, 0.12);
}
#help_con .inquiry_box .icon_box {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #396E9C;
}
#help_con .inquiry_box h4 {
  margin: 20px 0 10px;
  color: #1C252E;
  font-size: 22px;
  font-weight: 700;
}
#help_con .inquiry_box p {
  color: #595959;
  font-size: 16px;
  font-weight: 500;
}
#help_con .inquiry_box button {
  margin-top: 20px;
  padding: 8px 30px;
  border-radius: 8px;
  background: #396E9C;
  color: #FFF;
  font-family: "Public Sans";
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}
#help_con .inquiry_box button:hover {
  background: #1E284D;
}
#help_con .inquiry_box .inquiry_info {
  margin-top: 10px;
  font-size: 15px;
  color: #595959;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #help_con .help_header {
    padding: 50px 0;
  }
  #help_con .title_con {
    margin-bottom: 20px;
  }
  #help_con .title_con p {
    margin-top: 5px;
    font-size: 15px;
  }
  #help_con .guide_list {
    gap: 10px;
  }
  #help_con .helpTabList {
    flex-wrap: wrap;
  }
  #help_con .helpTabList li {
    flex: auto;
    width: calc(50% - 4px);
  }
  #help_con .helpTabList a {
    padding: 7px 5px;
    font-size: 15px;
    border-radius: 8px;
  }
  #help_con .faq li {
    padding: 0 16px;
  }
  #help_con .faq li.on .asw {
    padding: 15px 0;
  }
  #help_con .faq li .q {
    padding: 15px 20px 15px 0;
    font-size: 15px;
  }
  #help_con .faq li .q::after {
    top: 14px;
  }
  #help_con .faq li .asw {
    font-size: 15px;
  }
  #help_con .inquiry_box h4 {
    margin: 15px 0 5px;
    font-size: 18px;
  }
  #help_con .inquiry_box button {
    font-size: 14px;
  }
}

.reading_load {
  position: relative;
  padding: 45px 0 75px;
}
.reading_load .reading_load_bg {
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #EFF6F6 url(/image/common/bg_sub_map.svg) no-repeat right center;
  z-index: -1;
}
.reading_load .reading_load_tit {
  margin-bottom: 45px;
  padding-left: 38px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22' fill='none'%3E%3Cg clip-path='url(%23clip0_2812_10834)'%3E%3Cpath d='M5.27509 19.9077C2.82724 20.1271 1.27184 20.6418 1.25625 20.647C1.11756 20.6935 0.965339 20.6692 0.847279 20.5819C0.72899 20.4946 0.658842 20.3545 0.658842 20.2057V4.48438C0.360598 4.58287 0.134336 4.72254 0 4.81963V21.9985C0.670304 21.7231 1.84311 21.2962 3.48586 20.8989C5.03737 20.5239 6.69135 20.253 8.40172 20.0941C9.01999 20.0368 9.64628 19.9942 10.279 19.9661C8.30865 19.746 6.58292 19.7904 5.27509 19.9079V19.9077Z' fill='%2300A76F'/%3E%3Cpath d='M2.80432 18.3715C2.67044 18.3989 2.53152 18.3638 2.42584 18.2756C2.32016 18.1874 2.25872 18.0555 2.25872 17.916V2.41016C1.97836 2.44057 1.74499 2.47052 1.56916 2.49532V19.5925C2.25689 19.4126 3.50671 19.1366 5.16414 18.9859C6.65352 18.8504 8.1656 18.8451 9.65866 18.97C10.4862 19.0392 11.309 19.1487 12.1221 19.2978C10.2893 18.5056 8.41571 18.2216 6.9669 18.1402C4.60662 18.0075 2.82197 18.3678 2.80432 18.3715Z' fill='%2300A76F'/%3E%3Cpath d='M29.3412 4.48461V20.2057C29.3412 20.3547 29.271 20.4949 29.1527 20.5821C29.0342 20.6694 28.8822 20.6935 28.7433 20.6467C28.7282 20.6418 27.1728 20.1271 24.7249 19.9077C23.4169 19.7904 21.6911 19.7458 19.721 19.9659C20.3537 19.994 20.98 20.0366 21.5983 20.0939C23.3086 20.2527 24.9626 20.5237 26.5141 20.8987C28.1569 21.2959 29.3297 21.7227 30 21.9983V4.8201C29.865 4.72254 29.6383 4.5831 29.3412 4.48438V4.48461Z' fill='%2300A76F'/%3E%3Cpath d='M24.8356 18.9859C26.4933 19.1366 27.7429 19.4126 28.4306 19.5925V2.49532C28.2548 2.47052 28.0214 2.44057 27.741 2.41016V17.916C27.741 18.0555 27.6796 18.1876 27.5737 18.2758C27.468 18.364 27.3291 18.3991 27.1952 18.3713C27.1652 18.3652 25.3844 18.008 23.0329 18.1402C21.5841 18.2216 19.7105 18.5056 17.8777 19.2978C18.6908 19.149 19.5136 19.0392 20.3411 18.97C21.8342 18.8453 23.3462 18.8507 24.8356 18.9859Z' fill='%2300A76F'/%3E%3Cpath d='M23.0086 17.2114C24.7098 17.1181 26.1031 17.2641 26.8307 17.3693V0.198186C26.1905 0.100392 24.7669 -0.0680555 23.0329 0.02927C20.928 0.147651 17.9263 0.693469 15.455 2.60489V19.5753C16.4802 18.8746 17.6395 18.3204 18.9134 17.9241C20.1765 17.5308 21.5543 17.2912 23.0086 17.2112V17.2114Z' fill='%2300A76F'/%3E%3Cpath d='M3.16927 0.198163V17.3696C3.73367 17.2881 4.69855 17.1819 5.8968 17.1819C6.24364 17.1819 6.60951 17.1908 6.99143 17.2116C8.44574 17.2914 9.82348 17.5312 11.0866 17.9245C12.3605 18.3208 13.5198 18.8748 14.545 19.5758V2.6051C12.0666 0.688299 9.05461 0.143885 6.94237 0.0280771C5.21457 -0.0666748 3.80496 0.100837 3.16927 0.198163Z' fill='%2300A76F'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2812_10834'%3E%3Crect width='30' height='22' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat left center;
  color: #3E3A39;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.56px;
}
.reading_load .reading_load_desc {
  margin-bottom: 15px;
  color: #515151;
  font-size: 18px;
  font-weight: 600;
  line-height: 138%;
  letter-spacing: -0.36px;
}
.reading_load .reading_load_caution {
  color: #1E284D;
  font-size: 15px;
  font-weight: 600;
  line-height: 166%;
  letter-spacing: -0.3px;
}
.reading_load .reading_load_caution.red {
  color: #FF715B;
}
.reading_load .locationBox {
  margin-top: 30px;
  padding: 30px 35px;
  border-radius: 12px;
  background: #fff;
  overflow-x: auto;
}
.reading_load .location_intro {
  display: flex;
  align-items: center;
  gap: 35px;
  overflow-x: scroll;
}
.reading_load .location_intro::-webkit-scrollbar {
  height: 15px;
}
.reading_load .location_intro::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.reading_load .classify {
  margin-bottom: 12px;
  padding: 5px 9px;
  display: inline-block;
  border-radius: 6px;
  background: #396E9C;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.3px;
}
.reading_load .classify.purple {
  background: #5543FF;
}
.reading_load .imgCon {
  margin-bottom: 10px;
  position: relative;
  width: 135px;
  aspect-ratio: 112/150;
  border-radius: 12px;
  border: 1px solid rgba(145, 158, 171, 0.28);
  cursor: pointer;
}
.reading_load .imgCon.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  background: rgba(145, 158, 171, 0.1);
  color: #9E9E9E;
  border-style: dashed;
  border-width: 2px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}
.reading_load .imgCon.empty:hover {
  background: rgba(145, 158, 171, 0.25);
}
.reading_load .imgCon.empty span {
  color: #555555;
  font-weight: 500;
}
.reading_load .imgCon img {
  display: block;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.reading_load .imgCon .change {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  transform: translateY(6px);
  opacity: 0;
}
.reading_load .imgCon .change:hover {
  opacity: 1;
  transform: translateY(0);
}
.reading_load .textCon h3 {
  color: #393939;
  font-size: 15px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.54px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.reading_load .textCon .subInfo {
  margin-bottom: 8px;
  color: #9E9E9E;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.45px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.reading_load .arrow {
  flex-shrink: 0;
  position: relative;
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='15' viewBox='0 0 27 15' fill='none'%3E%3Cpath d='M26.7071 8.07039C27.0976 7.67986 27.0976 7.0467 26.7071 6.65617L20.3431 0.292213C19.9526 -0.0983109 19.3195 -0.0983109 18.9289 0.292213C18.5384 0.682738 18.5384 1.3159 18.9289 1.70643L24.5858 7.36328L18.9289 13.0201C18.5384 13.4107 18.5384 14.0438 18.9289 14.4343C19.3195 14.8249 19.9526 14.8249 20.3431 14.4343L26.7071 8.07039ZM0 7.36328V8.36328H26V7.36328V6.36328H0V7.36328Z' fill='%23999999'/%3E%3C/svg%3E") no-repeat center center;
}
.reading_load .locationCenter .top {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 62px;
}
.reading_load .locationCenter .top .circle {
  position: absolute;
  width: 62px;
  height: 62px;
  background: rgba(145, 158, 171, 0.55);
  border-radius: 50%;
}
.reading_load .locationCenter .top .circle:first-of-type {
  left: 0;
  top: 0;
}
.reading_load .locationCenter .top .circle:last-of-type {
  right: 0;
  bottom: 0;
}
.reading_load .locationCenter .top span {
  position: relative;
  color: #FFF;
  font-family: "Public Sans";
  font-size: 18px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.36px;
  z-index: 1;
}
.reading_load .locationCenter .bottom {
  margin-top: 16px;
}
.reading_load .locationCenter .bottom span {
  display: block;
  text-align: center;
  color: #393939;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.48px;
}
.reading_load .info {
  flex-shrink: 0;
  width: 157px;
}
.reading_load .info:has(.classify) {
  align-self: flex-start;
}
.reading_load .add-more {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px dashed #9E9E9E;
  color: #555;
  font-weight: 600;
  transition: all 0.15s ease-in-out;
}
.reading_load .add-more:hover {
  background: rgba(145, 158, 171, 0.1);
  transform: scale(1.1);
}
.reading_load .del {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  background: #FF715B;
}
.reading_load .target-search-container {
  margin-top: 20px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 120, 254, 0.64);
}
.reading_load .target-search-container .search-input-wrap {
  margin-bottom: 12px;
  position: relative;
}
.reading_load .target-search-container .search-input-wrap input[type=text] {
  padding: 0 40px;
  width: 100%;
  height: 54px;
  border-radius: 8px;
  border: 1px solid rgba(145, 158, 171, 0.2);
  background: linear-gradient(0deg, rgba(145, 158, 171, 0.16) 0%, rgba(145, 158, 171, 0.16) 100%), #FFF;
  font-size: 15px;
}
.reading_load .target-search-container .search-input-wrap input[type=text]::-moz-placeholder {
  color: #919EAB;
}
.reading_load .target-search-container .search-input-wrap input[type=text]::placeholder {
  color: #919EAB;
}
.reading_load .target-search-container .search-input-wrap .search {
  position: absolute;
  top: 50%;
  left: 12px;
  color: #919EAB;
  font-size: 18px;
  transform: translateY(-50%);
}
.reading_load .target-search-container .search-input-wrap .cancel-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: #396E9C;
  font-size: 14px;
  font-weight: 500;
}
.reading_load .target-search-container .search-input-wrap .search-btn {
  position: absolute;
  top: 50%;
  right: 45px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  background: #006C9C;
}
.reading_load .target-search-container .target-book-list {
  max-height: 280px;
  overflow-y: auto;
}
.reading_load .target-search-container .target-book-list::-webkit-scrollbar {
  width: 6px;
}
.reading_load .target-search-container .target-book-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.reading_load .target-search-container .book-result-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reading_load .target-search-container .book-result-list li {
  padding: 8px 12px;
  display: flex;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid rgba(145, 158, 171, 0.2);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.reading_load .target-search-container .book-result-list li:hover {
  background: rgba(145, 158, 171, 0.09);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(145, 158, 171, 0.2);
}
.reading_load .target-search-container .book-result-list .result-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
}
.reading_load .target-search-container .book-result-list .result-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.reading_load .target-search-container .book-result-list .result-info {
  min-width: 0;
}
.reading_load .target-search-container .book-result-list .result-info strong {
  display: block;
  color: #1C252E;
  font-size: 16px;
  font-weight: 600;
  line-height: 137%;
  letter-spacing: -0.32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reading_load .target-search-container .book-result-list .result-info .meta {
  color: #919EAB;
  font-family: "Public Sans";
  font-size: 14px;
  font-weight: 400;
  line-height: 157%;
  letter-spacing: 0;
}
.reading_load .target-search-container .book-result-list .result-info .result-tags {
  margin-top: 3px;
  display: flex;
  gap: 4px 8px;
  flex-wrap: wrap;
}
.reading_load .target-search-container .book-result-list .result-info .result-tags .tags {
  padding: 7px 12px;
  border-radius: 10px;
  background: #F1F3F5;
  color: #1C252E;
  font-size: 14px;
  font-weight: 500;
  line-height: 128%;
}
.reading_load .target-search-container.target-search-add {
  border-color: rgba(255, 171, 0, 0.56);
  background: rgba(255, 171, 0, 0.09);
}
.reading_load .target-search-container.target-search-add input[type=text] {
  background: #FFF;
}
.reading_load .target-search-container.target-search-add .book-result-list .result-info .result-tags .tags {
  background: rgba(145, 158, 171, 0.12);
}
.reading_load .readroad-actions {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.reading_load .readroad-actions button {
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid rgba(145, 158, 171, 0.32);
  background: #fff;
  color: #1C252E;
  font-family: "Public Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}
.reading_load .readroad-actions button.save {
  background: #1C252E;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .reading_load .locationBox {
    padding: 20px;
  }
  .reading_load .location_intro {
    gap: 25px;
  }
  .reading_load .imgCon {
    width: 120px;
  }
}/*# sourceMappingURL=sub_n.css.map */