@charset "UTF-8";

/* =============================================== 메인 화면 (Home) */
.part-content.scene-home,
.part-content.scene-class,
.part-content.scene-challenge,
.part-content.scene-community,
.part-content.scene-view-all {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page-header {
    position: fixed;
    z-index: 9001;
    top: calc(var(--page-header-height) * (-1));
    left: 0;
    right: 0;
    opacity: 0;
    transition: top 0.4s, opacity 0.4s;
    height: var(--page-header-height);
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    border-bottom: 1px solid #d0d5dd;
}

.page-header.show {
    opacity: 1;
    top: 0;
    transition: top 0.4s, opacity 0.4s;
}

.page-header.scrolling {
    border-bottom: 1px solid var(--border-color);
}

.page-header .part-content {
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px;
}

.page-header .part-content .header-logo {
    width: 32px;
    height: 32px;
    background-size: cover;
    background-position: center center;
}
.page-header .part-content .header-logo.logo-type-k {
    background-image: url("/assets/images/mypool_logo.svg");
}
.page-header .part-content .header-logo.logo-type-g {
    background-image: url("/assets/images/ganadara-logo.svg");
}

.page-header .part-content .header-menus {
    display: flex;
    align-items: center;
}

.page-header .part-content .header-menus.left {
    justify-content: flex-start;
}

.page-header .part-content .header-menus.right {
    justify-content: flex-end;
}

.page-header .part-content .ns-icon.alarm {
    width: 32px;
    height: 32px;
    display: inline-block;
    content: url("/assets/images/ic_gndr_alarm.svg");
}

.page-header .part-content .ns-icon.setting {
    width: 24px;
    height: 24px;
    display: inline-block;
    content: url("/assets/images/ic_gndr_setting.svg");
    /*padding: 4px;*/
    margin-left: 16px;
}

.page-header .part-content .gnb-title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: #101828;
    display: inline-block;
    white-space: nowrap;
}

.my-profile {
    width: 32px;
    height: 32px;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    overflow: hidden;
}

.my-profile.shape-circle {
    border-radius: 16px;
}

.my-profile.border-none {
    border: 1px solid transparent;
}

.my-profile .profile-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    display: block;
    white-space: nowrap;
}

.gndr-gnb {
    width: 100%;
    height: var(--gnb-height);
    background-color: #ffffff;
    box-sizing: border-box;
    border-top: 1px solid var(--border-color);
    position: relative;
    z-index: 9001;
}
.gndr-gnb.fixed {
    position: fixed;
    background-color: #000000;
    bottom: 0;
}

.gndr-gnb .part-content {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 8px;
}

.gndr-gnb .part-content .gnb-list {
    width: 100%;
    height: 64px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 0px 6px;
}

.gndr-gnb .part-content .gnb-list .gnb-item {
    width: 60px;
    height: var(--gnb-height);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 12px 0px 4px;
    box-sizing: border-box;
    overflow: visible !important;
}

.gndr-gnb .part-content .gnb-list .gnb-item .ns-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-bottom: 4px;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.gndr-gnb .part-content .gnb-list .gnb-item .ns-icon.home {
    content: url("/assets/images/ic_gndr_gnb_home.svg");
}

.gndr-gnb .part-content .gnb-list .gnb-item.active .ns-icon.home {
    content: url("/assets/images/ic_gndr_gnb_home_s.svg");
}

.gndr-gnb .part-content .gnb-list .gnb-item .ns-icon.klass {
    content: url("/assets/images/ic_gndr_gnb_klass.svg");
}

.gndr-gnb .part-content .gnb-list .gnb-item.active .ns-icon.klass {
    content: url("/assets/images/ic_gndr_gnb_klass_s.svg");
}

.gndr-gnb .part-content .gnb-list .gnb-item .ns-icon.challenge {
    content: url("/assets/images/ic_gndr_gnb_challenge.svg");
}

.gndr-gnb .part-content .gnb-list .gnb-item.active .ns-icon.challenge {
    content: url("/assets/images/ic_gndr_gnb_challenge_s.svg");
}

.gndr-gnb .part-content .gnb-list .gnb-item .ns-icon.community {
    content: url("/assets/images/ic_gndr_gnb_community.svg");
}

.gndr-gnb .part-content .gnb-list .gnb-item.active .ns-icon.community {
    content: url("/assets/images/ic_gndr_gnb_community_s.svg");
}

.gndr-gnb .part-content .gnb-list .gnb-item .ns-icon.view-all {
    content: url("/assets/images/ic_gndr_gnb_view_all.svg");
}

.gndr-gnb .part-content .gnb-list .gnb-item.active .ns-icon.view-all {
    content: url("/assets/images/ic_gndr_gnb_view_all.svg");
}

.gndr-gnb .part-content .gnb-list .gnb-item .gnb-name {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 16px;
    text-align: center;
    display: inline-block;
    color: #98a2b3;
    white-space: nowrap;
}

.gndr-gnb .part-content .gnb-list .gnb-item.active .gnb-name {
    font-weight: 700;
    color: #101828;
}

.gndr-main .home-content-wrapper {
    width: 100%;
    height: calc(100% - var(--page-header-height));
    /*overflow-y: auto;*/
    /*overflow-y: hidden;*/
    overflow-x: hidden;
    position: relative;
    margin-top: var(--page-header-height);
    opacity: 0;
    transition: opacity 0.4s;
}

.gndr-main .home-content-wrapper.show {
    opacity: 1;
    transition: opacity 0.4s;
}

.gndr-main .home-content-wrapper .ss-list {
    width: 100%;
    height: max-content;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.gndr-main .klass-content-wrapper {
    width: 100%;
    height: calc(100%);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    margin-top: 0;
    opacity: 0;
    transition: opacity 0.4s;
}

.gndr-main .klass-content-wrapper.show {
    opacity: 1;
    transition: opacity 0.4s;
}

.gndr-main .challenge-content-wrapper {
    width: 100%;
    height: calc(100% - var(--page-header-height));
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    margin-top: var(--page-header-height);
    opacity: 0;
    transition: opacity 0.4s;
}

.gndr-main .challenge-content-wrapper.show {
    opacity: 1;
    transition: opacity 0.4s;
}

.gndr-main .community-content-wrapper {
    width: 100%;
    height: calc(100% - var(--page-header-height));
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    margin-top: var(--page-header-height);
    opacity: 0;
    transition: opacity 0.4s;
}

.gndr-main .community-content-wrapper.show {
    opacity: 1;
    transition: opacity 0.4s;
}

.gndr-main .all-content-wrapper {
    width: 100%;
    height: calc(100%);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    margin-top: 0;
    opacity: 0;
    transition: opacity 0.4s;
}

.gndr-main .all-content-wrapper.show {
    opacity: 1;
    transition: opacity 0.4s;
}

.ns-slider[slider-name='home'] .slider-container .slider-index {
    bottom: 16px;
    right: 28px;
}

.slider-container .slider-list .slider-item .image-holder.home {
    padding: 8px 4px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.slider-container .slider-list .slider-item .image-holder.home > img {
    border-radius: 12px;
    width: 100%;
    height: 100%;
}

.ns-slider[slider-name='event-vote'] .slider-container .slider-index {
    bottom: 8px;
    right: 28px;
}

.slider-container .slider-list .slider-item .image-holder.event-ranking {
    padding: 0px 4px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.slider-container .slider-list .slider-item .image-holder.event-ranking > img {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    width: calc(100% - 2px);
    height: calc(100% - 2px);
}

.ns-slider[slider-name='banner'] .slider-container .slider-index {
    bottom: 8px;
    right: 28px;
}

.slider-container .slider-list .slider-item .image-holder.banner {
    padding: 0px 4px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.slider-container .slider-list .slider-item .image-holder.banner > img {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    width: calc(100% - 2px);
    height: calc(100% - 2px);
}

.ns-slider[slider-name='vote-banner'] .slider-container .slider-index {
    bottom: 10px;
    right: 20px;
}

.slider-container .slider-list .slider-item .image-holder.vote-banner {
    padding: 0px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.slider-container .slider-list .slider-item .image-holder.vote-banner > img {
    border-radius: 0px;
    border: none;
    width: 100%;
    height: 100%;
}

.ns-slider[slider-name='community'] .slider-container .slider-index {
    bottom: 16px;
    right: 28px;
}

.slider-container .slider-list .slider-item .image-holder.community {
    padding: 8px 4px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.slider-container .slider-list .slider-item .image-holder.community > img {
    border-radius: 12px;
    width: 100%;
    height: 100%;
}

.home-video {
    width: 100vw;
    height: calc(100vw * 206 / 372);
    box-sizing: border-box;
    padding: 0px 20px;
    position: relative;
}

.ns-video {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    z-index: 4;
}

.ns-video .thumbnail-cover,
.ns-video .video-wrapper {
    width: 100%;
    height: 100%;
    background-color: #000000;
    border-radius: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.ns-video .video-wrapper {
    z-index: 1;
}

.ns-video .thumbnail-cover {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ns-video .thumbnail-cover .thumbnail-overlay {
    width: 100%;
    height: 100%;
    z-index: 3;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.ns-video .thumbnail-cover .video-title {
    bottom: 12px;
    left: 16px;
    width: 75%;
    display: inline-block;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    position: absolute;
    z-index: 4;
    word-break: break-word;
}

.ns-video .thumbnail-cover .ns-icon.video-play {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    content: url("/assets/images/ic_gndr_video_play.svg");
}

.ns-video .video-wrapper > .video-box {
    width: 100%;
    height: 100%;
    background-color: #000000;
    border-radius: 6px;
    overflow: hidden;
}

.ns-video .video-wrapper > .video-box > video {
    width: 100%;
    height: 100%;
}

.ns-video .video-wrapper > .iframe-box {
    width: 100%;
    height: 100%;
    background-color: #000000;
    border-radius: 6px;
    overflow: hidden;
}

.ns-video .video-wrapper > .iframe-box > iframe {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.ns-video .thumbnail-cover .thumbnail {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.ns-video .thumbnail-cover .thumbnail > img {
    opacity: 0;
    display: block;
    border: none;
    outline: none;
    white-space: nowrap;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    border-radius: 12px;
}

.ns-video .thumbnail-cover .thumbnail.render > img {
    opacity: 1;
    transition: opacity 0.4s;
}


.part-content.footer {
    width: 100%;
    height: 148px;
}

.part-content.footer .footer {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0px 32px;
}

.part-content.footer .footer > img {
    display: block;
    margin-bottom: 8px;
}

.part-content.footer .footer > p {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #B6B6B6;
}

.klass-content-wrapper .banner-wrapper {
    width: 100%;
    height: 196px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
}

.klass-content-wrapper .banner-wrapper .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.klass-content-wrapper .banner-wrapper .ns-slider[slider-name='vote-banner'] {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 196px;
}

.klass-content-wrapper .list-type-wrapper {
    width: 100%;
    height: 168px;
    position: fixed;
    top: 216px;
    left: 0;
    right: 0;
    z-index: 102;
    background-color: #FBFAFF;
    overflow: hidden;
}

.klass-content-wrapper .list-type-wrapper .list-type-box {
    z-index: 5;
    position: relative;
    opacity: 1;
    width: 100%;
    height: 100%;
}

.klass-content-wrapper .list-type-wrapper .list-type-box .mystar-box,
.klass-content-wrapper .list-type-wrapper .list-type-box .vote-group-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.4s;
}

.klass-content-wrapper .list-type-wrapper .list-type-box .mystar-box.show,
.klass-content-wrapper .list-type-wrapper .list-type-box .vote-group-box.show {
    opacity: 1;
    transition: opacity 0.4s;
    z-index: 3;
}

.klass-content-wrapper .list-type-wrapper .klass-tab-nav {
    position: absolute;
    height: 44px;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color);
    opacity: 0;
}

.klass-content-wrapper .list-type-wrapper .klass-tab-nav .klass-tab-item {
    width: 50%;
    height: 100%;
    position: relative;
}

.klass-content-wrapper .list-type-wrapper .klass-tab-nav .klass-tab-item > span {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: #999999;
}

.klass-content-wrapper .list-type-wrapper .klass-tab-nav .klass-tab-item.active > span {
    color: #28274f;
}

.klass-content-wrapper .list-type-wrapper .klass-tab-nav .klass-tab-item > div.tab-underline {
    width: 0px;
    height: 4px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background-color: #999999;  /* 노란색에서 회색으로 변경 */
    border-radius: 2px 2px 0px 0px;
    transition: width 0.4s;
}

.klass-content-wrapper .list-type-wrapper .klass-tab-nav .klass-tab-item.active > div.tab-underline {
    width: 100px;
    transition: width 0.4s;
}

.part-content .home-content-wrapper .home-section {
    width: 100%;
    position: relative;
}

.part-content .home-content-wrapper .home-section .section-title {
    display: inline-block;
    box-sizing: border-box;
    padding: 0px 16px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 900;
    color: #101828;
}

.part-content .home-content-wrapper .home-section .ns-ht-slider {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.part-content .home-content-wrapper .home-section .ns-ht-slider.short-form {
    height: 200px;
}

.part-content .home-content-wrapper .home-section .ns-ht-slider.recent-studies {
    height: 222px;
}

.part-content .home-content-wrapper .home-section .ns-ht-slider.new-videos {
    height: 222px;
}

.part-content .home-content-wrapper .home-section .ns-ht-slider.popular-content {
    height: 232px;
}

.part-content .home-content-wrapper .home-section .ns-ht-slider.theme-videos {
    height: 222px;
}

.part-content .home-content-wrapper .home-section .ns-ht-slider.trending-content {
    height: 232px;
}

.part-content .home-content-wrapper .home-section .ns-ht-slider.challenge-list {
    height: 152px;
}

.part-content .home-content-wrapper .home-section .ns-ht-slider.popular-user {
    height: 92px;
}


.part-content .home-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.part-content .home-slider .slider-container {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.part-content .home-slider .slider-container > div {
    height: 100%;
    position: relative;
}

.part-content .home-slider .slider-container > div .holder {
    border-radius: 4px;
    background-color: #ffffff;
    position: absolute;
    top: 0px;
    height: 100%;
    overflow: hidden;
}

.part-content .home-slider .slider-container > div .holder > div {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.part-content .home-slider .slider-container > div .holder > div .thumb-holder {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.part-content .home-slider .slider-container > div .holder > div .thumb-holder.fh {
    width: 100%;
}

.part-content .home-slider .slider-container > div .holder > div .thumb-holder img {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 4px;
}

.part-content .home-slider .slider-container > div .holder > div .thumb-holder.render img {
    opacity: 1;
    transition: opacity 0.4s;
}

.part-content .home-slider .slider-container > div .short-form-item.holder {
    background-color: #e0e0e0;
}

.part-content .home-slider .slider-container > div .short-form-item.holder > div > span {
    position: absolute;
    z-index: 2;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: calc(100% - 12px * 2);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #ffffff;
    text-overflow-ellipsis: end;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.part-content .home-slider .slider-container > div .video-item.holder > div > span {
    position: relative;
    z-index: 2;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #101828;
    text-overflow-ellipsis: end;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.part-content .home-slider .slider-container > div .video-item.holder .profile-holder {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 8px 0px 4px;
}

.part-content .home-slider .slider-container > div .video-item.holder .profile-holder .profile-image {
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}

.part-content .home-slider .slider-container > div .video-item.holder .profile-holder .profile-image > img {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.part-content .home-slider .slider-container > div .video-item.holder .profile-holder .profile-image.render > img {
    opacity: 1;
    transition: opacity 0.4s;
}

.part-content .home-slider .slider-container > div .video-item.holder .profile-holder .profile-name {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    color: #344054;
}


.ef-ripple.level-item,
.ef-ripple.action-item {
    height: 32px;
    padding: 6px 12px;
    background-color: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 16px;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ef-ripple.level-item.active,
.ef-ripple.action-item.active {
    background-color: #101828;
    color: #ffffff;
    border: 1px solid transparent;
}

.action-list {
    display: flex;
    align-items: center;
    padding: 16px;
}

.action-list .ef-ripple.action-item {
    margin-left: 8px;
}

.action-list .ef-ripple.action-item:first-child {
    margin-left: 0;
}

.trend-keywords {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.home-section.daily-mission {
    width: 100%;
    background-color: #f9fafb;
    margin-top: -32px;
    padding-top: 32px;
}

.home-section.daily-mission .section-title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.ef-ripple.btn-text-arrow {
    height: 28px;
    padding: 0px 4px;
    display: flex;
    align-items: center;
    background-color: transparent;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    border: none;
    outline: none;
    margin-right: 16px;
}

.ef-ripple.btn-text-arrow .ns-icon.more-arrow {
    width: 20px;
    height: 20px;
    display: inline-block;
    content: url("/assets/images/ic_gndr_arrow_right.svg");
    margin-left: 6px;
}


.part-content .home-slider .slider-container > div .user-item.holder {
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    height: calc(100% - 2px) !important;
}

.part-content .home-slider .slider-container > div .user-item.holder > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: flex-start;
    padding: 16px;
}

.part-content .home-slider .slider-container > div .user-item.holder .profile-holder {
    width: 32px;
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.part-content .home-slider .slider-container > div .user-item.holder .profile-holder .profile-image {
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
}

.part-content .home-slider .slider-container > div .user-item.holder .profile-holder .profile-image > img {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.part-content .home-slider .slider-container > div .user-item.holder .profile-holder .profile-image.render > img {
    opacity: 1;
    transition: opacity 0.4s;
}

.part-content .home-slider .slider-container > div .user-item.holder .profile-holder .profile-name {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    color: #101828;
}

.part-content .home-slider .slider-container > div .user-item.holder .user-comment-box {
    width: calc(100% - 44px - 56px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.part-content .home-slider .slider-container > div .user-item.holder .user-comment {
    text-overflow-ellipsis: end;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 2px;
}

.part-content .home-slider .slider-container > div .user-item.holder .like-box {
    width: 44px;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.part-content .home-slider .slider-container > div .user-item.holder .like-box .like-count {
    color: #475467;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    display: inline-block;
}

.part-content .home-slider .slider-container > div .user-item.holder .like-box .ns-icon.heart {
    width: 24px;
    height: 24px;
    display: inline-block;
    content: url("/assets/images/ic_gndr_heart.svg");
}


.home-section.ai-chat {
    width: calc(100% - 16px * 2) !important;
    box-sizing: border-box;
    padding: 16px;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 64px;
    background-color: #f9fafb;
    border-radius: 8px;
}

.home-section.ai-chat .profile-text-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-section.ai-chat .profile-text-item > img {
    width: 60px;
    height: 60px;
    margin-right: 16px;
}

.home-section.ai-chat .profile-text-item .text-item {
    width: calc(100% - 60px - 16px);
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-section.ai-chat .profile-text-item .text-item .sub-title {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #334054;
    margin-bottom: 2px;
}

.home-section.ai-chat .profile-text-item .text-item .title {
    display: inline-block;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #101828;
}

.home-section.ai-chat .ef-ripple.go-chat-ai {
    width: 100%;
    height: 44px;
    background-color: var(--theme-primary);
    color: #ffffff;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    border: none;
    outline: none;
    margin-top: 16px;
    transition: background-color 0.2s ease;
}

.home-section.ai-chat .ef-ripple.go-chat-ai:hover {
    background-color: var(--theme-primary-hover);
}

/* =============================================== 메인 화면 (Home) */

.klass-content-wrapper {
    background-color: #f7f8fb;
    width: 100%;
    height: calc(100% - 188px);
}

.klass-content-wrapper .content-header {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    padding: 0px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.klass-content-wrapper .content-header .header-title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    white-space: nowrap;
    color: #171a1f;
}

.klass-content-wrapper .content-header .lang-box {
    display: flex;
    align-items: center;
}
.klass-content-wrapper .content-header .lang-box .lang-level {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    display: inline-block;
    margin-left: 0px;
}

.klass-content-wrapper .klass-nav-list {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom: 1px solid #EAECF0;
}

.klass-content-wrapper .klass-nav-list .klass-nav-item {
    width: 33.33%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.klass-content-wrapper .klass-nav-list .klass-nav-item .nav-name {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.klass-content-wrapper .klass-nav-list .klass-nav-item .ns-icon.lecture {
    width: 24px;
    height: 24px;
    display: inline-block;
    content: url("/assets/images/ic_gndr_klass_lecture.svg");
    margin-right: 4px;
}

.klass-content-wrapper .klass-nav-list .klass-nav-item .ns-icon.short-form {
    width: 24px;
    height: 24px;
    display: inline-block;
    content: url("/assets/images/ic_gndr_klass_short_form.svg");
    margin-right: 4px;
}

.klass-content-wrapper .klass-nav-list .klass-nav-item .nav-name > em {
    display: inline-block;
    white-space: nowrap;
    font-size: 14px;
    line-height: 24px;
    color: #667085;
}

.klass-content-wrapper .klass-nav-list .klass-nav-item.active .nav-name > em {
    color: #101828;
}

.klass-content-wrapper .klass-nav-list .klass-nav-item .tab-underline {
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 0;
    width: 0;
    height: 3px;
    transform: translateX(-50%);
    background-color: #171a1f;
    transition: width 0.4s, transform 0.4s;
}

.klass-content-wrapper .klass-nav-list .klass-nav-item.active .tab-underline {
    width: 100%;
    transition: width 0.4s;
}

.klass-content-wrapper .klass-road-container {
    width: 100%;
    height: calc(100% - 48px - 46px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.klass-content-wrapper .klass-road-container .klass-announce {
    z-index: 200;
    width: calc(100% - 16px * 2);
    height: 50px;
    position: fixed;
    top: calc(48px + 46px + 12px);
    left: 16px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0px 2px 8px rgba(72, 72, 147, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s;
}

.klass-content-wrapper .klass-road-container .klass-announce.show {
    opacity: 1;
    transition: opacity 0.4s;
    display: none !important;
}

.klass-content-wrapper .klass-road-container .klass-announce .announce-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 0px 16px;
}

.klass-content-wrapper .klass-road-container .klass-announce .announce-item .level-name {
    font-size: 12px;
    line-height: 18px;
    padding: 2px 8px;
    border: 1px solid #8a226f;
    border-radius: 11px;
    color: #8a226f;
    display: inline-block;
    margin-right: 8px;
}

.klass-content-wrapper .klass-road-container .klass-announce .announce-item .ns-icon.drop-down {
    width: 9px;
    height: 6px;
    display: inline-block;
    content: url("/assets/images/ic_gndr_klass_dropdown.svg");
    margin-left: 6px;
    margin-bottom: 2px;
}


.challenge-content-wrapper {
    background-color: #ffffff;
    width: 100%;
    height: calc(100%) !important;
    margin-top: 0px !important;
}

.challenge-content-wrapper .content-header {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    padding: 0px 16px;
    display: flex;
    align-items: center;
}

.challenge-content-wrapper .content-header .header-title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    white-space: nowrap;
    color: #171a1f;
}

.challenge-content-wrapper .challenge-nav-list {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom: 1px solid #EAECF0;
}

.challenge-content-wrapper .challenge-nav-list .challenge-nav-item {
    width: 33.33%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.challenge-content-wrapper .challenge-nav-list .challenge-nav-item .nav-name {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.challenge-content-wrapper .challenge-nav-list .challenge-nav-item .ns-icon.mission {
    width: 28px;
    height: 28px;
    display: inline-block;
    margin-right: 4px;
}
.challenge-content-wrapper .challenge-nav-list .challenge-nav-item .ns-icon.ranking {
    width: 28px;
    height: 28px;
    display: inline-block;
    margin-right: 4px;
}
.challenge-content-wrapper .challenge-nav-list .challenge-nav-item .ns-icon.badge {
    width: 28px;
    height: 28px;
    display: inline-block;
    margin-right: 4px;
}

.challenge-content-wrapper .challenge-nav-list.type-k .challenge-nav-item .ns-icon.mission {
    content: url("/assets/images/ic_gndr_menu_k08_mission.svg");
}
.challenge-content-wrapper .challenge-nav-list.type-k .challenge-nav-item .ns-icon.ranking {
    content: url("/assets/images/ic_gndr_menu_k02_ranking.svg");
}
.challenge-content-wrapper .challenge-nav-list.type-k .challenge-nav-item .ns-icon.badge {
    content: url("/assets/images/ic_gndr_menu_k11_badge.svg");
}

.challenge-content-wrapper .challenge-nav-list.type-g .challenge-nav-item .ns-icon.mission {
    content: url("/assets/images/ic_gndr_menu_g08_mission.svg");
}
.challenge-content-wrapper .challenge-nav-list.type-g .challenge-nav-item .ns-icon.ranking {
    content: url("/assets/images/ic_gndr_menu_g02_ranking.svg");
}
.challenge-content-wrapper .challenge-nav-list.type-g .challenge-nav-item .ns-icon.badge {
    content: url("/assets/images/ic_gndr_menu_g11_badge.svg");
}


.challenge-content-wrapper .challenge-nav-list .challenge-nav-item .nav-name > em {
    display: inline-block;
    white-space: nowrap;
    font-size: 16px;
    line-height: 24px;
    color: #667085;
}

.challenge-content-wrapper .challenge-nav-list .challenge-nav-item.active .nav-name > em {
    color: #101828;
}

.challenge-content-wrapper .challenge-nav-list .challenge-nav-item .tab-underline {
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 0;
    width: 0;
    height: 3px;
    transform: translateX(-50%);
    background-color: #171a1f;
    transition: width 0.4s, transform 0.4s;
}

.challenge-content-wrapper .challenge-nav-list .challenge-nav-item.active .tab-underline {
    width: 100%;
    transition: width 0.4s;
}

.challenge-content-wrapper .challenge-container {
    width: 100%;
    height: calc(100% - 46px - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.challenge-content-wrapper .challenge-container .challenge-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
}


.challenge-content-wrapper .challenge-container .challenge-content .section-title-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    margin-bottom: 12px;
}

.challenge-content-wrapper .challenge-container .challenge-content .section-title-box .section-title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: #101828;
    display: inline-block;
}

.challenge-content-wrapper .challenge-container .challenge-content .ns-ht-slider.daily-mission {
    width: 100%;
    height: 340px;
    background-color: #f9fafb;
}

.mission-item {
    width: 100%;
    height: 132px;
    border-radius: 8px;
    background-color: #f9fafb;
    box-sizing: border-box;
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

.mission-item .ns-icon {
    width: 60px;
    height: 60px;
    display: inline-block;
    margin-right: 0px !important;
}

.mission-item .ns-icon.mission-1 {
    content: url("/assets/images/ic_gndr_cha_01.svg");
}

.mission-item .ns-icon.mission-2 {
    content: url("/assets/images/ic_gndr_cha_02.svg");
}

.mission-item .ns-icon.mission-3 {
    content: url("/assets/images/ic_gndr_cha_03.svg");
}

.mission-item .ns-icon.mission-4 {
    content: url("/assets/images/ic_gndr_cha_04.svg");
}

.mission-item .ns-icon.mission-5 {
    content: url("/assets/images/ic_gndr_cha_05.svg");
}

.mission-item .ns-icon.mission-6 {
    content: url("/assets/images/ic_gndr_cha_06.svg");
}

.mission-item .ns-icon.mission-7 {
    content: url("/assets/images/ic_gndr_cha_07.svg");
}

.mission-item .ns-icon.mission-8 {
    content: url("/assets/images/ic_gndr_cha_08.svg");
}

.mission-item .ns-icon.mission-9 {
    content: url("/assets/images/ic_gndr_cha_09.svg");
}

.mission-item .ns-icon.mission-10 {
    content: url("/assets/images/ic_gndr_cha_10.svg");
}

.mission-item .mission-what {
    display: flex;
    flex-direction: column;
}

.mission-item .sub-title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #344054;
    display: inline-block;
    margin-bottom: 2px;
}

.mission-item .title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #101828;
    display: inline-block;
}


.road-stage {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #f7f8fb;
}

.road-stage .map-canvas {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    transform: translateX(-50%);
    z-index: 1;
}

.road-stage .map-canvas > img {
    width: 100%;
}

.road-stage .pin-map {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    transform: translateX(-50%);
    z-index: 2;
    /*background-color: rgba(255,0,0,0.5);*/
}

.road-stage .pin-map .road-pin {
    width: 52px;
    height: 74px;
    display: inline-block;
    position: absolute;
    opacity: 0;
    transition: opacity 0.4s;
    background-image: url("/assets/images/ic_gndr_klass_pin_mypool.svg");
    background-size: cover;
}
.road-stage .pin-map .road-pin.k {
    background-image: url("/assets/images/ic_gndr_klass_pin_mypool.svg");
}
.road-stage .pin-map .road-pin.g {
    background-image: url("/assets/images/ic_gndr_klass_pin_ganadara.svg");
}

.road-stage .pin-map .road-pin.show {
    opacity: 1;
    transition: opacity 0.8s;
}

.road-stage .pin-map .road-pin .pin-box {
    width: 57px;
    height: 74px;
    position: relative;
    z-index: 5;
}

.road-stage .pin-map .road-pin .pin-box .lesson-name {
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow-ellipsis: end;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: -1px;
    font-weight: 900;
    color: #383587;
    text-align: center;
    position: absolute;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    bottom: calc(100% + 10px);
    left: 50%;
    /*white-space: nowrap;*/
    word-break: keep-all;
    transform: translateX(-50%);
    display: inline-block;
}

.road-stage .pin-map .road-pin .pin-box .pin-status {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin: 15px 14px;
}

.road-stage .pin-map .road-pin .pin-box .pin-status.video {
    content: url("/assets/images/ic_gndr_klass_video.svg");
}

.road-stage .pin-map .road-pin .pin-box .pin-status.test {
    content: url("/assets/images/ic_gndr_klass_test.svg");
}

.road-stage .pin-map .road-pin .pin-box .pin-status.quiz {
    content: url("/assets/images/ic_gndr_klass_quiz.svg");
}

.road-stage .pin-map .road-pin .pin-box .pin-status.complete {
    content: url("/assets/images/ic_gndr_klass_complete.svg");
}

.road-stage .pin-map .road-pin .pin-box .pin-menu {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 56px;
    position: absolute;
    height: 56px;
    opacity: 0;
    transition: width 0.6s, opacity 0.3s;
    background-color: rgba(68, 68, 104, 0.8);
    border-radius: 28px;
}

.road-stage .pin-map .road-pin.left .pin-box .pin-menu {
    left: calc(100% + 6px);
    top: 0;
}

.road-stage .pin-map .road-pin.right .pin-box .pin-menu {
    right: calc(100% + 6px);
    top: 0;
}

.road-stage .pin-map .road-pin .pin-box .pin-menu.expand {
    opacity: 1;
    width: 162px;
    transition: width 0.4s, opacity 0.8s;
}

.road-stage .pin-map .road-pin .pin-box .pin-menu .pin-menu-item {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #E5E5F0 0%, #F4F4FA 48%);
    border-radius: 22px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.road-stage .pin-map .road-pin .pin-box .pin-menu .ns-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
}

.road-stage .pin-map .road-pin .pin-box .pin-menu .ns-icon.pin-video {
    content: url("/assets/images/ic_gndr_klass_video.svg");
}

.road-stage .pin-map .road-pin .pin-box .pin-menu .ns-icon.pin-test {
    content: url("/assets/images/ic_gndr_klass_test.svg");
}

.road-stage .pin-map .road-pin .pin-box .pin-menu .ns-icon.pin-quiz {
    content: url("/assets/images/ic_gndr_klass_quiz.svg");
}

.community-content-wrapper {
    background-color: #ffffff;
    width: 100%;
    height: calc(100%) !important;
    margin-top: 0px !important;
    /* 레이아웃 안정화 */
    display: flex;
    flex-direction: column;
}

.live-dark-header .content-header,
.community-content-wrapper .content-header {
    width: 100%;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    box-sizing: border-box;
    padding: 0px 16px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.community-content-wrapper .content-header .header-title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    white-space: nowrap;
    color: #171a1f;
}

.live-dark-header .community-nav-list,
.community-content-wrapper .community-nav-list {
    width: 100%;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom: 1px solid #EAECF0;
    flex-shrink: 0;
}

.community-content-wrapper .community-nav-list .community-nav-item {
    width: 33.33%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.community-content-wrapper .community-nav-list .community-nav-item .nav-name {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.community-content-wrapper .community-nav-list .community-nav-item .ns-icon.lecture {
    width: 24px;
    height: 24px;
    display: inline-block;
    content: url("/assets/images/ic_gndr_klass_lecture.svg");
    margin-right: 4px;
}

.community-content-wrapper .community-nav-list .community-nav-item .ns-icon.short-form {
    width: 24px;
    height: 24px;
    display: inline-block;
    content: url("/assets/images/ic_gndr_klass_short_form.svg");
    margin-right: 4px;
}

.community-content-wrapper .community-nav-list .community-nav-item .nav-name > em {
    display: inline-block;
    white-space: nowrap;
    font-size: 16px;
    line-height: 24px;
    color: #667085;
}

.community-content-wrapper .community-nav-list .community-nav-item.active .nav-name > em {
    color: #101828;
}

.community-content-wrapper .community-nav-list .community-nav-item .tab-underline {
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 0;
    width: 0;
    height: 3px;
    transform: translateX(-50%);
    background-color: #171a1f;
    transition: width 0.4s, transform 0.4s;
}

.community-content-wrapper .community-nav-list .community-nav-item.active .tab-underline {
    width: 100%;
    transition: width 0.4s;
}

.community-content-wrapper .community-container {
    width: 100%;
    height: calc(100% - 48px - 46px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}


.community-content-wrapper .community-container .community-content {
    width: 100%;
    box-sizing: border-box;
    /*padding: 16px;*/
}

/* 탭 전환 시 레이아웃 보호 */
.community-content-wrapper .community-container .community-content.hide {
    position: absolute !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    /* display: none 대신 레이아웃에서 제외 */
}

.community-content-wrapper .ef-ripple.float-community {
    position: fixed;
    bottom: 20px;
    right: 16px;
    background-color: var(--theme-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 28px;
    outline: none;
    transition: background-color 0.2s ease;
    z-index: 100; /* 다른 요소 위에 표시 */
}

.community-content-wrapper .ef-ripple.float-community:hover {
    background-color: var(--theme-primary-hover);
}

.community-content-wrapper .ef-ripple.float-community .ns-icon.write-community {
    width: 24px;
    height: 24px;
    display: inline-block;
    content: url("/assets/images/ic_gndr_plus_w.svg");
    margin-right: 0px;
}


.part-content.scene-view-all {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    overflow: hidden;
}

.part-content.scene-view-all .all-content-wrapper {
    width: 100%;
    height: calc(100% - 108px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 56px 16px 0px;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box {
    width: 100%;
    height: 256px;
    box-sizing: border-box;
    padding: 16px;
    background-color: #f9fafb;
    border-radius: 12px;
    position: relative;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .profile-box {
    width: 52px;
    height: 52px;
    position: relative !important;
    border-radius: 26px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.1);
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .profile-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .profile-wrapper .ns-icon.edit {
    width: 12px;
    height: 12px;
    padding: 5px;
    border-radius: 12px;
    background-color: #f9fafb;
    border: 1px solid #ffffff;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    content: url("/assets/images/ic_gndr_edit.svg");
    display: none;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .profile-wrapper .profile-name {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow-ellipsis: end;
    font-size: 18px;
    line-height: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    display: inline-block;
    position: absolute;
    left: 60px;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level {
    width: 100%;
    height: 56px;
    border: 1px solid #d0d5dd;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-top: 12px;
    border-radius: 12px;
    box-sizing: border-box;
    padding: 0px 0px 0px 10px;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .form-label {
    font-size: 14px;
    line-height: 20px;
    color: #344054;
    display: inline-block;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box {
    display: flex;
    align-items: center;
    height: 24px;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box .ns-icon.lang-flag {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: 4px;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box .ns-icon.lang-flag.en {
    content: url("/assets/images/ic_gndr_flag_en.svg");
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box .ns-icon.lang-flag.cn,
.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box .ns-icon.lang-flag.zh {
    content: url("/assets/images/ic_gndr_flag_zh.svg");
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box .ns-icon.lang-flag.ja,
.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box .ns-icon.lang-flag.jp {
    content: url("/assets/images/ic_gndr_flag_ja.svg");
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box .ns-icon.lang-flag.es {
    content: url("/assets/images/ic_gndr_flag_es.svg");
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box .ns-icon.lang-flag.vn,
.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box .ns-icon.lang-flag.vi {
    content: url("/assets/images/ic_gndr_flag_vi.svg");
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box .ns-icon.lang-flag.toeic {
    content: url("/assets/images/ic_gndr_flag_toeic.svg");
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box .lang-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #101828;
    display: inline-block;
    margin-right: 4px;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-study-level .lang-box .lang-level {
    background-color: #f8f9fc;
    border: 1px solid #d5d9eb;
    box-sizing: border-box;
    height: 24px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 18px;
    color: #363f72;
    margin-right: 8px;
    border-radius: 12px;
}

.part-content.scene-view-all .all-content-wrapper .ns-icon.more-arrow {
    width: 20px;
    height: 20px;
    padding: 2px;
    display: inline-block;
    content: url("/assets/images/ic_gndr_arrow_right.svg");
    margin-bottom: 2px;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-status {
    width: 100%;
    height: 96px;
    border: 1px solid #d0d5dd;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    margin-top: 8px;
    border-radius: 12px;
    box-sizing: border-box;
    padding: 0px 0px 0px 10px;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-status .status-item {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-status .status-item .form-label {
    font-size: 14px;
    line-height: 20px;
    display: inline-block;
    color: #344054;
    position: relative;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-status .status-item .form-label .ns-icon.alarm-badge {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background-color: #dd2590;
    position: absolute;
    bottom: calc(100% - 3px);
    left: 100%;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-status .status-item .point-box {
    display: flex;
    align-items: center;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-status .status-item .point-box .point-amount {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #101828;
    display: inline-block;
    margin-right: 4px;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-status .status-item .point-box .point-unit {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #101828;
    display: inline-block;
    margin-right: 4px;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-status .status-item .subscribe-box {
    display: flex;
    align-items: center;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-status .status-item .subscribe-box .subscribe-name {
    font-size: 11px;
    font-weight: 700;
    line-height: 24px;
    color: #101828;
    display: inline-block;
    margin-right: 4px;
}

.part-content.scene-view-all .all-content-wrapper .my-status-box .my-status .status-item .subscribe-box .subscribe-type {
    background-color: #f8f9fc;
    border: 1px solid #d5d9eb;
    box-sizing: border-box;
    height: 24px;
    padding: 2px 8px;
    font-size: 9px;
    line-height: 18px;
    color: #363f72;
    margin-right: 4px;
    border-radius: 12px;
}

.part-content.scene-view-all .all-content-wrapper .service-item-list {
    width: 100%;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 28px 16px 16px;
}

.part-content.scene-view-all .all-content-wrapper .service-item-list .service-item {
    width: 80px;
    height: 72px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.part-content.scene-view-all .all-content-wrapper .service-item-list .service-item.dummy {
    visibility: hidden;
}

.part-content.scene-view-all .all-content-wrapper .service-item-list .service-item .ns-icon.service {
    width: 40px;
    height: 40px;
    display: inline-block;
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.study-stat {
    content: url("/assets/images/ic_gndr_menu_k01_study_stat.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.ranking {
    content: url("/assets/images/ic_gndr_menu_k02_ranking.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.short-form {
    content: url("/assets/images/ic_gndr_menu_k03_short_form.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.review {
    content: url("/assets/images/ic_gndr_menu_k04_review.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.level-test {
    content: url("/assets/images/ic_gndr_menu_k05_level_test.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.ai-chat {
    content: url("/assets/images/ic_gndr_menu_k06_ai_chat.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.translate {
    content: url("/assets/images/ic_gndr_menu_k07_translate.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.mission {
    content: url("/assets/images/ic_gndr_menu_k08_mission.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.attendance {
    content: url("/assets/images/ic_gndr_menu_k09_attendance.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.donation {
    content: url("/assets/images/ic_gndr_menu_k10_donation.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.badge {
    content: url("/assets/images/ic_gndr_menu_k11_badge.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.store {
    content: url("/assets/images/ic_gndr_menu_k12_store.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.event {
    content: url("/assets/images/ic_gndr_menu_k13_event.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.test {
    content: url("/assets/images/ic_gndr_menu_k14_test.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item .ns-icon.service.ad {
    content: url("/assets/images/ic_gndr_menu_k15_ad.svg");
}


.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.study-stat {
    content: url("/assets/images/ic_gndr_menu_g01_study_stat.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.ranking {
    content: url("/assets/images/ic_gndr_menu_g02_ranking.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.short-form {
    content: url("/assets/images/ic_gndr_menu_g03_short_form.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.review {
    content: url("/assets/images/ic_gndr_menu_g04_review.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.level-test {
    content: url("/assets/images/ic_gndr_menu_g05_level_test.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.ai-chat {
    content: url("/assets/images/ic_gndr_menu_g06_ai_chat.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.translate {
    content: url("/assets/images/ic_gndr_menu_g07_translate.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.mission {
    content: url("/assets/images/ic_gndr_menu_g08_mission.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.attendance {
    content: url("/assets/images/ic_gndr_menu_g09_attendance.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.donation {
    content: url("/assets/images/ic_gndr_menu_g10_donation.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.badge {
    content: url("/assets/images/ic_gndr_menu_g11_badge.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.store {
    content: url("/assets/images/ic_gndr_menu_g12_store.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.event {
    content: url("/assets/images/ic_gndr_menu_g13_event.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.test {
    content: url("/assets/images/ic_gndr_menu_g14_test.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item .ns-icon.service.ad {
    content: url("/assets/images/ic_gndr_menu_g15_ad.svg");
}

.part-content.scene-view-all .all-content-wrapper .service-item-list .service-item .service-name {
    font-size: 12px;
    line-height: 18px;
    color: #101828;
    display: inline-block;
    white-space: nowrap;
    margin-top: 4px;
}

.part-content.scene-view-all .all-content-wrapper .service-item-list .service-item .ns-icon.alarm-badge {
    width: 6px;
    height: 6px;
    display: inline-block;
    position: absolute;
    top: 6px;
    right: 22px;
    background-color: #dd2590;
    border-radius: 3px;
}

/* He&She 캐릭터 아이템 스타일 */
.part-content.scene-view-all .all-content-wrapper .service-item-list .service-item.hns-character-item .hns-character-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid;
}

/* Platform K 테마 */
.part-content.scene-view-all .all-content-wrapper .service-item-list.type-k .service-item.hns-character-item .hns-character-icon {
    border-color: #0ba5ec;
    background-color: #7cd4fd;
}

/* Platform G 테마 */  
.part-content.scene-view-all .all-content-wrapper .service-item-list.type-g .service-item.hns-character-item .hns-character-icon {
    border-color: #ff0ddf;
    background-color: #ffacf4;
}

.part-content.scene-view-all .all-content-wrapper .service-item-list .service-item.hns-character-item .character-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    transition: opacity 0.25s ease-in-out;
}

.part-content.scene-view-all .scene-footer {
    width: 100%;
    height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px;
}

.part-content.scene-view-all .scene-footer .notice-section {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.part-content.scene-view-all .scene-footer .notice-section .ef-ripple {
    display: flex;
    overflow: unset;
    align-items: center;
    height: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #475467;
    margin: 0px 10px;
    padding: 0px;
}

.part-content.scene-view-all .scene-footer .notice-section .ef-ripple .ns-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 6px;
}

.part-content.scene-view-all .scene-footer .notice-section .ef-ripple .ns-icon.notice {
    content: url("/assets/images/ic_gndr_notice.svg");
}

.part-content.scene-view-all .scene-footer .notice-section .ef-ripple .ns-icon.customer-center {
    content: url("/assets/images/ic_gndr_help_circle.svg");
}

.part-content.scene-view-all .scene-footer .social-list {
    width: 100%;
    height: 40px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.part-content.scene-view-all .scene-footer .social-list .ns-icon {
    width: 32px;
    height: 32px;
    display: inline-block;
    margin: 0px 4px;
}

.part-content.scene-view-all .scene-footer .social-list .ns-icon.youtube {
    content: url("/assets/images/ic_gndr_youtube.svg");
}

.part-content.scene-view-all .scene-footer .social-list .ns-icon.facebook {
    content: url("/assets/images/ic_gndr_footer_facebook.svg");
}

.part-content.scene-view-all .scene-footer .social-list .ns-icon.instagram {
    content: url("/assets/images/ic_gndr_instagram.svg");
}

.part-content.scene-view-all .scene-footer .social-list .ns-icon.tiktok {
    content: url("/assets/images/ic_gndr_tiktok.svg");
}

.part-content.scene-view-all .scene-footer .social-list .ns-icon.twitter {
    content: url("/assets/images/ic_gndr_twitter.svg");
}

.part-content.scene-view-all .scene-footer .social-list .ns-icon.naver {
    content: url("/assets/images/ic_gndr_naver.svg");
}


.klass-content-wrapper .klass-road-container .klass-lecture-sub {
    z-index: 200;
    width: calc(100% - 16px * 2);
    height: 50px;
    position: fixed;
    top: calc(48px + 12px);
    left: 16px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0px 2px 8px rgba(72, 72, 147, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s, top 0.4s;
}

.klass-content-wrapper .klass-road-container .klass-lecture-sub.show {
    top: calc(48px + 46px + 12px);
    opacity: 1;
    transition: opacity 0.4s, top 0.4s;
    display: none !important;
}

.klass-content-wrapper .klass-road-container .klass-lecture-sub .klass-sub-nav {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.klass-content-wrapper .klass-road-container .klass-lecture-sub .klass-sub-nav .klass-sub-nav-item {
    width: 30%;
    height: 100%;
    line-height: 46px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #667085;
}

.klass-content-wrapper .klass-road-container .klass-lecture-sub .klass-sub-nav .klass-sub-nav-item.active {
    color: #101828;
}

.klass-nav-content.courses {
    padding-top: 24px;
}

.klass-content-wrapper .klass-level-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.level-list {
    display: flex;
    align-items: center;
    padding: 16px;
}

.level-list .ef-ripple.level-item {
    margin-left: 8px;
}

.level-list .ef-ripple.level-item:first-child {
    margin-left: 0;
}


.klass-sub-content .klass-level-lectures {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 16px;
}

.klass-sub-content .video-item.holder {
    /*height: 222px !important;*/
}

.klass-sub-content .video-item.holder:not(:first-child) {
    margin-top: 32px;
}

.klass-sub-content .video-item.holder > div > span {
    position: relative;
    z-index: 2;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #101828;
    text-overflow-ellipsis: end;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.klass-sub-content .video-item.holder > div > .thumb-holder {
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}

.klass-sub-content .video-item.holder > div > .thumb-holder > img {
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
}

.klass-sub-content .video-item.holder .profile-holder {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 8px 0px 4px;
}

.klass-sub-content .video-item.holder .profile-holder .profile-image {
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}

.klass-sub-content .video-item.holder .profile-holder .profile-image > img {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.klass-sub-content .video-item.holder .profile-holder .profile-image.render > img {
    opacity: 1;
    transition: opacity 0.4s;
}

.klass-sub-content .video-item.holder .profile-holder .profile-name {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    color: #344054;
}


.page-course-lecture {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.page-course-lecture .section-lecture {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    background-color: #FBFAFF;
}

.page-course-lecture .section-lecture .course-cover {
    width: 100%;
    height: 420px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
}

.page-course-lecture .section-lecture .course-cover .course-cover-entire {
    width: 100%;
    height: 420px !important;
    display: flex;
    position: absolute;
    bottom: 0;
}

.page-course-lecture .section-lecture .course-cover .course-thumb {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.page-course-lecture .section-lecture .course-cover .course-thumb > img {
    width: 100%;
    height: 420px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.4s;
}

.page-course-lecture .section-lecture .course-cover .course-thumb.render > img {
    opacity: 1;
    transition: opacity 0.4s;
}

.page-course-lecture .section-lecture .course-cover .section-overlay.top {
    width: 100%;
    height: 56px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 3;
}

.page-course-lecture .section-lecture .course-cover .section-overlay.bottom {
    width: 100%;
    height: 192px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: 3;
}

.page-course-lecture .section-lecture .ns-icon.page-back {
    width: 24px;
    height: 24px;
    display: inline-block;
    content: url("/assets/images/ic_gndr_page_back_w.svg");
    position: absolute;
    z-index: 4;
    top: 16px;
    left: 16px;
}
.page-course-lecture .section-lecture .ns-icon.page-back.black {
    content: url("/assets/images/ic_gndr_page_back.svg");
}

.page-course-lecture .section-lecture .course-info-box {
    position: absolute;
    top: calc(420px - 160px);
    left: 0;
    right: 0;
    width: 100%;
    height: 160px;
    background-color: transparent;
    z-index: 9002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 16px;
}

.page-course-lecture .section-lecture .course-info-box .course-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.page-course-lecture .section-lecture .course-info-box .profile-holder {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 8px 0px 4px;
}

.page-course-lecture .section-lecture .course-info-box .profile-holder .profile-image {
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    border: 1px solid #ffffff;
}

.page-course-lecture .section-lecture .course-info-box .profile-holder .profile-image > img {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.page-course-lecture .section-lecture .course-info-box .profile-holder .profile-image.render > img {
    opacity: 1;
    transition: opacity 0.4s;
}

.page-course-lecture .section-lecture .course-info-box .profile-holder .profile-name {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    color: #ffffff;
}

.page-course-lecture .section-lecture .course-info-box .course-title {
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow-ellipsis: end;
    font-weight: 700;
}

.page-course-lecture .section-lecture .course-info-box .course-desc {
    font-size: 14px;
    line-height: 20px;
    color: #d0d5dd;
    width: 100%;
    text-overflow-ellipsis: end;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.page-course-lecture .section-lecture .course-info-box .action-box {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.page-course-lecture .section-lecture .course-info-box .action-box .ef-ripple.purchase-package {
    width: 165px;
    height: 100%;
    border-radius: 8px;
    background-color: var(--theme-primary);
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    border: none;
    outline: none;
    padding: 0px;
    display: none !important;
    transition: background-color 0.2s ease;
}

.page-course-lecture .section-lecture .course-info-box .action-box .ef-ripple.purchase-package:hover {
    background-color: var(--theme-primary-hover);
}

.page-course-lecture .section-lecture .course-info-box .action-box .ns-icon {
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 18px;
    display: inline-block;
    margin-left: 8px;
    margin-right: 0px;
    background-color: rgba(255, 255, 255, 0.1);
}

.page-course-lecture .section-lecture .course-info-box .action-box .ns-icon.like {
    content: url("/assets/images/ic_gndr_sf_heart.svg");
}

.page-course-lecture .section-lecture .course-info-box .action-box .ns-icon.like.active {
    content: url("/assets/images/ic_gndr_sf_heart_on.svg");
}

.page-course-lecture .section-lecture .course-info-box .action-box .ns-icon.bookmark {
    content: url("/assets/images/ic_gndr_sf_bookmark_w.svg");
}

.page-course-lecture .section-lecture .course-info-box .action-box .ns-icon.bookmark.active {
    content: url("/assets/images/ic_gndr_sf_bookmark_on.svg");
}

.page-course-lecture .section-lecture .course-info-box .action-box .ns-icon.share {
    content: url("/assets/images/ic_gndr_sf_share.svg");
}

.page-course-lecture .section-lecture .course-title-bar {
    position: absolute;
    opacity: 0;
    top: 56px;
    width: 100%;
    height: 56px;
    background-color: #fff;
    justify-content: space-between;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color);
    padding: 0px 16px;
}
.page-course-lecture .section-lecture .course-title-bar .course-title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    display: inline-block;
    color: #101828;
    white-space: nowrap;
}

.page-course-lecture .section-lecture .main-list-wrapper {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 99;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list-header {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 16px 16px 20px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list-header .header-title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    display: inline-block;
    color: #101828;
    white-space: nowrap;
}

.page-course-lecture .section-lecture .header-info {
    font-size: 16px;
    line-height: 24px;
    display: inline-block;
    color: #475467;
    white-space: nowrap;
    margin-left: 8px;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 16px;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.grid .lecture-item {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.grid .lecture-item .image-holder {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.grid .lecture-item .image-holder > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    transition: opacity 0.4s;
    border-radius: 4px;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.grid .lecture-item .image-holder.render > img {
    opacity: 1;
    transition: opacity 0.4s;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.grid .lecture-item .lecture-info {
    width: calc(100% - 120px - 16px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.grid .lecture-item .lecture-info .lecture-no {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 11px;
    background-color: #101828;
    color: #ffffff;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.grid .lecture-item .lecture-info .lecture-title {
    width: 100%;
    color: #101828;
    text-overflow-ellipsis: end;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.grid .lecture-item .lecture-info .ef-ripple.quiz {
    width: max-content;
    border: 1px solid #6987ff;
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 14px;
    padding: 8px 12px;
    font-weight: 600;
    color: #092aad;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.grid .lecture-item .lecture-info .ef-ripple.quiz.done {
    color: #98a2b3;
    border: 1px solid #EAECF0;
}


.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.image .lecture-item {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
    position: relative;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.image .lecture-item .lecture-image {
    width: 100%;
    height: max-content;
    position: relative;
}
.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.image .lecture-item .image-holder {
    width: calc(100vw - 32px);
    height: calc((100vw - 32px) * 9 / 16);
    max-width: 430px;
    max-height: calc(430px * 9 / 16);
    overflow: hidden;
    border-radius: 4px;
    position: relative;
    z-index: 9;
}
.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.image .lecture-item .image-holder > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    transition: opacity 0.4s;
    border-radius: 4px;
}
.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.image .lecture-item .image-holder.render > img {
    opacity: 1;
    transition: opacity 0.4s;
}
.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.image .lecture-image .lecture-no {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 11px;
    background-color: #101828;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
}
.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.image .lecture-image .ef-ripple.quiz {
    width: max-content;
    border: 1px solid #6987ff;
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 14px;
    padding: 8px 12px;
    font-weight: 600;
    color: #092aad;
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 10;
}
.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.image .lecture-image .ef-ripple.quiz.done {
    color: #98a2b3;
    border: 1px solid #EAECF0;
}

.page-course-lecture .section-lecture .main-list-wrapper .lecture-list.image .lecture-item .lecture-info .lecture-title {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    width: 100%;
    color: #101828;
    text-overflow-ellipsis: end;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.part-content .slider-container {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.part-content .slider-container .slider-list {
    height: 120px;
    display: flex;
    align-items: flex-start;
    padding: 0px 16px;
}

.part-content .slider-container .slider-list .slider-mission-item {
    width: 94px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.part-content .slider-container .slider-list .slider-mission-item .ns-icon.challenge {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
}

.part-content .slider-container .slider-list .slider-mission-item .item-name {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #101828;
    text-align: center;
    display: inline-block;
    width: 100%;
}


/* mission */
.mission-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mission-item {
    display: flex;
    margin-bottom: 12px;
    padding: 16px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mission-info {
    flex: 1;
    margin-left: 12px;
}

.mission-what .sub-title {
    display: block;
    font-size: 12px;
    color: #777;
    margin-bottom: 2px;
}

.mission-what .title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    width: 100%;
    text-overflow-ellipsis: end;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mission-desc {
    font-size: 12px;
    margin-right: 8px;
    color: #666;
    display: inline-block;
}

.reward-text {
    font-size: 12px;
    font-weight: 600;
    color: #ff5722;
    white-space: nowrap;
}

.mission-status {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 80px;
}

.mission-progress {
    margin-bottom: 8px;
}

.mission-progress .progress-count {
    font-size: 14px;
    font-weight: 600;
    color: #2196f3;
}

.mission-complete .check-icon {
    color: #4caf50;
    font-size: 20px;
    width: 24px;
    height: 24px;
    margin: 0;
    display: inline-block;
    content: url("/assets/images/admin/ic_gndr_check_on.svg");
}

.mission-button {
    padding: 4px 12px;
    background-color: #f9fafb;
    color: #101828;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    margin-top: 4px;
}
.mission-status.type-k .mission-button {
    border: 1px solid #0D3DFF;
}
.mission-status.type-g .mission-button {
    border: 1px solid #ff0ddf;
}

.mission-button:hover {
    background-color: #1976d2;
}

/* 일일 포인트 정보 스타일 */
.daily-point-info {
    margin-bottom: 24px;
    padding: 16px;
    background-color: #f5f5f5;
    border-radius: 12px;
}

.daily-point-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.daily-point-progress {
    display: flex;
    align-items: center;
}

.progress-bar {
    flex: 1;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 12px;
}

.progress-fill {
    height: 100%;
    background-color: #4caf50;
    width: 0%;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* 홈 피드 레이아웃 스타일 */

/* 지그재그 레이아웃 (좌우 반전) */
.layout-zigzag_left .main-with-related {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.layout-zigzag_left .main-content {
    flex: 2;
    order: 1;
}

.layout-zigzag_left .related-content {
    flex: 1;
    order: 2;
}

.layout-zigzag_right .main-with-related {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.layout-zigzag_right .main-content {
    flex: 2;
    order: 2;
}

.layout-zigzag_right .related-content {
    flex: 1;
    order: 1;
}

/* 그리드 레이아웃 */
.layout-grid_2x2 .shortform-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.layout-grid_mixed .theme-collection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* 가로 스크롤 레이아웃 */
.layout-horizontal_scroll .horizontal-scroll-container {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 8px 0;
    scroll-snap-type: x mandatory;
}

.layout-horizontal_scroll .scroll-item {
    flex: 0 0 280px;
    scroll-snap-align: start;
}

/* 특별 레이아웃들 */
.layout-featured_card {
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
}

.layout-featured_card .content-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.layout-card_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.layout-ad_card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
}

/* TOEIC 특화 레이아웃 */
.layout-toeic_parts_grid .toeic-parts-grid,
.layout-toeic_grid .toeic-parts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.toeic-part-card {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
}

.toeic-part-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.toeic-part-card .part-header {
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.toeic-part-card .part-header h3 {
    margin: 0;
    color: #495057;
    font-weight: 600;
}

/* 테마 혼합 레이아웃 */
.theme-mixed-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mixed-lectures {
    order: 1;
    margin-top: -12px;
}

.mixed-shortforms {
    order: 2;
}

/* 모바일에서는 세로 배치 */
@media (max-width: 767px) {
    .layout-zigzag_left .main-with-related,
    .layout-zigzag_right .main-with-related {
        flex-direction: column;
    }

    .layout-zigzag_left .main-content,
    .layout-zigzag_left .related-content,
    .layout-zigzag_right .main-content,
    .layout-zigzag_right .related-content {
        order: unset;
        flex: unset;
    }
}

/* AI 채팅 프롬프트 스타일 */
.ai-chat-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ai-prompt-card {
    flex: 1;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-prompt-card:hover {
    background: #f8f9fa;
    border-color: #0078D7;
    transform: translateY(-1px);
}

.ai-prompt-card .prompt-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0078D7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

.ai-prompt-card .prompt-icon.summary::before {
    content: "📝";
}

.ai-prompt-card .prompt-icon.pronunciation::before {
    content: "🗣️";
}

.ai-prompt-card .prompt-icon.grammar::before {
    content: "📚";
}

.ai-prompt-card .prompt-icon.conversation::before {
    content: "💬";
}

.ai-prompt-card .prompt-icon.listening::before {
    content: "👂";
}

.ai-prompt-card .prompt-icon.reading::before {
    content: "👁️";
}

.ai-prompt-card .prompt-icon.question::before {
    content: "❓";
}

.ai-prompt-card .prompt-icon.character::before {
    content: "汉";
}

.ai-prompt-card .prompt-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
}

/* 커뮤니티 플레이스홀더 */
.community-placeholder {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
}

.community-placeholder .placeholder-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.community-placeholder .placeholder-text {
    font-size: 18px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.community-placeholder .placeholder-subtext {
    font-size: 14px;
    color: #6c757d;
}

/* 이어보기 카드 특별 스타일 */
.continue-learning-card {
    border: 2px solid #28a745;
    background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
}

.continue-learning-card .progress-bar {
    background: #28a745;
    height: 4px;
    border-radius: 2px;
}

/* 실력 향상 카드 스타일 */
.skill-building .main-content {
    border: 2px solid #ffc107;
    background: linear-gradient(135deg, #fffbf0 0%, #fff3cd 100%);
}

/* 한자 특화 스타일 */
.character-special {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
    border-radius: 12px;
    padding: 16px;
}

/* 파트별 훈련 스타일 */
.parts-training .toeic-part-card {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-color: #2196f3;
}

/* 숏폼 하이라이트 그리드 */
.highlight-grid {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.highlight-grid .shortform-video {
    border-radius: 0;
}

/* 반응형 조정 */
@media (max-width: 576px) {
    .ai-chat-prompts {
        flex-direction: column;
    }

    .ai-prompt-card {
        min-width: unset;
    }

    .layout-toeic_parts_grid .toeic-parts-grid,
    .layout-toeic_grid .toeic-parts-grid {
        grid-template-columns: 1fr;
    }
}



/* Badge 섹션 - Figma 디자인 기반 */
.challenge-content.badge {
    padding: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Main Badge Section (나의 대표 배지) */
.main-badge-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px 20px;
    border-bottom: 1px solid #F2F4F7;
    align-self: stretch;
}

.main-badge-section .text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.main-badge-section .title {
    font-family: Pretendard;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.56;
    text-align: center;
    color: #101828;
    margin: 0;
}

.main-badge-section .description {
    font-family: Pretendard;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.43;
    text-align: center;
    color: #9095A0;
    margin: 0;
}

.selected-badge-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 24px;
    border: 2px dashed #E5E7EB;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #FAFBFC;
}

.selected-badge-display:hover {
    border-color: #4F46E5;
    background: #F8FAFF;
}

.selected-badge-display .suggest-text {
    font-family: Pretendard;
    font-weight: 400;
    font-size: 14px;
    color: #9095A0;
}

.selected-badge-display .badge-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selected-badge-display .badge-box .ns-icon.badge {
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.selected-badge-display .badge-box .ns-icon.selected-mark {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: #4F46E5;
    border-radius: 50%;
    border: 3px solid white;
}

.selected-badge-display .badge-box .ns-icon.selected-mark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* My Badge Section (내 배지) */
.my-badge-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 20px;
    align-self: stretch;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.my-badge-section .section-title {
    font-family: Pretendard;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    color: #101828;
    margin: 0;
}

.badge-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
}

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

/* 카테고리 헤더 */
.badge-list .category-header {
    font-family: Pretendard;
    font-weight: 600;
    font-size: 14px;
    color: #4F46E5;
    background: #F0F9FF;
    padding: 8px 12px;
    border-radius: 8px;
    border-left: 3px solid #4F46E5;
    margin: 12px 0 4px 0;
}

.badge-list .category-header:first-child {
    margin-top: 0;
}

/* 3단 그리드 행 */
.badge-list .badge-row {
    display: flex;
    gap: 8px;
    align-self: stretch;
}

/* 개별 뱃지 아이템 - 80x80 아이콘 */
.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 16px 8px;
    background: transparent; /* 회색 박스 제거 - 배경 투명 */
    border: none; /* 회색 박스 제거 - 테두리 제거 */
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 120px;
    justify-content: flex-start;
}

.badge-item.empty {
    visibility: hidden;
}

.badge-item .badge-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: transparent; /* 아이콘 배경 투명 */
    flex-shrink: 0;
    position: relative; /* 오버레이 위치 지정용 */
}

.badge-item .badge-icon .ns-icon.badge {
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0px !important;
}

.badge-item .badge-name {
    font-family: Pretendard;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.33;
    text-align: center;
    color: #374151;
    word-break: break-word;
    max-width: 100%;
}

/* 획득한 뱃지 */
.badge-item.earned {
    border: none; /* 박스 제거 */
    background: transparent; /* 배경 투명 */
    position: relative;
    overflow: visible;
}

.badge-item.earned:hover {
    background: transparent; /* 호버 시에도 배경 투명 유지 */
    transform: translateY(-2px);
    /* box-shadow 제거 */
}

.badge-item.earned .badge-icon {
    background: transparent; /* 획득 배지도 배경 투명 */
    position: relative;
}

/* 획득 체크 아이콘 */
.badge-item.earned .check-overlay {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    z-index: 2;
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);
    border: 2px solid #FFFFFF;
}

.badge-item.earned .check-overlay svg {
    width: 12px;
    height: 12px;
}

/* 미획득한 뱃지 */
.badge-item.not-earned {
    cursor: pointer;
    background: transparent; /* 박스 제거 - 배경 투명 */
    border: none; /* 박스 제거 - 테두리 제거 */
    position: relative;
    overflow: visible;
}

.badge-item.not-earned:hover {
    background: transparent; /* 호버 시에도 배경 투명 유지 */
    border: none;
}

.badge-item.not-earned .badge-icon {
    background: transparent; /* 아이콘 배경도 투명 */
    position: relative;
}

.badge-item.not-earned .badge-icon .ns-icon.badge {
    opacity: 0.6; /* lock 배지 톤다운 - opacity 0.6으로 변경 */
}

.badge-item.not-earned .badge-name {
    color: #9CA3AF;
}

/* 락 아이콘 - 우측 하단 작은 크기로 */
.badge-item.not-earned .lock-overlay {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1.5px solid #E5E7EB;
    opacity: 0.9;
}

.badge-item.not-earned .lock-overlay svg {
    width: 14px;
    height: 14px;
}

/* 빈 목록 */
.badge-list .no-badges {
    text-align: center;
    color: #9CA3AF;
    font-size: 14px;
    padding: 40px 0;
    font-style: italic;
}

/* 반응형 처리 */
@media (max-width: 480px) {
    .main-badge-section {
        padding: 24px 0;
    }

    .selected-badge-display {
        min-height: 100px;
        padding: 20px;
    }

    .selected-badge-display .badge-box .ns-icon.badge {
        width: 64px;
        height: 64px;
    }

    .badge-item {
        padding: 12px 6px;
        min-height: 100px;
    }

    .badge-item .badge-icon {
        width: 64px;
        height: 64px;
    }

    .badge-item .badge-icon .ns-icon.badge {
        width: 64px;
        height: 64px;
    }

    .badge-item .badge-name {
        font-size: 11px;
    }
    
    /* 모바일에서 체크/락 오버레이 크기 조정 */
    .badge-item.earned .check-overlay,
    .badge-item.not-earned .lock-overlay {
        width: 20px;
        height: 20px;
        bottom: -2px;
        right: -2px;
    }
    
    .badge-item.earned .check-overlay svg {
        width: 10px;
        height: 10px;
    }
    
    .badge-item.not-earned .lock-overlay svg {
        width: 12px;
        height: 12px;
    }
}

/* 라이브 전체화면 오버레이 - GNB보다 높은 z-index */
.live-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: black;
    z-index: 10000; /* GNB(9001)보다 높음 */
    display: none;
    overflow: hidden;
}

.live-fullscreen-overlay.active {
    display: block;
}

/* 라이브 배경 이미지 컨테이너 */
.live-background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.live-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.1);
    transition: all 1.5s ease-in-out;
}

.live-background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.live-background-image.active {
    opacity: 1;
    transform: scale(1);
}

.live-background-image.fade-out {
    opacity: 0;
    transform: scale(1.1);
}

/* 라이브 그라데이션 오버레이 */
.live-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.3) 0%,
            rgba(0,0,0,0.4) 50%,
            rgba(0,0,0,0.7) 100%
    );
    z-index: 2;
}

/* 다크 테마 헤더 - 기존 스타일과 유사하지만 다크 */
.live-dark-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: linear-gradient(
            180deg,
            rgba(0,0,0,0.6) 0%,
            rgba(0,0,0,0.3) 70%,
            rgba(0,0,0,0.1) 90%,
            rgba(0,0,0,0.0) 100%
    );
    backdrop-filter: blur(10px);
    /*padding-top: 16px;*/
}

/* 다크 테마 헤더 타이틀 */
.live-dark-header .content-header {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    padding: 0px 16px;
    display: flex;
    align-items: center;
}

.live-dark-header .header-title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    white-space: nowrap;
    color: #ffffff; /* 다크 테마 */
}

/* 다크 테마 네비게이션 */
.live-dark-nav {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,0.2); /* 다크 테마 */
}

.live-dark-nav .nav-item {
    width: 33.33%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.live-dark-nav .nav-item .nav-name {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.live-dark-nav .nav-item .nav-name > em {
    display: inline-block;
    white-space: nowrap;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255,255,255,0.6); /* 다크 테마 */
    transition: color 0.3s ease;
}

.live-dark-nav .nav-item.active .nav-name > em {
    color: #ffffff; /* 다크 테마 활성 */
}

.live-dark-nav .nav-item .tab-underline {
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 0;
    width: 0;
    height: 3px;
    transform: translateX(-50%);
    background-color: #ffffff; /* 다크 테마 */
    transition: width 0.4s, transform 0.4s;
}

.live-dark-nav .nav-item.active .tab-underline {
    width: 100%;
    transition: width 0.4s;
}

/* 라이브 인디케이터 */
.live-indicator {
    position: absolute;
    top: 120px;
    left: 16px;
    z-index: 40;
    background: #ff4444;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    animation: livePulse 2s infinite;
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
}

@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* 채팅 컨테이너 */
.live-chat-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 400px;
    z-index: 40;
    overflow: hidden;
    background: linear-gradient(
            0deg,
            rgba(0,0,0,0.9) 0%,
            rgba(0,0,0,0.7) 20%,
            rgba(0,0,0,0.5) 40%,
            rgba(0,0,0,0.3) 60%,
            rgba(0,0,0,0.2) 80%,
            rgba(0,0,0,0) 100%
    );
}

.live-chat-messages {
    position: absolute;
    bottom: 80px;
    left: 16px;
    right: 16px;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 0;
}

.live-chat-message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-out;
    max-width: 300px;
    /*background: rgba(0,0,0,0.4);*/
    border-radius: 12px;
    /*padding: 8px 12px;*/
    /*backdrop-filter: blur(10px);*/
    /*border: 1px solid rgba(255,255,255,0.1);*/
}

.live-chat-message.show {
    opacity: 1;
    transform: translateY(0);
}

.live-chat-message.slide-up {
    animation: liveSlideUp 0.5s ease-out forwards;
}

@keyframes liveSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.live-profile-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.3);
}

.live-message-content {
    flex: 1;
}

.live-username {
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.live-message-text {
    color: rgba(255,255,255,0.95);
    font-size: 14px;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 하트 애니메이션 */
.live-hearts-container {
    position: absolute;
    bottom: 96px; /* 하트 버튼과 동일한 bottom 값 */
    right: 16px;  /* 하트 버튼과 동일한 right 값 */
    width: 56px;  /* 하트 버튼과 동일한 크기 */
    height: 56px; /* 하트 버튼과 동일한 크기 */
    z-index: 39;  /* 하트 버튼(40)보다 낮게 */
    pointer-events: none;
    overflow: visible; /* 하트가 컨테이너 밖으로도 나갈 수 있게 */
}

.live-heart {
    position: absolute;
    font-size: 20px; /* 기본 크기 */
    color: #ff4444;
    animation: liveHeartFloat 3s ease-out forwards;
    bottom: 0; /* 컨테이너 하단에서 시작 */
    left: 50%; /* 컨테이너 중앙에서 시작 */
    transform: translateX(-50%); /* 중앙 정렬 */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* 하트 플로팅 애니메이션 개선 */
@keyframes liveHeartFloat {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
    }
    10% {
        transform: translateX(-50%) translateY(-20px) scale(1.2) rotate(5deg);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-50%) translateY(-150px) scale(1) rotate(15deg);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-300px) scale(0.6) rotate(25deg);
    }
}

.live-heart-button {
    position: absolute;
    bottom: 90px;
    right: 24px;
    z-index: 85;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
}

.live-heart-button:hover {
    background: linear-gradient(135deg, #ff5252, #ff6b6b);
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5);
}

.live-heart-button:active {
    transform: scale(0.95);
}

/* 채팅 입력 */
.live-chat-input-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 80;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.live-chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    padding: 12px 20px;
    color: white;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
}

.live-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.live-chat-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.02);
}

.live-send-button {
    background: #ff6b6b;
    border: none;
    color: white;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    flex-shrink: 0;
}

.live-send-button:hover {
    background: #ff5252;
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

.live-send-button:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.live-heart-button.clicked {
    transform: scale(0.9);
    background: rgba(255,68,68,0.9);
}

/* 반응형 처리 */
@media (max-width: 768px) {
    .live-chat-message {
        max-width: 280px;
        font-size: 13px;
    }

    .live-heart-button {
        bottom: 80px;
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: 20px;
        border-radius: 24px;
    }

    .live-hearts-container {
        bottom: 80px;
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .live-indicator {
        top: 118px;
        left: 12px;
        padding: 4px 8px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .live-dark-header .header-title {
        font-size: 16px;
    }

    .live-dark-nav .nav-item .nav-name > em {
        font-size: 14px;
    }

    .live-chat-input-container {
        padding: 16px 20px;
    }

    .live-chat-input {
        font-size: 14px;
        padding: 10px 16px;
    }

    .live-send-button {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        border-radius: 21px;
    }
}

/* 화면 중앙 인트로 영역 */
/* 채팅 모드 전환 애니메이션 */
.live-chat-container,
.live-chat-input-container,
.live-heart-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 기능 가이드 버튼 애니메이션 */
.live-center-intro {
    position: absolute;
    top: calc(50% - 160px);
    transition: opacity 0.3s ease;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

/* 메인 인트로 버튼 */
.live-intro-button {
    position: relative;
    width: 120px;
    height: 120px;
    border: none;
    background: transparent;
    cursor: pointer;
    margin-bottom: 24px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* 버튼 링 애니메이션 */
.button-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: pulse-ring 2s ease-in-out infinite;
}

.button-ring.ring-2 {
    width: 100px;
    height: 100px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: pulse-ring 2s ease-in-out infinite 0.5s;
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* 버튼 코어 */
.button-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    backdrop-filter: blur(15px);
    box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 2px 8px rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.live-intro-button:hover .button-core {
    transform: translate(-50%, -50%) scale(1.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
    box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.4),
            inset 0 2px 12px rgba(255, 255, 255, 0.3);
}

.live-intro-button:active .button-core {
    transform: translate(-50%, -50%) scale(0.95);
}

/* 물음표 */
.question-mark {
    font-size: 32px;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    animation: glow-question 2s ease-in-out infinite alternate;
}

@keyframes glow-question {
    0% {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }
    100% {
        text-shadow:
                0 2px 8px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(255, 255, 255, 0.8),
                0 0 30px rgba(255, 255, 255, 0.6);
    }
}

/* 스파클 애니메이션 */
.button-sparkles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    pointer-events: none;
}

.sparkle {
    position: absolute;
    font-size: 16px;
    animation: sparkle-rotate 4s linear infinite;
}

.sparkle-1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.sparkle-2 {
    top: 10%;
    right: 10%;
    animation-delay: 1s;
}

.sparkle-3 {
    bottom: 10%;
    left: 10%;
    animation-delay: 2s;
}

.sparkle-4 {
    bottom: 10%;
    right: 10%;
    animation-delay: 3s;
}

@keyframes sparkle-rotate {
    0% {
        transform: rotate(0deg) scale(0.8);
        opacity: 0.6;
    }
    25% {
        transform: rotate(90deg) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: rotate(180deg) scale(0.8);
        opacity: 0.6;
    }
    75% {
        transform: rotate(270deg) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: rotate(360deg) scale(0.8);
        opacity: 0.6;
    }
}

/* 인트로 메시지 */
.intro-message {
    color: white;
    text-align: center;
    animation: fade-in-up 1s ease-out 0.5s both;
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-text {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    animation: text-glow 3s ease-in-out infinite alternate;
}

@keyframes text-glow {
    0% {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    }
    100% {
        text-shadow:
                0 2px 8px rgba(0, 0, 0, 0.6),
                0 0 15px rgba(255, 255, 255, 0.4);
    }
}

.message-detail {
    font-size: 14px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    animation: pulse-text 2s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% {
        opacity: 0.9;
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* 클릭 효과 */
.live-intro-button:active {
    animation: click-effect 0.3s ease;
}

@keyframes click-effect {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-5px) scale(1.05); }
    100% { transform: translateY(0px) scale(1); }
}

/* 반응형 */
@media (max-width: 480px) {
    .live-intro-button {
        width: 100px;
        height: 100px;
    }

    .button-core {
        width: 56px;
        height: 56px;
    }

    .question-mark {
        font-size: 28px;
    }

    .message-text {
        font-size: 16px;
    }

    .message-detail {
        font-size: 13px;
    }

    .button-sparkles {
        width: 120px;
        height: 120px;
    }

    .sparkle {
        font-size: 14px;
    }
}