.login-wrap {
  display: flex;
  padding: 120px 0 0;
  height: 100vh;
  justify-content: center;
  align-items: flex-start;
  background: url("../img/bg_login.jpg") no-repeat center;
  background-size: cover;
}

.login-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1180px;
  min-height: 509px;
}
.login-container .logo {
  margin-top: 40px;
}

/* 왼쪽 설명 영역 */
.content-section {
  color: #333;
  flex: 1;
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 114px;
  height: 78px;
  color: transparent;
  font-weight: bold;
  margin-bottom: 20px;
  background: url("../img/logo.png") no-repeat center;
}

.content-section h1 {
  font-size: 3.6rem;
  margin-bottom: 20px;
  font-weight: bold;
  color: #222;
}

.content-section .description {
  line-height: 1.6;
  margin-bottom: 30px;
  font-size: 1.9rem;
  color: var(--blk);
}

.info-btn {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  color: var(--blk);
  border: 1px solid var(--blk);
  border-radius: 8px;
  cursor: pointer;
  gap: 8px;
  background: rgba(255, 255, 255, 1);
}
.info-btn .info-icon svg {
  width: 20px;
  height: 20px;
}

/* 오른쪽 로그인 박스 영역 */
.login-section {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.login-box {
  background: white;
  padding: 55px;
  border-radius: 15px;
  width: 510px;
}

.login-box h2 {
  font-size: 2.4rem;
  margin-bottom: 30px;
  color: var(--blk);
}

.login-input-group {
  position: relative;
  margin-bottom: 16px;
}

.login-input-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 0;
  font-size: 0;
  color: transparent;
}

.login-input-group input {
  width: 100%;
  padding: 17px 45px 17px 15px;
  font-size: 1.7rem;
  border: 1px solid var(--gry60);
  border-radius: 8px;
  background: #fcfcfc;
}
.login-input-group .form-hint {
  display: none;
  margin-top: 5px;
  font-size: 1.5rem;
  color: var(--gry60);
}
.login-input-group .form-hint.is-error {
  display: block;
  padding-left: 18px;
  color: var(--point60);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: left 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.41 9.41'%3E%3Cg fill= 'none' stroke= '%23c23e0a' stroke-linejoin= 'round' stroke-width= '1.6px'%3E%3Cline x1='.57' y1='.57' x2='8.85' y2='8.85'/%3E%3Cline x1='.57' y1='8.85' x2='8.85' y2='.57'/%3E%3C/g%3E%3C/svg%3E");
}
.login-input-group:has(.form-hint.is-error) input {
  border-color: var(--point50);
  border-width: 2px;
}
/* .login-input-group input[type="password"] {
  background-image: url("../img/ico_password.png");
  background-repeat: no-repeat;
  background-position: 95% center;
  background-size: 20px 15px;
} */
.login-input-group input[type="password"] + .ctl-password {
  position: absolute;
  top: 12px;
  right: 5px;
  width: 32px;
  height: 33px;
  border-radius: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.89 17.68'%3E%3Cg fill='none' stroke='%231e2124' stroke-linejoin='round' stroke-width='1.6px'%3E%3Cpath class='cls-1' d='m9.95,2.38c6.57,0,9.15,6.46,9.15,6.46,0,0-2.58,6.46-9.15,6.46S.8,8.84.8,8.84c0,0,2.58-6.46,9.15-6.46Z'/%3E%3Ccircle class='cls-1' cx='9.95' cy='8.84' r='3.23'/%3E%3Cline class='cls-1' x1='18.22' y1='.57' x2='1.67' y2='17.11'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 20px auto;
  background-position: center;
}
.login-input-group input[type="text"] + .ctl-password {
  position: absolute;
  top: 12px;
  right: 5px;
  width: 32px;
  height: 33px;
  border-radius: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.89 14.51'%3E%3Cg fill='none' stroke='%231e2124' stroke-linejoin='round' stroke-width='1.6px'%3E%3Cpath d='m9.95.8c6.57,0,9.15,6.46,9.15,6.46,0,0-2.58,6.46-9.15,6.46S.8,7.26.8,7.26C.8,7.26,3.38.8,9.95.8Z'/%3E%3Ccircle cx='9.95' cy='7.26' r='3.23'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 20px auto;
  background-position: center;
}
.login-input-group .ctl-password:hover {
  background-color: var(--gry10);
}

.login-section .btn {
  margin: 24px 0 20px;
  width: 100%;
  color: var(--wht);
  cursor: pointer;
  background: var(--primary50);
}

.login-options {
  display: flex;
  justify-content: space-between;
  font-size: 1.7rem;
  color: #666;
  margin-bottom: 20px;
}

.find-links a {
  text-decoration: none;
  color: #666;
}

.signup-footer {
  padding: 20px 0 0;
  border-top: 1px solid #d1d5d8;
  text-align: left;
  font-size: 1.7rem;
  color: #444;
}

.signup-footer a {
  position: relative;
  display: inline-flex;
  margin-left: 7px;
  color: var(--primary60);
  font-weight: bold;
  text-decoration: none;
}
.signup-footer a span svg {
  margin: 3px 0 0 9px;
  width: 16px;
  height: 16px;
}
.signup-footer a::after {
  display: block;
  position: absolute;
  bottom: 5px;
  left: 0;
  content: "";
  width: calc(100% - 26px);
  height: 2px;
  background-color: var(--primary60);
}

/* ==========================================================
   ★ index 페이지 — 메인 슬라이드 / 카드 / 패널 / 드로어
   ========================================================== */

/* ---------- 섹션 / 카드 ---------- */
.section {
  margin-bottom: 62px;
  position: relative;
}
.section-header {
  margin-bottom: 18px;
}
.section-title {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--gry90);
}

.thumb {
  position: relative;
  display: block;
  height: 170px;
  padding: 14px;
  color: #fff;
  overflow: hidden;
  border-radius: 12px;
  transition: border-radius 0.2s ease;
}
.card-expand:hover .thumb,
.card-expand:focus-within .thumb {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* 뱃지/제목 묶음 — 그라데이션과 이미지 위로 노출 */
.card-top {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  font-size: 19px;
  font-weight: bold;
  z-index: 2;
}
.card-top .badge {
  margin-right: 10px;
}
.thumb-bar {
  position: absolute;
  left: 7px;
  right: 0;
  bottom: 8px;
  display: block;
  width: calc(100% - 14px);
  height: 5px;
  border-radius: 4px;
  background: rgba(205, 209, 213, 0.2);
  z-index: 2;
  transition:
    height 0.25s ease,
    bottom 0.25s ease;
}
.thumb-bar i {
  display: block;
  height: 100%;
  background: var(--point50);
  border-radius: 4px;
}
.head-tit {
  margin-top: 15px;
  letter-spacing: -0.04rem;
}
.head-tit small {
  font-size: 1.9rem;
  font-weight: 400;
}
.head-tit ~ .head-tit {
  margin-top: 60px;
}
/* 나의 농장 */
.profile-box {
  position: relative;
}
.profile-box .top-btn {
  position: absolute;
  top: 0;
  right: 0;
}
.pic-animal {
  display: flex;
  justify-content: center;
  margin: 15px 0 55px;
  padding: 30px;
  border-radius: 16px;
  background-color: var(--gry5);
}
.pic-animal .avatar-grid {
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}
.farm-scene-wrap {
  width: 100%;
}
@media (max-width: 1024px) {
  .pic-animal .avatar-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
  }
}
@media (max-width: 767px) {
  .pic-animal .avatar-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .farm-scene-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .head-tit {
    margin-top: 19px;
    font-size: 2rem;
  }
  .top-btn .btn {
    height: 40px;
  }
  .pic-animal {
    margin-bottom: 32px;
  }
}

/* 가로 스크롤 안내 */
.scroll-info {
  display: none; /* JS가 767px 이하에서만 표시 */
  position: fixed;
  z-index: 200;
  left: 50%;
  transform: translateX(-50%);
  /* top은 JS에서 farm-scene 세로 중앙에 맞춰 설정 */
  padding: 10px 22px;
  background: rgba(0, 0, 0, 0.52);
  border-radius: 40px;
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1;
  transition: opacity 0.25s;
}
.scroll-info.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.scroll-info-icon {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  font-size: 1.5rem;
  line-height: 1;
}
.scroll-info-txt {
  vertical-align: middle;
}
.farm-scene {
  position: relative;
  margin-top: 13px;
  overflow: hidden;
}
.farm-scene-inner {
  position: absolute; /* 레이아웃 흐름에서 제외 → 페이지 가로 스크롤 방지 */
  top: 0;
  left: 0;
  width: 1762px;
  height: 900px;
  transform-origin: top left;
}
.farm-scene .farm-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: url("../img/active/bg_farm.jpg") no-repeat center;
  background-size: cover;
}
.farm-scene li {
  position: absolute;
  color: transparent;
  font-size: 0;
}
.farm-scene li.dog {
  top: 454px;
  left: 495px;
  width: 165px;
  height: 168px;
  background: url("../img/active/bg_dog.png") no-repeat center top;
}
.farm-scene li.cat {
  top: 338px;
  left: 248px;
  width: 111px;
  height: 132px;
  background: url("../img/active/bg_cat.png") no-repeat center top;
}
.farm-scene li.frog {
  top: 680px;
  left: 1240px;
  width: 102px;
  height: 103px;
  background: url("../img/active/bg_frog.png") no-repeat center top;
}
.farm-scene li.duck {
  top: 745px;
  left: 1426px;
  width: 139px;
  height: 107px;
  background: url("../img/active/bg_duck.png") no-repeat center top;
}
.farm-scene li.cow {
  top: 213px;
  left: 998px;
  width: 232px;
  height: 183px;
  background: url("../img/active/bg_cow.png") no-repeat center top;
}
.farm-scene li.pig {
  top: 636px;
  left: 125px;
  width: 195px;
  height: 127px;
  background: url("../img/active/bg_pig.png") no-repeat center top;
}
.farm-scene li.cork {
  top: 689px;
  left: 687px;
  width: 114px;
  height: 152px;
  background: url("../img/active/bg_cork.png") no-repeat center top;
}
.farm-scene li.chick {
  top: 705px;
  left: 848px;
  width: 95px;
  height: 99px;
  background: url("../img/active/bg_chick.png") no-repeat center top;
}
.farm-scene li.rabbit {
  top: 374px;
  left: 926px;
  width: 90px;
  height: 156px;
  background: url("../img/active/bg_rabbit.png") no-repeat center top;
}
.farm-scene li.sheep {
  top: 458px;
  left: 1247px;
  width: 184px;
  height: 149px;
  background: url("../img/active/bg_sheep.png") no-repeat center top;
}
.farm-scene li.horse {
  top: 99px;
  left: 794px;
  width: 161px;
  height: 212px;
  background: url("../img/active/bg_horse.png") no-repeat center top;
}
.farm-scene li.goat {
  top: 142px;
  left: 1464px;
  width: 149px;
  height: 205px;
  background: url("../img/active/bg_goat.png") no-repeat center top;
}
.farm-scene li.is-acquired {
  background-position: center bottom !important;
}
.farm-scene li .goal-box {
  position: absolute;
  bottom: -13px;
  left: 50%;
  padding: 2px 6px;
  width: auto;
  font-size: 1.7rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--gry90);
  border-radius: 4px;
  background-color: var(--wht);
  transform: translateX(-50%);
}
.farm-scene li.is-acquired .goal-box {
  display: none;
}
.farm-scene li.is-acquired:hover .goal-box {
  display: block;
}

/* ---------- 재사용 팝업/툴팁 (.tip) ---------- */
.tip {
  position: absolute;
  z-index: 50;
  width: 290px;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.tip.is-open {
  opacity: 1;
  pointer-events: auto;
}
.tip-thumb {
  position: relative;
  height: 140px;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.tip-thumb.green {
  background: linear-gradient(135deg, #c8e89c 0%, #9bcb6a 100%);
  color: #2c4d12;
}
.tip-thumb.orange {
  background: linear-gradient(135deg, #ffd9a1 0%, #f7a55e 100%);
  color: #6e3a07;
}
.tip-thumb.blue {
  background: linear-gradient(135deg, #b9d5fb 0%, #6ea4ee 100%);
  color: #15356d;
}
.tip-thumb.purple {
  background: linear-gradient(135deg, #d9d0fb 0%, #9f8be3 100%);
  color: #2e1d6d;
}
.tip-meta {
  font-size: 1.3rem;
  color: #555;
  margin-bottom: 4px;
}
.tip-meta strong {
  color: var(--gry90);
  font-weight: 700;
}
.tip-meta span {
  margin: 0 6px;
  color: #ccc;
}
.tip-recent {
  font-size: 1.3rem;
  color: #555;
  margin-bottom: 14px;
}
.tip-recent strong {
  color: var(--gry90);
  font-weight: 700;
  margin-left: 4px;
}
.tip-recent span {
  color: #f7a55e;
  font-weight: 700;
  margin-right: 4px;
}
.tip-btns {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.bottom-notice {
  margin-top: 80px;
}
.panel {
  padding: 30px 40px 28px;
  width: 100%;
  border: 1px solid var(--gry20);
  border-radius: 12px;
  background: var(--wht);
  box-sizing: border-box;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.bottom-notice .notice-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.bottom-notice .panel-title {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--gry90);
  margin-bottom: 16px;
}
.bottom-notice .panel-head .panel-title {
  margin-bottom: 0;
}
.bottom-notice .panel-more {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 7px;
  height: 32px;
  line-height: 32px;
  font-size: 1.7rem;
  color: var(--gry90);
  border-radius: 6px;
  text-decoration: none;
}
.bottom-notice .panel-more span {
  display: inline-flex;
  width: 14px;
  height: auto;
  font-size: 0;
  color: transparent;
  background: url("../img/svg/ico_add.svg") no-repeat center;
}
.panel-more:hover,
.panel-more:focus {
  background-color: var(--gry10);
}

/* 공지사항 */
.bottom-notice .notice-list {
  list-style: none;
}
.bottom-notice .notice-item {
  padding: 5px 0;
  gap: 12px;
}
.bottom-notice .notice-item:last-child {
  border-bottom: 0;
}
.bottom-notice .notice-item > a {
  display: flex;
  flex: 1;
  justify-content: space-between;
  text-decoration: none;
  color: var(--gry90);
  font-size: 1.7rem;
  align-items: center;
  gap: 8px;
}
.bottom-notice .notice-item > a:hover {
  color: var(--primary60);
  text-decoration: underline;
}
.bottom-notice .notice-item .link-box {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.bottom-notice .notice-cate {
  flex-shrink: 0;
}
.bottom-notice .notice-date {
  font-size: 1.7rem;
  color: var(--gry70);
  flex-shrink: 0;
}

/* ==========================================================
   포커스 가시성 강화
   ========================================================== */
.btn:focus-visible,
.menu-btn:focus-visible,
.user-info:focus-visible,
.farm-info:focus-visible,
.card:focus-visible,
.hero-nav:focus-visible,
.hero-dot:focus-visible,
.hero-play:focus-visible,
.side-link:focus-visible,
.side-action:focus-visible,
.side-close:focus-visible,
.notice-item > a:focus-visible,
.quick-item:focus-visible {
  outline: 3px solid #2e5db8;
  outline-offset: 2px;
}

/* spinner animation */
.custom-spinner path {
  animation: spinner-fade 1.2s linear infinite;
  opacity: 0;
}

.custom-spinner path:nth-child(1) {
  animation-delay: 0s;
}
.custom-spinner path:nth-child(2) {
  animation-delay: 0.1s;
}
.custom-spinner path:nth-child(3) {
  animation-delay: 0.2s;
}
.custom-spinner path:nth-child(4) {
  animation-delay: 0.3s;
}
.custom-spinner path:nth-child(5) {
  animation-delay: 0.4s;
}
.custom-spinner path:nth-child(6) {
  animation-delay: 0.5s;
}
.custom-spinner path:nth-child(7) {
  animation-delay: 0.6s;
}
.custom-spinner path:nth-child(8) {
  animation-delay: 0.7s;
}
.custom-spinner path:nth-child(9) {
  animation-delay: 0.8s;
}
.custom-spinner path:nth-child(10) {
  animation-delay: 0.9s;
}
.custom-spinner path:nth-child(11) {
  animation-delay: 1s;
}
.custom-spinner path:nth-child(12) {
  animation-delay: 1.1s;
}

@keyframes spinner-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 동물 애니메이션 */
/* .animal{
    position: relative;
    display:inline-block;
    transform-origin:center bottom;
    will-change:transform;
}

.is-acquired.jump{
    animation: animalJump 1s ease-in-out infinite;
}

@keyframes animalJump{

    0%{
        transform:translateY(0) scaleX(1) scaleY(1);
    }

    10%{
        transform:translateY(0) scaleX(1.08) scaleY(0.92);
    }

    40%{
        transform:translateY(-28px) scaleX(0.94) scaleY(1.06);
    }

    55%{
        transform:translateY(-28px) scaleX(1) scaleY(1);
    }

    70%{
        transform:translateY(0) scaleX(1.04) scaleY(0.96);
    }

    100%{
        transform:translateY(0) scaleX(1) scaleY(1);
    }
}

.is-acquired.move{
    animation: animalMove 3s ease-in-out infinite alternate;
}

@keyframes animalMove{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(120px);
    }
}

.is-acquired.hop{
    animation: animalHop 1.8s ease-in-out infinite;
}

@keyframes animalHop{

    0%{
        transform:
        translate(0,0)
        rotate(0deg);
    }

    15%{
        transform:
        translate(20px,-10px)
        rotate(-5deg);
    }

    30%{
        transform:
        translate(45px,-40px)
        rotate(5deg);
    }

    45%{
        transform:
        translate(70px,0)
        rotate(0deg);
    }

    60%{
        transform:
        translate(90px,-8px)
        rotate(-4deg);
    }

    75%{
        transform:
        translate(120px,-32px)
        rotate(4deg);
    }

    100%{
        transform:
        translate(150px,0)
        rotate(0deg);
    }
}

.is-acquired.float{
    animation: animalFloat 3s ease-in-out infinite;
}

@keyframes animalFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-18px);
    }

    100%{
        transform:translateY(0);
    }
}

.is-acquired.wag{
    animation: animalWag .8s ease-in-out infinite;
}

@keyframes animalWag{

    0%{
        transform:rotate(0deg);
    }

    25%{
        transform:rotate(-3deg);
    }

    50%{
        transform:rotate(3deg);
    }

    75%{
        transform:rotate(-2deg);
    }

    100%{
        transform:rotate(0deg);
    }
}


.is-acquired.bounce{
    animation: animalBounce 1.4s cubic-bezier(.3,.7,.4,1.4) infinite;
}

@keyframes animalBounce{

    0%{
        transform:translateY(0);
    }

    30%{
        transform:translateY(-45px);
    }

    55%{
        transform:translateY(0);
    }

    70%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0);
    }
}


.is-acquired.mini-hop{
    animation: miniHop 2.2s linear infinite;
}

@keyframes miniHop{

    0%{
        transform:translateX(0) translateY(0);
    }

    10%{
        transform:translateX(15px) translateY(-12px);
    }

    20%{
        transform:translateX(30px) translateY(0);
    }

    30%{
        transform:translateX(45px) translateY(-12px);
    }

    40%{
        transform:translateX(60px) translateY(0);
    }

    50%{
        transform:translateX(75px) translateY(-12px);
    }

    60%{
        transform:translateX(90px) translateY(0);
    }

    100%{
        transform:translateX(120px) translateY(0);
    }
}

.is-acquired.run{
    animation: animalRun .5s linear infinite;
}

@keyframes animalRun{

    0%{
        transform:
        translateX(0)
        rotate(-2deg)
        scaleY(1);
    }

    25%{
        transform:
        translateX(6px)
        rotate(2deg)
        scaleY(.96);
    }

    50%{
        transform:
        translateX(0)
        rotate(-2deg)
        scaleY(1);
    }

    75%{
        transform:
        translateX(6px)
        rotate(2deg)
        scaleY(.96);
    }

    100%{
        transform:
        translateX(0)
        rotate(-2deg)
        scaleY(1);
    }
}

.is-acquired.shake{
    animation: animalShake .28s ease-in-out infinite;
}

@keyframes animalShake{

    0%{
        transform:rotate(0deg);
    }

    20%{
        transform:rotate(-6deg);
    }

    40%{
        transform:rotate(6deg);
    }

    60%{
        transform:rotate(-5deg);
    }

    80%{
        transform:rotate(5deg);
    }

    100%{
        transform:rotate(0deg);
    }
}


.is-acquired.sleep{
    animation: animalSleep 3s ease-in-out infinite;
}

@keyframes animalSleep{

    0%{
        transform:
        translateY(0)
        scaleY(1);
    }

    25%{
        transform:
        translateY(2px)
        scaleY(.98);
    }

    50%{
        transform:
        translateY(6px)
        scaleY(.95);
    }

    75%{
        transform:
        translateY(2px)
        scaleY(.98);
    }

    100%{
        transform:
        translateY(0)
        scaleY(1);
    }
}

.is-acquired.fly{
    animation: animalFly 2s ease-in-out infinite;
}

@keyframes animalFly{

    0%{
        transform:
        translate(0,0)
        rotate(0deg);
    }

    25%{
        transform:
        translate(25px,-18px)
        rotate(-4deg);
    }

    50%{
        transform:
        translate(50px,0)
        rotate(0deg);
    }

    75%{
        transform:
        translate(75px,-15px)
        rotate(4deg);
    }

    100%{
        transform:
        translate(100px,0)
        rotate(0deg);
    }
}

.is-acquired.swim{
    animation: animalSwim 4s ease-in-out infinite;
}

@keyframes animalSwim{

    0%{
        transform:
        translateX(0)
        translateY(0)
        rotate(0deg);
    }

    20%{
        transform:
        translateX(-10px)
        translateY(-8px)
        rotate(2deg);
    }

    40%{
        transform:
        translateX(-15px)
        translateY(4px)
        rotate(-2deg);
    }

    60%{
        transform:
        translateX(-20px)
        translateY(-6px)
        rotate(2deg);
    }

    80%{
        transform:
        translateX(-30px)
        translateY(4px)
        rotate(-2deg);
    }

    100%{
        transform:
        translateX(-10px)
        translateY(0)
        rotate(0deg);
    }
}


.is-acquired.crawl{
    animation: animalCrawl 4s linear infinite;
}

@keyframes animalCrawl{

    0%{
        transform:
        translateX(0)
        translateY(0);
    }

    10%{
        transform:
        translateX(10px)
        translateY(2px);
    }

    20%{
        transform:
        translateX(20px)
        translateY(0);
    }

    30%{
        transform:
        translateX(30px)
        translateY(2px);
    }

    40%{
        transform:
        translateX(40px)
        translateY(0);
    }

    50%{
        transform:
        translateX(50px)
        translateY(2px);
    }

    100%{
        transform:
        translateX(100px)
        translateY(0);
    }
}

.is-acquired.panic{
    animation: animalPanic .18s linear infinite;
}

@keyframes animalPanic{

    0%{
        transform:
        translate(0,0)
        rotate(0deg);
    }

    20%{
        transform:
        translate(-4px,-2px)
        rotate(-3deg);
    }

    40%{
        transform:
        translate(4px,2px)
        rotate(3deg);
    }

    60%{
        transform:
        translate(-3px,1px)
        rotate(-2deg);
    }

    80%{
        transform:
        translate(3px,-1px)
        rotate(2deg);
    }

    100%{
        transform:
        translate(0,0)
        rotate(0deg);
    }
}


.is-acquired.eat{
    animation: animalEat 1.1s ease-in-out infinite;
    transform-origin:center center;
}

@keyframes animalEat{

    0%{
        transform:
        scaleY(1)
        rotate(0deg);
    }

    15%{
        transform:
        scaleY(.92)
        rotate(-2deg);
    }

    30%{
        transform:
        scaleY(1)
        rotate(2deg);
    }

    45%{
        transform:
        scaleY(.92)
        rotate(-2deg);
    }

    60%{
        transform:
        scaleY(1)
        rotate(2deg);
    }

    100%{
        transform:
        scaleY(1)
        rotate(0deg);
    }
} */

/* ==========================================================
   학습창 팝업 (Learning Popup)
   ========================================================== */
.popup-window * {
  box-sizing: border-box;
}

.popup-window {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #333;
}

/* Header */
.popup-window .pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0 20px;
  height: 40px;
  border-bottom: 1px solid var(--gry70);
  background: var(--wht);
  z-index: 100;
}
.popup-window .pop-header.sub-korean {
  background-color: #3e528e;
}

.popup-window .header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.popup-window .title-main {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--wht);
}

.popup-window .title-divider {
  width: 2px;
  height: 16px;
  background: rgba(255, 255, 255, 0.6);
}

.popup-window .title-sub {
  font-size: 1.7rem;
  color: var(--wht);
  font-weight: 400;
}

.popup-window .header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.popup-window .header-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 8px 6px;
  height: 26px;
  line-height: 26px;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--wht);
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  transition: all 0.2s;
}

.popup-window .header-btn:hover {
  background: #2f3e6a;
}

.popup-window .header-btn .icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.popup-window .header-btn .icon svg g {
  stroke: var(--wht);
}
.popup-window .progress-ring {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: relative;
  border: 1px solid var(--wht);
  box-sizing: border-box;

  background: conic-gradient(
    var(--wht) 0deg calc(var(--percent) * 3.6deg),
    #3e528e calc(var(--percent) * 3.6deg) 360deg
  );
}

.popup-window .progress-ring::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--wht);
  box-sizing: border-box;
}
.popup-window .sub-korean .progress-ring::before {
  background-color: #3e528e;
}

.popup-window .progress-ring::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border-top: 1px solid rgba(255, 255, 255, 0.65);
}

/* Progress tooltip */
.popup-window .progress-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  padding: 8px;
  width: 310px;
  border: 1px solid var(--gry30);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.popup-window .header-btn.progress.open .progress-tooltip {
  display: block;
}

.popup-window .progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0;
  padding: 8px 17px;
  height: 48px;
  font-size: 1.5rem;
  color: var(--gry70);
  border-radius: 8px;
  background-color: var(--primary5);
}

.popup-window .progress-row.total {
  padding-bottom: 12px;
  margin-bottom: 4px;
  height: 30px;
  background-color: transparent;
}

.popup-window .progress-label {
  display: flex;
  align-items: end;
  gap: 6px;
  color: var(--gry70);
  font-weight: 400;
  line-height: 1;
}

.popup-window .progress-label svg {
  width: auto;
  height: 16px;
}
.popup-window .progress-label svg g {
  fill: none;
  stroke: var(--gry90);
  stroke-linejoin: round;
  stroke-width: 1.5px;
}
.popup-window .progress-row.total .progress-label,
.popup-window .progress-row.total .progress-target {
  color: var(--gry90);
  font-weight: 700;
}

.popup-window .progress-value {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 400;
}

.popup-window .progress-percent {
  font-weight: 700;
  color: #ef4444;
}

.popup-window .progress-target {
  margin-right: 10px;
  color: #888;
}
.popup-window .total .progress-target {
  margin-right: 0;
}

.popup-window .progress-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 1.7rem;
  color: #fff;
}

.popup-window .progress-status svg {
  width: 10px;
  height: 10px;
}

.popup-window .progress-status.done {
  background: var(--primary50);
}
.popup-window .progress-status.playing {
  background: #fff;
  border: 2px dotted var(--point50);
  color: var(--point50);
}
.popup-window .progress-status.none {
  background: var(--gry20);
  color: var(--gry50);
}

/* Content area */
.popup-window .pop-content {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

.popup-window .video-area {
  flex: 1;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background-color: var(--gry5);
  transition: all 0.3s ease;
}

.popup-window .video-area::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

/* 16:9 영상 임베드 */
.popup-window .video-embed {
  position: relative;
  z-index: 3;
  width: 100%;
  /* max-width: calc((100vh - 200px) * 16 / 9); */
  aspect-ratio: 16 / 9;
  max-height: 100%;
  background: #000;
}

.popup-window .video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.popup-window .play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(100, 100, 100, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: background 0.2s;
}

.popup-window .play-btn:hover {
  background: rgba(80, 80, 80, 0.8);
}

.popup-window .play-btn::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 18px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}

/* Side panel toggle */
.popup-window .panel-toggle {
  position: absolute;
  top: 24px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.6);
}

.popup-window .panel-toggle svg {
  width: 18px;
  height: 18px;
  color: #555;
}

.popup-window .pop-content.panel-open .panel-toggle {
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.29 20'%3E%3Cg fill='none' stroke='%231e2124' stroke-linecap='square' stroke-linejoin='round' stroke-width='1.6px'%3E%3Cpolyline points='8.04 16.91 14.95 10 8.04 3.09'/%3E%3Cline x1='13.85' y1='10' y2='10'/%3E%3Cline x1='18.49' x2='18.49' y2='20'/%3E%3C/g%3E%3C/svg%3E");
}

.popup-window .pop-content.panel-closed .panel-toggle.collapsed-style {
  background-color: var(--primary50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.6 19.6'%3E%3Cg fill= 'none' stroke= '%23ffffff' stroke-linejoin= 'round' stroke-width= '1.6px'%3E%3Crect class='cls-1' x='.8' y='.8' width='6.92' height='6.92' transform='translate(8.52 0) rotate(90)'/%3E%3Crect class='cls-1' x='.8' y='11.88' width='6.92' height='6.92' transform='translate(19.6 11.08) rotate(90)'/%3E%3Crect class='cls-1' x='11.88' y='.8' width='6.92' height='6.92' transform='translate(19.6 -11.08) rotate(90)'/%3E%3Crect class='cls-1' x='11.88' y='11.88' width='6.92' height='6.92' transform='translate(30.68 0) rotate(90)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 18px;
  border-color: var(--primary50);
}

/* Side panel */
.popup-window .side-panel {
  width: 380px;
  background: #fff;
  border-left: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  overflow: hidden;
}

.popup-window .pop-content.panel-closed .side-panel {
  width: 0;
  border-left: none;
}

.popup-window .tabs {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
  padding: 0 16px;
  min-width: 380px;
}

.popup-window .tab {
  flex: 1;
  text-align: center;
  padding: 14px 0 9px;
  font-size: 1.7rem;
  color: #888;
  cursor: pointer;
  border-bottom: 4px solid transparent;
  transition: all 0.2s;
  font-weight: 700;
}

.popup-window .tab:hover {
  color: #444;
}

.popup-window .tab.active {
  color: var(--secondary50);
  border-bottom-color: var(--secondary50);
  font-weight: 700;
}

.popup-window .tab-content {
  flex: 1;
  overflow-y: auto;
  min-width: 380px;
}

.popup-window .tab-pane {
  display: none;
  padding: 18px 0;
  height: 100%;
}

.popup-window .tab-pane.active {
  display: flex;
  flex-direction: column;
}

/* 목차 tab */
.popup-window .unit-banner {
  background: var(--primary50);
  color: #fff;
  padding: 16px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.7rem;
  margin-bottom: 14px;
}

.popup-window .session-card {
  border-top: 1px solid var(--gry20);
}
.popup-window .session-card:last-child {
  border-bottom: 1px solid var(--gry20);
}

.popup-window .session-card .session-items {
  padding: 2px 12px 8px 26px;
  overflow: hidden;
  max-height: 600px;
  opacity: 1;
  transition:
    max-height 0.3s ease,
    opacity 0.25s ease,
    padding 0.3s ease;
}

.popup-window .session-card:not(.open) > .session-items {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.popup-window .session-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  cursor: pointer;
}

.popup-window .session-card.open .arrow {
  transform: rotate(180deg);
}

.popup-window .session-header .item-icon {
}

.popup-window .session-header .stack {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: auto;
}

.popup-window .session-header .stack span {
  display: block;
  width: 6px;
  height: 12px;
  font-size: 0;
  color: transparent;
  border-radius: 2px;
}

.popup-window .session-card .session-header .stack span {
  background-color: var(--gry20);
}

.popup-window .session-card.done .session-header .stack span {
  background-color: var(--primary50);
}

.popup-window .session-card.active .session-header .stack span {
  background-color: var(--point50);
}

.popup-window .session-card.active .session-header {
  background: transparent;
}

.popup-window .session-title {
  flex: 1;
  margin-top: 2px;
  color: var(--gry90);
  font-weight: 700;
  font-size: 1.7rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.popup-window .session-badge {
  padding: 1px 4px;
  min-width: 40px;
  text-align: center;
  border-radius: 4px;
  font-size: 1.3rem;
  font-weight: 400;
  border: 1px solid transparent;
}

.popup-window .badge-done {
  background: var(--primary50);
  color: #fff;
}
.popup-window .badge-progress {
  background: var(--point60);
  color: #fff;
}
.popup-window .badge-ing {
  background: var(--wht);
  color: var(--point60);
  border: 1px solid var(--point40);
}
.popup-window .badge-todo {
  background: var(--gry50);
  color: #fff;
}

.popup-window .custom-select {
  position: relative;
  padding: 0 12px;
}

.popup-window .select-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  width: 100%;
  height: 48px;
  font-size: 1.5rem;
  color: var(--gry90);
  border: 1px solid var(--gry60);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.popup-window .select-btn .selected {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80%;
}

.popup-window .selected-count {
  font-size: 20px;
  color: #666;
}

.popup-window .arrow {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--gry90);
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: 0.25s;
}
.popup-window .custom-select.open .arrow {
  transform: rotate(180deg);
}
.popup-window .select-list {
  position: absolute;
  top: 47px;
  left: 12px;
  display: none;
  padding: 14px 0;
  width: calc(100% - 24px);
  border: 1px solid var(--gry60);
  border-radius: 12px;
  background: #fff;
  z-index: 20;
}

.popup-window .custom-select.open .select-list {
  display: block;
}

.popup-window .select-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: 1.5rem;
  cursor: pointer;
}
.popup-window .select-list li:hover {
  background: var(--primary5);
}
.popup-window .subject-tit {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.popup-window .status-legend {
  display: flex;
  gap: 10px;
  margin: 12px;
}

.popup-window .status-legend li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1.3rem;
  color: var(--gry90);
}
.popup-window .status-legend .legend-dot {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
.popup-window .status-legend .legend-dot.is-complete {
  background: var(--primary50);
}
.popup-window .status-legend .legend-dot.is-doing {
  background: var(--point50);
}
.popup-window .status-legend .legend-dot.is-yet {
  background: var(--gry20);
}

.popup-window .session-items {
  display: flex;
  flex-direction: column;
  padding: 0 18px 8px;
}

.popup-window .session-card.active .session-items {
}

.popup-window .session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px;
  font-size: 1.5rem;
  border: 1px solid transparent;
  background-color: var(--gry5);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    border-radius 0.2s ease,
    transform 0.25s ease;
}
.popup-window .session-item:not(:first-child) {
  border-top: 1px solid var(--gry10);
}

.popup-window .session-item .item-left {
  min-width: 0;
}
.popup-window .session-item .item-left > div {
  flex: 1;
  min-width: 0;
}
.popup-window .session-item .item-left > div > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  line-height: 1.4;
  max-height: 1.4em;
  font-weight: 400;
  word-break: break-all;
  transition: max-height 0.25s ease;
}
.popup-window .session-item:hover .item-left > div > span {
  -webkit-line-clamp: 2;
  max-height: 2.8em;
}

.popup-window .session-card.done .session-items a {
  background: var(--primary15);
}
.popup-window .session-card.active .session-items a {
  border-color: transparent;
  background: var(--point5);
}
.popup-window .session-card.done .session-items a:hover {
  border-radius: 12px;
  border-color: var(--primary50);
  background-color: var(--wht);
}
.popup-window .session-card.active .session-items a:hover {
  border-radius: 12px;
  border-color: var(--point50);
  background-color: var(--wht);
}
.popup-window .session-card .session-items a:hover {
  border-radius: 12px;
  border-color: var(--gry20);
  background-color: var(--wht);
}

.popup-window .session-item .cate {
  font-size: 1.1rem;
  color: var(--gry70);
  font-weight: 400;
}
.popup-window .session-item:hover {
  transform: scale(1.03);
}

.popup-window .session-item:nth-child(1) {
  border-radius: 8px 8px 0 0;
}

.popup-window .session-item:last-child {
  border-radius: 0 0 8px 8px;
}

.popup-window .session-card.done .session-item,
.popup-window .session-card.active .session-item {
  background-color: var(--wht);
}

.popup-window .session-item svg {
  width: auto;
  min-width: 18px;
  height: 22px;
}

.popup-window .session-card .item-icon .subject-icon g {
  fill: none;
  stroke: var(--gry90);
  stroke-linejoin: round;
  stroke-width: 1.5px;
}
.popup-window .session-card.done .item-icon .subject-icon g {
  stroke: var(--primary50);
}
.popup-window .session-card.active .item-icon .subject-icon g {
  stroke: var(--point50);
}
.popup-window .session-card.active .item-icon .subject-icon g .line {
  stroke: var(--wht);
  fill: var(--point50);
}
.popup-window .session-card.active .item-icon .subject-icon g .play {
  stroke: var(--point50);
  fill: var(--point50);
}

.popup-window .item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gry90);
  font-weight: 700;
}

.popup-window .item-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  font-weight: 700;
}

.popup-window .item-icon.playing {
  color: var(--point50);
}
.popup-window .item-icon.todo {
  color: var(--gry50);
}

.popup-window .session-item.current {
  border: 2px dashed var(--point50);
  background: #fff;
}

/* 노트 tab */
.popup-window .note-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 12px;
  padding: 0 18px;
}

.popup-window .note-card {
  background: #eff6ff;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.popup-window .note-title {
  font-weight: 700;
  font-size: 14px;
  color: #222;
  margin-bottom: 6px;
}

.popup-window .note-body {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

.popup-window .note-input-area {
  border-top: 1px solid #e5e5e5;
  padding: 12px 18px 0;
  position: relative;
  text-align: right;
}

.popup-window .note-title-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
  outline: none;
}

.popup-window .note-title-input:focus {
  border-color: #2563eb;
}

.popup-window .note-body-input {
  width: 100%;
  height: 110px;
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-size: 13px;
  resize: none;
  outline: none;
  font-family: inherit;
}

.popup-window .note-body-input:focus {
  border-color: #2563eb;
}

.popup-window .save-btn {
  margin-top: 15px;
  padding: 6px 18px;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  background: #2563eb;
}

.popup-window .save-btn:hover {
  background: #1d4ed8;
}

/* 쪽지 tab */
.popup-window .message-wrap {
  padding: 0 18px;
}
.popup-window .recipient-select {
  margin-bottom: 14px;
  padding: 10px 14px;
  width: 100%;
  border: 1px solid var(--gry90);
  border-radius: 6px;
  font-size: 1.7rem;
  outline: none;
  background: #fff;
  color: var(--gry90);
  cursor: pointer;
}

.popup-window .message-thread {
  flex: 1;
  margin: 0 -18px 12px;
  padding: 6px 16px;
  overflow-y: auto;
  max-height: 400px;
  border-top: 1px solid var(--gry20);
  border-bottom: 1px solid var(--gry20);
  background-color: var(--gry5);
}

.popup-window .date-divider {
  position: relative;
  text-align: center;
  color: var(--gry70);
  font-size: 1.5rem;
  margin: 12px 0 6px;
  background-color: var(--gry5);
}
.popup-window .date-divider::before {
  position: absolute;
  top: 9px;
  left: 0;
  content: "";
  width: calc(35% - 18px);
  border-bottom: 1px dashed var(--gry20);
  z-index: 0;
}
.popup-window .date-divider::after {
  position: absolute;
  top: 9px;
  right: 0;
  content: "";
  width: calc(35% - 18px);
  border-bottom: 1px dashed var(--gry20);
  z-index: 0;
}

.popup-window .message {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  max-width: 78%;
}

.popup-window .message.received {
  align-items: flex-start;
}
.popup-window .message.sent {
  align-items: flex-end;
  margin-left: auto;
}

.popup-window .msg-time {
  font-size: 1.5rem;
  color: var(--gry60);
  margin-bottom: 4px;
}

.popup-window .msg-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 1.7rem;
  line-height: 1.5;
  word-break: break-word;
}

.popup-window .message.received .msg-bubble {
  background: var(--gry10);
  color: var(--gry90);
}

.popup-window .message.sent .msg-bubble {
  color: #222;
  border: 1px solid var(--gry10);
  background: var(--wht);
}

.popup-window .msg-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px solid var(--gry60);
  border-radius: 6px;
  font-size: 1.7rem;
  color: var(--gry90);
  background: var(--wht);
}

.popup-window .msg-input-area {
  padding-top: 12px;
  position: relative;
  text-align: right;
}

.popup-window .msg-input {
  width: 100%;
  height: 100px;
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-size: 1.7rem;
  resize: none;
  outline: none;
  font-family: inherit;
  margin-bottom: 10px;
}

.popup-window .msg-input:focus {
  border-color: #2563eb;
}

.popup-window .file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.popup-window .file-btn {
  padding: 8px 16px;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.7rem;
  flex-shrink: 0;
  background: var(--secondary50);
}

.popup-window .file-name {
  flex: 1;
  position: static;
  padding: 8px 12px;
  width: auto;
  height: auto;
  background: #fff;
  border: 1px solid var(--gry60);
  border-radius: 8px;
  font-size: 1.7rem;
  color: var(--gry50);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup-window .file-clear {
  cursor: pointer;
  color: #888;
  background: none;
  border: none;
  font-size: 14px;
}

.popup-window .send-btn {
  width: 100%;
  padding: 10px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.popup-window .send-btn:hover {
  background: #1d4ed8;
}

/* 자막 tab */
.popup-window .subtitle-list {
  flex: 1;
  padding: 0 18px;
  overflow-y: auto;
}

.popup-window .subtitle-block {
  margin-bottom: 18px;
}

.popup-window .subtitle-time {
  position: relative;
  margin-bottom: 6px;
  font-size: 1.5rem;
  color: var(--gry70);
  font-weight: 700;
}
.popup-window .subtitle-time::after {
  position: absolute;
  content: "";
  top: 11px;
  left: 56px;
  width: calc(100% - 56px);
  border-top: 1px dashed var(--gry20);
}

.popup-window .subtitle-text {
  font-size: 1.7rem;
  color: var(--gry90);
  line-height: 1.7;
}

.popup-window .subtitle-text .highlight {
  background: var(--primary10);
  padding: 1px 2px;
  border-radius: 2px;
}

/* 용어 tab */
.popup-window .term-wrap {
  padding: 0 18px;
}
.popup-window .term-card {
  margin-bottom: 10px;
  border-radius: 12px;
  padding: 20px;
  background: var(--secondary5);
}

.popup-window .term-name {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gry90);
  margin-bottom: 6px;
}

.popup-window .term-def {
  font-size: 1.7rem;
  color: var(--gry90);
  line-height: 1.5;
}

/* 자료 tab */
.popup-window .file-wrap {
  padding: 0 18px;
}
.popup-window .file-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--gry70);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}

.popup-window .file-list-item:hover {
  border-color: #2563eb;
  background: #eff6ff;
}

.popup-window .file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.7rem;
  color: var(--gry90);
}

.popup-window .file-icon svg {
  width: 14px;
  height: 14px;
}

.popup-window .download-icon {
  width: 18px;
  height: 18px;
  color: #888;
}

/* ==========================================================
   형성평가 결과 팝업 (eval result modal)
   ========================================================== */
.eval-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(30, 33, 36, 0.45);
}
.eval-modal-overlay.open {
  display: flex;
}

.eval-modal {
  width: 900px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.eval-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
}
.eval-modal-header h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}
.eval-modal-close {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--gry90);
  cursor: pointer;
}
.eval-modal-close:hover {
  color: var(--gry90);
}

.eval-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px;
  max-height: 615px;
}

.eval-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
  color: var(--gry90);
}
.eval-table.tbl thead th {
  position: sticky;
  top: 0;
  padding: 12px 6px;
  background: var(--gry5);
  color: var(--gry70);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  border-bottom: 0 none;
}
.eval-table thead th.col-name {
  padding-left: 8px;
  text-align: left;
  border-radius: 8px 0 0 8px;
}
.eval-table thead th.col-result {
  border-radius: 0 8px 8px 0;
}

.eval-table tbody td {
  padding: 14px 6px;
  text-align: center;
  border-bottom: 1px solid var(--gry10);
  vertical-align: middle;
}
.eval-table tbody td.col-name {
  text-align: left;
  padding-left: 8px;
  line-height: 1.4;
  color: var(--gry90);
}
.eval-table tbody td.col-round {
  color: var(--gry90);
}

.eval-mark {
  font-weight: 700;
  font-size: 1.9rem;
}
.eval-mark.o {
  color: var(--primary60);
}
.eval-mark.x {
  color: var(--point50);
}
.eval-mark.dash {
  color: var(--gry30);
}

.eval-view-btn {
  padding: 6px 18px;
  background: var(--primary50);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1.3rem;
  font-weight: 500;
  cursor: pointer;
}
.eval-view-btn:hover {
  background: var(--primary60);
}

.eval-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px 20px;
}
.eval-close-btn {
  padding: 8px 26px;
  background: #fff;
  color: var(--gry70);
  border: 1px solid var(--gry20);
  border-radius: 6px;
  font-size: 1.4rem;
  cursor: pointer;
}
.eval-close-btn:hover {
  background: var(--gry5);
}

/* ==========================================================
   일일 접속 코드 입력 팝업 (Daily Access Code Modal)
   ========================================================== */
.code-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(30, 33, 36, 0.45);
}
.code-modal-overlay.open {
  display: flex;
}

.code-modal {
  width: 500px;
  max-width: calc(100vw - 40px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.code-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 8px;
}
.code-modal-header h2 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gry90);
}
.code-modal-close {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--gry50);
  cursor: pointer;
}
.code-modal-close:hover {
  color: var(--gry90);
}

.code-modal-body {
  padding: 8px 24px 4px;
}
.code-guide {
  margin: 0 0 53px;
  font-size: 1.7rem;
  color: var(--gry90);
}

.code-input-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 16px;
}
.code-digit {
  width: 70px;
  height: 96px;
  border: 1px solid var(--secondary70);
  border-radius: 10px;
  text-align: center;
  font-size: 5.6rem;
  font-weight: 700;
  color: var(--secondary70);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  background-color: var(--primary5);
}
.code-digit:focus {
  border-color: var(--primary50);
  box-shadow: 0 0 0 2px rgba(39, 117, 212, 0.18);
}

.code-error {
  margin: 0;
  padding-left: 30px;
  min-height: 1.6rem;
  text-align: left;
  font-size: 1.7rem;
  color: var(--point60);
  visibility: hidden;
  background-size: 20px 18px;
  background-position: left center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.72 17.63'%3E%3Cg fill= 'none' stroke= '%23c23e0a' stroke-linejoin= 'round' stroke-width= '1.6px'%3E%3Cpath d='m10.46,8.18c0,.33-.27.6-.6.6s-.6-.27-.6-.6.27-.6.6-.6.6.27.6.6Z'/%3E%3Cline x1='9.86' y1='10.42' x2='9.86' y2='14.72'/%3E%3Cpath d='m8.86,1.38L.96,15.1c-.44.77.11,1.73,1,1.73h15.81c.89,0,1.44-.96,1-1.73L10.86,1.38c-.44-.77-1.55-.77-2,0Z'/%3E%3C/g%3E%3C/svg%3E");
}
.code-error.show {
  visibility: visible;
}

.code-modal-footer {
  display: flex;
  justify-content: end;
  margin-top: 43px;
  padding: 8px 24px 24px;
}
.code-confirm-btn {
  padding: 10px 28px;
  background: var(--primary50);
  color: var(--wht);
  border: none;
  border-radius: 6px;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
}

/* Scrollbar */
.popup-window ::-webkit-scrollbar {
  width: 6px;
}
.popup-window ::-webkit-scrollbar-track {
  background: transparent;
}
.popup-window ::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 3px;
}
.popup-window ::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3;
}

/* ==========================================================
   학습창 팝업 반응형 (Learning Popup Responsive)
   ========================================================== */

@media (max-width: 1280px) {
  .popup-window .pop-header {
    padding: 0 20px;
  }
  .popup-window .side-panel {
    width: 340px;
  }
  .popup-window .tabs,
  .popup-window .tab-content {
    min-width: 340px;
  }
}

@media (max-width: 1024px) {
  .popup-window .pop-header {
    position: relative;
    flex-wrap: wrap;
    height: auto;
    padding: 10px 16px 0;
  }
  .popup-window .pop-header::after {
    position: absolute;
    top: 53px;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    border-bottom: 1px solid var(--gry90);
  }
  .popup-window .header-left {
    gap: 10px;
    padding: 5px 0 8px;
  }
  .popup-window .title-main {
    font-size: 2rem;
  }
  .popup-window .title-sub {
    font-size: 1.7rem;
  }
  .popup-window .progress-tooltip {
    left: calc(-100% + 100px);
  }
  .popup-window .header-right {
    gap: 4px;
    flex: 1 1 100%;
    justify-content: center;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid var(--gry30);
  }
  .popup-window .header-btn {
    flex: 1;
    justify-content: center;
    height: 44px;
    padding: 8px 10px;
    font-size: 1.5rem;
  }
  .popup-window .header-btn:not(:first-child) {
    border-radius: 0;
    border-left: 1px solid var(--gry30);
  }
  .popup-window .panel-toggle {
    display: none;
  }
  .popup-window .pop-content {
    flex-direction: column;
  }
  .popup-window .video-area {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .popup-window .side-panel {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border-left: none;
    border-top: 1px solid #e5e5e5;
    transition: height 0.3s ease;
  }
  .popup-window .tabs,
  .popup-window .tab-content {
    min-width: 300px;
  }
  .popup-window .tab {
    font-size: 1.5rem;
  }
  .eval-modal-body {
    overflow-x: auto;
  }
  .eval-table {
    min-width: 760px;
  }
}
@media (max-width: 768px) {
  .popup-window .pop-content.panel-closed .side-panel {
    width: 100%;
    height: 0;
    flex: 0 0 0;
    border-top: none;
  }
  .popup-window .pop-content.panel-closed .video-area {
    flex: 1 1 auto;
    aspect-ratio: auto;
  }

  .popup-window .tabs,
  .popup-window .tab-content {
    min-width: 0;
  }

  .popup-window .panel-toggle {
    top: 14px;
    right: 14px;
  }

  .popup-window .progress-tooltip {
    width: min(310px, calc(100vw - 24px));
  }
}

@media (max-width: 600px) {
  .popup-window .pop-header {
    padding: 7px 12px 0;
  }
  .popup-window .pop-header::after {
    top: 45px;
  }
  .popup-window .title-main {
    font-size: 1.8rem;
  }

  .popup-window .header-right {
    margin: 12px 0 14px;
  }

  .popup-window .header-btn {
    flex: 1 1 auto;
    gap: 0;
    height: 40px;
    padding: 8px;
    font-size: 1.4rem;
  }
  .popup-window .header-btn .icon {
    margin-right: 5px;
    width: 22px;
    height: 22px;
  }
  .popup-window .header-btn:not(:first-child) .icon {
    display: none;
  }
  .popup-window .progress-tooltip {
    left: calc(-100% + 80px);
    font-size: 1.5rem;
  }
  .popup-window .progress-row {
    font-size: 1.5rem;
  }

  .popup-window .tab {
    font-size: 1.4rem;
    padding: 14px 0 11px;
  }
  /* .popup-window .tab-pane { padding: 14px; } */

  .popup-window .unit-banner {
    padding: 12px 18px;
    font-size: 1.6rem;
  }
  .popup-window .term-card {
    padding: 10 15px;
  }

  .eval-modal-header {
    padding: 16px 16px 12px;
  }
  .eval-modal-body {
    padding: 0 16px;
  }
  .eval-modal-footer {
    padding: 12px 16px 16px;
  }
  .code-digit {
    width: 20%;
    height: auto;
    aspect-ratio: 1/1.3;
  }
}

.lesson-warp {
}
.lessin-timeline {
  margin-top: 6px;
}
.lessin-timeline li {
  margin-top: 5px;
}
.lessin-timeline dl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1.5rem;
  color: var(--gry70);
}
.lessin-timeline dt {
}
.lessin-timeline dd {
  font-weight: 700;
}

/* ==========================================================
   ★ 동영상 수업 상세 (lesson_detail.html)
   ========================================================== */

/* --- 강의 개요 영역 --- */
.course-summary {
  display: grid;
  grid-template-columns: 1fr 35%;
  align-items: self-start;
  gap: 60px;
  margin-top: 40px;
  margin-bottom: 32px;
  padding: 40px 40px 40px 60px;
  border-radius: 16px;
  background: var(--gry5);
}

.course-info {
  position: relative;
  padding-right: 12px;
}
.course-info .ico-back {
  margin-bottom: 40px;
  padding: 0 13px;
}

.course-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding-right: 110px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--gry90);
}
.course-title {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  color: var(--gry90);
  line-height: 1.2;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 1.5rem;
  color: var(--gry60);
  margin: 0;
}
.course-meta > div {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.course-meta dt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.course-meta dd {
  margin: 0;
}
.course-meta dd strong {
  color: var(--gry90);
  font-weight: 700;
}
.course-meta > div + div::before {
  content: "|";
  margin-right: 12px;
  color: #cdd1d5;
}

.course-desc {
  font-size: 1.9rem;
  color: #464c53;
  line-height: 1.6;
  margin: 14px 0 22px;
}

.course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.course-actions .btn {
  padding: 0 24px;
  font-size: 1.7rem;
  font-weight: 700;
}
.course-actions .btn::before {
  margin-right: 5px;
  width: 22px;
  height: 22px;
}

/* 일러스트 (오른쪽 상단 장식) */
.course-illust {
  position: absolute;
  right: 0;
  top: 50px;
  width: 93px;
  height: 101px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.course-illust.math {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 249.16 265.4'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11 %7B stroke: %231e2124; stroke-width: 2px; %7D .cls-1, .cls-2, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 %7B stroke-linecap: round; stroke-linejoin: round; %7D .cls-12 %7B mix-blend-mode: darken; stroke-width: 0px; %7D .cls-12, .cls-7 %7B fill: %23a8befb; %7D .cls-13 %7B isolation: isolate; %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B fill: %23eeb6ab; %7D .cls-3, .cls-11 %7B stroke-miterlimit: 10; %7D .cls-4 %7B fill: %23617be5; %7D .cls-5 %7B fill: %2398ab00; %7D .cls-6 %7B fill: %23f9fcfb; %7D .cls-8, .cls-11 %7B fill: %23fab8ad; %7D .cls-9 %7B fill: %2397d2c1; %7D .cls-10 %7B fill: %23fdd100; %7D %3C/style%3E%3C/defs%3E%3Cg class='cls-13'%3E%3Cg id='_레이어_2' data-name='레이어 2'%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cg%3E%3Cpath class='cls-7' d='m189.71,248.74l-180.9-.24c.07-49.95,40.61-90.4,90.58-90.34,49.95.07,90.38,40.63,90.32,90.58Z'/%3E%3Cpath class='cls-7' d='m181.9,248.73l-180.9-.24c.07-49.95,40.61-90.4,90.58-90.34,49.95.07,90.38,40.63,90.32,90.58Z'/%3E%3Cline class='cls-10' x1='91.56' y1='163.02' x2='91.57' y2='158.15'/%3E%3Cline class='cls-10' x1='91.51' y1='200.64' x2='91.53' y2='190.8'/%3E%3Cline class='cls-10' x1='67.52' y1='207.04' x2='62.61' y2='198.51'/%3E%3Cline class='cls-10' x1='49.94' y1='224.57' x2='41.42' y2='219.64'/%3E%3Cline class='cls-10' x1='115.49' y1='207.1' x2='120.42' y2='198.59'/%3E%3Cline class='cls-10' x1='133.02' y1='224.68' x2='141.55' y2='219.77'/%3E%3Cline class='cls-10' x1='76.7' y1='164.3' x2='75.86' y2='159.51'/%3E%3Cline class='cls-10' x1='62.28' y1='168.14' x2='60.62' y2='163.57'/%3E%3Cline class='cls-10' x1='48.75' y1='174.43' x2='46.33' y2='170.21'/%3E%3Cline class='cls-10' x1='36.52' y1='182.97' x2='33.4' y2='179.24'/%3E%3Cline class='cls-10' x1='25.96' y1='193.51' x2='22.23' y2='190.37'/%3E%3Cline class='cls-10' x1='17.38' y1='205.72' x2='13.17' y2='203.28'/%3E%3Cline class='cls-10' x1='11.06' y1='219.23' x2='6.49' y2='217.56'/%3E%3Cline class='cls-10' x1='7.18' y1='233.64' x2='2.39' y2='232.78'/%3E%3Cline class='cls-10' x1='106.43' y1='164.34' x2='107.28' y2='159.55'/%3E%3Cline class='cls-10' x1='120.83' y1='168.22' x2='122.5' y2='163.65'/%3E%3Cline class='cls-10' x1='134.35' y1='174.54' x2='136.78' y2='170.33'/%3E%3Cline class='cls-10' x1='146.56' y1='183.12' x2='149.69' y2='179.39'/%3E%3Cline class='cls-10' x1='157.09' y1='193.68' x2='160.82' y2='190.56'/%3E%3Cline class='cls-10' x1='165.63' y1='205.92' x2='169.85' y2='203.49'/%3E%3Cline class='cls-10' x1='171.92' y1='219.45' x2='176.49' y2='217.79'/%3E%3Cline class='cls-10' x1='175.76' y1='233.86' x2='180.56' y2='233.02'/%3E%3Cpath class='cls-7' d='m144.33,248.68l-105.77-.14c.04-29.21,23.74-52.86,52.96-52.82,29.21.04,52.85,23.75,52.81,52.96Z'/%3E%3Cline class='cls-10' x1='91.45' y1='248.61' x2='91.48' y2='225.17'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-11' d='m164.1,217.79h76.39c4.23,0,7.67,3.44,7.67,7.67v15.57c0,4.23-3.44,7.67-7.67,7.67h-76.39v-30.9h0Z'/%3E%3Cpath class='cls-1' d='m170.76,223.67v19.15c0,3.24-2.63,5.88-5.88,5.88H63.41v-6.66h100.69v-17.57H63.41v-6.66h101.48c3.24,0,5.88,2.63,5.88,5.88Z'/%3E%3Crect class='cls-2' x='68.52' y='224.46' width='95.58' height='17.57'/%3E%3Crect class='cls-2' x='68.52' y='230.34' width='95.58' height='5.8'/%3E%3Cpath class='cls-10' d='m81.61,264.4l5.78-5.78c2.47-2.47,3.86-5.82,3.86-9.31h0c0-7.27,5.89-13.16,13.16-13.16h.29-13.15c-7.27,0-13.16,5.89-13.16,13.16h0c0,3.49-1.39,6.84-3.86,9.31l-5.78,5.78,9.86-4.08,3,4.08Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-10' d='m89.81,186.89h76.39c4.23,0,7.67,3.44,7.67,7.67v15.57c0,4.23-3.44,7.67-7.67,7.67h-76.39v-30.9h0Z' transform='translate(263.68 404.68) rotate(-180)'/%3E%3Cpath class='cls-5' d='m136.55,192.76v19.15c0,3.24,2.63,5.88,5.88,5.88h101.48s0-6.66,0-6.66h-100.69v-17.57h100.69s0-6.66,0-6.66h-101.48c-3.24,0-5.88,2.63-5.88,5.88Z'/%3E%3Crect class='cls-2' x='143.22' y='193.55' width='95.58' height='17.57'/%3E%3Crect class='cls-2' x='143.22' y='199.44' width='95.58' height='5.8' transform='translate(382.02 404.68) rotate(-180)'/%3E%3C/g%3E%3Cg%3E%3Crect class='cls-4' x='160.89' y='101.22' width='37.86' height='5.03' transform='translate(290.7 279.24) rotate(-152.26)'/%3E%3Cg%3E%3Cpath class='cls-6' d='m160.5,229.3l-3.78,14.82c-.36,1.42.5,2.86,1.92,3.22,1.26.32,2.58-.33,3.09-1.52l4.61-10.8,4.42-10.36-10.26,4.65Z'/%3E%3Cpath class='cls-12' d='m160.5,229.3l-1.35,5.28c2.42.62,4.85.74,7.18.44l4.42-10.36-10.26,4.65Z'/%3E%3Cpath class='cls-6' d='m204.53,56.75l-44.01,172.47c7.72,1.97,15.57-2.69,17.54-10.41l40.45-158.5-13.97-3.57Z'/%3E%3Cpath class='cls-12' d='m204.53,56.75l-3.85,15.1c4.95,1.26,9.93,1.47,14.69.75l3.13-12.28-13.97-3.57Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-6' d='m204.68,56.46l-117.15,134.01c-6-5.24-6.61-14.35-1.37-20.35l107.66-123.16,10.86,9.49Z'/%3E%3Cpath class='cls-12' d='m204.68,56.46l-10.26,11.74c-3.85-3.36-6.83-7.35-8.94-11.68l8.34-9.54,10.86,9.49Z'/%3E%3C/g%3E%3Crect class='cls-5' x='220.83' y='2.66' width='12.62' height='22.17' transform='translate(421.78 131.64) rotate(-152.26)'/%3E%3Cpath class='cls-5' d='m190.59,32.25c-6.1,11.6-1.64,25.96,9.96,32.06s25.96,1.64,32.06-9.96c6.1-11.6,1.64-25.96-9.96-32.06s-25.96-1.64-32.06,9.96Zm8.87,4.66c3.53-6.71,11.82-9.28,18.53-5.76,6.71,3.53,9.28,11.82,5.76,18.53-3.53,6.71-11.82,9.28-18.53,5.76-6.71-3.53-9.28-11.82-5.76-18.53Z'/%3E%3Cg%3E%3Crect class='cls-4' x='93.77' y='106.93' width='5.19' height='16.98' transform='translate(92.95 265.75) rotate(-138.84)'/%3E%3Crect class='cls-10' x='95.67' y='84.18' width='15.07' height='111.66' transform='translate(117.65 -33.32) rotate(41.16)'/%3E%3Crect class='cls-10' x='100.62' y='84.18' width='5.16' height='111.66' transform='translate(117.65 -33.32) rotate(41.16)'/%3E%3Crect class='cls-6' x='97.88' y='116.83' width='7.71' height='4.48' transform='translate(99.97 275.67) rotate(-138.84)'/%3E%3Crect class='cls-4' x='102.34' y='118.43' width='18.57' height='18.57' transform='translate(111.64 -41.91) rotate(41.16)'/%3E%3Cpolygon class='cls-6' points='60.78 177.09 72.13 187.01 58.22 195.74 53.59 191.76 60.78 177.09'/%3E%3Cpath class='cls-4' d='m58.22,195.74l-3.78,2.37c-1.64,1.03-3.61-.74-2.75-2.48l1.9-3.87,4.63,3.98Z'/%3E%3Cpath class='cls-3' d='m141.16,87.84h8.9c1.7,0,3.09,1.38,3.09,3.09v4.23h-15.07v-4.23c0-1.7,1.38-3.09,3.09-3.09Z' transform='translate(96.2 -73.22) rotate(41.16)'/%3E%3Crect class='cls-6' x='134.04' y='93.64' width='15.07' height='4.95' transform='translate(98.24 -69.42) rotate(41.16)'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-7' d='m53.02,20.04l-1.16.13c-4.25.46-7.94,3.13-9.7,7.02l-.48,1.06,12.71,5.63-1.37-13.84Z'/%3E%3Cpath class='cls-7' d='m114.21,47.54l.77,1.07c2.21,3.05,2.62,7.04,1.08,10.48l-.54,1.2-11.7-5.24,10.39-7.51Z'/%3E%3Cpath class='cls-7' d='m48.65,94.97l.77,1.07c2.21,3.05,5.87,4.69,9.62,4.3l1.31-.14-1.31-12.75-10.39,7.51Z'/%3E%3Cpath class='cls-4' d='m72.08,58.33l39.11-4.03c3.27-.34,5.68,2.99,4.34,6l-13.4,29.94c-1.65,3.68-5.13,6.2-9.14,6.61l-32.63,3.36c-3.27.34-5.68-2.99-4.34-6l16.06-35.88Z'/%3E%3Cpath class='cls-6' d='m53.02,20.04l33.06-3.41c3.32-.34,6.58,1.11,8.53,3.82l19.6,27.09c1.93,2.67.25,6.42-3.02,6.76l-39.11,4.03-22.36-30.91c-2.11-2.91-.27-7.01,3.3-7.38Z'/%3E%3Cpath class='cls-9' d='m28.09,58.58l13.58-30.33c1.47-3.28,5.94-3.74,8.04-.83l22.36,30.91-16.06,35.88c-1.34,3-5.43,3.42-7.36.76l-19.6-27.09c-1.96-2.71-2.32-6.25-.96-9.3Z'/%3E%3Cellipse class='cls-10' cx='85.77' cy='77.25' rx='6.37' ry='3.68' transform='translate(-29 64.94) rotate(-35.89)'/%3E%3Cg%3E%3Cellipse class='cls-6' cx='50.6' cy='75.62' rx='3.02' ry='5.24' transform='translate(-7.49 5.59) rotate(-5.89)'/%3E%3Cellipse class='cls-6' cx='47.37' cy='46.21' rx='3.02' ry='5.24' transform='translate(-4.49 5.1) rotate(-5.89)'/%3E%3Cellipse class='cls-6' cx='49.08' cy='61.04' rx='3.02' ry='5.24' transform='translate(-6 5.35) rotate(-5.89)'/%3E%3C/g%3E%3Cellipse class='cls-1' cx='92.13' cy='41.93' rx='3.29' ry='5.69' transform='translate(16.22 108.89) rotate(-65.89)'/%3E%3Cellipse class='cls-1' cx='71.58' cy='32.73' rx='3.29' ry='5.69' transform='translate(12.46 84.68) rotate(-65.89)'/%3E%3C/g%3E%3Cg%3E%3Ccircle class='cls-8' cx='207.59' cy='142.05' r='29.92'/%3E%3Cpath class='cls-2' d='m212.44,144.97l13.21-3.31c2.14-.54,3.45-2.71,2.91-4.86s-2.71-3.45-4.86-2.91l-13.21,3.31-7.77,1.94-13.21,3.31c-2.14.54-3.45,2.71-2.91,4.86s2.71,3.45,4.86,2.91l13.21-3.31,7.77-1.94Z'/%3E%3Cpath class='cls-2' d='m205.58,132.36c2.14-.54,3.45-2.71,2.91-4.86h0c-.54-2.14-2.71-3.45-4.86-2.91l-.78.2c-2.14.54-3.45,2.71-2.91,4.86h0c.54,2.14,2.71,3.45,4.86,2.91l.78-.2Z'/%3E%3Cpath class='cls-2' d='m210.38,151.55c2.14-.54,4.32.77,4.86,2.91h0c.54,2.14-.77,4.32-2.91,4.86l-.78.2c-2.14.54-4.32-.77-4.86-2.91h0c-.54-2.14.77-4.32,2.91-4.86l.78-.2Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.course-illust.society {
  top: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 238.24 244.83'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8 %7B stroke: %231e2124; stroke-width: 2px; %7D .cls-1, .cls-2, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8 %7B stroke-linecap: round; stroke-linejoin: round; %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B fill: %23eeb6ab; stroke-miterlimit: 10; %7D .cls-4 %7B fill: %23617be5; %7D .cls-5 %7B fill: none; %7D .cls-6 %7B fill: %2397d2c1; %7D .cls-7 %7B fill: %23fdd100; %7D .cls-8 %7B fill: %23191919; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cg%3E%3Cg%3E%3Crect class='cls-7' x='137.7' y='192.27' width='7.51' height='28.39' transform='translate(282.92 412.92) rotate(-180)'/%3E%3Cpath class='cls-7' d='m225.54,125.88c-14.76,45.09-62.3,70.29-107.57,57.82-1.37-.37-2.74-.79-4.1-1.23s-2.65-.9-3.95-1.4l-2.27,6.93c1.3.49,2.62.95,3.95,1.39s2.73.86,4.1,1.23c49.09,13.73,100.74-13.56,116.75-62.47,16.01-48.91-9.5-101.46-57.2-119.42-1.32-.51-2.67-.98-4.04-1.43s-2.67-.84-4.01-1.22l-2.27,6.93c1.34.36,2.68.77,4.01,1.21,1.37.45,2.71.92,4.04,1.43,43.88,16.71,67.31,65.14,52.55,110.24Z'/%3E%3Cpath class='cls-7' d='m167.91,3.93l-60.96,186.21c-.73,2.23.48,4.62,2.7,5.35s4.62-.49,5.35-2.71L175.97,6.56c.73-2.23-.49-4.62-2.71-5.35-1.11-.36-2.26-.24-3.24.25-.96.5-1.74,1.35-2.1,2.47Z'/%3E%3Cg%3E%3Cpath class='cls-6' d='m61.92,98.35c0,18.39,6.24,35.34,16.73,48.8,14.56,18.71,37.28,30.74,62.81,30.74,25.53,0,48.26-12.03,62.81-30.74,10.48-13.46,16.73-30.41,16.73-48.8,0-43.93-35.6-79.54-79.54-79.54-43.92,0-79.53,35.6-79.53,79.54Z'/%3E%3Cellipse class='cls-6' cx='141.45' cy='98.35' rx='44.3' ry='79.54'/%3E%3Cpath class='cls-5' d='m78.65,147.15c14.56,18.71,37.28,30.74,62.81,30.74,25.53,0,48.26-12.03,62.81-30.74-14.55-10.42-37.27-17.13-62.81-17.13-25.53,0-48.25,6.71-62.81,17.13Z'/%3E%3Cpath class='cls-5' d='m78.65,49.55c14.56-18.71,37.28-30.74,62.81-30.74,25.53,0,48.26,12.03,62.81,30.74-14.55,10.42-37.27,17.13-62.81,17.13-25.53,0-48.25-6.71-62.81-17.13Z'/%3E%3Cline class='cls-6' x1='141.45' y1='18.81' x2='141.45' y2='177.88'/%3E%3Cline class='cls-6' x1='220.99' y1='98.35' x2='61.92' y2='98.35'/%3E%3C/g%3E%3Cpath class='cls-7' d='m99.76,236.61h83.4s0,0,0,0c-5.58-10.82-16.74-17.62-28.92-17.62h-25.56c-12.18,0-23.33,6.8-28.92,17.62h0Z'/%3E%3Crect class='cls-7' x='94.87' y='236.61' width='93.18' height='7.22' rx='3.61' ry='3.61' transform='translate(282.92 480.43) rotate(180)'/%3E%3C/g%3E%3Cg%3E%3Ccircle class='cls-7' cx='63.38' cy='68.8' r='17.55'/%3E%3Ccircle class='cls-7' cx='63.38' cy='66.34' r='17.55'/%3E%3Ccircle class='cls-7' cx='63.38' cy='66.34' r='13.14'/%3E%3Cpath class='cls-5' d='m70.49,60.97l-1.91,10.02c-.34,1.79-2.17,1.89-2.62.15l-2.58-10.01-2.58,10.01c-.45,1.74-2.28,1.64-2.62-.15l-1.91-10.02'/%3E%3Cline class='cls-5' x1='71.48' y1='66.93' x2='55.27' y2='66.93'/%3E%3C/g%3E%3Cg%3E%3Crect class='cls-2' x='27.28' y='173.62' width='91.5' height='70.2' transform='translate(146.05 417.45) rotate(-180)'/%3E%3Crect class='cls-2' x='16.21' y='169.93' width='96.31' height='73.89' transform='translate(128.73 413.76) rotate(-180)'/%3E%3Crect class='cls-4' x='6.87' y='162.56' width='98.69' height='5.55' transform='translate(112.43 330.67) rotate(-180)'/%3E%3Crect class='cls-2' x='6.87' y='168.11' width='98.69' height='75.72' transform='translate(112.43 411.93) rotate(-180)'/%3E%3Crect class='cls-1' x='79.69' y='202.34' width='11.63' height='32.46' transform='translate(171.01 437.15) rotate(-180)'/%3E%3Crect class='cls-3' x='60.16' y='177.39' width='11.63' height='57.41' transform='translate(131.96 412.19) rotate(-180)'/%3E%3Crect class='cls-7' x='40.63' y='212.94' width='11.63' height='21.86' transform='translate(92.9 447.74) rotate(-180)'/%3E%3Crect class='cls-6' x='21.1' y='191.85' width='11.63' height='42.95' transform='translate(53.84 426.66) rotate(-180)'/%3E%3Cline class='cls-2' x1='96.22' y1='234.8' x2='16.21' y2='234.8'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-1' d='m31.42,143.29l1.72,12.6c.37,2.7,2.67,4.71,5.4,4.71h0c2.72,0,5.03-2.01,5.4-4.71l1.72-12.6'/%3E%3Cpath class='cls-1' d='m66.79,143.34l1.72,12.6c.37,2.7,2.67,4.71,5.4,4.71h0c2.72,0,5.03-2.01,5.4-4.71l1.72-12.6'/%3E%3Cpath class='cls-1' d='m40.03,97.18l-6.88-11.58c-1.35-2.27-4.63-2.27-5.98,0l-6.88,11.58'/%3E%3Crect class='cls-1' x='7.98' y='89.49' width='95.7' height='65.49' rx='32.74' ry='32.74' transform='translate(111.66 244.46) rotate(180)'/%3E%3Cpolyline class='cls-1' points='10.05 114.26 3.47 115.76 3.47 134.32 13.96 136.72'/%3E%3Cellipse class='cls-1' cx='3.47' cy='125.04' rx='2.47' ry='9.28'/%3E%3Cpath class='cls-1' d='m47.01,97.18l-6.88-11.58c-1.35-2.27-4.63-2.27-5.98,0l-6.88,11.58'/%3E%3Cpath class='cls-2' d='m32.62,95.72l3.15-5.3c.62-1.04,2.12-1.04,2.74,0l3.15,5.3h-9.03Z'/%3E%3Cellipse class='cls-8' cx='24.27' cy='111.8' rx='2.43' ry='3.76'/%3E%3Cpath class='cls-1' d='m73.03,145.87l1.72,12.6c.37,2.7,2.67,4.71,5.4,4.71h0c2.72,0,5.03-2.01,5.4-4.71l1.72-12.6'/%3E%3Cpath class='cls-1' d='m24.27,145.87l1.72,12.6c.37,2.7,2.67,4.71,5.4,4.71h0c2.72,0,5.03-2.01,5.4-4.71l1.72-12.6'/%3E%3Cline class='cls-8' x1='71.09' y1='94.47' x2='54.33' y2='94.47'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.course-illust.english {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 235.77 262.92'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18 %7B stroke-width: 2px; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18, .cls-19 %7B stroke: %231e2124; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-6, .cls-7, .cls-8, .cls-9, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18 %7B stroke-linejoin: round; %7D .cls-1, .cls-2, .cls-3, .cls-6, .cls-7, .cls-8, .cls-9, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18 %7B stroke-linecap: round; %7D .cls-20, .cls-3, .cls-10 %7B fill: %23fff; %7D .cls-21 %7B fill: %23ffc5c8; %7D .cls-21, .cls-22, .cls-23 %7B stroke-width: 0px; %7D .cls-2 %7B fill: %23ededed; %7D .cls-4 %7B fill: %23ffc0db; %7D .cls-5, .cls-10, .cls-19 %7B stroke-miterlimit: 10; %7D .cls-5, .cls-11 %7B fill: %23f9fcfb; %7D .cls-6 %7B fill: %23617be5; %7D .cls-22, .cls-18 %7B fill: %23fde0a1; %7D .cls-7 %7B fill: %23c6c6c6; %7D .cls-8, .cls-23 %7B fill: %23ffdcd4; %7D .cls-9 %7B fill: %2398ab00; %7D .cls-12 %7B fill: none; %7D .cls-24 %7B clip-path: url(%23clippath); %7D .cls-13 %7B fill: %23a8befb; %7D .cls-14 %7B fill: %2397d2c1; %7D .cls-15 %7B fill: %23fdd100; %7D .cls-16 %7B fill: %23eeb6ab; %7D .cls-17 %7B fill: %231e2124; %7D .cls-19 %7B fill: %236666ad; %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='cls-3' x='52.37' y='122.03' width='182.4' height='126.4' rx='6.03' ry='6.03'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cg%3E%3Cg%3E%3Crect class='cls-1' x='95.63' y='4.29' width='58.39' height='58.39' rx='12.42' ry='12.42' transform='translate(184.99 -80.9) rotate(102.73)'/%3E%3Crect class='cls-3' x='102.79' y='11.45' width='44.06' height='44.06' rx='7.39' ry='7.39' transform='translate(10.45 -26.69) rotate(12.73)'/%3E%3Cpath class='cls-13' d='m135.2,42.74c-.73,3.25-2.39,5.46-4.95,6.62-2.57,1.17-5.37,1.4-8.4.72l-6.99-1.58c-1.98-.45-3.32-1.16-4.03-2.13-.71-.98-.84-2.45-.39-4.43l4.29-18.97c.61-2.68,1.97-4.6,4.09-5.76,2.12-1.15,4.8-1.37,8.05-.63,2.68.61,4.89,1.87,6.61,3.78,1.72,1.91,2.25,4.31,1.6,7.21-.26,1.13-.69,2.16-1.31,3.1-.62.94-1.47,1.65-2.55,2.15-.24.09-.35.22-.31.38.04.16.12.29.25.39,1.51.86,2.69,2.07,3.52,3.64.83,1.56,1.01,3.4.53,5.52Zm-5.19-1.17c.37-1.62.05-3.03-.94-4.22-.99-1.19-2.55-2.02-4.67-2.5l-1.29-.29c-1.55-.35-2.16-1.29-1.82-2.81s1.29-2.1,2.85-1.75l.87.2c1.27.29,2.33.1,3.19-.56.85-.66,1.45-1.73,1.78-3.22.3-1.34.04-2.48-.79-3.41-.83-.93-1.95-1.55-3.36-1.87-1.63-.37-2.98-.3-4.05.2-1.08.5-1.77,1.42-2.07,2.76l-4.07,18.01c-.14.64-.1,1.11.12,1.42.23.31.66.54,1.29.68l5.19,1.17c2.19.49,3.92.46,5.2-.11,1.28-.56,2.13-1.8,2.56-3.71Z'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Crect class='cls-20' x='52.37' y='122.03' width='182.4' height='126.4' rx='6.03' ry='6.03'/%3E%3Cg class='cls-24'%3E%3Crect class='cls-7' x='49.16' y='122.03' width='185.62' height='11.37'/%3E%3Cpath class='cls-2' d='m49.88,148.98v-15.62h41.03c1.48,0,2.68-1.2,2.68-2.68v-2.54c0-2.22,1.8-4.02,4.02-4.02h56.19c2.22,0,4.02,1.8,4.02,4.02v2.54c0,1.48,1.2,2.68,2.68,2.68h74.27v15.62H49.88Z'/%3E%3C/g%3E%3Crect class='cls-12' x='52.37' y='122.03' width='182.4' height='126.4' rx='6.03' ry='6.03'/%3E%3C/g%3E%3Cg%3E%3Crect class='cls-3' x='93.14' y='137.16' width='120.26' height='7.82' rx='3.48' ry='3.48'/%3E%3Cpath class='cls-2' d='m209.54,144.98h-6.5v-7.82h6.5c2.09,0,3.79,1.75,3.79,3.91h0c0,2.16-1.7,3.91-3.79,3.91Z'/%3E%3Cg%3E%3Cline class='cls-12' x1='207.29' y1='140.78' x2='210.76' y2='143'/%3E%3Cellipse class='cls-2' cx='207.29' cy='140.78' rx='1.98' ry='2.04'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cline class='cls-12' x1='59.06' y1='127.66' x2='63.33' y2='127.66'/%3E%3Crect class='cls-12' x='68.45' y='125.96' width='3.39' height='3.39'/%3E%3Cg%3E%3Cline class='cls-12' x1='77.43' y1='125.99' x2='80.81' y2='129.35'/%3E%3Cline class='cls-12' x1='80.81' y1='125.99' x2='77.43' y2='129.35'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cline class='cls-12' x1='59.06' y1='140.84' x2='65.03' y2='140.84'/%3E%3Cpolyline class='cls-12' points='61.05 139.16 59.06 140.84 61.05 142.53'/%3E%3C/g%3E%3Cg%3E%3Cline class='cls-12' x1='75.9' y1='140.84' x2='69.93' y2='140.84'/%3E%3Cpolyline class='cls-12' points='73.92 139.16 75.9 140.84 73.92 142.53'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-12' d='m83.13,143.24c-1.32,0-2.4-1.07-2.4-2.4s1.07-2.4,2.4-2.4,2.4,1.07,2.4,2.4'/%3E%3Cpolyline class='cls-12' points='86.84 140.15 85.53 141.69 84.22 140.15'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath class='cls-23' d='m95.67,185.93c-2.73-4.13-8.3-5.26-12.42-2.53-4.13,2.73-5.26,8.3-2.53,12.42l5.17,7.95,14.95-9.9-5.17-7.95Z'/%3E%3Cpath class='cls-12' d='m95.67,185.93c-2.73-4.13-8.3-5.26-12.42-2.53-4.13,2.73-5.26,8.3-2.53,12.42l5.17,7.95,14.95-9.9-5.17-7.95Z'/%3E%3C/g%3E%3Cpath class='cls-8' d='m90.91,182.83l-17.41-9.47c-1.47-.8-3.31-.26-4.11,1.21-.8,1.47-.26,3.31,1.21,4.11l11.6,6.31'/%3E%3Cpath class='cls-8' d='m84.64,183.53l-17.41-9.47c-1.47-.8-3.31-.26-4.11,1.21-.8,1.47-.26,3.31,1.21,4.11l17.41,9.47'/%3E%3Cpath class='cls-8' d='m83.25,187.3l-17.41-9.47c-1.47-.8-3.31-.26-4.11,1.21-.8,1.47-.26,3.31,1.21,4.11l17.41,9.47'/%3E%3Cpath class='cls-8' d='m81.73,190.6l-14.35-6.85c-1.51-.72-3.32-.08-4.04,1.43-.72,1.51-.08,3.32,1.43,4.04l17.39,8.29'/%3E%3Cpath class='cls-8' d='m96.66,188l-1.27-11.9c-.18-1.66-1.67-2.87-3.33-2.69-1.66.17-2.87,1.67-2.69,3.33l.76,7.16'/%3E%3C/g%3E%3Cpolygon class='cls-23' points='77.89 192.72 88.93 198.62 95.69 185.96 84.58 180.19 77.89 192.72'/%3E%3C/g%3E%3Cpath class='cls-4' d='m99.18,227.85c3.6,3.58,9.27,4.49,13.9,1.87l30.55-17.3c5.58-3.16,7.54-10.24,4.38-15.82-3.16-5.58-10.24-7.54-15.82-4.38l-30.55,17.3c-5.58,3.16-7.54,10.24-4.38,15.82.53.94,1.18,1.78,1.91,2.51Z'/%3E%3Cpath class='cls-4' d='m107.82,231.24c-3.93.14-7.85-1.67-10.24-5.15l-16.01-23.06,19.59-13.46,16.01,23.06'/%3E%3Cpath class='cls-4' d='m203.29,248.42h-72.29v-48.63c0-9.37,7.6-16.97,16.97-16.97h38.35c9.37,0,16.97,7.6,16.97,16.97v48.63Z'/%3E%3Cg%3E%3Cpath class='cls-10' d='m176.29,181.2l-14.87,5.93,5.85,9.63c.5.91,1.77.84,2.27-.12l6.78-13.1-.03-2.34Z'/%3E%3Cpath class='cls-10' d='m146.48,181.21l14.94,5.92-5.94,9.65c-.5.91-1.77.84-2.27-.13l-6.77-13.11.03-2.34Z'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath class='cls-18' d='m131.6,143.72c0-3.99,2-7.51,5.07-9.69,0-.07-.01-.13-.01-.2,0-6.61,5.49-11.98,12.27-11.98.44,0,.88.03,1.31.07,3.12-4.72,8.54-7.86,14.72-7.86,6.79,0,12.66,3.78,15.57,9.29,1.63-.62,3.41-.98,5.27-.98,8,0,14.48,6.33,14.48,14.14,0,2.67-.77,5.16-2.09,7.29,3.35,3.09,5.44,7.45,5.44,12.3,0,5.82-3.01,10.96-7.59,14.01.04.4.06.81.06,1.22,0,6.61-5.49,11.98-12.27,11.98-3.87,0-7.31-1.75-9.56-4.48-2.26,2.14-4.95,3.39-7.84,3.39-2.67,0-5.18-1.07-7.33-2.93-2.25,2.55-5.58,4.17-9.29,4.17-6.78,0-12.27-5.36-12.27-11.98,0-.44.03-.88.08-1.31-3.43-2.86-5.61-7.1-5.61-11.85,0-2.73.72-5.29,1.98-7.52-1.5-1.99-2.41-4.44-2.41-7.1Z'/%3E%3Cg%3E%3Cpath class='cls-8' d='m142.61,168.69c-3.08,2.71-8.14,1.97-11.3-1.64-3.16-3.61-3.22-8.73-.14-11.44,3.08-2.71,8.14-1.97,11.3,1.64'/%3E%3Cpath class='cls-8' d='m139.58,160.59s-3.09-4.42-6.74-2.11'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-23' d='m195.66,140.53c-4.03-10.97-15.33-18.93-28.87-19.15-17.01-.28-30.98,11.86-31.76,26.97-.21,4.05.56,7.96,2.11,11.53-.03.32-.06.65-.08.97-.66,12.68,9.93,23.85,24.04,25.07,2.85.25,5.64.07,8.29-.47h0c.18-.03.36-.08.54-.12.14-.03.29-.06.43-.1,23.62-5.15,33.21-25.93,25.29-44.7Z'/%3E%3Cpath class='cls-12' d='m195.66,140.53c-4.03-10.97-15.33-18.93-28.87-19.15-17.01-.28-30.98,11.86-31.76,26.97-.21,4.05.56,7.96,2.11,11.53-.03.32-.06.65-.08.97-.66,12.68,9.93,23.85,24.04,25.07,2.85.25,5.64.07,8.29-.47h0c.18-.03.36-.08.54-.12.14-.03.29-.06.43-.1,23.62-5.15,33.21-25.93,25.29-44.7Z'/%3E%3C/g%3E%3Cpath class='cls-22' d='m133.33,143.22l14.05-17.71,14.47-7.91,15.15,4.21,4.18,2.32,8.08,1.98,8.04,8.69.06,8.06,2.27,6.96-.15,11.59-10.4-1.54-12.53-27.22-15.17-.28s-13.38-.75-13.66-.75l-12.14,22.27-.99.05-1.28-10.71Z'/%3E%3Cg%3E%3Cpath class='cls-8' d='m186.15,174.7c3.96,2.02,9.09-.11,11.46-4.76,2.37-4.65,1.07-10.06-2.89-12.08-3.96-2.02-9.77.36-12.13,5.01'/%3E%3Cpath class='cls-8' d='m187.19,165.35s2.08-5.48,6.54-4.04'/%3E%3C/g%3E%3Cpolygon class='cls-22' points='153.05 132.96 158.59 136.01 170.03 134.58 171.38 129.29 149.96 130.99 153.05 132.96'/%3E%3Cpath class='cls-18' d='m158.72,136.31s10.38-3.9,14.25,4.47c3.42,7.37,4.88,21.54,15.6,20.12,0,0-2.76-2.86-2.27-16.82.33-9.47-9.33-20.49-19.33-16.11'/%3E%3Cpath class='cls-18' d='m158.7,136.35s-7.33-5.22-11.14,3.16c-3.22,7.09-5.65,22.38-15.94,21.01,0,0,5.67-8.25,3.78-17.02-1.91-8.88,8.18-19.8,17.78-15.61'/%3E%3C/g%3E%3Cpath class='cls-21' d='m145.12,174.87c-.83.41-1.71.63-2.59.66-2.59-3.35-4.25-7.3-4.67-11.52.44-.39.94-.73,1.49-1,3.27-1.6,7.22-.24,8.82,3.03,1.59,3.28.24,7.22-3.04,8.82Z'/%3E%3Ccircle class='cls-21' cx='174.32' cy='168.46' r='6.6'/%3E%3Cg%3E%3Cpath class='cls-12' d='m156.3,162.89c-.35.09-.73.11-1.11.04-1.35-.26-2.24-1.57-1.97-2.92s1.57-2.24,2.92-1.97c.66.13,1.21.51,1.57,1.02'/%3E%3Cpath class='cls-12' d='m165.02,166.19c-2.56,3.93-7.33,6.13-12.22,5.18-.77-.15-1.51-.37-2.21-.65'/%3E%3Cpath class='cls-12' d='m167.53,167.26c-1.96-.1-3.46-1.77-3.36-3.73'/%3E%3Ccircle class='cls-19' cx='163.62' cy='157.47' r='1.9' transform='translate(-27.37 34.62) rotate(-11.15)'/%3E%3Ccircle class='cls-19' cx='149.17' cy='156.95' r='1.9' transform='translate(-27.54 31.82) rotate(-11.15)'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-8' d='m174.84,210.92l-5.08-13.96c-2.04-5.6-7.03-8.7-11.02-6.55-3.99,2.15-5.47,8.72-3.43,14.33l4.32,11.87,15.21-5.69Z'/%3E%3Cg%3E%3Cpath class='cls-8' d='m160.6,189.99l-6.47-3.27-3.23.93c-1.46.42-2.98-.42-3.4-1.88-.42-1.46.42-2.98,1.88-3.4l4.27-1.23c.67-.19,1.38-.13,2,.19l8.31,4.2c.57.29,1.02.76,1.27,1.35,1.99,3.59,3.65,7.27,4.87,11.09'/%3E%3Cpath class='cls-8' d='m159.35,195.35l-8.28-1.26-2.7,5.16c-.49.94-1.44,1.47-2.43,1.47-.43,0-.86-.1-1.27-.31-1.34-.7-1.86-2.36-1.16-3.7l3.61-6.9c.54-1.04,1.68-1.62,2.85-1.44l10.64,1.62'/%3E%3Cpath class='cls-8' d='m159.98,200.36l-7.7-1.79-2.06,3.29c-.52.83-1.41,1.29-2.33,1.29-.5,0-1-.13-1.46-.42-1.28-.81-1.67-2.5-.87-3.78l3.04-4.84c.59-.94,1.69-1.44,2.79-1.25l9.6,1.64'/%3E%3Cpath class='cls-8' d='m156.39,204.41l-2.07-.86-1.01,1.63c-.52.84-1.42,1.3-2.34,1.3-.49,0-.99-.13-1.44-.41-1.29-.8-1.69-2.49-.89-3.78l2.24-3.61c.71-1.14,2.14-1.6,3.39-1.09l6.91,2.87'/%3E%3C/g%3E%3C/g%3E%3Cpath class='cls-4' d='m176.53,242.38c5.03.71,10.11-1.97,12.24-6.85l14.06-32.17c2.57-5.87-.11-12.72-5.99-15.28-5.87-2.57-12.72.11-15.28,5.99l-14.06,32.17c-2.57,5.87.11,12.72,5.99,15.28.99.44,2.02.72,3.04.86Z'/%3E%3Cpath class='cls-4' d='m178.23,242.49c-3.93,0-7.78-1.95-10.05-5.52l-15.16-23.63,20.07-12.74,15.16,23.63'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-15' d='m16.38,201.44h33.28c6.52,0,11.82,5.3,11.82,11.82v33.28c0,6.52-5.3,11.82-11.82,11.82H16.38c-6.52,0-11.82-5.3-11.82-11.82v-33.28c0-6.52,5.3-11.82,11.82-11.82Z' transform='translate(247.91 141.78) rotate(75.88)'/%3E%3Cpath class='cls-16' d='m18.93,208.42h28.17c4.08,0,7.39,3.31,7.39,7.39v28.17c0,4.08-3.31,7.39-7.39,7.39h-28.17c-4.08,0-7.39-3.31-7.39-7.39v-28.17c0-4.08,3.31-7.39,7.39-7.39Z' transform='translate(-55.1 15.01) rotate(-14.12)'/%3E%3Cpath class='cls-5' d='m47.25,239.23c-1.04,1.15-2.27,2.17-3.69,3.06-1.42.89-3.09,1.58-5.01,2.06-4.34,1.09-8.41.7-12.21-1.19-3.8-1.88-6.28-5.12-7.44-9.71s-.48-8.62,2.02-12.09c2.5-3.47,5.92-5.75,10.26-6.84,1.25-.32,2.51-.52,3.77-.62,1.26-.09,2.51.01,3.74.32,2.04.37,2.92,1.48,2.63,3.33-.29,1.85-1.49,2.64-3.6,2.37-.94-.21-1.81-.3-2.6-.28-.79.02-1.65.15-2.57.38-2.75.69-4.85,2.15-6.29,4.38s-1.81,4.71-1.12,7.47,2.18,4.89,4.41,6.15c2.22,1.26,4.76,1.53,7.59.82,1.17-.29,2.22-.71,3.14-1.26.93-.54,1.82-1.23,2.67-2.07,1.71-1.67,3.19-1.87,4.45-.59s1.19,2.72-.18,4.31Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-1' d='m90.31,124.53c-2.99-.42-5.96-.08-8.73.88-2.78-.96-5.74-1.3-8.73-.88-10.78,1.53-17.75,12.37-15.57,24.21,2.18,11.85,12.69,20.21,23.47,18.69.28-.04.56-.09.83-.14.28.05.55.1.83.14,10.78,1.53,21.29-6.84,23.47-18.69,2.18-11.85-4.79-22.69-15.57-24.21Z'/%3E%3Cg%3E%3Cpath class='cls-9' d='m78.12,119.06c3.77,3.77,3.46,10.18,3.46,10.18,0,0-6.41.31-10.18-3.46s-3.46-10.18-3.46-10.18c0,0,6.41-.31,10.18,3.46Z'/%3E%3Cline class='cls-9' x1='81.57' y1='129.24' x2='67.94' y2='115.6'/%3E%3C/g%3E%3Cpath class='cls-12' d='m88.49,130.83c-1.6,2.06-4.1,3.37-6.92,3.37s-5.31-1.32-6.92-3.37'/%3E%3Cpath class='cls-12' d='m81.57,134.21v-7.48c0-3.08,2.5-5.57,5.57-5.57h0'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath class='cls-17' d='m23.66,75.1c0-14.77.49-26.74,47.13-26.74s47.13,11.97,47.13,26.74-.49,26.74-47.13,26.74c-6.07,0-11.34-.2-15.95-.59.14,3.91,1.1,8.75,4,13.83,1,1.76-.77,3.78-2.68,3.1-5.72-2.05-13.98-7.1-16.19-19.35-16.07-4.46-16.32-13.41-16.32-23.74Z'/%3E%3Cpath class='cls-11' d='m26.68,73.03c0-14.77.49-26.74,47.13-26.74,46.64,0,47.13,11.97,47.13,26.74,0,14.77-.49,26.74-47.13,26.74-6.07,0-11.34-.2-15.95-.59.14,3.91,1.1,8.75,4,13.83,1,1.76-.77,3.78-2.68,3.1-5.72-2.05-13.98-7.1-16.19-19.35-16.07-4.46-16.32-13.41-16.32-23.74Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-13' d='m95.47,89.13v-21.57c5.72-4.31,9.32-11.28,8.95-19.07-.54-11.34-9.71-20.65-21.04-21.34-13.06-.8-23.91,9.56-23.91,22.45h0c-.02,2.27-.84,4.47-2.31,6.2l-4.07,4.79c-1.06,1.82.25,4.11,2.36,4.11h4.03v4.55l4.82,1.52c.76.18,1.3.86,1.3,1.64,0,.89-.69,1.62-1.57,1.68l-4.55.43v4.49c0,2.98,2.42,5.4,5.4,5.4h4.81c2.52,0,4.86-.76,6.8-2.06v6.78'/%3E%3Cline class='cls-15' x1='51.42' y1='68.87' x2='34.27' y2='63.1'/%3E%3Cline class='cls-15' x1='49.85' y1='71.58' x2='32.69' y2='71.58'/%3E%3Cline class='cls-15' x1='51.42' y1='74.29' x2='34.27' y2='80.06'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Crect class='cls-6' x='143.57' y='27.42' width='65.48' height='65.48' rx='13.58' ry='13.58' transform='translate(192.73 -125.41) rotate(76.21)'/%3E%3Crect class='cls-14' x='151.61' y='35.45' width='49.42' height='49.42' rx='7.39' ry='7.39' transform='translate(-9.26 43.75) rotate(-13.79)'/%3E%3Cpath class='cls-15' d='m194.23,70.4c1.06,1.58.73,2.9-.98,3.94-1.71,1.05-3,.8-3.88-.74l-3.7-5.87c-.28-.43-.59-.71-.96-.83-.36-.12-.78-.12-1.26,0l-10.18,2.5c-.55.14-.91.37-1.08.7-.17.34-.27.76-.32,1.27l-.65,7.06c-.15,2.13-1.21,3.16-3.19,3.11-1.98-.06-2.86-1.16-2.63-3.31l2.77-31.68c.27-2.66,1.49-4.26,3.66-4.79,2.17-.53,3.92.21,5.25,2.23l17.15,26.42Zm-19.57-19.92c-.18-.37-.4-.53-.68-.46s-.45.32-.51.75l-1,12.29c.02.42.11.69.26.81.16.13.39.15.71.08l7.22-1.77c.39-.1.65-.26.76-.5.11-.24.04-.53-.22-.89l-6.55-10.32Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.course-illust.korean {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 249.75 261.26'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 %7B stroke-width: 2px; %7D .cls-1, .cls-2, .cls-3, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 %7B stroke: %231e2124; %7D .cls-1, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 %7B stroke-linecap: round; stroke-linejoin: round; %7D .cls-2 %7B fill: %23eeb6ab; stroke-miterlimit: 10; %7D .cls-3 %7B fill: %23617be5; %7D .cls-4 %7B fill: none; stroke: %23eeb6ab; %7D .cls-5 %7B fill: %23f9fcfb; %7D .cls-6 %7B fill: %23a8befb; %7D .cls-7 %7B fill: %2397d2c1; %7D .cls-8 %7B fill: %23fdd100; %7D .cls-9 %7B fill: %23191919; %7D .cls-10 %7B fill: %231e2124; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cg%3E%3Crect class='cls-5' x='15.45' y='34.92' width='177.77' height='122.79' transform='translate(-24.32 36.23) rotate(-17.68)'/%3E%3Crect class='cls-4' x='17.73' y='71.31' width='15.53' height='15.53' transform='translate(-22.81 11.47) rotate(-17.68)'/%3E%3Crect class='cls-4' x='32.53' y='66.6' width='15.53' height='15.53' transform='translate(-20.68 15.74) rotate(-17.68)'/%3E%3Crect class='cls-4' x='47.32' y='61.88' width='15.53' height='15.53' transform='translate(-18.55 20.01) rotate(-17.68)'/%3E%3Crect class='cls-4' x='62.12' y='57.17' width='15.53' height='15.53' transform='translate(-16.42 24.28) rotate(-17.68)'/%3E%3Crect class='cls-4' x='76.91' y='52.45' width='15.53' height='15.53' transform='translate(-14.29 28.55) rotate(-17.68)'/%3E%3Crect class='cls-4' x='91.71' y='47.74' width='15.53' height='15.53' transform='translate(-12.16 32.82) rotate(-17.68)'/%3E%3Crect class='cls-4' x='106.5' y='43.02' width='15.53' height='15.53' transform='translate(-10.03 37.09) rotate(-17.68)'/%3E%3Crect class='cls-4' x='121.3' y='38.31' width='15.53' height='15.53' transform='translate(-7.9 41.36) rotate(-17.68)'/%3E%3Crect class='cls-4' x='136.09' y='33.59' width='15.53' height='15.53' transform='translate(-5.77 45.63) rotate(-17.68)'/%3E%3Crect class='cls-4' x='150.89' y='28.88' width='15.53' height='15.53' transform='translate(-3.63 49.9) rotate(-17.68)'/%3E%3Crect class='cls-4' x='17.5' y='65.15' width='155.29' height='4.65' transform='translate(-16 32.07) rotate(-17.68)'/%3E%3Crect class='cls-4' x='23.86' y='90.54' width='15.53' height='15.53' transform='translate(-28.36 14.24) rotate(-17.68)'/%3E%3Crect class='cls-4' x='38.65' y='85.83' width='15.53' height='15.53' transform='translate(-26.23 18.51) rotate(-17.68)'/%3E%3Crect class='cls-4' x='53.45' y='81.11' width='15.53' height='15.53' transform='translate(-24.1 22.78) rotate(-17.68)'/%3E%3Crect class='cls-4' x='68.25' y='76.4' width='15.53' height='15.53' transform='translate(-21.97 27.05) rotate(-17.68)'/%3E%3Crect class='cls-4' x='83.04' y='71.68' width='15.53' height='15.53' transform='translate(-19.84 31.32) rotate(-17.68)'/%3E%3Crect class='cls-4' x='97.84' y='66.97' width='15.53' height='15.53' transform='translate(-17.71 35.59) rotate(-17.68)'/%3E%3Crect class='cls-4' x='112.63' y='62.25' width='15.53' height='15.53' transform='translate(-15.58 39.86) rotate(-17.68)'/%3E%3Crect class='cls-4' x='127.43' y='57.54' width='15.53' height='15.53' transform='translate(-13.44 44.13) rotate(-17.68)'/%3E%3Crect class='cls-4' x='142.22' y='52.82' width='15.53' height='15.53' transform='translate(-11.31 48.4) rotate(-17.68)'/%3E%3Crect class='cls-4' x='157.02' y='48.11' width='15.53' height='15.53' transform='translate(-9.18 52.67) rotate(-17.68)'/%3E%3Crect class='cls-4' x='23.62' y='84.38' width='155.29' height='4.65' transform='translate(-21.55 34.84) rotate(-17.68)'/%3E%3Crect class='cls-4' x='29.99' y='109.77' width='15.53' height='15.53' transform='translate(-33.91 17.01) rotate(-17.68)'/%3E%3Crect class='cls-4' x='44.78' y='105.06' width='15.53' height='15.53' transform='translate(-31.78 21.28) rotate(-17.68)'/%3E%3Crect class='cls-4' x='59.58' y='100.34' width='15.53' height='15.53' transform='translate(-29.65 25.55) rotate(-17.68)'/%3E%3Crect class='cls-4' x='74.37' y='95.63' width='15.53' height='15.53' transform='translate(-27.52 29.82) rotate(-17.68)'/%3E%3Crect class='cls-4' x='89.17' y='90.91' width='15.53' height='15.53' transform='translate(-25.39 34.09) rotate(-17.68)'/%3E%3Crect class='cls-4' x='103.96' y='86.2' width='15.53' height='15.53' transform='translate(-23.25 38.36) rotate(-17.68)'/%3E%3Crect class='cls-4' x='118.76' y='81.48' width='15.53' height='15.53' transform='translate(-21.12 42.63) rotate(-17.68)'/%3E%3Crect class='cls-4' x='133.56' y='76.77' width='15.53' height='15.53' transform='translate(-18.99 46.9) rotate(-17.68)'/%3E%3Crect class='cls-4' x='148.35' y='72.05' width='15.53' height='15.53' transform='translate(-16.86 51.17) rotate(-17.68)'/%3E%3Crect class='cls-4' x='163.15' y='67.34' width='15.53' height='15.53' transform='translate(-14.73 55.44) rotate(-17.68)'/%3E%3Crect class='cls-4' x='29.75' y='103.61' width='155.29' height='4.65' transform='translate(-27.09 37.61) rotate(-17.68)'/%3E%3Crect class='cls-4' x='36.12' y='129' width='15.53' height='15.53' transform='translate(-39.46 19.78) rotate(-17.68)'/%3E%3Crect class='cls-4' x='50.91' y='124.29' width='15.53' height='15.53' transform='translate(-37.33 24.05) rotate(-17.68)'/%3E%3Crect class='cls-4' x='65.71' y='119.57' width='15.53' height='15.53' transform='translate(-35.2 28.32) rotate(-17.68)'/%3E%3Crect class='cls-4' x='80.5' y='114.86' width='15.53' height='15.53' transform='translate(-33.06 32.59) rotate(-17.68)'/%3E%3Crect class='cls-4' x='95.3' y='110.14' width='15.53' height='15.53' transform='translate(-30.93 36.86) rotate(-17.68)'/%3E%3Crect class='cls-4' x='110.09' y='105.43' width='15.53' height='15.53' transform='translate(-28.8 41.13) rotate(-17.68)'/%3E%3Crect class='cls-4' x='124.89' y='100.71' width='15.53' height='15.53' transform='translate(-26.67 45.4) rotate(-17.68)'/%3E%3Crect class='cls-4' x='139.68' y='96' width='15.53' height='15.53' transform='translate(-24.54 49.67) rotate(-17.68)'/%3E%3Crect class='cls-4' x='154.48' y='91.28' width='15.53' height='15.53' transform='translate(-22.41 53.94) rotate(-17.68)'/%3E%3Crect class='cls-4' x='169.27' y='86.57' width='15.53' height='15.53' transform='translate(-20.28 58.21) rotate(-17.68)'/%3E%3Crect class='cls-4' x='35.88' y='122.84' width='155.29' height='4.65' transform='translate(-32.64 40.38) rotate(-17.68)'/%3E%3Crect class='cls-4' x='42.24' y='148.23' width='15.53' height='15.53' transform='translate(-45.01 22.55) rotate(-17.68)'/%3E%3Crect class='cls-4' x='57.04' y='143.52' width='15.53' height='15.53' transform='translate(-42.87 26.82) rotate(-17.68)'/%3E%3Crect class='cls-4' x='71.83' y='138.8' width='15.53' height='15.53' transform='translate(-40.74 31.09) rotate(-17.68)'/%3E%3Crect class='cls-4' x='86.63' y='134.09' width='15.53' height='15.53' transform='translate(-38.61 35.36) rotate(-17.68)'/%3E%3Crect class='cls-4' x='101.43' y='129.37' width='15.53' height='15.53' transform='translate(-36.48 39.63) rotate(-17.68)'/%3E%3Crect class='cls-4' x='116.22' y='124.66' width='15.53' height='15.53' transform='translate(-34.35 43.9) rotate(-17.68)'/%3E%3Crect class='cls-4' x='131.02' y='119.94' width='15.53' height='15.53' transform='translate(-32.22 48.17) rotate(-17.68)'/%3E%3Crect class='cls-4' x='145.81' y='115.22' width='15.53' height='15.53' transform='translate(-30.09 52.44) rotate(-17.68)'/%3E%3Crect class='cls-4' x='160.61' y='110.51' width='15.53' height='15.53' transform='translate(-27.96 56.71) rotate(-17.68)'/%3E%3Crect class='cls-4' x='175.4' y='105.79' width='15.53' height='15.53' transform='translate(-25.83 60.98) rotate(-17.68)'/%3E%3C/g%3E%3Cg%3E%3Crect class='cls-8' x='7.79' y='184.17' width='100.91' height='13.26' transform='translate(-131.07 127.9) rotate(-54.65)'/%3E%3Crect class='cls-8' x='7.79' y='188.53' width='100.91' height='4.55' transform='translate(-131.07 127.9) rotate(-54.65)'/%3E%3Cpolygon class='cls-5' points='82.04 145.82 92.85 153.49 97.47 139.8 93.11 136.65 82.04 145.82'/%3E%3Cpath class='cls-9' d='m97.47,139.8l1.25-3.72c.54-1.62-1.37-2.93-2.69-1.85l-2.92,2.42,4.36,3.14Z'/%3E%3Cpath class='cls-2' d='m18.03,234.9h13.26v1.82c0,2.55-2.07,4.62-4.62,4.62h-4.03c-2.55,0-4.62-2.07-4.62-4.62v-1.82h0Z' transform='translate(142.33 29.64) rotate(35.35)'/%3E%3Crect class='cls-5' x='21.15' y='231.54' width='13.26' height='4.35' transform='translate(140.36 27.02) rotate(35.35)'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-3' d='m101.95,255.69l7.05-2.08c3.01-.89,5.54-2.94,7.04-5.69h0c3.12-5.74,10.31-7.86,16.04-4.74l.23.13-10.15-5.52-.23-.13c-5.74-3.12-12.92-1-16.04,4.74h0c-1.5,2.76-4.03,4.8-7.04,5.69l-7.05,2.08,9.54,1.01.61,4.51Z'/%3E%3Cpolygon class='cls-5' points='157.97 256.64 123.18 212.45 143.69 122.55 178.48 166.74 157.97 256.64'/%3E%3Cpolygon class='cls-5' points='157.97 256.64 113.88 216.23 134.39 126.33 178.48 166.74 157.97 256.64'/%3E%3Cpolygon class='cls-5' points='157.97 256.64 105.57 219.4 126.09 129.49 178.48 166.74 157.97 256.64'/%3E%3Cpolygon class='cls-5' points='157.97 256.64 208.49 231.92 229.01 142.02 178.48 166.74 157.97 256.64'/%3E%3Cpolygon class='cls-5' points='157.97 256.64 215.23 239.36 235.74 149.45 178.48 166.74 157.97 256.64'/%3E%3Cpolygon class='cls-5' points='157.97 256.64 221.34 245.81 241.85 155.91 178.48 166.74 157.97 256.64'/%3E%3Cpolygon class='cls-1' points='152.98 252.15 98.57 223.72 115.17 136.28 119.08 133.82 173.49 162.25 152.98 252.15'/%3E%3Cpolygon class='cls-1' points='164.42 254.76 225.78 252.74 248.75 166.75 246.29 162.84 184.93 164.86 164.42 254.76'/%3E%3Cpolygon class='cls-1' points='149.07 254.61 94.65 226.18 115.17 136.28 169.58 164.71 149.07 254.61'/%3E%3Cpolygon class='cls-1' points='166.88 258.68 228.24 256.66 248.75 166.75 187.39 168.77 166.88 258.68'/%3E%3Cpath class='cls-9' d='m182.94,164.4l-7.46-1.7c-2.98-.68-6.08-.54-8.98.4h0s9.17,15.98,9.17,15.98l15.2-10.42h0c-2.21-2.11-4.95-3.58-7.92-4.25Z'/%3E%3Cpath class='cls-1' d='m166.5,163.1h0s-20.9,91.6-20.9,91.6h0c7.61,3.42,16.02,5.34,24.37,5.56h0s20.9-91.6,20.9-91.6h0c-8.35-.22-16.75-2.14-24.37-5.56Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-10' d='m61.74,10.53c6.45-4.84,13.43-6.51,20.93-5.01,7.5,1.49,13.59,5.38,18.29,11.64,4.7,6.26,6.71,13.2,6.05,20.82-.66,7.61-4.22,13.84-10.68,18.68-6.45,4.84-13.43,6.51-20.93,5.01-7.5-1.5-13.59-5.38-18.29-11.64-4.7-6.26-6.71-13.21-6.05-20.82.67-7.62,4.23-13.85,10.68-18.68Zm10.67,14.24c-2.46,1.85-3.92,4.27-4.34,7.26-.43,2.99.29,5.72,2.14,8.19s4.27,3.92,7.26,4.34,5.72-.29,8.19-2.13,3.96-4.31,4.49-7.37c.53-3.06-.14-5.82-1.99-8.29-1.85-2.47-4.31-3.88-7.4-4.24-3.08-.36-5.86.39-8.33,2.24Z'/%3E%3Cpath class='cls-7' d='m60.7,6.54C67.15,1.71,74.13.03,81.62,1.53c7.5,1.49,13.59,5.38,18.29,11.64,4.7,6.26,6.71,13.2,6.05,20.82-.66,7.61-4.22,13.84-10.68,18.68-6.45,4.84-13.43,6.51-20.93,5.01-7.5-1.5-13.59-5.38-18.29-11.64-4.7-6.26-6.71-13.21-6.05-20.82.67-7.62,4.23-13.85,10.68-18.68Zm10.67,14.24c-2.46,1.85-3.92,4.27-4.34,7.26-.43,2.99.29,5.72,2.14,8.19,1.85,2.47,4.27,3.92,7.26,4.34s5.72-.29,8.19-2.13c2.47-1.85,3.96-4.31,4.49-7.37.53-3.06-.14-5.82-1.99-8.29s-4.31-3.88-7.4-4.24c-3.08-.36-5.86.39-8.33,2.24Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-10' d='m178.44,79.18c2.53,4.51,1.79,7.8-2.2,9.88-4,2.08-7.19,1.23-9.57-2.57l-7.37-12.44c-.52-.86-1.13-1.38-1.82-1.55-.7-.17-1.43-.09-2.22.24l-16.55,7.01c-4.99,2.12-8.56,1-10.72-3.36-2.16-4.35-.7-7.68,4.37-9.98l17.95-8.07c1.46-.93,2.59-1.83,3.38-2.71.79-.87,1.56-2.25,2.32-4.12l2.04-5.05c.38-.93.5-1.64.37-2.13-.13-.49-.57-.88-1.32-1.18l-8.41-3.4c-4.68-1.89-6.1-4.97-4.26-9.23,1.83-4.26,4.81-5.56,8.92-3.9l34.5,13.96c4.3,1.74,5.58,4.76,3.84,9.06-1.74,4.3-4.57,5.66-8.5,4.07l-7.57-3.06c-.94-.38-1.62-.44-2.05-.18-.43.26-.84.86-1.21,1.79l-2.04,5.05c-.61,1.5-.91,2.79-.91,3.87,0,1.09.27,2.29.83,3.6l8.2,14.42Z'/%3E%3Cpath class='cls-6' d='m178.44,74.76c2.53,4.51,1.79,7.8-2.2,9.88-4,2.08-7.19,1.23-9.57-2.57l-7.37-12.44c-.52-.86-1.13-1.38-1.82-1.55-.7-.17-1.43-.09-2.22.24l-16.55,7.01c-4.99,2.12-8.56,1-10.72-3.36-2.16-4.35-.7-7.68,4.37-9.98l17.95-8.07c1.46-.93,2.59-1.83,3.38-2.71.79-.87,1.56-2.25,2.32-4.12l2.04-5.05c.38-.93.5-1.64.37-2.13-.13-.49-.57-.88-1.32-1.18l-8.41-3.4c-4.68-1.89-6.1-4.97-4.26-9.23,1.83-4.26,4.81-5.56,8.92-3.9l34.5,13.96c4.3,1.74,5.58,4.76,3.84,9.06-1.74,4.3-4.57,5.66-8.5,4.07l-7.57-3.06c-.94-.38-1.62-.44-2.05-.18-.43.26-.84.86-1.21,1.79l-2.04,5.05c-.61,1.5-.91,2.79-.91,3.87,0,1.09.27,2.29.83,3.6l8.2,14.42Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-10' d='m70.7,88.77c4.52-1.32,7.35.1,8.47,4.26,1.12,4.16-.37,6.93-4.49,8.31l-12.64,3.6c-.62.24-1.14.66-1.56,1.26s-.51,1.21-.27,1.83l3.05,16.3c.85,4.87-.91,7.79-5.3,8.75-4.39.97-7.08-1.03-8.09-6.01l-3.48-17.61c-.47-1.9-1.07-3.28-1.81-4.14-.74-.86-2.02-1.92-3.83-3.19l-11.29-7.93c-3.76-2.64-4.36-5.87-1.8-9.69,2.57-3.81,5.88-4.3,9.95-1.45l11.07,7.77c1.51,1.06,2.75,1.76,3.74,2.12.99.36,2.23.27,3.72-.26l14.56-3.94Z'/%3E%3Cpath class='cls-1' d='m70.15,85.63c4.52-1.32,7.35.1,8.47,4.26,1.12,4.16-.37,6.93-4.49,8.31l-12.64,3.6c-.62.24-1.14.66-1.56,1.26s-.51,1.21-.27,1.83l3.05,16.3c.85,4.87-.91,7.79-5.3,8.75-4.39.97-7.08-1.03-8.09-6.01l-3.48-17.61c-.47-1.9-1.07-3.28-1.81-4.14-.74-.86-2.02-1.92-3.83-3.19l-11.29-7.93c-3.76-2.64-4.36-5.87-1.8-9.69,2.57-3.81,5.88-4.3,9.95-1.45l11.07,7.77c1.51,1.06,2.75,1.76,3.74,2.12.99.36,2.23.27,3.72-.26l14.56-3.94Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.course-illust.science {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248.42 267.88'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18, .cls-19, .cls-20, .cls-21, .cls-22 %7B stroke: %231e2124; stroke-width: 2px; %7D .cls-1, .cls-8, .cls-9, .cls-13, .cls-17, .cls-19, .cls-21 %7B stroke-linecap: round; stroke-linejoin: round; %7D .cls-2 %7B fill: %23ff7a52; %7D .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-10, .cls-11, .cls-12, .cls-14, .cls-15, .cls-16, .cls-18, .cls-20, .cls-22 %7B stroke-miterlimit: 10; %7D .cls-3 %7B fill: %2358595b; %7D .cls-4 %7B fill: %23808184; %7D .cls-5 %7B fill: %23424242; %7D .cls-6 %7B fill: none; %7D .cls-7 %7B fill: %23accdec; %7D .cls-8, .cls-16 %7B fill: %23fff; %7D .cls-9 %7B fill: %23617be5; %7D .cls-10 %7B fill: %232bc26c; %7D .cls-11 %7B fill: %23a6a8ab; %7D .cls-12 %7B fill: %23f1f1f2; %7D .cls-13 %7B fill: %2398ab00; %7D .cls-14 %7B fill: %23cdf6f3; %7D .cls-15 %7B fill: %23ffc85f; %7D .cls-17 %7B fill: %2397d2c1; %7D .cls-18 %7B fill: %236d6e70; %7D .cls-19 %7B fill: %23fdd100; %7D .cls-20 %7B fill: %23404041; %7D .cls-21 %7B fill: %23eeb6ab; %7D .cls-22 %7B fill: %23e6e7e8; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cg%3E%3Cg%3E%3Crect class='cls-14' x='149.48' y='152.42' width='20.96' height='5.56' rx='2.47' ry='2.47'/%3E%3Crect class='cls-14' x='181.89' y='152.42' width='20.96' height='5.56' rx='2.47' ry='2.47'/%3E%3Crect class='cls-14' x='213.33' y='152.42' width='20.96' height='5.56' rx='2.47' ry='2.47'/%3E%3Cg%3E%3Cg%3E%3Cpath class='cls-10' d='m231.44,203.58v30.29c0,4.18-3.38,7.56-7.58,7.56s-7.56-3.38-7.56-7.56v-30.29h15.14Z'/%3E%3Crect class='cls-14' x='216.3' y='157.98' width='15.14' height='45.6'/%3E%3Cpath class='cls-15' d='m200,184.87v49c0,4.18-3.38,7.56-7.58,7.56s-7.56-3.38-7.56-7.56v-49h15.14Z'/%3E%3Crect class='cls-14' x='184.87' y='157.98' width='15.14' height='26.89'/%3E%3Cpath class='cls-2' d='m167.59,195.61v38.26c0,4.18-3.38,7.56-7.56,7.56s-7.58-3.38-7.58-7.56v-38.26h15.14Z'/%3E%3Crect class='cls-14' x='152.45' y='157.98' width='15.14' height='37.63'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-6' d='m167.59,195.61v38.26c0,4.18-3.38,7.56-7.56,7.56s-7.58-3.38-7.58-7.56v-75.89h15.14v37.63Z'/%3E%3Cpath class='cls-6' d='m200,184.87v49c0,4.18-3.38,7.56-7.58,7.56s-7.56-3.38-7.56-7.56v-75.89h15.14v26.89Z'/%3E%3Cpath class='cls-6' d='m231.44,203.58v30.29c0,4.18-3.38,7.56-7.58,7.56s-7.56-3.38-7.56-7.56v-75.89h15.14v45.6Z'/%3E%3Cline class='cls-6' x1='152.45' y1='195.61' x2='167.59' y2='195.61'/%3E%3Cline class='cls-6' x1='184.87' y1='184.87' x2='200' y2='184.87'/%3E%3Cline class='cls-6' x1='216.3' y1='203.58' x2='231.44' y2='203.58'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Crect class='cls-5' x='135.43' y='157.98' width='7.58' height='91.2' rx='1.87' ry='1.87'/%3E%3Crect class='cls-5' x='239.84' y='157.98' width='7.58' height='91.2' rx='1.87' ry='1.87'/%3E%3Crect class='cls-5' x='143.01' y='165.73' width='96.83' height='7.07'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Crect class='cls-18' x='79.23' y='158.64' width='19.37' height='3.32' transform='translate(-62.24 56.6) rotate(-26.53)'/%3E%3Crect class='cls-18' x='72.5' y='150.62' width='3.32' height='19.37' transform='translate(-102.39 155.05) rotate(-63.47)'/%3E%3Cg%3E%3Cpath class='cls-11' d='m59.3,175.03c-.72,1.24-2.3,1.66-3.54.94h0c-1.24-.72-1.66-2.3-.95-3.54l16.23-28.06c.72-1.24,2.3-1.66,3.54-.95h0c1.24.72,1.66,2.3.95,3.54l-16.23,28.06Z'/%3E%3Cpath class='cls-11' d='m103.79,175.03c.72,1.24,2.3,1.66,3.54.94h0c1.24-.72,1.66-2.3.95-3.54l-16.23-28.06c-.72-1.24-2.3-1.66-3.54-.95h0c-1.24.72-1.66,2.3-.95,3.54l16.23,28.06Z'/%3E%3C/g%3E%3Cpath class='cls-20' d='m98.33,134.72c0,9.27-7.52,16.79-16.79,16.79s-16.79-7.52-16.79-16.79,7.52-16.79,16.79-16.79,16.79,7.52,16.79,16.79Z'/%3E%3Cg%3E%3Cg%3E%3Crect class='cls-12' x='47.98' y='57.91' width='35.94' height='20.56' transform='translate(-18.86 25.68) rotate(-19.34)'/%3E%3Crect class='cls-20' x='44.63' y='64.6' width='4.49' height='20.56' transform='translate(-22.15 19.74) rotate(-19.33)'/%3E%3Crect class='cls-20' x='75.58' y='51.98' width='7.54' height='23' transform='translate(-16.55 29.86) rotate(-19.34)'/%3E%3Cpath class='cls-7' d='m79.51,52.54l6.81,19.4c2.69-.95,3.35-6.05,1.47-11.41-1.88-5.36-5.59-8.93-8.28-7.99Z'/%3E%3Cpath class='cls-20' d='m65.69,76.41c-2.86,1-4.8,2.88-4.34,4.19l1.9,5.41,10.34-3.63-1.9-5.41c-.46-1.31-3.15-1.56-6-.56Z'/%3E%3C/g%3E%3Crect class='cls-3' x='20.42' y='108.41' width='16.08' height='38.25' transform='translate(-40.62 16.61) rotate(-19.33)'/%3E%3Crect class='cls-4' x='5.25' y='119.79' width='16.08' height='26.14' transform='translate(-43.24 11.89) rotate(-19.34)'/%3E%3Crect class='cls-20' x='31.03' y='94.85' width='13.62' height='58.79' transform='translate(-39.01 19.54) rotate(-19.34)'/%3E%3Crect class='cls-12' x='40.03' y='77.44' width='94.82' height='58.79' transform='translate(-30.44 34.98) rotate(-19.34)'/%3E%3Crect class='cls-20' x='110.09' y='63.2' width='22.73' height='63.4' transform='translate(-24.57 45.57) rotate(-19.34)'/%3E%3Cpath class='cls-7' d='m122.79,64.39l18.77,53.5c9.48-3.33,12.97-18,7.78-32.78-5.18-14.77-17.07-24.05-26.56-20.72Z'/%3E%3C/g%3E%3Cpath class='cls-11' d='m83.64,180.58c0,1.34-1.08,2.42-2.42,2.42h0c-1.34,0-2.42-1.08-2.42-2.42v-30.3c0-1.34,1.08-2.42,2.42-2.42h0c1.34,0,2.42,1.08,2.42,2.42v30.3Z'/%3E%3C/g%3E%3Cpath class='cls-3' d='m199.43,76.56l24.84,42.3c.93,1.6,3.66,1.74,6.1.32,2.44-1.42,3.66-3.88,2.72-5.47l-24.84-42.3-8.83,5.15Z'/%3E%3Cpath class='cls-20' d='m208.26,71.4c.93,1.6-.29,4.05-2.72,5.47-2.44,1.42-5.17,1.28-6.11-.32-.93-1.6.28-4.05,2.72-5.48,2.43-1.42,5.17-1.28,6.1.32Z'/%3E%3Cpath class='cls-20' d='m197.13,68.54l3.19,5.46c.61,1.05,2.26,1.21,3.69.38,1.43-.83,2.09-2.36,1.49-3.4l-3.19-5.46-5.18,3.03Z'/%3E%3Cpath class='cls-22' d='m214.61,19.21c10.23,17.51,4.32,40-13.19,50.23-17.51,10.22-40,4.32-50.23-13.2-10.22-17.51-4.32-40,13.2-50.22,17.51-10.23,39.99-4.32,50.22,13.19Z'/%3E%3Cpath class='cls-16' d='m208.31,22.9c8.19,14.03,3.45,32.04-10.57,40.22-14.03,8.19-32.04,3.46-40.22-10.56-8.19-14.03-3.46-32.03,10.57-40.23,14.02-8.19,32.04-3.47,40.23,10.57Z'/%3E%3Cg%3E%3Cpath class='cls-6' d='m178.25,55.64c-3.44-.89-4.14-9.64-1.57-19.53,2.57-9.89,7.45-17.19,10.88-16.29,3.44.89,4.14,9.64,1.57,19.53-2.57,9.89-7.45,17.19-10.88,16.29Z'/%3E%3Cpath class='cls-6' d='m165.09,42.73c-.96-3.42,6.24-8.43,16.08-11.19,9.84-2.76,18.6-2.23,19.56,1.19.96,3.42-6.24,8.43-16.08,11.19-9.84,2.76-18.6,2.23-19.56-1.19Z'/%3E%3Cpath class='cls-6' d='m169.78,24.68c-2.51,2.52,1.34,10.4,8.59,17.61,7.25,7.21,15.16,11.01,17.66,8.49,2.5-2.52-1.34-10.4-8.59-17.61-7.25-7.21-15.16-11.01-17.66-8.49Z'/%3E%3Cpath class='cls-16' d='m182.53,39.19c-.81-.21-1.29-1.04-1.08-1.85s1.04-1.29,1.85-1.08c.81.21,1.29,1.04,1.08,1.85s-1.04,1.29-1.85,1.08Z'/%3E%3Cpath class='cls-16' d='m189.54,24.24c-.81-.21-1.29-1.04-1.08-1.85s1.04-1.29,1.85-1.08,1.29,1.04,1.08,1.85-1.04,1.29-1.85,1.08Z'/%3E%3Cpath class='cls-16' d='m168.71,46.82c-.81-.21-1.29-1.04-1.08-1.85s1.04-1.29,1.85-1.08,1.29,1.04,1.08,1.85c-.21.81-1.04,1.29-1.85,1.08Z'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath class='cls-17' d='m1,224.89h57.23c4.87,0,8.83,3.96,8.83,8.83v6.63c0,4.87-3.96,8.83-8.83,8.83H1v-24.28h0Z' transform='translate(68.05 474.07) rotate(-180)'/%3E%3Cpath class='cls-9' d='m61.82,229.51v15.05c0,2.55,2.07,4.62,4.62,4.62h79.75s0-5.24,0-5.24h-79.13v-13.81h79.13s0-5.24,0-5.24h-79.75c-2.55,0-4.62,2.07-4.62,4.62Z'/%3E%3Crect class='cls-8' x='67.05' y='230.13' width='75.11' height='13.81'/%3E%3Crect class='cls-8' x='67.05' y='234.75' width='75.11' height='4.56' transform='translate(209.22 474.07) rotate(-180)'/%3E%3Cpath class='cls-1' d='m131.88,266.88l-4.55-5.85c-1.94-2.5-3.03-4.88-3.03-8.41h0c0-7.35-4.63-13.31-10.34-13.31h-.23s10.1,0,10.1,0h.23c5.71,0,10.34,5.96,10.34,13.31h0c0,3.53,1.09,5.91,3.03,8.41l4.55,5.85-7.75-4.13-2.35,4.13Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-21' d='m59.38,200.61h57.23c4.87,0,8.83,3.96,8.83,8.83v6.63c0,4.87-3.96,8.83-8.83,8.83h-57.23v-24.28h0Z'/%3E%3Cpath class='cls-19' d='m88.7,205.23v15.05c0,2.55-2.07,4.62-4.62,4.62H4.34v-5.24h79.13v-13.81H4.34v-5.24h79.75c2.55,0,4.62,2.07,4.62,4.62Z'/%3E%3Crect class='cls-8' x='8.35' y='205.85' width='75.11' height='13.81'/%3E%3Crect class='cls-8' x='8.35' y='210.47' width='75.11' height='4.56'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-13' d='m18.35,176.32h57.23c4.87,0,8.83,3.96,8.83,8.83v6.63c0,4.87-3.96,8.83-8.83,8.83H18.35v-24.28h0Z' transform='translate(102.76 376.93) rotate(-180)'/%3E%3Cpath class='cls-17' d='m55.08,180.94v15.05c0,2.55,2.07,4.62,4.62,4.62h79.75s0-5.24,0-5.24H60.32v-13.81h79.13s0-5.24,0-5.24H59.7c-2.55,0-4.62,2.07-4.62,4.62Z'/%3E%3Crect class='cls-8' x='60.32' y='181.56' width='75.11' height='13.81'/%3E%3Crect class='cls-8' x='60.32' y='186.19' width='75.11' height='4.56' transform='translate(195.75 376.93) rotate(-180)'/%3E%3Cpath class='cls-8' d='m50.28,200.61c-3.33,0-6.03-2.7-6.03-6.03v-12.23c0-3.33,2.7-6.03,6.03-6.03h4.24c-3.33,0-6.03,2.7-6.03,6.03v12.23c0,3.33,2.7,6.03,6.03,6.03h-4.24Z'/%3E%3Cpath class='cls-8' d='m28.44,200.61c-3.33,0-6.03-2.7-6.03-6.03v-12.23c0-3.33,2.7-6.03,6.03-6.03h4.24c-3.33,0-6.03,2.7-6.03,6.03v12.23c0,3.33,2.7,6.03,6.03,6.03h-4.24Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.course-illust.emotion {
  top: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245.28 247.32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 %7B stroke-linecap: round; stroke-linejoin: round; %7D .cls-1, .cls-4, .cls-10 %7B stroke: %231e2124; stroke-width: 2px; %7D .cls-11 %7B fill: %23ffc5c8; %7D .cls-11, .cls-12 %7B stroke-width: 0px; %7D .cls-2, .cls-3, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 %7B stroke-width: 1.6px; %7D .cls-2, .cls-6 %7B stroke: %23000; %7D .cls-2, .cls-7 %7B fill: none; %7D .cls-3 %7B fill: %23fff; %7D .cls-3, .cls-5, .cls-7, .cls-8, .cls-9 %7B stroke: %23040403; %7D .cls-4 %7B fill: %23ffdcd4; %7D .cls-5 %7B fill: %23ff9494; %7D .cls-10 %7B fill: %23ffc85f; stroke-miterlimit: 10; %7D .cls-6 %7B fill: %238f5442; %7D .cls-8 %7B fill: %23040403; %7D .cls-9 %7B fill: %23ffb2b2; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cg%3E%3Cpath class='cls-10' d='m131.8,88.52h3.9c32.79,0,59.41,26.62,59.41,59.41v98.39h-122.71v-98.39c0-32.79,26.62-59.41,59.41-59.41Z'/%3E%3Cpath class='cls-10' d='m133.31,88.69s-61.62-.77-95.85,72.24c-24.53,46.46-13.31,64.16,3.26,70.8,6.86,2.74,14.41,3.24,21.63,1.66,28.96-6.34,58.09-28.67,58.09-28.67l-20.07-34.31-29.53,10.73s9.18-14.27,11.85-17.28'/%3E%3Cpath class='cls-10' d='m134.19,88.69s61.62-.77,95.85,72.24c24.53,46.46,13.31,64.16-3.26,70.8-6.86,2.74-14.41,3.24-21.63,1.66-28.96-6.34-58.09-28.67-58.09-28.67l20.07-34.31,29.53,10.73s-9.18-14.27-11.85-17.28'/%3E%3Cg%3E%3Cpath class='cls-1' d='m133.31,187.71s80.03-39.31,54.63-73.56c-22.18-29.92-54.63,8.84-54.63,8.84,0,0-32.45-38.76-54.63-8.84-25.4,34.25,54.63,73.56,54.63,73.56Z'/%3E%3Cg%3E%3Cline class='cls-7' x1='133.33' y1='140.29' x2='133.33' y2='173.37'/%3E%3Cg%3E%3Cpath class='cls-3' d='m133.29,114.51c1.25,0,2.66.42,3.72,2.34,2.9,5.25-1.67,14.04-3.72,14.04-2.06,0-6.63-8.8-3.72-14.04,1.06-1.92,2.47-2.34,3.72-2.34Z'/%3E%3Cpath class='cls-3' d='m117.82,120.14c.96-.8,2.31-1.39,4.36-.6,5.6,2.15,7.75,11.83,6.17,13.15-1.58,1.32-10.73-2.48-11.88-8.36-.42-2.15.39-3.38,1.35-4.19Z'/%3E%3Cpath class='cls-3' d='m109.58,134.41c.22-1.23.88-2.55,2.95-3.26,5.67-1.95,13.54,4.08,13.18,6.11-.36,2.02-9.82,5-14.48,1.23-1.7-1.38-1.88-2.84-1.66-4.07Z'/%3E%3Cpath class='cls-3' d='m112.44,150.62c-.63-1.08-.96-2.52.17-4.4,3.09-5.14,13-5.58,14.02-3.8,1.03,1.78-4.31,10.14-10.3,10.25-2.19.04-3.26-.97-3.89-2.05Z'/%3E%3Cpath class='cls-3' d='m125.06,161.21c-1.18-.43-2.36-1.31-2.7-3.47-.93-5.92,6.37-12.63,8.3-11.92,1.93.7,3.22,10.53-1.3,14.47-1.65,1.44-3.12,1.36-4.3.93Z'/%3E%3Cpath class='cls-3' d='m141.53,161.21c-1.18.43-2.65.51-4.3-.93-4.52-3.94-3.24-13.77-1.3-14.47,1.93-.7,9.24,6,8.3,11.92-.34,2.17-1.52,3.05-2.7,3.47Z'/%3E%3Cpath class='cls-3' d='m154.14,150.62c-.63,1.08-1.7,2.09-3.89,2.05-5.99-.11-11.33-8.47-10.3-10.25,1.03-1.78,10.93-1.34,14.02,3.8,1.13,1.88.79,3.31.17,4.4Z'/%3E%3Cpath class='cls-3' d='m157,134.41c.22,1.23.05,2.69-1.66,4.07-4.66,3.77-14.12.8-14.48-1.23-.36-2.02,7.51-8.05,13.18-6.11,2.07.71,2.74,2.03,2.95,3.26Z'/%3E%3Cpath class='cls-3' d='m148.77,120.14c.96.8,1.77,2.04,1.35,4.19-1.15,5.88-10.3,9.69-11.88,8.36-1.58-1.32.58-11,6.17-13.15,2.05-.79,3.4-.21,4.36.6Z'/%3E%3Ccircle class='cls-10' cx='133.29' cy='138.59' r='12.3'/%3E%3C/g%3E%3C/g%3E%3Cpath class='cls-5' d='m152.09,160.22c1-.3,1.62,1.29.77,2.05s-1.9.15-2.88-.14c-.2-1-.71-2.11.14-2.88s2.36,0,1.97.96Z'/%3E%3Cpath class='cls-3' d='m108.81,172.89c12.42,9.06,24.5,14.99,24.5,14.99,0,0,12.06-5.92,24.47-14.97-6.81-2.59-15.3-4.13-24.51-4.13s-17.66,1.53-24.46,4.11Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-4' d='m162.38,171.02c-.79-1.64-2.42-2.55-4.09-2.53,1.5-1.4,1.88-3.71.77-5.55-1.26-2.08-4.02-2.68-6.14-1.49l-.14.08c.22-.96.13-2-.33-2.96-1.08-2.21-3.74-3.13-5.95-2.05l-15.76,7.68c-1.22.59-2.55.92-3.91.97l-2.77.09,2.78-1.19c2.49-1.07,3.79-3.93,2.77-6.44-1.04-2.56-3.97-3.75-6.5-2.67l-7.21,3.1c-5.32,2.28-9.84,6.03-13.08,10.83l-1.78,2.65,18.26,31.21,7.88-.9c6.44-.74,12.71-3,18.13-6.55l5.73-3.75c1.97-1.29,2.73-3.89,1.59-5.95-.77-1.39-2.14-2.19-3.59-2.3l11.39-6.42c2.06-1.16,2.98-3.74,1.95-5.87Z'/%3E%3Cline class='cls-9' x1='119.31' y1='167.3' x2='126.84' y2='164.07'/%3E%3Cline class='cls-7' x1='160.55' y1='176.83' x2='140.14' y2='188.34'/%3E%3Cline class='cls-7' x1='157.44' y1='169.13' x2='137.02' y2='180.64'/%3E%3Cpath class='cls-7' d='m152.45,158.57c1.08,2.21.16,4.88-2.05,5.95l-17.77,8.66'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-4' d='m165.39,168.89c-3.23-4.8-7.75-8.55-13.08-10.83l-7.21-3.1c-2.53-1.08-5.46.11-6.5,2.67-1.02,2.51.28,5.37,2.77,6.44l2.78,1.19-2.77-.09c-1.36-.04-2.69-.38-3.91-.97l-15.76-7.68c-2.21-1.08-4.88-.16-5.95,2.05-.47.96-.56,2-.33,2.96l-.14-.08c-2.12-1.19-4.88-.59-6.14,1.49-1.12,1.85-.73,4.15.77,5.55-1.67-.03-3.3.89-4.09,2.53-1.03,2.13-.11,4.71,1.95,5.87l11.39,6.42c-1.44.1-2.82.9-3.59,2.3-1.13,2.06-.38,4.66,1.59,5.95l5.73,3.75c5.42,3.55,11.69,5.81,18.13,6.55l7.21.82,18.55-31.71-1.4-2.08Z'/%3E%3Cline class='cls-9' x1='148.9' y1='167.3' x2='141.37' y2='164.07'/%3E%3Cline class='cls-7' x1='107.66' y1='176.83' x2='128.07' y2='188.34'/%3E%3Cline class='cls-7' x1='110.77' y1='169.13' x2='131.18' y2='180.64'/%3E%3Cpath class='cls-7' d='m115.76,158.57c-1.08,2.21-.16,4.88,2.05,5.95l17.77,8.66'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-6' d='m180.6,86.26c.57-4.21.59-8.58.59-12.83v-24.09c0-26.76-21.7-48.46-48.46-48.46-9.07,0-18.06,2.57-25.74,7.4-10.58,6.65-18.36,17.36-21.33,29.5-1.95,7.97-.73,16.73-.5,24.92.26,9.44.93,18.98.6,28.42-.26,7.35,4.77,13.37,11.08,16.82,5.96,3.26,12.8,4.43,19.49,5.55-3.27-4.81-5.25-10.47-5.69-16.26,2.48,3.97,6.58,6.88,11.14,7.93-2.49-2-2.65-14.12-.65-16.63,2.24-2.81,17.16-1.61,20.53-.22,1.8.74,3.99,1.62,4.92,3.4,1.55,2.95,1.26,7.4-.02,10.37-1.39,3.25-4.2,5.85-7.54,7,8.45,3.43,19.01.66,24.68-6.48-.24,4.13-2.94,8.02-6.71,9.69,3.03-.2,6.9-1.36,8.78-2.5,4.98-3.01,7.45-6.44,10.02-10.1,2.79-3.96,4.18-8.68,4.82-13.44Z'/%3E%3Cpath class='cls-2' d='m115.59,113.08s-17.77-4.64-13.9-36.03'/%3E%3Cpath class='cls-2' d='m91.6,69.2c-.54,15.04-2.45,30.43,5.23,38.73'/%3E%3Cpath class='cls-2' d='m161.39,108.74s5.77-5.44,5.77-28.07'/%3E%3Cpath class='cls-2' d='m144.31,110.4s15.69-.94,17.08-25.65'/%3E%3Cg%3E%3Cellipse class='cls-4' cx='94.98' cy='52.62' rx='11.74' ry='13.45'/%3E%3Cpath class='cls-4' d='m93.24,44.45s-4.49,0-4.49,7.71'/%3E%3C/g%3E%3Cg%3E%3Cellipse class='cls-4' cx='170.48' cy='52.62' rx='11.74' ry='13.45'/%3E%3Cpath class='cls-4' d='m172.55,44.37s4.9,0,4.9,7.71'/%3E%3C/g%3E%3Cpath class='cls-4' d='m121.12,58.84h26.33v30.92c0,7.04-5.71,12.75-12.75,12.75h-.84c-7.04,0-12.75-5.71-12.75-12.75v-30.92h0Z'/%3E%3Cpolygon class='cls-12' points='131.43 74.13 125.73 84.93 147.45 89.34 147.45 70.7 131.43 74.13'/%3E%3Ccircle class='cls-4' cx='133.17' cy='46.26' r='39.38'/%3E%3Cpath class='cls-6' d='m167.15,15.22c-1.93,11.77-18.43,23.96-26.89,24.37,2.05-4.71,8.18-13.73,8.75-18.84-4.12,9.56-17.37,15.46-29.23,18.43,5.94-7.65,8.52-12.48,13.09-19.69-6.65,9.83-16.85,18.55-37.47,17.5,6.52-3.01,15.65-12.56,21.99-19.3-7.05,6.87-17.32,20.05-27.15,20.66,0,0,.1-17.89,14.16-28.35,7.87-5.85,20.04-11.89,39.05-7.94,0,0,15.28,2.68,23.69,13.15Z'/%3E%3Cpath class='cls-2' d='m107.7,83.77c-.34,4.72.75,9.53,3.09,13.64'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cellipse class='cls-8' cx='121.45' cy='44.37' rx='3' ry='3.06'/%3E%3Cellipse class='cls-8' cx='143.46' cy='44.37' rx='3' ry='3.06'/%3E%3C/g%3E%3Cpath class='cls-7' d='m123.1,57.98c2.19,3.22,5.88,5.33,10.06,5.33s7.87-2.11,10.06-5.33'/%3E%3Cpath class='cls-7' d='m131.94,45.83c-2.01,0-3.64,1.63-3.64,3.64h0c0,2.01,1.63,3.64,3.64,3.64'/%3E%3C/g%3E%3Cg%3E%3Ccircle class='cls-10' cx='31.07' cy='43.5' r='15.05'/%3E%3Crect class='cls-10' x='29.93' y='13.26' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(62.14 37.94) rotate(-180)'/%3E%3Crect class='cls-10' x='41.31' y='16.05' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(69.96 60.72) rotate(-152.38)'/%3E%3Crect class='cls-10' x='50.09' y='23.8' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(56.19 88.43) rotate(-124.76)'/%3E%3Crect class='cls-10' x='54.27' y='34.74' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(22.16 100.46) rotate(-97.14)'/%3E%3Crect class='cls-10' x='52.91' y='46.38' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(-13.65 84.5) rotate(-69.52)'/%3E%3Crect class='cls-10' x='46.32' y='56.05' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(-29.11 47.48) rotate(-41.9)'/%3E%3Crect class='cls-10' x='35.98' y='61.57' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(-15.45 11.24) rotate(-14.28)'/%3E%3Crect class='cls-10' x='24.27' y='61.66' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(16.23 -4.05) rotate(13.34)'/%3E%3Crect class='cls-10' x='13.85' y='56.32' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(44.33 5.36) rotate(40.96)'/%3E%3Crect class='cls-10' x='7.26' y='46.75' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(54.17 25.49) rotate(68.58)'/%3E%3Crect class='cls-10' x='5.54' y='35.14' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(48.02 38.62) rotate(96.2)'/%3E%3Crect class='cls-10' x='9.55' y='24.14' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(41.44 37.58) rotate(123.82)'/%3E%3Crect class='cls-10' x='18.2' y='16.24' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(46.83 31.99) rotate(151.44)'/%3E%3C/g%3E%3Ccircle class='cls-11' cx='156.83' cy='54.03' r='6.6'/%3E%3Ccircle class='cls-11' cx='110.79' cy='54.03' r='6.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- 우측 진도 패널 --- */
.course-progress {
  background: var(--gry10);
  border-radius: 12px;
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.progress-title {
  margin: 0 0 8px;
  font-size: 1.9rem;
  color: var(--gry90);
  font-weight: 700;
}
.progress-rate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 19px 0 1px;
  font-size: 4rem;
  font-weight: 700;
  color: var(--gry90);
  line-height: 1;
}
.progress-rate strong {
  font-weight: 800;
}
.progress-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--gry70);
  margin: 10px 0 16px;
}
.progress-detail > div {
  display: inline-flex;
  align-items: center;
}
.progress-detail > div + div::before {
  content: "|";
  margin-right: 16px;
  font-size: 1.3rem;
  color: var(--gry20);
}
.progress-detail strong {
  color: #205fac;
  font-weight: 700;
}
.progress-detail dt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.progress-detail dd {
  margin: 0;
}

/* 진도바 */
.progress-bar {
  position: relative;
  width: 100%;
  height: 16px;
  border: 1px solid var(--gry20);
  background: var(--wht);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  display: block;
  height: 100%;
  background: var(--primary50);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.progress-fill.is-done {
  background: var(--green60);
}

.btn-continue {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  padding: 14px 22px;
  background: #2775d4;
  color: #fff;
  border-radius: 10px;
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-continue:hover,
.btn-continue:focus {
  background: #205fac;
  color: #fff;
}

/* --- 회차 필터 탭 --- */
.lesson-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  margin: 16px 0 8px;
  padding: 0;
  border-bottom: 1px solid #e6e8ea;
}
.lesson-tab {
  position: relative;
  background: transparent;
  border: 0;
  padding: 14px 20px;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gry70);
  cursor: pointer;
}
.lesson-tab em {
  font-style: normal;
  margin-left: 4px;
  font-weight: 500;
}
.lesson-tab:hover {
  color: var(--gry90);
}
.lesson-tab.is-active {
  color: #205fac;
  font-weight: 700;
}
.lesson-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: #205fac;
  border-radius: 2px;
}

/* --- 단원 리스트 --- */
.lesson-list {
  margin-top: 4px;
}
.video-class .lesson-list {
  margin-top: 40px;
  grid-template-columns: repeat(1, 1fr);
}
.unit-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}
.unit-item {
  border: 1px solid #e6e8ea;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.unit-item.is-open {
  border-color: var(--gry90);
  box-shadow: 0 4px 16px rgba(30, 33, 36, 0.05);
}
.unit-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 290px 50px;
  align-items: normal;
  gap: 10px;
  margin: auto;
  padding: 7px 71px 7px 7px;
}
.unit-summary .unit-row {
  grid-template-columns: 80px minmax(0, 1fr) auto;
  padding: 7px 30px 7px 7px;
}
.unit-summary .unit-row .btn {
  margin: auto;
}
.unit-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  border-radius: 10px;
  line-height: 1.4;
  text-align: center;
  background: var(--gry5);
}
.unit-label .unit-no {
  font-size: 1.5rem;
  color: var(--gry70);
}
.unit-label .unit-num {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gry90);
}
.unit-label .unit-num.small {
  font-size: 1.5rem;
  font-weight: 700;
}

.unit-main {
  margin-left: 20px;
  padding: 20px 0;
  min-width: 0;
}
.unit-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gry90);
  margin: 0 0 6px;
  line-height: 1.3;
}
.unit-title.sm {
  font-size: 1.7rem;
  margin: 2px 0 0;
}
.unit-desc {
  max-width: 90%;
  font-size: 1.7rem;
  line-height: 1.55;
  margin: 0;
}

.unit-status {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 30px auto 20px;
  min-width: 0;
}
.unit-status .progress-bar {
  width: 200px;
  max-width: 100%;
}
.video-class .lesson-list .unit-status .progress-bar {
  width: 250px;
}
.video-class .lesson-list .pre .unit-status .progress-bar,
.video-class .lesson-list .ing .unit-status .progress-bar {
  background-color: var(--gry5);
}
.unit-count {
  margin-left: auto;
  font-size: 1.7rem;
  color: var(--gry70);
}
.unit-count strong {
  color: var(--gry90);
  font-weight: 700;
}

/* 상태 뱃지 */
.badge-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 24px;
  padding: 0 10px;
  border-radius: 14px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.badge-status.done {
  background: var(--green60);
}
.badge-status.progress {
  background: #2775d4;
}
.badge-status.ready {
  background: #b1b8be;
}

/* 단원 토글 버튼 */
.unit-toggle {
  margin: auto;
  margin-left: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.unit-toggle:hover,
.unit-toggle:focus {
  background: #f4f5f6;
}
.ico-chevron {
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--gry90);
  border-bottom: 2px solid var(--gry90);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s;
}
.unit-item.is-open .ico-chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* 단원 펼침 영역 */
.unit-detail {
  border-top: 1px solid #e6e8ea;
}
.lesson-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lesson-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 240px 110px;
  align-items: center;
  gap: 20px;
  padding: 17px 30px 17px 16px;
  border-bottom: 1px solid var(--gry20);
}

.lesson-row .btn {
  margin-left: 10px;
}
.lesson-row:last-child {
  border-bottom: 0;
}
.lesson-row.pre {
  background-color: var(--gry5);
}

.lesson-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 56px;
  border-radius: 8px;
  background: #f4f5f6;
  color: var(--gry90);
  gap: 2px;
}
.done .lesson-state {
  background: var(--green60);
  color: #fff;
}
.ing .lesson-state {
  background: #2775d4;
  color: #fff;
}
.lesson-state.ready {
  background: #e6e8ea;
  color: var(--gry90);
}
.lesson-state .state-ico {
  width: 18px;
  height: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}
.done .lesson-state .ico-heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16.33'%3E%3Cg fill='%23ffffff' stroke-width= '0px'%3E%3Cpath d='m12.26,15.39c-1.25,1.25-3.27,1.25-4.52,0L1.58,9.23C-.53,7.12-.53,3.7,1.58,1.58c2.11-2.11,5.54-2.11,7.65,0l.77.77.76-.77c2.11-2.11,5.54-2.11,7.65,0,2.11,2.11,2.11,5.54,0,7.65l-6.16,6.16Z'/%3E%3C/g%3E%3C/svg%3E");
}
.ing .lesson-state .ico-play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.4 11.86'%3E%3Cg fill= '%23fff' stroke= 'none' stroke-linejoin= 'round' stroke-width= '2px'%3E%3Cpath d='m.7,10.13V1.72c0-.77.82-1.26,1.5-.9l6.95,4.2c.73.38.73,1.43,0,1.81l-6.95,4.2c-.68.36-1.5-.13-1.5-.9Z'/%3E%3C/g%3E%3C/svg%3E");
}
.lesson-state.ready .ico-play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.4 11.86'%3E%3Cg fill= '%238a949e' stroke= 'none' stroke-linejoin= 'round' stroke-width= '2px'%3E%3Cpath d='m.7,10.13V1.72c0-.77.82-1.26,1.5-.9l6.95,4.2c.73.38.73,1.43,0,1.81l-6.95,4.2c-.68.36-1.5-.13-1.5-.9Z'/%3E%3C/g%3E%3C/svg%3E");
}
.lesson-state .state-label {
  font-size: 1.5rem;
  font-weight: 400;
}

.lesson-meta-area {
  min-width: 0;
}
.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 1.5rem;
  color: var(--gry70);
  margin: 0 0 4px;
}
.lesson-meta .lesson-no {
  font-weight: 400;
  color: var(--gry70);
}
.lesson-meta .lesson-time {
  position: relative;
  padding-left: 10px;
}
.lesson-meta .lesson-time::before {
  content: "|";
  position: absolute;
  left: 0;
  color: #cdd1d5;
}
.lesson-name {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gry90);
  margin: 0;
}
.lesson-prog {
  text-align: right;
}
.lesson-prog .lesson-rate {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.done .lesson-prog .lesson-rate {
  color: var(--green60);
}
.ing .lesson-prog .lesson-rate {
  color: var(--primary50);
}

/* 회차 버튼들 */
/* .btn-lesson {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.btn-primary-sm {
    background: #2775D4;
    color: #fff;
    border: 1.5px solid #2775D4;
}
.btn-primary-sm:hover,
.btn-primary-sm:focus {
    background: #205fac;
    border-color: #205fac;
    color: #fff;
}
.btn-outline-sm {
    background: #fff;
    color: var(--gry90);
    border: 1.5px solid #cdd1d5;
}
.btn-outline-sm:hover,
.btn-outline-sm:focus {
    border-color: var(--gry90);
    background: #f4f5f6;
}
.btn-outline-md {
    background: #fff;
    color: var(--gry90);
    border: 1.5px solid var(--gry90);
    padding: 10px 22px;
    font-size: 1.4rem;
    border-radius: 8px;
}
.btn-outline-md:hover,
.btn-outline-md:focus {
    background: #f4f5f6;
} */

/* ==========================================================
   ★ 반응형 - lesson_detail
   ========================================================== */

@media (max-width: 1280px) {
  .course-summary {
    grid-template-columns: 1fr;
    padding: 28px;
  }
}

@media (max-width: 1024px) {
  .course-summary {
    grid-template-columns: 1fr;
  }
  .course-illust.math {
    top: 33px;
  }
  .course-illust.society {
    top: 28px;
  }
  .course-illust.english {
    top: 31px;
  }
  .course-illust.korean {
    top: 29px;
  }
  .course-illust.science {
    top: 32px;
  }
  .course-illust.emotion {
    top: 29px;
  }
  .course-progress {
    padding: 20px 15px;
    min-height: auto;
  }
  .course-title {
    font-size: 2.6rem;
  }
  .progress-title {
    font-size: 1.6rem;
  }

  .unit-row {
    grid-template-columns: 64px minmax(0, 1fr) 80px;
    grid-template-areas:
      "label main toggle"
      "status status status";
    row-gap: 14px;
    padding: 7px;
  }
  .unit-summary .unit-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas: "label main btn";
  }
  .unit-label {
    grid-area: label;
  }
  .unit-main {
    grid-area: main;
    margin: 0;
    padding: 16px 10px;
  }
  .unit-toggle {
    grid-area: toggle;
    margin-left: auto;
  }
  .unit-status {
    grid-area: status;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0 10px;
  }
  .unit-status .progress-bar {
    flex-basis: 100%;
    width: 100%;
  }
  .unit-summary .btn-lesson {
    grid-area: btn;
  }

  .lesson-row {
    grid-template-columns: 64px minmax(0, 1fr) 110px;
    grid-template-areas:
      "state meta btn"
      "state prog prog";
    row-gap: 8px;
    padding: 14px 18px;
  }
  .lesson-state {
    grid-area: state;
    height: 64px;
  }
  .lesson-meta-area {
    grid-area: meta;
  }
  .lesson-prog {
    grid-area: prog;
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
  }
  .lesson-prog .lesson-rate {
    min-width: 50px;
    text-align: right;
  }
  .btn-lesson {
    grid-area: btn;
    align-self: start;
  }
}

@media (max-width: 768px) {
  #container main.wrap {
    padding: 24px 16px 48px;
  }
  .wrap.video-class {
    padding: 0 16px 48px;
  }
  .course-head {
    padding-bottom: 5px;
  }
  .course-summary {
    margin-top: 20px;
    margin-bottom: 9px;
    padding: 20px;
    border-radius: 12px;
    gap: 18px;
  }
  .course-title {
    font-size: 2.8rem;
    gap: 8px;
  }
  .course-tag {
    font-size: 1.2rem;
    padding: 3px 9px;
  }
  .course-meta {
    padding-bottom: 10px;
    flex: 1 1 100%;
  }
  .course-meta > div:last-child::before {
    display: none;
  }
  .course-actions .btn {
    gap: 8px;
    padding: 0 16px;
    font-size: 1.6rem;
  }
  .course-illust.math {
    top: 63px;
  }
  .course-illust.society {
    top: 59px;
  }
  .course-illust.english {
    top: 61px;
  }
  .course-illust.korean {
    top: 59px;
  }
  .course-illust.science {
    top: 63px;
  }
  .course-illust.emotion {
    top: 45px;
  }
  .progress-rate {
    margin-top: 7px;
    font-size: 2.8rem;
    letter-spacing: -0.03rem;
  }
  .progress-detail {
    gap: 8px;
    font-size: 1.5rem;
  }
  .progress-detail > div + div::before {
    margin-right: 8px;
  }
  .course-desc {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .btn-course-action {
    padding: 9px 14px;
    font-size: 1.3rem;
  }
  .btn-continue {
    margin-top: 23px;
    padding: 12px 18px;
    font-size: 1.5rem;
  }

  .lesson-tabs {
    gap: 0;
  }
  .lesson-tab em {
    margin-left: 0;
  }
  .lesson-tab {
    flex: 1;
    font-size: 1.5rem;
    padding: 12px 0;
  }

  .unit-row {
    padding: 16px;
    gap: 14px;
  }
  .unit-label {
    flex-direction: row;
    gap: 5px;
    width: 100%;
    height: 32px;
    font-size: 1.4rem;
  }
  .unit-label .unit-num {
    font-size: 1.4rem;
  }
  .unit-title {
    font-size: 2rem;
  }
  .unit-count {
    margin-left: auto;
    font-size: 1.4rem;
  }
  .unit-desc {
    font-size: 1.4rem;
    line-height: 1.5;
  }
  .unit-row {
    gap: 0;
    grid-template-columns: 1fr;
    grid-template-areas: "label" "main" "status" "toggle";
    padding: 4px;
  }
  .unit-summary .unit-row {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "main" "btn";
    padding: 7px 7px 16px;
  }
  .lesson-row {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas: "state meta" "prog prog" "btn btn";
    gap: 10px;
  }
  .lesson-row .btn {
    grid-area: btn;
    justify-self: center;
  }
  .lesson-state {
    width: 44px;
    height: 44px;
  }
  .lesson-state .state-label {
    font-size: 1.2rem;
  }
  .lesson-state .state-ico {
    width: 12px;
    height: 12px;
  }
  .lesson-meta-area .lesson-meta {
    font-size: 1.2rem;
  }
  .lesson-meta-area .lesson-name {
    font-size: 1.6rem;
  }
  .lesson-row .lesson-prog {
    margin-top: 5px;
  }
  .lesson-prog .lesson-rate {
    margin: 0;
  }
  .btn-lesson {
    padding: 8px 12px;
    font-size: 1.3rem;
  }
  .btn-outline-md {
    padding: 9px 14px;
  }

  .farm-scene {
    min-width: 580px;
    overflow-x: auto;
  }
  .farm-scene .scroll-info {
    position: absolute;
    top: 40%;
    left: 30%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: url("../img/bg_scroll_info.png") no-repeat center;
    background-size: contain;
    transform: translateX(-100%);
  }
}

@media (max-width: 532px) {
  .course-illust.math {
    top: 88px;
  }
  .course-illust.society {
    top: 84px;
  }
  .course-illust.english {
    top: 86px;
  }
  .course-illust.korean {
    top: 85px;
  }
  .course-illust.science {
    top: 88px;
  }
  .course-illust.emotion {
    top: 85px;
  }
}

@media (max-width: 480px) {
  .course-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .course-meta {
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 1.4rem;
  }
  .course-meta > div + div::before {
    margin-right: 8px;
  }
  .breadcrumb {
    font-size: 1.4rem;
  }

  .btn-lesson {
    justify-self: stretch;
    width: 100%;
  }
}

/* 모션 최소화 환경 */
@media (prefers-reduced-motion: reduce) {
  .progress-fill,
  .ico-chevron,
  .unit-item,
  .btn-continue,
  .btn-lesson,
  .btn-course-action,
  .btn-back {
    transition: none !important;
  }
}

/* 포커스 가시성 강화 */
.lesson-tab:focus-visible,
.unit-toggle:focus-visible,
.btn-back:focus-visible,
.btn-course-action:focus-visible,
.btn-continue:focus-visible,
.btn-lesson:focus-visible {
  outline: 2px solid #205fac;
  outline-offset: 2px;
}

/* ====================================================
   메인 개인화 영역
   ==================================================== */
.featured-lesson {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 80px;
  margin-bottom: 92px;
  padding: 0 80px;
}
.featured-media {
  position: relative;
  flex: 0 0 48%;
  overflow: hidden;
  border: 1px solid var(--gry20);
  border-radius: 12px;
  aspect-ratio: 16/9;
}
.featured-media a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.featured-media::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  display: block;
  height: 100%;
  background-color: rgba(30, 33, 36, 0.2);
}
.featured-media::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background: url("../img/ico_video_play.png") no-repeat center;
  transform: translate(-50%, -50%);
}
.featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: calc(100%);
}
.featured-content {
  flex: 1 1 0;
  padding: 40px 40px 40px 0;
}
.featured-title {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 10px;
  margin: 16px 0 14px;
  font-size: 4rem;
  font-weight: 800;
  color: var(--gry90);
  line-height: 1.25;
}
.featured-desc {
  margin-bottom: 14px;
  font-size: 1.9rem;
  line-height: 1.6;
  color: var(--gry90);
}
.featured-goals {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.featured-goals li {
  position: relative;
  margin-bottom: 4px;
  padding-left: 14px;
  font-size: 1.7rem;
  color: var(--gry70);
}
.featured-goals li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: #888;
}
.featured-meta {
  margin-bottom: 20px;
  font-size: 1.7rem;
  color: var(--gry70);
}
.featured-meta strong {
  color: var(--primary60);
  font-weight: 700;
}
.featured-meta .accent {
  color: var(--point60);
}
.featured-meta-sep {
  margin: 0 8px;
  color: #ccc;
}

/* ====================================================
   레슨 카드 목록 (lesson-list / lesson-card)
   ==================================================== */
.lesson-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.lesson-card {
  display: flex;
  border: 1px solid #cbd1d7;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.lesson-card:hover {
  border-color: var(--gry90);
  box-shadow: 0px 10px 16px 0px rgba(68, 68, 68, 0.16);
}
.lesson-thumb {
  position: relative;
  flex: 1 1 40%;
  height: 222px;
  overflow: hidden;
}
.lesson-thumb a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.lesson-thumb::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(30, 33, 36, 0.2);
}
.lesson-thumb::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  width: 48px;
  height: 48px;
  background: url(../img/ico_video_play.png) no-repeat center;
  transform: translate(-50%, -50%);
  background-size: contain;
}
.lesson-thumb .thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lesson-thumb .card-top {
  position: relative;
  z-index: 2;
  padding: 12px 14px;
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.4;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.2) 60%,
    transparent 100%
  );
}
.lesson-thumb .thumb-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: calc(100%);
  z-index: 2;
}

.lesson-body {
  flex: 1 1 60%;
}
.lesson-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px;
}
.lesson-meta-info {
  flex: 1 1 0;
  font-size: 1.7rem;
  color: var(--gry70);
  line-height: 1.4;
}
.lesson-meta-info strong {
  color: var(--gry90);
  font-weight: 700;
}
.lesson-meta-info strong.time {
  color: var(--primary60);
}
.lesson-meta-info .accent {
  color: var(--point50);
  font-weight: 700;
}
.lesson-seq {
  color: var(--gry90);
}
.lsep {
  margin: 0 5px;
  color: #ccc;
}
.mob-br {
  display: none;
}

/* PC에서 토글 버튼 숨기기 */
.lesson-toggle {
  display: none;
}

/* PC에서 학습하기 버튼 표시 */
.pc-btn {
  flex-shrink: 0;
}
/* 모바일 전용 학습하기 버튼은 PC에서 숨기기 */
.mob-btn {
  display: none;
}

/* 학습목표 영역 — PC에서는 항상 표시 */
.lesson-goals {
  padding: 20px 22px;
  min-height: 130px;
  max-height: 130px;
  overflow-y: auto;
  background-color: var(--gry5);
}
/* PC: aria-hidden 속성과 무관하게 항상 표시 */
.lesson-goals[aria-hidden="true"] {
  display: block;
}
.goals-label {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gry90);
  margin-bottom: 6px;
}
.lesson-goals ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lesson-goals ul li {
  font-size: 1.5rem;
  color: #555;
  padding-left: 14px;
  position: relative;
  margin-bottom: 3px;
  line-height: 1.5;
}
.lesson-goals ul li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: #999;
}

/* accent */
.accent {
  color: var(--point50);
}

/* 공지사항 상세 */
.view-wrap {
  margin-top: 25px;
  padding: 36px 40px 40px;
  border-radius: 16px;
  border: 1px solid var(--gry20);
}
.view-wrap .board-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gry90);
}
.view-wrap .board-tit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 2.4rem;
  font-weight: 700;
}
.view-wrap .board-info {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  color: var(--gry70);
}
.view-wrap .board-info dl {
  position: relative;
  display: inline-flex;
  gap: 5px;
  margin-left: 14px;
  padding-left: 11px;
}
.view-wrap .board-info li:not(:first-child) dl::before {
  position: absolute;
  top: 3px;
  left: 0;
  content: "";
  width: 1px;
  height: 14px;
  background-color: var(--gry20);
}
.view-wrap .board-info dl dd {
  font-weight: 700;
}
.view-wrap .board-cont {
  padding: 40px 0 10px;
  line-height: 1.6;
  font-size: 1.7rem;
  font-weight: 400;
}
.view-wrap .download-box {
  margin-top: 40px;
}
.view-wrap .download-box .btn {
  padding: 0 17px;
  font-size: 1.5rem;
  color: var(--gry90);
  border: 1px solid var(--gry90);
  border-radius: 8px;
}
/* Q&A 작성 - 상단 안내문 */
.view-wrap .write-guide {
  display: flex;
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gry90);
}
.view-wrap .write-guide-ico {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: url("/img/SVG/ico_caution.svg") no-repeat center / contain;
}
.view-wrap .write-guide-txt p {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--gry90);
}
.view-wrap .write-guide-txt p.point {
  font-weight: 400;
  color: var(--point60);
}
/* Q&A 작성 - 작성 항목 */
.view-wrap .write-form {
  margin-top: 0;
  border-top: 0;
}
.view-wrap .write-form textarea.form-control {
  height: 200px;
  resize: vertical;
}
.view-wrap .write-form .form-row .form-label {
  max-width: 148px;
}
.view-wrap .file-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.view-wrap .file-drop {
  position: relative;
}
.view-wrap .file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.view-wrap .file-drop-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  font-size: 1.7rem;
  color: var(--gry90);
  border: 1px dashed var(--gry20);
  border-radius: 8px;
  cursor: pointer;
  background-color: var(--gry5);
}
.view-wrap .file-drop-ico {
  flex: none;
  width: 18px;
  height: 18px;
  background: url("/img/SVG/ico_upload.svg") no-repeat center / contain;
}
.view-wrap .file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.view-wrap .file-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  font-size: 1.5rem;
  color: var(--gry90);
  border: 1px solid var(--gry20);
  border-radius: 8px;
}
.view-wrap .file-del {
  padding: 0 10px 0 16px;
  height: 100%;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--gry50);
  cursor: pointer;
}
.view-wrap .file-del:hover {
  color: var(--gry90);
}
/* 답글(답변) 영역 */
.view-wrap .comment-box {
  margin-top: 50px;
}
.view-wrap .comment {
  padding: 24px 28px;
  background-color: var(--primary5);
  border-radius: 12px;
}
.view-wrap .comment + .comment {
  margin-top: 12px;
}
.view-wrap .comment-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.5rem;
  color: var(--gry70);
}
.view-wrap .comment-mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-left: 1.5px solid var(--gry50);
  border-bottom: 1.5px solid var(--gry50);
}
.view-wrap .comment-date {
  font-weight: 700;
  color: var(--gry90);
}
.view-wrap .comment-cont {
  margin-top: 12px;
  padding-left: 18px;
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--gry90);
}
.view-wrap .comment-cont p + p {
  margin-top: 4px;
}

@media (max-width: 1551px) {
  .featured-lesson {
    padding: 0;
  }
  .lesson-card {
    flex-direction: column;
  }
  .lesson-thumb {
    flex: auto;
  }
}

@media (max-width: 1024px) {
  .featured-lesson {
    flex-direction: column;
    gap: 0;
    margin-top: -25px;
    margin-bottom: 28px;
    padding: 0;
    border: 1px solid var(--gry20);
    border-radius: 12px;
  }
  .featured-media {
    flex: none;
    width: 100%;
    height: auto;
    border-width: 0 0 1px 0;
    border-radius: 12px 12px 0 0;
  }
  .featured-media img {
    aspect-ratio: 16 / 9;
  }
  .featured-content {
    padding: 20px 15px 24px;
    width: 100%;
  }
  .featured-title {
    font-size: 2.2em;
    margin: 12px 0 10px;
  }
  .featured-desc {
    font-size: 1.6rem;
    line-height: 1.5;
  }
  .featured-goals li {
    font-size: 1.4rem;
  }
  .featured-meta {
    font-size: 1.4rem;
  }
  .thumb-bar {
    background: rgba(255, 255, 255, 0.3);
  }
}
@media (max-width: 767px) {
  main.wrap::before {
    top: -75px;
    left: 0;
    width: 100%;
  }
  .section {
    margin-bottom: 34px;
  }
  .section-title {
    font-size: 2.4rem;
  }
  .panel-head {
    margin-bottom: 0;
  }
  .bottom-notice {
    margin-top: 0;
  }
  .featured-title {
    margin-top: 0;
  }
  /* 레슨 목록 */
  .lesson-list {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
  }
  .lesson-meta-row {
    padding: 15px;
  }
  .lesson-thumb {
    padding-bottom: calc(56.25% - 52px);
    height: auto;
  }
  .lesson-thumb .card-top {
    font-size: 1.6rem;
  }
  .lesson-thumb .card-top .badge {
    margin-right: 10px;
  }
  .lesson-meta-info {
    font-size: 1.4rem;
    line-height: 1.5;
  }

  /* 모바일: 토글 버튼 표시, pc-btn 숨김 */
  .lesson-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .toggle-icon {
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -4px;
  }
  .lesson-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(-135deg);
    margin-top: 4px;
  }
  .goals-label {
    font-size: 1.4rem;
  }
  .pc-btn {
    display: none;
  }

  /* 모바일 학습목표 토글 — PC의 aria-hidden 무시 규칙을 덮어씀 */
  .lesson-goals,
  .lesson-goals[aria-hidden="true"] {
    display: none;
  }
  .lesson-goals.is-open {
    display: block;
  }
  .lesson-goals ul li {
    font-size: 1.4rem;
  }
  .mob-btn {
    display: inline-flex;
    margin-top: 12px;
    width: 100%;
    justify-content: center;
  }
  .mob-br {
    display: block;
  }
  .lsep.mob-hide {
    display: none;
  }
  .panel {
    padding: 20px 15px;
  }
  .bottom-notice .notice-cols {
    display: flex;
    flex-direction: column;
  }
  .bottom-notice .panel-title {
    font-size: 2.4rem;
  }
  .bottom-notice .notice-item > a {
    font-size: 1.4rem;
  }
  .bottom-notice .notice-date {
    font-size: 1.4rem;
  }
  .bottom-notice .notice-item .link-box {
    max-width: calc(100% - 104px);
  }
  .view-wrap {
    margin-top: 13px;
    padding: 22px 15px;
  }
  .view-wrap .board-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .view-wrap .board-tit {
    flex-direction: column;
    align-items: flex-start;
    font-size: 1.8rem;
  }
  .view-wrap .board-info {
    margin-top: 7px;
    font-size: 1.5rem;
  }
  .view-wrap .board-info li:first-child dl {
    padding-left: 0;
    margin-left: 0;
  }
  .view-wrap .board-info li:not(:first-child) dl::before {
    height: 11px;
  }
  .view-wrap .board-cont {
    padding: 22px 0 0;
    font-size: 1.5rem;
  }
  .view-wrap .download-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
  }
  .view-wrap .download-box .btn {
    height: 38px;
  }
  .view-wrap .download-box .btn + .btn {
    margin-left: 0;
  }
  .view-wrap .comment-box {
    margin-top: 22px;
  }
  .view-wrap .comment {
    padding: 18px 18px;
  }
  .view-wrap .comment-cont {
    padding-left: 14px;
    font-size: 1.5rem;
  }
  /* Q&A 작성 - 모바일: 라벨 세로 배치 */
  .view-wrap .write-form .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .view-wrap .write-form .form-label {
    width: 100%;
    padding: 0;
  }
  .view-wrap .file-drop-label {
    font-size: 1.4rem;
  }
  .view-wrap .write-form textarea.form-control {
    height: 160px;
  }
}

/* ==========================================================
   아이디 / 비밀번호 찾기 모달
   ========================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-content: center;
}
.modal-overlay.is-open {
  display: flex;
}

.modal-dialog {
  padding: 30px;
  width: 600px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gry90);
  margin: 0;
}
.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 3rem;
  line-height: 1;
  color: var(--gry90);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.modal-close:hover {
  background: #f4f5f6;
}

.modal-tabs {
  display: flex;
  border-bottom: 1px solid #e6e8ea;
}
.modal-tab {
  flex: 1;
  padding: 14px 0;
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--gry70);
  background: none;
  border: none;
  border-bottom: 4px solid transparent;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.modal-tab:hover {
  color: var(--gry90);
}
.modal-tab.active {
  color: var(--primary60, #205fac);
  border-bottom-color: var(--primary60, #205fac);
  font-weight: 700;
}

.modal-body {
  margin-top: 24px;
}
.modal-notice {
  padding: 0 0 10px 20px;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gry90);
  text-indent: -19px;
  line-height: 1.5;
  border-bottom: 1px solid var(--gry90);
}
.result-title {
  margin-top: 27px;
}

.result-box {
}

.tbl-wrap .tbl .empty {
  display: inline-flex;
  align-items: center;
  padding-left: 145px;
  height: 120px;
  font-size: 1.7rem;
  background: url("../img/bg_no_result.png") no-repeat left center;
}

.modal-field .chk-area {
  margin-bottom: 8px;
}
.modal-field input[type="text"]:focus {
  border-color: var(--primary60, #205fac);
}
.modal-body .btn-wrap {
  margin-top: 30px;
}

.radio-group {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.5rem;
  color: var(--gry90);
  cursor: pointer;
}
.radio-label input[type="radio"] {
  accent-color: var(--primary60, #205fac);
  width: 16px;
  height: 16px;
}

.phone-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.phone-dash {
  font-size: 1.6rem;
  color: #6d7882;
  flex-shrink: 0;
}

/* 결과 목록 */
.find-result-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.find-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #e6e8ea;
  font-size: 1.5rem;
  color: var(--gry90);
}
.find-result-item strong {
  font-weight: 700;
}
.find-result-item span:last-child {
  color: #6d7882;
  font-size: 1.4rem;
}
.find-result-empty {
  padding: 20px 0;
  text-align: center;
  font-size: 1.5rem;
  color: #6d7882;
}

/* ==========================================================
   ★ 회원가입 (join_step01.html)
   ========================================================== */
.wrap.join {
  max-width: 1040px;
}
/* 페이지 타이틀 + 스텝 바 */
.join-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 60px;
}
.join-title {
  flex: 1 1 30%;
  font-size: 4rem;
  font-weight: 800;
  color: var(--gry90);
  white-space: nowrap;
}
.join-body {
  margin-top: 50px;
}

/* 스텝 인디케이터 */
.join-step {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex: 1 1 60%;
  padding: 0;
  max-width: 600px;
}
.join-step > * {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--gry90);
  text-align: center;
  cursor: default;
}
/* 스텝 연결선 */
.join-step > * + *::before {
  content: "";
  position: absolute;
  top: 29px;
  right: 50%;
  width: 100%;
  height: 1px;
  background: var(--gry20);
  z-index: 0;
}
/* 스텝 아이콘 원 */
.join-step > * .step-ico {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--gry20);
  background: #fff;
  color: var(--gry30);
}
.join-step > * .step-ico svg {
  width: 24px;
  height: 24px;
}
/* 현재 스텝 */
.join-step > .current {
  color: var(--primary50);
  font-weight: 700;
}
.join-step > .current .step-ico {
  background: var(--primary50);
  border-color: var(--primary50);
  color: #fff;
}
.join-step > .current .step-ico svg g {
  stroke: #fff;
}
/* 완료된 스텝 */
.join-step > .done .step-ico {
  background: var(--primary10);
  border-color: var(--primary50);
  color: var(--primary50);
}
/* 숨김 텍스트 */
.join-step .hdn {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.join-step .step-label {
  font-size: 1.5rem;
}

/* 회원 유형 선택 섹션 */
.mem-type-chk {
  padding: 40px;
  border: 1px solid var(--gry20);
  border-radius: 20px;
  background: var(--wht);
}
.mem-type-chk .info-text {
  margin-bottom: 13px;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gry90);
}
.mem-type-chk .form-required-notice {
  padding: 10px 0;
  font-size: 1.7rem;
  color: var(--point60);
  text-align: right;
}
.mem-type-chk .form-required-notice svg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* 카드 그리드 */
.mem-type-chk .chk-area {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mem-type-chk .chk-area.duo {
  grid-template-columns: repeat(2, 1fr);
}
.mem-type-chk .chk-area.triple {
  grid-template-columns: repeat(3, 1fr);
}

.mem-type-chk .roundbox {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 20px;
  height: 300px;
  border: 1px solid transparent;
  border-radius: 16px;
  text-align: center;
  background-color: var(--gry5);
  background-repeat: no-repeat;
  background-position: center 89px;
  background-size: auto 141px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.mem-type-chk .duo .roundbox {
  height: 330px;
}
.mem-type-chk .triple .roundbox {
  margin-top: 40px;
  height: 356px;
}
.mem-type-chk .triple .roundbox label {
  margin-bottom: 7px;
  height: auto;
}
.mem-type-chk .roundbox:hover {
  border-color: var(--gry90);
  background-color: var(--wht);
  box-shadow: 0px 10px 16px 0px rgba(68, 68, 68, 0.16);
}
.mem-type-chk .roundbox .icon-box {
  margin: 28px 0 20px;
  width: 57px;
  height: 57px;
}
.mem-type-chk .roundbox .icon-box svg {
  width: 100%;
  height: 100%;
}
.mem-type-chk .roundbox .exp-txt {
  font-size: 1.5rem;
  color: var(--gry70);
}
.mem-type-chk .roundbox .exp-txt > span {
  font-weight: 700;
}
/* 카드 라디오 숨김 */
.mem-type-chk .roundbox input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.mem-type-chk .roundbox:has(input[type="radio"]:checked) {
  border-color: var(--primary50);
  background: #fff;
  box-shadow: 0 4px 24px rgba(39, 117, 212, 0.18);
}

/* 카드 레이블 */
.mem-type-chk .roundbox label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 45px;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gry90);
  line-height: 1.2;
}
.mem-type-chk .roundbox label span {
  display: block;
  flex: 1 1 100%;
  font-size: 1.7rem;
  font-weight: 400;
}

/* 카드 일러스트 영역 */
.mem-type-chk .roundbox.student {
  background-image: url("../img/member/bg_student.png");
}
.mem-type-chk .roundbox.hospital {
  background-image: url("../img/member/bg_hospital.png");
}
.mem-type-chk .roundbox.teacher {
  background-image: url("../img/member/bg_teacher.png");
}
.mem-type-chk .roundbox.institution {
  background-image: url("../img/member/bg_institution.png");
}

/* 가입하기 버튼 */
.mem-type-chk .roundbox .btn {
  margin-top: auto;
  width: 100%;
  font-weight: 700;
}
.mem-type-chk .roundbox .btn:hover {
  background: var(--primary60);
}
.mem-type-chk .user-result {
  margin: 0 auto 30px;
  padding: 30px;
  color: var(--gry90);
  border-radius: 8px;
  border: 1px solid var(--gry90);
}
.mem-type-chk .user-result .id-txt {
  font-size: 2.4rem;
  font-weight: bold;
}
.mem-type-chk .user-result dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.7rem;
  color: var(--gry50);
}
.mem-type-chk .sm-round {
  padding: 30px;
  color: var(--gry90);
  text-align: center;
  background-color: var(--primary5);
}
.mem-type-chk .sm-round P {
  font-size: 1.7rem;
  font-weight: 400;
}
.mem-type-chk .sm-round dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 2.4rem;
  font-weight: 700;
}
.mem-type-chk .sm-round.small {
  text-align: left;
}
.mem-type-chk .sm-round.small dl {
  margin-top: 0;
  font-size: 1.7rem;
}
.mem-type-chk .sm-round.small dd {
  margin-left: 10px;
  font-weight: 400;
}

/*  */
.my-verification {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 354px);
}
.my-verification .login-box {
  margin-bottom: 6px;
  border-radius: 12px;
  border: 1px solid var(--gry30);
}
.my-verification .login-box h2 {
  margin-bottom: 6px;
}
.my-verification .login-box p {
  margin-bottom: 31px;
  font-size: 1.7rem;
  color: var(--gry90);
}
.my-verification .login-box .login-input-group label {
  margin-bottom: 11px;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gry90);
}
.my-verification
  .login-box
  .login-input-group
  input[type="text"]
  + .ctl-password {
  top: 46px;
}
.my-verification
  .login-box
  .login-input-group
  input[type="password"]
  + .ctl-password {
  top: 46px;
}

.modal-body .error-box {
  padding: 48px 48px 45px;
  text-align: center;
}
.modal-body .error-box .icon {
  margin: 0 auto 45px;
  width: 60px;
  height: 60px;
}
.modal-body .error-box .error-txt {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gry90);
}
.modal-body .error-box .error-sub {
  display: block;
  margin-top: 20px;
  font-size: 1.5rem;
  color: var(--gry70);
}
/* 반응형 */
@media (max-width: 900px) {
  .join-header {
    flex-wrap: wrap;
    padding: 20px 0;
  }
  .join-title {
    flex: 1 1 100%;
    font-size: 2.8rem;
  }
  .join-step {
    flex: 1 1 100%;
    gap: 0;
    padding: 20px 0 0;
    max-width: 100%;
  }
  .join-step .step-label {
    font-size: 1.2rem;
    letter-spacing: -0.07rem;
  }
  .mem-type-chk {
    padding: 19px 15px;
  }
  .mem-type-chk .info-text {
    margin-bottom: 20px;
    font-size: 2rem;
  }
  .mem-type-chk .chk-area {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .mem-type-chk .roundbox {
    padding: 20px 12px 12px;
    background-position-y: 105px;
  }
  .mem-type-chk .roundbox label {
    height: 35px;
    font-size: 1.6rem;
  }
  .roundbox button[type="submit"] {
    height: 40px;
    font-size: 1.4rem;
  }
}
@media (max-width: 767px) {
  .my-verification
    .login-box
    .login-input-group
    input[type="password"]
    + .ctl-password {
    top: 42px;
  }
  .my-verification
    .login-box
    .login-input-group
    input[type="text"]
    + .ctl-password {
    top: 42px;
  }
}
@media (max-width: 540px) {
  .join-step > * + *::before {
    top: 19px;
  }
  .join-step > * .step-ico {
    width: 40px;
    height: 40px;
  }
  .join-step > * .step-ico svg {
    width: 17px;
    height: 17px;
  }
  .mem-type-chk .roundbox {
    height: 210px;
    background-position-y: 61px;
    background-size: auto 95px;
  }
}

/* ==========================================================
   ★ 회원가입 Step02 — 약관동의
   ========================================================== */

/* 안내 문구 */
.agree-guide {
  font-size: 1.7rem;
  color: var(--gry90);
  line-height: 1.4;
  margin-bottom: 28px;
}

/* 약관 섹션 */
.agree-section {
  margin-bottom: 32px;
}
.agree-section:last-of-type {
  margin-bottom: 0;
}
.agree-section-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gry90);
  padding-bottom: 12px;
  margin-bottom: 0;
}

/* 약관 내용 박스 (스크롤) */
.agree-box {
  height: 240px;
  overflow-y: auto;
  border: 1px solid var(--gry10);
  border-radius: 8px;
}
.agree-box:focus {
  outline: 2px solid var(--primary50);
  outline-offset: 0;
}
.agree-box-inner {
  padding: 20px 24px;
}
.agree-chapter {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gry90);
  margin-bottom: 14px;
}
.agree-article {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gry70);
  margin: 16px 0 8px;
}
.agree-text {
  font-size: 1.5rem;
  color: var(--gry90);
  line-height: 1.75;
  word-break: keep-all;
}

/* 동의 라디오 버튼 */
.agree-radio-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 14px 20px;
  background: #fff;
}
.agree-radio {
  display: flex;
  align-items: center;
  gap: 8px;
}
.agree-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary50);
  cursor: pointer;
  flex-shrink: 0;
}
.agree-radio label {
  font-size: 1.7rem;
  color: var(--gry90);
  cursor: pointer;
}

/* 버튼 영역 */
.agree-btn-wrap {
  display: flex;
  justify-content: center;
  padding-top: 30px;
}
.agree-btn-wrap .btn {
  min-width: 90px;
  font-size: 1.9rem;
  font-weight: 700;
}
.agree-btn-wrap .btn-outline-sm {
  background: #fff;
  color: var(--gry70);
  border: 1.5px solid var(--gry20);
}
.agree-btn-wrap .btn-outline-sm:hover {
  border-color: var(--gry50);
  background: var(--gry5);
}
.agree-btn-wrap .btn-primary-sm {
  background: var(--primary50);
  color: #fff;
  border: 1.5px solid var(--primary50);
}
.agree-btn-wrap .btn-primary-sm:hover {
  background: var(--primary60);
  border-color: var(--primary60);
}

/* =============================================
   회원가입 여부 확인 (join_step03)
   ============================================= */
.certify-desc {
  margin-bottom: 31px;
  font-size: 1.7rem;
  color: var(--gry90);
}

.certify-guide {
  margin: 0 0 0;
  padding-bottom: 12px;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gry90);
}

.certify-guide strong {
  font-weight: 500;
}
.form-template {
  border-top: 1px solid var(--gry90);
}
.form-template .form-template {
  margin-top: 20px;
}
/* 인증 폼 행 레이아웃 */

/* 텍스트 인풋 */
.certify-form .form-input {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 46px;
  padding: 0 12px;
  font-size: 1.6rem;
  border: 1px solid var(--gry30);
  border-radius: 6px;
  background: #fff;
  color: var(--gry90);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.certify-form .form-input:focus {
  border-color: var(--primary50);
  border-width: 2px;
}

/* 날짜 입력 */
.input-date-wrap {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 300px;
}

.input-date-wrap .input-date {
  padding-right: 40px;
  background: url("../img/svg/ico_cal.svg") no-repeat calc(100% - 16px) center;
  background-size: 20px auto;
}

/* 브라우저 기본 달력 아이콘 숨기기 (크롬/엣지 - webkit 계열) */
.input-date-wrap .input-date::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  width: 40px;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.input-date-wrap .input-date::-webkit-inner-spin-button,
.input-date-wrap .input-date::-webkit-clear-button {
  display: none;
}

/* 휴대폰번호 그룹 */
.phone-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1.7rem;
}

.phone-wrap .form-select {
  width: auto;
  min-width: 100px;
  height: 46px;
  padding: 0 28px 0 12px;
  font-size: 1.6rem;
}

.phone-divider {
  color: var(--gry50);
  font-size: 1.8rem;
  flex-shrink: 0;
}

.input-tel {
  width: 100px;
  max-width: 100px;
}

.input-btn-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.7rem;
}

.input-btn-wrap .devider {
  margin: 0 -4px;
}

.input-btn-wrap + .input-btn-wrap {
  margin-top: 10px;
}

.input-mail {
  width: 180px;
  max-width: 180px;
}

/* 확인 버튼 영역 */
.certify-btn-wrap {
  margin-top: 30px;
  text-align: center;
}

.certify-btn-wrap .btn-lg {
  min-width: 160px;
}

/* 반응형 */
@media (max-width: 768px) {
  .certify-guide {
    font-size: 1.4rem;
  }
  .certify-desc {
    font-size: 1.4rem;
  }
  .form-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 13px 0;
  }
  .form-row .form-label {
    padding: 0;
    width: 100%;
    font-size: 1.5rem;
  }
  .certify-form .form-input {
    max-width: 100%;
  }
  .phone-wrap .form-select {
    min-width: 82px;
    height: 40px;
  }
  .input-date-wrap {
    max-width: 100%;
  }
  .input-tel {
    width: 90px;
  }
  .input-btn-wrap {
    flex-wrap: wrap;
  }
  .input-mail {
    width: 140px;
    max-width: 140px;
  }
  .mem-type-chk .form-required-notice {
    font-size: 1.5rem;
  }

  .mem-type-chk .sm-round {
    padding: 15px;
  }
  .mem-type-chk .sm-round P {
    font-size: 1.4rem;
  }
  .mem-type-chk .sm-round dl {
    font-size: 2rem;
  }
  .mem-type-chk .user-result dl {
    font-size: 1.4rem;
  }
  .mem-type-chk .chk-area.duo,
  .mem-type-chk .chk-area.triple {
    grid-template-columns: repeat(1, 1fr);
  }
  .mem-type-chk .duo .roundbox,
  .mem-type-chk .triple .roundbox {
    align-items: flex-start;
    position: relative;
    padding: 20px 12px 20px 67px;
    height: auto;
    text-align: left;
  }
  .mem-type-chk .roundbox .icon-box {
    width: 36px;
    height: 36px;
  }
  .mem-type-chk .duo .roundbox .icon-box,
  .mem-type-chk .triple .roundbox .icon-box {
    position: absolute;
    top: 24px;
    left: 16px;
    margin: 0;
    width: 36px;
    height: 36px;
  }
  .mem-type-chk .roundbox .exp-txt {
    font-size: 1.4rem;
  }
  .mem-type-chk .duo .roundbox .exp-txt br {
    display: none;
  }
  .mem-type-chk .duo .roundbox button[type="submit"] {
    margin-top: 17px;
    width: auto;
  }
  .mem-type-chk .sm-round.small dl {
    flex-direction: column;
    align-items: flex-start;
    font-size: 1.4rem;
  }
  .tbl-wrap .tbl .empty {
    padding-left: 80px;
    font-size: 1.5rem;
    background-size: 80px auto;
    background-position-x: 20%;
  }
  .modal-dialog {
    padding: 15px;
  }

  .agree-btn-wrap .btn {
    font-size: 1.7rem;
  }
}

/* =============================================
   회원가입 완료 (join_step05)
   ============================================= */
.join-complete {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 55px;
}

.join-complete-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  padding: 100px;
  overflow: hidden;
  border: 1px solid var(--gry20);
  background-color: var(--primary5);
  background-repeat: no-repeat;
  background-position-y: bottom;
}

/* 학생 카드 - 하늘색 계열 */
.join-complete-card-student {
  background-position-x: 400px;
  background-image: url("../img/member/bg_student_complete.png");
}

/* 교사/관리자 카드 - 연노랑 계열 */
.join-complete-card-teacher {
  background-position-x: 500px;
  background-image: url("../img/member/bg_teacher_complete.png");
}

.join-complete-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.join-complete-card-title {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--gry90);
  line-height: 1.4;
}

.join-complete-card-title strong {
  font-weight: 700;
  color: var(--primary60);
}

.join-complete-card-desc {
  font-size: 1.7rem;
  color: var(--gry90);
  line-height: 1.6;
  margin-top: 4px;
}

.join-complete-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 0 28px;
  height: 48px;
  background-color: var(--primary50);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s;
  align-self: flex-start;
}

.join-complete-card-btn:hover {
  background-color: var(--primary60);
}

.join-complete-card-img {
  flex-shrink: 0;
  width: 260px;
  text-align: right;
}

.join-complete-card-img img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .join-body,
  .join-complete {
    margin-top: 0;
  }
  .join-complete-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 30px 220px;
    gap: 0;
    background-position: center bottom;
  }
  .join-complete-card-student {
    background-size: auto 216px;
  }
  .join-complete-card-teacher {
    background-size: auto 202px;
  }
  .join-complete-card-body {
    gap: 0;
  }
  .join-complete-card-img {
    width: 100%;
    text-align: center;
  }
  .join-complete-card-title {
    font-size: 2.4rem;
  }
  .join-complete-card-desc {
    margin-top: 10px;
    font-size: 1.4rem;
  }
  .join-complete-card-desc br {
    display: none;
  }
  .join-complete-card-btn {
    margin-top: 15px;
    padding: 0 15px;
    height: 40px;
    font-size: 1.4rem;
  }
  .agree-guide {
    margin-bottom: 15px;
  }
  .agree-guide,
  .agree-chapter,
  .agree-article,
  .agree-text {
    font-size: 1.4rem;
  }
  .agree-section-title {
    font-size: 1.6rem;
  }
  .agree-radio label {
    font-size: 1.4rem;
  }
  .agree-box-inner {
    padding: 15px;
  }
  .agree-radio.gender label {
    font-size: 1.7rem;
  }
}
/* ==========================================================
   출석현황 (Attendance) - 요약 + 캘린더
   ========================================================== */
.attend-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  gap: 15px;
  margin-top: 27px;
}
.attend-card-tit {
  margin: 0 0 13px;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--gry90);
}

.attendance-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 22%;
  padding: 27px 30px 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
}
.attendance-wrap:not(.attend-days)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 120px;
  background: #ddd;
}

.attendance-item {
  position: relative;
  text-align: center;
}

.attendance-title {
  margin-bottom: 5px;
  font-size: 1.7rem;
  color: var(--gry90);
}

.donut-chart {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto;
}

.donut-chart svg {
  width: 100%;
  height: 100%;
  transform: rotate(-77deg);
}

.donut-bg {
  fill: none;
  stroke: transparent;
  stroke-width: 8;
}

.donut-blue,
.donut-orange {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.donut-blue {
  stroke: var(--primary40);

  /* 원 둘레 = 약 220 */
  stroke-dasharray: calc((220 * var(--blue) / 100) - 15) 220;
}

.donut-orange {
  stroke: var(--point40);

  stroke-dasharray: calc((220 * var(--orange) / 100) - 15) 220;

  /* 파란색 끝 지점부터 시작 */
  stroke-dashoffset: calc(-220 * var(--blue) / 100);
}

.percent {
  position: absolute;
  font-size: 1.9rem;
  font-weight: 700;
}

.percent.orange {
  left: -18px;
  top: 15px;
  color: var(--point60);
}

.percent.blue {
  right: -18px;
  bottom: 10px;
  color: var(--primary60);
}

.ratio-legend {
  display: flex;
  gap: 24px;
  margin-top: 13px;
}
.ratio-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1.5rem;
  color: var(--gry70);
}
.legend-dot {
  width: 20px;
  height: 20px;
  border-radius: 3px;
}
.legend-dot.is-video {
  background: var(--point40);
}
.legend-dot.is-school {
  background: var(--primary40);
}

/* 수업일수 표 */
.attend-day-wrap {
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 12px;
}
.attend-day-wrap .tbl {
  margin-top: 0;
}
/* 월간 캘린더 */
.attend-calendar {
  margin-top: 65px;
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cal-select {
  height: 40px;
  padding: 0 36px 0 14px;
  border: 1px solid var(--gry20);
  border-radius: 8px;
  background: var(--wht)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2358616a' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  font-size: 1.4rem;
  color: var(--gry90);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 auto;
}
.cal-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--gry90);
  min-width: 130px;
  text-align: center;
}
.cal-arrow {
  width: 40px;
  height: 40px;
  border: 1px solid var(--gry20);
  border-radius: 50%;
  line-height: 1;
  color: var(--gry60);
  cursor: pointer;
  background: var(--wht);
}
.cal-arrow:hover,
.cal-arrow:focus {
  background: var(--gry5);
}

.cal-arrow svg {
  width: auto;
  height: 14px;
}

.cal-tbl-wrap {
  border-radius: 12px;
  border: 1px solid var(--gry20);
  overflow: hidden;
}
.cal-table {
}
.cal-table thead th {
  padding: 10px 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gry90);
  border: 1px solid var(--gry10);
  border-top: 0 none;
  border-bottom: 1px solid var(--primary10);
  background-color: var(--primary5);
}
.cal-table thead th.sat {
  color: var(--primary50);
}
.cal-table thead th.sun {
  color: var(--point50);
}
.cal-table tbody tr:first-child td {
  border-top: 0 none;
}
.cal-table tbody td {
  position: relative;
  height: 120px;
  padding: 8px;
  border: 1px solid var(--gry10);
  vertical-align: top;
  text-align: left;
}
.cal-date {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--gry70);
}
.bg-exam {
  background: url("../img/bg_legend_exam.png") repeat;
  background-position-x: -6px;
}
.bg-holiday {
  background: url("../img/bg_legend_holiday.png") repeat;
}
.bg-vacation {
  background: url("../img/bg_legend_vacation.png") repeat;
}
.bg-out {
  background: var(--gry5);
}
.cal-table td.sat .cal-date {
  color: var(--primary50);
}
.cal-table td.sun .cal-date {
  color: var(--point50);
}

/* 이번주 행 강조 */
.cal-table tr.is-thisweek td {
  position: relative;
  border-top: 2px solid var(--primary50);
  border-bottom: 2px solid var(--primary50);
}
.cal-table tr.is-thisweek td:first-child::before {
  position: absolute;
  top: 0;
  left: -1px;
  width: 0px;
  height: 100%;
  content: "";
  border-left: 2px solid var(--primary50);
}
.cal-table tr.is-thisweek td:last-child {
  border-right: 2px solid var(--primary50);
}
.thisweek-tag {
  position: absolute;
  top: -24px;
  left: -1px;
  padding: 0 10px;
  border-radius: 14px 14px 14px 0;
  background: var(--primary50);
  color: var(--wht);
  font-size: 1.7rem;
  font-weight: 400;
}

/* 출석/결석 스탬프 */
.cal-stamp {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.cal-stamp.is-attend {
  background: url("../img/bg_stamp_attand.png") no-repeat center;
}
.cal-stamp.is-absent {
  background: url("../img/bg_stamp_absence.png") no-repeat center;
}

@media (max-width: 1024px) {
  .attend-summary {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .cal-table tbody td {
    height: 70px;
    padding: 6px 4px;
  }
  .cal-stamp {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  .cal-stamp.is-attend {
    background-size: contain;
  }
  .cal-stamp.is-absent {
    background-size: contain;
  }
  .cal-nav {
    gap: 10px;
  }
  .cal-title {
    font-size: 1.7rem;
    min-width: 110px;
  }
  .attend-summary {
    gap: 30px;
  }
}

/* ====================================================
   수업회차 목록 - 과목 카드 (course-card)
   ==================================================== */
.lesson-warp .lesson-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 35px 0 0;
  padding: 0;
}
.lesson-warp .lesson-list > li {
  margin: 0;
}

.course-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 120px;
  padding: 38px 40px;
  border: 1px solid var(--gry20);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.course-card:hover,
.course-card:focus-visible {
  border-color: var(--gry90);
  box-shadow: 0 8px 16px rgba(68, 68, 68, 0.14);
}

/* 과목 일러스트 - .course-illust 배경이미지 재사용, 위치만 카드용으로 재정의 */
.course-card .course-illust {
  position: static;
  flex-shrink: 0;
  width: 74px;
  height: 80px;
  top: auto;
  right: auto;
}

.course-info {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
.course-name {
  margin: 0 0 11px;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--gry90);
  line-height: 1.3;
}
.course-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.course-rate {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--primary50);
}
.course-detail {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 1.7rem;
  color: var(--gry70);
  white-space: nowrap;
}
.course-detail dd {
  margin: 0;
}
.course-detail strong {
  color: var(--primary50);
  font-weight: 700;
}
.is-done .course-detail strong {
  color: var(--green60);
}

.course-bar {
  position: relative;
  width: 100%;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--gry20);
  overflow: hidden;
  background: var(--gry5);
}
.course-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--primary50);
}

/* 완료(100%) 상태 - 초록색 */
.course-card.is-done .course-rate {
  color: var(--green60);
}
.course-card.is-done .course-fill {
  background: var(--green60);
}

@media (max-width: 1400px) {
  .lesson-warp .lesson-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1024px) {
  .course-card {
    padding: 26px 24px;
    gap: 16px;
    min-height: auto;
  }
  .course-card .course-illust {
    width: 60px;
    height: 64px;
  }
  .course-name {
    margin: 0 0 8px;
    font-size: 2.2rem;
  }
  .course-progress-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .course-detail {
    white-space: normal;
  }
}
@media (max-width: 767px) {
  .lesson-warp .lesson-list {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 25px;
  }
  .course-card {
    padding: 18px 15px;
    gap: 0;
    justify-content: space-between;
    min-height: auto;
  }
  .course-card .course-illust {
    margin-right: 15px;
    width: 48px;
    height: 48px;
  }
  .course-name {
    margin: 0 0 4px;
    font-size: 1.7rem;
  }
  .course-rate {
    margin-right: auto;
    font-size: 1.4rem;
  }
  .course-progress-row {
    align-items: flex-start;
    margin: 0 0 2px;
  }
  .course-bar {
    height: 14px;
  }
  .course-info {
    padding-right: 0;
  }
  .course-detail {
    font-size: 1.4rem;
  }
}

/* ==========================================================
   반응형
   ========================================================== */
@media (max-width: 1280px) {
  .card-row {
    grid-template-columns: repeat(4, 1fr);
  }
  .hero-slide {
    padding: 40px 48px;
  }
  .hero-title {
    font-size: 3.2rem;
  }

  /* 로그인 */
  .login-wrap {
    padding: 80px;
  }
}
@media (max-width: 960px) {
  .card-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .bottom-grid {
    grid-template-columns: 1fr;
  }
  .hero-slide {
    flex-direction: column;
    padding: 32px 24px;
  }
  .hero-illust {
    width: 100%;
    max-width: 100%;
    height: 200px;
  }
  .quick-menu {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-title {
    font-size: 2.6rem;
  }

  /* 로그인 */
  .login-wrap {
    height: auto;
    min-height: 100vh;
  }
  .login-wrap .login-container {
    flex-direction: column;
    max-height: none;
  }
  .content-section {
    margin: 0 auto;
    width: 510px;
  }
  .login-section {
    justify-content: center;
    margin-top: 50px;
  }
  .attend-card-tit {
    font-size: 2rem;
  }
}
@media (max-width: 760px) {
  .login-wrap {
    display: block;
    padding: 20px 15px;
    height: auto;
    background: var(--primary5);
  }
  .login-container .logo {
    margin-top: 0;
  }
  .login-wrap .login-container {
    display: block;
    max-height: 100%;
  }
  .content-section {
    padding: 10px 15px;
    width: 100%;
  }
  .content-section h1 {
    margin-bottom: 5px;
    font-size: 2.2rem;
  }
  .content-section .login-logo {
    width: 65px;
    height: 44px;
    background-size: contain;
  }
  .content-section .description {
    margin-bottom: 16px;
    font-size: 1.4rem;
  }
  .content-section .info-btn {
    font-size: 1.4rem;
    font-weight: 700;
  }
  .info-btn .info-icon svg {
    width: 16px;
    height: 16px;
  }
  .login-section {
    margin-top: 30px;
  }
  .login-box {
    padding: 20px 22px;
    border: 1px solid var(--gry30);
    box-shadow: none;
  }
  .login-box h2 {
    margin-bottom: 25px;
    font-size: 2rem;
  }
  .login-input-group input[type="password"] + .ctl-password,
  .login-input-group input[type="text"] + .ctl-password {
    top: 8px;
  }
  .login-section .btn {
    margin-top: 14px;
  }
  .login-input-group input {
    height: 47px;
    font-size: 1.6rem;
    color: var(--gry50);
  }
  .login-options {
    margin-bottom: 1.7rem;
  }
  .signup-footer {
    padding-top: 16px;
    font-size: 1.4rem;
    letter-spacing: -0.07rem;
  }
  .signup-footer a {
    margin-left: 6px;
  }
  .find-links a {
    font-size: 1.45rem;
  }

  .attend-card-tit {
    margin-bottom: 11px;
  }
}
@media (max-width: 540px) {
  .card-row {
    grid-template-columns: 1fr;
  }
  .attendance-wrap {
    padding: 20px 35px;
  }

  .attend-day-wrap {
    padding: 20px 15px;
  }
  .donut-chart {
    width: 92px;
    height: 92px;
  }
  .legend-dot {
    width: 16px;
    height: 16px;
  }
  .attendance-title {
    font-size: 1.4rem;
  }
  .percent {
    font-size: 1.4rem;
  }
  .attend-summary {
    margin-top: 24px;
  }
  .attend-calendar {
    margin-top: 30px;
  }
  .attend-day-wrap .tbl {
    width: 100%;
  }
  .attend-day-wrap .tbl-wrap .tbl thead th {
    padding: 10px 0;
    font-size: 1.2rem;
  }
  .attend-day-wrap .tbl-wrap .tbl th,
  .attend-day-wrap .tbl-wrap .tbl td {
    padding: 10px 0;
    font-size: 1.4rem;
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .side-menu,
  .side-overlay,
  .card,
  .skip-nav {
    transition: none !important;
  }
}

/* ====================================================
   수업 이력 - 나의 학습 현황 상태 카드 (my-lesson-state)
   .state-illust : 과목 일러스트 영역 (svg 배경 추후 추가)
   ==================================================== */
.my-lesson-state {
  margin-top: 14px;
}
.state-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
}
.state-cards > li {
  margin: 0;
}

.state-card {
  position: relative;
  height: 100%;
  border: 1px solid var(--gry20);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

/* 공용 일러스트 영역 (svg 배경 추후 추가) */
.state-illust {
  flex-shrink: 0;
  width: 95px;
  height: 101px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.state-illust.math {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 249.16 265.4'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11 %7B stroke: %231e2124; stroke-width: 2px; %7D .cls-1, .cls-2, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 %7B stroke-linecap: round; stroke-linejoin: round; %7D .cls-12 %7B mix-blend-mode: darken; stroke-width: 0px; %7D .cls-12, .cls-7 %7B fill: %23a8befb; %7D .cls-13 %7B isolation: isolate; %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B fill: %23eeb6ab; %7D .cls-3, .cls-11 %7B stroke-miterlimit: 10; %7D .cls-4 %7B fill: %23617be5; %7D .cls-5 %7B fill: %2398ab00; %7D .cls-6 %7B fill: %23f9fcfb; %7D .cls-8, .cls-11 %7B fill: %23fab8ad; %7D .cls-9 %7B fill: %2397d2c1; %7D .cls-10 %7B fill: %23fdd100; %7D %3C/style%3E%3C/defs%3E%3Cg class='cls-13'%3E%3Cg id='_레이어_2' data-name='레이어 2'%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cg%3E%3Cpath class='cls-7' d='m189.71,248.74l-180.9-.24c.07-49.95,40.61-90.4,90.58-90.34,49.95.07,90.38,40.63,90.32,90.58Z'/%3E%3Cpath class='cls-7' d='m181.9,248.73l-180.9-.24c.07-49.95,40.61-90.4,90.58-90.34,49.95.07,90.38,40.63,90.32,90.58Z'/%3E%3Cline class='cls-10' x1='91.56' y1='163.02' x2='91.57' y2='158.15'/%3E%3Cline class='cls-10' x1='91.51' y1='200.64' x2='91.53' y2='190.8'/%3E%3Cline class='cls-10' x1='67.52' y1='207.04' x2='62.61' y2='198.51'/%3E%3Cline class='cls-10' x1='49.94' y1='224.57' x2='41.42' y2='219.64'/%3E%3Cline class='cls-10' x1='115.49' y1='207.1' x2='120.42' y2='198.59'/%3E%3Cline class='cls-10' x1='133.02' y1='224.68' x2='141.55' y2='219.77'/%3E%3Cline class='cls-10' x1='76.7' y1='164.3' x2='75.86' y2='159.51'/%3E%3Cline class='cls-10' x1='62.28' y1='168.14' x2='60.62' y2='163.57'/%3E%3Cline class='cls-10' x1='48.75' y1='174.43' x2='46.33' y2='170.21'/%3E%3Cline class='cls-10' x1='36.52' y1='182.97' x2='33.4' y2='179.24'/%3E%3Cline class='cls-10' x1='25.96' y1='193.51' x2='22.23' y2='190.37'/%3E%3Cline class='cls-10' x1='17.38' y1='205.72' x2='13.17' y2='203.28'/%3E%3Cline class='cls-10' x1='11.06' y1='219.23' x2='6.49' y2='217.56'/%3E%3Cline class='cls-10' x1='7.18' y1='233.64' x2='2.39' y2='232.78'/%3E%3Cline class='cls-10' x1='106.43' y1='164.34' x2='107.28' y2='159.55'/%3E%3Cline class='cls-10' x1='120.83' y1='168.22' x2='122.5' y2='163.65'/%3E%3Cline class='cls-10' x1='134.35' y1='174.54' x2='136.78' y2='170.33'/%3E%3Cline class='cls-10' x1='146.56' y1='183.12' x2='149.69' y2='179.39'/%3E%3Cline class='cls-10' x1='157.09' y1='193.68' x2='160.82' y2='190.56'/%3E%3Cline class='cls-10' x1='165.63' y1='205.92' x2='169.85' y2='203.49'/%3E%3Cline class='cls-10' x1='171.92' y1='219.45' x2='176.49' y2='217.79'/%3E%3Cline class='cls-10' x1='175.76' y1='233.86' x2='180.56' y2='233.02'/%3E%3Cpath class='cls-7' d='m144.33,248.68l-105.77-.14c.04-29.21,23.74-52.86,52.96-52.82,29.21.04,52.85,23.75,52.81,52.96Z'/%3E%3Cline class='cls-10' x1='91.45' y1='248.61' x2='91.48' y2='225.17'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-11' d='m164.1,217.79h76.39c4.23,0,7.67,3.44,7.67,7.67v15.57c0,4.23-3.44,7.67-7.67,7.67h-76.39v-30.9h0Z'/%3E%3Cpath class='cls-1' d='m170.76,223.67v19.15c0,3.24-2.63,5.88-5.88,5.88H63.41v-6.66h100.69v-17.57H63.41v-6.66h101.48c3.24,0,5.88,2.63,5.88,5.88Z'/%3E%3Crect class='cls-2' x='68.52' y='224.46' width='95.58' height='17.57'/%3E%3Crect class='cls-2' x='68.52' y='230.34' width='95.58' height='5.8'/%3E%3Cpath class='cls-10' d='m81.61,264.4l5.78-5.78c2.47-2.47,3.86-5.82,3.86-9.31h0c0-7.27,5.89-13.16,13.16-13.16h.29-13.15c-7.27,0-13.16,5.89-13.16,13.16h0c0,3.49-1.39,6.84-3.86,9.31l-5.78,5.78,9.86-4.08,3,4.08Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-10' d='m89.81,186.89h76.39c4.23,0,7.67,3.44,7.67,7.67v15.57c0,4.23-3.44,7.67-7.67,7.67h-76.39v-30.9h0Z' transform='translate(263.68 404.68) rotate(-180)'/%3E%3Cpath class='cls-5' d='m136.55,192.76v19.15c0,3.24,2.63,5.88,5.88,5.88h101.48s0-6.66,0-6.66h-100.69v-17.57h100.69s0-6.66,0-6.66h-101.48c-3.24,0-5.88,2.63-5.88,5.88Z'/%3E%3Crect class='cls-2' x='143.22' y='193.55' width='95.58' height='17.57'/%3E%3Crect class='cls-2' x='143.22' y='199.44' width='95.58' height='5.8' transform='translate(382.02 404.68) rotate(-180)'/%3E%3C/g%3E%3Cg%3E%3Crect class='cls-4' x='160.89' y='101.22' width='37.86' height='5.03' transform='translate(290.7 279.24) rotate(-152.26)'/%3E%3Cg%3E%3Cpath class='cls-6' d='m160.5,229.3l-3.78,14.82c-.36,1.42.5,2.86,1.92,3.22,1.26.32,2.58-.33,3.09-1.52l4.61-10.8,4.42-10.36-10.26,4.65Z'/%3E%3Cpath class='cls-12' d='m160.5,229.3l-1.35,5.28c2.42.62,4.85.74,7.18.44l4.42-10.36-10.26,4.65Z'/%3E%3Cpath class='cls-6' d='m204.53,56.75l-44.01,172.47c7.72,1.97,15.57-2.69,17.54-10.41l40.45-158.5-13.97-3.57Z'/%3E%3Cpath class='cls-12' d='m204.53,56.75l-3.85,15.1c4.95,1.26,9.93,1.47,14.69.75l3.13-12.28-13.97-3.57Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-6' d='m204.68,56.46l-117.15,134.01c-6-5.24-6.61-14.35-1.37-20.35l107.66-123.16,10.86,9.49Z'/%3E%3Cpath class='cls-12' d='m204.68,56.46l-10.26,11.74c-3.85-3.36-6.83-7.35-8.94-11.68l8.34-9.54,10.86,9.49Z'/%3E%3C/g%3E%3Crect class='cls-5' x='220.83' y='2.66' width='12.62' height='22.17' transform='translate(421.78 131.64) rotate(-152.26)'/%3E%3Cpath class='cls-5' d='m190.59,32.25c-6.1,11.6-1.64,25.96,9.96,32.06s25.96,1.64,32.06-9.96c6.1-11.6,1.64-25.96-9.96-32.06s-25.96-1.64-32.06,9.96Zm8.87,4.66c3.53-6.71,11.82-9.28,18.53-5.76,6.71,3.53,9.28,11.82,5.76,18.53-3.53,6.71-11.82,9.28-18.53,5.76-6.71-3.53-9.28-11.82-5.76-18.53Z'/%3E%3Cg%3E%3Crect class='cls-4' x='93.77' y='106.93' width='5.19' height='16.98' transform='translate(92.95 265.75) rotate(-138.84)'/%3E%3Crect class='cls-10' x='95.67' y='84.18' width='15.07' height='111.66' transform='translate(117.65 -33.32) rotate(41.16)'/%3E%3Crect class='cls-10' x='100.62' y='84.18' width='5.16' height='111.66' transform='translate(117.65 -33.32) rotate(41.16)'/%3E%3Crect class='cls-6' x='97.88' y='116.83' width='7.71' height='4.48' transform='translate(99.97 275.67) rotate(-138.84)'/%3E%3Crect class='cls-4' x='102.34' y='118.43' width='18.57' height='18.57' transform='translate(111.64 -41.91) rotate(41.16)'/%3E%3Cpolygon class='cls-6' points='60.78 177.09 72.13 187.01 58.22 195.74 53.59 191.76 60.78 177.09'/%3E%3Cpath class='cls-4' d='m58.22,195.74l-3.78,2.37c-1.64,1.03-3.61-.74-2.75-2.48l1.9-3.87,4.63,3.98Z'/%3E%3Cpath class='cls-3' d='m141.16,87.84h8.9c1.7,0,3.09,1.38,3.09,3.09v4.23h-15.07v-4.23c0-1.7,1.38-3.09,3.09-3.09Z' transform='translate(96.2 -73.22) rotate(41.16)'/%3E%3Crect class='cls-6' x='134.04' y='93.64' width='15.07' height='4.95' transform='translate(98.24 -69.42) rotate(41.16)'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-7' d='m53.02,20.04l-1.16.13c-4.25.46-7.94,3.13-9.7,7.02l-.48,1.06,12.71,5.63-1.37-13.84Z'/%3E%3Cpath class='cls-7' d='m114.21,47.54l.77,1.07c2.21,3.05,2.62,7.04,1.08,10.48l-.54,1.2-11.7-5.24,10.39-7.51Z'/%3E%3Cpath class='cls-7' d='m48.65,94.97l.77,1.07c2.21,3.05,5.87,4.69,9.62,4.3l1.31-.14-1.31-12.75-10.39,7.51Z'/%3E%3Cpath class='cls-4' d='m72.08,58.33l39.11-4.03c3.27-.34,5.68,2.99,4.34,6l-13.4,29.94c-1.65,3.68-5.13,6.2-9.14,6.61l-32.63,3.36c-3.27.34-5.68-2.99-4.34-6l16.06-35.88Z'/%3E%3Cpath class='cls-6' d='m53.02,20.04l33.06-3.41c3.32-.34,6.58,1.11,8.53,3.82l19.6,27.09c1.93,2.67.25,6.42-3.02,6.76l-39.11,4.03-22.36-30.91c-2.11-2.91-.27-7.01,3.3-7.38Z'/%3E%3Cpath class='cls-9' d='m28.09,58.58l13.58-30.33c1.47-3.28,5.94-3.74,8.04-.83l22.36,30.91-16.06,35.88c-1.34,3-5.43,3.42-7.36.76l-19.6-27.09c-1.96-2.71-2.32-6.25-.96-9.3Z'/%3E%3Cellipse class='cls-10' cx='85.77' cy='77.25' rx='6.37' ry='3.68' transform='translate(-29 64.94) rotate(-35.89)'/%3E%3Cg%3E%3Cellipse class='cls-6' cx='50.6' cy='75.62' rx='3.02' ry='5.24' transform='translate(-7.49 5.59) rotate(-5.89)'/%3E%3Cellipse class='cls-6' cx='47.37' cy='46.21' rx='3.02' ry='5.24' transform='translate(-4.49 5.1) rotate(-5.89)'/%3E%3Cellipse class='cls-6' cx='49.08' cy='61.04' rx='3.02' ry='5.24' transform='translate(-6 5.35) rotate(-5.89)'/%3E%3C/g%3E%3Cellipse class='cls-1' cx='92.13' cy='41.93' rx='3.29' ry='5.69' transform='translate(16.22 108.89) rotate(-65.89)'/%3E%3Cellipse class='cls-1' cx='71.58' cy='32.73' rx='3.29' ry='5.69' transform='translate(12.46 84.68) rotate(-65.89)'/%3E%3C/g%3E%3Cg%3E%3Ccircle class='cls-8' cx='207.59' cy='142.05' r='29.92'/%3E%3Cpath class='cls-2' d='m212.44,144.97l13.21-3.31c2.14-.54,3.45-2.71,2.91-4.86s-2.71-3.45-4.86-2.91l-13.21,3.31-7.77,1.94-13.21,3.31c-2.14.54-3.45,2.71-2.91,4.86s2.71,3.45,4.86,2.91l13.21-3.31,7.77-1.94Z'/%3E%3Cpath class='cls-2' d='m205.58,132.36c2.14-.54,3.45-2.71,2.91-4.86h0c-.54-2.14-2.71-3.45-4.86-2.91l-.78.2c-2.14.54-3.45,2.71-2.91,4.86h0c.54,2.14,2.71,3.45,4.86,2.91l.78-.2Z'/%3E%3Cpath class='cls-2' d='m210.38,151.55c2.14-.54,4.32.77,4.86,2.91h0c.54,2.14-.77,4.32-2.91,4.86l-.78.2c-2.14.54-4.32-.77-4.86-2.91h0c-.54-2.14.77-4.32,2.91-4.86l.78-.2Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.state-illust.society {
  top: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 238.24 244.83'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8 %7B stroke: %231e2124; stroke-width: 2px; %7D .cls-1, .cls-2, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8 %7B stroke-linecap: round; stroke-linejoin: round; %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B fill: %23eeb6ab; stroke-miterlimit: 10; %7D .cls-4 %7B fill: %23617be5; %7D .cls-5 %7B fill: none; %7D .cls-6 %7B fill: %2397d2c1; %7D .cls-7 %7B fill: %23fdd100; %7D .cls-8 %7B fill: %23191919; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cg%3E%3Cg%3E%3Crect class='cls-7' x='137.7' y='192.27' width='7.51' height='28.39' transform='translate(282.92 412.92) rotate(-180)'/%3E%3Cpath class='cls-7' d='m225.54,125.88c-14.76,45.09-62.3,70.29-107.57,57.82-1.37-.37-2.74-.79-4.1-1.23s-2.65-.9-3.95-1.4l-2.27,6.93c1.3.49,2.62.95,3.95,1.39s2.73.86,4.1,1.23c49.09,13.73,100.74-13.56,116.75-62.47,16.01-48.91-9.5-101.46-57.2-119.42-1.32-.51-2.67-.98-4.04-1.43s-2.67-.84-4.01-1.22l-2.27,6.93c1.34.36,2.68.77,4.01,1.21,1.37.45,2.71.92,4.04,1.43,43.88,16.71,67.31,65.14,52.55,110.24Z'/%3E%3Cpath class='cls-7' d='m167.91,3.93l-60.96,186.21c-.73,2.23.48,4.62,2.7,5.35s4.62-.49,5.35-2.71L175.97,6.56c.73-2.23-.49-4.62-2.71-5.35-1.11-.36-2.26-.24-3.24.25-.96.5-1.74,1.35-2.1,2.47Z'/%3E%3Cg%3E%3Cpath class='cls-6' d='m61.92,98.35c0,18.39,6.24,35.34,16.73,48.8,14.56,18.71,37.28,30.74,62.81,30.74,25.53,0,48.26-12.03,62.81-30.74,10.48-13.46,16.73-30.41,16.73-48.8,0-43.93-35.6-79.54-79.54-79.54-43.92,0-79.53,35.6-79.53,79.54Z'/%3E%3Cellipse class='cls-6' cx='141.45' cy='98.35' rx='44.3' ry='79.54'/%3E%3Cpath class='cls-5' d='m78.65,147.15c14.56,18.71,37.28,30.74,62.81,30.74,25.53,0,48.26-12.03,62.81-30.74-14.55-10.42-37.27-17.13-62.81-17.13-25.53,0-48.25,6.71-62.81,17.13Z'/%3E%3Cpath class='cls-5' d='m78.65,49.55c14.56-18.71,37.28-30.74,62.81-30.74,25.53,0,48.26,12.03,62.81,30.74-14.55,10.42-37.27,17.13-62.81,17.13-25.53,0-48.25-6.71-62.81-17.13Z'/%3E%3Cline class='cls-6' x1='141.45' y1='18.81' x2='141.45' y2='177.88'/%3E%3Cline class='cls-6' x1='220.99' y1='98.35' x2='61.92' y2='98.35'/%3E%3C/g%3E%3Cpath class='cls-7' d='m99.76,236.61h83.4s0,0,0,0c-5.58-10.82-16.74-17.62-28.92-17.62h-25.56c-12.18,0-23.33,6.8-28.92,17.62h0Z'/%3E%3Crect class='cls-7' x='94.87' y='236.61' width='93.18' height='7.22' rx='3.61' ry='3.61' transform='translate(282.92 480.43) rotate(180)'/%3E%3C/g%3E%3Cg%3E%3Ccircle class='cls-7' cx='63.38' cy='68.8' r='17.55'/%3E%3Ccircle class='cls-7' cx='63.38' cy='66.34' r='17.55'/%3E%3Ccircle class='cls-7' cx='63.38' cy='66.34' r='13.14'/%3E%3Cpath class='cls-5' d='m70.49,60.97l-1.91,10.02c-.34,1.79-2.17,1.89-2.62.15l-2.58-10.01-2.58,10.01c-.45,1.74-2.28,1.64-2.62-.15l-1.91-10.02'/%3E%3Cline class='cls-5' x1='71.48' y1='66.93' x2='55.27' y2='66.93'/%3E%3C/g%3E%3Cg%3E%3Crect class='cls-2' x='27.28' y='173.62' width='91.5' height='70.2' transform='translate(146.05 417.45) rotate(-180)'/%3E%3Crect class='cls-2' x='16.21' y='169.93' width='96.31' height='73.89' transform='translate(128.73 413.76) rotate(-180)'/%3E%3Crect class='cls-4' x='6.87' y='162.56' width='98.69' height='5.55' transform='translate(112.43 330.67) rotate(-180)'/%3E%3Crect class='cls-2' x='6.87' y='168.11' width='98.69' height='75.72' transform='translate(112.43 411.93) rotate(-180)'/%3E%3Crect class='cls-1' x='79.69' y='202.34' width='11.63' height='32.46' transform='translate(171.01 437.15) rotate(-180)'/%3E%3Crect class='cls-3' x='60.16' y='177.39' width='11.63' height='57.41' transform='translate(131.96 412.19) rotate(-180)'/%3E%3Crect class='cls-7' x='40.63' y='212.94' width='11.63' height='21.86' transform='translate(92.9 447.74) rotate(-180)'/%3E%3Crect class='cls-6' x='21.1' y='191.85' width='11.63' height='42.95' transform='translate(53.84 426.66) rotate(-180)'/%3E%3Cline class='cls-2' x1='96.22' y1='234.8' x2='16.21' y2='234.8'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-1' d='m31.42,143.29l1.72,12.6c.37,2.7,2.67,4.71,5.4,4.71h0c2.72,0,5.03-2.01,5.4-4.71l1.72-12.6'/%3E%3Cpath class='cls-1' d='m66.79,143.34l1.72,12.6c.37,2.7,2.67,4.71,5.4,4.71h0c2.72,0,5.03-2.01,5.4-4.71l1.72-12.6'/%3E%3Cpath class='cls-1' d='m40.03,97.18l-6.88-11.58c-1.35-2.27-4.63-2.27-5.98,0l-6.88,11.58'/%3E%3Crect class='cls-1' x='7.98' y='89.49' width='95.7' height='65.49' rx='32.74' ry='32.74' transform='translate(111.66 244.46) rotate(180)'/%3E%3Cpolyline class='cls-1' points='10.05 114.26 3.47 115.76 3.47 134.32 13.96 136.72'/%3E%3Cellipse class='cls-1' cx='3.47' cy='125.04' rx='2.47' ry='9.28'/%3E%3Cpath class='cls-1' d='m47.01,97.18l-6.88-11.58c-1.35-2.27-4.63-2.27-5.98,0l-6.88,11.58'/%3E%3Cpath class='cls-2' d='m32.62,95.72l3.15-5.3c.62-1.04,2.12-1.04,2.74,0l3.15,5.3h-9.03Z'/%3E%3Cellipse class='cls-8' cx='24.27' cy='111.8' rx='2.43' ry='3.76'/%3E%3Cpath class='cls-1' d='m73.03,145.87l1.72,12.6c.37,2.7,2.67,4.71,5.4,4.71h0c2.72,0,5.03-2.01,5.4-4.71l1.72-12.6'/%3E%3Cpath class='cls-1' d='m24.27,145.87l1.72,12.6c.37,2.7,2.67,4.71,5.4,4.71h0c2.72,0,5.03-2.01,5.4-4.71l1.72-12.6'/%3E%3Cline class='cls-8' x1='71.09' y1='94.47' x2='54.33' y2='94.47'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.state-illust.english {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 235.77 262.92'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18 %7B stroke-width: 2px; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18, .cls-19 %7B stroke: %231e2124; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-6, .cls-7, .cls-8, .cls-9, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18 %7B stroke-linejoin: round; %7D .cls-1, .cls-2, .cls-3, .cls-6, .cls-7, .cls-8, .cls-9, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18 %7B stroke-linecap: round; %7D .cls-20, .cls-3, .cls-10 %7B fill: %23fff; %7D .cls-21 %7B fill: %23ffc5c8; %7D .cls-21, .cls-22, .cls-23 %7B stroke-width: 0px; %7D .cls-2 %7B fill: %23ededed; %7D .cls-4 %7B fill: %23ffc0db; %7D .cls-5, .cls-10, .cls-19 %7B stroke-miterlimit: 10; %7D .cls-5, .cls-11 %7B fill: %23f9fcfb; %7D .cls-6 %7B fill: %23617be5; %7D .cls-22, .cls-18 %7B fill: %23fde0a1; %7D .cls-7 %7B fill: %23c6c6c6; %7D .cls-8, .cls-23 %7B fill: %23ffdcd4; %7D .cls-9 %7B fill: %2398ab00; %7D .cls-12 %7B fill: none; %7D .cls-24 %7B clip-path: url(%23clippath); %7D .cls-13 %7B fill: %23a8befb; %7D .cls-14 %7B fill: %2397d2c1; %7D .cls-15 %7B fill: %23fdd100; %7D .cls-16 %7B fill: %23eeb6ab; %7D .cls-17 %7B fill: %231e2124; %7D .cls-19 %7B fill: %236666ad; %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='cls-3' x='52.37' y='122.03' width='182.4' height='126.4' rx='6.03' ry='6.03'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cg%3E%3Cg%3E%3Crect class='cls-1' x='95.63' y='4.29' width='58.39' height='58.39' rx='12.42' ry='12.42' transform='translate(184.99 -80.9) rotate(102.73)'/%3E%3Crect class='cls-3' x='102.79' y='11.45' width='44.06' height='44.06' rx='7.39' ry='7.39' transform='translate(10.45 -26.69) rotate(12.73)'/%3E%3Cpath class='cls-13' d='m135.2,42.74c-.73,3.25-2.39,5.46-4.95,6.62-2.57,1.17-5.37,1.4-8.4.72l-6.99-1.58c-1.98-.45-3.32-1.16-4.03-2.13-.71-.98-.84-2.45-.39-4.43l4.29-18.97c.61-2.68,1.97-4.6,4.09-5.76,2.12-1.15,4.8-1.37,8.05-.63,2.68.61,4.89,1.87,6.61,3.78,1.72,1.91,2.25,4.31,1.6,7.21-.26,1.13-.69,2.16-1.31,3.1-.62.94-1.47,1.65-2.55,2.15-.24.09-.35.22-.31.38.04.16.12.29.25.39,1.51.86,2.69,2.07,3.52,3.64.83,1.56,1.01,3.4.53,5.52Zm-5.19-1.17c.37-1.62.05-3.03-.94-4.22-.99-1.19-2.55-2.02-4.67-2.5l-1.29-.29c-1.55-.35-2.16-1.29-1.82-2.81s1.29-2.1,2.85-1.75l.87.2c1.27.29,2.33.1,3.19-.56.85-.66,1.45-1.73,1.78-3.22.3-1.34.04-2.48-.79-3.41-.83-.93-1.95-1.55-3.36-1.87-1.63-.37-2.98-.3-4.05.2-1.08.5-1.77,1.42-2.07,2.76l-4.07,18.01c-.14.64-.1,1.11.12,1.42.23.31.66.54,1.29.68l5.19,1.17c2.19.49,3.92.46,5.2-.11,1.28-.56,2.13-1.8,2.56-3.71Z'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Crect class='cls-20' x='52.37' y='122.03' width='182.4' height='126.4' rx='6.03' ry='6.03'/%3E%3Cg class='cls-24'%3E%3Crect class='cls-7' x='49.16' y='122.03' width='185.62' height='11.37'/%3E%3Cpath class='cls-2' d='m49.88,148.98v-15.62h41.03c1.48,0,2.68-1.2,2.68-2.68v-2.54c0-2.22,1.8-4.02,4.02-4.02h56.19c2.22,0,4.02,1.8,4.02,4.02v2.54c0,1.48,1.2,2.68,2.68,2.68h74.27v15.62H49.88Z'/%3E%3C/g%3E%3Crect class='cls-12' x='52.37' y='122.03' width='182.4' height='126.4' rx='6.03' ry='6.03'/%3E%3C/g%3E%3Cg%3E%3Crect class='cls-3' x='93.14' y='137.16' width='120.26' height='7.82' rx='3.48' ry='3.48'/%3E%3Cpath class='cls-2' d='m209.54,144.98h-6.5v-7.82h6.5c2.09,0,3.79,1.75,3.79,3.91h0c0,2.16-1.7,3.91-3.79,3.91Z'/%3E%3Cg%3E%3Cline class='cls-12' x1='207.29' y1='140.78' x2='210.76' y2='143'/%3E%3Cellipse class='cls-2' cx='207.29' cy='140.78' rx='1.98' ry='2.04'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cline class='cls-12' x1='59.06' y1='127.66' x2='63.33' y2='127.66'/%3E%3Crect class='cls-12' x='68.45' y='125.96' width='3.39' height='3.39'/%3E%3Cg%3E%3Cline class='cls-12' x1='77.43' y1='125.99' x2='80.81' y2='129.35'/%3E%3Cline class='cls-12' x1='80.81' y1='125.99' x2='77.43' y2='129.35'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cline class='cls-12' x1='59.06' y1='140.84' x2='65.03' y2='140.84'/%3E%3Cpolyline class='cls-12' points='61.05 139.16 59.06 140.84 61.05 142.53'/%3E%3C/g%3E%3Cg%3E%3Cline class='cls-12' x1='75.9' y1='140.84' x2='69.93' y2='140.84'/%3E%3Cpolyline class='cls-12' points='73.92 139.16 75.9 140.84 73.92 142.53'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-12' d='m83.13,143.24c-1.32,0-2.4-1.07-2.4-2.4s1.07-2.4,2.4-2.4,2.4,1.07,2.4,2.4'/%3E%3Cpolyline class='cls-12' points='86.84 140.15 85.53 141.69 84.22 140.15'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath class='cls-23' d='m95.67,185.93c-2.73-4.13-8.3-5.26-12.42-2.53-4.13,2.73-5.26,8.3-2.53,12.42l5.17,7.95,14.95-9.9-5.17-7.95Z'/%3E%3Cpath class='cls-12' d='m95.67,185.93c-2.73-4.13-8.3-5.26-12.42-2.53-4.13,2.73-5.26,8.3-2.53,12.42l5.17,7.95,14.95-9.9-5.17-7.95Z'/%3E%3C/g%3E%3Cpath class='cls-8' d='m90.91,182.83l-17.41-9.47c-1.47-.8-3.31-.26-4.11,1.21-.8,1.47-.26,3.31,1.21,4.11l11.6,6.31'/%3E%3Cpath class='cls-8' d='m84.64,183.53l-17.41-9.47c-1.47-.8-3.31-.26-4.11,1.21-.8,1.47-.26,3.31,1.21,4.11l17.41,9.47'/%3E%3Cpath class='cls-8' d='m83.25,187.3l-17.41-9.47c-1.47-.8-3.31-.26-4.11,1.21-.8,1.47-.26,3.31,1.21,4.11l17.41,9.47'/%3E%3Cpath class='cls-8' d='m81.73,190.6l-14.35-6.85c-1.51-.72-3.32-.08-4.04,1.43-.72,1.51-.08,3.32,1.43,4.04l17.39,8.29'/%3E%3Cpath class='cls-8' d='m96.66,188l-1.27-11.9c-.18-1.66-1.67-2.87-3.33-2.69-1.66.17-2.87,1.67-2.69,3.33l.76,7.16'/%3E%3C/g%3E%3Cpolygon class='cls-23' points='77.89 192.72 88.93 198.62 95.69 185.96 84.58 180.19 77.89 192.72'/%3E%3C/g%3E%3Cpath class='cls-4' d='m99.18,227.85c3.6,3.58,9.27,4.49,13.9,1.87l30.55-17.3c5.58-3.16,7.54-10.24,4.38-15.82-3.16-5.58-10.24-7.54-15.82-4.38l-30.55,17.3c-5.58,3.16-7.54,10.24-4.38,15.82.53.94,1.18,1.78,1.91,2.51Z'/%3E%3Cpath class='cls-4' d='m107.82,231.24c-3.93.14-7.85-1.67-10.24-5.15l-16.01-23.06,19.59-13.46,16.01,23.06'/%3E%3Cpath class='cls-4' d='m203.29,248.42h-72.29v-48.63c0-9.37,7.6-16.97,16.97-16.97h38.35c9.37,0,16.97,7.6,16.97,16.97v48.63Z'/%3E%3Cg%3E%3Cpath class='cls-10' d='m176.29,181.2l-14.87,5.93,5.85,9.63c.5.91,1.77.84,2.27-.12l6.78-13.1-.03-2.34Z'/%3E%3Cpath class='cls-10' d='m146.48,181.21l14.94,5.92-5.94,9.65c-.5.91-1.77.84-2.27-.13l-6.77-13.11.03-2.34Z'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath class='cls-18' d='m131.6,143.72c0-3.99,2-7.51,5.07-9.69,0-.07-.01-.13-.01-.2,0-6.61,5.49-11.98,12.27-11.98.44,0,.88.03,1.31.07,3.12-4.72,8.54-7.86,14.72-7.86,6.79,0,12.66,3.78,15.57,9.29,1.63-.62,3.41-.98,5.27-.98,8,0,14.48,6.33,14.48,14.14,0,2.67-.77,5.16-2.09,7.29,3.35,3.09,5.44,7.45,5.44,12.3,0,5.82-3.01,10.96-7.59,14.01.04.4.06.81.06,1.22,0,6.61-5.49,11.98-12.27,11.98-3.87,0-7.31-1.75-9.56-4.48-2.26,2.14-4.95,3.39-7.84,3.39-2.67,0-5.18-1.07-7.33-2.93-2.25,2.55-5.58,4.17-9.29,4.17-6.78,0-12.27-5.36-12.27-11.98,0-.44.03-.88.08-1.31-3.43-2.86-5.61-7.1-5.61-11.85,0-2.73.72-5.29,1.98-7.52-1.5-1.99-2.41-4.44-2.41-7.1Z'/%3E%3Cg%3E%3Cpath class='cls-8' d='m142.61,168.69c-3.08,2.71-8.14,1.97-11.3-1.64-3.16-3.61-3.22-8.73-.14-11.44,3.08-2.71,8.14-1.97,11.3,1.64'/%3E%3Cpath class='cls-8' d='m139.58,160.59s-3.09-4.42-6.74-2.11'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-23' d='m195.66,140.53c-4.03-10.97-15.33-18.93-28.87-19.15-17.01-.28-30.98,11.86-31.76,26.97-.21,4.05.56,7.96,2.11,11.53-.03.32-.06.65-.08.97-.66,12.68,9.93,23.85,24.04,25.07,2.85.25,5.64.07,8.29-.47h0c.18-.03.36-.08.54-.12.14-.03.29-.06.43-.1,23.62-5.15,33.21-25.93,25.29-44.7Z'/%3E%3Cpath class='cls-12' d='m195.66,140.53c-4.03-10.97-15.33-18.93-28.87-19.15-17.01-.28-30.98,11.86-31.76,26.97-.21,4.05.56,7.96,2.11,11.53-.03.32-.06.65-.08.97-.66,12.68,9.93,23.85,24.04,25.07,2.85.25,5.64.07,8.29-.47h0c.18-.03.36-.08.54-.12.14-.03.29-.06.43-.1,23.62-5.15,33.21-25.93,25.29-44.7Z'/%3E%3C/g%3E%3Cpath class='cls-22' d='m133.33,143.22l14.05-17.71,14.47-7.91,15.15,4.21,4.18,2.32,8.08,1.98,8.04,8.69.06,8.06,2.27,6.96-.15,11.59-10.4-1.54-12.53-27.22-15.17-.28s-13.38-.75-13.66-.75l-12.14,22.27-.99.05-1.28-10.71Z'/%3E%3Cg%3E%3Cpath class='cls-8' d='m186.15,174.7c3.96,2.02,9.09-.11,11.46-4.76,2.37-4.65,1.07-10.06-2.89-12.08-3.96-2.02-9.77.36-12.13,5.01'/%3E%3Cpath class='cls-8' d='m187.19,165.35s2.08-5.48,6.54-4.04'/%3E%3C/g%3E%3Cpolygon class='cls-22' points='153.05 132.96 158.59 136.01 170.03 134.58 171.38 129.29 149.96 130.99 153.05 132.96'/%3E%3Cpath class='cls-18' d='m158.72,136.31s10.38-3.9,14.25,4.47c3.42,7.37,4.88,21.54,15.6,20.12,0,0-2.76-2.86-2.27-16.82.33-9.47-9.33-20.49-19.33-16.11'/%3E%3Cpath class='cls-18' d='m158.7,136.35s-7.33-5.22-11.14,3.16c-3.22,7.09-5.65,22.38-15.94,21.01,0,0,5.67-8.25,3.78-17.02-1.91-8.88,8.18-19.8,17.78-15.61'/%3E%3C/g%3E%3Cpath class='cls-21' d='m145.12,174.87c-.83.41-1.71.63-2.59.66-2.59-3.35-4.25-7.3-4.67-11.52.44-.39.94-.73,1.49-1,3.27-1.6,7.22-.24,8.82,3.03,1.59,3.28.24,7.22-3.04,8.82Z'/%3E%3Ccircle class='cls-21' cx='174.32' cy='168.46' r='6.6'/%3E%3Cg%3E%3Cpath class='cls-12' d='m156.3,162.89c-.35.09-.73.11-1.11.04-1.35-.26-2.24-1.57-1.97-2.92s1.57-2.24,2.92-1.97c.66.13,1.21.51,1.57,1.02'/%3E%3Cpath class='cls-12' d='m165.02,166.19c-2.56,3.93-7.33,6.13-12.22,5.18-.77-.15-1.51-.37-2.21-.65'/%3E%3Cpath class='cls-12' d='m167.53,167.26c-1.96-.1-3.46-1.77-3.36-3.73'/%3E%3Ccircle class='cls-19' cx='163.62' cy='157.47' r='1.9' transform='translate(-27.37 34.62) rotate(-11.15)'/%3E%3Ccircle class='cls-19' cx='149.17' cy='156.95' r='1.9' transform='translate(-27.54 31.82) rotate(-11.15)'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-8' d='m174.84,210.92l-5.08-13.96c-2.04-5.6-7.03-8.7-11.02-6.55-3.99,2.15-5.47,8.72-3.43,14.33l4.32,11.87,15.21-5.69Z'/%3E%3Cg%3E%3Cpath class='cls-8' d='m160.6,189.99l-6.47-3.27-3.23.93c-1.46.42-2.98-.42-3.4-1.88-.42-1.46.42-2.98,1.88-3.4l4.27-1.23c.67-.19,1.38-.13,2,.19l8.31,4.2c.57.29,1.02.76,1.27,1.35,1.99,3.59,3.65,7.27,4.87,11.09'/%3E%3Cpath class='cls-8' d='m159.35,195.35l-8.28-1.26-2.7,5.16c-.49.94-1.44,1.47-2.43,1.47-.43,0-.86-.1-1.27-.31-1.34-.7-1.86-2.36-1.16-3.7l3.61-6.9c.54-1.04,1.68-1.62,2.85-1.44l10.64,1.62'/%3E%3Cpath class='cls-8' d='m159.98,200.36l-7.7-1.79-2.06,3.29c-.52.83-1.41,1.29-2.33,1.29-.5,0-1-.13-1.46-.42-1.28-.81-1.67-2.5-.87-3.78l3.04-4.84c.59-.94,1.69-1.44,2.79-1.25l9.6,1.64'/%3E%3Cpath class='cls-8' d='m156.39,204.41l-2.07-.86-1.01,1.63c-.52.84-1.42,1.3-2.34,1.3-.49,0-.99-.13-1.44-.41-1.29-.8-1.69-2.49-.89-3.78l2.24-3.61c.71-1.14,2.14-1.6,3.39-1.09l6.91,2.87'/%3E%3C/g%3E%3C/g%3E%3Cpath class='cls-4' d='m176.53,242.38c5.03.71,10.11-1.97,12.24-6.85l14.06-32.17c2.57-5.87-.11-12.72-5.99-15.28-5.87-2.57-12.72.11-15.28,5.99l-14.06,32.17c-2.57,5.87.11,12.72,5.99,15.28.99.44,2.02.72,3.04.86Z'/%3E%3Cpath class='cls-4' d='m178.23,242.49c-3.93,0-7.78-1.95-10.05-5.52l-15.16-23.63,20.07-12.74,15.16,23.63'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-15' d='m16.38,201.44h33.28c6.52,0,11.82,5.3,11.82,11.82v33.28c0,6.52-5.3,11.82-11.82,11.82H16.38c-6.52,0-11.82-5.3-11.82-11.82v-33.28c0-6.52,5.3-11.82,11.82-11.82Z' transform='translate(247.91 141.78) rotate(75.88)'/%3E%3Cpath class='cls-16' d='m18.93,208.42h28.17c4.08,0,7.39,3.31,7.39,7.39v28.17c0,4.08-3.31,7.39-7.39,7.39h-28.17c-4.08,0-7.39-3.31-7.39-7.39v-28.17c0-4.08,3.31-7.39,7.39-7.39Z' transform='translate(-55.1 15.01) rotate(-14.12)'/%3E%3Cpath class='cls-5' d='m47.25,239.23c-1.04,1.15-2.27,2.17-3.69,3.06-1.42.89-3.09,1.58-5.01,2.06-4.34,1.09-8.41.7-12.21-1.19-3.8-1.88-6.28-5.12-7.44-9.71s-.48-8.62,2.02-12.09c2.5-3.47,5.92-5.75,10.26-6.84,1.25-.32,2.51-.52,3.77-.62,1.26-.09,2.51.01,3.74.32,2.04.37,2.92,1.48,2.63,3.33-.29,1.85-1.49,2.64-3.6,2.37-.94-.21-1.81-.3-2.6-.28-.79.02-1.65.15-2.57.38-2.75.69-4.85,2.15-6.29,4.38s-1.81,4.71-1.12,7.47,2.18,4.89,4.41,6.15c2.22,1.26,4.76,1.53,7.59.82,1.17-.29,2.22-.71,3.14-1.26.93-.54,1.82-1.23,2.67-2.07,1.71-1.67,3.19-1.87,4.45-.59s1.19,2.72-.18,4.31Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-1' d='m90.31,124.53c-2.99-.42-5.96-.08-8.73.88-2.78-.96-5.74-1.3-8.73-.88-10.78,1.53-17.75,12.37-15.57,24.21,2.18,11.85,12.69,20.21,23.47,18.69.28-.04.56-.09.83-.14.28.05.55.1.83.14,10.78,1.53,21.29-6.84,23.47-18.69,2.18-11.85-4.79-22.69-15.57-24.21Z'/%3E%3Cg%3E%3Cpath class='cls-9' d='m78.12,119.06c3.77,3.77,3.46,10.18,3.46,10.18,0,0-6.41.31-10.18-3.46s-3.46-10.18-3.46-10.18c0,0,6.41-.31,10.18,3.46Z'/%3E%3Cline class='cls-9' x1='81.57' y1='129.24' x2='67.94' y2='115.6'/%3E%3C/g%3E%3Cpath class='cls-12' d='m88.49,130.83c-1.6,2.06-4.1,3.37-6.92,3.37s-5.31-1.32-6.92-3.37'/%3E%3Cpath class='cls-12' d='m81.57,134.21v-7.48c0-3.08,2.5-5.57,5.57-5.57h0'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath class='cls-17' d='m23.66,75.1c0-14.77.49-26.74,47.13-26.74s47.13,11.97,47.13,26.74-.49,26.74-47.13,26.74c-6.07,0-11.34-.2-15.95-.59.14,3.91,1.1,8.75,4,13.83,1,1.76-.77,3.78-2.68,3.1-5.72-2.05-13.98-7.1-16.19-19.35-16.07-4.46-16.32-13.41-16.32-23.74Z'/%3E%3Cpath class='cls-11' d='m26.68,73.03c0-14.77.49-26.74,47.13-26.74,46.64,0,47.13,11.97,47.13,26.74,0,14.77-.49,26.74-47.13,26.74-6.07,0-11.34-.2-15.95-.59.14,3.91,1.1,8.75,4,13.83,1,1.76-.77,3.78-2.68,3.1-5.72-2.05-13.98-7.1-16.19-19.35-16.07-4.46-16.32-13.41-16.32-23.74Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-13' d='m95.47,89.13v-21.57c5.72-4.31,9.32-11.28,8.95-19.07-.54-11.34-9.71-20.65-21.04-21.34-13.06-.8-23.91,9.56-23.91,22.45h0c-.02,2.27-.84,4.47-2.31,6.2l-4.07,4.79c-1.06,1.82.25,4.11,2.36,4.11h4.03v4.55l4.82,1.52c.76.18,1.3.86,1.3,1.64,0,.89-.69,1.62-1.57,1.68l-4.55.43v4.49c0,2.98,2.42,5.4,5.4,5.4h4.81c2.52,0,4.86-.76,6.8-2.06v6.78'/%3E%3Cline class='cls-15' x1='51.42' y1='68.87' x2='34.27' y2='63.1'/%3E%3Cline class='cls-15' x1='49.85' y1='71.58' x2='32.69' y2='71.58'/%3E%3Cline class='cls-15' x1='51.42' y1='74.29' x2='34.27' y2='80.06'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Crect class='cls-6' x='143.57' y='27.42' width='65.48' height='65.48' rx='13.58' ry='13.58' transform='translate(192.73 -125.41) rotate(76.21)'/%3E%3Crect class='cls-14' x='151.61' y='35.45' width='49.42' height='49.42' rx='7.39' ry='7.39' transform='translate(-9.26 43.75) rotate(-13.79)'/%3E%3Cpath class='cls-15' d='m194.23,70.4c1.06,1.58.73,2.9-.98,3.94-1.71,1.05-3,.8-3.88-.74l-3.7-5.87c-.28-.43-.59-.71-.96-.83-.36-.12-.78-.12-1.26,0l-10.18,2.5c-.55.14-.91.37-1.08.7-.17.34-.27.76-.32,1.27l-.65,7.06c-.15,2.13-1.21,3.16-3.19,3.11-1.98-.06-2.86-1.16-2.63-3.31l2.77-31.68c.27-2.66,1.49-4.26,3.66-4.79,2.17-.53,3.92.21,5.25,2.23l17.15,26.42Zm-19.57-19.92c-.18-.37-.4-.53-.68-.46s-.45.32-.51.75l-1,12.29c.02.42.11.69.26.81.16.13.39.15.71.08l7.22-1.77c.39-.1.65-.26.76-.5.11-.24.04-.53-.22-.89l-6.55-10.32Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.state-illust.korean {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 249.75 261.26'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 %7B stroke-width: 2px; %7D .cls-1, .cls-2, .cls-3, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 %7B stroke: %231e2124; %7D .cls-1, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 %7B stroke-linecap: round; stroke-linejoin: round; %7D .cls-2 %7B fill: %23eeb6ab; stroke-miterlimit: 10; %7D .cls-3 %7B fill: %23617be5; %7D .cls-4 %7B fill: none; stroke: %23eeb6ab; %7D .cls-5 %7B fill: %23f9fcfb; %7D .cls-6 %7B fill: %23a8befb; %7D .cls-7 %7B fill: %2397d2c1; %7D .cls-8 %7B fill: %23fdd100; %7D .cls-9 %7B fill: %23191919; %7D .cls-10 %7B fill: %231e2124; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cg%3E%3Crect class='cls-5' x='15.45' y='34.92' width='177.77' height='122.79' transform='translate(-24.32 36.23) rotate(-17.68)'/%3E%3Crect class='cls-4' x='17.73' y='71.31' width='15.53' height='15.53' transform='translate(-22.81 11.47) rotate(-17.68)'/%3E%3Crect class='cls-4' x='32.53' y='66.6' width='15.53' height='15.53' transform='translate(-20.68 15.74) rotate(-17.68)'/%3E%3Crect class='cls-4' x='47.32' y='61.88' width='15.53' height='15.53' transform='translate(-18.55 20.01) rotate(-17.68)'/%3E%3Crect class='cls-4' x='62.12' y='57.17' width='15.53' height='15.53' transform='translate(-16.42 24.28) rotate(-17.68)'/%3E%3Crect class='cls-4' x='76.91' y='52.45' width='15.53' height='15.53' transform='translate(-14.29 28.55) rotate(-17.68)'/%3E%3Crect class='cls-4' x='91.71' y='47.74' width='15.53' height='15.53' transform='translate(-12.16 32.82) rotate(-17.68)'/%3E%3Crect class='cls-4' x='106.5' y='43.02' width='15.53' height='15.53' transform='translate(-10.03 37.09) rotate(-17.68)'/%3E%3Crect class='cls-4' x='121.3' y='38.31' width='15.53' height='15.53' transform='translate(-7.9 41.36) rotate(-17.68)'/%3E%3Crect class='cls-4' x='136.09' y='33.59' width='15.53' height='15.53' transform='translate(-5.77 45.63) rotate(-17.68)'/%3E%3Crect class='cls-4' x='150.89' y='28.88' width='15.53' height='15.53' transform='translate(-3.63 49.9) rotate(-17.68)'/%3E%3Crect class='cls-4' x='17.5' y='65.15' width='155.29' height='4.65' transform='translate(-16 32.07) rotate(-17.68)'/%3E%3Crect class='cls-4' x='23.86' y='90.54' width='15.53' height='15.53' transform='translate(-28.36 14.24) rotate(-17.68)'/%3E%3Crect class='cls-4' x='38.65' y='85.83' width='15.53' height='15.53' transform='translate(-26.23 18.51) rotate(-17.68)'/%3E%3Crect class='cls-4' x='53.45' y='81.11' width='15.53' height='15.53' transform='translate(-24.1 22.78) rotate(-17.68)'/%3E%3Crect class='cls-4' x='68.25' y='76.4' width='15.53' height='15.53' transform='translate(-21.97 27.05) rotate(-17.68)'/%3E%3Crect class='cls-4' x='83.04' y='71.68' width='15.53' height='15.53' transform='translate(-19.84 31.32) rotate(-17.68)'/%3E%3Crect class='cls-4' x='97.84' y='66.97' width='15.53' height='15.53' transform='translate(-17.71 35.59) rotate(-17.68)'/%3E%3Crect class='cls-4' x='112.63' y='62.25' width='15.53' height='15.53' transform='translate(-15.58 39.86) rotate(-17.68)'/%3E%3Crect class='cls-4' x='127.43' y='57.54' width='15.53' height='15.53' transform='translate(-13.44 44.13) rotate(-17.68)'/%3E%3Crect class='cls-4' x='142.22' y='52.82' width='15.53' height='15.53' transform='translate(-11.31 48.4) rotate(-17.68)'/%3E%3Crect class='cls-4' x='157.02' y='48.11' width='15.53' height='15.53' transform='translate(-9.18 52.67) rotate(-17.68)'/%3E%3Crect class='cls-4' x='23.62' y='84.38' width='155.29' height='4.65' transform='translate(-21.55 34.84) rotate(-17.68)'/%3E%3Crect class='cls-4' x='29.99' y='109.77' width='15.53' height='15.53' transform='translate(-33.91 17.01) rotate(-17.68)'/%3E%3Crect class='cls-4' x='44.78' y='105.06' width='15.53' height='15.53' transform='translate(-31.78 21.28) rotate(-17.68)'/%3E%3Crect class='cls-4' x='59.58' y='100.34' width='15.53' height='15.53' transform='translate(-29.65 25.55) rotate(-17.68)'/%3E%3Crect class='cls-4' x='74.37' y='95.63' width='15.53' height='15.53' transform='translate(-27.52 29.82) rotate(-17.68)'/%3E%3Crect class='cls-4' x='89.17' y='90.91' width='15.53' height='15.53' transform='translate(-25.39 34.09) rotate(-17.68)'/%3E%3Crect class='cls-4' x='103.96' y='86.2' width='15.53' height='15.53' transform='translate(-23.25 38.36) rotate(-17.68)'/%3E%3Crect class='cls-4' x='118.76' y='81.48' width='15.53' height='15.53' transform='translate(-21.12 42.63) rotate(-17.68)'/%3E%3Crect class='cls-4' x='133.56' y='76.77' width='15.53' height='15.53' transform='translate(-18.99 46.9) rotate(-17.68)'/%3E%3Crect class='cls-4' x='148.35' y='72.05' width='15.53' height='15.53' transform='translate(-16.86 51.17) rotate(-17.68)'/%3E%3Crect class='cls-4' x='163.15' y='67.34' width='15.53' height='15.53' transform='translate(-14.73 55.44) rotate(-17.68)'/%3E%3Crect class='cls-4' x='29.75' y='103.61' width='155.29' height='4.65' transform='translate(-27.09 37.61) rotate(-17.68)'/%3E%3Crect class='cls-4' x='36.12' y='129' width='15.53' height='15.53' transform='translate(-39.46 19.78) rotate(-17.68)'/%3E%3Crect class='cls-4' x='50.91' y='124.29' width='15.53' height='15.53' transform='translate(-37.33 24.05) rotate(-17.68)'/%3E%3Crect class='cls-4' x='65.71' y='119.57' width='15.53' height='15.53' transform='translate(-35.2 28.32) rotate(-17.68)'/%3E%3Crect class='cls-4' x='80.5' y='114.86' width='15.53' height='15.53' transform='translate(-33.06 32.59) rotate(-17.68)'/%3E%3Crect class='cls-4' x='95.3' y='110.14' width='15.53' height='15.53' transform='translate(-30.93 36.86) rotate(-17.68)'/%3E%3Crect class='cls-4' x='110.09' y='105.43' width='15.53' height='15.53' transform='translate(-28.8 41.13) rotate(-17.68)'/%3E%3Crect class='cls-4' x='124.89' y='100.71' width='15.53' height='15.53' transform='translate(-26.67 45.4) rotate(-17.68)'/%3E%3Crect class='cls-4' x='139.68' y='96' width='15.53' height='15.53' transform='translate(-24.54 49.67) rotate(-17.68)'/%3E%3Crect class='cls-4' x='154.48' y='91.28' width='15.53' height='15.53' transform='translate(-22.41 53.94) rotate(-17.68)'/%3E%3Crect class='cls-4' x='169.27' y='86.57' width='15.53' height='15.53' transform='translate(-20.28 58.21) rotate(-17.68)'/%3E%3Crect class='cls-4' x='35.88' y='122.84' width='155.29' height='4.65' transform='translate(-32.64 40.38) rotate(-17.68)'/%3E%3Crect class='cls-4' x='42.24' y='148.23' width='15.53' height='15.53' transform='translate(-45.01 22.55) rotate(-17.68)'/%3E%3Crect class='cls-4' x='57.04' y='143.52' width='15.53' height='15.53' transform='translate(-42.87 26.82) rotate(-17.68)'/%3E%3Crect class='cls-4' x='71.83' y='138.8' width='15.53' height='15.53' transform='translate(-40.74 31.09) rotate(-17.68)'/%3E%3Crect class='cls-4' x='86.63' y='134.09' width='15.53' height='15.53' transform='translate(-38.61 35.36) rotate(-17.68)'/%3E%3Crect class='cls-4' x='101.43' y='129.37' width='15.53' height='15.53' transform='translate(-36.48 39.63) rotate(-17.68)'/%3E%3Crect class='cls-4' x='116.22' y='124.66' width='15.53' height='15.53' transform='translate(-34.35 43.9) rotate(-17.68)'/%3E%3Crect class='cls-4' x='131.02' y='119.94' width='15.53' height='15.53' transform='translate(-32.22 48.17) rotate(-17.68)'/%3E%3Crect class='cls-4' x='145.81' y='115.22' width='15.53' height='15.53' transform='translate(-30.09 52.44) rotate(-17.68)'/%3E%3Crect class='cls-4' x='160.61' y='110.51' width='15.53' height='15.53' transform='translate(-27.96 56.71) rotate(-17.68)'/%3E%3Crect class='cls-4' x='175.4' y='105.79' width='15.53' height='15.53' transform='translate(-25.83 60.98) rotate(-17.68)'/%3E%3C/g%3E%3Cg%3E%3Crect class='cls-8' x='7.79' y='184.17' width='100.91' height='13.26' transform='translate(-131.07 127.9) rotate(-54.65)'/%3E%3Crect class='cls-8' x='7.79' y='188.53' width='100.91' height='4.55' transform='translate(-131.07 127.9) rotate(-54.65)'/%3E%3Cpolygon class='cls-5' points='82.04 145.82 92.85 153.49 97.47 139.8 93.11 136.65 82.04 145.82'/%3E%3Cpath class='cls-9' d='m97.47,139.8l1.25-3.72c.54-1.62-1.37-2.93-2.69-1.85l-2.92,2.42,4.36,3.14Z'/%3E%3Cpath class='cls-2' d='m18.03,234.9h13.26v1.82c0,2.55-2.07,4.62-4.62,4.62h-4.03c-2.55,0-4.62-2.07-4.62-4.62v-1.82h0Z' transform='translate(142.33 29.64) rotate(35.35)'/%3E%3Crect class='cls-5' x='21.15' y='231.54' width='13.26' height='4.35' transform='translate(140.36 27.02) rotate(35.35)'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-3' d='m101.95,255.69l7.05-2.08c3.01-.89,5.54-2.94,7.04-5.69h0c3.12-5.74,10.31-7.86,16.04-4.74l.23.13-10.15-5.52-.23-.13c-5.74-3.12-12.92-1-16.04,4.74h0c-1.5,2.76-4.03,4.8-7.04,5.69l-7.05,2.08,9.54,1.01.61,4.51Z'/%3E%3Cpolygon class='cls-5' points='157.97 256.64 123.18 212.45 143.69 122.55 178.48 166.74 157.97 256.64'/%3E%3Cpolygon class='cls-5' points='157.97 256.64 113.88 216.23 134.39 126.33 178.48 166.74 157.97 256.64'/%3E%3Cpolygon class='cls-5' points='157.97 256.64 105.57 219.4 126.09 129.49 178.48 166.74 157.97 256.64'/%3E%3Cpolygon class='cls-5' points='157.97 256.64 208.49 231.92 229.01 142.02 178.48 166.74 157.97 256.64'/%3E%3Cpolygon class='cls-5' points='157.97 256.64 215.23 239.36 235.74 149.45 178.48 166.74 157.97 256.64'/%3E%3Cpolygon class='cls-5' points='157.97 256.64 221.34 245.81 241.85 155.91 178.48 166.74 157.97 256.64'/%3E%3Cpolygon class='cls-1' points='152.98 252.15 98.57 223.72 115.17 136.28 119.08 133.82 173.49 162.25 152.98 252.15'/%3E%3Cpolygon class='cls-1' points='164.42 254.76 225.78 252.74 248.75 166.75 246.29 162.84 184.93 164.86 164.42 254.76'/%3E%3Cpolygon class='cls-1' points='149.07 254.61 94.65 226.18 115.17 136.28 169.58 164.71 149.07 254.61'/%3E%3Cpolygon class='cls-1' points='166.88 258.68 228.24 256.66 248.75 166.75 187.39 168.77 166.88 258.68'/%3E%3Cpath class='cls-9' d='m182.94,164.4l-7.46-1.7c-2.98-.68-6.08-.54-8.98.4h0s9.17,15.98,9.17,15.98l15.2-10.42h0c-2.21-2.11-4.95-3.58-7.92-4.25Z'/%3E%3Cpath class='cls-1' d='m166.5,163.1h0s-20.9,91.6-20.9,91.6h0c7.61,3.42,16.02,5.34,24.37,5.56h0s20.9-91.6,20.9-91.6h0c-8.35-.22-16.75-2.14-24.37-5.56Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-10' d='m61.74,10.53c6.45-4.84,13.43-6.51,20.93-5.01,7.5,1.49,13.59,5.38,18.29,11.64,4.7,6.26,6.71,13.2,6.05,20.82-.66,7.61-4.22,13.84-10.68,18.68-6.45,4.84-13.43,6.51-20.93,5.01-7.5-1.5-13.59-5.38-18.29-11.64-4.7-6.26-6.71-13.21-6.05-20.82.67-7.62,4.23-13.85,10.68-18.68Zm10.67,14.24c-2.46,1.85-3.92,4.27-4.34,7.26-.43,2.99.29,5.72,2.14,8.19s4.27,3.92,7.26,4.34,5.72-.29,8.19-2.13,3.96-4.31,4.49-7.37c.53-3.06-.14-5.82-1.99-8.29-1.85-2.47-4.31-3.88-7.4-4.24-3.08-.36-5.86.39-8.33,2.24Z'/%3E%3Cpath class='cls-7' d='m60.7,6.54C67.15,1.71,74.13.03,81.62,1.53c7.5,1.49,13.59,5.38,18.29,11.64,4.7,6.26,6.71,13.2,6.05,20.82-.66,7.61-4.22,13.84-10.68,18.68-6.45,4.84-13.43,6.51-20.93,5.01-7.5-1.5-13.59-5.38-18.29-11.64-4.7-6.26-6.71-13.21-6.05-20.82.67-7.62,4.23-13.85,10.68-18.68Zm10.67,14.24c-2.46,1.85-3.92,4.27-4.34,7.26-.43,2.99.29,5.72,2.14,8.19,1.85,2.47,4.27,3.92,7.26,4.34s5.72-.29,8.19-2.13c2.47-1.85,3.96-4.31,4.49-7.37.53-3.06-.14-5.82-1.99-8.29s-4.31-3.88-7.4-4.24c-3.08-.36-5.86.39-8.33,2.24Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-10' d='m178.44,79.18c2.53,4.51,1.79,7.8-2.2,9.88-4,2.08-7.19,1.23-9.57-2.57l-7.37-12.44c-.52-.86-1.13-1.38-1.82-1.55-.7-.17-1.43-.09-2.22.24l-16.55,7.01c-4.99,2.12-8.56,1-10.72-3.36-2.16-4.35-.7-7.68,4.37-9.98l17.95-8.07c1.46-.93,2.59-1.83,3.38-2.71.79-.87,1.56-2.25,2.32-4.12l2.04-5.05c.38-.93.5-1.64.37-2.13-.13-.49-.57-.88-1.32-1.18l-8.41-3.4c-4.68-1.89-6.1-4.97-4.26-9.23,1.83-4.26,4.81-5.56,8.92-3.9l34.5,13.96c4.3,1.74,5.58,4.76,3.84,9.06-1.74,4.3-4.57,5.66-8.5,4.07l-7.57-3.06c-.94-.38-1.62-.44-2.05-.18-.43.26-.84.86-1.21,1.79l-2.04,5.05c-.61,1.5-.91,2.79-.91,3.87,0,1.09.27,2.29.83,3.6l8.2,14.42Z'/%3E%3Cpath class='cls-6' d='m178.44,74.76c2.53,4.51,1.79,7.8-2.2,9.88-4,2.08-7.19,1.23-9.57-2.57l-7.37-12.44c-.52-.86-1.13-1.38-1.82-1.55-.7-.17-1.43-.09-2.22.24l-16.55,7.01c-4.99,2.12-8.56,1-10.72-3.36-2.16-4.35-.7-7.68,4.37-9.98l17.95-8.07c1.46-.93,2.59-1.83,3.38-2.71.79-.87,1.56-2.25,2.32-4.12l2.04-5.05c.38-.93.5-1.64.37-2.13-.13-.49-.57-.88-1.32-1.18l-8.41-3.4c-4.68-1.89-6.1-4.97-4.26-9.23,1.83-4.26,4.81-5.56,8.92-3.9l34.5,13.96c4.3,1.74,5.58,4.76,3.84,9.06-1.74,4.3-4.57,5.66-8.5,4.07l-7.57-3.06c-.94-.38-1.62-.44-2.05-.18-.43.26-.84.86-1.21,1.79l-2.04,5.05c-.61,1.5-.91,2.79-.91,3.87,0,1.09.27,2.29.83,3.6l8.2,14.42Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-10' d='m70.7,88.77c4.52-1.32,7.35.1,8.47,4.26,1.12,4.16-.37,6.93-4.49,8.31l-12.64,3.6c-.62.24-1.14.66-1.56,1.26s-.51,1.21-.27,1.83l3.05,16.3c.85,4.87-.91,7.79-5.3,8.75-4.39.97-7.08-1.03-8.09-6.01l-3.48-17.61c-.47-1.9-1.07-3.28-1.81-4.14-.74-.86-2.02-1.92-3.83-3.19l-11.29-7.93c-3.76-2.64-4.36-5.87-1.8-9.69,2.57-3.81,5.88-4.3,9.95-1.45l11.07,7.77c1.51,1.06,2.75,1.76,3.74,2.12.99.36,2.23.27,3.72-.26l14.56-3.94Z'/%3E%3Cpath class='cls-1' d='m70.15,85.63c4.52-1.32,7.35.1,8.47,4.26,1.12,4.16-.37,6.93-4.49,8.31l-12.64,3.6c-.62.24-1.14.66-1.56,1.26s-.51,1.21-.27,1.83l3.05,16.3c.85,4.87-.91,7.79-5.3,8.75-4.39.97-7.08-1.03-8.09-6.01l-3.48-17.61c-.47-1.9-1.07-3.28-1.81-4.14-.74-.86-2.02-1.92-3.83-3.19l-11.29-7.93c-3.76-2.64-4.36-5.87-1.8-9.69,2.57-3.81,5.88-4.3,9.95-1.45l11.07,7.77c1.51,1.06,2.75,1.76,3.74,2.12.99.36,2.23.27,3.72-.26l14.56-3.94Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.state-illust.science {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248.42 267.88'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18, .cls-19, .cls-20, .cls-21, .cls-22 %7B stroke: %231e2124; stroke-width: 2px; %7D .cls-1, .cls-8, .cls-9, .cls-13, .cls-17, .cls-19, .cls-21 %7B stroke-linecap: round; stroke-linejoin: round; %7D .cls-2 %7B fill: %23ff7a52; %7D .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-10, .cls-11, .cls-12, .cls-14, .cls-15, .cls-16, .cls-18, .cls-20, .cls-22 %7B stroke-miterlimit: 10; %7D .cls-3 %7B fill: %2358595b; %7D .cls-4 %7B fill: %23808184; %7D .cls-5 %7B fill: %23424242; %7D .cls-6 %7B fill: none; %7D .cls-7 %7B fill: %23accdec; %7D .cls-8, .cls-16 %7B fill: %23fff; %7D .cls-9 %7B fill: %23617be5; %7D .cls-10 %7B fill: %232bc26c; %7D .cls-11 %7B fill: %23a6a8ab; %7D .cls-12 %7B fill: %23f1f1f2; %7D .cls-13 %7B fill: %2398ab00; %7D .cls-14 %7B fill: %23cdf6f3; %7D .cls-15 %7B fill: %23ffc85f; %7D .cls-17 %7B fill: %2397d2c1; %7D .cls-18 %7B fill: %236d6e70; %7D .cls-19 %7B fill: %23fdd100; %7D .cls-20 %7B fill: %23404041; %7D .cls-21 %7B fill: %23eeb6ab; %7D .cls-22 %7B fill: %23e6e7e8; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cg%3E%3Cg%3E%3Crect class='cls-14' x='149.48' y='152.42' width='20.96' height='5.56' rx='2.47' ry='2.47'/%3E%3Crect class='cls-14' x='181.89' y='152.42' width='20.96' height='5.56' rx='2.47' ry='2.47'/%3E%3Crect class='cls-14' x='213.33' y='152.42' width='20.96' height='5.56' rx='2.47' ry='2.47'/%3E%3Cg%3E%3Cg%3E%3Cpath class='cls-10' d='m231.44,203.58v30.29c0,4.18-3.38,7.56-7.58,7.56s-7.56-3.38-7.56-7.56v-30.29h15.14Z'/%3E%3Crect class='cls-14' x='216.3' y='157.98' width='15.14' height='45.6'/%3E%3Cpath class='cls-15' d='m200,184.87v49c0,4.18-3.38,7.56-7.58,7.56s-7.56-3.38-7.56-7.56v-49h15.14Z'/%3E%3Crect class='cls-14' x='184.87' y='157.98' width='15.14' height='26.89'/%3E%3Cpath class='cls-2' d='m167.59,195.61v38.26c0,4.18-3.38,7.56-7.56,7.56s-7.58-3.38-7.58-7.56v-38.26h15.14Z'/%3E%3Crect class='cls-14' x='152.45' y='157.98' width='15.14' height='37.63'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-6' d='m167.59,195.61v38.26c0,4.18-3.38,7.56-7.56,7.56s-7.58-3.38-7.58-7.56v-75.89h15.14v37.63Z'/%3E%3Cpath class='cls-6' d='m200,184.87v49c0,4.18-3.38,7.56-7.58,7.56s-7.56-3.38-7.56-7.56v-75.89h15.14v26.89Z'/%3E%3Cpath class='cls-6' d='m231.44,203.58v30.29c0,4.18-3.38,7.56-7.58,7.56s-7.56-3.38-7.56-7.56v-75.89h15.14v45.6Z'/%3E%3Cline class='cls-6' x1='152.45' y1='195.61' x2='167.59' y2='195.61'/%3E%3Cline class='cls-6' x1='184.87' y1='184.87' x2='200' y2='184.87'/%3E%3Cline class='cls-6' x1='216.3' y1='203.58' x2='231.44' y2='203.58'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Crect class='cls-5' x='135.43' y='157.98' width='7.58' height='91.2' rx='1.87' ry='1.87'/%3E%3Crect class='cls-5' x='239.84' y='157.98' width='7.58' height='91.2' rx='1.87' ry='1.87'/%3E%3Crect class='cls-5' x='143.01' y='165.73' width='96.83' height='7.07'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Crect class='cls-18' x='79.23' y='158.64' width='19.37' height='3.32' transform='translate(-62.24 56.6) rotate(-26.53)'/%3E%3Crect class='cls-18' x='72.5' y='150.62' width='3.32' height='19.37' transform='translate(-102.39 155.05) rotate(-63.47)'/%3E%3Cg%3E%3Cpath class='cls-11' d='m59.3,175.03c-.72,1.24-2.3,1.66-3.54.94h0c-1.24-.72-1.66-2.3-.95-3.54l16.23-28.06c.72-1.24,2.3-1.66,3.54-.95h0c1.24.72,1.66,2.3.95,3.54l-16.23,28.06Z'/%3E%3Cpath class='cls-11' d='m103.79,175.03c.72,1.24,2.3,1.66,3.54.94h0c1.24-.72,1.66-2.3.95-3.54l-16.23-28.06c-.72-1.24-2.3-1.66-3.54-.95h0c-1.24.72-1.66,2.3-.95,3.54l16.23,28.06Z'/%3E%3C/g%3E%3Cpath class='cls-20' d='m98.33,134.72c0,9.27-7.52,16.79-16.79,16.79s-16.79-7.52-16.79-16.79,7.52-16.79,16.79-16.79,16.79,7.52,16.79,16.79Z'/%3E%3Cg%3E%3Cg%3E%3Crect class='cls-12' x='47.98' y='57.91' width='35.94' height='20.56' transform='translate(-18.86 25.68) rotate(-19.34)'/%3E%3Crect class='cls-20' x='44.63' y='64.6' width='4.49' height='20.56' transform='translate(-22.15 19.74) rotate(-19.33)'/%3E%3Crect class='cls-20' x='75.58' y='51.98' width='7.54' height='23' transform='translate(-16.55 29.86) rotate(-19.34)'/%3E%3Cpath class='cls-7' d='m79.51,52.54l6.81,19.4c2.69-.95,3.35-6.05,1.47-11.41-1.88-5.36-5.59-8.93-8.28-7.99Z'/%3E%3Cpath class='cls-20' d='m65.69,76.41c-2.86,1-4.8,2.88-4.34,4.19l1.9,5.41,10.34-3.63-1.9-5.41c-.46-1.31-3.15-1.56-6-.56Z'/%3E%3C/g%3E%3Crect class='cls-3' x='20.42' y='108.41' width='16.08' height='38.25' transform='translate(-40.62 16.61) rotate(-19.33)'/%3E%3Crect class='cls-4' x='5.25' y='119.79' width='16.08' height='26.14' transform='translate(-43.24 11.89) rotate(-19.34)'/%3E%3Crect class='cls-20' x='31.03' y='94.85' width='13.62' height='58.79' transform='translate(-39.01 19.54) rotate(-19.34)'/%3E%3Crect class='cls-12' x='40.03' y='77.44' width='94.82' height='58.79' transform='translate(-30.44 34.98) rotate(-19.34)'/%3E%3Crect class='cls-20' x='110.09' y='63.2' width='22.73' height='63.4' transform='translate(-24.57 45.57) rotate(-19.34)'/%3E%3Cpath class='cls-7' d='m122.79,64.39l18.77,53.5c9.48-3.33,12.97-18,7.78-32.78-5.18-14.77-17.07-24.05-26.56-20.72Z'/%3E%3C/g%3E%3Cpath class='cls-11' d='m83.64,180.58c0,1.34-1.08,2.42-2.42,2.42h0c-1.34,0-2.42-1.08-2.42-2.42v-30.3c0-1.34,1.08-2.42,2.42-2.42h0c1.34,0,2.42,1.08,2.42,2.42v30.3Z'/%3E%3C/g%3E%3Cpath class='cls-3' d='m199.43,76.56l24.84,42.3c.93,1.6,3.66,1.74,6.1.32,2.44-1.42,3.66-3.88,2.72-5.47l-24.84-42.3-8.83,5.15Z'/%3E%3Cpath class='cls-20' d='m208.26,71.4c.93,1.6-.29,4.05-2.72,5.47-2.44,1.42-5.17,1.28-6.11-.32-.93-1.6.28-4.05,2.72-5.48,2.43-1.42,5.17-1.28,6.1.32Z'/%3E%3Cpath class='cls-20' d='m197.13,68.54l3.19,5.46c.61,1.05,2.26,1.21,3.69.38,1.43-.83,2.09-2.36,1.49-3.4l-3.19-5.46-5.18,3.03Z'/%3E%3Cpath class='cls-22' d='m214.61,19.21c10.23,17.51,4.32,40-13.19,50.23-17.51,10.22-40,4.32-50.23-13.2-10.22-17.51-4.32-40,13.2-50.22,17.51-10.23,39.99-4.32,50.22,13.19Z'/%3E%3Cpath class='cls-16' d='m208.31,22.9c8.19,14.03,3.45,32.04-10.57,40.22-14.03,8.19-32.04,3.46-40.22-10.56-8.19-14.03-3.46-32.03,10.57-40.23,14.02-8.19,32.04-3.47,40.23,10.57Z'/%3E%3Cg%3E%3Cpath class='cls-6' d='m178.25,55.64c-3.44-.89-4.14-9.64-1.57-19.53,2.57-9.89,7.45-17.19,10.88-16.29,3.44.89,4.14,9.64,1.57,19.53-2.57,9.89-7.45,17.19-10.88,16.29Z'/%3E%3Cpath class='cls-6' d='m165.09,42.73c-.96-3.42,6.24-8.43,16.08-11.19,9.84-2.76,18.6-2.23,19.56,1.19.96,3.42-6.24,8.43-16.08,11.19-9.84,2.76-18.6,2.23-19.56-1.19Z'/%3E%3Cpath class='cls-6' d='m169.78,24.68c-2.51,2.52,1.34,10.4,8.59,17.61,7.25,7.21,15.16,11.01,17.66,8.49,2.5-2.52-1.34-10.4-8.59-17.61-7.25-7.21-15.16-11.01-17.66-8.49Z'/%3E%3Cpath class='cls-16' d='m182.53,39.19c-.81-.21-1.29-1.04-1.08-1.85s1.04-1.29,1.85-1.08c.81.21,1.29,1.04,1.08,1.85s-1.04,1.29-1.85,1.08Z'/%3E%3Cpath class='cls-16' d='m189.54,24.24c-.81-.21-1.29-1.04-1.08-1.85s1.04-1.29,1.85-1.08,1.29,1.04,1.08,1.85-1.04,1.29-1.85,1.08Z'/%3E%3Cpath class='cls-16' d='m168.71,46.82c-.81-.21-1.29-1.04-1.08-1.85s1.04-1.29,1.85-1.08,1.29,1.04,1.08,1.85c-.21.81-1.04,1.29-1.85,1.08Z'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath class='cls-17' d='m1,224.89h57.23c4.87,0,8.83,3.96,8.83,8.83v6.63c0,4.87-3.96,8.83-8.83,8.83H1v-24.28h0Z' transform='translate(68.05 474.07) rotate(-180)'/%3E%3Cpath class='cls-9' d='m61.82,229.51v15.05c0,2.55,2.07,4.62,4.62,4.62h79.75s0-5.24,0-5.24h-79.13v-13.81h79.13s0-5.24,0-5.24h-79.75c-2.55,0-4.62,2.07-4.62,4.62Z'/%3E%3Crect class='cls-8' x='67.05' y='230.13' width='75.11' height='13.81'/%3E%3Crect class='cls-8' x='67.05' y='234.75' width='75.11' height='4.56' transform='translate(209.22 474.07) rotate(-180)'/%3E%3Cpath class='cls-1' d='m131.88,266.88l-4.55-5.85c-1.94-2.5-3.03-4.88-3.03-8.41h0c0-7.35-4.63-13.31-10.34-13.31h-.23s10.1,0,10.1,0h.23c5.71,0,10.34,5.96,10.34,13.31h0c0,3.53,1.09,5.91,3.03,8.41l4.55,5.85-7.75-4.13-2.35,4.13Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-21' d='m59.38,200.61h57.23c4.87,0,8.83,3.96,8.83,8.83v6.63c0,4.87-3.96,8.83-8.83,8.83h-57.23v-24.28h0Z'/%3E%3Cpath class='cls-19' d='m88.7,205.23v15.05c0,2.55-2.07,4.62-4.62,4.62H4.34v-5.24h79.13v-13.81H4.34v-5.24h79.75c2.55,0,4.62,2.07,4.62,4.62Z'/%3E%3Crect class='cls-8' x='8.35' y='205.85' width='75.11' height='13.81'/%3E%3Crect class='cls-8' x='8.35' y='210.47' width='75.11' height='4.56'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-13' d='m18.35,176.32h57.23c4.87,0,8.83,3.96,8.83,8.83v6.63c0,4.87-3.96,8.83-8.83,8.83H18.35v-24.28h0Z' transform='translate(102.76 376.93) rotate(-180)'/%3E%3Cpath class='cls-17' d='m55.08,180.94v15.05c0,2.55,2.07,4.62,4.62,4.62h79.75s0-5.24,0-5.24H60.32v-13.81h79.13s0-5.24,0-5.24H59.7c-2.55,0-4.62,2.07-4.62,4.62Z'/%3E%3Crect class='cls-8' x='60.32' y='181.56' width='75.11' height='13.81'/%3E%3Crect class='cls-8' x='60.32' y='186.19' width='75.11' height='4.56' transform='translate(195.75 376.93) rotate(-180)'/%3E%3Cpath class='cls-8' d='m50.28,200.61c-3.33,0-6.03-2.7-6.03-6.03v-12.23c0-3.33,2.7-6.03,6.03-6.03h4.24c-3.33,0-6.03,2.7-6.03,6.03v12.23c0,3.33,2.7,6.03,6.03,6.03h-4.24Z'/%3E%3Cpath class='cls-8' d='m28.44,200.61c-3.33,0-6.03-2.7-6.03-6.03v-12.23c0-3.33,2.7-6.03,6.03-6.03h4.24c-3.33,0-6.03,2.7-6.03,6.03v12.23c0,3.33,2.7,6.03,6.03,6.03h-4.24Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.state-illust.emotion {
  top: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245.28 247.32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 %7B stroke-linecap: round; stroke-linejoin: round; %7D .cls-1, .cls-4, .cls-10 %7B stroke: %231e2124; stroke-width: 2px; %7D .cls-11 %7B fill: %23ffc5c8; %7D .cls-11, .cls-12 %7B stroke-width: 0px; %7D .cls-2, .cls-3, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 %7B stroke-width: 1.6px; %7D .cls-2, .cls-6 %7B stroke: %23000; %7D .cls-2, .cls-7 %7B fill: none; %7D .cls-3 %7B fill: %23fff; %7D .cls-3, .cls-5, .cls-7, .cls-8, .cls-9 %7B stroke: %23040403; %7D .cls-4 %7B fill: %23ffdcd4; %7D .cls-5 %7B fill: %23ff9494; %7D .cls-10 %7B fill: %23ffc85f; stroke-miterlimit: 10; %7D .cls-6 %7B fill: %238f5442; %7D .cls-8 %7B fill: %23040403; %7D .cls-9 %7B fill: %23ffb2b2; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cg%3E%3Cpath class='cls-10' d='m131.8,88.52h3.9c32.79,0,59.41,26.62,59.41,59.41v98.39h-122.71v-98.39c0-32.79,26.62-59.41,59.41-59.41Z'/%3E%3Cpath class='cls-10' d='m133.31,88.69s-61.62-.77-95.85,72.24c-24.53,46.46-13.31,64.16,3.26,70.8,6.86,2.74,14.41,3.24,21.63,1.66,28.96-6.34,58.09-28.67,58.09-28.67l-20.07-34.31-29.53,10.73s9.18-14.27,11.85-17.28'/%3E%3Cpath class='cls-10' d='m134.19,88.69s61.62-.77,95.85,72.24c24.53,46.46,13.31,64.16-3.26,70.8-6.86,2.74-14.41,3.24-21.63,1.66-28.96-6.34-58.09-28.67-58.09-28.67l20.07-34.31,29.53,10.73s-9.18-14.27-11.85-17.28'/%3E%3Cg%3E%3Cpath class='cls-1' d='m133.31,187.71s80.03-39.31,54.63-73.56c-22.18-29.92-54.63,8.84-54.63,8.84,0,0-32.45-38.76-54.63-8.84-25.4,34.25,54.63,73.56,54.63,73.56Z'/%3E%3Cg%3E%3Cline class='cls-7' x1='133.33' y1='140.29' x2='133.33' y2='173.37'/%3E%3Cg%3E%3Cpath class='cls-3' d='m133.29,114.51c1.25,0,2.66.42,3.72,2.34,2.9,5.25-1.67,14.04-3.72,14.04-2.06,0-6.63-8.8-3.72-14.04,1.06-1.92,2.47-2.34,3.72-2.34Z'/%3E%3Cpath class='cls-3' d='m117.82,120.14c.96-.8,2.31-1.39,4.36-.6,5.6,2.15,7.75,11.83,6.17,13.15-1.58,1.32-10.73-2.48-11.88-8.36-.42-2.15.39-3.38,1.35-4.19Z'/%3E%3Cpath class='cls-3' d='m109.58,134.41c.22-1.23.88-2.55,2.95-3.26,5.67-1.95,13.54,4.08,13.18,6.11-.36,2.02-9.82,5-14.48,1.23-1.7-1.38-1.88-2.84-1.66-4.07Z'/%3E%3Cpath class='cls-3' d='m112.44,150.62c-.63-1.08-.96-2.52.17-4.4,3.09-5.14,13-5.58,14.02-3.8,1.03,1.78-4.31,10.14-10.3,10.25-2.19.04-3.26-.97-3.89-2.05Z'/%3E%3Cpath class='cls-3' d='m125.06,161.21c-1.18-.43-2.36-1.31-2.7-3.47-.93-5.92,6.37-12.63,8.3-11.92,1.93.7,3.22,10.53-1.3,14.47-1.65,1.44-3.12,1.36-4.3.93Z'/%3E%3Cpath class='cls-3' d='m141.53,161.21c-1.18.43-2.65.51-4.3-.93-4.52-3.94-3.24-13.77-1.3-14.47,1.93-.7,9.24,6,8.3,11.92-.34,2.17-1.52,3.05-2.7,3.47Z'/%3E%3Cpath class='cls-3' d='m154.14,150.62c-.63,1.08-1.7,2.09-3.89,2.05-5.99-.11-11.33-8.47-10.3-10.25,1.03-1.78,10.93-1.34,14.02,3.8,1.13,1.88.79,3.31.17,4.4Z'/%3E%3Cpath class='cls-3' d='m157,134.41c.22,1.23.05,2.69-1.66,4.07-4.66,3.77-14.12.8-14.48-1.23-.36-2.02,7.51-8.05,13.18-6.11,2.07.71,2.74,2.03,2.95,3.26Z'/%3E%3Cpath class='cls-3' d='m148.77,120.14c.96.8,1.77,2.04,1.35,4.19-1.15,5.88-10.3,9.69-11.88,8.36-1.58-1.32.58-11,6.17-13.15,2.05-.79,3.4-.21,4.36.6Z'/%3E%3Ccircle class='cls-10' cx='133.29' cy='138.59' r='12.3'/%3E%3C/g%3E%3C/g%3E%3Cpath class='cls-5' d='m152.09,160.22c1-.3,1.62,1.29.77,2.05s-1.9.15-2.88-.14c-.2-1-.71-2.11.14-2.88s2.36,0,1.97.96Z'/%3E%3Cpath class='cls-3' d='m108.81,172.89c12.42,9.06,24.5,14.99,24.5,14.99,0,0,12.06-5.92,24.47-14.97-6.81-2.59-15.3-4.13-24.51-4.13s-17.66,1.53-24.46,4.11Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-4' d='m162.38,171.02c-.79-1.64-2.42-2.55-4.09-2.53,1.5-1.4,1.88-3.71.77-5.55-1.26-2.08-4.02-2.68-6.14-1.49l-.14.08c.22-.96.13-2-.33-2.96-1.08-2.21-3.74-3.13-5.95-2.05l-15.76,7.68c-1.22.59-2.55.92-3.91.97l-2.77.09,2.78-1.19c2.49-1.07,3.79-3.93,2.77-6.44-1.04-2.56-3.97-3.75-6.5-2.67l-7.21,3.1c-5.32,2.28-9.84,6.03-13.08,10.83l-1.78,2.65,18.26,31.21,7.88-.9c6.44-.74,12.71-3,18.13-6.55l5.73-3.75c1.97-1.29,2.73-3.89,1.59-5.95-.77-1.39-2.14-2.19-3.59-2.3l11.39-6.42c2.06-1.16,2.98-3.74,1.95-5.87Z'/%3E%3Cline class='cls-9' x1='119.31' y1='167.3' x2='126.84' y2='164.07'/%3E%3Cline class='cls-7' x1='160.55' y1='176.83' x2='140.14' y2='188.34'/%3E%3Cline class='cls-7' x1='157.44' y1='169.13' x2='137.02' y2='180.64'/%3E%3Cpath class='cls-7' d='m152.45,158.57c1.08,2.21.16,4.88-2.05,5.95l-17.77,8.66'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-4' d='m165.39,168.89c-3.23-4.8-7.75-8.55-13.08-10.83l-7.21-3.1c-2.53-1.08-5.46.11-6.5,2.67-1.02,2.51.28,5.37,2.77,6.44l2.78,1.19-2.77-.09c-1.36-.04-2.69-.38-3.91-.97l-15.76-7.68c-2.21-1.08-4.88-.16-5.95,2.05-.47.96-.56,2-.33,2.96l-.14-.08c-2.12-1.19-4.88-.59-6.14,1.49-1.12,1.85-.73,4.15.77,5.55-1.67-.03-3.3.89-4.09,2.53-1.03,2.13-.11,4.71,1.95,5.87l11.39,6.42c-1.44.1-2.82.9-3.59,2.3-1.13,2.06-.38,4.66,1.59,5.95l5.73,3.75c5.42,3.55,11.69,5.81,18.13,6.55l7.21.82,18.55-31.71-1.4-2.08Z'/%3E%3Cline class='cls-9' x1='148.9' y1='167.3' x2='141.37' y2='164.07'/%3E%3Cline class='cls-7' x1='107.66' y1='176.83' x2='128.07' y2='188.34'/%3E%3Cline class='cls-7' x1='110.77' y1='169.13' x2='131.18' y2='180.64'/%3E%3Cpath class='cls-7' d='m115.76,158.57c-1.08,2.21-.16,4.88,2.05,5.95l17.77,8.66'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-6' d='m180.6,86.26c.57-4.21.59-8.58.59-12.83v-24.09c0-26.76-21.7-48.46-48.46-48.46-9.07,0-18.06,2.57-25.74,7.4-10.58,6.65-18.36,17.36-21.33,29.5-1.95,7.97-.73,16.73-.5,24.92.26,9.44.93,18.98.6,28.42-.26,7.35,4.77,13.37,11.08,16.82,5.96,3.26,12.8,4.43,19.49,5.55-3.27-4.81-5.25-10.47-5.69-16.26,2.48,3.97,6.58,6.88,11.14,7.93-2.49-2-2.65-14.12-.65-16.63,2.24-2.81,17.16-1.61,20.53-.22,1.8.74,3.99,1.62,4.92,3.4,1.55,2.95,1.26,7.4-.02,10.37-1.39,3.25-4.2,5.85-7.54,7,8.45,3.43,19.01.66,24.68-6.48-.24,4.13-2.94,8.02-6.71,9.69,3.03-.2,6.9-1.36,8.78-2.5,4.98-3.01,7.45-6.44,10.02-10.1,2.79-3.96,4.18-8.68,4.82-13.44Z'/%3E%3Cpath class='cls-2' d='m115.59,113.08s-17.77-4.64-13.9-36.03'/%3E%3Cpath class='cls-2' d='m91.6,69.2c-.54,15.04-2.45,30.43,5.23,38.73'/%3E%3Cpath class='cls-2' d='m161.39,108.74s5.77-5.44,5.77-28.07'/%3E%3Cpath class='cls-2' d='m144.31,110.4s15.69-.94,17.08-25.65'/%3E%3Cg%3E%3Cellipse class='cls-4' cx='94.98' cy='52.62' rx='11.74' ry='13.45'/%3E%3Cpath class='cls-4' d='m93.24,44.45s-4.49,0-4.49,7.71'/%3E%3C/g%3E%3Cg%3E%3Cellipse class='cls-4' cx='170.48' cy='52.62' rx='11.74' ry='13.45'/%3E%3Cpath class='cls-4' d='m172.55,44.37s4.9,0,4.9,7.71'/%3E%3C/g%3E%3Cpath class='cls-4' d='m121.12,58.84h26.33v30.92c0,7.04-5.71,12.75-12.75,12.75h-.84c-7.04,0-12.75-5.71-12.75-12.75v-30.92h0Z'/%3E%3Cpolygon class='cls-12' points='131.43 74.13 125.73 84.93 147.45 89.34 147.45 70.7 131.43 74.13'/%3E%3Ccircle class='cls-4' cx='133.17' cy='46.26' r='39.38'/%3E%3Cpath class='cls-6' d='m167.15,15.22c-1.93,11.77-18.43,23.96-26.89,24.37,2.05-4.71,8.18-13.73,8.75-18.84-4.12,9.56-17.37,15.46-29.23,18.43,5.94-7.65,8.52-12.48,13.09-19.69-6.65,9.83-16.85,18.55-37.47,17.5,6.52-3.01,15.65-12.56,21.99-19.3-7.05,6.87-17.32,20.05-27.15,20.66,0,0,.1-17.89,14.16-28.35,7.87-5.85,20.04-11.89,39.05-7.94,0,0,15.28,2.68,23.69,13.15Z'/%3E%3Cpath class='cls-2' d='m107.7,83.77c-.34,4.72.75,9.53,3.09,13.64'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cellipse class='cls-8' cx='121.45' cy='44.37' rx='3' ry='3.06'/%3E%3Cellipse class='cls-8' cx='143.46' cy='44.37' rx='3' ry='3.06'/%3E%3C/g%3E%3Cpath class='cls-7' d='m123.1,57.98c2.19,3.22,5.88,5.33,10.06,5.33s7.87-2.11,10.06-5.33'/%3E%3Cpath class='cls-7' d='m131.94,45.83c-2.01,0-3.64,1.63-3.64,3.64h0c0,2.01,1.63,3.64,3.64,3.64'/%3E%3C/g%3E%3Cg%3E%3Ccircle class='cls-10' cx='31.07' cy='43.5' r='15.05'/%3E%3Crect class='cls-10' x='29.93' y='13.26' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(62.14 37.94) rotate(-180)'/%3E%3Crect class='cls-10' x='41.31' y='16.05' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(69.96 60.72) rotate(-152.38)'/%3E%3Crect class='cls-10' x='50.09' y='23.8' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(56.19 88.43) rotate(-124.76)'/%3E%3Crect class='cls-10' x='54.27' y='34.74' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(22.16 100.46) rotate(-97.14)'/%3E%3Crect class='cls-10' x='52.91' y='46.38' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(-13.65 84.5) rotate(-69.52)'/%3E%3Crect class='cls-10' x='46.32' y='56.05' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(-29.11 47.48) rotate(-41.9)'/%3E%3Crect class='cls-10' x='35.98' y='61.57' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(-15.45 11.24) rotate(-14.28)'/%3E%3Crect class='cls-10' x='24.27' y='61.66' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(16.23 -4.05) rotate(13.34)'/%3E%3Crect class='cls-10' x='13.85' y='56.32' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(44.33 5.36) rotate(40.96)'/%3E%3Crect class='cls-10' x='7.26' y='46.75' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(54.17 25.49) rotate(68.58)'/%3E%3Crect class='cls-10' x='5.54' y='35.14' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(48.02 38.62) rotate(96.2)'/%3E%3Crect class='cls-10' x='9.55' y='24.14' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(41.44 37.58) rotate(123.82)'/%3E%3Crect class='cls-10' x='18.2' y='16.24' width='2.28' height='11.42' rx='1.14' ry='1.14' transform='translate(46.83 31.99) rotate(151.44)'/%3E%3C/g%3E%3Ccircle class='cls-11' cx='156.83' cy='54.03' r='6.6'/%3E%3Ccircle class='cls-11' cx='110.79' cy='54.03' r='6.6'/%3E%3C/g%3E%3C/svg%3E");
}
.state-illust.best-study {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 239.16 271.27'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11 %7B stroke: %231e2124; stroke-width: 2px; %7D .cls-1, .cls-2, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11 %7B stroke-linecap: round; stroke-linejoin: round; %7D .cls-12 %7B mix-blend-mode: darken; stroke-width: 0px; %7D .cls-12, .cls-6 %7B fill: %23a8befb; %7D .cls-13 %7B isolation: isolate; %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B stroke-miterlimit: 10; %7D .cls-3, .cls-11 %7B fill: %23eeb6ab; %7D .cls-4 %7B fill: %23617be5; %7D .cls-5 %7B fill: %23f9fcfb; %7D .cls-7 %7B fill: %23aebefa; %7D .cls-8 %7B fill: %2397d2c1; %7D .cls-9 %7B fill: %23fdd100; %7D .cls-10 %7B fill: %23191919; %7D %3C/style%3E%3C/defs%3E%3Cg class='cls-13'%3E%3Cg id='_레이어_2' data-name='레이어 2'%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Crect class='cls-5' x='98.17' y='229.45' width='25.76' height='41.93' rx='.34' ry='.34' transform='translate(361.46 139.37) rotate(90)'/%3E%3Cpath class='cls-5' d='m114.41,201.28h0c.07,0,.13.06.13.13v130.75c0,.07-.06.13-.13.13h0c-3.78,0-6.85-3.07-6.85-6.85v-117.31c0-3.78,3.07-6.85,6.85-6.85Z' transform='translate(377.83 155.73) rotate(90)'/%3E%3Crect class='cls-5' x='1' y='95.92' width='220.1' height='141.62' rx='14.7' ry='14.7'/%3E%3Cpath class='cls-7' d='m56.5,61.98h109.1c6.05,0,10.96,4.91,10.96,10.96v187.58c0,6.05-4.91,10.96-10.96,10.96H56.5c-6.05,0-10.96-4.91-10.96-10.96V72.94c0-6.05,4.91-10.96,10.96-10.96Z' transform='translate(277.78 55.68) rotate(90)'/%3E%3Crect class='cls-12' x='90.08' y='237.53' width='41.93' height='3.53'/%3E%3Cg%3E%3Crect class='cls-11' x='37.69' y='178.15' width='60.72' height='60.72' rx='11.23' ry='11.23' transform='translate(-60.1 30.51) rotate(-17.68)'/%3E%3Crect class='cls-1' x='43.22' y='176.38' width='60.72' height='60.72' rx='11.23' ry='11.23' transform='translate(-59.3 32.1) rotate(-17.68)'/%3E%3Cpolygon class='cls-5' points='68.31 224.2 59.19 195.56 88.28 202.06 68.31 224.2'/%3E%3C/g%3E%3Cg%3E%3Crect class='cls-9' x='183.68' y='61.86' width='6.98' height='19.53' rx='3.1' ry='3.1' transform='translate(54.14 221.51) rotate(-69.35)'/%3E%3Crect class='cls-6' x='175.04' y='73.44' width='5.88' height='45.14' transform='translate(45.29 -56.6) rotate(20.65)'/%3E%3Crect class='cls-9' x='213.9' y='94.24' width='6.38' height='23.09' transform='translate(210.23 347.19) rotate(-114.35)'/%3E%3Cpath class='cls-2' d='m207.63,91.28h37.62v3.86c0,9.21-7.48,16.69-16.69,16.69h-4.23c-9.21,0-16.69-7.48-16.69-16.69v-3.86h0Z' transform='translate(227.28 349.73) rotate(-114.35)'/%3E%3Crect class='cls-9' x='138.95' y='65.99' width='6.38' height='23.09' transform='translate(-19.33 65.5) rotate(-24.35)'/%3E%3Crect class='cls-9' x='117.94' y='150.01' width='8.24' height='23.09' rx='3.66' ry='3.66' transform='translate(158.44 -37.64) rotate(47.42)'/%3E%3Crect class='cls-9' x='172.61' y='170.61' width='8.24' height='23.09' rx='3.66' ry='3.66' transform='translate(371.89 344.41) rotate(173.88)'/%3E%3Ccircle class='cls-8' cx='165.49' cy='129.14' r='50.03'/%3E%3Ccircle class='cls-2' cx='165.49' cy='129.14' r='39.97'/%3E%3Cpath class='cls-12' d='m203.31,116.23c-4.45-7.8-11.54-14.16-20.6-17.58-20.65-7.78-43.7,2.64-51.49,23.3-3.42,9.07-3.32,18.59-.39,27.08-5.73-9.99-7.11-22.37-2.74-33.99,7.78-20.65,30.84-31.08,51.49-23.3,11.62,4.38,20.01,13.58,23.73,24.49Z'/%3E%3Cpath class='cls-2' d='m135.79,57.92h4.23c9.21,0,16.69,7.48,16.69,16.69v3.86h-37.62v-3.86c0-9.21,7.48-16.69,16.69-16.69Z' transform='translate(-15.85 62.93) rotate(-24.35)'/%3E%3Cpath class='cls-3' d='m155.96,121.51c6.18,2.33,6,4.07,5.26,6.02-.74,1.95-1.74,3.38-7.92,1.05-6.18-2.33-15.2-7.54-14.47-9.49.74-1.95,10.95.09,17.13,2.42Z'/%3E%3Cpath class='cls-3' d='m173.84,117.7c-3,7.97-4.78,7.9-6.73,7.17-1.95-.74-3.33-1.86-.33-9.83,3-7.97,9.26-19.77,11.21-19.03,1.95.74-1.14,13.73-4.14,21.7Z'/%3E%3Cline class='cls-11' x1='165.49' y1='129.14' x2='177.72' y2='156.16'/%3E%3Ccircle class='cls-9' cx='165.49' cy='129.14' r='4.87'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-4' d='m27.2,67.89l3.79-.68c1.62-.29,3.05-1.21,3.99-2.56h0c1.96-2.81,5.82-3.5,8.62-1.54l.11.08-4.96-3.46-.11-.08c-2.81-1.96-6.67-1.27-8.62,1.54h0c-.94,1.35-2.38,2.27-3.99,2.56l-3.79.68,4.91,1.08.06,2.38Z'/%3E%3Cpolygon class='cls-5' points='56.3 71.61 40.73 46.61 56.58 1 72.15 26 56.3 71.61'/%3E%3Cpolygon class='cls-5' points='56.3 71.61 35.68 48.04 51.53 2.43 72.15 26 56.3 71.61'/%3E%3Cpolygon class='cls-5' points='56.3 71.61 31.17 49.21 47.02 3.6 72.15 26 56.3 71.61'/%3E%3Cpolygon class='cls-5' points='56.3 71.61 84.02 61.65 99.86 16.04 72.15 26 56.3 71.61'/%3E%3Cpolygon class='cls-5' points='56.3 71.61 87.09 65.91 102.94 20.3 72.15 26 56.3 71.61'/%3E%3Cpolygon class='cls-5' points='56.3 71.61 89.9 69.62 105.75 24.01 72.15 26 56.3 71.61'/%3E%3Cpolygon class='cls-1' points='53.96 68.99 27.28 51.06 40.95 6.5 43.13 5.45 69.81 23.38 53.96 68.99'/%3E%3Cpolygon class='cls-1' points='59.76 71 91.81 73.48 108.72 30.05 107.66 27.87 75.61 25.39 59.76 71'/%3E%3Cpolygon class='cls-1' points='51.78 70.04 25.1 52.11 40.95 6.5 67.63 24.43 51.78 70.04'/%3E%3Cpolygon class='cls-1' points='60.82 73.18 92.87 75.66 108.72 30.05 76.67 27.57 60.82 73.18'/%3E%3Cpath class='cls-10' d='m74.6,25.04l-3.79-1.32c-1.51-.52-3.13-.63-4.7-.31h0s3.86,8.84,3.86,8.84l8.51-4.55h0c-1.03-1.22-2.37-2.15-3.88-2.67Z'/%3E%3Cpath class='cls-1' d='m66.12,23.42h0s-16.15,46.47-16.15,46.47h0c3.77,2.22,8.03,3.7,12.36,4.3h0s16.15-46.47,16.15-46.47h0c-4.33-.59-8.6-2.08-12.36-4.3Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.state-illust.best-score {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 247.7 274.81'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f98b61; %7D .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11 %7B stroke: %231e2124; stroke-width: 2px; %7D .cls-1, .cls-2, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11 %7B stroke-linecap: round; stroke-linejoin: round; %7D .cls-12 %7B mix-blend-mode: darken; stroke-width: 0px; %7D .cls-12, .cls-8 %7B fill: %23a8befb; %7D .cls-13 %7B isolation: isolate; %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B stroke-miterlimit: 10; %7D .cls-3, .cls-11 %7B fill: %23eeb6ab; %7D .cls-4 %7B fill: %23617be5; %7D .cls-5 %7B fill: %2398ab00; %7D .cls-6 %7B fill: %23f9fcfb; %7D .cls-7 %7B fill: none; %7D .cls-9 %7B fill: %2397d2c1; %7D .cls-10 %7B fill: %23fdd100; %7D %3C/style%3E%3C/defs%3E%3Cg class='cls-13'%3E%3Cg id='_레이어_2' data-name='레이어 2'%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cpath class='cls-4' d='m246.7,9.71h-58.86l24.86,24.86-24.73,24.73-18.66-18.66c-2.52-2.52-6.62-2.52-9.15,0l-77.46,77.46c-2.53,2.53-2.53,6.62,0,9.15,1.26,1.26,2.92,1.89,4.57,1.89s3.31-.63,4.57-1.89l72.88-72.88,18.66,18.66c2.53,2.52,6.62,2.52,9.15,0l29.3-29.3,24.85,24.85V9.71Z'/%3E%3Cg%3E%3Crect class='cls-4' x='81.31' y='86.17' width='136.62' height='174.8' rx='10.15' ry='10.15' transform='translate(52.46 -33.97) rotate(15.68)'/%3E%3Crect class='cls-10' x='74.45' y='84.24' width='136.62' height='174.8' rx='10.15' ry='10.15' transform='translate(51.68 -32.19) rotate(15.68)'/%3E%3Crect class='cls-2' x='68.61' y='116.57' width='148.3' height='110.13' transform='translate(346.58 80.56) rotate(105.68)'/%3E%3Crect class='cls-2' x='82.59' y='93.71' width='34.94' height='7.28' rx='2.78' ry='2.78' transform='translate(30.02 -23.41) rotate(15.68)'/%3E%3Cpath class='cls-12' d='m116.89,102.08c-.27.96-.91,1.73-1.72,2.18-.82.46-1.8.61-2.77.33l-10.49-2.94c.97.27,1.96.13,2.77-.33.81-.45,1.45-1.22,1.72-2.18.55-1.94-.58-3.95-2.53-4.5l10.49,2.94c1.94.55,3.07,2.56,2.53,4.5Z'/%3E%3Crect class='cls-2' x='74.49' y='122.59' width='34.94' height='7.28' rx='2.78' ry='2.78' transform='translate(37.53 -20.15) rotate(15.68)'/%3E%3Cpath class='cls-12' d='m108.78,130.96c-.27.96-.91,1.73-1.72,2.18-.82.46-1.8.61-2.77.33l-10.49-2.94c.97.27,1.96.13,2.77-.33.81-.45,1.45-1.22,1.72-2.18.55-1.94-.58-3.95-2.53-4.5l10.49,2.94c1.94.55,3.07,2.56,2.53,4.5Z'/%3E%3Crect class='cls-2' x='66.38' y='151.47' width='34.94' height='7.28' rx='2.78' ry='2.78' transform='translate(45.03 -16.89) rotate(15.68)'/%3E%3Cpath class='cls-12' d='m100.68,159.84c-.27.96-.91,1.73-1.72,2.18-.82.46-1.8.61-2.77.33l-10.49-2.94c.97.27,1.96.13,2.77-.33.81-.45,1.45-1.22,1.72-2.18.55-1.94-.58-3.95-2.53-4.5l10.49,2.94c1.94.55,3.07,2.56,2.53,4.5Z'/%3E%3Crect class='cls-2' x='58.28' y='180.35' width='34.94' height='7.28' rx='2.78' ry='2.78' transform='translate(52.53 -13.62) rotate(15.68)'/%3E%3Cpath class='cls-12' d='m92.57,188.71c-.27.96-.91,1.73-1.72,2.18-.82.46-1.8.61-2.77.33l-10.49-2.94c.97.27,1.96.13,2.77-.33.81-.45,1.45-1.22,1.72-2.18.55-1.94-.58-3.95-2.53-4.5l10.49,2.94c1.94.55,3.07,2.56,2.53,4.5Z'/%3E%3Crect class='cls-2' x='50.17' y='209.23' width='34.94' height='7.28' rx='2.78' ry='2.78' transform='translate(60.03 -10.36) rotate(15.68)'/%3E%3Cpath class='cls-12' d='m84.47,217.59c-.27.96-.91,1.73-1.72,2.18-.82.46-1.8.61-2.77.33l-10.49-2.94c.97.27,1.96.13,2.77-.33.81-.45,1.45-1.22,1.72-2.18.55-1.94-.58-3.95-2.53-4.5l10.49,2.94c1.94.55,3.07,2.56,2.53,4.5Z'/%3E%3Cg%3E%3Cpath class='cls-11' d='m193.26,160.76c-1.7,6.07-5.71,10.88-10.81,13.74-5.1,2.87-11.29,3.79-17.36,2.08-12.15-3.41-19.22-16.02-15.81-28.17,2.67-9.53,10.99-15.93,20.31-16.61,2.57-.19,5.22.06,7.84.79,12.15,3.41,19.23,16.01,15.83,28.16Z'/%3E%3Cpath class='cls-9' d='m193.26,160.76l-22-6.17,6.17-21.99c12.15,3.41,19.23,16.01,15.83,28.16Z'/%3E%3Cpath class='cls-10' d='m193.26,160.76c-1.7,6.07-5.71,10.88-10.81,13.74l-11.19-19.91,22,6.17Z'/%3E%3Cpath class='cls-4' d='m177.43,132.6l-6.17,21.99-1.67-22.78c2.57-.19,5.22.06,7.84.79Z'/%3E%3C/g%3E%3Crect class='cls-5' x='101.03' y='202.46' width='7.88' height='15.75' transform='translate(60.73 -20.54) rotate(15.68)'/%3E%3Crect class='cls-4' x='120.56' y='172.23' width='7.88' height='50.78' transform='translate(58.02 -26.29) rotate(15.68)'/%3E%3Crect class='cls-5' x='132.13' y='199.78' width='7.88' height='26.93' transform='translate(62.68 -28.83) rotate(15.68)'/%3E%3Crect class='cls-4' x='148.06' y='195.72' width='7.88' height='35.31' transform='translate(63.3 -33.13) rotate(15.68)'/%3E%3Crect class='cls-5' x='160.77' y='215.05' width='7.88' height='19.84' transform='translate(66.91 -36.13) rotate(15.68)'/%3E%3Cline class='cls-5' x1='95.09' y1='215.74' x2='169.78' y2='236.7'/%3E%3Cg%3E%3Crect class='cls-2' x='119.81' y='126.7' width='10.99' height='10.99' transform='translate(40.38 -28.94) rotate(15.68)'/%3E%3Cpolyline class='cls-7' points='132.1 125.03 124.61 134.5 123.56 129.66'/%3E%3C/g%3E%3Cg%3E%3Crect class='cls-2' x='114.97' y='143.98' width='10.99' height='10.99' transform='translate(44.87 -26.99) rotate(15.68)'/%3E%3Cpolyline class='cls-7' points='127.25 142.31 119.76 151.78 118.71 146.94'/%3E%3C/g%3E%3Crect class='cls-1' x='144.43' y='111.3' width='30.74' height='5.63' rx='2.15' ry='2.15' transform='translate(36.78 -38.93) rotate(15.68)'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-8' d='m18.82,34.72L1.59,41.19c-.71-1.9-.76-3.9-.25-5.71.77-2.73,2.77-5.06,5.63-6.13,2.85-1.07,5.9-.63,8.27.91,1.58,1.03,2.86,2.56,3.58,4.47Z'/%3E%3Cpath class='cls-6' d='m106.15,66.16c.59,1.57.72,3.2.46,4.74-.52,3.13-2.65,5.91-5.84,7.11l-48.97,18.39c3.19-1.2,5.32-3.98,5.84-7.11.26-1.54.13-3.17-.46-4.74l48.97-18.39Z'/%3E%3Cpath class='cls-6' d='m85.69,64.02l-17.91-47.69c-1.79-4.76-7.09-7.16-11.85-5.38,0,0,0,0,0,0h0S6.97,29.34,6.97,29.34c4.76-1.79,10.06.62,11.85,5.38h0s17.91,47.69,17.91,47.69h0s3.24,8.61,3.24,8.61c1.79,4.76,7.09,7.16,11.84,5.38s7.16-7.09,5.38-11.84l31.75-11.92-3.24-8.62h0Z'/%3E%3Cpath class='cls-12' d='m106.04,72.9c-.93,2.28-2.77,4.18-5.27,5.11l-48.97,18.39c2.49-.94,4.33-2.83,5.27-5.11l48.97-18.39Z'/%3E%3Cline class='cls-6' x1='25.82' y1='32.96' x2='61.35' y2='19.61'/%3E%3Cline class='cls-6' x1='28.05' y1='38.91' x2='63.59' y2='25.56'/%3E%3Cline class='cls-6' x1='30.28' y1='44.85' x2='65.82' y2='31.5'/%3E%3Cline class='cls-6' x1='32.52' y1='50.8' x2='68.05' y2='37.45'/%3E%3Cline class='cls-6' x1='34.75' y1='56.75' x2='70.29' y2='43.4'/%3E%3Cline class='cls-6' x1='36.98' y1='62.69' x2='72.52' y2='49.34'/%3E%3Cline class='cls-6' x1='39.22' y1='68.64' x2='74.75' y2='55.29'/%3E%3Cline class='cls-6' x1='41.45' y1='74.59' x2='76.99' y2='61.24'/%3E%3Cline class='cls-6' x1='43.69' y1='80.53' x2='79.22' y2='67.18'/%3E%3C/g%3E%3Cg%3E%3Cpolygon class='cls-5' points='116.97 6.76 125.58 12.83 92.77 59.56 84.16 53.49 116.97 6.76'/%3E%3Cpolygon class='cls-5' points='119.8 8.76 122.75 10.84 89.94 57.56 86.99 55.48 119.8 8.76'/%3E%3Cpolygon class='cls-6' points='92.77 59.56 84.16 53.49 80.53 64.38 84 66.87 92.77 59.56'/%3E%3Cpath class='cls-4' d='m80.53,64.38l-.99,2.96c-.43,1.29,1.1,2.33,2.14,1.46l2.32-1.93-3.47-2.49Z'/%3E%3Cpath class='cls-3' d='m119.47,2.32h10.54v1.95c0,1.75-1.42,3.17-3.17,3.17h-4.2c-1.75,0-3.17-1.42-3.17-3.17v-1.95h0Z' transform='translate(223.93 80.68) rotate(-144.85)'/%3E%3Crect class='cls-6' x='117.01' y='6.65' width='10.54' height='3.46' transform='translate(217.43 85.63) rotate(-144.85)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 이력 없음 ---------- */
/* 좌측 CTA 카드 */
.state-card.cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 200px;
  padding: 24px 28px;
  text-align: center;
  background: var(--gry5);
}
.state-cta-tit {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gry90);
}
/* 안내 카드 (일러스트 + 텍스트) */
.state-card.info {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 200px;
  padding: 24px 28px;
}
.state-desc {
  margin: 0;
  font-weight: 400;
  font-size: 2.4rem;
}
.state-desc strong {
  color: var(--gry90);
  font-weight: 700;
}

/* ---------- 이력 있음 ---------- */
/* 요약 카드 */
.state-card.summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
  padding: 8px 30px;
}
.state-summary {
  width: 100%;
  margin: 0;
}
.state-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 30px 0 15px;
  font-size: 1.9rem;
  color: var(--gry60);
  border-bottom: 1px solid var(--gry20);
}
.state-summary-row dt {
  margin: 0;
}
.state-summary-row dd {
  margin: 0;
  font-weight: 700;
  color: var(--gry90);
}
.state-summary-row.total {
  padding-top: 0;
  border-bottom: 1px solid var(--gry90);
  color: var(--gry90);
  font-size: 2.4rem;
  font-weight: 700;
}
.state-summary-row.total dd {
  font-weight: 400;
}
.state-summary-row.total dd strong {
  color: var(--primary50);
}

/* 결과 카드 (일러스트 + 제목 + 하단 코멘트) */
.state-card.result {
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.state-result-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  padding: 20px 30px 15px;
}
.state-result-head {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 2.8rem;
  color: var(--gry90);
}
.state-result-label {
}
.state-result-subject {
  margin: 0;
  font-weight: 700;
}
.state-result-bottom {
  padding: 18px 30px;
  min-height: 110px;
  letter-spacing: -0.04rem;
  border-top: 1px solid var(--gry10);
  border-radius: 0 0 12px 12px;
  background: var(--gry5);
}
.state-result-bottom p {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--gry90);
}
.state-result-bottom strong {
  color: var(--gry90);
  font-weight: 700;
}

.state-tip {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 10;
}
.state-tip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--gry20);
  border-radius: 50%;
  background: #fff;
  color: var(--gry50);
  line-height: 1;
  cursor: pointer;
}
.state-tip-btn svg {
  width: 20px;
  height: 20px;
}
.state-tip-btn:hover,
.state-tip-btn:focus-visible,
.state-tip-btn[aria-expanded="true"] {
  border-color: var(--primary50);
  background: var(--primary50);
  color: #fff;
}
.state-tip-btn:hover svg path,
.state-tip-btn:hover svg line {
  stroke: #ffffff;
}
.state-tip-pop {
  position: absolute;
  bottom: calc(100% + 12px);
  right: -6px;
  width: 175px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--gry90);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--gry60);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
}
.state-tip-pop::before,
.state-tip-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 14px;
  border: 8px solid transparent;
}
.state-tip-pop::before {
  border-top-color: var(--gry90);
}
.state-tip-pop::after {
  border-top-color: #fff;
  margin-top: -1px;
}
.state-tip-btn:hover + .state-tip-pop,
.state-tip-btn:focus-visible + .state-tip-pop,
.state-tip-btn[aria-expanded="true"] + .state-tip-pop {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1024px) {
  .state-cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .state-cta-tit {
    font-size: 2rem;
  }
  .state-card.cta,
  .state-card.info,
  .state-card.summary {
    min-height: 0;
    padding: 20px;
  }
  .state-card.info {
    gap: 16px;
  }
  .state-card .state-desc {
    font-size: 1.6rem;
  }
  .state-card .state-illust {
    widht: 58px;
    height: 58px;
  }
  .state-result-top {
    padding: 20px 15px;
    gap: 14px;
  }
  .state-result-head {
    font-size: 2rem;
  }
  .state-result-bottom {
    padding: 16px 15px;
    min-height: auto;
  }
  .state-result-bottom p {
    font-size: 1.4rem;
  }
  .state-summary-row {
    padding: 16px 0 7px;
    font-size: 1.6rem;
  }
  .state-summary-row.total {
    font-size: 2rem;
  }
  .state-card.result {
    min-height: auto;
  }
  .state-tip-pop {
    font-size: 1.2rem;
    padding: 10px;
  }
  .state-illust {
    width: 72px;
    height: 72px;
  }
  .state-desc {
    font-size: 1.4rem;
  }
  .state-result-subject {
    font-size: 2rem;
  }
  .state-tip-btn {
    width: 35px;
    height: 35px;
  }
  .state-tip-btn svg {
    width: 18px;
    height: 18px;
  }
}

.history-wrap .tbl .empty {
  padding: 85px 0 85px 145px;
  height: auto;
}

/* 월별 수업 참여도 그래프 */
.graph-wrap {
  margin-top: 12px;
  background: #fff;
}
.graph-wrap .lesson-tabs {
  gap: 24px;
  margin: 4px 0 20px;
}
.graph-panel {
  box-sizing: border-box;
  padding: 8px 24px 24px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid #e6e8ea;
}
.bar-chart {
  width: 100%;
}
.bar-chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 24px;
  margin-top: 21px;
  padding: 0;
  list-style: none;
}
.chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.5rem;
  color: var(--gry70);
}
.legend-mark {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.graph-empty {
  padding: 80px 0;
  text-align: center;
  color: var(--gry60, #888);
  font-size: 1.6rem;
}

/* =============================================
   이용약관 팝업 (공통 모달 .modal-overlay 확장)
   - 긴 약관 본문을 스크롤로 표시
   ============================================= */
.terms-pop-dialog {
  display: flex;
  flex-direction: column;
  width: 640px;
  max-height: 88vh;
  padding: 0;
}
.terms-pop-dialog .modal-header {
  flex: 0 0 auto;
  padding: 24px 28px 16px;
}
.terms-pop-body {
  flex: 1 1 auto;
  margin-top: 0;
  overflow-y: auto;
  padding: 4px 28px 20px;
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--gry90);
}
.terms-pop-body .terms-pop-chapter {
  margin: 28px 0 12px;
  font-size: 1.9rem;
  font-weight: 700;
}
.terms-pop-body .terms-pop-chapter:first-child {
  margin-top: 4px;
}
.terms-pop-body .terms-pop-art {
  margin: 16px 0 6px;
  font-size: 1.5rem;
  font-weight: 700;
}
.terms-pop-body p {
  margin: 4px 0;
}
.terms-pop-body ul,
.terms-pop-body ol {
  margin: 4px 0 4px 4px;
  padding: 0;
  list-style: none;
}
.terms-pop-body li {
  margin: 3px 0;
}
.terms-pop-body .sub {
  margin-left: 16px;
  color: var(--gry70);
}
.terms-pop-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 16px 28px;
}
.terms-pop-foot .btn {
  min-width: 88px;
}

/* =============================================
   개인정보 처리방침 팝업 (공통 모달 .modal-overlay 확장)
   ============================================= */
.privacy-pop-dialog {
  display: flex;
  flex-direction: column;
  width: 640px;
  max-height: 88vh;
  padding: 0;
}
.privacy-pop-dialog .modal-header {
  flex: 0 0 auto;
  padding: 24px 28px 16px;
}
.privacy-pop-body {
  flex: 1 1 auto;
  margin-top: 0;
  overflow-y: auto;
  padding: 4px 28px 20px;
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--gry90);
}
.privacy-pop-body .privacy-pop-intro {
  margin: 4px 0 24px;
  padding: 16px 18px;
  background: var(--gry5);
  border-radius: 8px;
  font-size: 1.5rem;
  line-height: 1.7;
}
.privacy-pop-body .subject {
  display: block;
  margin: 40px 0 8px;
}
.privacy-pop-body .labelBox {
  border-radius: 12px;
  border: 1px solid var(--gry10);
}
.privacy-pop-body .labelBox li {
  display: inline-block;
  text-align: center;
  width: calc(25% - 4px);
  border-left: 1px solid var(--gry10);
}
.privacy-pop-body .labelBox li:first-child {
  border-left: 0 none;
}
.privacy-pop-body .labelBox li .thumb {
  height: auto;
}
.privacy-pop-body .lineBox {
  margin: 10px 0;
  border: 1px solid var(--gry10);
}
.privacy-pop-body .lineBox > div {
  display: inline-block;
  padding: 30px;
  width: calc(50% - 2px);
  vertical-align: top;
  border-left: 1px solid var(--gry10);
  box-sizing: border-box;
}
.privacy-pop-body .lineBox .leftBox {
  border-left: 0 none;
}
.privacy-pop-body .lineBox > div li {
  margin: 20px 0 0;
  font-size: 18px;
}
.privacy-pop-body .lineBox > div li:first-child {
  margin-top: 0;
}
.privacy-pop-body .tbl-wrap .tbl tbody td {
  font-size: 1.5rem;
}
.privacy-pop-body .privacy-pop-sec-title {
  margin: 24px 0 8px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gry90);
}
.privacy-pop-body p {
  margin: 0 0 4px;
}
.privacy-pop-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 16px 28px;
}
.privacy-pop-foot .btn {
  min-width: 88px;
}

.side-type #main-content .section {
  margin-bottom: 33px;
}

/* 레이아웃 2번째 */
.side-type .card-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  list-style: none;
  overflow: visible;
}

.side-type .card-row > li {
  list-style: none;
  position: relative;
}

.side-type .card {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  background: #fff;
  border: 1px solid transparent;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.2s ease,
    border-radius 0.2s ease;
  transform-origin: center center;
}
.side-type .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 95px;
  border-radius: 12px;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0) 100%
  );

  z-index: 1;
  pointer-events: none;
}
.side-type .card:hover,
.side-type .card:focus,
.side-type .card:focus-within {
  outline: none;
}

.side-type .card:not(.card-expand):hover,
.side-type .card:not(.card-expand):focus-within {
  border-color: #6d7882;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.side-type .card-expand {
  z-index: 1;
  /* 좌우로 각각 늘어나는 비율 (총 +30% = 폭 1.3배).
     scale()이 아니라 실제 크기를 키우므로 텍스트/padding 크기는 그대로 유지됨 */
  --expand-grow: 15%;
  /* hover 시 아래로 펼쳐지는 학습목표 패널 높이의 절반.
     카드+패널 전체가 세로 중앙에 오도록 이만큼 위로 올림 */
  --expand-shift: 65px;
  left: 0;
  right: 0;
  /* 확장/축소는 중앙 기준으로 즉시 처리 (position 전환에 따른 방향 왜곡 방지) */
  transition: none;
}
.side-type .card-expand:hover,
.side-type .card-expand:focus-within {
  position: absolute;
  top: 50%;
  left: calc(var(--expand-grow) * -1);
  right: calc(var(--expand-grow) * -1);
  transform: translateY(calc(-50% - var(--expand-shift)));
  z-index: 30;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid var(--gry90);
}
/* 첫 번째 카드는 왼쪽 화면 밖으로 나가지 않도록 오른쪽으로만 확장 */
.side-type .card-row > li:first-child .card-expand:hover,
.side-type .card-row > li:first-child .card-expand:focus-within {
  left: 0;
  right: calc(var(--expand-grow) * -2);
}
/* 마지막 카드는 오른쪽 화면 밖으로 나가지 않도록 왼쪽으로만 확장 */
.side-type .card-row > li:last-child .card-expand:hover,
.side-type .card-row > li:last-child .card-expand:focus-within {
  left: calc(var(--expand-grow) * -2);
  right: 0;
}

.side-type .card-expand .lesson-thumb {
  overflow: hidden;
}

/* 이미지(썸네일) 아래에 항상 노출되는 학습 정보 행 */
.side-type .lesson-meta-row {
  position: relative;
  display: block;
  padding: 12px 14px 14px;
  background: #fff;
  border-radius: 0 0 12px 12px;
}
.side-type .lesson-meta-row .lesson-meta-info {
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: -0.05rem;
}
.side-type .lesson-meta-row .lesson-meta-info .lsep {
  margin: 0 2px;
}
/* 기본 상태에서는 버튼/토글 숨김 (이미지 밑엔 정보만 노출) */
.side-type .card-row .lesson-meta-row .pc-btn {
  display: none;
}
/* 호버(펼침) 시 하단 카드 정보와 자연스럽게 이어지도록 아래 모서리 각지게 */
.side-type .card-expand:hover .lesson-meta-row,
.side-type .card-expand:focus-within .lesson-meta-row {
  border-radius: 0;
}
/* 호버 시 학습목표 패널 안에서 학습하기 버튼 노출 */
.side-type .card-expand:hover .lesson-meta-row .btn {
  position: absolute;
  top: -2px;
  right: 14px;
  display: inline-flex;
  margin-top: 10px;
}
.side-type .card-expand .lesson-goals {
  padding: 17px 19px;
  min-height: auto;
  max-height: 120px;
  font-size: 1.5rem;
}

.side-type .card-info {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  background: #fff;
  border: 1px solid #cbd1d7;
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-sizing: border-box;
  padding: 0 14px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.15);
  transition:
    max-height 0.25s ease,
    padding 0.25s ease,
    opacity 0.2s ease;
  pointer-events: none;
  z-index: 3;
}
.side-type .card-expand:hover .card-info,
.side-type .card-expand:focus-within .card-info {
  max-height: 240px;
  padding: 0;
  opacity: 1;
  pointer-events: auto;
  border: 1px solid var(--gry90);
  border-top: 0 none;
}
.side-type .card-meta {
  font-size: 1.3rem;
  color: #555;
  margin-bottom: 4px;
}
.side-type .card-meta strong {
  color: #1e2124;
  font-weight: 700;
}
.side-type .card-meta span {
  margin: 0 6px;
  color: #ccc;
}
.side-type .card-recent {
  font-size: 1.3rem;
  color: #555;
  margin-bottom: 12px;
}
.side-type .card-recent strong {
  color: #1e2124;
  font-weight: 700;
  margin-left: 4px;
}
.side-type .card-cate {
  color: #f7a55e;
  font-weight: 700;
  margin-right: 4px;
}
.side-type .card-btns {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.side-type .lesson-thumb {
  position: relative;
  display: block;
  height: auto;
  padding: 14px;
  aspect-ratio: 16 / 9;
  color: #fff;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  transition: border-radius 0.2s ease;
}
.side-type .card-expand:hover .lesson-thumb,
.side-type .card-expand:focus-within .lesson-thumb {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.side-type .thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.side-type .featured-lesson {
  margin-bottom: 32px;
  padding: 0;
  gap: 24px;
}
.side-type .featured-media {
  position: relative;
  align-self: flex-start;
  flex: 0 0 68%;
  height: auto;
}
.side-type .featured-media::before {
  background-color: rgba(30, 33, 36, 0.36);
}
.side-type .featured-media::after {
  display: none;
}
.side-type .featured-content {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 70px;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(30, 33, 36, 0.42) 0%,
    rgba(30, 33, 36, 0.32) 50%,
    rgba(30, 33, 36, 0) 70%,
    rgba(30, 33, 36, 0) 100%
  );
}
.side-type .featured-title {
  max-width: 260px;
  color: var(--wht);
}
.side-type .featured-desc {
  margin-bottom: 21px;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--wht);
}
.side-type .featured-content .btn.continue {
  position: relative;
  display: inline-flex;
  width: fit-content;
  color: var(--gry90);
  font-weight: 700;
  background-color: var(--wht);
}
.side-type .featured-content .btn.continue:hover {
  background-color: var(--gry10);
}
.side-type .featured-content .btn.continue strong {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--point50);
}
.side-type .lesson-list {
  grid-template-columns: repeat(1, 1fr);
}

.recommand-media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.recommand-media .recommand-tit {
  margin-bottom: 14px;
  font-size: 2.4rem;
  line-height: 1;
}
/* 실제로 높이를 잘라내는 스크롤 뷰포트 (버튼/페이드는 이 밖에 위치) */
.recommand-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.recommand-media .lesson-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s ease;
}
.recommand-media .lesson-card {
  align-items: center;
  gap: 20px;
  padding: 0;
  border-radius: 10px;
}
.recommand-media .lesson-thumb {
  flex: 1 1 80%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px 0 0 8px;
}
.recommand-media .lesson-thumb .card-top {
  padding: 6px 8px;
  font-size: 1.5rem;
  line-height: 1.5;
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}
.recommand-media .lesson-thumb .card-top .badge {
  height: 18px;
  line-height: 18px;
  font-size: 1.3rem;
}
.recommand-media .lesson-thumb::after {
  width: 40px;
  height: 40px;
}
.recommand-media .lesson-body {
  min-width: 0;
}
.recommand-media .lesson-meta-row {
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 8px;
}
.recommand-media .lesson-meta-info {
  font-size: 1.5rem;
  line-height: 1.6;
}
.recommand-media .lesson-meta-info strong {
  margin-left: 10px;
}
.recommand-media .lesson-meta-info .time {
  margin-left: 6px;
}
.recommand-media .lesson-meta-info .lesson-seq {
  display: block;
}
.recommand-media .pc-btn {
  margin-top: 12px;
  padding: 0 14px;
  height: 36px;
  line-height: 36px;
  font-size: 1.4rem;
}

/* 목록이 잘려 보일 때 상/하단 페이드 힌트 (스크롤 뷰포트 위에 고정 오버레이) */
.recommand-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(
    to bottom,
    rgba(239, 244, 249, 0) 0%,
    rgba(239, 244, 249, 0.95) 75%,
    rgba(239, 244, 249, 1) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.recommand-media.has-more::after {
  opacity: 1;
}
.recommand-media.is-scrolled::after {
  opacity: 0;
}
.recommand-media.is-scrolled::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 38px;
  height: 64px;
  background: linear-gradient(
    to top,
    rgba(239, 244, 249, 0) 0%,
    rgba(239, 244, 249, 0.95) 75%,
    rgba(239, 244, 249, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* 더보기/접기 버튼 — 목록 항목이 4개 이상일 때만 JS로 노출, 하단 경계에 반쯤 겹쳐 고정 */
.lesson-more {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  transform: translate(-50%, 50%);
  border: 1px solid var(--gry20);
  border-radius: 50%;
  background: var(--wht);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.recommand-media.has-more .lesson-more {
  display: flex;
}
.lesson-more .ico-chevron-down {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--gry70);
  border-bottom: 2px solid var(--gry70);
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.2s ease;
}
.recommand-media.is-scrolled .lesson-more .ico-chevron-down {
  transform: rotate(-135deg);
  margin-top: 3px;
}

@media (max-width: 1024px) {
  /* 모바일에서는 상하로 쌓이므로 featured-media 높이에 맞추는 대신
     고정 높이로 잘라서 동일한 위/아래 이동 버튼을 사용 */
  .recommand-media {
    max-height: 340px;
  }
}

.form-check.my-qna {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.form-check.my-qna input[type="checkbox"] ~ label {
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 9px 16px;
  height: 56px;
  border: 1px solid var(--gry10);
  border-radius: 8px;
  color: var(--gry50);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.form-check.my-qna input[type="checkbox"] ~ label:before {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  width: 6px;
  height: 11px;
  margin-bottom: 2px;
  border: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  background: none;
  opacity: 1;
  transform: rotate(45deg);
  transition: border-color 0.2s ease;
}
.form-check.my-qna input[type="checkbox"] ~ label:after {
  display: none;
}
.form-check.my-qna input[type="checkbox"]:checked ~ label {
  color: var(--primary50);
  border-color: var(--primary50);
}
.form-check.my-qna input[type="checkbox"]:checked ~ label:before {
  border-color: currentColor;
  background: none;
}
.form-check.my-qna input[type="checkbox"]:focus ~ label {
  outline: 2px solid rgba(36, 107, 235, 0.8);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .form-check.my-qna input[type="checkbox"] ~ label {
    font-size: 1.6rem;
    font-weight: 400;
    height: 48px;
  }
}