edu/css/style.css

@charset "UTF-8";
:root {
  /* text - 텍스트 색상 */
  --text-intro-base: #1b1810;
  --text-base: #131313;
  --text-revers: #fff;
  --text-primary: #3c3321;
  --text-secondary: #747474;
  --text-accent: #ff5c00;
  --text-myclass: #ffdf60;
  --text-main-primary: #4a4040;
  --text-main-secondary: #3a200d;
  --text-title-accent: #f5651d;
  --text-pick: #2b5045;
  --text-keyword-base: #c4c2c0;
  --text-keyword-primary: #fff;
  --text-keyword-secondary: #999999;
  --text-video-primary: #b6d5a7;
  --text-video-secondary: #ddd;
  --text-cate-primary: #edd8c2;
  --text-cate-secondary: #b6d5a7;
  --text-cate-tertiary: #e8cfe4;
  --text-comment-primary: #fff;
  --text-comment-secondary: #8d8d8d;
  --text-learning-base: #8d8888;
  --text-learning-primary: #ff5c00;
  --text-learning-secondary: #008c49;
  --text-card-category: #252525;
  --text-card-title-active: #ff7d33;
  --text-card-title-complete: #66ba92;
  --text-card-author: #d1cfcf;
  /* 배경 */
  --bg-base: #e4ddcf;
  --bg-primary: #ece3d2;
  --bg-secondary:
    radial-gradient(
      93.89% 93.89% at 49.32% 6.11%,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.11) 86.06%,
      rgba(134, 114, 77, 0.2) 88.94%
    ),
    linear-gradient(180deg, #f9f6f0 0%, #e6ddcc 100%);
  --bg-main-card: rgba(255, 255, 255, 0.6);
  --bg-intro-mask: #1b1810;
  --bg-intro: linear-gradient(
    180deg,
    #f9f5f2 0%,
    #fff 18.77%,
    #fff 41.8%,
    #ece8e4 100%
  );
  --bg-main:
    linear-gradient(
        90deg,
        #0f3025 0%,
        #194335 38%,
        #0b221b 87.51%,
        #0d231c 100%
      )
      top / 100% 114px no-repeat,
    #ece3d2;
  --bg-video: #1b1b1b;
  --bg-comment: #2a2a2a;
  --bg-nav: linear-gradient(
    90deg,
    #0f3025 0%,
    #194335 38%,
    #0b221b 87.51%,
    #0d231c 100%
  );
  --bg-nav-depth: #fff;
  --bg-nav-alerts: #ff2200;
  --bg-nav-alerts-hover: #188f6b;
  --bg-cate-primary: #ded7cf;
  --bg-cate-secondary: #d4decf;
  --bg-cate-tertiary: #e8cfe4;
  --bg-pick: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #d5ede6 100%);
  --bg-gauge-base: #b4b4b4;
  --bg-gauge-primary: #ff5c00;
  --bg-search: #e4dbc9;
  --bg-keyword-base: rgba(230, 205, 177, 0.3);
  --bg-keyword-primary: #e47703;
  --bg-keyword-primary-hover: #e6cdb1;
  --bg-keyword-secondary: #786c60;
  --bg-keyword-secondary-hover: #dcd3c9;
  --bg-lecture-state: linear-gradient(270deg, #00ab66 0%, #058bb0 100%);
  --bg-lecture-progress-primary: rgba(3, 9, 7, 0.3);
  --bg-lecture-progress-secondary: #07855c;
  --bg-btn-base: #000;
  --bg-btn-primary: #ff5c00;
  --bg-btn-secondary: #1f1f1f;
  --bg-card: rgba(255, 255, 255, 0.6);
  --bg-card-hover-start: #ff6600;
  --bg-card-hover-end: rgba(255, 132, 0, 0.7);
  --bg-card-thumb-overlay: rgba(255, 255, 255, 0.3);
  --bg-card-shadow: rgba(217, 202, 190, 0.5);
  --bg-card-hover-shadow: rgba(198, 187, 177, 0.5);
  --bg-card-shadow-inner: rgba(0, 0, 0, 1);
  --bg-pick-shadow: rgba(166, 154, 97, 0.25);
  --bg-modal: rgba(0, 0, 0, 0.8);
  --bg-modal-content: #f6f1e9;
  --bg-modal-close-hover: #e00400;
  --bg-scrollbar-thumb: #D0D0D0;
  --bg-scrollbar-thumb-dark: #383838;
  --bg-scrollbar-track: #F3F3F3;
  --bg-scrollbar-thumb-light: rgba(255, 255, 255, 0.2);
  --bg-scrollbar-thumb-light-hover: rgba(255, 255, 255, 0.3);
  --bg-scrollbar-track-light: rgba(255, 255, 255, 0.05);
  --bg-video-gauge: #171717;
  --bg-video-gauge-fill: #ff6c19;
  --bg-video-gauge-border: rgba(0, 0, 0, 0.4);
  --bg-learning-line: #c6c3c3;
  --bg-learning-dot: #8d8888;
  --bg-learning-active: rgba(255, 92, 0, 0.2);
  --bg-learning-active-line: #ffad7f;
  --bg-learning-active-dot: #ff5c00;
  --bg-learning-complete: rgba(0, 140, 73, 0.2);
  --bg-learning-complete-line: #7fc5a4;
  --bg-learning-complete-dot: #008c49;
  --bg-chapter-current: #146b51;
  --bg-chapter-completed: #ba9a85;
  --bg-card-base: #7e7e7e;
  --bg-card-current: #1d9b75;
  --bg-card-current-border: #1f9b76;
  --bg-card-current-bg: #dbefe9;
  --bg-card-completed: #ab3d00;
  --bg-gauge-fill: #e25e00;
  --bg-shadow: #8a7d64;
  --bg-puzzle-family: #7ed29b;
  --bg-puzzle-hanmac: #ffccca;
  --bg-puzzle-value: #87a7d6;
  --bg-puzzle-company: #b49a65;
  --bg-piece-1: #1d375d;
  --bg-piece-2: #662a0d;
  --bg-piece-3: #5b4822;
  --bg-piece-4: #2a5338;
  --bg-circle-border: #a7790f;
  --bg-circle-start: rgba(127, 47, 0, 0.1);
  --bg-circle-end: rgba(167, 121, 15, 0.5);
  --bg-circle-dot: rgba(221, 144, 0, 0.6);
  --bg-circle-dot-hover: rgba(221, 144, 0, 0.8);
  --bg-circle-dot-stroke: rgba(221, 144, 0, 0.2);
  --bg-gradient-start: #ece3d2;
  --bg-gradient-end: #fff;
  --bg-learning-line-color: #edba8a;
  --bg-modal-header: #f04400;
  --bg-textarea: #2a2a2a;
  --bg-textarea-placeholder: rgba(255, 255, 255, 0.5);
  /* border */
  --border-base: rgba(0, 0, 0, 0.05);
  --border-primary: #fff;
  --border-keyword-base: rgba(0, 0, 0, 0.05);
  --border-keyword-primary: rgba(255, 255, 255, 0.4);
  --border-keyword-primary-hover: rgba(0, 0, 0, 0.05);
  --border-keyword-secondary: rgba(255, 255, 255, 0.4);
  --border-keyword-secondary-hover: rgba(0, 0, 0, 0.1);
  --border-pick: rgba(255, 255, 255, 0.5);
  --border-video: rgba(255, 255, 255, 0.1);
  --border-btn: rgba(255, 255, 255, 0.2);
  --border-card: rgba(255, 255, 255, 0.8);
  --border-modal: #888;
  --border-comment-resizer: rgba(230, 227, 225, 0.1);
  /* drop */
  --text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  --text-stroke: drop-shadow(0 0 0.5px #000);
  /* shadow */
  --shadow-pagination: rgba(0, 0, 0, 0.4);
  --shadow-modal: rgba(0, 0, 0, 0.25);
  --shadow-card-drop: 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-card-drop-small: 0 4px 2px rgba(0, 0, 0, 0.05);
  --shadow-gauge-inset: rgba(0, 0, 0, 0.3);
  --shadow-comment: 0 8px 22px 22px rgba(0, 0, 0, 0.8);
}

/* 페이드 전환 */
.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.4s ease;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes arrow-next {
  0%, 100% {
    right: 72px;
  }
  50% {
    right: 50px;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-12px);
  }
}
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scroll-down {
  0% {
    transform-origin: 50% 100%;
    transform: scaleY(1);
  }
  50% {
    transform-origin: 50% 100%;
    transform: scaleY(0);
  }
  50.1% {
    transform-origin: 50% 0;
    transform: scaleY(0);
  }
  to {
    transform-origin: 50% 0;
    transform: scaleY(1);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes borderFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes borderPulse {
  0%, 100% {
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  }
  50% {
    border-color: #fff;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
  }
}
@keyframes fillGauge {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
html {
  scroll-behavior: smooth;
}
html.is-locked body {
  height: calc(var(--window-inner-height) - 1px);
  overflow: hidden;
  box-sizing: border-box;
}
html.is-locked #wrap {
  position: fixed;
}
html body {
  margin: 0;
  padding: 0;
}

/* common */
.wrap {
  position: relative;
  max-width: 100vw;
  min-height: var(--window-inner-height, 100vh);
  background: var(--bg-main);
  background-attachment: fixed;
  overflow: hidden;
  /*
  &:not(.intro) {
    &::after {
      content: " ";
      position: fixed;
      left: 0;
      top: 64px;
      display: block;
      width: 100%;
      height: 46px;
      border-top: 2px solid #f3dba8;
      border-radius: 30px 30px 0 0;
      background: var(--bg-primary);
      box-shadow: 0 -9px 6.3px 0 rgba(0, 0, 0, 0.5);
    }
  }*/
}

.inner {
  position: relative;
  width: 100%;
  max-width: 1640px;
}
@media only screen and (max-width: 1640px) {
  .inner {
    margin: 0 20px;
    width: calc(100% - 40px);
  }
}
@media only screen and (max-width: 1023px) {
  .inner {
    margin: 0 16px;
    width: calc(100% - 32px);
  }
}

.header {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 12px;
}
.header h1 {
  width: 95px;
  height: 25px;
  background-image: url("/img/logo.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
  color: transparent;
  font-size: 1px;
  overflow: hidden;
}
@media only screen and (max-height: 1023px) {
  .header h1 {
    height: 22px;
  }
}
.header .btn-guide {
  border: 1px solid #000;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.04em;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-weight: 700;
  line-height: 1.2;
  font-size: 14px;
  width: 34px;
  height: 34px;
  overflow: hidden;
}
.header .btn-guide-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(1deg, #0E2820 1.01%, #215E49 159.45%);
  width: 100%;
  height: 100%;
  gap: 4px;
  border-radius: inherit;
  overflow: hidden;
}
@media only screen and (max-width: 1023px) {
  .header .btn-guide-inner {
    justify-content: center;
  }
  .header .btn-guide-inner .ico-guide-wrap {
    width: 19px;
    height: 19px;
    aspect-ratio: 1/1;
  }
  .header .btn-guide-inner .ico-guide-wrap .ico-guide {
    width: 19px;
    height: 19px;
    aspect-ratio: 1/1;
    background-image: url("/img/ico/ico_book_info.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .header .btn-guide-inner .guide-text {
    display: none;
  }
}
.header .btn-guide .ico-guide-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  border-radius: 52px;
}
@media only screen and (min-width: 1024px) {
  .header .btn-guide {
    position: fixed;
    right: 28px;
    bottom: 40px;
    width: 124px;
    height: 48px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 52px;
    color: rgba(0, 0, 0, 0.8);
  }
  .header .btn-guide-inner {
    position: relative;
    flex-direction: row-reverse;
    background: linear-gradient(180deg, #FFF 0%, #EEE 100%);
    box-shadow: 2px -2px 0 0 rgba(255, 255, 255, 0.5) inset, 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    padding-left: 8px;
    transition: background 0.2s ease;
    border: none;
  }
  .header .btn-guide-inner:hover {
    color: #331400;
    background: linear-gradient(180deg, #E4E4E4 0%, #FFF 100%);
  }
  .header .btn-guide-inner:hover .ico-guide-wrap {
    background: linear-gradient(180deg, #1F7764 0%, #2DA286 142.65%), #FFF;
  }
  .header .btn-guide-inner:hover .ico-guide-wrap .ico-guide {

    background-image: url("/img/ico/ico_book_info.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .header .btn-guide .guide-text {
    white-space: nowrap;
  }
  .header .btn-guide .ico-guide-wrap {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: linear-gradient(180deg, #2DA286 0%, #1F7764 142.65%), #FFF;
    transition: background 0.2s ease;
  }
  .header .btn-guide .ico-guide-wrap .ico-guide {
    width: 24px;
    height: 24px;
    background-image: url("/img/ico/ico_book_info.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--bg-nav);
  color: var(--text-revers);
  height: 64px;
  z-index: 9;
}
@media only screen and (max-width: 1023px) {
  .nav-wrap {
    height: 50px;
  }
}
.nav-wrap .inner {
  height: 64px;
  padding: 0 140px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
@media only screen and (max-width: 1919px) {
  .nav-wrap .inner {
    padding: 0 32px;
  }
}
@media only screen and (max-width: 1279px) {
  .nav-wrap .inner {
    padding: 0 16px;
  }
}
@media only screen and (max-width: 1023px) {
  .nav-wrap .inner {
    height: 50px;
  }
}
.nav-wrap .item-area {
  gap: 6px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.nav-wrap .item-area .myclass {
  font-size: 14px;
  color: var(--text-myclass);
  margin-right: 10px;
  gap: 10px;
  white-space: nowrap;
}
.nav-wrap .item-area .myclass span:has(.frequency) {
  filter: var(--text-stroke);
  text-shadow: var(--text-shadow);
}
.nav-wrap .item-area .myclass .frequency {
  color: var(--text-base);
}
.nav-wrap .item-area .myclass .frequency .ico-frequency {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto 2px;
  background-image: url("/img/ico/ico_frequency.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.nav-wrap .item-area .myclass .frequency span {
  display: inline-block;
  width: 22px;
  height: 12px;
  border-radius: 25px;
  background-color: var(--text-myclass);
  border: 1px solid rgba(0, 0, 0, 0.4);
  font-size: 10px;
  line-height: 11px;
  font-weight: 900;
  text-align: center;
}
.nav-wrap .item-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.nav-wrap .item-box:has(.mypage:hover), .nav-wrap .item-box:has(.mypage.active) {
  position: relative;
  height: 100%;
  background-color: #fff;
  border-radius: 8px 8px 0 0;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.1));
}
.nav-wrap .item-box:has(.mypage:hover)::before, .nav-wrap .item-box:has(.mypage.active)::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 24px;
  background: linear-gradient(180deg, #FFF 0%, #ECE9E4 100%);
  pointer-events: none;
  border-radius: 8px 8px 0 0;
}
.nav-wrap .item-box:has(.mypage:hover) .mypage, .nav-wrap .item-box:has(.mypage.active) .mypage {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='20' viewBox='0 0 19 20' fill='none'%3E%3Cpath d='M9.33691 0.251953C10.3269 0.224972 11.3078 0.450411 12.1836 0.90625C13.0594 1.36213 13.8007 2.03383 14.3359 2.85547C14.8711 3.6772 15.1821 4.62156 15.2373 5.59668C15.2925 6.57178 15.0906 7.54461 14.6514 8.41992C14.2812 9.15764 13.7508 9.80247 13.1035 10.3164C14.6572 10.9648 16.0048 12.0197 16.9961 13.3721C18.0772 14.8469 18.6859 16.6073 18.7422 18.4258V18.4365C18.739 18.6925 18.6351 18.9366 18.4541 19.1182C18.2729 19.2997 18.0274 19.4055 17.7705 19.4131C17.5138 19.4205 17.263 19.3295 17.0713 19.1592C16.8797 18.9888 16.762 18.7514 16.7432 18.4961L16.7422 18.4854C16.6847 16.6343 15.8973 14.8765 14.5449 13.5859C13.1925 12.2953 11.3808 11.5732 9.49512 11.5732C7.6096 11.5733 5.79863 12.2954 4.44629 13.5859C3.09396 14.8765 2.30652 16.6343 2.24902 18.4854V18.4902C2.23556 18.7494 2.11916 18.9923 1.92676 19.167C1.7344 19.3416 1.48077 19.4343 1.2207 19.4268C0.960695 19.4192 0.712987 19.3125 0.53125 19.127C0.349355 18.9412 0.247993 18.6912 0.25 18.4316V18.4268C0.306119 16.6081 0.913952 14.8471 1.99512 13.3721C2.98633 12.0197 4.33417 10.9649 5.8877 10.3164C5.28223 9.83555 4.77858 9.23977 4.41309 8.55957C3.97462 7.74356 3.7459 6.83365 3.74609 5.91016C3.74635 4.93354 4.00305 3.97374 4.49121 3.12402C4.9794 2.27426 5.6823 1.56356 6.53125 1.06055C7.3802 0.557543 8.34687 0.278976 9.33691 0.251953ZM9.49609 2.22461C8.50024 2.22461 7.54574 2.61399 6.84277 3.30566C6.14007 3.99711 5.74619 4.93411 5.74609 5.91016C5.74609 6.88636 6.13995 7.82409 6.84277 8.51562C7.54573 9.20725 8.50027 9.59668 9.49609 9.59668C10.4919 9.59666 11.4465 9.20728 12.1494 8.51562C12.8522 7.82409 13.2461 6.88636 13.2461 5.91016C13.246 4.93414 12.8521 3.9971 12.1494 3.30566C11.4465 2.61401 10.4919 2.22463 9.49609 2.22461Z' fill='%230D0D0D' stroke='%230D0D0D' stroke-width='0.5'/%3E%3C/svg%3E");
}
.nav-wrap .item-box:hover .alerts {
  background-color: var(--bg-nav-alerts-hover);
}
.nav-wrap .item-box:hover .alerts-area {
  display: block;
}
.nav-wrap .item-box.is-alerts-open .alerts {
  background-color: var(--bg-nav-alerts-hover);
}
.nav-wrap .item-box.is-alerts-open .alerts-area {
  display: block;
}
.nav-wrap .item-box {
  /* 관리자 버튼 스타일 */
}
.nav-wrap .item-box .btn-admin {
  display: block;
  width: 24px; /* 기존 아이콘들과 크기 맞춤 */
  height: 24px;
  background: url("/img/ico_admin.svg") no-repeat center; /* 생성된 아이콘 경로 */
  background-size: contain;
  transition: opacity 0.2s ease; /* 호버 효과 부드럽게 */
}
.nav-wrap .item-box .btn-admin:hover {
  opacity: 0.7; /* 약간 투명하게 처리 */
}
.nav-wrap .item-box {
  /* 로그인/로그아웃 버튼 스타일 */
}
.nav-wrap .item-box .btn-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: opacity 0.2s ease;
  /* 로그인 아이콘 */
}
.nav-wrap .item-box .btn-auth.btn-login::before {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'%3E%3C/path%3E%3Cpolyline points='10 17 15 12 10 7'%3E%3C/polyline%3E%3Cline x1='15' y1='12' x2='3' y2='12'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  color: currentColor;
}
.nav-wrap .item-box .btn-auth {
  /* 로그아웃 아이콘 */
}
.nav-wrap .item-box .btn-auth.btn-logout::before {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  color: currentColor;
}
.nav-wrap .item-box .btn-auth:hover {
  opacity: 0.7;
}
.nav-wrap .item-box {
  /* 로그인 상태 표시 (옵션) */
}
.nav-wrap .item-box .auth-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 2px;
  white-space: nowrap;
}
.nav-wrap .input-group {
  position: relative;
}
.nav-wrap input[type=text] {
  padding-left: 38px;
  padding-right: 14px;
  width: 185px;
  height: 38px;
  border-radius: 4px;
  border: 1px solid #138E65;
  background: var(--bg-search);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3) inset;
  filter: drop-shadow(0 0 0 #000);
}
.nav-wrap input[type=text]::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.nav-wrap input[type=text]::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.nav-wrap .input-group:focus-within input[type=text] {
  border-radius: 4px 4px 0 0;
  border-bottom-color: transparent;
  outline: none;
}
.nav-wrap .input-group:focus-within .search-suggestions {
  display: block;
}
.nav-wrap .search-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 185px;
  padding: 4px 0;
  border: 1px solid #138E65;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #F1ECE1;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 2px 1.9px 0 rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.nav-wrap .search-suggestions-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-wrap .search-suggestions-list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary, #000);
  cursor: pointer;
  transition: background 0.15s;
}
.nav-wrap .search-suggestions-list li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 8px 12px;
  gap: 8px;
}
.nav-wrap .search-suggestions-list li:hover {
  background: rgba(0, 0, 0, 0.05);
}
.nav-wrap .search-suggestions-list li span {
  flex: 1;
  text-align: left;
}
.nav-wrap .ico-history {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url("/img/ico/ico_history.svg") center/contain no-repeat;
}
.nav-wrap .btn-remove {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.5;
  background-image: url("/img/ico/ico_clear.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.nav-wrap .btn-remove:hover {
  opacity: 0.8;
}
.nav-wrap .ico-search {
  position: absolute;
  left: 14px;
  top: 12px;
  width: 16px;
  height: 16px;
  background-image: url("/img/ico/ico_search.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.nav-wrap .btn-search {
  display: none;
  position: relative;
  width: 42px;
  height: 38px;
  padding: 0;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  background-image: url("/img/ico/ico_search_w.svg");
  background-size: 20px auto;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 1439px) {
  .nav-wrap .btn-search {
    display: block;
  }
}
@media only screen and (max-width: 1023px) {
  .nav-wrap .input-group {
    display: none;
  }
}
.nav-wrap .alerts,
.nav-wrap .mypage {
  position: relative;
  width: 42px;
  height: 38px;
  border-radius: 4px;
}
.nav-wrap .alerts {
  background-image: url(/img/ico/ico_alerts.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px auto;
  cursor: pointer;
  z-index: 1;
}
.nav-wrap .alerts.on::after {
  content: " ";
  position: absolute;
  top: 5px;
  right: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-nav-alerts);
}
.nav-wrap .alerts-area {
  position: absolute;
  top: 0px;
  right: 0;
  width: 238px;
  display: none;
  padding-top: 46px;
  pointer-events: none;
}
.nav-wrap .alerts-list {
  position: relative;
  pointer-events: auto;
  padding: 20px 12px;
  border-radius: 4px;
  border: 1px solid #188f6b;
  background: var(--bg-nav-depth);
  gap: 0px;
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.25));
  z-index: 1;
  /* triangle dimension */
  --a: 55deg; /* angle */
  --h: 16px; /* height */
  --p: 91%; /* triangle position (0%:left 100%:right) */
  --r: 4px; /* the radius */
  --b: 0.05em; /* border width  */
  --c1: #0d6759;
  --c2: #fff;
  padding: 12px;
  border-radius: min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2)) min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r) var(--r)/var(--r);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, min(100%, var(--p) + var(--h) * tan(var(--a) / 2)) 0, var(--p) calc(-1 * var(--h)), max(0%, var(--p) - var(--h) * tan(var(--a) / 2)) 0);
  background: var(--c1);
  -o-border-image: conic-gradient(var(--c1) 0 0) 0/0 max(0%, 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r) max(0%, var(--p) - var(--h) * tan(var(--a) / 2))/var(--h) 0 0 0;
     border-image: conic-gradient(var(--c1) 0 0) fill 0/0 max(0%, 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r) max(0%, var(--p) - var(--h) * tan(var(--a) / 2))/var(--h) 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.nav-wrap .alerts-list:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: var(--b);
  border-radius: inherit;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, min(100% - var(--b), var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) * tan(45deg - var(--a) / 4)) var(--b), var(--p) calc(var(--b) / sin(var(--a) / 2) - var(--h)), max(var(--b), var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) * tan(45deg - var(--a) / 4)) var(--b));
  background: var(--c2) content-box;
  -o-border-image: conic-gradient(var(--c2) 0 0) 0/0 max(var(--b), 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r) max(var(--b), var(--p) - var(--h) * tan(var(--a) / 2))/var(--h) 0 0 0;
     border-image: conic-gradient(var(--c2) 0 0) fill 0/0 max(var(--b), 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r) max(var(--b), var(--p) - var(--h) * tan(var(--a) / 2))/var(--h) 0 0 0;
}
.nav-wrap .alerts-list .alert-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s;
  width: 100%;
}
.nav-wrap .alerts-list .alert-item:first-child {
  padding-top: 0;
}
.nav-wrap .alerts-list .alert-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.nav-wrap .alerts-list .alert-item.is-open {
  background-color: rgba(24, 143, 107, 0.08);
  border-radius: 4px;
  padding: 8px;
  margin: 0 -8px;
}
.nav-wrap .alerts-list .alert-item.is-open .alert-title {
  color: #188F6B;
}
.nav-wrap .alerts-list .alert-item.is-open .alert-desc {
  display: block;
  overflow: visible;
  white-space: normal;
  -webkit-line-clamp: none;
  line-clamp: none;
  text-overflow: clip;
  color: #123328;
}
.nav-wrap .alerts-list .alert-item.is-open .btn-alert-toggle {
  color: #123328;
}
.nav-wrap .alerts-list .alert-item.is-open .btn-alert-toggle span {
  transform: rotate(180deg);
  margin-bottom: 2px;
}
.nav-wrap .alerts-list .alert-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-base);
}
.nav-wrap .alerts-list .alert-desc {
  font-size: 13px;
  color: var(--text-secondary);
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
.nav-wrap .alerts-list .btn-alert-toggle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.nav-wrap .alerts-list .btn-alert-toggle:hover {
  color: var(--text-base);
}
.nav-wrap .alerts-list .btn-alert-toggle span {
  display: inline-block;
  width: 10px;
  height: 6px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M0.219613 0.219613C0.360261 0.0789956 0.551002 0 0.749887 0C0.948771 0 1.13951 0.0789956 1.28016 0.219613L4.99266 3.93211L8.70516 0.219613C8.8473 0.0872909 9.03522 0.0152609 9.22939 0.0186789C9.42356 0.0220969 9.60884 0.100697 9.74623 0.23794C9.88363 0.375183 9.96243 0.560369 9.96606 0.754533C9.96969 0.948698 9.89787 1.1367 9.76571 1.27899L5.52352 5.52235C5.38287 5.66297 5.19213 5.74196 4.99325 5.74196C4.79436 5.74196 4.60362 5.66297 4.46297 5.52235L0.219613 1.28016C0.0789956 1.13951 0 0.948771 0 0.749887C0 0.551002 0.0789956 0.360261 0.219613 0.219613Z' fill='black'/%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
  text-indent: -9999px;
  color: transparent;
  font-size: 1px;
  overflow: hidden;
}
.nav-wrap .alerts-list .badge-danger {
  display: inline-block;
  width: 40px;
  height: 17px;
  border-radius: 2px;
  font-size: 12px;
  text-align: center;
}
.nav-wrap .mypage {
  background: url(/img/ico/ico_user.svg) no-repeat center;
  background-size: 22px auto;
}
.nav-wrap .myclass {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
@media only screen and (max-width: 1439px) {
  .nav-wrap .nav,
  .nav-wrap .input-group,
  .nav-wrap .item-box:has(.mypage) {
    display: none;
  }
}
@media only screen and (max-width: 1439px) {
  .nav-wrap.is-sitemap-open .item-box:has(.alerts) {
    display: none;
  }
  .nav-wrap.is-sitemap-open .item-box:has(.mypage) {
    display: flex;
  }
}
.nav-group .depth01 {
  gap: 2px;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.nav-group .depth01 > li {
  min-width: 130px;
  height: 64px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.nav-group .depth01 > li:hover {
  z-index: 1;
}
.nav-group .depth01 > li:hover::before, .nav-group .depth01 > li.active::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 66px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #FFF 0%, #F9F6EF 81.33%);
  display: block;
  pointer-events: none;
}
.nav-group .depth01 > li:hover > a, .nav-group .depth01 > li.active > a {
  color: #000;
  filter: none;
  text-shadow: none;
  z-index: 1;
}
.nav-group .depth01 > li:hover, .nav-group .depth01 > li.active {
  border-radius: 8px 8px 0 0;
  background: var(--bg-nav-depth);
}
.nav-group .depth01 > li:hover {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.1));
}
.nav-group .depth01 > li:hover:has(.depth02)::before, .nav-group .depth01 > li:hover:has(.depth02)::after {
  content: " ";
  position: absolute;
  bottom: 0px;
  width: 16px;
  height: 16px;
}
.nav-group .depth01 > li:hover:has(.depth02)::before {
  left: -14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='12' viewBox='0 0 13 12' fill='none'%3E%3Cpath d='M12 0C12.0438 0.52533 12.0485 1.11965 12 1.75578V12H0C9.03414 12 11.6795 5.96333 12 1.75578V0Z' fill='%23fff'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.nav-group .depth01 > li:hover:has(.depth02)::after {
  right: -15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M11.9648 12C1.59475 12 -0.000644684 4 -0.000644684 0V12H11.9648Z' fill='%23fff'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.nav-group .depth01 > li:hover .depth02 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.nav-group .depth01 > li > a {
  filter: var(--text-stroke);
  text-shadow: var(--text-shadow);
}
.nav-group .depth01 > li .state-box {
  position: absolute;
  left: 50%;
  bottom: 4px;
  height: 16px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.nav-group .depth01 > li .state-box .unit {
  position: absolute;
  left: 0px;
  padding: 0px 8px;
  font-size: 14px;
  height: 16px;
  line-height: 14px;
  font-weight: 700;
  border-radius: 14px;
  background: var(--bg-lecture-state);
  border: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
}
.nav-group .depth01 > li .state-box .unit small {
  font-size: 12px;
  font-weight: 400;
}
.nav-group .depth01 > li .state-box .progress {
  display: inline-block;
  width: 78px;
  height: 4px;
  border-radius: 4px;
  background: var(--bg-lecture-progress-primary);
}
.nav-group .depth01 > li .state-box .progress-bar {
  display: block;
  min-width: 9px;
  height: 100%;
  border-radius: inherit;
  background: var(--bg-lecture-progress-secondary);
  transition: width 0.3s ease-out;
}
.nav-group .depth02 {
  position: absolute;
  top: 64px;
  background: var(--bg-nav-depth);
  color: var(--text-base);
  font-size: 16px;
  font-weight: 400;
  border-radius: 8px;
  padding: 8px 26px 18px;
  gap: 48px;
  display: none;
}
.nav-group .depth02 li {
  position: relative;
  white-space: nowrap;
}
.nav-group .depth02 li:not(:last-child)::after {
  content: " ";
  position: absolute;
  right: -24px;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--border-base);
}
.nav-group .depth02 li a {
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.nav-group .depth02 li .ico-box {
  width: 60px;
  aspect-ratio: 1/1;
}

.btn-sitemap {
  display: none;
  position: relative;
  width: 42px;
  height: 38px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}
@media only screen and (max-width: 1439px) {
  .btn-sitemap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
}
.btn-sitemap::before, .btn-sitemap::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: var(--text-revers, #fff);
  border-radius: 1px;
  translate: -50% 0;
  transition: transform 0.3s ease, top 0.3s ease, box-shadow 0.3s ease;
}
.btn-sitemap::before {
  top: calc(50% - 7px);
  box-shadow: 0 7px 0 var(--text-revers, #fff);
}
.btn-sitemap::after {
  top: calc(50% + 7px);
}
.is-sitemap-open .btn-sitemap::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: none;
}
.is-sitemap-open .btn-sitemap::after {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.site-map {
  display: none;
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: var(--window-inner-height, 100vh);
  z-index: 8;
  overflow-y: auto;
  border-radius: 16px 0 0 0;
}
.site-map::-webkit-scrollbar {
  height: 10px;
  width: 7px;
}
.site-map::-webkit-scrollbar-thumb {
  background-color: var(--bg-scrollbar-thumb);
  border-radius: 8px;
  background-clip: padding-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.site-map::-webkit-scrollbar-track {
  background-color: var(--bg-scrollbar-track);
}
.is-sitemap-open .site-map {
  display: block;
}
.site-map-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.site-map-inner {
  position: fixed;
  top: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  width: 88.8888%;
  min-width: 320px;
  max-width: 480px;
  height: 100%;
  background: var(--bg-main);
}
.site-map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  height: 64px;
  padding: 0 16px;
  background: linear-gradient(90deg, #0f3025 0%, #194335 38%, #0b221b 87.5%, #0d231c 100%);
}
@media only screen and (max-width: 1023px) {
  .site-map-header {
    height: 50px;
  }
}
.site-map-header .mo-logo {
  display: inline-block;
  width: 90px;
  height: 100%;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.02em;
  background-image: url(/img/logo.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
  color: transparent;
  font-size: 1px;
  overflow: hidden;
}
.site-map-header .btn-close {
  position: relative;
  width: 42px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.site-map-header .btn-close::before, .site-map-header .btn-close::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  translate: -50% 0;
  transition: transform 0.3s ease, top 0.3s ease, box-shadow 0.3s ease;
}
.site-map-header .btn-close::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.site-map-header .btn-close::after {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.site-map-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  border-radius: 16px 0 0 0;
  padding: 24px 0px 48px;
  border-top: 2px solid #FFEBBF;
  background: radial-gradient(164.66% 55.74% at 50% 44.26%, #FDFAF0 62.61%, #EDE4D4 100%);
}
.site-map-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 28px;
  padding: 0 20px;
}
.site-map-quick .quick-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 4px;
  padding: 12px 4px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s;
}
.site-map-quick .quick-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.site-map-quick .quick-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.site-map-quick .quick-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.site-map-quick .quick-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}
.site-map-quick .state-box {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.site-map-quick .state-box .unit {
  position: absolute;
  left: 0px;
  padding: 0 8px;
  font-size: 12px;
  height: 18px;
  line-height: 15px;
  font-weight: 700;
  color: #fff;
  border-radius: 14px;
  background: var(--bg-lecture-state);
  border: 1px solid rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  translate: -50% 0;
  z-index: 1;
}
.site-map-quick .state-box .unit small {
  margin-left: 2px;
  font-size: 10px;
  font-weight: 400;
}
.site-map-quick .state-box .progress {
  display: inline-block;
  width: 78px;
  height: 4px;
  border-radius: 4px;
  background: var(--bg-lecture-progress-primary);
}
.site-map-quick .state-box .progress-bar {
  display: block;
  min-width: 9px;
  height: 100%;
  border-radius: inherit;
  background: var(--bg-lecture-progress-secondary);
}
.site-map-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-map .menu-section {
  position: relative;
}
.site-map .menu-section::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 58px;
  width: calc(100% - 40px);
  height: 1px;
  background: #E7E1C2;
}
.site-map .menu-section:first-child::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0px;
  width: calc(100% - 40px);
  height: 1px;
  background: #E7E1C2;
}
.site-map .menu-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  height: 58px;
  padding: 20px 36px 20px 20px;
  border: none;
  background: transparent;
  cursor: default;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}
.site-map .menu-section-title .ico-chevron {
  display: none;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.6);
  border-right: 1px solid rgba(0, 0, 0, 0.6);
  -webkit-mask: none;
          mask: none;
  background: none;
  transform: rotate(135deg);
  transition: transform 0.3s ease;
}
.site-map .menu-section:has(.menu-section-list) .menu-section-title {
  cursor: pointer;
}
.site-map .menu-section:has(.menu-section-list) .menu-section-title .ico-chevron {
  display: block;
}
.site-map .menu-section-list {
  list-style: none;
  margin: 0;
  padding: 0 26px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background: #F6F4E9;
}
.site-map .menu-section-list li.active a {
  font-weight: 700;
  color: var(--bg-lecture-progress-secondary);
}
.site-map .menu-section-list li a {
  display: block;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
  text-decoration: none;
}
.site-map .menu-section-list li a:hover {
  color: var(--text-secondary);
}
.site-map .menu-section-list li a.active {
  font-weight: 700;
  color: var(--bg-lecture-progress-secondary);
}
.site-map .menu-section-list li:last-child a {
  border-bottom: none;
  padding-bottom: 20px;
}
.site-map .menu-section.is-open .menu-section-title .ico-chevron {
  transform: rotate(-45deg);
}
.site-map .menu-section.is-open .menu-section-list {
  max-height: 500px;
}

.mo-search-layer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
}
@media only screen and (min-width: 1440px) {
  .mo-search-layer {
    display: none !important;
  }
}
.mo-search-layer.is-open {
  display: block;
}
.mo-search-layer .mo-search-inner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-main);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
}
.mo-search-layer .mo-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  height: 64px;
  padding: 0 16px;
  background: linear-gradient(90deg, #0f3025 0%, #194335 38%, #0b221b 87.5%, #0d231c 100%);
}
@media only screen and (max-width: 1023px) {
  .mo-search-layer .mo-search-header {
    height: 50px;
  }
}
.mo-search-layer .mo-search-header .mo-search-logo {
  display: inline-block;
  width: 90px;
  height: 100%;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.02em;
  background-image: url(/img/logo.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
  color: transparent;
  font-size: 1px;
  overflow: hidden;
}
.mo-search-layer .mo-search-header .btn-close-search {
  position: relative;
  width: 42px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.mo-search-layer .mo-search-header .btn-close-search::before, .mo-search-layer .mo-search-header .btn-close-search::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  translate: -50% 0;
  transition: transform 0.3s ease, top 0.3s ease, box-shadow 0.3s ease;
}
.mo-search-layer .mo-search-header .btn-close-search::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.mo-search-layer .mo-search-header .btn-close-search::after {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.mo-search-layer .mo-search-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  padding: 16px;
  background: radial-gradient(164.66% 55.74% at 50% 44.26%, #fdfaf0 62.61%, #ede2d4 100%);
  border-top: 2px solid #f3dba8;
}
.mo-search-layer .mo-search-input {
  flex-shrink: 0;
  border-bottom: 2px solid #163d30;
  padding: 10px 8px 10px 17px;
}
.mo-search-layer .mo-search-input .input-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  position: relative;
}
.mo-search-layer .mo-search-input input[type=text] {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  color: #000;
  box-shadow: none;
}
.mo-search-layer .mo-search-input input[type=text]::-moz-placeholder {
  color: rgba(0, 0, 0, 0.5);
}
.mo-search-layer .mo-search-input input[type=text]::placeholder {
  color: rgba(0, 0, 0, 0.5);
}
.mo-search-layer .mo-search-input .ico-search {
  position: static;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transform: none;
  background-image: url("/img/ico/ico_search.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.mo-search-layer .mo-search-input .btn-clear {
  position: static;
  flex-shrink: 0;
  margin-left: auto;
}
.mo-search-layer .mo-search-history {
  flex: 1;
  overflow-y: auto;
  padding: 17px 17px 24px;
}
.mo-search-layer .mo-search-history .search-suggestions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.mo-search-layer .mo-search-history .search-suggestions-list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  letter-spacing: -0.48px;
  cursor: pointer;
  border: none;
}
.mo-search-layer .mo-search-history .search-suggestions-list li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 3px 3px 3px 0;
  gap: 9px;
}
.mo-search-layer .mo-search-history .search-suggestions-list li span {
  flex: 1;
  text-align: left;
}
.mo-search-layer .mo-search-history .search-suggestions-list li .ico-history {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("/img/ico/ico_history.svg") center/contain no-repeat;
  opacity: 0.85;
}
.mo-search-layer .mo-search-history .search-suggestions-list li .btn-remove {
  width: 13px;
  height: 13px;
  padding: 0;
  border: none;
  background: transparent;
  flex-shrink: 0;
  margin-left: auto;
  background-image: url("/img/ico/ico_clear.svg");
  background-size: 13px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.mo-search-layer .mo-search-history .search-suggestions-list li:last-child {
  border-bottom: none;
}

.container {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--window-inner-height, 100vh) - 64px);
  margin-top: 0;
  overflow: auto;
  z-index: 1;
  border-radius: 30px 30px 0 0;
  border-top: 2px solid #f3dba8;
  background: var(--bg-primary);
  box-shadow: 0 -9px 6.3px 0 rgba(0, 0, 0, 0.5);
}
.container:has(.container-inner) {
   overflow: hidden;
}
.container-inner {
  overflow-y: auto;
  height: 100%;
}
.container::-webkit-scrollbar ,
.container-inner::-webkit-scrollbar {
  height: 10px;
  width: 7px;
}
.container::-webkit-scrollbar-thumb,
.container-inner::-webkit-scrollbar-thumb {
  background-color: var(--bg-scrollbar-thumb);
  border-radius: 8px;
  background-clip: padding-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.container::-webkit-scrollbar-track ,
.container-inner::-webkit-scrollbar-track {
  background-color: var(--bg-scrollbar-track);
}
@media only screen and (max-width: 1023px) {
  .container {
    top: 50px;
    height: calc(var(--window-inner-height, 100vh) - 50px);
    border-top: none;
  }
}

.video-card {
  position: relative;
  border-radius: 120px;
  pointer-events: auto;
}
.video-card::before {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: 0;
  transition: all 0.1s linear;
  padding: 0;
}
@media only screen and (min-width: 1024px) {
  .video-card:hover::before {
    opacity: 1;
    background: linear-gradient(180deg, var(--bg-card-hover-start) 0%, var(--bg-card-hover-end) 100%);
    box-shadow: 8px 16px 24px 0 var(--bg-card-hover-shadow);
    /*backdrop-filter: blur(9.3500003815px);*/
    padding: 15px;
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    border-radius: inherit;
    inset: auto;
    top: 50%;
    left: 50%;
  }
}
.video-card:hover .card::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 7px 0 var(--bg-card-shadow-inner);
  z-index: -1;
}
.video-card .pick {
  position: absolute;
  left: -110px;
  top: -10px;
  width: -moz-max-content;
  width: max-content;
  height: 42px;
  padding: 0 10px;
  border-radius: 24px 24px 0 24px;
  border: 1px solid var(--border-pick);
  background: var(--bg-pick);
  font-size: 16px;
  color: var(--text-pick);
  box-shadow: 0 4px 8px 0 var(--bg-pick-shadow);
  backdrop-filter: blur(2px);
  gap: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
@media only screen and (max-width: 1023px) {
  .video-card .pick {
    top: -4px;
    left: 0px;
    height: 28px;
    font-size: 12px;
    font-weight: 700;
  }
  .video-card .pick .pick-name {
    display: none;
  }
}
.video-card .pick em {
  margin-left: 2px;
  font-weight: 700;
}
.video-card .pick .ico-pick {
  z-index: 1;
  background-image: url("/img/ico/ico_pick.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 24px;
  aspect-ratio: 1/1;
}
@media only screen and (max-width: 1023px) {
  .video-card .pick .ico-pick {
    width: 16px;
  }
}
.video-card .card {
  width: 360px;
  height: 144px;
  border-radius: inherit;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  box-shadow: 0 8px 12px 0 var(--bg-card-shadow);
  backdrop-filter: blur(9.3500003815px);
  gap: 22px;
  padding: 8px 32px 8px 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}
@media only screen and (max-width: 767px) {
  .video-card .card {
    width: 300px;
    height: 110px;
    padding: 4px 12px 8px 8px;
    gap: 16px;
  }
}
.video-card .card:hover {
  box-shadow: 0 8px 12px 0 var(--bg-card-shadow);
}
.video-card .thumb {
  position: relative;
  min-width: 128px;
  max-width: 128px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
@media only screen and (max-width: 767px) {
  .video-card .thumb {
    min-width: 88px;
    max-width: 88px;
  }
}
.video-card .thumb::after {
  width: 100%;
  height: 100%;
  background: var(--bg-card-thumb-overlay);
  box-sizing: border-box;
  padding: 4px;
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-radius: inherit;
}
.video-card .thumb img {
  width: 100%;
  height: 100%;
  max-width: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.video-card .txt-box {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.video-card .txt-box .bookmark {
  position: absolute;
  top: 10px;
  right: 42px;
  width: 24px;
  height: 24px;
  background-image: url("");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 767px) {
  .video-card .txt-box .bookmark {
    right: 28px;
  }
}
.video-card .txt-box .bookmark input[type=checkbox] {
  padding: 0;
  width: 24px;
  height: 24px;
}
@media only screen and (max-width: 767px) {
  .video-card .txt-box .bookmark input[type=checkbox] {
    width: 18px;
    height: 18px;
  }
}
.video-card .txt-box .category {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-card-category);
  display: block;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--bg-cate-primary);
}
@media only screen and (max-width: 767px) {
  .video-card .txt-box .category {
    padding: 2px 4px;
    font-size: 10px;
    margin-bottom: 4px;
  }
}
.video-card .txt-box .category.leader {
  background: var(--bg-cate-primary);
}
.video-card .txt-box .category.insight {
  background: var(--bg-cate-secondary);
}
.video-card .txt-box .category.biz {
  background: var(--bg-cate-tertiary);
}
.video-card .txt-box .title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media only screen and (max-width: 767px) {
  .video-card .txt-box .title {
    font-size: 14px;
  }
}
.video-card .txt-box .author {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  .video-card .txt-box .author {
    margin-top: 8px;
    font-size: 11px;
  }
}
.video-card .gauge-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-gauge-base);
  padding-bottom: 4px;
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-radius: inherit;
}
@media only screen and (max-width: 1023px) {
  .video-card .gauge-bar {
    padding-bottom: 6px;
  }
}
.video-card .gauge-bar.rect {
  border-radius: 0;
  background: #D9D9D9;
}
.video-card .gauge-bar.rect .gauge-fill {
  border-radius: 0;
}
.video-card .gauge-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 50%;
  background: var(--bg-gauge-primary);
  border-radius: 4px;
}

.login {
  background-image: url("/img/login/bg_login.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login .inner {
  max-width: 420px;
  width: 100%;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 110px 0;
  min-height: var(--window-inner-height, 100vh);
}
@media only screen and (max-width: 1023px) {
  .login .inner {
    padding: 36px 40px;
  }
}
.login .login-title {
  text-align: center;
}
.login .login-title h1 {
  width: 185px;
  height: auto;
  margin: 0 auto 18px auto;
}
@media only screen and (max-width: 575px) {
  .login .login-title h1 {
    width: 168px;
  }
}
.login .login-title p {
  color: #4C3608;
  font-size: 20px;
  font-weight: 700;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  text-wrap: balance;
  word-break: keep-all;
}
@media only screen and (max-width: 575px) {
  .login .login-title p {
    font-size: 16px;
  }
}
.login .login-title p:not(:last-child) {
  margin-bottom: 4px;
}
.login .login-title p.en {
  font-size: 14px;
}
@media only screen and (max-width: 1023px) {
  .login .login-title p.en {
    display: none;
  }
}
.login .login-title p .tech {
  color: #0074FF;
}
.login .login-title p .human {
  color: #FA8500;
}
.login .login-title p .nature {
  color: #009E3A;
}
.login .login-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login .login-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  margin: auto 0;
}
@media only screen and (max-width: 575px) {
  .login .login-area {
    gap: 16px;
  }
}
.login .login-form {
  width: 100%;
}
.login .login-form-item {
  position: relative;
  width: 100%;
}
.login .login-form-item input[type=text],
.login .login-form-item input[type=password] {
  width: 100%;
  height: 66px;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 28px 16px 8px 16px;
  line-height: 40px;
  border-radius: 6px;
  border: 0.969px solid #BBA387;
  background: rgba(255, 255, 255, 0.95);
  font-size: 20px;
}
@media only screen and (max-width: 575px) {
  .login .login-form-item input[type=text],
  .login .login-form-item input[type=password] {
    padding: 12px 16px 0px 16px;
    height: 48px;
    font-size: 16px;
  }
}
.login .login-form-item input[type=text]:hover, .login .login-form-item input[type=text]:focus,
.login .login-form-item input[type=password]:hover,
.login .login-form-item input[type=password]:focus {
  outline: none;
}
.login .login-form-item label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 500;
  color: #AAA;
  transition: transform 0.18s ease, top 0.18s ease, font-size 0.18s ease, opacity 0.18s ease;
  pointer-events: none;
}
.login .login-form-item:focus-within:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgb(233, 148, 48) 0%, rgb(179, 102, 12) 100%);
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-radius: inherit;
  border-radius: 6px;
}
.login .login-form-item:focus-within label {
  top: 10px;
  transform: translateY(0);
  font-size: 12px;
  opacity: 1;
}
@media only screen and (max-width: 575px) {
  .login .login-form-item:focus-within label {
    top: 5px;
  }
}
.login .login-form-item:has(input:not(:placeholder-shown)) label, .login .login-form-item:has(input:-webkit-autofill) label {
  top: 10px;
  transform: translateY(0);
  font-size: 12px;
  opacity: 1;
}
@media only screen and (max-width: 575px) {
  .login .login-form-item:has(input:not(:placeholder-shown)) label, .login .login-form-item:has(input:-webkit-autofill) label {
    top: 5px;
  }
}
.login .btn-login {
  position: relative;
  margin-top: 20px;
  height: 66px;
  border-radius: 5.854px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 2px 2px rgba(201, 121, 38, 0.5);
  background: radial-gradient(77.08% 51.13% at 48.87% 100%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 24.58%, rgba(255, 255, 255, 0) 100%), #ff8200;
  background-blend-mode: screen, normal;
  box-shadow: 0 -2.927px 2.927px 0 #e18d36 inset, -0.732px -0.732px 1.463px -2.927px rgba(255, 245, 233, 0.35), -2.927px -2.927px 2.927px -2.927px rgba(255, 245, 233, 0.15), -5.854px -5.854px 5.854px -2.927px rgba(255, 245, 233, 0.25), 5.854px 5.854px 5.854px -2.927px rgba(139, 68, 3, 0.15), 2.927px 2.927px 2.927px -2.927px rgba(163, 141, 120, 0.1), 0.732px 0.732px 1.463px -2.927px rgba(154, 74, 0, 0.4);
}
@media only screen and (max-width: 575px) {
  .login .btn-login {
    height: 48px;
    font-size: 16px;
  }
}
.login .btn-login:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2px;
  box-sizing: border-box;
  background: linear-gradient(65deg, rgba(255, 255, 255, 0.6) 0%, transparent 100%) #ff8200;
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-radius: inherit;
}

.hanmac-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 1024px) {
  .hanmac-area {
    gap: 23px;
  }
}
.hanmac-area .hanmac-img {
  width: 100px;
  height: 20px;
}
@media only screen and (max-width: 1023px) {
  .hanmac-area .hanmac-img {
    width: 56px;
    height: 10px;
  }
}
.hanmac-area .hanmac-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.hanmac-area .hanmac-family {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
@media only screen and (max-width: 1023px) {
  .hanmac-area .hanmac-family {
    padding: 6px 0;
  }
}
.hanmac-area .hanmac-family li {
  position: relative;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 1023px) {
  .hanmac-area .hanmac-family li {
    height: 16px;
    padding: 0px 8px;
  }
}
.hanmac-area .hanmac-family li.hanmac {
  height: 16px;
}
.hanmac-area .hanmac-family li.saman {
  height: 18px;
}
.hanmac-area .hanmac-family li.jangheon {
  height: 16px;
}
.hanmac-area .hanmac-family li.ptc {
  height: 18px;
}
.hanmac-area .hanmac-family li.halla {
  height: 10px;
}
.hanmac-area .hanmac-family li.baron {
  height: 14px;
}
.hanmac-area .hanmac-family li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: 0;
  width: 1px;
  height: 10px;
  background-color: #000;
  opacity: 0.1;
}
.hanmac-area .hanmac-family li img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.wrap.lessons .container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f9f6f0 0%, #e6ddcc 100%);
}

.wrap.lessons .inner:has(.btn-edu-link) {
  padding-top: 40px;
}
.wrap.lessons .btn-edu-link {
  position: absolute;
  top: 74px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 262px;
  width: -moz-max-content;
  width: max-content;
  padding-left: 4px;
  height: 50px;
  border-radius: 8px;
  background: radial-gradient(117.51% 77.94% at 48.87% 100%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 24.58%, rgba(255, 255, 255, 0) 100%), #FFCF70;
  background-blend-mode: screen, normal;
  box-shadow: 0 -3.59px 3.59px 0 rgba(225, 141, 54, 0.5) inset, 3.59px 3.59px 10.769px -3.59px rgba(220, 196, 172, 0.85);
  color: rgba(0, 0, 0, 0.66);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.wrap.lessons .btn-edu-link:after {
  content: "";
  position: absolute;
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%);
  padding: 1px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.wrap.lessons .btn-edu-link em {
  font-weight: 700;
}
.wrap.lessons .btn-edu-link .ico-outward {
  width: 16px;
  height: 16px;
  background-image: 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%3Cg clip-path='url(%23clip0_5230_9433)'%3E%3Cpath d='M7.7002 3.2998V4.7002H2.7002V15.2998H13.2998V10.2998H14.7002V15.5C14.7002 15.8183 14.5737 16.1236 14.3486 16.3486C14.1236 16.5737 13.8183 16.7002 13.5 16.7002H2.5C2.18174 16.7002 1.87641 16.5737 1.65137 16.3486C1.42632 16.1236 1.2998 15.8183 1.2998 15.5V4.5C1.2998 4.18174 1.42632 3.87641 1.65137 3.65137C1.87641 3.42632 2.18174 3.2998 2.5 3.2998H7.7002Z' fill='black' stroke='black' stroke-width='0.4'/%3E%3Cpath d='M16.7002 1.2998V8C16.7002 8.18563 16.6264 8.36385 16.4951 8.49512C16.3639 8.62637 16.1856 8.70017 16 8.7002C15.8144 8.7002 15.6362 8.62637 15.5049 8.49512C15.3736 8.36384 15.2998 8.18565 15.2998 8V3.69336L9.90527 9.19629L9.90332 9.19434C9.84225 9.26288 9.77022 9.32033 9.6875 9.36035C9.60076 9.40232 9.50644 9.42592 9.41016 9.42969C9.31384 9.43341 9.21769 9.41696 9.12793 9.38184C9.0381 9.34664 8.95591 9.2938 8.8877 9.22559C8.81963 9.15751 8.76663 9.07594 8.73145 8.98633C8.69625 8.8965 8.67987 8.79953 8.68359 8.70312C8.68737 8.60687 8.71097 8.5125 8.75293 8.42578C8.79243 8.34415 8.84772 8.27154 8.91504 8.21094L14.3193 2.7002H10C9.81437 2.7002 9.63615 2.62637 9.50488 2.49512C9.37361 2.36384 9.2998 2.18565 9.2998 2C9.2998 1.81435 9.37361 1.63616 9.50488 1.50488C9.63615 1.37363 9.81437 1.2998 10 1.2998H16.7002Z' fill='black' stroke='black' stroke-width='0.4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5230_9433'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.66;
}
@media only screen and (max-width: 1023px) {
  .wrap.lessons .btn-edu-link {
    top: 14px;
    min-width: 218px;
    height: 40px;
    font-size: 16px;
  }
}


.onboarding .container {
  background: radial-gradient(93.89% 93.89% at 49.32% 6.11%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.11) 86.06%, rgba(134, 114, 77, 0.2) 88.94%), linear-gradient(180deg, #f9f6f0 0%, #e6ddcc 100%);
  box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.5);
}
@media only screen and (max-width: 1439px) {
  .onboarding .container {
    background: linear-gradient(180deg, #F8F4ED 0%, #E6DDCD 100%);
  }
}
.onboarding .puzzle-wrap {
  position: relative;
  width: 100%;
  height: calc(var(--window-inner-height) - 66px);
  padding: 0 32px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}
@media only screen and (max-width: 767px) {
  .onboarding .puzzle-wrap {
    padding: 0 24px;
  }
}
.onboarding .puzzle-area {
  position: relative;
  width: 100%;
  flex-grow: 1;
  max-height: 100%;
  padding-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
@media only screen and (max-width: 1439px) {
  .onboarding .puzzle-area {
    padding: 24px 0;
  }
}
@media only screen and (max-width: 767px) {
  .onboarding .puzzle-area {
    padding: 0;
  }
}
@media only screen and (max-width: 575px) {
  .onboarding .puzzle-area {
    max-width: 80%;
  }
}
.onboarding .puzzle-board {
  position: relative;
}
@media only screen and (min-width: 1440px) {
  .onboarding .puzzle-board {
    width: auto;
    height: 100%;
    aspect-ratio: 1870/801;
  }
}
@media only screen and (max-width: 1439px) {
  .onboarding .puzzle-board {
    width: auto;
    height: 100%;
  }
}
.onboarding .puzzle-board svg {
  width: 100%;
  height: auto;
  display: block;
}
@media only screen and (min-width: 1440px) {
  .onboarding .puzzle-board svg {
    transform: perspective(794px) rotateX(6deg);
    transform-origin: bottom;
  }
}
@media only screen and (max-width: 1439px) {
  .onboarding .puzzle-board svg {
    height: 100%;
  }
}
@media only screen and (max-width: 1439px) {
  .onboarding .puzzle-board .img-box {
    display: none;
  }
}
.onboarding .puzzle-board .img-box.family {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 14.07089%;
  left: 0.75187%;
  top: 5.03778%;
}
.onboarding .puzzle-board .img-box.hanmac {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 13.4264%;
  top: 0;
  right: 0.68528%;
}
.onboarding .puzzle-board .img-box.value {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 9.23737%;
  left: -1.61117%;
  bottom: -4.87804%;
}
.onboarding .puzzle-board .img-box.company {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 12.88936%;
  right: -2.68528%;
  bottom: -8.07926%;
}
.onboarding .puzzle-piece-group {
  cursor: pointer;
}
.onboarding .puzzle-piece-group:hover .piece-overlay-hover {
  fill-opacity: 0.3;
}
.onboarding .puzzle-piece-group.completed .piece-overlay-base {
  fill: #D9D9D9;
  fill-opacity: 0.5;
}
.onboarding .puzzle-piece-group.completed .gauge-fill-line {
  stroke-dashoffset: 0 !important;
}
.onboarding .puzzle-piece-group:not(.completed) .piece-overlay-base {
  fill-opacity: 0.2;
}
.onboarding .puzzle-piece-group:not(.completed)[data-piece="1"] .piece-overlay-base, .onboarding .puzzle-piece-group:not(.completed)[data-piece="6"] .piece-overlay-base {
  fill: var(--bg-piece-1);
}
.onboarding .puzzle-piece-group:not(.completed)[data-piece="2"] .piece-overlay-base, .onboarding .puzzle-piece-group:not(.completed)[data-piece="3"] .piece-overlay-base, .onboarding .puzzle-piece-group:not(.completed)[data-piece="4"] .piece-overlay-base, .onboarding .puzzle-piece-group:not(.completed)[data-piece="5"] .piece-overlay-base {
  fill: var(--bg-piece-2);
}
.onboarding .puzzle-piece-group:not(.completed)[data-piece="7"] .piece-overlay-base, .onboarding .puzzle-piece-group:not(.completed)[data-piece="8"] .piece-overlay-base {
  fill: var(--bg-piece-3);
}
.onboarding .puzzle-piece-group:not(.completed)[data-piece="9"] .piece-overlay-base, .onboarding .puzzle-piece-group:not(.completed)[data-piece="10"] .piece-overlay-base {
  fill: var(--bg-piece-4);
}
.onboarding .puzzle-piece-overlay-base {
  fill: white;
  fill-opacity: 0;
  transition: all 0.3s ease;
}
.onboarding .puzzle-piece-overlay-hover {
  fill: black;
  fill-opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.completion-animation-container svg {
  transform: perspective(794px) rotateX(6deg);
  transform-origin: bottom;
}
.completion {
  /* 상단 왼쪽 영역(대략 0-600px x, 0-300px y) 마스킹 - 배경색으로 덮기 */
}
.completion-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background: linear-gradient(180deg, #f9f5f2 0%, #ece3d2 100%);
  z-index: 0;
  pointer-events: none;
}

.lessons-wrap {
  position: relative;
  width: 100%;
  height: calc(var(--window-inner-height) - 66px);
  padding: 0 32px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding: 0;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  .lessons-wrap {
    padding: 0px;
  }
}
.lessons-area {
  position: relative;
  width: 100%;
  flex-grow: 1;
  background-image: url("/img/learning/bg_grid.svg");
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
@media only screen and (max-width: 767px) {
  .lessons-area {
    padding-top: 16px;
    padding-bottom: 32px;
    padding-left: 0px;
    padding-right: 24px;
  }
}
@media only screen and (max-width: 575px) {
  .lessons-area {
    max-width: 82%;
    padding-bottom: 0px;
  }
}
.lessons-gauge {
  position: relative;
  text-align: center;
  width: 84.427%;
  margin: auto;
  translate: 4% 0;
}
@media only screen and (max-width: 767px) {
  .lessons-gauge {
    max-width: 420px;
  }
}
.lessons-gauge {
  /* PC/모바일 게이지 전환 (768px 기준)
   * display:none 대신 visibility 사용 → getTotalLength() 측정 가능 (모바일 path-fill 동작) */
}
.lessons-gauge .gauge-svg-pc {
  display: block;
}
.lessons-gauge .gauge-svg-mo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
}
@media only screen and (max-width: 767px) {
  .lessons-gauge .gauge-svg-pc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    pointer-events: none;
  }
  .lessons-gauge .gauge-svg-mo {
    position: relative;
    visibility: visible;
    pointer-events: auto;
  }
  .lessons-gauge {
    width: 100%;
    margin: 0 auto;
    translate: 0;
    padding: 0px;
  }
}
.lessons-gauge svg {
  width: 100%;
  height: auto;
}
.lessons .start-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3.91304%;
  translate: -8% -32%;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .lessons .start-line {
    width: 10.5555555556%;
    translate: 1.6666666667% 0%;
  }
}
.lessons #markers-container {
  position: absolute;
  inset: 0;
  translate: none;
  pointer-events: none;
}
.lessons #markers-container > .marker {
  pointer-events: auto;
}
.lessons .marker {
  position: absolute;
  cursor: pointer;
}
.lessons .marker img {
  width: 100%;
  height: auto;
  display: block;
}
.lessons .marker[data-type=chapter] {
  width: 2.4676%;
  min-width: 20px;
  transform: scale(1.4);
}
@media only screen and (max-width: 767px) {
  .lessons .marker[data-type=chapter] {
    width: 7.2222222222%;
    min-width: 22px;
    transform: scale(1.4);
  }
}
.lessons .marker[data-type=chapter]::before, .lessons .marker[data-type=chapter]::after {
  content: "";
  display: block;
  position: absolute;
  aspect-ratio: 1/1;
  top: 50%;
  left: 50%;
  translate: -50% -100%;
  mix-blend-mode: multiply;
  z-index: -1;
}
.lessons .marker[data-type=chapter]::before {
  width: 25%;
  filter: blur(2px);
  opacity: 0.4;
}
.lessons .marker[data-type=chapter]::after {
  width: 15%;
  filter: blur(0.7px);
  opacity: 0.2;
}
.lessons .marker[data-type=chapter].current::before, .lessons .marker[data-type=chapter].current::after {
  background-color: var(--bg-chapter-current);
}
.lessons .marker[data-type=chapter].completed::before, .lessons .marker[data-type=chapter].completed::after {
  background-color: var(--bg-chapter-completed);
}
.lessons .marker[data-type=normal] {
  width: 2.3442%;
  translate: 0 -40%;
}
@media only screen and (max-width: 767px) {
  .lessons .marker[data-type=normal] {
    width: 5.5555555556%;
    min-width: 20px;
    translate: 0 -40%;
  }
}
.lessons .marker[data-type=normal].current {
  transform: scale(1.6) !important;
}
.lessons .marker:first-child {
  translate: 0 -80%;
}
@media only screen and (max-width: 767px) {
  .lessons .marker:first-child {
    translate: -35% -60%;
  }
}
.lessons .marker:nth-child(n+2):nth-child(-n+9) {
  translate: 0 -90%;
  transform: scale(1.2);
}
@media only screen and (max-width: 767px) {
  .lessons .marker:nth-child(n+2):nth-child(-n+9) {
    translate: -35% -60%;
  }
}
.lessons .marker:nth-child(n+11):nth-child(-n+12), .lessons .marker:nth-child(n+14):nth-child(-n+15) {
  transform: scale(1.2);
}
.lessons .marker:nth-child(10), .lessons .marker:nth-child(13) {
  translate: 0 -50%;
}
@media only screen and (max-width: 767px) {
  .lessons .marker:nth-child(10), .lessons .marker:nth-child(13) {
    translate: -35% -70%;
  }
}
@media only screen and (max-width: 767px) {
  .lessons .marker:nth-child(11), .lessons .marker:nth-child(12), .lessons .marker:nth-child(14), .lessons .marker:nth-child(15) {
    translate: -35% -70%;
  }
}
.lessons .marker:nth-child(16), .lessons .marker:nth-child(19) {
  translate: 0 -60%;
  transform: scale(1);
}
.lessons .marker:nth-child(n+17):nth-child(-n+18) {
  translate: 0 -60%;
  transform: scale(1.1);
}
.lessons .marker:nth-child(n+20):nth-child(-n+25) {
  translate: 0 -60%;
}
@media only screen and (max-width: 767px) {
  .lessons .marker:nth-child(n+20):nth-child(-n+25) {
    translate: 40% -80%;
  }
}
@media only screen and (max-width: 767px) {
  .lessons .marker:nth-child(n+21):nth-child(-n+25) {
    translate: -35% -60%;
  }
}
.lessons .marker:nth-child(n+22):nth-child(-n+24) {
  transform: scale(0.9);
}
.lessons .marker:nth-child(25) {
  transform: scale(0.8);
}
.lessons .chapter-list {
  pointer-events: none;
}
.lessons .chapter-list li {
  position: absolute;
  transition: all 0.3s ease;
  pointer-events: auto;
}
.lessons .chapter-list li:nth-child(1) {
  z-index: 14 !important;
}
.lessons .chapter-list li:nth-child(2) {
  z-index: 13 !important;
}
.lessons .chapter-list li:nth-child(3) {
  z-index: 12 !important;
}
.lessons .chapter-list li:nth-child(4) {
  z-index: 11 !important;
}
.lessons .chapter-list li:nth-child(5) {
  z-index: 10 !important;
}
.lessons .chapter-list li:not(.completed, .current) {
  filter: grayscale(100%);
}
.lessons .chapter-list li:not(.completed, .current):nth-child(1) {
  width: 9.9378881988%;
}
@media only screen and (max-width: 767px) {
  .lessons .chapter-list li:not(.completed, .current):nth-child(1) {
    width: 24.4444444444%;
  }
}
.lessons .chapter-list li:not(.completed, .current):nth-child(2) {
  width: 9.9378881988%;
}
@media only screen and (max-width: 767px) {
  .lessons .chapter-list li:not(.completed, .current):nth-child(2) {
    width: 24.4444444444%;
  }
}
.lessons .chapter-list li:not(.completed, .current):nth-child(3) {
  width: 9.9378881988%;
}
@media only screen and (max-width: 767px) {
  .lessons .chapter-list li:not(.completed, .current):nth-child(3) {
    width: 24.4444444444%;
  }
}
.lessons .chapter-list li:not(.completed, .current):nth-child(4) {
  width: 9.3167701863%;
}
@media only screen and (max-width: 767px) {
  .lessons .chapter-list li:not(.completed, .current):nth-child(4) {
    width: 22.7777777778%;
  }
}
.lessons .chapter-list li:not(.completed, .current):nth-child(5) {
  width: 8.6956521739%;
}
@media only screen and (max-width: 767px) {
  .lessons .chapter-list li:not(.completed, .current):nth-child(5) {
    width: 21.1111111111%;
  }
}
.lessons .chapter-list li.completed {
  width: 12.4223602484%;
}
@media only screen and (max-width: 767px) {
  .lessons .chapter-list li.completed {
    width: 33.3333333333%;
  }
}
.lessons .chapter-list li.completed svg {
  animation: bounce 0.5s ease;
}
.lessons .chapter-list li.current {
  width: 20.3726708075%;
}
@media only screen and (max-width: 767px) {
  .lessons .chapter-list li.current {
    width: 38.8888888889%;
  }
}
.lessons .chapter-list li.current svg {
  animation: bounce 0.5s ease;
}
.lessons .chapter-list li svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.lessons .chapter-card {
  position: relative;
  transition: all 0.3s ease;
}
.lessons .chapter-card:nth-child(1) {
  transform: scale(1);
}
.lessons .chapter-card:nth-child(2) {
  transform: scale(1.1);
}
.lessons .chapter-card:nth-child(3) {
  transform: scale(1.2);
}
.lessons .chapter-card:nth-child(4) {
  transform: scale(1.3);
}
.lessons .chapter-card:nth-child(5) {
  transform: scale(1.4);
}
.lessons .chapter-card-inner {
  position: relative;
  background: white;
  border-radius: 8px;
  padding: 0;
  transition: all 0.3s ease;
}
.lessons .chapter-card-inner::before, .lessons .chapter-card-inner::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid white;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.05));
}
.lessons .chapter-card.base .chapter-card-inner {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(74, 74, 74, 0) 50%, rgba(74, 74, 74, 0.2) 100%) #fff;
}
.lessons .chapter-card.base .chapter-card-inner::after {
  border-top-color: #d9d9d9;
}
.lessons .chapter-card.base .card-title {
  font-size: 14px;
  color: var(--bg-card-base);
}
@media only screen and (max-width: 767px) {
  .lessons .chapter-card.base .card-title {
    font-size: 11px;
  }
}
@media only screen and (max-width: 575px) {
  .lessons .chapter-card.base .card-title {
    font-size: 9px;
  }
}
.lessons .chapter-card.current .chapter-card-inner {
  border-radius: 14px;
  border: 3px solid var(--bg-card-current-border);
  background: linear-gradient(180deg, rgba(31, 155, 118, 0) 50%, rgba(31, 155, 118, 0.2) 100%) #fff;
}
.lessons .chapter-card.current .chapter-card-inner::after {
  border-top-color: var(--bg-card-current-bg);
  border-top-width: 18px;
  border-left-width: 14px;
  border-right-width: 14px;
  bottom: -16px;
}
.lessons .chapter-card.current .chapter-card-inner::before {
  content: "";
  display: block;
  position: absolute;
  border-top-color: var(--bg-card-current-border);
  border-top-width: 18px;
  border-left-width: 16px;
  border-right-width: 16px;
  bottom: -18px;
  width: 0;
  height: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left-color: transparent;
  border-right-color: transparent;
}
.lessons .chapter-card.current .card-title {
  font-size: 24px;
  padding: 8px 0;
  color: var(--bg-card-current);
}
@media only screen and (max-width: 767px) {
  .lessons .chapter-card.current .card-title {
    font-size: 16px;
    padding: 4px 0;
  }
}
@media only screen and (max-width: 575px) {
  .lessons .chapter-card.current .card-title {
    font-size: 12px;
  }
}
.lessons .chapter-card.current .card-play-button {
  width: 16.4634146341%;
}
.lessons .chapter-card.completed:nth-child(2) .card-stamp {
  transform: scale(1.1);
}
.lessons .chapter-card.completed:nth-child(3) .card-stamp {
  transform: scale(1.2);
}
.lessons .chapter-card.completed:nth-child(4) .card-stamp {
  transform: scale(1.3);
}
.lessons .chapter-card.completed:nth-child(5) .card-stamp {
  transform: scale(1.4);
}
.lessons .chapter-card.completed .card-stamp {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  translate: 50% -30%;
  width: 60px;
  aspect-ratio: 1/1;
  background-image: url("/img/learning/img_stamp.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}
.lessons .chapter-card.completed .chapter-card-inner {
  border-radius: 10px;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.9) 31%, rgba(234, 215, 204, 0.9) 100%) #fff;
}
.lessons .chapter-card.completed .chapter-card-inner::after {
  border-top-color: #f9f4f1;
}
.lessons .chapter-card.completed .card-thumbnail-container {
  position: relative;
}
.lessons .chapter-card.completed .card-thumbnail-container::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(138, 141, 115, 0.3) 0%, rgba(138, 141, 115, 0.3) 100%);
}
.lessons .chapter-card.completed .card-title {
  font-size: 20px;
  color: var(--bg-card-completed);
}
@media only screen and (max-width: 767px) {
  .lessons .chapter-card.completed .card-title {
    font-size: 14px;
  }
}
@media only screen and (max-width: 575px) {
  .lessons .chapter-card.completed .card-title {
    font-size: 12px;
  }
}
.lessons .chapter-card.completed .card-play-button {
  width: 19%;
}
.lessons .chapter-card .card-thumbnail {
  width: 100%;
  height: auto;
  display: block;
}
.lessons .chapter-card .card-thumbnail-container {
  position: relative;
  width: 100%;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
}
.lessons .chapter-card .card-title {
  text-align: center;
  font-weight: 700;
  padding: 4px 0;
  transition: color 0.3s ease;
}
.lessons .chapter-card .card-gauge-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #fff;
  box-shadow: 1.234px 1.234px 1.234px 0 rgba(0, 0, 0, 0.3) inset;
}
.lessons .chapter-card .card-gauge-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: var(--bg-gauge-fill);
  box-shadow: 0.922px 0.922px 0.922px 0 var(--shadow-gauge-inset) inset;
}
.lessons .chapter-card .shadow-effect {
  position: absolute;
  width: 80%;
  height: 10px;
  left: 50%;
  bottom: -20%;
  translate: -50% -50%;
}
.lessons .chapter-card .shadow-effect::before, .lessons .chapter-card .shadow-effect::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-shadow);
  border-radius: 50%;
  mix-blend-mode: multiply;
  opacity: 0.2;
}
.lessons .chapter-card .shadow-effect::before {
  width: 100%;
  height: 10px;
  top: 4px;
  filter: blur(4px);
  background: var(--bg-shadow);
}
.lessons .chapter-card .shadow-effect::after {
  width: 80%;
  height: 4px;
  top: 8px;
  filter: blur(2px);
  background: var(--bg-shadow);
}
.lessons .chapter-card .card-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 24.375%;
  height: auto;
  transition: transform 0.2s ease;
  z-index: 2;
}
.lessons .progress-indicator {
  width: 8.1366459627%;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .lessons .progress-indicator {
    width: 25.5555555556%;
  }
}
.lessons .progress-indicator.completed {
  width: 8.6956521739%;
}
@media only screen and (max-width: 767px) {
  .lessons .progress-indicator.completed {
    width: 26.6666666667%;
  }
}
.lessons .progress-indicator svg {
  overflow: visible;
}

.search-result {
  overflow: visible !important;
  background-attachment: scroll !important;
}
.search-result .container {
  background: linear-gradient(180deg, #F4F1EB 0%, #F7F7F7 100%);
}
.search-result .search-result-wrap {
  max-width: 1624px;
  margin: 0 auto;
  padding: 0px 16px 80px;
}
@media only screen and (max-width: 1023px) {
  .search-result .search-result-wrap {
    padding: 0px 16px 80px;
  }
}
.search-result .page-header {
  display: flex;
  flex-direction: column;
  max-width: 1632px;
  margin: auto;
  padding-top: 24px;
  padding-bottom: 56px;
}
@media only screen and (min-width: 1024px) {
  .search-result .page-header {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.search-result .page-header .page-title {
  padding-top: 64px;
}
.search-result .page-header h3 {
  font-size: 26px;
  font-weight: 700;
  color: #000;
}
@media only screen and (max-width: 1023px) {
  .search-result .page-header h3 {
    font-size: 18px;
  }
}
.search-result .page-header {
  padding-bottom: 15px;
}
@media only screen and (max-width: 767px) {
  .search-result .page-header .page-title {
    padding-top: 34px;
    padding-bottom: 18px;
  }
}
.search-result .page-title h3 {
  margin: 0 0 12px;
}
.search-result .page-title .search-summary {
  font-size: 18px;
  line-height: 2;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .search-result .page-title .search-summary {
    font-size: 20px;
    text-wrap: balance;
    line-height: 1.5;
  }
}
.search-result .page-title .search-summary em {
  font-weight: 700;
}
.search-result .page-title .search-summary .search-keyword {
  color: #FF7C33;
  font-weight: 600;
}
.search-result .page-title .search-summary .search-count {
  color: #000;
}
.search-result .filter-tabs {
  display: flex;
  gap: 16px;
  width: 100%;
  margin-bottom: 30px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.search-result .filter-tabs .filter-tab {
  position: relative;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333333;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
}
@media only screen and (max-width: 767px) {
  .search-result .filter-tabs .filter-tab {
    padding: 8px 12px;
    font-size: 14px;
  }
}
.search-result .filter-tabs .filter-tab .count {
  font-weight: 700;
}
.search-result .filter-tabs .filter-tab:hover {
  background: var(--bg-keyword-primary-hover);
  border-color: var(--border-keyword-primary-hover);
  color: var(--text-keyword-primary);
}
.search-result .filter-tabs .filter-tab.active {
  background: var(--bg-keyword-primary);
  border-color: var(--border-keyword-primary);
  color: var(--text-keyword-primary);
  font-weight: 700;
}
.search-result .search-sections {
  display: flex;
  flex-direction: column;
  gap: 140px;
}
@media only screen and (max-width: 767px) {
  .search-result .search-sections {
    gap: 48px;
  }
}
.search-result .content-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.search-result .content-section .section-header .section-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
}
@media only screen and (max-width: 767px) {
  .search-result .content-section .section-header .section-title {
    font-size: 14px;
  }
}
.search-result .content-section .section-header .section-title .section-count {
  font-size: 16px;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .search-result .content-section .section-header .section-title .section-count {
    font-size: 14px;
  }
}
.search-result .content-section .section-header .list-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
}
.search-result .content-section .section-header .select-wrap {
  position: relative;
}
.search-result .content-section .section-header .select-sort {
  padding: 8px 32px 8px 12px;
  font-size: 16px;
  color: var(--text-secondary);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23303030' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .search-result .content-section .section-header .list-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
  }
  .search-result .content-section .section-header .select-wrap {
    position: relative;
  }
  .search-result .content-section .section-header .select-sort {
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    color: var(--text-secondary);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23303030' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
  }
}
.search-result .content-section .video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -moz-column-gap: 24px;
       column-gap: 24px;
  row-gap: 56px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-result .content-section .video-item .card-link {
  display: block;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
}
.search-result .content-section .video-item .bookmark {
  position: absolute;
  top: 16px;
  right: 14px;
  z-index: 2;
  width: 22px;
  height: 22px;
  cursor: pointer;
  padding: 0;
}
.search-result .content-section .video-item .bookmark input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background-image: url("/img/ico/ico_bookmark_off.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.search-result .content-section .video-item .bookmark input[type=checkbox]:checked {
  background-image: url("/img/ico/ico_bookmark_on.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.search-result .content-section .video-item .item-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: var(--bg-video);
}
.search-result .content-section .video-item .item-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.search-result .content-section .video-item .item-info {
  padding: 14px 0;
  display: flex;
  align-items: flex-start;
  justify-content: stretch;
  flex-direction: column;
  gap: 8px;
}
@media only screen and (max-width: 1023px) {
  .search-result .content-section .video-item .item-info {
    padding: 8px 0;
  }
}
.search-result .content-section .video-item .item-title {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  height: calc(18px * 1.4 * 2);
  color: var(--text-primary);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media only screen and (max-width: 1023px) {
  .search-result .content-section .video-item .item-title {
    font-size: 14px;
    height: 39.2px;
  }
}

.search-result .content-section .video-item .item-desc {
  display: block;
  height: calc(13px * 1.5 * 3);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.search-result .content-section .video-item .item-meta {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-keyword-secondary);
}
@media only screen and (max-width: 1023px) {
  .search-result .content-section .video-item .item-meta {
    font-size: 12px;
  }
}
.search-result .content-section .video-item .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media only screen and (max-width: 1023px) {
  .search-result .content-section .video-item .tag-list {
    gap: 4px;
  }
}
.search-result .content-section .video-item .tag-list .tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-keyword-secondary);
}
@media only screen and (max-width: 1023px) {
  .search-result .content-section .video-item .tag-list .tag {
    font-size: 12px;
  }
}
@media only screen and (max-width: 1439px) {
  .search-result .content-section .video-grid {
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 12px;
         column-gap: 12px;
    row-gap: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .search-result .content-section .video-grid {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 10px;
         column-gap: 10px;
    row-gap: 20px;
  }
  .search-result .content-section .video-item .item-title {
    font-size: 13px;
    line-height: 1.35;
  }
}
.search-result .content-section .video-item .item-title span {
  color: #FF7C33;
  font-weight: 700;
}
.search-result .gauge-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-gauge-base);
  padding-bottom: 4px;
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-radius: inherit;
}
@media only screen and (max-width: 1023px) {
  .search-result .gauge-bar {
    padding-bottom: 6px;
  }
}
.search-result .gauge-bar.rect {
  border-radius: 0;
  background: #D9D9D9;
}
.search-result .gauge-bar.rect .gauge-fill {
  border-radius: 0;
}
.search-result .gauge-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 50%;
  background: var(--bg-gauge-primary);
  border-radius: 4px;
}

.insight .container {
  background-color: #fff;
}
.insight .insight-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}
@media only screen and (max-width: 1919px) {
  .insight .insight-inner {
    padding: 0 24px;
  }
}
@media only screen and (max-width: 1023px) {
  .insight .insight-inner {
    padding: 0 16px;
  }
}
.insight .breadcrumb {
  gap: 22px;
  font-size: 14px;
  align-self: flex-end;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}
.insight .breadcrumb li {
  position: relative;
}
.insight .breadcrumb li:not(:last-child)::after {
  content: ">";
  position: absolute;
  right: -14px;
  top: 0;
}
.insight .breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
.insight .breadcrumb a:hover {
  color: var(--text-primary);
}
.insight .breadcrumb .sep {
  margin: 0 2px;
  color: var(--text-keyword-base);
}
.insight .breadcrumb .current {
  color: var(--text-base);
  font-weight: 700;
}
.insight .breadcrumb {
  justify-content: flex-end;
}
.insight .insight-hero {
  position: relative;
  padding: 20px 0 0;
  background: #fff;
  overflow: hidden;
  background-image: linear-gradient(180deg, #F9F6F0 0%, rgba(230, 221, 204, 0.2) 18.34%, #FFF 33.35%), url(/img/insight/bg_banner.png);
  background-size: 100% 100%, 1579px auto;
  background-position: 0 0, center top;
  background-repeat: no-repeat, no-repeat;
}
.insight .insight-hero .hero-top {
  position: relative;
  padding-top: 8px;
}
.insight .insight-hero .hero-top .breadcrumb {
  margin: 0;
}
@media only screen and (max-width: 1023px) {
  .insight .insight-hero .hero-top.hero-breadcrumb {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .insight .insight-hero .insight-inner.hero-breadcrumb {
    padding-left: 0;
    padding-right: 0;
  }
}
.insight .insight-hero .hero-banner {
  max-width: 1442px;
  width: 100%;
  height: auto;
  padding: 46px 0 144px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.insight .insight-hero .hero-banner::before {
  content: "";
  position: absolute;
  width: 1920px;
  height: 544px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.56;
  background: linear-gradient(to bottom right, rgba(251, 215, 139, 0.3) 0%, #FFE5AC 27%, rgba(251, 215, 139, 0) 50%) bottom right/50% 50% no-repeat, linear-gradient(to bottom left, rgba(251, 215, 139, 0.3) 0%, #FFE5AC 27%, rgba(251, 215, 139, 0) 50%) bottom left/50% 50% no-repeat, linear-gradient(to top left, rgba(251, 215, 139, 0.3) 0%, #FFE5AC 27%, rgba(251, 215, 139, 0) 50%) top left/50% 50% no-repeat, linear-gradient(to top right, rgba(251, 215, 139, 0.3) 0%, #FFE5AC 27%, rgba(251, 215, 139, 0) 50%) top right/50% 50% no-repeat;
  z-index: 0;
}
@media only screen and (max-width: 1023px) {
  .insight .insight-hero .hero-banner {
    padding-bottom: 33px;
  }
  .insight .insight-hero .hero-banner::before {
    width: 100%;
    height: 100%;
  }
}

.insight .insight-hero .hero-swiper {
  overflow: hidden;
  height: 100%;
}
.insight .insight-hero .hero-swiper .swiper-wrapper {
  align-items: stretch;
}
.insight .insight-hero .hero-swiper .swiper-slide {
  height: 100%;
}
.insight .insight-hero .hero-swiper .banner-img {
  max-width: 1442px;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.insight .insight-hero .hero-swiper .banner-img img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.insight .insight-hero .hero-pagination {
  position: absolute;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: auto;
}
.insight .insight-hero .hero-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  opacity: 1;
  background: rgba(126, 90, 15, 0.3);
  margin: 0;
  transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
}
.insight .insight-hero .hero-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .insight .insight-hero .hero-pagination .swiper-pagination-bullet-active {
  width: 62px;
  height: 6px;
  border-radius: 3px;
  background: rgba(126, 90, 15, 0.3);
  position: relative;
  overflow: hidden;
}
.insight .insight-hero .hero-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after, .insight .insight-hero .hero-pagination .swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #ff8922;
  border-radius: 3px;
  animation: fillGauge 3.9s linear forwards;
}
@media only screen and (max-width: 1023px) {
  .insight .insight-hero .hero-pagination {
    bottom: 12px;
    gap: 6px;
  }
  .insight .insight-hero .hero-pagination .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    opacity: 1;
    background: rgba(126, 90, 15, 0.3);
    margin: 0;
    transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
  }
  .insight .insight-hero .hero-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .insight .insight-hero .hero-pagination .swiper-pagination-bullet-active {
    width: 40px;
    height: 4px;
    border-radius: 3px;
    background: rgba(126, 90, 15, 0.3);
    position: relative;
    overflow: hidden;
  }
  .insight .insight-hero .hero-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after, .insight .insight-hero .hero-pagination .swiper-pagination-bullet-active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #ff8922;
    border-radius: 3px;
    animation: fillGauge 3.9s linear forwards;
  }
}
.insight .leadership-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}
@media only screen and (max-width: 1919px) {
  .insight .leadership-inner {
    padding: 0 24px;
  }
}
@media only screen and (max-width: 1023px) {
  .insight .leadership-inner {
    padding: 0 16px;
  }
}
.insight .leadership-tabs {
  position: relative;
}
@media only screen and (min-width: 1024px) {
  .insight .leadership-tabs {
    margin-top: -58px;
    z-index: 11;
  }
}
@media only screen and (max-width: 1023px) {
  .insight .leadership-tabs .leadership-inner {
    padding: 0 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    overflow: visible;
  }
}
.insight .leadership-tabs-list {
  display: flex;
  gap: 2px;
  align-items: end;
  border-bottom: 1px solid #CF6800;
  width: 100%;
}
.insight .leadership-tab {
  flex: 1;
  height: 58px;
  border: 0;
  background: rgba(227, 220, 207, 0.34);
  color: #121212;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.9px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.insight .leadership-tab .tab-icon {
  display: none;
}
.insight .leadership-tab .tab-text {
  display: inline;
  color: #555;
}
.insight .leadership-tab:focus-visible {
  outline: 2px solid rgba(207, 104, 0, 0.55);
  outline-offset: 2px;
}
.insight .leadership-tab.is-active {
  position: relative;
  background: #fefefe;
  border-left: 1px solid #cf6800;
  border-right: 1px solid #cf6800;
  border-top: 1px solid #cf6800;
  z-index: 2;
}
.insight .leadership-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
}
.insight .leadership-tab.is-active .tab-text {
  color: #121212;
  font-weight: 600;
}
@media only screen and (max-width: 1023px) {
  .insight .leadership-tabs-list {
    border-bottom: none;
  }
  .insight .leadership-tab {
    height: auto;
    min-height: 58px;
    min-width: 58px;
    padding: 10px 4px 12px;
    border-radius: 0;
    background: transparent;
    border: none;
    font-size: 14px;
    letter-spacing: -0.4px;
    flex-direction: column;
    gap: 4px;
    scroll-snap-align: start;
  }
}
@media only screen and (max-width: 1023px) and (max-width: 767px) {
  .insight .leadership-tab {
    font-size: 12px;
  }
}
@media only screen and (max-width: 1023px) {
  .insight .leadership-tab .tab-icon {
    display: block;
    max-width: 48px;
    width: 55.1724%;
    min-width: 32px;
    min-height: 32px;
    aspect-ratio: 1/1;
  }
  .insight .leadership-tab .tab-icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .insight .leadership-tab.is-active {
    color: #121212;
    border-left: none;
    border-right: none;
    border-top: none;
    background: none;
  }
  .insight .leadership-tab.is-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 79.310344%;
    height: 1px;
    background: #ff8922;
  }
}

.insight .swiper-slide {
  height: -moz-max-content;
  height: max-content;
}
.insight .swiper-pagination {
  position: relative;
  bottom: 0;
}
.insight .swiper-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  opacity: 1;
  background: #7E5A0F;
  margin: 0;
  transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
}
.insight .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .insight .swiper-pagination .swiper-pagination-bullet-active {
  width: 62px;
  height: 6px;
  border-radius: 3px;
  background: rgba(126, 90, 15, 0.3);
  position: relative;
  overflow: hidden;
}
.insight .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after, .insight .swiper-pagination .swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #ff8922;
  border-radius: 3px;
  animation: fillGauge 2.9s linear forwards;
}
.insight .hero-banner .swiper-button-next,
.insight .hero-banner .swiper-button-prev,
.insight .hero-banner .btn-next,
.insight .hero-banner .btn-prev {
  pointer-events: auto;
  position: absolute;
  width: 84px;
  height: 180px;
  top: 50%;
  translate: 0 -50%;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  z-index: 10;
  margin-top: 0;
}
@media only screen and (max-width: 1023px) {
  .insight .hero-banner .swiper-button-next,
  .insight .hero-banner .swiper-button-prev,
  .insight .hero-banner .btn-next,
  .insight .hero-banner .btn-prev {
    display: none;
  }
}
.insight .hero-banner .swiper-button-next,
.insight .hero-banner .swiper-button-prev,
.insight .hero-banner .btn-next,
.insight .hero-banner .btn-prev {
  /* Swiper 기본 ::after 화살표 제거 (커스텀 background만 사용) */
}
.insight .hero-banner .swiper-button-next::after,
.insight .hero-banner .swiper-button-prev::after,
.insight .hero-banner .btn-next::after,
.insight .hero-banner .btn-prev::after {
  content: "" !important;
  display: none !important;
}
.insight .hero-banner .swiper-button-prev,
.insight .hero-banner .btn-prev {
  left: -120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='185' viewBox='0 0 98 185' fill='none'%3E%3Cpath d='M94.6499 3C88.3166 26.9504 62.8499 78.281 11.6499 92C39.3166 99.3333 94.6499 127.5 94.6499 181.5' stroke='url(%23paint0_linear_1337_60932)' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1337_60932' x1='94.6499' y1='92.25' x2='11.6499' y2='92.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CBAF94' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23DD842F'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") !important;
  transition: left 0.2s linear;
}
.insight .hero-banner .swiper-button-prev.swiper-button-disabled, .insight .hero-banner .swiper-button-prev.disabled,
.insight .hero-banner .btn-prev.swiper-button-disabled,
.insight .hero-banner .btn-prev.disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='185' viewBox='0 0 98 185' fill='none'%3E%3Cpath d='M94.6499 3C88.3166 26.9504 62.8499 78.281 11.6499 92C39.3166 99.3333 94.6499 127.5 94.6499 181.5' stroke='url(%23paint0_linear_1337_60932)' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1337_60932' x1='94.6499' y1='92.25' x2='11.6499' y2='92.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CBAF94' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23EFE7D7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") !important;
}
.insight .hero-banner .swiper-button-prev:not(.swiper-button-disabled):not(.disabled):hover,
.insight .hero-banner .btn-prev:not(.swiper-button-disabled):not(.disabled):hover {
  left: -130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='185' viewBox='0 0 98 185' fill='none'%3E%3Cpath d='M94.6499 3C88.3166 26.9504 62.8499 78.281 11.6499 92C39.3166 99.3333 94.6499 127.5 94.6499 181.5' stroke='url(%23paint0_linear_1337_60932)' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1337_60932' x1='94.6499' y1='92.25' x2='11.6499' y2='92.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CBAF94' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23D34D00'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") !important;
}
.insight .hero-banner .swiper-button-next,
.insight .hero-banner .btn-next {
  right: -130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='185' viewBox='0 0 98 185' fill='none'%3E%3Cpath d='M3.00098 3C9.33431 26.9504 34.801 78.281 86.001 92C58.3343 99.3333 3.00098 127.5 3.00098 181.5' stroke='url(%23paint0_linear_1337_61160)' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1337_61160' x1='3.00098' y1='92.25' x2='86.001' y2='92.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CBAF94' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23DD842F'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") !important;
  transition: right 0.2s linear;
}
.insight .hero-banner .swiper-button-next.swiper-button-disabled, .insight .hero-banner .swiper-button-next.disabled,
.insight .hero-banner .btn-next.swiper-button-disabled,
.insight .hero-banner .btn-next.disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='185' viewBox='0 0 98 185' fill='none'%3E%3Cpath d='M3.00098 3C9.33431 26.9504 34.801 78.281 86.001 92C58.3343 99.3333 3.00098 127.5 3.00098 181.5' stroke='url(%23paint0_linear_1337_61162)' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1337_61162' x1='3.00098' y1='92.25' x2='86.001' y2='92.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CBAF94' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23EFE7D7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") !important;
}
.insight .hero-banner .swiper-button-next:not(.swiper-button-disabled):not(.disabled):hover,
.insight .hero-banner .btn-next:not(.swiper-button-disabled):not(.disabled):hover {
  right: -140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='185' viewBox='0 0 98 185' fill='none'%3E%3Cpath d='M3.00098 3C9.33431 26.9504 34.801 78.281 86.001 92C58.3343 99.3333 3.00098 127.5 3.00098 181.5' stroke='url(%23paint0_linear_1337_61162)' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1337_61162' x1='3.00098' y1='92.25' x2='86.001' y2='92.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CBAF94' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23D34D00'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") !important;
}
.insight .insight-video-list {
  padding: 36px 0 56px;
}
@media only screen and (max-width: 1023px) {
  .insight .insight-video-list {
    padding: 24px 0 32px;
  }
}
.insight .insight-video-list .list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}
.insight .insight-video-list .total {
  font-size: 15px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
}
.insight .insight-video-list .total em {
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.85);
}
.insight .insight-video-list .list-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
}
.insight .insight-video-list .select-wrap {
  position: relative;
}
.insight .insight-video-list .select-sort {
  padding: 8px 32px 8px 12px;
  font-size: 16px;
  color: var(--text-secondary);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23303030' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.insight .video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -moz-column-gap: 24px;
       column-gap: 24px;
  row-gap: 56px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.insight .video-item .card-link {
  display: block;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
}
.insight .video-item .bookmark {
  position: absolute;
  top: 16px;
  right: 14px;
  z-index: 2;
  width: 22px;
  height: 22px;
  cursor: pointer;
  padding: 0;
}
.insight .video-item .bookmark input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background-image: url("/img/ico/ico_bookmark_off.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.insight .video-item .bookmark input[type=checkbox]:checked {
  background-image: url("/img/ico/ico_bookmark_on.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.insight .video-item .item-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: var(--bg-video);
}
.insight .video-item .item-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.insight .video-item .item-info {
  padding: 14px 0;
  display: flex;
  align-items: flex-start;
  justify-content: stretch;
  flex-direction: column;
  gap: 16px;
}
@media only screen and (max-width: 1023px) {
  .insight .video-item .item-info {
    padding: 8px 0;
  }
}
.insight .video-item .item-title {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  height: calc(18px * 1.4 * 2);
  color: var(--text-primary);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media only screen and (max-width: 1023px) {
  .insight .video-item .item-title {
    font-size: 14px;
    height: 39.2px;
  }
}
.insight .video-item .item-meta {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-keyword-secondary);
}
@media only screen and (max-width: 1023px) {
  .insight .video-item .item-meta {
    font-size: 12px;
  }
}
.insight .video-item .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media only screen and (max-width: 1023px) {
  .insight .video-item .tag-list {
    gap: 4px;
  }
}
.insight .video-item .tag-list .tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-keyword-secondary);
}
@media only screen and (max-width: 1023px) {
  .insight .video-item .tag-list .tag {
    font-size: 12px;
  }
}

@media only screen and (max-width: 1439px) {
  .insight .video-grid {
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 12px;
         column-gap: 12px;
    row-gap: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .insight .video-grid {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 10px;
         column-gap: 10px;
    row-gap: 20px;
  }
  .insight .video-item .item-title {
    font-size: 13px;
    line-height: 1.35;
  }
}
.biztrend .container {
  background: linear-gradient(180deg, #F9F6F0 1.26%, #FFF 10.89%);
}
.biztrend .biztrend-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 40px;
}
@media only screen and (max-width: 1919px) {
  .biztrend .biztrend-inner {
    max-width: 1648px;
    padding: 0 24px;
  }
}
@media only screen and (max-width: 1023px) {
  .biztrend .biztrend-inner {
    padding: 0 0;
  }
}
.biztrend .page-header {
  display: flex;
  flex-direction: column;
  max-width: 1600px;
  margin: auto;
  padding-top: 24px;
  padding-bottom: 56px;
}
/*
@media only screen and (min-width: 1024px) {
  .biztrend .page-header {
    padding-right: 8px;
  }
}
  */
.biztrend .page-header .page-title {
  padding-top: 64px;
}
.biztrend .page-header h3 {
  font-size: 26px;
  font-weight: 700;
  color: #000;
}
@media only screen and (max-width: 1023px) {
  .biztrend .page-header h3 {
    font-size: 18px;
  }
}
.biztrend .page-header {
  background-image: url("/img/biztrend/bg_header.png");
  background-size: 1579px auto;
  background-position: center top -50px;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 1023px) {
  .biztrend .page-header {
    width: 100%;
    padding-bottom: 16px;
    background-image: url("/img/biztrend/bg_header_m.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .biztrend .page-header .page-title {
    padding-top: 14px;
  }
}
.biztrend .breadcrumb {
  gap: 22px;
  font-size: 14px;
  align-self: flex-end;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  padding-top: 8px;
}



.biztrend .breadcrumb li {
  position: relative;
}
.biztrend .breadcrumb li:not(:last-child)::after {
  content: ">";
  position: absolute;
  right: -14px;
  top: 0;
}
.biztrend .breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
.biztrend .breadcrumb a:hover {
  color: var(--text-primary);
}
.biztrend .breadcrumb .sep {
  margin: 0 2px;
  color: var(--text-keyword-base);
}
.biztrend .breadcrumb .current {
  color: var(--text-base);
  font-weight: 700;
}
@media only screen and (max-width: 1023px) {
  .biztrend .breadcrumb {
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  .biztrend .biztrend-wrap {
    margin-top: -72px;
  }
}
.biztrend .biztrend-auto {
  max-width: 1600px;
  margin: 0 auto;
}
.biztrend .biztrend-header {
  margin-bottom: 10px;
  gap: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
@media only screen and (max-width: 1023px) {
  .biztrend .biztrend-header {
    position: relative;
    padding: 0 4px;
    margin-bottom: 0;
  }
}
.biztrend .biztrend-header .biztrend-sub-title {
  gap: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}
@media only screen and (max-width: 1023px) {
  .biztrend .biztrend-header .biztrend-sub-title {
    display: none;
  }
}
.biztrend .biztrend-header .biztrend-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}
.biztrend .biztrend-header .biztrend-intro-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.28;
  color: var(--text-base, #333);
}
.biztrend .biztrend-header .biztrend-intro-desc em {
  font-weight: 700;
}
.biztrend .article-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 10px;
  max-height: calc(var(--window-inner-height) - 234px - 64px);
  overflow-y: auto;
}
.biztrend .article-grid::-webkit-scrollbar {
  height: 10px;
  width: 7px;
}
.biztrend .article-grid::-webkit-scrollbar-thumb {
  background-color: var(--bg-scrollbar-thumb);
  border-radius: 8px;
  background-clip: padding-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.biztrend .article-grid::-webkit-scrollbar-track {
  background-color: var(--bg-scrollbar-track);
}
.biztrend .article-grid-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.biztrend .article-grid-head {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 3;
  background: #fff;
}
.biztrend .article-grid-days {
  grid-template-columns: repeat(5, calc((100% - 68px) / 6)) calc((100% - 68px) / 6 + 28px);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.biztrend .article-grid-days::after {
  content: "&";
  position: absolute;
  top: 0;
  right: calc(16.6666% - 12px);
  width: 28px;
  height: 100%;
  font-size: 21px;
  font-weight: 300;
  color: #c3c3c3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.biztrend .article-grid-days li {
  position: relative;
  padding: 8px 0;
  text-align: center;
  font-size: 17px;
  color: #c3c3c3;
}
.biztrend .article-grid-days li:last-child::before, .biztrend .article-grid-days li:last-child::after {
  left: auto;
  right: 0;
  width: calc(100% - 28px);
}
.biztrend .article-grid-days li::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 8px);
  height: 2px;
  background: #e5e4e3;
}
.biztrend .article-grid-days li::after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% + 8px);
  height: 1px;
  background: #e5e4e3;
}
.biztrend .article-grid-date {
  position: relative;
}
@media only screen and (max-width: 1023px) {
  .biztrend .article-grid-date {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff 0%, #F9F7F4 100%);
    box-shadow: 0.558px 1.116px 1.116px 0 rgba(0, 0, 0, 0.1);
  }
  .biztrend .article-grid-date::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgb(204, 173, 109) 0%, rgb(135, 111, 60) 100%);
  }
}
.biztrend .article-grid-date .date-select-trigger {
  width: 100%;
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  color: var(--text-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='11' viewBox='0 0 13 11' fill='none'%3E%3Cpath d='M6.06226 10.5L7.81656e-05 -1.88258e-07L12.1244 8.71687e-07L6.06226 10.5Z' fill='%230C0C0C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}
@media only screen and (max-width: 1023px) {
  .biztrend .article-grid-date .date-select-trigger {
    align-items: center;
    justify-content: center;
    padding: 0 32px 0 12px;
    height: 34px;
    box-shadow: 0.558px 1.116px 1.116px 0 rgba(0, 0, 0, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='11' viewBox='0 0 13 11' fill='none'%3E%3Cpath d='M6.06226 10.5L7.81656e-05 -1.88258e-07L12.1244 8.71687e-07L6.06226 10.5Z' fill='%230C0C0C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 9px auto;
    background-position: right 10px center;
  }
}
.biztrend .article-grid-date .date-select-trigger .date-select-label {
  gap: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-direction: row;
}
.biztrend .article-grid-date .date-select-trigger .date-year {
  color: #979797;
  font-size: 20px;
}
@media only screen and (max-width: 1023px) {
  .biztrend .article-grid-date .date-select-trigger .date-year {
    font-size: 14px;
  }
}
.biztrend .article-grid-date .date-select-trigger .date-month {
  color: #020202;
  font-size: 25px;
}
@media only screen and (max-width: 1023px) {
  .biztrend .article-grid-date .date-select-trigger .date-month {
    font-size: 14px;
  }
}
.biztrend .article-grid-date .date-select-trigger .date-select-month {
  font-weight: bold;
}
.biztrend .article-grid-date .date-select-trigger .date-select-icon {
  display: none;
}
.biztrend .article-grid-date .datepicker-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  z-index: 50;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--border-keyword-base, #ddd);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.biztrend .article-grid-date .datepicker-dropdown.is-open {
  display: block;
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-dropdown-inner {
  padding: 16px;
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheels {
  gap: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: row;
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel {
  height: 180px;
  overflow: hidden;
  border: 1px solid var(--border-keyword-base, #ddd);
  border-radius: 6px;
  position: relative;
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel::before, .biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 72px;
  pointer-events: none;
  z-index: 1;
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel::before {
  top: 0;
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel::after {
  bottom: 0;
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel-track {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel-track::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel-track::-webkit-scrollbar-thumb {
  background-color: var(--bg-scrollbar-thumb);
  border-radius: 8px;
  background-clip: padding-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel-track::-webkit-scrollbar-track {
  background-color: var(--bg-scrollbar-track);
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel-item {
  height: 36px;
  font-size: 16px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, font-weight 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel-item.is-selected {
  font-weight: 700;
  color: var(--text-primary);
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-wheel-item:hover {
  color: var(--text-primary);
}
.biztrend .article-grid-date .datepicker-dropdown .datepicker-actions {
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.biztrend .article-grid-date .datepicker-dropdown .btn-datepicker-cancel,
.biztrend .article-grid-date .datepicker-dropdown .btn-datepicker-confirm {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.biztrend .article-grid-date .datepicker-dropdown .btn-datepicker-cancel {
  background: #f5f5f5;
  color: var(--text-secondary);
  border: none;
}
.biztrend .article-grid-date .datepicker-dropdown .btn-datepicker-cancel:hover {
  background: #eee;
}
.biztrend .article-grid-date .datepicker-dropdown .btn-datepicker-confirm {
  background: var(--bg-keyword-primary, #333);
  color: #fff;
  border: none;
}
.biztrend .article-grid-date .datepicker-dropdown .btn-datepicker-confirm:hover {
  background: var(--bg-keyword-hover, #555);
}
.biztrend .article-grid-body {
  display: flex;
  flex-direction: column;
  gap: 54px;
}
.biztrend .article-grid-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, calc((100% - 68px) / 6)) calc((100% - 68px) / 6 + 28px);
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.biztrend .article-grid-row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(16.6666% + 4px);
  width: 1px;
  border-right: 1px dashed #cbcaca;
}
.biztrend .article-grid-month-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: -12px;
}
@media only screen and (max-width: 1023px) {
  .biztrend .article-grid-month-sep {
    flex: 0 0 1px;
    width: 1px;
    min-width: 1px;
    max-width: 1px;
    align-self: stretch;
    height: auto;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    gap: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
.biztrend .article-grid-month-sep::before, .biztrend .article-grid-month-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #cbcaca;
}
.biztrend .article-grid-body > .article-grid-month-sep:first-of-type {
  margin-top: 0;
}
.biztrend .article-grid-month-label {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: #8C7B6A;
  white-space: nowrap;
}
.biztrend .article-card.is-empty {
  pointer-events: none;
  visibility: hidden;
}
.biztrend .article-grid-sentinel {
  height: 1px;
  margin-top: -1px;
}
.biztrend .article-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: flex-start;
  min-height: 160px;
  min-width: 0;
  padding: 0 8px;
  background: linear-gradient(180deg, #eff4f3 0%, #F9F9F9 71.15%, rgba(249, 249, 249, 0) 96.63%);
  border-radius: 6px;
}
.biztrend .article-card:nth-child(6n) {
  margin-left: 28px;
}
.biztrend .article-card:not(.weekend) .article-card-content {
  padding-bottom: 8px;
}
.biztrend .article-card.weekend {
  display: flex;
  background: linear-gradient(180deg, #f8f3ee 0%, rgba(248, 243, 238, 0) 100%);
}
.biztrend .article-card.weekend .article-card-num::before {
  background-color: #8C7B6A;
}
.biztrend .article-card.weekend .article-card-content .article-card-title-box {
  background: #eddfd1;
}
.biztrend .article-card.is-future {
  opacity: 0.3;
}
.biztrend .article-card.today::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6px;
  width: calc(100% - 12px);
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg, #ff5905 75%, rgba(255, 89, 5, 0) 100%);
}
.biztrend .article-card.today .article-card-num {
  filter: drop-shadow(3px 0 2px rgba(0, 0, 0, 0.25));
}
.biztrend .article-card.today .article-card-num::before {
  background-color: #ff5905;
}
.biztrend .article-card-num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 39px;
  height: 33px;
  padding-left: 6px;
  padding-right: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.biztrend .article-card-num::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #6a7b77;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 33'%3E%3Cpath fill='white' d='M0 33C32 33 29.5 28.5 38.5 0H6C2.68629 0 0 2.68629 0 6V33Z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 33'%3E%3Cpath fill='white' d='M0 33C32 33 29.5 28.5 38.5 0H6C2.68629 0 0 2.68629 0 6V33Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.biztrend .article-card-content {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding-bottom: 8px;
}
.biztrend .article-card-content:first-of-type .article-card-title-box {
  padding-left: 32px;
}
.biztrend .article-card-content:not(:first-of-type):last-of-type .article-card-title-box {
  background: #EBE3EB;
}
.biztrend .article-card-content:hover {
  z-index: 1;
}
.biztrend .article-card-content:hover::before {
  background: linear-gradient(180deg, var(--bg-card-hover-start) 0%, var(--bg-card-hover-end) 100%);
}
@media only screen and (min-width: 1024px) {
  .biztrend .article-card-content::before {
    content: " ";
    display: none;
    position: absolute;
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    border-radius: inherit;
    top: -8px;
    left: -8px;
    width: 100%;
    height: calc(100% - 8px);
    padding: 8px;
    border-radius: 10px;
  }
}
.biztrend .article-card-content .article-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.biztrend .article-card-content > .article-card-like {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  background-image: url("/img/ico/ico_bookmark_off.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.biztrend .article-card-content > .article-card-like.is-active {
  background-image: url("/img/ico/ico_bookmark_on.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.biztrend .article-card-title-box {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding-left: 16px;
  padding-right: 32px;
  margin-bottom: 8px;
  gap: 8px;
  background: #dbe8e5;
  border-radius: 2px 2px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.biztrend .article-card-title {
  position: relative;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.biztrend .article-card-list {
  padding: 0 24px;
  width: 100%;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #2D2D2D;
  flex: 1;
  overflow: hidden;
}
.biztrend .article-card-list li {
  position: relative;
  padding-left: 14px;
  text-align: left;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.biztrend .article-card-list li::before {
  content: " ";
  position: absolute;
  top: 10px;
  left: 0;
  width: 4px;
  height: 1px;
  background: #000;
}
.biztrend .article-card-badge {
  position: absolute;
  top: 32px;
  right: -8px;
  padding: 2px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #009670;
  border-radius: 50px;
}
.biztrend .article-card-badge::before {
  content: " ";
  position: absolute;
  width: 8px;
  height: 7px;
  right: 16px;
  top: -6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' viewBox='0 0 8 7' fill='none'%3E%3Cpath d='M0.703703 -0.000893531C-0.896297 -0.000893671 2.0811 6.0837 0 6.8457L7.50047 6.8457C9.31373 6.84766 2.3037 -0.000893391 0.703703 -0.000893531Z' fill='%23009670'/%3E%3C/svg%3E");
}
.biztrend .article-card-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}
.biztrend .article-card-image-placeholder {
  width: 100%;
  max-width: 120px;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 12px;
  color: var(--text-keyword-secondary, #999);
  text-align: center;
  padding-top: 12px;
}
.biztrend .article-card-image-placeholder + .article-card-list {
  padding-left: 0;
}
.biztrend .gauge-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-gauge-base);
  padding-bottom: 4px;
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-radius: inherit;
}
@media only screen and (max-width: 1023px) {
  .biztrend .gauge-bar {
    padding-bottom: 6px;
  }
}
.biztrend .gauge-bar.rect {
  border-radius: 0;
  background: #D9D9D9;
}
.biztrend .gauge-bar.rect .gauge-fill {
  border-radius: 0;
}
.biztrend .gauge-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 50%;
  background: var(--bg-gauge-primary);
  border-radius: 4px;
}
@media only screen and (max-width: 1023px) {
  .biztrend .container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .biztrend .page-header {
    flex-shrink: 0;
    padding-bottom: 8px;
  }
  .biztrend .page-header .page-title {
    padding-top: 8px;
  }
  .biztrend .biztrend-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .biztrend .biztrend-inner {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
      .biztrend-auto {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  .biztrend .biztrend-sub-title {
    display: none;
  }
  .biztrend .biztrend-header {
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .biztrend .article-grid {
    width: 100vw;
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .biztrend .article-grid-inner {
    flex: 1;
    min-height: 0;
    flex-direction: row;
    gap: 0;
    overflow: hidden;
  }
  .biztrend .article-grid-head {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 2;
    background: #fff;
  }
  .biztrend .article-grid-head::after {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    width: 8px;
    height: 100%;
    opacity: 0.2;
    background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, #737373 100%);
  }
  .biztrend .article-grid-days {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 32px;
    width: 34px;
  }
  .biztrend .article-grid-days::after {
    display: none;
  }
  .biztrend .article-grid-days li {
    flex: 1;
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #c3c3c3;
  }
  .biztrend .article-grid-days li::before, .biztrend .article-grid-days li::after {
    display: none;
  }
  .biztrend .article-grid-days li:last-child::after {
    content: "&";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 34px;
    height: -moz-max-content;
    height: max-content;
    font-size: 12px;
    font-weight: 300;
    color: #c3c3c3;
    transform: translateY(-50%);
    background: none;
  }
  .biztrend .article-grid-body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    padding-left: 8px;
    -webkit-overflow-scrolling: touch;
    padding-top: 8px;
  }
  .biztrend .article-grid-body::-webkit-scrollbar {
    height: 10px;
    width: 7px;
  }
  .biztrend .article-grid-body::-webkit-scrollbar-thumb {
    background-color: var(--bg-scrollbar-thumb);
    border-radius: 8px;
    background-clip: padding-box;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }
  .biztrend .article-grid-body::-webkit-scrollbar-track {
    background-color: var(--bg-scrollbar-track);
  }
  .biztrend .article-grid-row {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(100vw - 48px);
    width: calc(100vw - 48px);
    min-width: calc(100vw - 48px);
    height: 100%;
    gap: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
  }
  .biztrend .article-grid-row::before {
    display: none;
  }
  .biztrend .article-card {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    flex: 1;
    min-height: 0;
    padding: 0;
    margin-left: 0;
  }
  .biztrend .article-card:not(:last-child)::after {
    content: " ";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #000;
    opacity: 0.08;
  }
  .biztrend .article-card:nth-child(6n) {
    margin-left: 0;
  }
  .biztrend .article-card .article-card-num {
    font-size: 10px;
    width: 21px;
    height: 34px;
    padding-left: 4px;
    padding-right: 8px;
  }
  .biztrend .article-card .article-card-num::before {
    width: 21px;
    height: 34px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' viewBox='0 0 22 34' fill='none'%3E%3Cpath d='M0 33.7674C18.0924 33.7674 16.6789 29.1628 21.7674 0H2.24729C1.00615 0 0 1.00615 0 2.24729V33.7674Z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' viewBox='0 0 22 34' fill='none'%3E%3Cpath d='M0 33.7674C18.0924 33.7674 16.6789 29.1628 21.7674 0H2.24729C1.00615 0 0 1.00615 0 2.24729V33.7674Z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .biztrend .article-card .article-card-content {
    flex: 1;
    min-width: calc((100vw - 34px - 20px) / 2);
    min-height: 100% !important;
    padding-bottom: 0 !important;
    flex-shrink: 0;
    overflow: hidden;
  }
  .biztrend .article-card .article-card-content:first-of-type .article-card-title-box {
    padding-left: 32px;
  }
  .biztrend .article-card .article-card-content > .article-card-like {
    top: 10px;
    right: 6px;
    width: 14px;
    height: 14px;
  }
  .biztrend .article-card.weekend .article-card-content .article-card-title-box {
    background: #eddfd1;
  }
  .biztrend .article-card .article-card-content:first-of-type .article-card-title-box {
    padding-left: 24px;
  }
  .biztrend .article-card .article-card-content:first-of-type .article-card-title-box .article-card-title {
    padding-left: 0;
  }
  .biztrend .article-card .article-card-title-box {
    padding: 0 24px 4px 8px;
    height: 34px;
    min-height: 34px;
    line-height: 30px;
  }
  .biztrend .article-card .article-card-title {
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .biztrend .article-card .article-card-badge {
    right: -4px;
    height: 22px;
    min-height: 22px;
    line-height: 18px;
  }
  .biztrend .article-card .gauge-bar {
    padding-bottom: 2px;
  }
  .biztrend .article-card .article-card-list {
    padding: 0 8px;
    font-size: 10px;
    line-height: 1.4;
  }
  .biztrend .article-card .article-card-list li {
    padding-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .biztrend .article-card .article-card-list li::before {
    top: 6px;
    width: 3px;
    height: 3px;
    border-radius: 50px;
  }
  .biztrend .article-card .article-card-image {
    display: flex;
    width: 100%;
  }
  .biztrend .article-card .article-card-image-placeholder {
    display: none;
  }
}

.mypage .container {
  background: linear-gradient(180deg, #F9F6F0 0%, #E6DDCC 100%);
  overflow: hidden;
}
.mypage .mypage-inner {
  display: grid;
  grid-template-columns: minmax(230px, 295fr) 1305fr;
  max-width: 1600px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
}
.mypage .mypage-sidebar {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  min-height: 0;
  padding-top: 32px;
  padding-left: 16px;
  padding-right: 16px;
  overflow-y: auto;
}
.mypage .mypage-sidebar::-webkit-scrollbar {
  height: 10px;
  width: 7px;
}
.mypage .mypage-sidebar::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #D4C6A9;
  background-blend-mode: multiply;
  background-clip: padding-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.mypage .mypage-sidebar::-webkit-scrollbar-track {
  border-radius: 4px;
  background: #F2ECDF;
  background-blend-mode: multiply;
}
.mypage .mypage-sidebar::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  border-left: 1px solid #c7c5c0;
  right: 0;
  top: 0;
  box-shadow: 1px 0 0 0 #fff, -1px 0 0 0 #fff inset;
}
@media only screen and (max-width: 1023px) {
  .mypage .mypage-sidebar {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}
.mypage .mypage-title {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.mypage .profile-area {
  max-width: 202px;
  margin: 64px auto 0;
}
.mypage .profile-card {
  margin-bottom: 24px;
  text-align: center;
}
.mypage .profile-photo-wrap {
  position: relative;
  width: 132px;
  margin: 0 auto 18px;
}
@media only screen and (max-width: 1023px) {
  .mypage .profile-photo-wrap {
    margin: 0;
  }
}
.mypage .profile-photo {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 4px solid #FFF;
  box-shadow: 3px 1px 11.6px 10px rgba(210, 205, 194, 0.20), 0 2px 5px 0 rgba(0, 0, 0, 0.20) inset;
}
.mypage .profile-photo .profile-photo-inner{
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.mypage .profile-photo .ico-photo {
  position: absolute;
  bottom: 10px;
  right: 0;
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
}
@media only screen and (max-width: 1023px) {
  .mypage .profile-photo .ico-photo {
      right: -12px;
      bottom: 0;
  }
  
}
.mypage .profile-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mypage .profile-photo-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mypage .badge-item {
  position: absolute;
  display: block;
  line-height: 0;
}
.mypage .badge-item img {
  display: block;
  max-width: 100%;
  height: auto;
}
.mypage .badge-item-hat {
  /* 원 위로 살짝 걸쳐 보이도록 위치 조정 */
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
}
.mypage .badge-item-pencil {
  right: -10px;
  bottom: -14px;
  width: 54px;
}
.mypage .badge-item-pick {
  left: -24px;
  bottom: 0;
  width: 64px;
}
.mypage .profile-name {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.mypage .profile-name em {
  font-weight: 700;
}
.mypage .profile-name .ico-level {
  display: none;
  width: 16px;
  height: 16px;
}
.mypage .profile-name .ico-level img {
  vertical-align: baseline;
}
.mypage .profile-role {
  margin: 0 0 22px;
  font-size: 15px;
  color: #7d7b78;
}
@media only screen and (max-width: 1023px) {
  .mypage .profile-role {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    padding-left: 22px;
    font-size: 14px;
  }
}
.mypage .badge-level {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 2px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #000;
  background: #E6DED0;
  border-radius: 4px;
}
.mypage .badge-level .ico-level {
  width: 26px;
  height: 26px;
}
.mypage .badge-level .ico-info {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  background: url("/img/ico/ico_info.svg") center/contain no-repeat;
  cursor: help;
}
.mypage .badge-level .ico-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-align: left;
}
.mypage .badge-level .ico-info-wrap:hover .ico-info-tooltip, .mypage .badge-level .ico-info-wrap:focus-within .ico-info-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mypage .badge-level .ico-info-tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 100;
  min-width: 150px;
  padding: 12px;
  background: rgba(251, 251, 251, 0.9);
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s, visibility 0.15s;
  white-space: nowrap;
}
.mypage .badge-level .ico-info-tooltip::before {
  content: "";
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(249, 246, 240, 0.9) 0%, rgba(233, 215, 189, 0.9) 100%);
}
.mypage .badge-level .ico-info-tooltip-desc {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  color: #000;
  text-align: left;
}
.mypage .badge-level .ico-info-tooltip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mypage .badge-level .ico-info-tooltip-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: #777161;
  padding: 2px 0;
}
.mypage .badge-level .ico-info-tooltip-list li:not(:last-child) {
  border-bottom: 1px solid #F2F2F2;
}
.mypage .badge-level .ico-info-tooltip-list li em {
  font-weight: 700;
  font-style: normal;
  min-width: 52px;
  flex: 1;
}
.mypage .badge-level .ico-info-tooltip-list li span {
  color: #777;
  text-align: left;
  flex: 1;
}
.mypage .badge-level .badge-level-value {
  font-size: 13px;
  font-weight: 700;
  color: #000;
  gap: 6px;
  width: 96px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}
.mypage .suggest-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.mypage .suggest-section .suggest-detail-modal {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
}
.mypage .suggest-section .suggest-detail-modal[hidden] {
  display: none !important;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  max-height: min(520px, 100% - 16px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-header {
  position: relative;
  flex-shrink: 0;
  padding: 16px 16px 12px 16px;
  background: linear-gradient(180deg, #f6ecdc 0%, #faf6ef 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-heading {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #5e4311;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: #666;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #333;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-meta dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  margin: 0;
  font-weight: 600;
  color: #7d7b78;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-meta dd {
  margin: 0;
  color: var(--text-primary, #333);
  word-break: break-word;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-date {
  min-width: -moz-max-content;
  min-width: max-content;
  color: var(--text-primary, #333);
  font-weight: 500;
  font-size: 12px;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-body::-webkit-scrollbar {
  height: 10px;
  width: 7px;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-body::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #D4C6A9;
  background-blend-mode: multiply;
  background-clip: padding-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-body::-webkit-scrollbar-track {
  border-radius: 4px;
  background: #F2ECDF;
  background-blend-mode: multiply;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-body-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
}
.mypage .suggest-section .suggest-detail-modal .suggest-detail-reject {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary, #555);
  white-space: pre-wrap;
  word-break: break-word;
}
.mypage .suggest-title {
  font-size: 13px;
  font-weight: 500;
  color: #5E4311;
}
.mypage .suggest-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: #FAFAFA;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}
.mypage .suggest-fields .suggest-input {
  border: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px dashed #D0D0D0;
}
.mypage .suggest-fields .suggest-input:last-child {
  border-bottom: none;
}
.mypage .suggest-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: #FAFAFA;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.mypage .suggest-input::-moz-placeholder {
  color: #C8C8C8;
}
.mypage .suggest-input::placeholder {
  color: #C8C8C8;
}
.mypage .suggest-fields .suggest-input {
  padding: 12px 14px;
}
.mypage .suggest-url {
  height: 44px;
  min-height: 44px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mypage .suggest-reason {
  min-height: 88px;
  resize: none;
}
.mypage .suggest-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.mypage .accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  color: #A9770B;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}
.mypage .accordion-trigger:hover {
  color: #4a3510;
}
.mypage .accordion-trigger:hover .ico-chevron {
  background-color: #4a3510;
}
.mypage .accordion-title {
  flex-shrink: 0;
}
.mypage .ico-chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background-color: #A9770B;
  mask-image: url("/img/ico/ico_chevron.svg");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("/img/ico/ico_chevron.svg");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  width: 10px;
  aspect-ratio: 1/1;
  transition: transform 0.2s, background-color 0.2s;
}
.mypage .accordion.is-open .ico-chevron {
  transform: rotate(180deg);
}
.mypage .accordion-content {
  padding-bottom: 12px;
  overflow: hidden;
}
.mypage .suggest-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.mypage .suggest-status-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 6px 0;
}
.mypage .consider .suggest-date,
.mypage .consider .suggest-state {
  color: #000;
  font-weight: 500;
  font-size: 13px;
}
.mypage .suggest-date {
  flex-shrink: 0;
}
.mypage .suggest-dots {
  flex: 1;
  min-width: 8px;
  height: 1px;
  border-bottom: 1px dotted #999;
  margin: 0 4px;
}
.mypage .suggest-state {
  flex-shrink: 0;
}
.mypage .mypage-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
}
.mypage .section-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}
.mypage .section-title .year-badge {
  font-size: 14px;
  font-weight: 300;
}
.mypage .section-title .count {
  font-weight: 800;
  font-size: 14px;
}
.mypage .activity-section {
  flex-shrink: 0;
  position: relative;
  margin-bottom: 28px;
  padding: 0 18px 0 32px;
}
.mypage .activity-section .section-title {
  margin-bottom: 8px;
}
.mypage .total-time-area {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  gap: 12px;
  z-index: 2;
}
.mypage .total-time-inner {
  position: relative;
  height: 40px;
  overflow: hidden;
}
.mypage .total-time {
  position: relative;
  width: 298px;
  height: 90px;
  padding-bottom: 50px;
  font-size: 14px;
  color: var(--text-primary);
  border-radius: 50%;
  background: rgb(247, 232, 215);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #cf6800;
  z-index: 1;
}
.mypage .total-time .total-time-text {
  margin-top: 4px;
}
.mypage .total-time strong {
  font-size: 20px;
  font-weight: 700;
}
.mypage .total-time .gauge-bar {
  padding-bottom: 0;
  background: rgba(230, 191, 145, 0.4);
  padding: 3px;
}
.mypage .total-time .gauge-bar .gauge-fill {
  top: 0;
  background: #cf6800;
}
.mypage .total-average {
  position: absolute;
  right: 0;
  bottom: -50%;
  flex-shrink: 0;
  padding: 2px 8px 2px 8px;
  font-size: 12px;
  color: #D0B290;
  background: #F4EFE6;
  border: 1px solid #D0B290;
  border-radius: 20px;
  white-space: nowrap;
  transform: translate(100%, -50%);
  z-index: 1;
}
.mypage .total-average::before {
  content: "";
  position: absolute;
  left: -12px;
  top: calc(50% + 1px);
  width: 16px;
  height: 8px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M10.1699 0.516165C10.3393 0.471368 10.5206 0.518006 10.6464 0.639994C10.7723 0.762118 10.8249 0.941611 10.7852 1.11241L10.4455 2.57344C10.323 3.10031 10.3747 3.65271 10.5928 4.1477L11.198 5.52063C11.2742 5.69385 11.2459 5.89537 11.1251 6.04108C11.0043 6.18689 10.8114 6.25187 10.6269 6.20898L0.886712 3.94431C0.662962 3.89229 0.503447 3.69408 0.500001 3.46439C0.496751 3.23507 0.649987 3.03317 0.871623 2.97429L10.1699 0.516165Z' fill='%23D0B290' stroke='%23F9F6F0' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.mypage .activity-list {
  position: relative;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(240, 225, 207, 0.2) 0.05%, rgba(240, 225, 207, 0) 32.26%), linear-gradient(181deg, #FFEFDC 1.28%, rgba(251, 244, 235, 0.5) 94.84%);
  padding: 16px 8px;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  z-index: 1;
}
.mypage .activity-list::before {
  content: "";
  position: absolute;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-radius: inherit;
  top: -2px;
  left: -2px;
  padding: 1px;
  background: linear-gradient(180deg, #FADEBD 0%, #DBD8D2 100%);
}
.mypage .activity-list::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(199, 197, 192, 0.2) 0%, rgba(199, 197, 192, 0.6) 50%, #DBD8D2 100%) left/1px 100% no-repeat, #fff right/1px 100% no-repeat;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30% 100%);
          mask: linear-gradient(180deg, transparent 0%, #000 30% 100%);
}
.mypage .activity-item {
  position: relative;
  padding: 0px 16px;
}
.mypage .activity-item.gauge:first-of-type::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  right: 0px;
  top: 0;
  border-right: 1px dashed #c7c5c0;
}
.mypage .activity-item.tag .activity-value {
  color: #7C590D;
}
.mypage .activity-item.tag .progress-track .gauge-bar .gauge-fill {
  background: linear-gradient(91deg, #B08100 20%, #936F23 72.48%);
}
.mypage .activity-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.mypage .activity-head .activity-label {
  font-size: 14px;
  font-weight: 500;
  color: #000;
}
.mypage .activity-head .activity-value {
  font-size: 14px;
  color: #1B8B6F;
}
.mypage .activity-head .activity-value em {
  font-size: 20px;
  font-weight: 700;
  margin-left: 2px;
}
.mypage .activity-note {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 11px;
  color: #fff;
  font-weight: 600;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15), 1px -1px 0 rgba(0, 0, 0, 0.15), -1px 1px 0 rgba(0, 0, 0, 0.15), 1px 1px 0 rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  justify-content: flex-end;
}
.mypage .activity-note .activity-note-num {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
}
.mypage .progress-track {
  position: relative;
  overflow: hidden;
}
.mypage .progress-track .gauge-bar {
  position: relative;
  width: 100%;
  padding-bottom: 24px;
  background: #CBC5BA;
  border-radius: 70px;
  box-shadow: 0 0 2.828px 0 rgba(0, 0, 0, 0.25) inset;
}
.mypage .progress-track .gauge-bar .gauge-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 70.696px;
  background: linear-gradient(91deg, #5693AF 20%, #0C895D 72.48%);
  box-shadow: 0.707px 2.121px 2.828px 0 rgba(0, 0, 0, 0.25), 0.707px 1.414px 2.828px 0 rgba(255, 255, 255, 0.25) inset, -0.707px -2.121px 3.393px 0 rgba(0, 0, 0, 0.25) inset;
}
.mypage .progress-track .gauge-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  font-size: 10px;
  color: #B3B0AA;
}
.mypage .progress-track .gauge-value .gauge-start {
  font-weight: 500;
}
.mypage .progress-track .gauge-value .gauge-end {
  font-weight: 700;
}
.mypage .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.mypage .tag-list .tag {
  font-size: 12px;
  color: var(--text-secondary);
}
@media only screen and (max-width: 767px) {
  .mypage .tag-list .tag {
    font-size: 10px;
  }
}
.mypage .content-tab-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.mypage .content-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 0;
  flex-shrink: 0;
  border-bottom: 1px solid #cf6800;
  width: 100%;
}
.mypage .content-tab {
  position: relative;
  padding: 12px 20px;
  border: 0;
  background: rgba(227, 220, 207, 0.34);
  font-size: 16px;
  font-weight: 500;
  color: #121212;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  border-radius: 6px 6px 0 0;
  width: 100%;
}
.mypage .content-tab .count {
  font-weight: 700;
}
.mypage .content-tab:hover {
  color: var(--text-primary);
}
.mypage .content-tab.active {
  border-left: 1px solid #cf6800;
  border-right: 1px solid #cf6800;
  border-top: 1px solid #cf6800;
  border-bottom: none;
  background: linear-gradient(180deg, #f7e8d7 0%, rgba(247, 232, 215, 0) 100%);
  z-index: 2;
}
.mypage .content-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #F4EFE6;
}
.mypage .content-panels {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 16px;
}
.mypage .content-panel {
  display: none;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.mypage .content-panel.active {
  display: flex;
}
.mypage .mylist-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding-left: 32px;
  padding-right: 16px;
  display: grid;
  grid-template-columns: 1fr 392px;
  gap: 0;
  align-items: stretch;
}
.mypage .mylist-area .content-tab-wrap {
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mypage .mylist-area .review-section {
  grid-column: 2;
  min-width: 0;
  min-height: 0;
}
.mypage .mylist-area .content-section {
  min-width: 0;
  min-height: 0;
}
.mypage .mylist-area {
  /* 1024px 미만에서만 1열, 그 이상은 좌|우 2열 유지 */
}
@media only screen and (max-width: 1023px) {
  .mypage .mylist-area {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .mypage .mylist-area .content-tab-wrap {
    grid-column: 1;
    border-right: none;
    background: none;
  }
  .mypage .mylist-area .review-section {
    grid-column: 1;
    padding-left: 0;
    border-left: none;
    max-height: 400px;
  }
}
.mypage .content-section.content-panel {
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.mypage .content-section.content-panel .section-title {
  flex-shrink: 0;
}
.mypage .content-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0 4px 24px 0;
  overflow-y: auto;
  align-content: start;
}
.mypage .content-grid:has(.content-empty) {
  grid-template-columns: repeat(1, 1fr);
}
.mypage .content-grid::-webkit-scrollbar {
  height: 10px;
  width: 7px;
}
.mypage .content-grid::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #D4C6A9;
  background-blend-mode: multiply;
  background-clip: padding-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.mypage .content-grid::-webkit-scrollbar-track {
  border-radius: 4px;
  background: #F2ECDF;
  background-blend-mode: multiply;
}
@media only screen and (max-width: 1279px) {
  .mypage .content-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
.mypage .content-card {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s;
}
.mypage .content-card--saved .btn-remove-card {
  display: none;
}
.mypage .content-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mypage .content-card .card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.mypage .content-card .bookmark {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 0;
  z-index: 2;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
@media only screen and (max-width: 1023px) {
  .mypage .content-card .bookmark {
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
  }
}
.mypage .content-card .bookmark input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  background: transparent;
  background-image: url("/img/ico/ico_bookmark_off.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.mypage .content-card .bookmark input[type=checkbox]:checked {
  background-image: url("/img/ico/ico_bookmark_on.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.mypage .content-card .btn-remove-card {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 2;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.7;
  background-image: url("/img/ico/ico_trash.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.mypage .content-card .btn-remove-card:hover {
  opacity: 1;
}
.mypage .item-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-video);
  border-radius: 12px 12px 0 0;
}
.mypage .item-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mypage .item-info {
  padding: 8px 12px;
}
.mypage .category-tag {
  display: inline-block;
  padding: 2px 4px;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  color: #000;
  opacity: 0.5;
  border-radius: 4px;
}
@media only screen and (max-width: 1279px) {
  .mypage .category-tag {
    margin-bottom: 4px;
  }
}
.mypage .item-title {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  height: 39.2px;
  color: var(--text-primary);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media only screen and (max-width: 767px) {
  .mypage .item-title {
    font-size: 12px;
    height: 33.6px;
  }
}
.mypage .item-info .tag-list {
  margin-top: 0;
}
.mypage .gauge-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-gauge-base);
  padding-bottom: 4px;
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-radius: inherit;
}
@media only screen and (max-width: 1023px) {
  .mypage .gauge-bar {
    padding-bottom: 6px;
  }
}
.mypage .gauge-bar.rect {
  border-radius: 0;
  background: #D9D9D9;
}
.mypage .gauge-bar.rect .gauge-fill {
  border-radius: 0;
}
.mypage .gauge-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 50%;
  background: var(--bg-gauge-primary);
  border-radius: 4px;
}
.mypage .review-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-left: 18px;
}
.mypage .review-section .section-title {
  flex-shrink: 0;
  margin-bottom: 12px;
  font-size: 16px;
}
@media only screen and (min-width: 1024px) {
  .mypage .review-section .section-title {
    padding: 12px 0;
  }
}
.mypage .review-section .section-title .ico-pin-list {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='12' viewBox='0 0 21 12' fill='none'%3E%3Cg opacity='0.4' clip-path='url(%23clip0_3959_17680)'%3E%3Cpath d='M18.5161 2.4706L16.2898 0.408153C15.9992 0.155313 15.6185 0.0102366 15.22 0.00052145C14.8215 -0.0091937 14.433 0.11713 14.1285 0.355463L6.81592 7.12991C6.55329 7.37527 6.38977 7.69686 6.35279 8.0407L6.00341 11.1795C5.99247 11.2898 6.00791 11.4009 6.04864 11.505C6.08937 11.6091 6.15438 11.7036 6.23904 11.7817C6.31496 11.8515 6.405 11.9067 6.504 11.9441C6.60299 11.9816 6.70899 12.0006 6.81592 12H6.88905L10.2772 11.714C10.6484 11.6797 10.9955 11.5282 11.2603 11.2849L18.5729 4.51046C18.8568 4.23268 19.0101 3.862 18.9995 3.47964C18.9888 3.09728 18.815 2.73443 18.5161 2.4706ZM10.131 10.2085L7.69343 10.4193L7.91281 8.16113L12.5035 3.96098L14.6973 5.99331L10.131 10.2085ZM15.7535 4.98467L13.576 2.96739L15.1604 1.46196L17.3785 3.51687L15.7535 4.98467Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3959_17680'%3E%3Crect width='21' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='12' viewBox='0 0 21 12' fill='none'%3E%3Cg opacity='0.4' clip-path='url(%23clip0_3959_17680)'%3E%3Cpath d='M18.5161 2.4706L16.2898 0.408153C15.9992 0.155313 15.6185 0.0102366 15.22 0.00052145C14.8215 -0.0091937 14.433 0.11713 14.1285 0.355463L6.81592 7.12991C6.55329 7.37527 6.38977 7.69686 6.35279 8.0407L6.00341 11.1795C5.99247 11.2898 6.00791 11.4009 6.04864 11.505C6.08937 11.6091 6.15438 11.7036 6.23904 11.7817C6.31496 11.8515 6.405 11.9067 6.504 11.9441C6.60299 11.9816 6.70899 12.0006 6.81592 12H6.88905L10.2772 11.714C10.6484 11.6797 10.9955 11.5282 11.2603 11.2849L18.5729 4.51046C18.8568 4.23268 19.0101 3.862 18.9995 3.47964C18.9888 3.09728 18.815 2.73443 18.5161 2.4706ZM10.131 10.2085L7.69343 10.4193L7.91281 8.16113L12.5035 3.96098L14.6973 5.99331L10.131 10.2085ZM15.7535 4.98467L13.576 2.96739L15.1604 1.46196L17.3785 3.51687L15.7535 4.98467Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3959_17680'%3E%3Crect width='21' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  width: 21px;
  aspect-ratio: 1/1;
}
.mypage .review-list {
  flex: 1;
  min-height: 0;
  list-style: none;
  margin: 0;
  padding: 0 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
.mypage .review-list::-webkit-scrollbar {
  height: 10px;
  width: 7px;
}
.mypage .review-list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #D4C6A9;
  background-blend-mode: multiply;
  background-clip: padding-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.mypage .review-list::-webkit-scrollbar-track {
  border-radius: 4px;
  background: #F2ECDF;
  background-blend-mode: multiply;
}
.mypage .review-item {
  flex-shrink: 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.mypage .review-item .review-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
  overflow: hidden;
}
.mypage .review-item .category-tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 0;
  background: rgba(0, 0, 0, 0.06);
}
.mypage .review-item .category-tag.insight {
  background: #DAE6E5;
  color: #000;
}
.mypage .review-item .category-tag.leader {
  background: #DED7CF;
  color: #000;
}
.mypage .review-item .category-tag.biz {
  background: #DED7CF;
  color: #000;
}
.mypage .review-text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mypage .review-comment {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: #000;
  line-height: 1.4;
}
.mypage .review-comment .review-comment-text {
  min-width: 0;
  flex: 1;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.mypage .review-comment .review-user {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  align-self: flex-start;
  overflow: hidden;
}
.mypage .review-comment .review-user img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mypage .review-comment strong {
  font-size: 14px;
  font-weight: 700;
}

@media only screen and (max-width: 1023px) {
  .mypage .container {
    height: 100%;
    overflow: hidden;
  }
  .mypage .mypage-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: linear-gradient(180deg, #F4EFE6 0%, #e6ddcc 256.9%);
  }
  .mypage .mypage-sidebar {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding: 16px 16px 0;
    overflow: visible;
  }
  .mypage .mypage-sidebar::after {
    display: none;
  }
  .mypage .mypage-title {
    display: none;
  }
  .mypage .profile-area {
    margin: 0;
    max-width: 100%;
  }
  .mypage .profile-card {
    display: grid;
    grid-template-columns: 84px 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 0 22px;
    align-items: start;
    border-radius: 16px;
    text-align: left;
    margin-bottom: 0;
  }
  .mypage .profile-photo-wrap {
    grid-column: 1;
    grid-row: 1/4;
  }
  .mypage .profile-photo {
    width: 84px;
    max-width: 100%;
    height: 84px;
    margin: 0;
    border: 4px solid #fff;
    box-shadow: 3px 1px 11.6px 10px rgba(210, 205, 194, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
  }
  .mypage .profile-photo-badges {
    display: none;
  }
  .mypage .profile-name {
    grid-column: 2;
    grid-row: 1;
    margin: 2px 0 0;
    font-size: 16px;
    padding-left: 4px;
    justify-content: flex-start;
  }
  .mypage .profile-name span {
    font-size: 14px;
  }
  .mypage .profile-name .ico-level {
    display: inline-block;
  }
  .mypage .badge-level {
    display: none;
  }
  .mypage .mobile-total-time-btn {
    grid-column: 2;
    grid-row: 3;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    height: 28px;
    background-color: #F6E7D0;
    padding: 0 12px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #cf6800;
    cursor: pointer;
    white-space: nowrap;
  }
  .mypage .mobile-total-time-btn strong {
    font-size: 16px;
    font-weight: 700;
  }
  .mypage .mobile-total-time-chevron {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: #cf6800;
    mask-image: url("/img/ico/ico_chevron.svg");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("/img/ico/ico_chevron.svg");
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    width: 10px;
    aspect-ratio: 1/1;
    transform: rotate(-90deg);
  }
  .mypage .suggest-section {
    display: none;
  }
  .mypage .mypage-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 16px;
    margin-bottom: 8px;
  }
  .mypage .activity-section {
    display: none;
  }
  .mypage .mylist-area {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    gap: 0;
  }
  .mypage .mylist-area .content-tab-wrap {
    order: 2;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0 4px 4px 4px;
    background: #fff;
    padding: 8px 0 0;
    border: 1px solid #cf6800;
    background: linear-gradient(180deg, #F8F4ED 0%, #F2EDE2 100%), linear-gradient(180deg, #F4F0E7 0%, #E3DCCF 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  .mypage .mylist-area .content-tab-wrap.is-mobile-hidden {
    display: none;
  }
  .mypage .mylist-area .review-section {
    order: 3;
    display: none;
    flex-direction: column;
    max-height: none;
    padding: 8px 12px 8px;
    border-radius: 0 0 16px 16px;
    border-radius: 4px 0 4px 4px;
    border: 1px solid #cf6800;
    background: linear-gradient(180deg, #F8F4ED 0%, #F2EDE2 100%), linear-gradient(180deg, #F4F0E7 0%, #E3DCCF 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  .mypage .mylist-area .review-section.is-mobile-active {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow-y: auto;
    padding: 8px 0 0;
  }
  .mypage .mylist-area .review-section.is-mobile-active::-webkit-scrollbar {
    height: 10px;
    width: 7px;
  }
  .mypage .mylist-area .review-section.is-mobile-active::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #D4C6A9;
    background-blend-mode: multiply;
    background-clip: padding-box;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }
  .mypage .mylist-area .review-section.is-mobile-active::-webkit-scrollbar-track {
    border-radius: 4px;
    background: #F2ECDF;
    background-blend-mode: multiply;
  }
  .mypage .content-tab-wrap .content-tabs {
    display: none;
  }
  .mypage .content-panels {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin-top: 0;
  }
  .mypage .content-panel.active {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .mypage .content-grid {
    grid-template-columns: repeat(4, 1fr);
    overflow-y: auto;
    padding: 0 8px;
    gap: 10px;
  }
  .mypage .content-grid::-webkit-scrollbar {
    height: 10px;
    width: 7px;
  }
  .mypage .content-grid::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #D4C6A9;
    background-blend-mode: multiply;
    background-clip: padding-box;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }
  .mypage .content-grid::-webkit-scrollbar-track {
    border-radius: 4px;
    background: #F2ECDF;
    background-blend-mode: multiply;
  }
}
@media only screen and (max-width: 1023px) and (max-width: 991px) {
  .mypage .content-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1023px) and (max-width: 575px) {
  .mypage .content-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1023px) {
  .mypage .review-list {
    overflow-y: auto;
    padding: 0 8px;
  }
  .mypage .review-list::-webkit-scrollbar {
    height: 10px;
    width: 7px;
  }
  .mypage .review-list::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #D4C6A9;
    background-blend-mode: multiply;
    background-clip: padding-box;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }
  .mypage .review-list::-webkit-scrollbar-track {
    border-radius: 4px;
    background: #F2ECDF;
    background-blend-mode: multiply;
  }
  .mypage .review-section .section-title {
    display: none;
  }
  .mypage .mobile-list-tab-header {
    flex-shrink: 0;
    order: 1;
    display: grid;
    grid-template-columns: 246fr 105fr;
    gap: 6px;
    border-radius: 16px 16px 0 0;
    z-index: 1;
  }
  .mypage .mobile-list-tab {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 8px;
    font-size: 14px;
    font-weight: 500;
    color: #7B7B7B;
    background: #E8E1D3;
    border: 1px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 16px 4px 0 0;
  }
  .mypage .mobile-list-tab:first-child {
    border-radius: 4px 4px 0 0;
    justify-content: space-between;
  }
  .mypage .mobile-list-tab.active {
    color: #cf6800;
    background: linear-gradient(180deg, #f7e8d7 0%, rgba(247, 232, 215, 0) 100%);
    border-color: #cf6800;
    border-bottom-color: transparent;
    z-index: 1;
  }
  .mypage .mobile-list-tab.active::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 6px;
    background: linear-gradient(180deg, #f7e8d7 0%,  #F8F4ED 100%);
    z-index: 1;
    cursor: none;
  }
  .mypage .mobile-list-tab.active .mobile-tab-arrow {
    color: #cf6800;
  }
  .mypage .mobile-tab-arrow {
    display: inline-flex;
    align-items: center;
    font-size: 32px;
    line-height: 1;
    color: #7B7B7B;
    font-weight: 300;
    height: 20px;
    overflow: hidden;
    padding-bottom: 8px;
  }
  .mypage .mobile-tab-label {
    font-size: 15px;
    font-weight: 600;
  }
  .mypage .ico-mobile-pencil {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    mask-image: url("/img/ico/ico_pencil.svg");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("/img/ico/ico_pencil.svg");
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    width: 14px;
    aspect-ratio: 1/1;
  }
  .mypage .mobile-bottom-nav {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin: 0 16px 70px;
    border-radius: 12px;
    overflow: hidden;
  }
}
@media only screen and (max-width: 1023px) and (max-width: 575px) {
  .mypage .mobile-bottom-nav {
    margin: 0 16px 60px;
  }
}
@media only screen and (max-width: 1023px) {
  .mypage .mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #111;
    text-align: left;
  }
  .mypage .mobile-nav-item:last-child {
    border-bottom: none;
  }
  .mypage .mobile-nav-item.mobile-nav-item--suggest {
    color: #000;
    font-weight: 600;
    padding: 14px;
  }
  .mypage .mobile-nav-ico {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .mypage .mobile-nav-ico.mobile-nav-ico--send {
    background-color: #000;
    mask-image: url("/img/ico/ico_send.svg");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("/img/ico/ico_send.svg");
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    width: 18px;
    aspect-ratio: 1/1;
  }
  .mypage .mobile-nav-label {
    flex: 1;
  }
  .mypage .mobile-nav-chevron {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: #aaa;
    mask-image: url("/img/ico/ico_chevron.svg");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("/img/ico/ico_chevron.svg");
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    width: 12px;
    aspect-ratio: 1/1;
    transform: rotate(180deg);
  }
  .mypage .mobile-nav-chevron.mobile-nav-chevron--right {
    transform: rotate(-90deg);
    background-color: #cf6800;
    mask-image: url("/img/ico/ico_chevron.svg");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("/img/ico/ico_chevron.svg");
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    width: 14px;
    aspect-ratio: 1/1;
  }
}
@media only screen and (min-width: 1024px) {
  .mypage .mobile-activity-modal,
  .mypage .mobile-suggest-sheet {
    display: none;
  }
}
.mobile-total-time-btn {
  display: none;
}

.mobile-list-tab-header {
  display: none;
}

.mobile-bottom-nav {
  display: none;
}

.mobile-activity-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.mobile-activity-modal[hidden] {
  display: none !important;
}
.mobile-activity-modal .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.mobile-activity-modal .modal-panel {
  position: absolute;
  width: calc(100% - 32px);
  max-width: 420px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.mobile-activity-modal .modal-header {
  position: relative;
  border-radius: 0 0 4px 4px;
  background: #F6ECDC;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
}
.mobile-activity-modal .modal-title {
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #D16900;
  height: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.mobile-activity-modal .modal-title .titile-label {
  margin-right: 4px;
}
.mobile-activity-modal .modal-title strong {
  font-size: 16px;
  font-weight: 700;
}
.mobile-activity-modal .modal-close-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  background: none;
  border: none;
  font-size: 18px;
  color: #888;
  cursor: pointer;
  border-radius: 50%;
}
.mobile-activity-modal .modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #333;
}
.mobile-activity-modal .modal-body {
  padding: 8px 20px;
}
.mobile-activity-modal .modal-gauge-wrap {
  position: relative;
  padding: 8px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-activity-modal .modal-gauge-wrap .gauge-bar {
  position: relative;
  height: 10px;
  border-radius: 10px;
  padding-bottom: 10px;
  background: rgba(230, 191, 145, 0.4);
}
.mobile-activity-modal .modal-gauge-wrap .gauge-bar .gauge-fill {
  height: 100%;
  border-radius: 10px;
  background: #cf6800;
  position: relative;
}
.mobile-activity-modal .modal-average-badge {
  position: relative;
  display: inline-flex;
  width: -moz-max-content;
  width: max-content;
  align-self: flex-end;
  padding: 2px 10px;
  font-size: 11px;
  color: #D0B290;
  background: #F4EFE6;
  border: 1px solid #D0B290;
  border-radius: 20px;
  white-space: nowrap;
  margin-right: -8px;
}
.mobile-activity-modal .modal-average-badge::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: -8px;
  right: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'%3E%3Cpath d='M3.80835 1.11719L0.808594 7.11719H6.80859L3.80835 1.11719Z' fill='%23D0B290'/%3E%3Cpath d='M7.21289 7.36719L3.80859 0.558594L0.404297 7.36719H7.21289Z' stroke='white' stroke-opacity='0.8' stroke-width='0.5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.mobile-activity-modal .modal-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-activity-modal .modal-activity-list li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  gap: 8px;
}
.mobile-activity-modal .modal-activity-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(51, 51, 51, 0.1) 20.26%, rgba(49, 49, 49, 0.1) 81.6%, rgba(0, 0, 0, 0) 100%);
}
.mobile-activity-modal .modal-label {
  font-size: 14px;
  font-weight: 400;
  color: #555;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mobile-activity-modal .modal-label em {
  font-weight: 700;
}
.mobile-activity-modal .modal-required {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 400;
  color: #cf6800;
}
.mobile-activity-modal .ico-info-xs {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #cf6800;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cmask id='mask0_4202_14678' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='12' height='12'%3E%3Crect width='12' height='12' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_4202_14678)'%3E%3Cpath d='M5.5 8.5H6.5V5.5H5.5V8.5ZM6.35625 4.35625C6.45208 4.26042 6.5 4.14167 6.5 4C6.5 3.85833 6.45208 3.73958 6.35625 3.64375C6.26042 3.54792 6.14167 3.5 6 3.5C5.85833 3.5 5.73958 3.54792 5.64375 3.64375C5.54792 3.73958 5.5 3.85833 5.5 4C5.5 4.14167 5.54792 4.26042 5.64375 4.35625C5.73958 4.45208 5.85833 4.5 6 4.5C6.14167 4.5 6.26042 4.45208 6.35625 4.35625ZM6 11C5.30833 11 4.65833 10.8687 4.05 10.6062C3.44167 10.3438 2.9125 9.9875 2.4625 9.5375C2.0125 9.0875 1.65625 8.55833 1.39375 7.95C1.13125 7.34167 1 6.69167 1 6C1 5.30833 1.13125 4.65833 1.39375 4.05C1.65625 3.44167 2.0125 2.9125 2.4625 2.4625C2.9125 2.0125 3.44167 1.65625 4.05 1.39375C4.65833 1.13125 5.30833 1 6 1C6.69167 1 7.34167 1.13125 7.95 1.39375C8.55833 1.65625 9.0875 2.0125 9.5375 2.4625C9.9875 2.9125 10.3438 3.44167 10.6062 4.05C10.8687 4.65833 11 5.30833 11 6C11 6.69167 10.8687 7.34167 10.6062 7.95C10.3438 8.55833 9.9875 9.0875 9.5375 9.5375C9.0875 9.9875 8.55833 10.3438 7.95 10.6062C7.34167 10.8687 6.69167 11 6 11ZM6 10C7.11667 10 8.0625 9.6125 8.8375 8.8375C9.6125 8.0625 10 7.11667 10 6C10 4.88333 9.6125 3.9375 8.8375 3.1625C8.0625 2.3875 7.11667 2 6 2C4.88333 2 3.9375 2.3875 3.1625 3.1625C2.3875 3.9375 2 4.88333 2 6C2 7.11667 2.3875 8.0625 3.1625 8.8375C3.9375 9.6125 4.88333 10 6 10Z' fill='%23CF6800'/%3E%3C/g%3E%3C/svg%3E");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cmask id='mask0_4202_14678' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='12' height='12'%3E%3Crect width='12' height='12' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_4202_14678)'%3E%3Cpath d='M5.5 8.5H6.5V5.5H5.5V8.5ZM6.35625 4.35625C6.45208 4.26042 6.5 4.14167 6.5 4C6.5 3.85833 6.45208 3.73958 6.35625 3.64375C6.26042 3.54792 6.14167 3.5 6 3.5C5.85833 3.5 5.73958 3.54792 5.64375 3.64375C5.54792 3.73958 5.5 3.85833 5.5 4C5.5 4.14167 5.54792 4.26042 5.64375 4.35625C5.73958 4.45208 5.85833 4.5 6 4.5C6.14167 4.5 6.26042 4.45208 6.35625 4.35625ZM6 11C5.30833 11 4.65833 10.8687 4.05 10.6062C3.44167 10.3438 2.9125 9.9875 2.4625 9.5375C2.0125 9.0875 1.65625 8.55833 1.39375 7.95C1.13125 7.34167 1 6.69167 1 6C1 5.30833 1.13125 4.65833 1.39375 4.05C1.65625 3.44167 2.0125 2.9125 2.4625 2.4625C2.9125 2.0125 3.44167 1.65625 4.05 1.39375C4.65833 1.13125 5.30833 1 6 1C6.69167 1 7.34167 1.13125 7.95 1.39375C8.55833 1.65625 9.0875 2.0125 9.5375 2.4625C9.9875 2.9125 10.3438 3.44167 10.6062 4.05C10.8687 4.65833 11 5.30833 11 6C11 6.69167 10.8687 7.34167 10.6062 7.95C10.3438 8.55833 9.9875 9.0875 9.5375 9.5375C9.0875 9.9875 8.55833 10.3438 7.95 10.6062C7.34167 10.8687 6.69167 11 6 11ZM6 10C7.11667 10 8.0625 9.6125 8.8375 8.8375C9.6125 8.0625 10 7.11667 10 6C10 4.88333 9.6125 3.9375 8.8375 3.1625C8.0625 2.3875 7.11667 2 6 2C4.88333 2 3.9375 2.3875 3.1625 3.1625C2.3875 3.9375 2 4.88333 2 6C2 7.11667 2.3875 8.0625 3.1625 8.8375C3.9375 9.6125 4.88333 10 6 10Z' fill='%23CF6800'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  width: 12px;
  aspect-ratio: 1/1;
}
.mobile-activity-modal .modal-value {
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}
.mobile-activity-modal .modal-value em {
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
}
.mobile-activity-modal .modal-value.modal-value--green {
  color: #1B8B6F;
}
.mobile-activity-modal .modal-value.modal-value--green em {
  color: #1B8B6F;
}
.mobile-activity-modal .modal-value.modal-value--brown {
  color: #7C590D;
}
.mobile-activity-modal .modal-value.modal-value--brown em {
  color: #7C590D;
}

.mobile-suggest-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
}
.mobile-suggest-sheet[hidden] {
  display: none !important;
}
.mobile-suggest-sheet .sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}
.mobile-suggest-sheet .sheet-panel {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  z-index: 1;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
.mobile-suggest-sheet .sheet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 20px 14px;
  font-size: 17px;
  font-weight: 700;
  color: #111;
}
.mobile-suggest-sheet .sheet-header-ico {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: 6px;
  background-color: #5E4311;
  mask-image: url("/img/ico/ico_send.svg");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("/img/ico/ico_send.svg");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  width: 18px;
  aspect-ratio: 1/1;
}
.mobile-suggest-sheet .sheet-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #5E4311;
}
.mobile-suggest-sheet .sheet-body {
  padding: 0 16px 20px;
}
.mobile-suggest-sheet .sheet-body .suggest-fields {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 16px;
  background: #FAFAFA;
  border: 1px solid #CCC;
  border-radius: 4px;
}
.mobile-suggest-sheet .sheet-body .suggest-fields::after {
  content: " ";
  position: absolute;
  display: block;
  left: 12px;
  top: 48px;
  width: calc(100% - 32px);
  height: 1px;
  border-bottom: 1px dashed #ccc;
}
.mobile-suggest-sheet .sheet-body .suggest-input {
  font-size: 15px;
  width: 100%;
}
.mobile-suggest-sheet .sheet-body .suggest-input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.2);
}
.mobile-suggest-sheet .sheet-body .suggest-input::placeholder {
  color: rgba(0, 0, 0, 0.2);
}
.mobile-suggest-sheet .sheet-body .sheet-url {
  border-bottom: none;
  height: 27px;
}
.mobile-suggest-sheet .btn-sheet-confirm {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: #cf6800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.mobile-suggest-sheet .btn-sheet-confirm:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.mobile-suggest-sheet .btn-sheet-confirm:not(:disabled):hover {
  background: #b05800;
}

.leadership .container {
  background-color: #fff;
}
.leadership .leadership-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 40px;
}
@media only screen and (max-width: 1919px) {
  .leadership .leadership-inner {
    max-width: 1648px;
    padding: 0 24px;
  }
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-inner {
    padding: 0 0;
  }
}
.leadership .breadcrumb {
  gap: 22px;
  font-size: 14px;
  align-self: flex-end;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}
.leadership .breadcrumb li {
  position: relative;
}
.leadership .breadcrumb li:not(:last-child)::after {
  content: ">";
  position: absolute;
  right: -14px;
  top: 0;
}
.leadership .breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
.leadership .breadcrumb a:hover {
  color: var(--text-primary);
}
.leadership .breadcrumb .sep {
  margin: 0 2px;
  color: var(--text-keyword-base);
}
.leadership .breadcrumb .current {
  color: var(--text-base);
  font-weight: 700;
}
.leadership .breadcrumb {
  justify-content: flex-end;
}
.leadership .leadership-hero {
  position: relative;
  padding: 20px 0 0;
  background: linear-gradient(180deg, #f5f2f0 0%, rgba(242, 236, 223, 0.5) 67.371%, #f5f2ef 95.764%);
  overflow: hidden;
}
.leadership .leadership-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url(/img/leadership/bg_banner.png);
  background-size: 1579px auto;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.9;
}
.leadership .leadership-hero .hero-top {
  position: relative;
  padding-top: 8px;
}
.leadership .leadership-hero .hero-top .breadcrumb {
  margin: 0;
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-hero .hero-top.hero-breadcrumb {
    display: none;
  }
}
.leadership .leadership-hero .hero-banner {
  max-width: 1442px;
  width: 100%;
  height: auto;
  padding: 46px 0 144px;
  margin: 0 auto;
  position: relative;
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-hero .hero-banner {
    padding-bottom: 33px;
  }
}
.leadership .leadership-hero .hero-banner .banner-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1;
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-hero .hero-banner .banner-title {
    min-width: 360px;
  }
}
.leadership .leadership-hero .hero-banner .banner-title img {
  width: 100%;
}
.leadership .leadership-hero .hero-banner .banner-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 5.5478% 20px 20px 20px;
  align-items: center;
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-hero .hero-banner .banner-grid {
    display: flex;
    flex-direction: column-reverse;
    gap: max(12px, 3.3333vw);
    padding-top: 10.5555%;
  }
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left {
  display: grid;
  grid-template-columns: 162px 478fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-hero .hero-banner .banner-grid .banner-left {
    grid-template-columns: 1fr;
    max-width: 53.8888%;
    min-width: 194px;
  }
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left .profile-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 16px;
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-hero .hero-banner .banner-grid .banner-left .profile-box {
    display: none;
  }
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left .profile-box .profile-crown {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1;
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left .profile-box .profile-img {
  position: relative;
  max-width: 116px;
  width: 76.8211%;
  height: auto;
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left .profile-box .profile-img .img-box {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 2.127px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 2.127px 5.316px 0 rgba(0, 0, 0, 0.25);
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left .profile-box .profile-img .img-box img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 1/1;
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left .profile-box:not(:has(.profile-img)) .profile-name {
  padding: 8px 10px;
  border-radius: 25px;
  background: #FCEDDC;
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left .profile-box .profile-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left .profile-box .profile-info .profile-name {
  font-size: 15px;
  word-break: keep-all;
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left .profile-box .profile-info .name {
  font-weight: 700;
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left .profile-box .profile-info .label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 700;
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left .profile-box .profile-info .label .ico-medal {
  display: inline-block;
  width: 20px;
  height: 22px;
  aspect-ratio: 20/22;
  background-image: url(/img/insight/medal.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left dl {
  display: flex;
  flex-direction: column;
  gap: 24px;
  grid-column: 2/3;
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left dl dt {
  font-size: clamp(24px, 1.71875vw, 33px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-align: center;
  word-break: keep-all;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-wrap: balance;
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-hero .hero-banner .banner-grid .banner-left dl dt {
    font-size: clamp(14px, 3.8888vw, 20px);
  }
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-left dl dd {
  text-align: center;
  font-size: clamp(20px, 1.45833vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-hero .hero-banner .banner-grid .banner-left dl dd {
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  .leadership .leadership-hero .hero-banner .banner-grid .banner-right {
    padding-left: 8.32177%;
  }
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-hero .hero-banner .banner-grid .banner-right {
    position: relative;
    max-width: 53.8888%;
    min-width: 194px;
    border-radius: 12px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-right .banner-img {
  display: block;
  width: 100%;
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-right .banner-img > a {
  display: block;
  width: 100%;
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-hero .hero-banner .banner-grid .banner-right .banner-img {
    border-radius: 0px;
    box-shadow: none;
  }
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-right .banner-img > img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 73/41;
  background: linear-gradient(0deg, #000 0%, #000 100%);
  box-shadow: 0 0 13.4px 0 rgba(0, 0, 0, 0.5);
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-right .banner-img > a > img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 73/41;
  background: linear-gradient(0deg, #000 0%, #000 100%);
  box-shadow: 0 0 13.4px 0 rgba(0, 0, 0, 0.5);
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-right .profile-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: linear-gradient(90deg, #FFF 0%, #E4E4E4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
  gap: 4px;
  padding: 4px 4px;
}
@media only screen and (min-width: 1024px) {
  .leadership .leadership-hero .hero-banner .banner-grid .banner-right .profile-info {
    display: none;
  }
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-right .profile-info .profile-name {
  font-size: clamp(12px, 3.33333vw, 16px);
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-right .profile-info .label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: clamp(11px, 3.05555vw, 15px);
}
.leadership .leadership-hero .hero-banner .banner-grid .banner-right .profile-info .label .ico-medal {
  display: inline-block;
  width: 14px;
  height: 16px;
  aspect-ratio: 14/16;
  background-image: url(/img/insight/medal.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.leadership .leadership-hero .hero-swiper {
  overflow: hidden;
  height: 100%;
}
.leadership .leadership-hero .hero-swiper .swiper-wrapper {
  align-items: stretch;
}
.leadership .leadership-hero .hero-swiper .swiper-slide {
  height: 100%;
}
.leadership .leadership-hero .hero-swiper .banner-img {
  max-width: 1442px;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.leadership .leadership-hero .hero-swiper .banner-img img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.leadership .leadership-hero .hero-pagination {
  position: absolute;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: auto;
}
.leadership .leadership-hero .hero-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  opacity: 1;
  background: rgba(126, 90, 15, 0.3);
  margin: 0;
  transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
}
.leadership .leadership-hero .hero-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .leadership .leadership-hero .hero-pagination .swiper-pagination-bullet-active {
  width: 62px;
  height: 6px;
  border-radius: 3px;
  background: rgba(126, 90, 15, 0.3);
  position: relative;
  overflow: hidden;
}
.leadership .leadership-hero .hero-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after, .leadership .leadership-hero .hero-pagination .swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #ff8922;
  border-radius: 3px;
  animation: fillGauge 3.9s linear forwards;
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-hero .hero-pagination {
    bottom: 12px;
    gap: 6px;
  }
  .leadership .leadership-hero .hero-pagination .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    opacity: 1;
    background: rgba(126, 90, 15, 0.3);
    margin: 0;
    transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
  }
  .leadership .leadership-hero .hero-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .leadership .leadership-hero .hero-pagination .swiper-pagination-bullet-active {
    width: 40px;
    height: 4px;
    border-radius: 3px;
    background: rgba(126, 90, 15, 0.3);
    position: relative;
    overflow: hidden;
  }
  .leadership .leadership-hero .hero-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after, .leadership .leadership-hero .hero-pagination .swiper-pagination-bullet-active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #ff8922;
    border-radius: 3px;
    animation: fillGauge 3.9s linear forwards;
  }
}
.leadership .leadership-tabs {
  position: relative;
}
@media only screen and (min-width: 1024px) {
  .leadership .leadership-tabs {
    margin-top: -58px;
  }
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-tabs .leadership-inner {
    overflow: visible;
  }
}
@media only screen and (max-width: 575px) {
  .leadership .leadership-tabs .leadership-inner {
    overflow-x: auto;
    overflow-y: hidden;
  }
}
@media only screen and (max-width: 575px) and (hover: none) and (pointer: coarse) {
  .leadership .leadership-tabs .leadership-inner {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .leadership-tabs .leadership-inner::-webkit-scrollbar {
    display: none;
  }
}
@media only screen and (max-width: 575px) and (hover: hover) and (pointer: fine) {
  .leadership .leadership-tabs .leadership-inner::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  .leadership .leadership-tabs .leadership-inner::-webkit-scrollbar-thumb {
    background-color: var(--bg-scrollbar-thumb);
    border-radius: 8px;
    background-clip: padding-box;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }
  .leadership .leadership-tabs .leadership-inner::-webkit-scrollbar-track {
    background-color: var(--bg-scrollbar-track);
  }
}

.leadership .leadership-tabs-list {
  display: flex;
  gap: 2px;
  align-items: end;
  border-bottom: 1px solid #CF6800;
  width: 100%;
}
@media only screen and (max-width: 575px) {
  .leadership .leadership-tabs-list {
    display: flex;
    flex-wrap: nowrap;
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
    border-bottom: none;
    padding: 0 8px 0;
    gap: 12px;
  }
}
.leadership .leadership-tab {
  flex: 1;
  height: 58px;
  border: 0;
  background: rgba(227, 220, 207, 0.34);
  color: #121212;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.9px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: -moz-max-content;
  min-width: max-content;
}
@media only screen and (max-width: 575px) {

  .leadership .leadership-tab {
    flex: 0 0 auto;
  }
}
.leadership .leadership-tab .tab-icon {
  display: none;
}
.leadership .leadership-tab .tab-text {
  display: inline;
  color: #555;
  white-space: nowrap;
}
.leadership .leadership-tab:focus-visible {
  outline: 2px solid rgba(207, 104, 0, 0.55);
  outline-offset: 2px;
}
.leadership .leadership-tab.is-active {
  position: relative;
  background: #fefefe;
  border-left: 1px solid #cf6800;
  border-right: 1px solid #cf6800;
  border-top: 1px solid #cf6800;
  z-index: 2;
}
.leadership .leadership-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
}
.leadership .leadership-tab.is-active .tab-text {
  color: #121212;
  font-weight: 600;
}
.leadership .leadership-video-list {
  padding: 36px 0 56px;
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-video-list {
    padding: 24px 16px 32px;
  }
}
.leadership .leadership-video-list .list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}
.leadership .leadership-video-list .total {
  font-size: 15px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
}
.leadership .leadership-video-list .total em {
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.4);
}

@media only screen and (max-width: 1023px) {
  .leadership .leadership-video-list .total {
    font-size: 12px;
  }
  .leadership .leadership-video-list .total em {
    font-size: 16px;
  }
}
.leadership .leadership-video-list .list-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
}
.leadership .leadership-video-list .select-wrap {
  position: relative;
}
.leadership .leadership-video-list .select-sort {
  padding: 8px 24px 8px 8px;
  font-size: 16px;
  color: var(--text-secondary);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23303030' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
@media only screen and (max-width: 1023px) {

 .leadership .leadership-video-list .select-sort {
   padding: 4px 32px 4px 12px;
    font-size: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23303030' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: right 8px center;
  }
}
.leadership .video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -moz-column-gap: 24px;
       column-gap: 24px;
  row-gap: 56px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.leadership .video-item .card-link {
  display: block;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
}
.leadership .video-item .bookmark {
  position: absolute;
  top: 16px;
  right: 14px;
  z-index: 2;
  width: 22px;
  height: 22px;
  cursor: pointer;
  padding: 0;
}
.leadership .video-item .bookmark input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background-image: url("/img/ico/ico_bookmark_off.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.leadership .video-item .bookmark input[type=checkbox]:checked {
  background-image: url("/img/ico/ico_bookmark_on.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.leadership .video-item .item-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: var(--bg-video);
}
.leadership .video-item .item-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.leadership .video-item .item-info {
  padding: 14px 0;
  display: flex;
  align-items: flex-start;
  justify-content: stretch;
  flex-direction: column;
  gap: 16px;
}
@media only screen and (max-width: 1023px) {
  .leadership .video-item .item-info {
    padding: 8px 0;
  }
}
.leadership .video-item .item-title {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  height: calc(18px * 1.4 * 2);
  color: var(--text-primary);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media only screen and (max-width: 1023px) {
  .leadership .video-item .item-title {
    font-size: 14px;
    height: 39.2px;
  }
}
.leadership .video-item .item-meta {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-keyword-secondary);
}
@media only screen and (max-width: 1023px) {
  .leadership .video-item .item-meta {
    font-size: 12px;
  }
}
.leadership .video-item .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media only screen and (max-width: 1023px) {
  .leadership .video-item .tag-list {
    gap: 4px;
  }
}
.leadership .video-item .tag-list .tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-keyword-secondary);
}
@media only screen and (max-width: 1023px) {
  .leadership .video-item .tag-list .tag {
    font-size: 12px;
  }
}
.leadership .video-item .item-desc {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
}
.leadership .video-item .tag-list {
  display: none;
}
@media only screen and (max-width: 1279px) {
  .leadership .video-grid {
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 12px;
         column-gap: 12px;
    row-gap: 32px;
  }
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-tabs-list {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0 8px 0;
    gap: 12px;
    overflow-x: auto;
  }
  .leadership .leadership-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .leadership .leadership-tab {
    height: auto;
    min-height: 48px;
    padding: 10px 4px 12px;
    border-radius: 0;
    background: transparent;
    border: none;
    font-size: 14px;
    letter-spacing: -0.4px;
    flex-direction: column;
    gap: 4px;
  }
}
@media only screen and (max-width: 1023px) and (max-width: 767px) {
  .leadership .leadership-tab {
    font-size: 12px;
  }
}
@media only screen and (max-width: 1023px) {
  .leadership .leadership-tab .tab-icon {
    display: block;
    max-width: 48px;
    width: 55.1724%;
    min-width: 32px;
    min-height: 32px;
    aspect-ratio: 1/1;
  }
  .leadership .leadership-tab .tab-icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .leadership .leadership-tab.is-active {
    color: #121212;
    border-left: none;
    border-right: none;
    border-top: none;
    background: none;
  }
  .leadership .leadership-tab.is-active::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 79.310344%;
    height: 1px;
    background: #ff8922;
  }
}
@media only screen and (max-width: 575px) {
  .leadership .video-grid {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 10px;
         column-gap: 10px;
    row-gap: 20px;
  }
  .leadership .video-item .item-title {
    font-size: 13px;

  }
  .leadership .video-item .item-desc {
    font-size: 12px;
  }
}

.myclass .bookshelf {
  position: relative;
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.myclass .bookshelf.goal {
  max-width: 1720px;
  margin: auto;
  width: 100%;
}
.myclass .goal-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0 42px;
  z-index: 1;
}
.myclass .goal-item {
  position: relative;
  background-image: url("/img/myclass/bg_books.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: calc(100% - 12px) auto;
  padding-bottom: 8px;
  aspect-ratio: 524/244;
}
@media only screen and (max-width: 1279px) {
  .myclass .goal-item {
    aspect-ratio: 400/280;
  }
}
@media only screen and (max-width: 1023px) {
  .myclass .goal-item {
    min-height: 100px;
    aspect-ratio: 1/1;
    background-image: url("/img/myclass/bg_books_m.svg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: calc(100% - 8px) auto;
    padding-top: 10px;
  }
}
.myclass .goal-item.goal-item-completed-preview {
  background-image: url("/img/myclass/bg_books_completed.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: calc(100% - 12px) auto;
}
@media only screen and (max-width: 1023px) {
  .myclass .goal-item.goal-item-completed-preview {
    background-image: url("/img/myclass/bg_books_completed_m.svg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: calc(100% - 8px) auto;
  }
}
.myclass .goal-card {
  position: relative;
  width: 100%;
  min-width: 100%;
  height: 100%;
  padding: 20px 20px 24px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 1;
}
@media only screen and (max-width: 1023px) {
  .myclass .goal-card {
    padding: 10px 10px 12px;
    border-radius: 8px;
  }
  .myclass .goal-card::before {
    border-radius: 8px;
  }
  .myclass .goal-card:hover {
    outline-width: 6px;
  }
}
.myclass .goal-card::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(44, 110, 190, 0) 0%, rgba(44, 110, 190, 0.4) 100%), #0AA07A;
  opacity: 0.8;
  border-radius: 10px;
  pointer-events: none;
  z-index: -1;
}
.myclass .goal-card:hover {
  transform: translateY(-4px);
  overflow: visible;
}
.myclass .goal-card:hover:after {
  content: "";
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-radius: inherit;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(180deg, #FF6600 0%, #F5AC5F 100%);
  z-index: -1;
  box-sizing: border-box;
}
@media only screen and (max-width: 1023px) {
  .myclass .goal-card:hover:after {
    top: -6px;
    left: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    padding: 6px;
    border-radius: 16px;
  }
}
@media only screen and (max-width: 1023px) {
  .myclass .goal-card:hover {
    outline: 4px solid #F5996B;
  }
}
.myclass .goal-card:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.8);
  outline-offset: 0px;
}
.myclass .card-default-area {
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.myclass .card-books-area {
  height: 100%;
}
.myclass .goal-item.is-selected:has(.card-books-area) .goal-card {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.myclass .goal-item.is-selected:has(.card-books-area) .goal-card::before {
  display: none;
}
.myclass .goal-item.is-selected:has(.card-books-area) .goal-completed-preview {
  height: 100%;
}
.myclass .card-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 70%;
}
@media only screen and (max-width: 1279px) {
  .myclass .card-title-wrap {
    max-width: 80%;
  }
}
@media only screen and (max-width: 1023px) {
  .myclass .card-title-wrap {
    max-width: 100%;
  }
}
.myclass .card-icon-wrap {
  flex-shrink: 0;
}
.myclass .card-icon {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
}
@media only screen and (max-width: 1023px) {
  .myclass .card-icon {
    width: 38px;
    height: 38px;
  }
}
@media only screen and (max-width: 575px) {
  .myclass .card-icon {
    width: 24px;
    height: 24px;
  }
}
.myclass .card-icon .lottie-01 {
  margin-left: -14%;
  margin-top: -20%;
}
.myclass .card-icon .lottie-02 {
  margin-left: -14%;
  margin-top: -4%;
}
.myclass .card-icon .lottie-03 {
  margin-left: -14%;
  margin-top: -4%;
}
.myclass .card-icon .lottie-04 {
  margin-left: -20%;
  margin-top: -4%;
}
.myclass .card-icon .lottie-05 {
  margin-top: -8%;
}
.myclass .card-icon .lottie-06 {
  margin-top: -10%;
}
.myclass .card-icon svg {
  width: 100%;
  height: 100%;
}
.myclass .card-icon img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.myclass .card-body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
@media only screen and (max-width: 991px) {
  .myclass .card-body {
    display: none;
  }
}
.myclass .card-title {
  display: block;
  font-size: clamp(18px, 1.35416vw, 26px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2), 1px -1px 0 rgba(0, 0, 0, 0.2), -1px 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 0 rgba(0, 0, 0, 0.2);
  text-align: left;
  text-wrap: balance;
  word-break: keep-all;
}
@media only screen and (max-width: 1023px) {
  .myclass .card-title {
    font-size: clamp(12px, 4.26666vw, 20px);
    line-height: 1.35;
    letter-spacing: -0.8px;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
}
@media only screen and (max-width: 575px) {
  .myclass .card-title {
    font-size: 13px;
  }
}
.myclass .card-desc {
  margin: 0;
  font-size: clamp(14px, 1.0416vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  word-break: keep-all;
  text-wrap: balance;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2), 1px -1px 0 rgba(0, 0, 0, 0.2), -1px 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.myclass .bookshelf.has-selected .goal-item:not(.is-selected) .goal-card {
  filter: brightness(0.9);
}
.myclass .goal-item.is-selected .goal-card {
  background: linear-gradient(145deg, #4A9B8A 0%, #2D7568 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}
.myclass .shelf-row {
  position: relative;
  z-index: 1;
}
.myclass .sub-title {
  display: none;
}
.myclass .shelf-board-mobile {
  display: none;
}
.myclass .shelf-board {
  position: relative;
  margin-top: -2px;
  width: 100%;
  height: 20px;
  background-color: #6c3d20; /* Figma 목표설정 선반 */
  background-image: url("/img/myclass/img_shelf.png");
  background-position: center bottom;
  background-repeat: repeat;
  background-size: auto;
  border-radius: 2px;
}
.myclass .shelf-board::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: calc(100% - 16px);
  height: 1px;
  background: #FFF;
  border-radius: 1px;
  opacity: 0.5;
  filter: blur(1px);
}
.myclass .shelf-legs {
  position: absolute;
  bottom: -9.3435%;
  left: 0;
  right: 0;
  width: 100%;
  height: 76.5957%;
  z-index: 0;
  pointer-events: none;
  padding: 0 20px; /* goal-list padding과 맞춤 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
}
.myclass .shelf-legs:before {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 3.5%;
  height: 10px;
  border-radius: 100px;
  opacity: 0.1;
  background: #0C0C0C;
  width: 93%;
  filter: blur(5px);
}
.myclass .shelf-legs .shelf-leg {
  display: block;
  width: 20px;
  height: 100%;
  background-image: url(/img/myclass/img_shelf_leg.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  /* 중앙 다리: 3열 그리드 아이템 사이 (Figma 디자인 기준) */
}
.myclass .shelf-legs .shelf-leg-center {
  height: 87.3737%;
}
.myclass .shelf-legs .shelf-leg-right {
  border-radius: 0 0 3px 3px;
}
.myclass .myclass-cta {
  padding: 32px 0 0;
  text-align: center;
}
.myclass .btn-select-goal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 16px 40px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: rgba(100, 90, 80, 0.85);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.myclass .btn-select-goal:hover {
  background: rgba(80, 72, 64, 0.9);
  transform: translateY(-2px);
}
.myclass .btn-select-goal:active {
  transform: translateY(0);
}
@media only screen and (max-width: 1023px) {
  .myclass .bookshelf.goal {
    position: relative;
    padding: 0 15px;
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px 12px;
    max-width: 420px;
  }
  .myclass .shelf-legs {
    position: absolute;
    padding: 0 0;
    bottom: -8%;
    height: 94%;
    grid-column: 1/-1;
  }
  .myclass .shelf-legs .shelf-leg {
    width: 18px;
    background-image: url(/img/myclass/img_shelf_leg_m.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
  .myclass .shelf-legs .shelf-leg-left {
    margin-left: -14px;
  }
  .myclass .shelf-legs .shelf-leg-right {
    margin-right: -14px;
  }
  .myclass .shelf-legs .shelf-leg-center {
    height: 90%;
  }
  .myclass .shelf-legs .shelf-leg:nth-child(3) {
    display: none;
  }
  .myclass .shelf-row {
    display: contents;
  }
  .myclass .goal-list {
    display: contents;
  }
  .myclass .shelf-board {
    grid-column: 1/-1;
  }
  .myclass .goal-item[data-goal-id="1"] {
    order: 1;
  }
  .myclass .goal-item[data-goal-id="2"] {
    order: 2;
  }
  .myclass .shelf-row:nth-child(2) .shelf-board {
    order: 3;
  }
  .myclass .goal-item[data-goal-id="3"] {
    order: 4;
  }
  .myclass .goal-item[data-goal-id="4"] {
    order: 5;
  }
  .myclass .shelf-row:nth-child(3) .shelf-board {
    order: 6;
  }
  .myclass .goal-item[data-goal-id="5"] {
    order: 7;
  }
  .myclass .goal-item[data-goal-id="6"] {
    order: 8;
  }
  .myclass .shelf-row:nth-child(3) .shelf-board.shelf-board-mobile {
    order: 9;
  }
  .myclass .card-default-area {
    gap: 8px;
  }
  .myclass .card-title-wrap {
    flex-direction: column;
    gap: 8px;
  }
  .myclass .shelf-board {
    height: 14px;
    margin-top: 0;
    border-radius: 1px;
    box-shadow: inset 0 -1px 1px 0 #794731, inset 0 1px 1px 0 #794731;
  }
  .myclass .shelf-board::before {
    top: 3px;
    left: 4px;
    width: calc(100% - 10px);
  }
  .myclass .shelf-board-mobile {
    display: block;
  }
  .myclass .sub-title {
    display: block;
    width: 100%;
    text-align: left;
  }
  .myclass .sub-title h4 {
    font-size: clamp(15px, 4vw, 20px);
    color: #5D4A3D;
    padding: 0 16px;
    font-weight: 500;
  }
  .myclass .sub-title strong {
    font-weight: 700;
  }
}

.myclass .goal-item-completed-preview .shelf-plank,
.myclass .goal-item--selected-preview .shelf-plank {
  height: 10px !important;
}
.myclass .goal-item-completed-preview .bookshelf,
.myclass .goal-item--selected-preview .bookshelf {
  padding: 0 !important;
}
.myclass .goal-item-completed-preview,
.myclass .goal-item--selected-preview {
  /* books-item 호버 효과 완전 비활성화 */
}
.myclass .goal-item-completed-preview .books-item:hover,
.myclass .goal-item--selected-preview .books-item:hover {
  transform: none !important;
  z-index: auto !important;
  box-shadow: none !important;
}
.myclass .goal-item-completed-preview .books-item:hover .book-img-wrap::before,
.myclass .goal-item-completed-preview .books-item:hover .book-img-wrap::after,
.myclass .goal-item--selected-preview .books-item:hover .book-img-wrap::before,
.myclass .goal-item--selected-preview .books-item:hover .book-img-wrap::after {
  display: none !important;
}
.myclass .goal-item-completed-preview:has(.books-item:hover) .books-item:not(:hover),
.myclass .goal-item--selected-preview:has(.books-item:hover) .books-item:not(:hover) {
  filter: none !important;
}
.myclass .goal-item-completed-preview .bookshelf-section .book-info-wrap,
.myclass .goal-item--selected-preview .bookshelf-section .book-info-wrap {
  padding: 8px 4px;
  flex: 1;
  align-items: flex-start;
  justify-content: space-between;
}
.myclass .goal-item-completed-preview .bookshelf-section .book-title,
.myclass .goal-item--selected-preview .bookshelf-section .book-title {
  height: -moz-max-content;
  height: max-content;
  margin-bottom: 0;
  font-size: 12px;
  flex-grow: 1;
}
.myclass .goal-item-completed-preview .bookshelf-section .book-info-btn,
.myclass .goal-item--selected-preview .bookshelf-section .book-info-btn {
  padding: 10px 0px;
}
.myclass .goal-completed-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.myclass .goal-preview-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 10%;
}
@media only screen and (max-width: 1279px) {
  .myclass .goal-preview-header {
    flex-direction: column;
    gap: 8px;
  }
}
.myclass .goal-preview-badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.myclass .goal-preview-badge img {
  width: 64px;
  height: 80px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media only screen and (max-width: 1279px) {
  .myclass .goal-preview-badge img {
    width: 35px;
    height: 44px;
  }
}
.myclass .goal-preview-badge .badge-text {
  position: absolute;
  top: calc(50% - 10px);
  left: 50%;
  width: auto;
  height: auto;
  font-size: 16.808px;
  font-weight: 900;
  color: #9F6400;
  letter-spacing: -0.02em;
  translate: -50% -50%;
}
.myclass .goal-preview-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #07855C;
  line-height: 1.2;
}
@media only screen and (max-width: 1279px) {
  .myclass .goal-preview-title {
    font-size: clamp(14px, 4.26666vw, 20px);
    text-wrap: balance;
    text-align: center;
  }
}
.myclass .goal-preview-books {
  flex: 1;
  min-height: 0;
}
.myclass .goal-preview-books.bookshelf-section {
  margin: 0;
  margin-bottom: 0;
}
.myclass .goal-preview-books .bookshelf {
  max-width: 100%;
  padding: 0;
}
.myclass .goal-preview-books .book-info-wrap {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  padding: 8px 6px 24px;
  border-radius: 4px;
}
.myclass .goal-preview-books .book-brand {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
}
.myclass .books-list--preview .books-item {
  pointer-events: none;
  /* 원하는 디자인: 책 표지 대신 비디오 썸네일+제목+브랜드만 표시 */
}
.myclass .books-list--preview .books-item .book-img-wrap {
  display: none;
}
.myclass .books-list--preview .books-item .book-video-area {
  display: block;
}
.myclass .books-list--preview .books-item .book-title {
  font-size: 10px;
}
.myclass .books-list--preview .books-item:nth-child(1) .book-info-wrap {
  background: linear-gradient(180deg, rgba(70, 150, 116, 0.35) 0%, rgba(13, 33, 24, 0.2) 100%), #4A9682;
}
.myclass .books-list--preview .books-item:nth-child(2) .book-info-wrap {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(240, 235, 220, 0.9) 100%);
}
.myclass .books-list--preview .books-item:nth-child(3) .book-info-wrap {
  background: linear-gradient(180deg, rgba(250, 200, 200, 0.5) 0%, rgba(245, 220, 220, 0.9) 100%);
}
.myclass .books-list--preview .books-item:nth-child(4) .book-info-wrap {
  background: linear-gradient(180deg, rgba(180, 220, 210, 0.5) 0%, rgba(200, 235, 225, 0.9) 100%);
}
.myclass .books-list--preview .books-item:nth-child(5) .book-info-wrap {
  background: linear-gradient(180deg, rgba(255, 250, 200, 0.5) 0%, rgba(255, 248, 220, 0.9) 100%);
}
.myclass .books-list--preview .books-item:nth-child(6) .book-info-wrap {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 248, 245, 0.95) 100%);
}
.myclass .bookshelf-section {
  margin: auto;
}
@media only screen and (max-width: 1023px) {
  .myclass .bookshelf-section {
    padding-bottom: 20px;
  }
}
.myclass .bookshelf-section:not(:last-child) {
  margin-bottom: 80px;
}
.myclass .bookshelf-section .bookshelf {
  position: relative;
  max-width: 1506px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.myclass .bookshelf-section .books-list {
  position: relative;
  display: grid;
  grid-template-columns: 198fr 266fr 248fr 218fr 250fr 220fr;
  justify-content: flex-end;
  gap: 0;
  padding: 0 3.3200531208%;
  z-index: 3;
}
.myclass .bookshelf-section .books-list:not(:has(> :not(.books-item-completed)))::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 0px;
  width: calc(100% - 32px);
  height: calc(100% - 12px);
  border-radius: 30px 30px 0px 0px;
  background: #FDF4A7;
  filter: blur(20px);
}
.myclass .bookshelf-section .books-item {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  height: 100%;
  align-items: flex-end;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.myclass .bookshelf-section .books-item:nth-child(1) .book-video-area {
  background: linear-gradient(180deg, rgba(70, 150, 116, 0.4) 0%, rgba(13, 33, 24, 0.4) 100%);
}
.myclass .bookshelf-section .books-item:nth-child(2) .book-video-area {
  background: rgba(255, 255, 255, 0.4);
}
.myclass .bookshelf-section .books-item:nth-child(3) .book-video-area {
  background: linear-gradient(180deg, rgba(250, 115, 70, 0.4) 0%, rgba(42, 20, 13, 0.4) 100%);
}
.myclass .bookshelf-section .books-item:nth-child(4) .book-video-area {
  background: linear-gradient(180deg, rgba(86, 129, 109, 0.4) 0%, rgba(58, 58, 58, 0.4) 100%);
}
.myclass .bookshelf-section .books-item:nth-child(5) .book-video-area {
  background: rgba(255, 255, 255, 0.4);
}
.myclass .bookshelf-section .books-item:nth-child(6) .book-video-area {
  background: rgba(255, 255, 255, 0.4);
}
.myclass .bookshelf-section .books-item {
  /*
  &:last-child::before{
    content:"";
    position: absolute;
    left: -16px;
    top: 2px;
    width: 16px;
    height: 90%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='495' viewBox='0 0 17 495' fill='none'%3E%3Cpath d='M0.000322342 30.7755L16.707 0L15.4219 494.167H0.000322342V30.7755Z' fill='%23453A37'/%3E%3C/svg%3E");
    z-index: -1;
  }*/
}
.myclass .bookshelf-section .books-item-progress .book-video-thumb-wrap .book-video-thumb, .myclass .bookshelf-section .books-item-completed .book-video-thumb-wrap .book-video-thumb {
  filter: grayscale(0%);
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .myclass .bookshelf-section:not(.goal-slide-bookshelf):not(.books-list--no-hover) .books-item:hover {
    transform: translateY(24px);
    z-index: 5;
  }
  .myclass .bookshelf-section:not(.goal-slide-bookshelf):not(.books-list--no-hover) .books-item:hover .book-video-area .book-video-thumb-wrap .book-video-thumb {
    filter: grayscale(0%);
  }
  .myclass .bookshelf-section:not(.goal-slide-bookshelf):not(.books-list--no-hover) .books-item:hover .book-img-wrap::before, .myclass .bookshelf-section:not(.goal-slide-bookshelf):not(.books-list--no-hover) .books-item:hover .book-img-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    height: calc(100% - 20px);
    width: 50%;
    pointer-events: none;
    z-index: 1;
    filter: blur(4px);
  }
  .myclass .bookshelf-section:not(.goal-slide-bookshelf):not(.books-list--no-hover) .books-item:hover .book-img-wrap {
    /* left: SVG path M6 486.8 L87 504 V6 L6 22.1 - 상단 좌하/우상, 하단 좌상/우하 */
  }
  .myclass .bookshelf-section:not(.goal-slide-bookshelf):not(.books-list--no-hover) .books-item:hover .book-img-wrap::before {
    width: 20%;
    left: calc(-20% + 4px);
    background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
    clip-path: polygon(6.5% 4.3%, 93.5% 1.2%, 93.5% 98.8%, 6.5% 95.5%);
  }
  .myclass .bookshelf-section:not(.goal-slide-bookshelf):not(.books-list--no-hover) .books-item:hover .book-img-wrap {
    /* right: SVG path 좌우 반전 (책 쪽=우측에 위치하므로) */
  }
  .myclass .bookshelf-section:not(.goal-slide-bookshelf):not(.books-list--no-hover) .books-item:hover .book-img-wrap::after {
    right: calc(-50% + 0px);
    background: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
    clip-path: polygon(100% 4.3%, 0 1.1%, 0 98.9%, 100% 95.5%);
  }
  .myclass .bookshelf-section:not(.goal-slide-bookshelf):not(.books-list--no-hover) .books-item:hover:first-child .book-img-wrap::before {
    display: none;
  }
  .myclass .bookshelf-section:not(.goal-slide-bookshelf):not(.books-list--no-hover) .books-item:hover:last-child .book-img-wrap::after {
    display: none;
  }
  .myclass .bookshelf-section:not(.goal-slide-bookshelf):not(.books-list--no-hover):has(.books-item:hover) .books-item:not(:hover) {
    filter: brightness(0.6);
  }
}
.myclass .bookshelf-section .book-img-wrap {
  position: relative;
  width: 100%;
  overflow: visible; /* 좌우 쉐도우가 잘리지 않도록 */
}
.myclass .bookshelf-section .book-img,
.myclass .bookshelf-section .book-img-picture .book-img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.myclass .bookshelf-section .book-img-picture {
  display: block;
  width: 100%;
}
.myclass .bookshelf-section {
  /* 전체 book-info 영역 클릭 시 팝업 오픈 */
}
.myclass .bookshelf-section .book-info-btn {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 184px;
  max-width: 100%;
  height: 100%;
  padding: 72px 8px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}
@media only screen and (max-width: 1439px) {
  .myclass .bookshelf-section .book-info-btn {
    padding: 44px 8px 12px;
  }
}
.myclass .bookshelf-section .book-info-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.myclass .bookshelf-section {
  /* 연필 아이콘: book-img-wrap(책 표지) top-right에 위치, 수강중/완료 시에만 표시 */
}
.myclass .bookshelf-section .book-img-wrap .book-ico-pencil {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: url("/img/myclass/ico_pencil.svg") center/contain no-repeat;
  z-index: 1;
  pointer-events: auto;
  display: none; /* 기본 숨김, 수강중/완료 시에만 표시 */
}
.myclass .bookshelf-section .book-img-wrap .book-ico-pencil.book-ico-pencil-completed {
  top: 0;
  right: 6px;
  width: 43px;
  height: 45px;
  background-image: url("/img/myclass/ico_pencil_2.svg");
}
.myclass .bookshelf-section {
  /* 수강 중(.books-item-progress) 또는 학습 완료(.books-item-completed)일 때 연필 표시 */
}
.myclass .bookshelf-section .books-item-progress .book-img-wrap .book-ico-pencil:not(.book-ico-pencil-completed),
.myclass .bookshelf-section .books-item-completed .book-img-wrap .book-ico-pencil {
  display: block;
}
.myclass .bookshelf-section .book-video-area {
  position: relative;
  width: 100%;
  max-width: 9.5833vw;
  aspect-ratio: 16/9;
  padding: 2px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 6px;
  box-shadow: 10px 5px 4px 0 rgba(0, 0, 0, 0.5) inset;
}
.myclass .bookshelf-section .book-video-area .book-video-thumb-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 2px;
}
.myclass .bookshelf-section .book-video-area .book-video-thumb-wrap .book-video-thumb {
  filter: grayscale(100%);
}
.myclass .bookshelf-section .book-video-area .book-video-thumb {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.myclass .bookshelf-section .book-video-area .bookmark {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 0;
  z-index: 2;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
@media only screen and (max-width: 1023px) {
  .myclass .bookshelf-section .book-video-area .bookmark {
    width: 16px;
    height: 16px;
  }
}
.myclass .bookshelf-section .book-video-area .bookmark input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  background: transparent;
  background-image: url("/img/ico/ico_bookmark_off.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.myclass .bookshelf-section .book-video-area .bookmark input[type=checkbox]:checked {
  background-image: url("/img/ico/ico_bookmark_on.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.myclass .bookshelf-section {
  /* 수강 중/학습 완료 시 비디오 썸네일 컬러 표시 - grayscale(100%) 기본값 override */
}
.myclass .bookshelf-section .books-item-progress .book-video-thumb-wrap .book-video-thumb,
.myclass .bookshelf-section .books-item-completed .book-video-thumb-wrap .book-video-thumb {
  filter: grayscale(0%);
}
.myclass .bookshelf-section .book-title {
  height: 2.4em; /* font-size × line-height × 2줄 */
  font-size: clamp(14px, 1.25vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0 0 min(24px, 12.5%);
  word-break: keep-all;
  align-items: center;
  text-align: center;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.myclass .bookshelf-section .book-desc {
  position: relative;
  font-size: 11px;
  line-height: 1.4;
  color: #333;
  margin: 0 auto 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 38px;
  max-width: 100%;
}
@media only screen and (max-width: 1439px) {
  .myclass .bookshelf-section .book-desc {
    gap: 16px;
  }
}
.myclass .bookshelf-section .book-desc .book-desc-main {
  font-size: 16px;
  font-size: clamp(11px, 0.8333vw, 16px);
  z-index: 1;
}
.myclass .bookshelf-section .book-desc .book-desc-sub {
  font-size: clamp(10px, 0.78125vw, 15px);
  z-index: 1;
}
.myclass .bookshelf-section .books-item:nth-child(1) .book-desc::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 124px;
  height: 49px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='49' viewBox='0 0 124 49' fill='none'%3E%3Cg opacity='0.5' style='mix-blend-mode:multiply'%3E%3Cpath d='M31.6548 13.1895V0H91.4473V13.1895H123.981L61.9907 48.9798L0 13.1895H31.6548Z' fill='url(%23paint0_linear_1)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1' x1='61.9907' y1='0' x2='61.9907' y2='48.9798' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23779588' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23779588'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.myclass .bookshelf-section .books-item:nth-child(2) .book-desc::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 124px;
  height: 49px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='49' viewBox='0 0 124 49' fill='none'%3E%3Cg opacity='0.5' style='mix-blend-mode:multiply'%3E%3Cpath d='M31.6548 13.1895V0H91.4473V13.1895H123.981L61.9907 48.9798L0 13.1895H31.6548Z' fill='url(%23paint0_linear_2)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2' x1='61.9907' y1='0' x2='61.9907' y2='48.9798' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CAB389' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23CAB389'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.myclass .bookshelf-section .books-item:nth-child(3) .book-desc::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 124px;
  height: 49px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='49' viewBox='0 0 124 49' fill='none'%3E%3Cg opacity='0.5' style='mix-blend-mode:multiply'%3E%3Cpath d='M31.6548 13.1895V0H91.4473V13.1895H123.981L61.9907 48.9798L0 13.1895H31.6548Z' fill='url(%23paint0_linear_3)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_3' x1='61.9907' y1='0' x2='61.9907' y2='48.9798' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23A36E6B' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23A36E6B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.myclass .bookshelf-section .books-item:nth-child(4) .book-desc::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 124px;
  height: 49px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='49' viewBox='0 0 124 49' fill='none'%3E%3Cg opacity='0.5' style='mix-blend-mode:multiply'%3E%3Cpath d='M31.6548 13.1895V0H91.4473V13.1895H123.981L61.9907 48.9798L0 13.1895H31.6548Z' fill='url(%23paint0_linear_4)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_4' x1='61.9907' y1='0' x2='61.9907' y2='48.9798' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23688679' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23688679'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.myclass .bookshelf-section .books-item:nth-child(5) .book-desc::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 124px;
  height: 49px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='49' viewBox='0 0 124 49' fill='none'%3E%3Cg opacity='0.5' style='mix-blend-mode:multiply'%3E%3Cpath d='M31.6548 13.1895V0H91.4473V13.1895H123.981L61.9907 48.9798L0 13.1895H31.6548Z' fill='url(%23paint0_linear_5)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_5' x1='61.9907' y1='0' x2='61.9907' y2='48.9798' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23CAB389' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23CAB389'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.myclass .bookshelf-section .books-item:nth-child(6) .book-desc::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 124px;
  height: 49px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='49' viewBox='0 0 124 49' fill='none'%3E%3Cg opacity='0.5' style='mix-blend-mode:multiply'%3E%3Cpath d='M31.6548 13.1895V0H91.4473V13.1895H123.981L61.9907 48.9798L0 13.1895H31.6548Z' fill='url(%23paint0_linear_6)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6' x1='61.9907' y1='0' x2='61.9907' y2='48.9798' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23998B87' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23998B87'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.myclass .bookshelf-section .book-tag {
  font-size: 12px;
  font-weight: 700;
  color: #181410;
  flex-shrink: 0;
}
.myclass .bookshelf-section {
  /* 노란 포스트잇(CHECK!) - books-item-completed일 때만 표시 */
}
.myclass .bookshelf-section .book-postit {
  display: none;
}
.myclass .bookshelf-section .books-item-completed .book-postit {
  display: block;
  position: absolute;
  bottom: 4%;
  margin: 6px auto 8px;
  padding: 8px 14px;
  min-height: 33.3%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 30.81%), #FFEF84;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  /* 들어 올려진 듯한 캐스팅 그림자 (우측·하단) */
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.18), 4px 6px 20px rgba(0, 0, 0, 0.12);
  text-align: left;
  flex-shrink: 0;
  overflow: hidden;
  z-index: 1;
  /* 표면 그라데이션 그림자 (상단 어두움 → 하단 투명) */
}
.myclass .bookshelf-section .books-item-completed .book-postit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, #000 -0.64%, rgba(102, 102, 102, 0) 129.61%);
  opacity: 0.08;
}
.myclass .bookshelf-section .book-postit-title,
.myclass .bookshelf-section .book-postit-list {
  position: relative;
  z-index: 1;
}
.myclass .bookshelf-section {
  /* books-item별 포스트잇 회전·배경 개별 스타일 */
}
.myclass .bookshelf-section .books-item:nth-child(1) .book-postit {
  width: 100%;
  max-width: 92%;
  left: -4%;
  transform: rotate(4.083deg);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 39.09%), #FFEF84;
}
.myclass .bookshelf-section .books-item:nth-child(2) .book-postit {
  width: 120%;
  max-width: 120%;
  transform: rotate(-2.037deg);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 30.81%), #F9FFFF;
}
.myclass .bookshelf-section .books-item:nth-child(3) .book-postit {
  width: 110%;
  max-width: 110%;
  transform: rotate(-0.373deg);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 30.81%), #FFEF84;
}
.myclass .bookshelf-section .books-item:nth-child(4) .book-postit {
  width: 100%;
  max-width: 100%;
  transform: rotate(2.845deg);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 30.81%), #F9FFFF;
}
.myclass .bookshelf-section .books-item:nth-child(5) .book-postit {
  width: 120%;
  max-width: 120%;
  transform: rotate(-0.841deg);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 30.81%), #C7FDFF;
}
.myclass .bookshelf-section .books-item:nth-child(6) .book-postit {
  width: 110%;
  max-width: 110%;
  left: 4%;
  transform: rotate(0.72deg);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 30.81%), #FFF196;
}
.myclass .bookshelf-section .book-postit-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0px;
  font-size: 16px;
  color: #ff4000;
  margin: 0 0 6px;
  font-family: "Aclonica", sans-serif;
  font-weight: 400;
}
.myclass .bookshelf-section .book-postit-title::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -10px;
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("/img/myclass/ico_star.svg") center/contain no-repeat;
  flex-shrink: 0;
}
.myclass .bookshelf-section .book-postit-list {
  margin: 0;
  font-size: clamp(10px, 0.7291vw, 14px);
  line-height: 1.5;
  color: #333;
  list-style: none;
}
.myclass .bookshelf-section .book-postit-list li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 8px;
}
.myclass .bookshelf-section .book-postit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 8px;
  height: 12px;
  background: url("/img/ico/ico_check.svg") center/contain no-repeat;
}
.myclass .bookshelf-section .shelf-plank {
  position: relative;
  width: 100%;
  height: 48px;
  margin-top: 0;
  background: url("/img/myclass/img_shelf.png");
  background-position: center bottom;
  background-repeat: repeat;
  background-size: cover;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.12);
}
.myclass .bookshelf-section .shelf-plank:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 6px);
  height: 2px;
  opacity: 0.1;
  background: #FFF;
  backdrop-filter: blur(2px);
  z-index: 1;
  border: inherit;
}
.myclass .bookshelf-section .shelf-plank:after {
  content: "";
  position: absolute;
  top: -26px;
  left: 2px;
  width: calc(100% - 4px);
  height: 26px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent), #56401A;
  clip-path: polygon(0% 100%, 100% 100%, 97.5% 0%, 3% 0%);
  z-index: -1;
}
.myclass .bookshelf-section .shelf-tags {
  position: absolute;
  top: calc(50% - 10px);
  left: 20px;
  right: 0;
  bottom: 0;
  margin: 0;
  max-width: -moz-max-content;
  max-width: max-content;
  height: 20px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
  border-radius: 4px;
  overflow: hidden;
}
.myclass .bookshelf-section .shelf-tags span {
  display: inline-block;
  height: 100%;
  padding: 0 12px;
  font-size: 12px;
  background-color: #000;
  color: #fff;
  font-weight: 700;
}
.myclass .bookshelf-section .shelf-tags ul {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-size: 10px;
  color: #181410;
  font-weight: 700;
}
.myclass .books-list--same-height {
  align-items: stretch;
}
.myclass {
  /* bookshelf-section이 2개 이상일 때 각 섹션을 화면 전체 높이로 */
}
.myclass .myclass-main:has(.bookshelf-section:nth-of-type(n+2)) .bookshelf-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.myclass .bookshelf-section--with-check {
  margin-top: 2rem;
}
.myclass .bookshelf-section--with-check .bookshelf {
  margin-top: 0.75rem;
}
.myclass .bookshelf-section--with-check .book-info-wrap .bookmark {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 0;
  z-index: 2;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.myclass .bookshelf-section--with-check .book-info-wrap .bookmark input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  background: transparent;
  background-image: url("/img/ico/ico_bookmark_off.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.myclass .bookshelf-section--with-check .book-info-wrap .bookmark input[type=checkbox]:checked {
  background-image: url("/img/ico/ico_bookmark_on.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.goal-popup .goal-slide-bookshelf .books-item {
  position: relative; /* absolute인 .book-info-btn의 기준이 되도록 */
  min-width: 0;
  max-width: 100%;
}

.goal-popup .goal-slide-bookshelf .books-item .book-info-btn {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 12px 4px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  transform: translateX(0);
}
.goal-popup .goal-slide-bookshelf .books-item .book-info-wrap {
  padding: 24px 4px 12px;
  position: static;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  transform: translateX(0);
  overflow: hidden;
}
@media only screen and (max-width: 1023px) {
  .goal-popup .goal-slide-bookshelf .books-item .book-info-wrap {
    padding: 16px 4px 0px;
  }
}
.goal-popup .goal-slide-bookshelf .books-item .book-video-area {
  flex-shrink: 0;
  max-width: 100%;
  min-width: 0;
}
@media only screen and (max-width: 1023px) {
  .goal-popup .goal-slide-bookshelf .books-item .book-video-area {
    margin-bottom: 0;
  }
}
.goal-popup .goal-slide-bookshelf .books-item .book-title {
  font-size: 16px;
  height: auto;
  margin: 0;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-wrap: balance;
  word-break: keep-all;
}
.goal-popup .goal-slide-bookshelf .books-item .book-desc,
.goal-popup .goal-slide-bookshelf .books-item .book-postit,
.goal-popup .goal-slide-bookshelf .books-item .book-tag {
  flex-basis: 100%;
  min-width: 0;
  max-width: 100%;
}
@media only screen and (max-width: 1023px) {
  .goal-popup .goal-slide-bookshelf .books-item .book-postit {
    display: none !important;
  }
}
.goal-popup .goal-slide-bookshelf .books-item .book-desc {
  gap: 16px;
  margin-bottom: 0;
}
.goal-popup .goal-slide-bookshelf .books-item .book-desc::before {
  top: 8px !important;
  width: 62px !important;
}
.goal-popup .goal-slide-bookshelf .books-item .book-desc .book-desc-main {
  font-size: 10px;
  text-wrap: balance;
  word-break: keep-all;
}
.goal-popup .goal-slide-bookshelf .books-item .book-desc .book-desc-sub {
  font-size: 10px;
  text-wrap: balance;
  word-break: keep-all;
}
.goal-popup .goal-slide-bookshelf .books-item .book-tag {
  font-size: 10px;
}
.goal-popup .bookshelf-section .bookshelf {
  position: relative;
  max-width: 788px;
  margin: auto;
}
.goal-popup .book-info-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  text-align: center;
}
.goal-popup .popup-books-wrap {
  padding: 0 20px;
  text-align: center;
}
.goal-popup .popup-books-img {
  max-width: 100%;
  max-height: 220px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: bottom;
}
.goal-popup .bookshelf-section .bookshelf .shelf-plank {
  width: 100%;
  height: 32px;
}
@media only screen and (max-width: 1023px) {
  .goal-popup .bookshelf-section .bookshelf .shelf-plank {
    height: 24px;
  }
}
.goal-popup .bookshelf-section .bookshelf .shelf-tags {
  height: 18px;
  top: calc(50% - 8px);
  padding-right: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media only screen and (max-width: 1023px) {
  .goal-popup .bookshelf-section .bookshelf .shelf-tags {
    display: none;
  }
}
.goal-popup .bookshelf-section .bookshelf .shelf-tags span {
  padding: 2px 10px 0;
  margin-right: 0;
  font-size: 10px;
}
.goal-popup .bookshelf-section .bookshelf .shelf-tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 10px;
}
.goal-popup .bookshelf-section .bookshelf .shelf-tags {
  font-size: 10px;
}

@media only screen and (max-width: 767px) {
  .goal-popup .goal-slide-bookshelf .bookshelf {
    padding: 0;
    margin: 0;
    max-width: 380px !important;
  }
}
@media only screen and (max-width: 767px) and (max-width: 575px) {
  .goal-popup .goal-slide-bookshelf .bookshelf {
    max-width: 238px !important;
  }
}
@media only screen and (max-width: 767px) {
  .goal-popup .goal-slide-bookshelf .books-list {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 0;
    width: calc(100% - 32px);
    margin: 0 auto;
  }
  .goal-popup .goal-slide-bookshelf .books-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    padding: 0;
    margin-bottom: 0;
    border-radius: 0;
    overflow: hidden;
    transform: none;
    filter: none;
  }
  .goal-popup .goal-slide-bookshelf .books-item:nth-child(2) {
    margin-left: 4px;
  }
  .goal-popup .goal-slide-bookshelf .books-item:nth-child(3) {
    margin-left: -4px;
  }
  .goal-popup .goal-slide-bookshelf .books-item:nth-child(5) {
    margin-left: -8px;
  }
  .goal-popup .goal-slide-bookshelf .books-item .book-img-wrap {
    flex-shrink: 0;
    overflow: hidden;
    display: block;
  }
  .goal-popup .goal-slide-bookshelf .books-item .book-img-wrap::before, .goal-popup .goal-slide-bookshelf .books-item .book-img-wrap::after {
    display: none;
  }
  .goal-popup .goal-slide-bookshelf .books-item .book-img-picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .goal-popup .goal-slide-bookshelf .books-item .book-img-picture img,
  .goal-popup .goal-slide-bookshelf .books-item .book-img-picture .book-img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .goal-popup .goal-slide-bookshelf .books-item .book-info-btn {
    left: 0;
    top: 0;
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 8px 14px 8px 12px;
    text-align: left;
    align-items: center;
    justify-content: center;
    position: static;
    transform: none;
  }
  .goal-popup .goal-slide-bookshelf .books-item .book-info-wrap {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 16px;
    position: static !important;
    transform: none !important;
    height: auto !important;
  }
  .goal-popup .goal-slide-bookshelf .books-item .book-desc,
  .goal-popup .goal-slide-bookshelf .books-item .book-desc-sub,
  .goal-popup .goal-slide-bookshelf .books-item .book-desc-main,
  .goal-popup .goal-slide-bookshelf .books-item .book-postit,
  .goal-popup .goal-slide-bookshelf .books-item .book-tag {
    display: none !important;
  }
  .goal-popup .goal-slide-bookshelf .books-item .book-video-area {
    position: relative;
    margin: 0;
    align-self: center;
    height: 100%;
    aspect-ratio: 16/9;
    width: auto;
    flex-shrink: 0;
    overflow: hidden;
  }
  .goal-popup .goal-slide-bookshelf .books-item .book-video-area .book-video-thumb-wrap {
    position: relative;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
  }
  .goal-popup .goal-slide-bookshelf .books-item .book-video-area .book-video-thumb-wrap .book-video-thumb {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .goal-popup .goal-slide-bookshelf .books-item .book-title {
    margin: 0;
    height: auto;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #060606;
    text-shadow: 0.852px 0.852px 0.852px rgba(255, 255, 255, 0.4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
    letter-spacing: -0.72px;
    align-self: center;
    flex: 1;
    min-width: 0;
  }
}
@media only screen and (max-width: 767px) and (max-width: 575px) {
  .goal-popup .goal-slide-bookshelf .books-item .book-title {
    font-size: 12px;
  }
}
@media (max-width: 1024px) {
  .myclass-page .scroll-section .bookshelf-section {
    padding: 0;
    margin: 0;
    justify-content: flex-end;
  }
  .myclass-page .scroll-section .bookshelf-section .bookshelf {
    padding: 0;
    margin: 0;
    max-width: 420px;
  }
  .myclass-page {
    /* 책 목록: 세로 밴드 스택 (Figma MO) */
  }
  .myclass-page .scroll-section .bookshelf-section .books-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    width: calc(100% - 32px);
    margin: 0 auto;
  }
  .myclass-page .scroll-section .bookshelf-section .books-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    padding: 0;
    margin-bottom: 0;
    transform: none;
    filter: none;
  }
  .myclass-page .scroll-section .bookshelf-section .books-item:nth-child(2) {
    margin-left: 4px;
  }
  .myclass-page .scroll-section .bookshelf-section .books-item:nth-child(3) {
    margin-left: -4px;
  }
  .myclass-page .scroll-section .bookshelf-section .books-item:nth-child(5) {
    margin-left: -8px;
  }
  .myclass-page .scroll-section .bookshelf-section .books-item:hover {
    transform: none;
    box-shadow: none;
  }
  .myclass-page .scroll-section .bookshelf-section .books-item .book-img-wrap {
    flex-shrink: 0;
    overflow: hidden;
  }
  .myclass-page .scroll-section .bookshelf-section .books-item .book-img-wrap::before, .myclass-page .scroll-section .bookshelf-section .books-item .book-img-wrap::after {
    display: none;
  }
  .myclass-page .book-img-picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .myclass-page .book-img-picture img,
  .myclass-page .book-img-picture .book-img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .myclass-page .scroll-section .bookshelf-section .books-item .book-ico-pencil {
    width: 18px;
    height: 18px;
    top: 4px;
    right: 12px;
    background-size: contain;
  }
  .myclass-page .scroll-section .bookshelf-section .books-item .book-ico-pencil-completed {
    width: 24px;
    height: 26px;
    top: -3px;
    right: 8px;
    background-size: contain;
  }
  .myclass-page .scroll-section .bookshelf-section .book-info-btn {
    left: 0;
    top: 0;
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 12px 44px 12px 12px;
    text-align: left;
    align-items: center;
    justify-content: center;
    top: auto;
    left: auto;
    transform: none;
  }
  .myclass-page {
    /* 모바일: book-info-wrap 가로 배치 */
  }
  .myclass-page .scroll-section .bookshelf-section .book-info-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    gap: 16px;
  }
  .myclass-page {
    /* 모바일: book-desc 영역 숨김 */
  }
  .myclass-page .scroll-section .bookshelf-section .book-desc,
  .myclass-page .scroll-section .bookshelf-section .book-desc-sub,
  .myclass-page .scroll-section .bookshelf-section .book-desc-main,
  .myclass-page .scroll-section .bookshelf-section .book-postit,
  .myclass-page .scroll-section .bookshelf-section .book-tag {
    display: none !important;
  }
  .myclass-page {
    /* 모바일: book-video-area 썸네일 비율(16:9) 유지, 행 높이에 맞춤 */
  }
  .myclass-page .scroll-section .bookshelf-section .book-video-area {
    position: relative;
    margin: 0;
    align-self: stretch;
    height: 100%;
    aspect-ratio: 16/9;
    width: auto;
    flex-shrink: 0;
    overflow: hidden;
  }
  .myclass-page .scroll-section .bookshelf-section .book-video-area .book-video-thumb-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .myclass-page .scroll-section .bookshelf-section .book-video-area .book-video-thumb-wrap .book-video-thumb {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .myclass-page .scroll-section .bookshelf-section .book-postit,
  .myclass-page .scroll-section .bookshelf-section .book-tag {
    width: 56px;
  }
  .myclass-page .scroll-section .bookshelf-section .book-title {
    margin: 0;
    height: auto;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #060606;
    text-shadow: 0.852px 0.852px 0.852px rgba(255, 255, 255, 0.4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
    letter-spacing: -0.72px;
    align-self: center;
  }
  .myclass-page {
    /* 선반: 모바일 풀폭, 나무 질감 */
    /* 모바일: shelf-tags 숨김 */
  }
}
@media only screen and (max-width: 1024px) and (max-width: 575px) {
  .myclass-page .scroll-section .bookshelf-section .book-title {
    font-size: 14px;
  }
}
@media (max-width: 1024px) {
  .myclass-page .scroll-section .bookshelf-section .shelf-plank {
    margin-top: 0;
    border-radius: 0;
    background-color: #56401a;
    background-image: url("/img/myclass/img_shelf.png");
    background-repeat: repeat;
    background-size: auto;
    box-shadow: inset 0 2px 2px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 2px 0 rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 32px;
    max-width: 436px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 767px) {
  .myclass-page .scroll-section .bookshelf-section .shelf-plank {
    height: 24px;
  }
}
@media (max-width: 1024px) {
  .myclass-page .scroll-section .bookshelf-section .shelf-plank::before {
    display: none;
  }
  .myclass-page .scroll-section .bookshelf-section .shelf-plank::after {
    top: -28px;
    left: 0;
    width: 100%;
    height: 28px;
  }
  .myclass-page .scroll-section .bookshelf-section .shelf-tags {
    display: none !important;
  }
}
.myclass .container {
  background: linear-gradient(180deg, #f9f6f0 0%, #e6ddcc 100%);
  border-top: 2px solid #f3dba8;
  box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.05);
}
@media only screen and (max-width: 1023px) {
  .myclass .container {
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (max-width: 575px) {
  .myclass .container {
    border-top: none;
    box-shadow: none;
  }
}
.myclass .page-title {
  padding-top: min(3.8541%, 74px);
}
@media only screen and (max-width: 1023px) {
  .myclass .page-title {
    padding-top: 24px;
    padding-bottom: 16px;
    padding-left: 8px;
    padding-right: 8px;
  }
}
.myclass .myclass-wrap {
  position: relative;
  min-height: 100%;
  padding: 0px 60px;
  display: grid;
  flex-direction: column;
  max-height: 100vh;
  grid-template-rows: auto 1fr;
}
@media only screen and (max-width: 1023px) {
  .myclass .myclass-wrap {
    padding: 0 0 20px;
    min-height: 100%;
    overflow: hidden;
  }
}
@media only screen and (max-width: 575px) {
  .myclass .myclass-wrap .scroll-section .bookshelf-section .bookshelf {
    width: 72%;
    margin: auto;
  }
  .myclass .myclass-wrap .scroll-section .bookshelf-section .bookshelf .books-item {
    min-height: auto;
  }
  .myclass .myclass-wrap .scroll-section .bookshelf-section .shelf-plank {
    max-width: calc(100% + 32px);
  }
  .myclass .myclass-wrap .scroll-section .bookshelf-section .book-info-btn {
    padding: 8px 44px 8px 12px;
  }
  .myclass .myclass-wrap .quarter-select-wrap .quarter-select {
    height: 32px;
    font-size: 12px;
  }
  .myclass .myclass-wrap .sidebar-goal-title {
    font-size: 18px;
  }
}
.myclass .myclass-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: calc(var(--window-height) - 74px);
  background-image: url("/img/myclass/bg_lo.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.6;
  z-index: 0;
}
@media only screen and (max-width: 1023px) {
  .myclass .myclass-wrap::after {
    width: 50%;
    padding-top: 70%;
    opacity: 0.5;
  }
}
.myclass .myclass-wrap > * {
  position: relative;
  z-index: 1;
}
.myclass .myclass-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (max-width: 1023px) {
  .myclass .myclass-inner {
    max-width: -moz-max-content;
    max-width: max-content;
    margin: auto;
    padding: 0 40px;
  }
}
.myclass .lottie-icon {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.myclass .lottie-01 {
  width: 200%;
  height: 200%;
}
.myclass .lottie-02 {
  width: 214.3%;
  height: 214.3%;
}
.myclass .lottie-03 {
  width: 178.58%;
  height: 178.58%;
}
.myclass .lottie-04 {
  width: 214.3%;
  height: 214.3%;
}
.myclass .lottie-05 {
  width: 200%;
  height: 200%;
}
.myclass .lottie-06 {
  width: 142.88%;
  height: 142.88%;
}
.myclass .myclass-top-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  gap: 24px;
  z-index: 2;
  /*
      &.top-bar-absolute {
        position: absolute;
        top: 0;
        left: 48px;
        width: calc(100% - 48px - 48px);
        .top-bar-left {
          top: 24px;
        }
      }
  */
}
.myclass .top-bar-left {
  position: absolute;
  top: 38px;
  left: 0;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.myclass .user-rank-area {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--text-primary);
}
.myclass .user-rank-area .user-rank-area-inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  padding-left: 6px;
}
.myclass .user-rank-area .user-profile {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}
.myclass .user-rank-area .user-profile img {
  width: 100%;
}
.myclass .user-rank-area .ico-trophy {
  width: 32px;
  height: 32px;
}
.myclass .user-rank-area .ico-trophy img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.myclass .user-rank-area .rank-text em {
  font-style: normal;
  font-weight: 700;
}
.myclass .user-rank-area .rank-toggle-wrap {
  position: relative;
}
.myclass .user-rank-area .btn-rank-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  width: auto;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.myclass .user-rank-area .btn-rank-toggle .ico-chevron-down {
  display: block;
  width: 10px;
  height: 10px;
  border-left: 2px solid #D0B135;
  border-bottom: 2px solid #D0B135;
  border-radius: 2px;
  transform: rotate(-45deg);
  color: var(--text-secondary);
  margin-top: -4px;
  transition: transform 0.2s ease;
}
.myclass .user-rank-area .btn-rank-toggle.is-open .ico-chevron-down {
  transform: rotate(135deg);
  margin-top: 0;
}
.myclass .user-rank-area .rank-list-popup {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 158px;
  max-height: 124px;
  padding: 8px 4px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  z-index: 100;
  overflow-y: auto;
}
.myclass .user-rank-area .rank-list-popup::-webkit-scrollbar {
  height: 10px;
  width: 7px;
}
.myclass .user-rank-area .rank-list-popup::-webkit-scrollbar-thumb {
  background-color: var(--bg-scrollbar-thumb);
  border-radius: 8px;
  background-clip: padding-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.myclass .user-rank-area .rank-list-popup::-webkit-scrollbar-track {
  background-color: var(--bg-scrollbar-track);
}
.myclass .user-rank-area .rank-list-popup[hidden] {
  display: none !important;
}
.myclass .user-rank-area .rank-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--text-primary);
}
.myclass .user-rank-area .rank-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 8px;
  min-height: 32px;
}
.myclass .user-rank-area .rank-item .rank-medal,
.myclass .user-rank-area .rank-item .rank-num {
  width: 20px;
  flex-shrink: 0;
  font-weight: 600;
}
.myclass .user-rank-area .rank-item .rank-gold {
  font-size: 16px;
}
.myclass .user-rank-area .rank-item .rank-silver {
  font-size: 16px;
}
.myclass .user-rank-area .rank-item .rank-bronze {
  font-size: 16px;
}
.myclass .user-rank-area .rank-item .rank-num {
  padding-left: 4px;
  font-size: 14px;
  color: var(--text-secondary);
}
.myclass .user-rank-area .rank-item .rank-name {
  flex: 1;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myclass .user-rank-area .rank-item .rank-name small {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 300;
}
.myclass .page-intro {
  text-align: right;
  flex: 1;
  min-width: 0;
  padding: 0;
}
.myclass .page-intro--goal {
  width: 100%;
  text-align: center;
}
.myclass .page-intro-mobile {
  display: none;
}
.myclass .page-title--goal {
  text-align: center;
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
.myclass .page-title--goal h3 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.05em;
  color: #000;
}
.myclass .page-title--goal h3 em {
  font-style: normal;
  font-weight: 500;
}
.myclass .page-title--goal h3 strong {
  font-weight: 700;
}
.myclass .page-title--goal p {
  margin: 0;
  font-size: 40px;
  font-weight: 400;
  color: #000;
}
.myclass .page-title--goal p em {
  font-style: normal;
  font-weight: 700;
  color: #f5651d;
}
.myclass .page-title--goal .page-title-deadline {
  margin: 0;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: #000;
}
.myclass .page-title--goal .deadline-highlight {
  font-weight: 700;
  color: #f5651d;
}
.myclass .page-title--goal .deadline-highlight small {
  font-size: 0.8em;
  font-weight: 400;
}
.myclass .page-title--goal .deadline-body strong {
  font-weight: 700;
}
.myclass .intro-state {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  gap: 4px;
}
.myclass .intro-greeting {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
}
.myclass .intro-greeting strong {
  font-weight: 700;
}
.myclass .intro-desc {
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.4;
}
.myclass .intro-desc .intro-dday {
  font-style: normal;
  color: var(--text-accent);
}
.myclass .intro-desc strong {
  font-weight: 700;
  color: var(--text-accent);
}
@media only screen and (max-width: 1023px) {
  .myclass .myclass-top-bar.top-bar-absolute {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 28px;
    padding: 0;
    width: 100%;
    left: 0;
    padding-top: 24px;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 12px;
  }
  .myclass .myclass-top-bar.top-bar-absolute .page-intro-mobile {
    width: 100%;
  }
  .myclass .myclass-top-bar.top-bar-absolute .page-intro-mobile .page-title {
    padding-top: 0;
  }
  .myclass .myclass-top-bar.top-bar-absolute .page-intro-mobile .page-title h3 {
    display: block;
    color: #3A200D;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.02em;
  }
  .myclass .myclass-top-bar.top-bar-absolute .top-bar-left {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .myclass .recs-list {
    display: none;
  }
  .myclass .page-intro {
    display: none;
  }
  .myclass .page-intro-mobile {
    display: block;
    order: 1;
    text-align: center;
    width: 100%;
    max-width: 100vw;
  }
  .myclass .page-intro-mobile .page-title--goal {
    display: flex;
    flex-direction: column-reverse;
    max-width: 100%;
    margin: 0;
  }
  .myclass .page-intro-mobile .page-title--goal h3 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 400;
    color: #3A200D;
    line-height: 1.4;
  }
  .myclass .page-intro-mobile .page-title--goal h3 strong {
    font-weight: 700;
  }
}
@media only screen and (max-width: 1023px) and (max-width: 767px) {
  .myclass .page-intro-mobile .page-title--goal h3 {
    font-size: 20px;
  }
}
@media only screen and (max-width: 1023px) {
  .myclass .page-intro-mobile .page-title--goal .page-title-deadline {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #f5651d;
  }
  .myclass .page-title--goal {
    max-width: 100%;
    margin-bottom: 0;
  }
  .myclass .page-title--goal h3 {
    font-size: 13px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .myclass .page-title--goal p.page-title-deadline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .myclass .page-title--goal .deadline-highlight {
    display: block;
    font-size: 52px;
    font-weight: 900;
    color: #f5651d;
    line-height: 1;
    letter-spacing: -3px;
  }
  .myclass .page-title--goal .deadline-highlight small {
    display: none;
  }
  .myclass .page-title--goal .deadline-body {
    display: block;
    font-size: 20px;
    font-weight: 500;
    color: #000;
    line-height: 1.45;
    letter-spacing: -0.5px;
  }
  .myclass .page-title--goal .deadline-body strong {
    font-weight: 700;
  }
}

.goal-layer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(36, 36, 36, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  padding: 16px 24px;
}
.goal-layer.is-open {
  display: flex;
}

.goal-layer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: -moz-max-content;
  max-width: max-content;
  max-height: 100%;
}

.goal-layer-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  max-width: 1100px;
  min-height: 0;
  flex: 1;
  padding: 0 24px;
  z-index: 4;
}

.goal-layer-foot {
  flex-shrink: 0;
  text-align: center;
}

.goal-layer-header {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.goal-layer-header .btn-close-layer {
  z-index: 10;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.goal-layer-header .btn-close-layer::before, .goal-layer-header .btn-close-layer::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
@media only screen and (max-width: 1023px) {
  .goal-layer-header .btn-close-layer::before, .goal-layer-header .btn-close-layer::after {
    background: #000;
  }
}
.goal-layer-header .btn-close-layer::before {
  transform: rotate(45deg);
}
.goal-layer-header .btn-close-layer::after {
  transform: rotate(-45deg);
}

.goal-popup {
  position: relative;
  flex: 1;
  max-width: 100%;
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  padding: 4px;
  /* 좌우 슬라이드(목표) 노출 — Figma 배경 그라디언트 */
}
.goal-popup .goal-main-slider {
  position: relative;
  border-radius: 12px;
  overflow: visible !important;
  background: linear-gradient(180deg, #f9f6f0 0%, #e6ddcc 100%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  z-index: 2;
}
@media only screen and (min-width: 1024px) {
  .goal-popup .goal-main-slider::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    border-radius: inherit;
    padding: 4px;
    background: linear-gradient(180deg, #f5651d 75%, rgba(245, 101, 29, 0.2) 100%);
    box-sizing: border-box;
  }
  .goal-popup .goal-main-slider::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    background: linear-gradient(180deg, transparent 0%, #e6ddcc 30%, #e6ddcc 100%);
    border-radius: 0 0 12px 12px;
    pointer-events: none;
    z-index: 1;
  }
}
.goal-popup .goal-popup-swiper {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  overflow: visible;
  padding: 0;
  position: relative;
  border-radius: 12px;
  z-index: 2;
}
@media only screen and (max-width: 1023px) {
  .goal-popup .goal-popup-swiper {
    height: 100%;
    overflow: hidden;
  }
}
.goal-popup .goal-popup-swiper .swiper-wrapper {
  align-items: stretch;
  height: calc(100vh - 260px);
}
@media only screen and (max-width: 1023px) {
  .goal-popup .goal-popup-swiper .swiper-wrapper {
    height: 100%;
  }
}
.goal-popup .goal-popup-swiper .swiper-slide {
  border: 3px solid transparent;
  box-sizing: border-box;
}
.goal-popup .goal-popup-swiper .swiper-slide .title-box {
  flex: 0 0 auto;
  min-width: 260px;
  max-width: 320px;
}
.goal-popup .goal-popup-swiper .swiper-slide .recs-list {
  flex: 1;
  min-width: 0;
}
.goal-popup .goal-slide {
  width: 264px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}
.goal-popup .goal-slide.swiper-slide-active {
  width: 100%;
  cursor: default;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.goal-popup .goal-popup-swiper.swiper-no-anim .goal-slide {
  transition: none !important;
}
.goal-popup .slide-mini-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 0px;
  padding: 24px 24px;
  height: 356px;
  margin-top: 240px;
  border-radius: 12px;
  background: linear-gradient(180deg, #F9F6F0 54.96%, #F6E3BF 116.14%);
  box-sizing: border-box;
}
.goal-popup .slide-mini-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.goal-popup .goal-slide.swiper-slide-active .slide-mini-card {
  display: none;
}
.goal-popup .goal-slide .popup-scroll {
  display: none;
}
.goal-popup .goal-slide.swiper-slide-active .popup-scroll {
  display: block;
  opacity: 1;
}
.goal-popup .goal-slide-icon-mini {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}
.goal-popup .goal-slide-icon-mini img, .goal-popup .goal-slide-icon-mini svg {
  width: 100%;
  height: 100%;
}
.goal-popup .goal-slide-title-mini {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: rgb(58, 32, 13);
  word-break: keep-all;
}
.goal-popup .slide-mini-divider {
  width: 24px;
  height: 2px;
  background: rgb(97, 74, 57);
  border-radius: 2px;
  margin: 28px 0;
}
.goal-popup .goal-slide-desc-mini {
  font-size: 16px;
  line-height: 1.6;
  color: rgb(97, 73, 56);
  word-break: keep-all;
  margin: 0;
}
.goal-popup .popup-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 40px 48px 26px;
}
.goal-popup .popup-scroll::-webkit-scrollbar {
  height: 10px;
  width: 7px;
}
.goal-popup .popup-scroll::-webkit-scrollbar-thumb {
  background-color: var(--bg-scrollbar-thumb);
  border-radius: 8px;
  background-clip: padding-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.goal-popup .popup-scroll::-webkit-scrollbar-track {
  background-color: var(--bg-scrollbar-track);
}
.goal-popup .popup-body {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 32px;
  height: 100%;
}
.goal-popup .popup-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 0px;
  width: 100%;
}
.goal-popup .title-box {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 0;
  padding-right: 24px;
}
@media only screen and (max-width: 1023px) {
  .goal-popup .title-box {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding-right: 0;
    width: 100%;
  }
}
.goal-popup .title-icon {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}
@media only screen and (max-width: 1023px) {
  .goal-popup .title-icon {
    display: none;
  }
}
.goal-popup .title-icon svg, .goal-popup .title-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.goal-popup .title-area {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 8px;
}
.goal-popup .popup-title {
  font-size: 22px;
  font-weight: 700;
  color: #000;
  letter-spacing: -0.66px;
  line-height: 1.4;
  text-decoration-line: none;
  word-break: keep-all;
  text-wrap: balance;
}
.goal-popup .popup-desc {
  margin: 0;
  font-size: 14px;
  color: #3a200d;
  line-height: 1.2;
  letter-spacing: -0.42px;
  word-break: keep-all;
  text-wrap: balance;
}
.goal-popup .popup-quarter {
  font-size: 15px;
  font-weight: 500;
  color: #5d4a3d;
  line-height: 1.09;
  margin-bottom: 4px;
}
.goal-popup .popup-quarter .popup-quarter-num {
  font-weight: 700;
}
.goal-popup .recs-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-left: 32px;
  border-left: 1px solid #E0E0E0;
}
@media only screen and (max-width: 1023px) {
  .goal-popup .recs-list {
    display: none;
  }
}
.goal-popup .rec-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  gap: 16px;
}
.goal-popup .rec-label {
  flex-shrink: 0;
  padding-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: #07855C;
  line-height: 1;
  white-space: nowrap;
}
.goal-popup .rec-content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.goal-popup .rec-target {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.goal-popup .rec-target em {
  font-weight: 700;
}
.goal-popup .rec-text {
  margin: 0;
  font-size: 12px;
  color: var(--text-primary);
}
.goal-popup .popup-book-tags {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px;
}
.goal-popup .pop-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}
.goal-popup .popup-pagination {
  position: relative;
  flex-shrink: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  padding: 0 0 24px;
}
@media only screen and (max-width: 1023px) {
  .goal-popup .popup-pagination {
    position: absolute;
    bottom: 0;
  }
}
@media only screen and (max-width: 575px) {
  .goal-popup .popup-pagination {
    padding: 0;
  }
}
.goal-popup .popup-pagination .pagination-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
}
@media only screen and (max-width: 1023px) {
  .goal-popup .popup-pagination .pagination-dot {
    width: 8px;
    height: 8px;
  }
}
.goal-popup .popup-pagination .pagination-dot.is-active {
  background: #f5651d;
}

.btn-set-goal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 18px 48px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.72px;
  text-shadow: 0 1.795px 1.795px rgba(201, 121, 38, 0.5);
  background: #ff8200;
  background: radial-gradient(117.51% 77.94% at 48.87% 100%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 24.58%, rgba(255, 255, 255, 0) 100%), #ff8200;
  background-blend-mode: screen, normal;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
  box-shadow: 0 -3.59px 3.59px 0 #E18D36 inset, 3.59px 3.59px 10.769px -3.59px rgba(0, 0, 0, 0.75);
}
.btn-set-goal::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-radius: inherit;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2px;
  background: linear-gradient(65deg, rgba(255, 255, 255, 0.6) 0%, transparent 100%) #ff8200;
  box-sizing: border-box;
}
.btn-set-goal:hover {
  background-color: #e87500;
  transform: translateY(-2px);
}
.btn-set-goal:active {
  transform: translateY(0);
}

@media only screen and (max-width: 1023px) {
  .goal-layer {
    padding: 0;
    align-items: flex-end;
  }
  .goal-layer-content {
    width: 100%;
    max-width: 100%;
    height: calc(var(--window-inner-height, 100dvh) - 50px);
    max-height: calc(var(--window-inner-height, 100dvh) - 50px);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    background: linear-gradient(180deg, #f9f6f0 0%, #e6ddcc 100%);
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .goal-layer-header {
    flex-shrink: 0;
    width: 100%;
    padding: 14px 16px 0;
    justify-content: flex-end;
    background: transparent;
    display: none;
  }
  .goal-layer-main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    max-width: 100%;
  }
  .goal-popup {
    height: 100%;
    max-height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .goal-main-slider {
    flex: 1;
    min-height: 0;
    border-radius: 0 !important;
    box-shadow: none;
    background: transparent;
    overflow: hidden !important;
  }
  .goal-main-slider::before, .goal-main-slider::after {
    display: none;
  }
  .slide-mini-card {
    display: none !important;
  }
  .goal-slide {
    width: 100% !important;
    display: flex !important;
    flex-direction: column;
    height: 100%;
  }
  .goal-slide .popup-scroll {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 16px 16px;
    height: auto;
  }
  .popup-body {
    gap: 12px;
    height: auto;
    flex: 1;
  }
  .popup-top {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
  }
  .title-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  .title-area {
    gap: 4px;
  }
  .popup-title {
    font-size: 20px;
  }
  .popup-desc {
    font-size: 13px;
    line-height: 1.5;
  }
  .recs-list {
    display: none;
  }
  .popup-pagination {
    padding: 4px 0 8px;
  }
  .goal-layer-foot {
    flex-shrink: 0;
    width: 100%;
    padding: 16px;
  }
  .btn-set-goal {
    display: block;
    width: 100%;
    min-width: unset;
    padding: 16px;
    border-radius: 12px;
    font-size: 17px;
    text-align: center;
  }
}
.myclass .myclass-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 auto;
  padding: 0px 48px;
}
.myclass .myclass-content {
  display: flex;
  gap: 2rem;
}
.myclass .myclass-sidebar {
  position: sticky;
  top: 0;
  flex: 0 0 220px;
  /* flex 기본값 stretch 때문에 사이드바가 컨테이너 전체 높이로 늘어나 sticky가 동작하지 않음 → 높이를 콘텐츠만큼만 쓰도록 함 */
  align-self: flex-start;
}
.myclass .sidebar-quarter {
  position: relative;
  font-size: 34px;
  color: #000;
}
.myclass {
  /* CSS 삼각형: 채움 #FFA149, 아웃라인 #fff 0.4, 중심 정렬 */
}
.myclass .ico-quarter-triangle {
  position: absolute;
  top: calc(50% - 8px);
  left: 0;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-left: 14px solid #FFA149;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  /* 아웃라인: 채움보다 2px 크게, 채움과 중심 일치 */
}
.myclass .ico-quarter-triangle::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: -16px;
  top: calc(50% - 12px);
  border-left: 20px solid rgba(255, 255, 255, 0.4);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  z-index: -1;
}
.myclass .sidebar-goal-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #eee;
}
.myclass .sidebar-goal-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}
.myclass .sidebar-goal-item:last-child {
  border-bottom: none;
}
.myclass .sidebar-goal-item:not(.is-active) {
  opacity: 0.75;
}
.myclass .sidebar-goal-item:not(.is-active) .sidebar-goal-title,
.myclass .sidebar-goal-item:not(.is-active) .sidebar-goal-desc {
  color: var(--text-secondary, #666);
}
.myclass .sidebar-goal-item:not(.is-active) .sidebar-goal-icon img {
  opacity: 0.8;
}
.myclass .sidebar-goal-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid #eee;
}
.myclass .sidebar-goal-icon {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
}
.myclass .sidebar-goal-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.myclass .sidebar-goal-icon .badge-text {
  position: absolute;
  top: calc(50% - 8px);
  left: 50%;
  width: auto;
  height: auto;
  font-size: 12px;
  font-weight: 900;
  color: #9F6400;
  translate: -50% -50%;
}
.myclass .sidebar-goal-title {
  font-size: 18px;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
  font-weight: 700;
}
.myclass .sidebar-goal-desc {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 1rem;
}
@media only screen and (min-width: 1024px) {
  .myclass .btn-reset-goal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 18px;
    font-weight: 700;
    height: 50px;
    width: 166px;
    border-radius: 8px;
    color: var(--text-primary);
    background: radial-gradient(117.51% 77.94% at 48.87% 100%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 24.58%, rgba(255, 255, 255, 0) 100%), #FFCF70;
    background-blend-mode: screen, normal;
    box-shadow: 0 -3.59px 3.59px 0 rgba(225, 141, 54, 0.5) inset, 3.59px 3.59px 10.769px -3.59px rgba(220, 196, 172, 0.85);
    cursor: pointer;
    padding: 0;
    margin-top: 44px;
  }
}
.myclass .btn-reset-goal .ico-arrow-back {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/img/ico/ico_arrow_back.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.myclass .myclass-main {
  flex: 1;
  min-width: 0;
}
.myclass .rank-change {
  font-size: 0.9em;
  color: #666;
  font-weight: normal;
}
.myclass {
  /* 사이드바 레이아웃 (myclass_03~05) 전용: 상단바와 다른 스타일 */
}
.myclass .myclass-sidebar .user-rank-area {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #333;
}
.myclass .myclass-sidebar .user-rank-area .ico-trophy {
  width: 32px;
  height: 32px;
  mix-blend-mode: multiply;
  background: url("/img/myclass/ico_trophy.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.myclass .myclass-sidebar .user-rank-area em {
  font-style: normal;
  font-weight: 700;
}
.myclass .myclass-sidebar .btn-rank-toggle {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.myclass .myclass-sidebar .ico-chevron-down {
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: rotate(-45deg);
  margin-top: -4px;
}
.myclass .intro-greeting {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.35rem;
}
.myclass .intro-goal-name {
  color: #163535;
}
.myclass .intro-desc {
  font-size: 1rem;
  color: #333;
  margin: 0;
}
.myclass .intro-desc--dday {
  color: #E86B2E;
}
.myclass .intro-dday {
  font-weight: 700;
}
.myclass .btn-next-growth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  gap: 4px;
  font-size: 18px;
  font-weight: 700;
  width: 200px;
  height: 50px;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 8px;
  background: radial-gradient(117.51% 77.94% at 48.87% 100%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 24.58%, rgba(255, 255, 255, 0) 100%), #FFCF70;
  background-blend-mode: screen, normal;
  box-shadow: 0 -3.59px 3.59px 0 rgba(225, 141, 54, 0.5) inset, 3.59px 3.59px 10.769px -3.59px rgba(220, 196, 172, 0.85);
}
.myclass .btn-next-growth:hover {
  text-decoration: underline;
}

body.layer-open {
  overflow: hidden;
}

html:has(body .myclass-page),
body:has(.myclass-page) {
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
}

.wrap.myclass-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.myclass-page {
  /* JS에서 스크롤 시간의 ~62%로 덮어씀 — 스크롤보다 먼저 끝나 한 박자 늦는 느낌 완화 */
  --myclass-page-title-dur: 640ms;
  /* 후반 구간 빠르게 마감(스크롤과 박 맞춤) */
  --myclass-page-title-ease: cubic-bezier(0.33, 0.92, 0.28, 1);
}
.myclass-page .container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.myclass-page .myclass-wrap {
  position: relative; /* quarter-nav absolute 기준점 */
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.myclass-page {
  /* 컨텐츠 영역: PC는 가로(메인), 높이 제한으로 세로 스크롤 없음 */
}
.myclass-page .myclass-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
.myclass-page {
  /* mainEl: 내부 스크롤 컨테이너 + CSS snap */
  /* position: relative → scroll-timeline absolute 기준점 */
}
.myclass-page .myclass-main {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: scroll;
  overscroll-behavior: none;
  will-change: scroll-position;
  /* JS rAF 스크롤과 겹치면 브라우저 smooth·스냅 보정이 끝머리에서 어긋남 */
  scroll-behavior: auto;
  scroll-snap-type: y mandatory;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.myclass-page .myclass-main::-webkit-scrollbar {
  display: none;
}
.myclass-page .myclass-main {
  /* 분기 이동 애니 구간: mandatory 스냅 잠시 해제 → rAF 스크롤과 스냅이 싸우며 잔상·떨림 완화 */
}
.myclass-page .myclass-main.is-locked-scroll {
  scroll-snap-type: none;
}
.myclass-page {
  /* ── 섹션 그룹: 사이드바 + 책장 묶음 ── */
}
.myclass-page .scroll-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  scroll-snap-align: start;
  /* 높이는 JS에서 동적 설정 */
}
.myclass-page .scroll-section-sidebar {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  padding: 24px 24px 24px 40px;
  box-sizing: border-box;
}
.myclass-page .scroll-section-content {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.myclass-page {
  /* scroll-section 내부 bookshelf-section (desktop 전용)
     모바일 세부 레이아웃은 _myclass-bookshelf-books.scss에서 관리 */
}
@media (min-width: 1025px) {
  .myclass-page .scroll-section .bookshelf-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 20px 0;
    box-sizing: border-box;
  }
  .myclass-page .scroll-section .bookshelf-section .bookshelf {
    margin: 0 auto;
    width: 100%;
  }
}
.myclass-page {
  /* ── 섹션 reveal: translateY/transition 제거
     스냅 스크롤(.myclass-main) + 섹션 단위 transform·transition은
     브라우저 합성 시 잔상·번쩍임을 유발하기 쉬움. is-visible은 JS IO 호환용으로 유지. ── */
}
.myclass-page .scroll-section-reveal {
  transform: none;
  transition: none;
}
.myclass-page .scroll-section-reveal.is-visible {
  transform: none;
}
.myclass-page {
  /* ── 수직 타임라인 (myclass-main 스크롤 콘텐츠 기준 absolute) ── */
}
.myclass-page .scroll-timeline {
  position: absolute;
  width: 28px;
  z-index: 2;
  pointer-events: none;
  /* top / left / height는 JS에서 동적으로 설정 */
}
.myclass-page {
  /* 회색 배경 라인 + 주황 fill: 예제처럼 그라디언트 트랙 */
}
.myclass-page .timeline-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.12) 5%, rgba(0, 0, 0, 0.12) 95%, transparent 100%);
  border-radius: 1px;
  overflow: hidden;
}
.myclass-page .timeline-progress-fill {
  width: 100%;
  height: 0%;
  background: #FFA149;
  /* 스크롤 중 height transition이 한 박자 늦게 따라와 잔상처럼 보일 수 있음 */
  transition: none;
}
.myclass-page .timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 161, 73, 0.5);
  box-sizing: border-box;
  transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  z-index: 1;
}
.myclass-page .timeline-dot.is-active {
  background: #FFA149;
  border-color: #FFA149;
  transform: translateX(-50%) scale(1.35);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4), 0 0 16px rgba(255, 255, 255, 0.4);
}
.myclass-page .timeline-dot {
  /* .sidebar-quarter 없는 섹션: 삼각형 아이콘으로 표시 */
}
.myclass-page .timeline-dot.timeline-dot--triangle {
  width: auto;
  height: auto;
  border: none;
  background: none;
  border-radius: 0;
}
.myclass-page .timeline-dot.timeline-dot--triangle .ico-quarter-triangle {
  display: block;
  opacity: 0.35;
  transition: opacity 0.3s, transform 0.3s;
}
.myclass-page .timeline-dot.timeline-dot--triangle.is-active {
  background: none;
  border: none;
  box-shadow: none;
  transform: translateX(-50%);
}
.myclass-page .timeline-dot.timeline-dot--triangle.is-active .ico-quarter-triangle {
  opacity: 1;
}
.myclass-page {
  /* 분기 셀렉트는 모바일 전용 */
}
.myclass-page .quarter-select-wrap {
  display: none;
}
.myclass-page {
  /* ── 오른쪽 분기 네비게이션: myclass-wrap 기준 absolute 우측 고정 ── */
}
.myclass-page .quarter-nav {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 0 20px 0 12px;
}
.myclass-page {
  /* 회색 배경 라인 + 주황 fill (JS로 top/left/height 설정) */
}
.myclass-page .quarter-nav-track {
  position: absolute;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.12);
  border-radius: 1px;
  overflow: hidden;
  pointer-events: none;
}
.myclass-page .quarter-nav-fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, #FFA149, #FF7A00);
  transition: none;
}
.myclass-page .quarter-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
  color: rgba(0, 0, 0, 0.3);
  transition: color 0.2s;
}
.myclass-page .quarter-nav-item:hover {
  color: rgba(0, 0, 0, 0.6);
}
.myclass-page .quarter-nav-item.is-active .quarter-nav-dot {
  position: relative;
  background: #f5651d;
  border-color: #f5651d;
  box-shadow: 0 0 0 3px rgba(246, 107, 37, 0.1);
}
.myclass-page .quarter-nav-item.is-active .quarter-nav-label {
  font-weight: 700;
  color: #f5651d;
}
.myclass-page .quarter-nav-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(162, 148, 121, 0.2);
  box-sizing: border-box;
  background: #A29479;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.myclass-page .quarter-nav-label {
  font-size: 12px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #A29479;
}
.myclass-page {
  /* ── PC: 1→2 이동 시 인트로 페이드와 스크롤 동시 실행 ── */
}
@media (min-width: 1025px) {
  .myclass-page.intro-hidden .page-intro:not(.page-intro-mobile) {
    display: none;
  }
}
.myclass-page {
  /* 모바일·태블릿: 기존처럼 인트로 통째 숨김 */
}
@media (max-width: 1024px) {
  .myclass-page.intro-hidden .page-intro {
    display: none;
  }
}

@media (max-width: 1024px) {
  /* 모바일 주소창/툴바 변화로 100vh가 흔들리는 이슈 대응 */
  .wrap.myclass-page {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
  }
  /* 공용(모바일): 상단바 좌측 영역 숨김 */
  .myclass .myclass-top-bar .top-bar-left {
    display: none;
  }
  .myclass-page {
    /* Figma MO: 상단 헤더 영역 그라디언트 배경 */
  }
  .myclass-page .container {
    padding-left: 0;
    padding-right: 0;
  }
  .myclass-page .myclass-wrap {
    padding: 0 0 4px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto auto 1fr;
  }
  .myclass-page .myclass-wrap::after {
    display: none;
  }
  .myclass-page {
    /* 상단바: 모바일에서는 좌측 순위 숨기고 인트로만 */
  }
  .myclass-page .myclass-top-bar {
    position: relative;
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0;
    padding: 0 16px;
  }
  .myclass-page .top-bar-left {
    display: none;
  }
  .myclass-page .page-intro {
    text-align: center;
    padding: 24px 0 16px;
    margin-top: 0;
  }
  .myclass-page .page-title h3 {
    display: none;
  }
  .myclass-page .page-title p {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: #3a200d;
    letter-spacing: -0.02em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .myclass-page .page-title .intro-dday {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #f5651d;
    letter-spacing: -1px;
  }
  .myclass-page .btn-next-growth {
    font-size: 16px;
    height: 40px;
  }
  .myclass-page {
    /* 컨텐츠: flex로 남은 높이만 사용, 세로 스크롤 없음 */
  }
  .myclass-page .myclass-content {
    flex: 1;
    min-height: 0;
    margin-top: 0;
  }
  .myclass-page {
    /* 메인: 가로 스크롤 컨테이너 (섹션 간 좌우 스와이프) */
  }
  .myclass-page .myclass-main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    scroll-padding-inline: 0;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    max-width: 100vw;
  }
  .myclass-page .myclass-main::-webkit-scrollbar {
    display: none;
  }
  .myclass-page {
    /* 모바일에서 04와 동일하게: 첫 번째 섹션만 표시, 가로 스와이프 숨김 */
  }
  .myclass-page .myclass-page.mobile-single-section .myclass-main {
    overflow-x: hidden;
    scroll-snap-type: none;
  }
  .myclass-page .myclass-page.mobile-single-section .scroll-section:not(:first-child) {
    display: none !important;
  }
  .myclass-page .scroll-timeline {
    display: none !important;
  }
  .myclass-page {
    /* 모바일: 섹션 reveal 애니메이션 비활성 (가로 스와이프 시 즉시 표시) */
  }
  .myclass-page .scroll-section-reveal {
    transform: none;
  }
  .myclass-page {
    /* 모바일 분기 셀렉트 */
  }
  .myclass-page .quarter-select-wrap {
    display: flex;
    justify-content: center;
    padding: 10px 0px 0;
    flex-shrink: 0;
  }
  .myclass-page .quarter-select-wrap .quarter-select {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    width: 100%;
    max-width: 320px;
    height: 40px;
    padding: 0 36px 0 16px;
    border: 1.5px solid #e0d5cb;
    border-radius: 20px;
    background-color: #ece0ca;
    background-image: url("/img/ico/ico_chevron.svg");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    font-size: 15px;
    font-weight: 600;
    color: #5d4a3d;
    cursor: pointer;
    outline: none;
  }
  .myclass-page .quarter-select-wrap .quarter-select:focus {
    border-color: #FFA149;
  }
  .myclass-page {
    /* 모바일 quarter-nav: page-intro-mobile 아래 인라인 배치 */
  }
  .myclass-page .quarter-nav {
    position: relative;
    transform: none;
    align-self: center;
    flex-shrink: 0;
    margin: 6px auto 4px;
    height: 10px;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .myclass-page .quarter-nav-track {
    display: block;
    position: absolute;
    height: 1px;
    width: 0; /* JS에서 설정 */
    transform: none;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 1px;
    overflow: hidden;
    pointer-events: none;
  }
  .myclass-page .quarter-nav-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #FFA149, #FF7A00);
    transition: none;
  }
  .myclass-page .quarter-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .myclass-page .quarter-nav-item .quarter-nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ccc;
    border: 1.5px solid #bbb;
    box-shadow: none;
    transition: background 0.2s, transform 0.2s;
  }
  .myclass-page .quarter-nav-item .quarter-nav-label {
    font-size: 10px;
    color: #999;
    font-weight: 400;
    white-space: nowrap;
    display: none;
  }
  .myclass-page .quarter-nav-item.is-active .quarter-nav-dot {
    background: #f5651d;
    border-color: #f5651d;
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(245, 101, 29, 0.15);
  }
  .myclass-page .quarter-nav-item.is-active .quarter-nav-label {
    color: #f5651d;
    font-weight: 700;
  }
  .myclass-page {
    /* 섹션: 가로 스와이프 카드 (100% 너비), 모바일에서 콘텐츠 하단 정렬 */
  }
  .myclass-page .scroll-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    flex-shrink: 0;
    min-width: 100%;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y; /* 가로 스와이프와 세로 내부 스크롤 모두 허용 */
    padding: 0 24px;
    box-sizing: border-box;
    scrollbar-width: none;
  }
  .myclass-page .scroll-section::-webkit-scrollbar {
    display: none;
  }
  .myclass-page .scroll-section-sidebar {
    flex: none;
    width: 100%;
    padding: 0 0 16px;
    margin-top: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    margin: auto;
  }
  .myclass-page .sidebar-quarter {
    display: none;
  }
  .myclass-page .sidebar-goal-item {
    display: contents;
  }
  .myclass-page .sidebar-goal-icon,
  .myclass-page .sidebar-goal-desc {
    display: none;
  }
  .myclass-page .sidebar-goal-title {
    display: block !important;
    order: 1;
    width: 100%;
    flex-basis: 100%;
    margin: 8px 0 6px;
    padding: 0;
    font-size: 22px;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.66px;
    line-height: 1.4;
    text-align: left;
  }
  .myclass-page .btn-reset-goal {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 700;
    color: #4a4040;
    letter-spacing: -0.26px;
    opacity: 0.54;
    cursor: pointer;
  }
  .myclass-page .btn-reset-goal .ico-arrow-back {
    width: 19px;
    height: 19px;
    background: url("/img/ico/ico_arrow_back.svg") center/contain no-repeat;
  }
  .myclass-page .scroll-section-content {
    height: auto;
    padding: 0;
    max-width: 380px;
    margin: auto;
    justify-content: flex-end;
  }
}
.learning-guide-layer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(36, 36, 36, 0.8);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.learning-guide-layer.is-open {
  display: flex;
}
.learning-guide-layer.hidden:not(.is-open) {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .learning-guide-layer {
    padding: 24px;
  }
}

.learning-guide-content {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
  width: 100%;
  height: calc(var(--window-inner-height, 100vh) * 0.95);
  max-height: calc(var(--window-inner-height, 100vh) * 0.95);
  min-height: 0;
  overflow: hidden;
  gap: 0px;
}
@media only screen and (min-width: 1024px) {
  .learning-guide-content {
    max-width: 1100px;
    gap: 0px;
  }
}
@media only screen and (max-width: 1023px) {
  .learning-guide-content {
    max-width: calc(100vw - 32px);
  }
}

.learning-guide-header {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  flex-shrink: 0;
}
.learning-guide-header .btn-close-layer {
  position: relative;
  z-index: 10;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.learning-guide-header .btn-close-layer::before, .learning-guide-header .btn-close-layer::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.learning-guide-header .btn-close-layer::before {
  transform: rotate(45deg);
}
.learning-guide-header .btn-close-layer::after {
  transform: rotate(-45deg);
}

.learning-guide-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border-radius: 4px;
}

.learning-guide-tabs {
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid #eeece7;
  padding-top: 2px;
}
.learning-guide-tabs::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #d4d4d7;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
@media only screen and (max-width: 1023px) {
  .learning-guide-tabs::before {
    height: 36px;
  }
}

.learning-guide-tab-swiper {
  width: 100%;
  overflow: hidden;
}
.learning-guide-tab-swiper .swiper-wrapper {
  width: 100%;
  align-items: flex-end;
}
.learning-guide-tab-swiper .swiper-slide {
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  min-width: 78px;
}
.learning-guide-tab-swiper.is-tab-even .swiper-slide {
  flex: 1 0 78px;
  width: auto;
}
.learning-guide-tab-swiper.is-tab-scroll .swiper-slide {
  flex: 0 0 auto;
  width: auto;
}
@media only screen and (min-width: 1024px) {
  .learning-guide-tab-swiper {
    height: 54px;
  }
  .learning-guide-tab-swiper .swiper-wrapper,
  .learning-guide-tab-swiper .swiper-slide {
    height: 54px;
  }
  .learning-guide-tab-swiper .swiper-slide {
    min-width: 78px;
  }
}
@media only screen and (max-width: 1023px) {
  .learning-guide-tab-swiper {
    height: 40px;
  }
  .learning-guide-tab-swiper .swiper-wrapper,
  .learning-guide-tab-swiper .swiper-slide {
    height: 40px;
  }
  .learning-guide-tab-swiper .swiper-slide {
    min-width: 78px;
  }
}

.learning-guide-tab {
  width: 100%;
  flex-shrink: 0;
  border: 0;
  background: #f5f5f5;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 400;
  letter-spacing: -0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
@media only screen and (min-width: 1024px) {
  .learning-guide-tab {
    flex: 1 0 auto;
    height: 48px;
    min-width: 78px;
    padding: 0 8px;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
  .learning-guide-tab:not(.is-active) {
    margin-top: 6px;
  }
}
@media only screen and (max-width: 1023px) {
  .learning-guide-tab {
    flex: 1 0 auto;
    height: 34px;
    min-width: 78px;
    padding: 0 14px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
  .learning-guide-tab:not(.is-active) {
    margin-top: 6px;
  }
}
.learning-guide-tab:not(.is-disabled):not(.is-active):hover {
  background: #e4e4e4;
}
.learning-guide-tab.is-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30.65%, rgba(255, 255, 255, 0.2) 93.55%), #FF6400;
  color: #fff;
  font-weight: 700;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.1019607843);
  paint-order: stroke fill;
  box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.4) inset;
  height: 54px;
}
@media only screen and (max-width: 1023px) {
  .learning-guide-tab.is-active {
    height: 40px;
  }
}
.learning-guide-tab.is-disabled, .learning-guide-tab:disabled {
  color: rgba(0, 0, 0, 0.35);
  cursor: not-allowed;
  pointer-events: none;
}

.learning-guide-viewer {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #525659;
}
.learning-guide-viewer iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}