.visual {position: relative; margin-bottom: 16px; background: linear-gradient(180deg, #F3F8FE 0%, #E2E9F9 100%); overflow: hidden;}

.visual .visual-circle1,
.visual .visual-circle1::after,
.visual .visual-circle2,
.visual .visual-circle2::after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;}

.visual .visual-circle1 {width: clamp(1060px, 91.35416666667vw, 1754px); height: clamp(1060px, 91.35416666667vw, 1754px); background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(17.539px); z-index: 2;}
.visual .visual-circle1::after {content: ''; width: clamp(847.8px, 73.08333333333vw, 1403.2px); height: clamp(847.8px, 73.08333333333vw, 1403.2px); background: linear-gradient(180deg, #F5F2FF -0.02%, #AC92F8 284.31%); filter: blur(91.208px); z-index: 1;}
.visual .visual-circle2 {width: clamp(643px, 55.46072916667vw, 1064.846px); height: clamp(643px, 55.46072916667vw, 1064.846px); background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(10.648px); z-index: 4;}
.visual .visual-circle2::after {content: ''; width: clamp(515.7px, 44.36859375vw, 851.877px); height: clamp(515.7px, 44.36859375vw, 851.877px);  background: radial-gradient(127.58% 127.58% at 51.89% 44.72%, rgba(245, 242, 255, 0.45) 0%, rgba(172, 146, 248, 0.45) 100%); filter: blur(55.372px); z-index: 3;}

.visual .text-wrap {padding: 8.25rem 0 10.563rem; text-align: center; position: relative; z-index: 10;}
.visual .text-wrap p {color: var(--gray60); font-size: 1.25rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls); margin-bottom: 0.875rem;}
.visual .text-wrap h2 {white-space: pre-line; color: #2D1647; font-size: 64px; font-weight: 700; line-height: 120%; letter-spacing: -0.03em;}
.visual .text-wrap h2 strong {font-weight: 700; background: linear-gradient(90deg, #FF8DD8 -20%, #8155FF 50%, #55E2B6 120%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}


.cate-area {width: 100%; max-width: 1108px; margin: 0 auto; margin-bottom: 4.313rem; overflow-x: auto; overflow-y: hidden;}
.cate-area::-webkit-scrollbar {width: 0; height: 0;}
.cate-area .ul-cate {width: max-content; display: flex; justify-content: center; align-items: stretch; margin: 0 auto;}
.cate-area .ul-cate li {flex-shrink: 0; width: 10rem;}
.cate-area .ul-cate .cate {display: block; padding: 8px 20px 16px; margin: 0 auto; text-align: center; color: var(--gray80); font-size: 1.25rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls);}
.cate-area .ul-cate .cate:hover {font-weight: 700;}
.cate-area .ul-cate .cate.on {font-weight: 700; color: var(--highlight); position: relative; cursor: default; pointer-events: none;}
.cate-area .ul-cate .cate.on::after {content: ''; display: block; width: 100%; height: 1.6px; border-radius: 999px; background: var(--highlight); position: absolute; right: 0; bottom: 0; left: 0;}


.cont {width: 100%; max-width: 1108px; padding: 0 20px; margin: 0 auto;}

.cont .search-form {margin-bottom: 3.5rem;}
.cont .gradient-box {width: 100%; max-width: 527px; margin: 0 auto; border-radius: 999px; padding: 1px; background: linear-gradient(90deg, #55E2B6 0%, #8155FF 50%, #FF8DD8 100%);}
.cont .search-wrap {position: relative; width: 100%; padding-right: 32px; display: flex; gap: 32px; background-color: var(--white); border-radius: 999px;}
.custom-select .btn-select,
.cont .search-wrap input {border: 0; padding: 0; border-radius: 0;}

.custom-select .btn-select {height: 100%; padding: 0 28px 0 32px; display: block; color: var(--gray80); font-size: 1rem; font-weight: 500; line-height: 160%; letter-spacing: var(--ls); text-align: left; position: relative;}
.custom-select .btn-select::before {content: ''; width: 20px; height: 20px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background-image: url("../img/icon/select-down2.svg"); background-size: cover; background-repeat: no-repeat;}
.custom-select .btn-select>* {min-width: 55px;}

.custom-select .select-options {width: fit-content; padding: 16px 24px; display: flex; flex-direction: column; gap: 16px; position: absolute; top: calc(100% + 1px); left: 0; z-index: 100; border-radius: 20px; background: var(--white); box-shadow: 0 4px 10px 0 rgba(103, 110, 134, 0.25); color: var(--gray60); font-size: 1rem; font-weight: 500; line-height: 160%; letter-spacing: var(--ls); overflow: hidden;}

.custom-select .btn-select.on::before {transform: translateY(-50%) scaleY(-1);}
.custom-select .select-options {transform: scaleY(0); transform-origin: top; opacity: 0; transition: all 0.25s ease; visibility: hidden;}
.custom-select .btn-select.on ~ .select-options {opacity: 1; transform: scaleY(1); visibility: visible;}

.select-options input[type=radio] + label {margin-left: 0; transition: font-weight .15s linear;}
.select-options input[type=radio] + label:hover {font-weight: 700;}
.select-options input[type=radio] + label::before {display: none;}
.select-options input[type=radio] + label::after {display: none;}

.cont .search-wrap .input-search {flex: 1; background-color: transparent; color: var(--gray80); font-size: 1rem; font-weight: 500; line-height: 160%; letter-spacing: var(--ls);}
.cont .search-wrap .input-search::placeholder {font-size: 1em; color: var(--gray40);}

.cont .search-wrap .btn-search {width: 54px; height: 54px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center;}
.cont .search-wrap .btn-search img {width: 20px; height: 20px; display: block; object-fit: contain;}

.cont .list-wrap {position: relative;}
.ul-topic>li + li {margin-top: 100px;}

.topic-list.empty {margin: 184px auto 358px; text-align: center; color: var(--gray90); font-size: 1.5rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls);}
.topic-list.empty strong {font-weight: 700;}
.topic-list.empty small {font-size: 0.6667em; color: var(--gray60);}

.ul-topic .topic-list .tit-area {padding-left: 1rem; margin-bottom: 1.5rem;}
.ul-topic .topic-list .sm-tit {color: var(--gray40); font-size: 0.875rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls);}
.ul-topic .topic-list .tit {color: var(--gray80); font-size: 1.75rem; font-weight: 700; line-height: 140%; letter-spacing: var(--ls);}

.ul-topic .topic-list .ul-card {width: 100%; display: flex; justify-content: start; align-items: stretch; gap: 12px;}
.ul-card .card {flex: 1; min-height: 211px; padding: 1.75rem 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; border-radius: 20px; border: 0.8px solid var(--border); background: var(--white); transition: all .18s ease-in-out; position: relative;}
.ul-card .card .level {display: flex; justify-content: space-between; align-items: center; font-size: 1rem; font-weight: 700; line-height: 140%; letter-spacing: var(--ls); margin-bottom: 8px;}
.ul-card .card .card-tit {color: var(--gray80); font-size: 1.25rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls); white-space: pre-line;}

.ul-card .card .btn-wrap {margin-left: auto; display: flex; justify-content: end; align-items: stretch; gap: 10px;}
.ul-card .card .btn-wrap>* {padding: 8.5px 16.5px; border-radius: 24px; font-size: 0.875rem; line-height: 140%; letter-spacing: var(--ls);display: flex;justify-content: center;align-items: center;}
.ul-card .card .btn-example {background: linear-gradient(0deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.01) 100%), #F9F9FD; color: var(--gray60); font-weight: 500;}
.ul-card .card .btn-start {font-weight: 700;}

.ul-card .card .badge {position: absolute; top: 1.813rem; right: 2rem; display: none;}
.ul-card .card.active .badge.icon-ongoing {display: block;}
.ul-card .card.complete .badge.icon-complete {display: block;}

.ul-card .card.introduction .level {color: var(--yellow);}
.ul-card .card.introduction .btn-start {color: var(--yellow); background: linear-gradient(0deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.30) 100%), #FDF8DF;}
.ul-card .card.introduction :is(.icon-ongoing, .icon-complete) path {fill: var(--yellow);}

.ul-card .card.introduction:hover {border-color: var(--yellow); background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), #FDF8DF;}

.ul-card .card.introduction:active {background: var(--yellow);}
.ul-card .card.introduction:active :is(.level, .card-tit) {color: var(--white);}
.ul-card .card.introduction:active :is(.icon-ongoing, .icon-complete) path {fill: var(--white);}


.ul-card .card.beginner .level {color: var(--green);}
.ul-card .card.beginner .btn-start {color: var(--green); background: linear-gradient(0deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.30) 100%), #D4F8ED;}
.ul-card .card.beginner :is(.icon-ongoing, .icon-complete) path {fill: var(--green);}

.ul-card .card.beginner:hover {border-color: var(--green); background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), #D4F8ED;}

.ul-card .card.beginner:active {background: var(--green);}
.ul-card .card.beginner:active :is(.level, .card-tit) {color: var(--white);}
.ul-card .card.beginner:active :is(.icon-ongoing, .icon-complete) path {fill: var(--white);}


.ul-card .card.intermediate .level {color: var(--blue);}
.ul-card .card.intermediate .btn-start {color: var(--blue); background: linear-gradient(0deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.40) 100%), #D7E1FF;}
.ul-card .card.intermediate :is(.icon-ongoing, .icon-complete) path {fill: var(--blue);}

.ul-card .card.intermediate:hover {border-color: var(--blue); background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), #D7E1FF;}

.ul-card .card.intermediate:active {background: var(--blue);}
.ul-card .card.intermediate:active :is(.level, .card-tit) {color: var(--white);}
.ul-card .card.intermediate:active :is(.icon-ongoing, .icon-complete) path {fill: var(--white);}


.ul-card .card.advanced .level {color: var(--pink);}
.ul-card .card.advanced .btn-start {color: var(--pink); background: linear-gradient(0deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.40) 100%), #FFD9F2;}
.ul-card .card.advanced :is(.icon-ongoing, .icon-complete) path {fill: var(--pink);}

.ul-card .card.advanced:hover {border-color: var(--pink); background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), #FFD9F2;}

.ul-card .card.advanced:active {background: var(--pink);}
.ul-card .card.advanced:active :is(.level, .card-tit) {color: var(--white);}
.ul-card .card.advanced:active :is(.icon-ongoing, .icon-complete) path {fill: var(--white);}


.cont .list-wrap .side-nav {padding: 16px 20px; border-radius: 12px; background: var(--white); filter: drop-shadow(0px 2px 18px rgba(85, 30, 254, 0.12)); color: #551EFE; font-size: 1rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls); position: absolute; top: 168px; right: clamp(-306px, -15.9375vw, 0px);}
.cont .list-wrap .side-nav .nav-text strong {font-weight: 700; background: linear-gradient(90deg, #FF8DD8 6.46%, #8155FF 70.24%, #55E2B6 94.02%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.cont .list-wrap .side-nav svg {position: absolute; left: 2px; top: 50%; transform: translate(-100%, -50%);}


.paging-wrap {padding: 11rem 0 13.313rem;}
.paging-wrap .ul-paging {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px;}
.paging-wrap .ul-paging :is(a, button) {width: 2.5rem; height: 2.5rem; display: flex; justify-content: center; align-items: center; color: var(--gray60); text-align: center; font-size: 1rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls);}
.paging-wrap .ul-paging .page-link:hover {font-weight: 700;}
.paging-wrap .ul-paging .page-link.on {border-radius: 5px; background: var(--gray60); color:var(--white); pointer-events: none; cursor: default;}
.paging-wrap .ul-paging :is(.btn-prev, .btn-next) svg {width: 18px; height: 18px; display: block; object-fit: contain;}
/*paging disabled 추가(임시) 250804 */
.paging-wrap .ul-paging .btn-prev.disabled,
.paging-wrap .ul-paging .btn-next.disabled {
    display: none;
}

.backdrop .example-modal {text-align: left;}
.example-modal .modal-cont {width: 100%;}
.example-modal .modal-cont .txt-area {padding: 8px 16px;}
.example-modal .topic {text-align: left; color: var(--gray80); font-size: 1.5rem; font-weight: 700; line-height: 150%; letter-spacing: var(--ls); margin-bottom: 1rem;}
.example-modal .role-list {display: flex; justify-content: start; align-items: center; gap: 1.625rem; margin-bottom: 1.5rem;}
.example-modal .role-item {display: flex; justify-content: start; align-items: center; gap: 6px;}

.example-modal :is(.role-label, .speaker-label) {-webkit-flex-shrink: 0; flex-shrink: 0; display: flex; justify-content: center; align-items: center; color: #6B689B;}
.example-modal .ai :is(.role-label, .speaker-label) {background: var(--ai);}
.example-modal .me :is(.role-label, .speaker-label) {background: var(--me);}

.example-modal .role-label {width: 1.125rem; height: 1.125rem; border-radius: 5.143px; font-size: 0.9rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls);}
.example-modal .role-name {color: var(--gray60); font-size: 0.875rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls);}

.example-modal .dialogue-content {max-height: calc(95dvh - 48px - 16px - 1.5rem*1.5 - 1rem - 0.875rem*1.4 - 1.5rem - 2rem - 1.25rem - 1rem*1.6); overflow-x: clip; overflow-y: auto;}
.scroll::-webkit-scrollbar {width: 7px; height: 7px;}
.scroll::-webkit-scrollbar-thumb {width: 7px; border: 0;}
.scroll::-webkit-scrollbar-track {width: 7px;}

.example-modal .dialogue-content>li + li {margin-top: 8px;}
.example-modal .dialogue-content .dialogue-line {display: flex; justify-content: start; align-items: start; gap: 8px;}
.example-modal .dialogue-content .dialogue-line .speaker-label {width: 1.25rem; height: 1.25rem; border-radius: 5.714px; margin: calc((1rem*1.6 - 1.25rem)/2) 0; font-size: 1rem; font-weight: 500; line-height: 140%; letter-spacing: var(--ls);}
.example-modal .dialogue-content .dialogue-text {color: var(--gray80); font-size: 1rem; font-weight: 500; line-height: 160%; letter-spacing: var(--ls);}

.example-modal .btn-area {width: 100%; padding: 1rem;}
.example-modal .btn-download {width: 149px; height: 46px; margin-left: auto; font-weight: 500;}





@media screen and (max-width:1700px){
    .cont .list-wrap .side-nav {max-width: 156px; right: clamp(-221px, -13vw, 0px);}
}

@media screen and (max-width:1500px){
    .cont .list-wrap .side-nav {display: none;}
}

@media screen and (max-width:1200px){
    .visual .text-wrap h2 {font-size: 48px;}
}

@media screen and (max-width:768px){
    .visual .text-wrap h2 {font-size: 36px;}

    .visual .visual-circle1 {width: 611.352px; height: 611.352px;}
    .visual .visual-circle1::after {width: 489.081px; height: 489.081px;}
    .visual .visual-circle2 {width: 371.149px; height: 371.149px;}
    .visual .visual-circle2::after {width: 296.919px; height: 296.919px;}

    .cont {padding: 0 0 0 20px;}

    .topic-list.empty {padding-right: 20px; margin: 116px 0 225px; font-size: 1.25rem;}

    .ul-topic .topic-list .card-area {overflow-x: auto; overflow-y: hidden;}
    .ul-topic .topic-list .card-area::-webkit-scrollbar {width: 0; height: 0;}
    .ul-topic .topic-list .ul-card {width: max-content; padding-right: 20px;}
    .ul-card .card {width: 280px; min-width: unset; min-height: 172px;}

    .paging-wrap {padding: 92px 0 120px;}
    .ul-card .card .btn-wrap{margin: 0 auto;}
    
    .example-modal .modal-cont .txt-area {padding: 8px;}
    .example-modal .btn-download {margin: 0 auto; }
}

@media screen and (max-width:480px){
    .visual .text-wrap h2 {font-size: 32px;}
    .cate-area .ul-cate li a,
    .ul-topic .topic-list .sm-tit {font-size: 1.17em;}
    .cont .search-wrap .custom-select .btn-select {width: 60px;}
    .modal-wrap .modal-cont .dialogue-content .speaker-label {margin-top: 2px;}
    .custom-select .btn-select::before{right: -20px;}
    .ul-card .card .btn-wrap>*{font-size: 12px;}
}