.index {
    padding-top: 153px;
}

.index.mainPage {
    padding-top: 140px;
}

@media (max-width: 1280px) {
    .index {
        padding-top: 60px;
    }

    .index.mainPage {
        padding-top: 106px;
    }
}

.notice-banner {
    background: #505ea4;
    color: white;
    height: 40px;
    overflow: hidden;
    font-size: 14px;
    position: relative;
    display: flex;
    align-items: center;
}

.notice-wrap {
    height: 100%;
    overflow: hidden;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}

.notice-list {
    position: absolute;
    top: 0;
    left: 0;
}

.notice-item {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.notice-item p {
    white-space: nowrap;
    color: #fff;
    font-size: 16px;
}

.bold {
    font-weight: bold;
}

.notice-banner .icon {
    margin-right: 4px;
}

@media (max-width: 1280px) {

    .notice-banner {
        height: 46px;
        padding: 0 16px;
    }

    .notice-banner i {
        display: none;
    }

    .notice-banner .notice-item {
        display: flex;
        align-items: start;
        line-height: 46px;
        height: 46px;
        padding: 6px 0;
    }

    .notice-item p {
        font-size: 14px;
    }

}

/* 메인페이지 */


/* ----- 메인베너슬라이드 */
.mainBannerSwiper {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
}

.mainBannerSwiper .swiper-slide {
    width: 80%;
    max-width: 1280px;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.mainBannerSwiper .swiper-button-prev::after,
.mainBannerSwiper .swiper-button-next::after {
    display: none;
}

.mainBannerSwiper .swiper-slide a {
    display: block;
    width: 100%;
}

.mainBannerSwiper .swiper-slide img {
    width: 100%;

    object-fit: cover;
    border-radius: 50px;
    overflow: hidden;
}

.mainBannerSwiper .slide-btn-wrap {
    position: absolute;
    bottom: 16px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    width: 81%;
    width: calc(100% - 53%);
    height: fit-content;
    text-align: center;
    z-index: 5;
}

.mainBannerSwiper .swiper-button-prev,
.mainBannerSwiper .swiper-button-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}


.mainBannerSwiper:hover .swiper-button-prev,
.mainBannerSwiper:hover .swiper-button-next {
    opacity: 1;
    visibility: visible;
}

.mainBannerSwiper .swiper-button-prev i,
.mainBannerSwiper .swiper-button-next i {
    font-size: 60px;
    color: #fff;
}

.mainBannerSwiper:hover .swiper-button-prev,
.mainBannerSwiper:hover .swiper-button-next {
    opacity: 1;
    pointer-events: auto;
}

.mainBannerSwiper .swiper-pagination {
    display: inline-block;
    margin-top: 8px;
}

.mainBannerSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: white;
    opacity: 1;
    margin: 0 4px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.mainBannerSwiper .swiper-pagination-bullet-active {
    background-color: #4a56a7;
}


.search-bar {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 600px;
    height: 70px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 9999px;
    padding: 0 42px 0 40px;
    box-sizing: border-box;
    background-color: #fff;
}

.search-bar input {
    flex: 1;
    font-size: 16px;
    color: #202020;
}

.search-bar input::placeholder {
    color: rgba(32, 32, 32, 0.41);
}

.search-bar .search-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 12px;
}

.search-bar .search-btn i {
    font-size: 20px;
    color: #222;
}

.mainPage .search-bar {
    margin: 40px auto 0;
}


.category-wrap {
    padding: 40px 0 56px;
}

.category-wrap .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, 1.5625vw, 32px);
}

.category-item {
    width: 100%;
    width: calc((100% - (32px * 10)) / 11);
    max-width: 96px;
    text-align: center;
    font-size: 16px;
    color: #202020;
}

.category-item img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin-bottom: 12px;
}

@media (max-width: 1024px) {

    .category-wrap {
        padding-top: 24px;
        padding-bottom: 20px;
        margin-bottom: 54px;
    }

    .category-wrap .container {
        gap: 28px 12px;
        justify-content: start;
    }

    .category-item {
        width: calc((100% - (12px * 3)) / 4);
        max-width: unset;
        font-size: 13px;
    }

    .category-item p {
        font-size: 12px;
    }


}

.pickSection {
    margin-top: 40px;
    padding-bottom: 80px;
    margin-bottom: 40px;
}

.pickSection .title-wrap {
    font-size: 28px;
    color: #202020;
    display: flex;
    align-items: center;
    font-weight: bold;
    max-width: unset;
}

.pickSection .title-wrap .title {
    font-size: 28px;
    color: #202020;
    position: relative;
    margin-right: 20px;
    font-weight: bold;
}

.pickSection .title-wrap img {
    position: absolute;
    max-width: 24px;
    top: -6px;
    right: -18px;
}

.pickSection .title-wrap i {
    font-size: 28px;
    color: #202020;
    margin-left: 24px;
}


.pickSection .category-tabs {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-top: 40px;
}

.pickSection .AD {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 20px;
    border: 1px solid #c4c4c4;
    border-radius: 11px;
    text-align: center;
    font-size: 14px;
    color: #c4c4c4;
    margin-left: 12px;
}

.category-tabs .tab-scroll {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    scroll-behavior: smooth;
}

.category-tabs .tab-scroll::-webkit-scrollbar {
    display: none;
}


.category-tabs .tab-btn {
    height: 46px;
    padding: 0 20px;
    border: none;
    background-color: #f8f8f8;
    border: solid 1px #f8f8f8;
    border-radius: 24px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #202020;
    min-width: fit-content;
}

.category-tabs .tab-btn.active {
    background: #fff;
    border: solid 1px #505ea4;
    font-weight: bold;
    color: #505ea4;
}

.pickSection .slide-wrap {
    position: relative;
    margin-top: 24px;
}

.pickSection .global-nav-buttons {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    z-index: 10;
    width: 100%;
}

.pickSection .swiper-button-prev,
.pickSection .swiper-button-next {
    width: 48px;
    height: 48px;
    background-color: #505ea4;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pickSection .swiper-button-prev {
    left: -24px;
}

.pickSection .swiper-button-next {
    right: -24px;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    font-size: 18px !important;
}


.program-card {
    width: 100%;
    max-width: 342px;
    overflow: hidden;
}

.card-img {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.card-img-wrap {
    width: 100%;
    aspect-ratio: 342 / 257; /* 1.33:1 비율 유지 */
    max-height: 257px;
    overflow: hidden;
    border-radius: 24px; /* 예시용 */
    background-color: #f5f5f5; /* 이미지 없을 때 대비 */
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.btn-favorite,
.btn-like {
    position: absolute;
    top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: img 0.3s;
}

.btn-like img {
    width: 22px;
    transition: opacity 0.3s ease;
    opacity: 1;
}

.btn-like img.fade-out {
    opacity: 0;
}

.icon-favorite {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 52px;
}

.btn-like {
    right: 18px;
    color: #999;
}


.card-content {
    padding-top: 16px;
}

.card-tag {
    font-size: 14px;
    color: #959595;
    margin-bottom: 10px;
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    color: #202020;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-rating {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.card-rating .star {
    color: #f5c518;
    margin-right: 4px;
}

.card-rating .score {
    font-size: 14px;
    color: #202020;
}

.card-rating .count {
    font-size: 14px;
    color: #c1c1c1;
    margin-left: 4px;
}

.card-price {
    margin-top: 8px;
    color: #505ea4;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
}

.card-price.hidden {
    display: none;
}

.card-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.card-labels .label {
    background: #eee;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 14px;
    color: #959595;
    min-width: fit-content;
}

.card-content .btn {
    margin-top: 16px;
}

.card-content .btn-full-grey {
    background-color: #e4e4e4;
}

.blueSection {
    background-color: rgba(0, 123, 227, 0.04);
}

.greySection {
    background-color: rgba(0, 0, 0, 0.01);
}


/* NEW 슬라이드 구조 */
.programSection {
    padding: 100px 0;
}

.programSection .program-wrap {
    display: flex;
    gap: 100px;
}

.new-program-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.programSection .title-wrap {
    position: relative;
    min-width: 160px;
    max-width: 200px;
}

.programSection .title-wrap .title {
    font-size: 24px;
    font-weight: bold;
    color: #000;
    margin-bottom: 12px;
}


.programSection .title-wrap .arrow-buttons {
    position: absolute;
    display: flex;
    gap: 8px;
}


.programSection .swiper-button-prev::after,
.programSection .swiper-button-next::after {
    display: none;
}

.programSection .swiper-button-next,
.programSection .swiper-button-prev {
    position: unset !important;
    margin-top: 12px !important;
}

.programSection .title-wrap .arrow-buttons button {
    border: 1px solid #202020;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.programSection .arrow-buttons button i {
    font-size: 16px;
    color: #202020;
}


.new-program-right {
    display: flex;
    align-items: end;
    gap: 24px;
    width: 100%;
    max-width: calc(100% - 350px);
}

.newProgramSwiper,
.recommendProgramSwiper {
    flex: 1;
    overflow: hidden;
}

.newProgramSwiper .swiper-wrapper,
.recommendProgramSwiper .swiper-wrapper {
    display: flex;
}

.programSection .swiper-slide {
    min-height: 220px;
    height: 100%;
    display: flex;
    align-items: center;
}

.more-view-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100%;
    width: 100%;
}

.more-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #202020;
}

.more-view i {
    font-size: 20px;
    color: #202020;
    margin-top: 10px;
}

.programSection .new-badge {
    font-size: 16px;
    font-weight: 500;
    color: #505ea4;
}


.programSection .want-wrap .new-badge {
    color: #ca6743;
}

.programSection .title {
    font-size: 24px;
    font-weight: bold;
    color: #202020;
    min-width: fit-content;
    line-height: 1.33;
}

.programSection .new-wrap .highlight {
    background: linear-gradient(to top, rgba(123, 187, 180, 0.37) 50%, transparent 40%);
    padding-bottom: 1px;
    padding-left: 1px;
    display: inline;
}

.programSection .want-wrap .highlight {
    background: linear-gradient(to top, rgba(202, 103, 67, 0.31) 40%, transparent 40%);
    display: inline;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 2px;
}

.programSection .want-wrap {
    margin-top: 80px;
}


.wanted-card .card-labels {
    margin-top: 16px;
}


.wanted-card .card-sub {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.43;
    min-height: calc((14px * 1.43) * 2);
    color: #202020;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wanted-card .card-date {
    display: flex;
    align-items: center;
    margin-top: 16px;
}


.wanted-card .card-date > * {
    font-size: 14px;
}

.wanted-card .card-date .card-day {
    font-weight: bold;
    color: #505ea4;
}

.wanted-card .card-date span {
    color: #b1b1b1;
    margin: 0 4px;
}

.wanted-card .card-deadLine {
    font-size: 14px;
    color: #b1b1b1;
    font-weight: bold;
}


/* 프모 간략소개 */
.introSection {
    text-align: center;
    padding: 100px 16px;
}

.intro-title {
    font-size: 34px;
    font-weight: bold;
    margin-bottom: 40px;
}

.intro-cards {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.intro-card {
    background-color: #f5f5f5;
    border-radius: 24px;
    padding: 40px 24px;
    width: 100%;
    max-width: 360px;
    text-align: center;
}

.intro-step {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 15px;
    margin-bottom: 24px;
    background-color: #fff;
}

.card-blue {
    background-color: rgba(123, 187, 180, 0.1);
}

.card-blue .intro-step {
    color: #7bbbb4;
    border: solid 1px #7bbbb4;
}

.card-red {
    background-color: rgba(202, 103, 67, 0.05);
}

.card-red .intro-step {
    color: #ca6743;
    border: solid 1px #ca6743;
}

.card-yellow {
    background-color: rgba(214, 199, 76, 0.08);
}

.card-yellow .intro-step {
    color: #d6c74c;
    border: solid 1px #d6c74c;
}

.intro-heading {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
}

.intro-desc {
    font-size: 16px;
    color: #202020;
    line-height: 1.5;
    margin-bottom: 24px;
}

.intro-img img {
    max-width: 256px;
    height: auto;
}

.intro-more-wrap {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.btn-line {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 360px;
    height: 56px;
    padding: 0 8px;
    font-size: 16px;
    font-weight: bold;
    border: solid 1px #505ea4;
    color: #505ea4;
    border-radius: 8px;
}

.btn-line:hover {
    border: solid 1px #505ea4;
    background-color: #505ea4;
    color: #fff;
    transition: background-color 0.3s ease;
}


.review-section .container {
    max-width: 1440px;
}

.review-section .section-title,
.partner-section .section-title {
    font-size: 34px;
    font-weight: bold;
    color: #202020;
    text-align: center;
    margin-bottom: 40px;
}

.review-slider {
    overflow: hidden;
    width: 100%;
    background: #fff;
}

.review-track {
    display: flex;
    gap: 24px;
    animation: scrollLoop 10s linear infinite;
}


/* 핵심: 트랙을 왼쪽으로 계속 흐르게 */
@keyframes scrollLoop {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

.head-title {
    font-size: 56px;
    font-weight: bold;
    color: #202020;
    text-align: center;
}

.sub-title {
    font-size: 24px;
    color: #222;
    text-align: center;
}

.review-section {
    background-color: rgba(0, 0, 0, 0.01);
    padding: 100px 0;
}

.review-section .container {
    max-width: 1484px;
    padding: 0 16px;
}

.review-slide {
    height: 193px; /* 185px + 4px + 4px */
    padding: 4px 0;
}

.review-slide-btm {
    transform: scaleX(-1);
    margin-top: 24px;
}

.review-slide-btm .swiper-slide {
    transform: scaleX(-1);
}

.review-slide .swiper-wrapper {
    transition-timing-function: linear;
}

.review-card {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06);
    background-color: #fff;
    padding: 24px;
    height: 100%;
    min-width: 430px;
    border-radius: 24px;
    overflow: hidden;
}

.review-slide .review-inner-wrap {
    display: flex;
    gap: 16px;
}

.review-slide .review-img-wrap {
    min-width: 100px;
    width: 100px;
    height: 100px;
    aspect-ratio: 1/1;
    border-radius: 10px;
    overflow: hidden;
}

.review-slide .review-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-slide .cate-sitcker {
    width: fit-content;
    height: 22px;
    padding: 3px 8px;
    border-radius: 11px;
    background-color: rgba(0, 123, 227, 0.08);
    font-size: 14px;
    color: #007be3;
}

.review-slide .review-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
}


.review-slide .review-cont-wrap .review-cont {
    font-size: 16px;
    margin-top: 10px;
    min-height: calc((16px * 1.5) * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

.review-slide .review-program {
    font-size: 14px;
    color: #959595;
    text-align: center;
    margin-top: 12px;
}


/* 프모 소개페이지 introPmoSection */
.introPmoSection {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 80px 0 100px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 60px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.feature-item.reverse {
    flex-direction: row-reverse;
}

.feature-img-wrap {
    flex: 1 1 45%;
    border-radius: 24px;
    padding: 40px;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 720px;
}

.feature-img-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
}

.feature-text {
    flex: 1 1 45%;
}

.feature-text .num {
    font-size: 16px;
    font-weight: 600;
    color: #202020;
    margin-bottom: 16px;
}

.feature-text h3 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 24px;
}

.feature-text .desc {
    color: #444;
    font-size: 16px;
    line-height: 1.6;
}

/* 컬러별 배경 */
.color01 {
    background-color: #f1f8f7;
}

.color02 {
    background-color: #fdf7f5;
}

.color03 {
    background-color: #fcfbf1;
}


.introRegister {
    padding: 100px 0;
}

.introRegister .head-title {
    font-size: 34px;
    margin-bottom: 24px;
}

.introRegister .sub-title {
    font-size: 16px;
    color: #202020;
    text-align: center;
    line-height: 1.5;
}


.introRegister .info-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 40px;
    margin-top: 32px;
}

.introRegister .info-card {
    width: 100%;
    max-width: 348px;
    background: #fff;
    border-radius: 24px;
    border: solid 1px rgba(0, 0, 0, 0.07);
    padding: 58px 24px 24px;
    text-align: left;
}

.introRegister .info-card img {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
}

.introRegister .info-card h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
}

.introRegister .info-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}

.introRegister .register-btn-wrap {
    text-align: center;
}

.introRegister .btn-register {
    border-radius: 10px;
    font-size: 15px;
    max-width: 360px;
    height: 56px;
    margin: 0 auto;
}

.introRegister .btn-register:hover {
    background-color: #3c4fb2;
}


/* 프로그램 등록 안내 페이지 */
.registerGuideSection {
    padding-top: 80px;
    padding-bottom: 120px;
}

.registerGuideSection .sub-title {
    margin-top: 32px;
    margin-bottom: 54px;
}


.registerGuideSection .container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.registerGuideSection .info-box {
    border: solid 1px #e4e4e4;
    border-radius: 16px;
    padding: 34px 60px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.registerGuideSection .info-box .icon {
    width: 75px;
    flex-shrink: 0;
}

.registerGuideSection ul {
    max-width: 931px;
}

.registerGuideSection li {
    position: relative;
    padding-left: 8px;
    font-size: 16px;
    color: #202020;
    line-height: 1.5;
}

.registerGuideSection li:not(:last-child) {
    margin-bottom: 16px;
}

.registerGuideSection li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 2px;
    height: 2px;
    background-color: #202020;
    border-radius: 50%;
}

.registerGuideSection small {
    display: block;
    color: #959595;
    font-size: 15px;
    margin-top: 8px;
    line-height: 1.6;
}


.searchResultSection {
    padding-top: 100px;
    padding-bottom: 120px;
}

.searchResultSection .cateTitle {
    font-size: 56px;
    font-weight: bold;
    color: #202020;
    text-align: center;
}

.search-result-wrap {
    display: flex;
    gap: clamp(24px, 3.125vw, 60px);
    margin-top: 60px;
}

.search-result-wrap .area-top-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.search-result-wrap .area-top-wrap .check-mark {
    border-radius: 50%;
    width: 18px;
    height: 18px;
}

.search-result-wrap .area-top-wrap .filter-group {
    padding-bottom: unset;
    margin-bottom: unset;
    border-bottom: unset;
}

.area-top-wrap .filter-group .custom-checkbox {
    font-size: 14px;
}

.area-top-wrap .filter-group .custom-checkbox input:checked + .check-mark::after {
    font-size: 10px;
}

.filter-area {
    width: 200px;
    flex-shrink: 0;
}

.filter-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #222;
}


.filter-head .buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-head .btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
}

.filter-head img {
    width: 16px;
}

.filter-head .filter-search-btn {
    background-color: #505ea4;
}

.filter-head .filter-reset-btn {
    background-color: #b7b7b7;
}

.filter-head .filter-reset-btn img {
    width: 14px;
}


.filter-reset-btn {
    font-size: 16px;
    color: #b7b7b7;
    display: flex;
    align-items: end;
}

.filter-reset-btn i {
    margin-left: 4px;
    font-size: 16px;
}

.filter-area h2 {
    font-size: 24px;
    font-weight: bold;
}

.filter-group {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e4e4e4;;
}

.filter-group strong {
    display: block;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 16px;
}

.filter-group label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #222;
    cursor: pointer;
}

.filter-group label:not(:last-child) {
    margin-bottom: 16px;
}

.filter-group input[type="checkbox"],
.filter-group input[type="radio"] {
    margin-right: 6px;
}

.filter-group select {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 10px;
    border: solid 1px #e4e4e4;
    background-color: #fff;
}

.filter-group select.top {
    margin-bottom: 8px;
}

.card-area {
    flex-grow: 1;
}

.result-count {
    font-size: 16px;
}

.result-count.mb-16 {
    margin-bottom: 16px;
}

.result-count strong {
    font-weight: bold;
    color: #505ea4;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 48px 24px;
}

.card-img-wrap img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}


.filter-group .custom-radio,
.filter-group .custom-checkbox,
.inquirySection .custom-checkbox {
    display: flex;
    align-items: center;
    font-size: 15px;
    cursor: pointer;
    font-weight: 500;
}

.filter-group .custom-radio:not(:last-child),
.filter-group .custom-checkbox:not(:last-child) {
    margin-bottom: 10px;
}


/* 라디오 스타일 */
.radio-mark {
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #f5f5f5;
    margin-right: 8px;
    position: relative;
}

.custom-radio input:checked + .radio-mark {
    background-color: #505ea4;
}

.custom-radio input:checked + .radio-mark::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

/* 체크박스 스타일 */
.check-mark {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background-color: #f5f5f5;
    margin-right: 8px;
    position: relative;
    flex-shrink: 0;
}

.custom-checkbox input:checked + .check-mark {
    background-color: #505ea4;
}

.custom-checkbox input:checked + .check-mark::after {
    content: '\e928';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'xeicon';
    font-size: 16px;
    color: #fff;
}

@media screen and (max-width: 1280px) {
    .filter-area {
        display: none;
    }
}

.programSwiper {
    width: 100%;
    aspect-ratio: 1920 / 300;
    min-height: 160px;

}

.programSwiper .swiper-slide {
    width: 100%;
}

.programSwiper .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.programSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 페이지네이션 스타일 */
.programSwiper .swiper-pagination {
    text-align: center;
}

.programSwiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 1;
    width: 8px;
    height: 8px;
    margin: 0 3px !important;
}

.programSwiper .swiper-pagination-bullet-active {
    background-color: #505ea4;
}


.programBoard .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.programBoard .cateTitle {
    font-size: 40px;
}


.program-detail {
    display: flex;
    flex-wrap: wrap;
    max-width: 1320px;
    margin: 40px auto 56px;
    gap: 48px;
    padding: 0 20px;
}

.program-detail .program-image-section {
    width: 100%;
    max-width: 592px;
    display: flex;
    flex-direction: column;
}

.program-detail .main-image {
    width: 592px;
    height: 592px;
    overflow: hidden;
    border-radius: 24px;
}

.program-detail .main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 24px;
}

.program-detail .thumbnailSwiper {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 8px;
    justify-content: center;
    align-items: center;
}

.program-detail .thumb {
    width: 88px;
    flex: 0 0 auto;
    height: 88px;
    object-fit: cover;
    border-radius: 8px;
    opacity: 0.4;
    cursor: pointer;
    transition: 0.2s ease;
}

.program-detail .thumb.active {
    opacity: 1;
}


.thumbnailSwiper .swiper-slide {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.thumb.active {
    opacity: 1;
}

.program-detail .btn-like.active {
    background-color: #ee2424;
}


.program-detail .info-box {
    flex: 1 1 480px;
    display: flex;
    flex-direction: column;
    z-index: 0;
    position: relative;
    pointer-events: none;
    user-select: none;
}

.program-detail .info-box::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 110%; /* 화면 전체 너비를 기준으로 설정 */
    height: 110%; /* 화면 전체 높이 */

    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* 퍼지는 느낌 주기 위해 외곽 mask */
    mask-image: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 1) 100%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 1) 100%,
        rgba(0, 0, 0, 0.5) 100%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;

}


.hidden-tab {
    z-index: 0;
    position: relative;
    pointer-events: none;
    user-select: none;
}


.hidden-tab::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 101%;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* 퍼지는 느낌 주기 위해 외곽 mask */
    mask-image: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 1) 100%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 1) 100%,
        rgba(0, 0, 0, 0.5) 100%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;

}


.program-detail .info-box.visible,
.hidden-tab.visible {
    pointer-events: unset;
    user-select: unset;
}

.program-detail .info-box.visible::before,
.hidden-tab.visible::before {
    position: unset;
    width: unset;
    height: unset;
    background-color: unset;
    backdrop-filter: unset;
    z-index: unset;
}


@media screen and (max-width: 1280px) {
    .hidden-tab::before {
        left: 0px;
    }
}

.program-detail .info-box h2 {
    font-size: 24px;
    margin-bottom: 12px;
}

.program-detail .info-box .tags,
.modal-content .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.program-detail .info-box .tag,
.detail-cont-wrap .tag,
.modal-content .tag {
    background: #eceef5;
    color: #fff;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 4px;
}

.program-detail .tags .state,
.detail-cont-wrap .tags .state,
.modal-content .tags .state {
    background-color: #eb3131;
}

.program-detail .tags .pick,
.detail-cont-wrap .tags .pick,
.modal-content .tags .pick {
    background-color: #007be3;
}

.program-detail .tags .category,
.detail-cont-wrap .tags .category,
.modal-content .tags .category {
    background-color: #202020;
}

.program-detail .tags .state-close,
.detail-cont-wrap .tags .state-close,
.modal-content .tags .state-close {
    background-color: #959595;
}

.program-detail .host {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    opacity: 0.6;
    text-decoration: underline;
    margin-bottom: 16px;
}

.program-detail .program-title {
    font-size: 14px;
    color: #333;
}

.program-detail .program-sub {
    font-size: 14px;
    color: #222;
    opacity: 0.8;
    line-height: 1.5;
}

.program-detail .info-top-wrap {
    padding-bottom: 24px;
    border-bottom: 1px solid #e4e4e4;
    margin-bottom: 24px;
}

.program-detail .info-box ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.program-detail .info-box li {
    margin-bottom: 13px;
    font-size: 15px;
}

.program-detail .info-box .buttons {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.program-detail .info-box .buttons button {
    flex: 1;
    font-size: 20px;
    cursor: pointer;
}


.program-detail .btn-secondary {
    background: #f5f5f5;
}

.program-detail .btn-line {
    height: 64px;
}

.program-detail .btn-like-detail {
    position: unset;
    top: unset;
    width: 64px;
    max-width: 64px;
    height: 64px;
    border-radius: 8px;
    background-color: #ccc;
}

.program-detail .btn-like-detail img {
    width: 32px;
}

.program-detail .btn-like-detail.active {
    background-color: #ee2424;
}

.program-detail .list-icon {
    font-size: 16px;
    color: #959595;
    margin-right: 16px;
    line-height: 1.2;
}

.program-detail .program-info-list li {
    display: flex;
    align-items: start;
    font-size: 16px;
    color: #222;
}

.program-detail .program-info-list strong {
    font-weight: 600;
    margin-right: 32px;
    min-width: fit-content;
}

.program-detail .blue-txt {
    color: #007be3;
    margin-right: 8px;
}

.program-detail .program-info-list .bar {
    display: flex;
    height: 18px;
    width: 1px;
    background-color: #f5f5f5;
    margin: 0 12px;
}

.program-detail .program-info-list .list-inner-wrap {
    display: flex;
    align-items: center;
}

.program-detail .program-info-list .list-inner-wrap span {
    font-weight: 500;
    margin-right: 8px;
}


/* page-tab */
.page-tab {
    width: 100%;
    max-width: 1320px; /* 1280 */
    margin: 0 auto;
    padding: 0 20px;
}

.page-tab .detail-tab-nav {
    display: flex;
    justify-content: space-between;
    border-radius: 20px;
    overflow: hidden;
    background: #f6f6f6;
}

.page-tab .detail-tab-nav ul {
    display: flex;
    width: 100%;
}

.page-tab .detail-tab-nav li {
    flex: 1;
    text-align: center;
    background: #f6f6f6;
    color: #222;
    padding: 16px 0;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s, color 0.3s;
}

.page-tab .detail-tab-nav li.active {
    background: #1a1a1a;
    color: #fff;
}

.page-tab .detail-cont-wrap {
    padding-top: 40px;
}

.page-tab .detail-cont-wrap:not(:last-child) {
    padding-bottom: 40px;
    border-bottom: 1px solid #e4e4e4;
}


.page-tab .cont-box:not(:last-child) {
    margin-bottom: 40px;
}

.page-tab .cont-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

.page-tab .cont-title .bar {
    width: 6px;
    height: 28px;
    background-color: #4F61D6; /* 파란색 */
    border-radius: 10px;
}

.page-tab .cont-title h2 {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin: 0;
}

.page-tab .box-title {
    font-size: 24px;
    font-weight: bold;
    color: #222;
    margin-bottom: 16px;
}

.page-tab .box-list-txt {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-tab .box-txt {
    font-size: 16px;
    color: #222;
    opacity: 0.8;
    line-height: 1.5;
}

.page-tab .box-txt span {
    margin-right: 4px;
}

.file-download-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.file-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 16px;
    border-radius: 4px;
    background-color: #e6f3ff;
}

.file-box span {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    line-height: 1.5;
}

.file-box .file-icon {
    width: 20px;
}

.file-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-right {
    font-size: 18px;
    color: #007bff;
}


/* 미디어 */
.video-cont-wrap {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.video-wrap {
    width: 100%;
    max-width: 411px;
    border-radius: 16px;
    border: 1px solid #f5f5f5;
}

.video-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
}

/* ▶ 원형 배경 + 삼각형 아이콘 */
.video-thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    background-color: rgba(0, 0, 0, 0.6); /* 반투명 원형 배경 */
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.video-thumb::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent white;
    transform: translate(-45%, -50%);
    z-index: 1;
}

.page-tab .img-cont-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.page-tab .img-cont-wrap .img-wrap {
    position: relative;
    width: 100%;
    max-width: 302px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #f5f5f5;
    cursor: pointer;
}


.page-tab .img-cont-wrap .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* 미디어 모달  */
.media-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.media-modal-content {
    position: relative;
    width: 100%;
    max-width: 1024px;
    aspect-ratio: 16 / 9;
    display: flex;
}

.media-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 48px;
    height: 48px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}


#reviewThumModal .media-modal-content {
    aspect-ratio: inherit;
}


.media-modal-close i {
    font-size: 24px;
    color: #fff;
}

.media-content-area {
    position: relative;
    width: 100%;
    height: 100%;
}

.media-content-area iframe,
.media-content-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.media-content-area img {
    object-fit: fill;
}


.review-cont-wrap .review-wrap {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;

}

.review-cont-wrap .review-item {
    display: flex;
    justify-content: space-between;
    gap: 34px;
    padding: 32px;
    border-radius: 16px;
    border: solid 1px #e4e4e4;
    background-color: #fff;
}

.review-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.star-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
}

.star-wrap img {
    min-width: 16px;
}

.review-rating .score {
    font-size: 14px;
    font-weight: bold;
    color: #202020;
}

.review-cont-wrap .review-info-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-cont-wrap .review-cont {
    font-size: 16px;
    line-height: 1.5;
    color: #202020;
    min-height: calc((16px * 1.5) * 3);
    margin: 16px 0;
    max-width: 1072px;
}

.review-cont-wrap .review-info-wrap .user {
    font-size: 16px;
    font-weight: bold;
    color: #202020;
}

.review-cont-wrap .review-info-wrap .date {
    font-size: 14px;
    color: #202020;
}

.review-thumbnail {
    position: relative;
    width: 100px;
    height: 100px;
    min-width: 100px;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.review-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-thumbnail .img-count {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
}

.review-head {
    border-radius: 16px;
    background-color: #007be3;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 16px;
}

.review-head img {
    max-width: 32px;
}

.review-head .txt {
    color: #fff;
    font-size: 18px;
}

.page-tab .review-cont-wrap .cont-title {
    margin-bottom: 20px;
}

.review-item {
    display: none !important;
}

.review-item.visible {
    display: flex !important;
}

.review-more-btn-wrap {
    margin-top: 24px;
}

.review-more-btn-wrap .review-more-btn {
    width: 100%;
    height: 56px;
    padding: 0 12px;
    text-align: center;
    border-radius: 8px;
    border: solid 1px #222;
    background-color: #fff;
    font-size: 17px;
    font-weight: bold;
    color: #202020;
}


.empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background-color: #f5f5f5;
    border-radius: 16px;
}

.empty-box .x-icon {
    font-size: 40px;
    color: #bdbdbd;
    margin-bottom: 10px;
}

.empty-box .text {
    font-size: 16px;
    color: #bdbdbd;
    text-align: center;
}


/* 회원가입  userSection */

.userSection {
    text-align: center;
    padding: 80px 0 120px;
}

.userSection .page-title {
    font-size: 40px;
    font-weight: bold;
    color: #222;
}

.userSection .page-sub {
    margin-top: 24px;
    font-size: 16px;
    color: #222;
}

.userSection .cont-wrap {
    margin: 0 auto;
    width: fit-content;
}

.join-cont-wrap {

}

.join-cont-wrap .box-wrap {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.join-cont-wrap .join-box {
    width: 100%;
    max-width: 360px;
    border-radius: 24px;
    padding: 56px 32px 32px;
}

.join-cont-wrap .join-icon {
    max-width: 139px;
}

.join-cont-wrap .type-02 .join-icon {
    max-width: 159px;
}

.join-cont-wrap .join-box {
    border: solid 1px #e4e4e4;
    background-color: #fff;
}


.join-cont-wrap .type-01:hover {
    background-color: rgba(176, 238, 0, 0.1);
    border: unset;
}

.join-cont-wrap .join-box:hover .bgBtn {
    background-color: #fff;
    color: #505ea4;
    border: unset;
}


.join-cont-wrap .type-02:hover {
    background-color: #F0F5FF;
    border: unset;
}


.join-cont-wrap .box-title {
    font-size: 23px;
    font-weight: bold;
    color: #202020;
    margin-top: 32px;
}

.join-cont-wrap .box-sub {
    font-size: 16px;
    color: #202020;
    margin-top: 24px;
    opacity: 0.7;
    line-height: 1.5;
}

.join-cont-wrap .btn-join {
    width: 100%;
    height: 52px;
    border-radius: 8px;
    background-color: #fff;
    font-size: 16px;
    font-weight: bold;
    color: #505ea4;
    margin-top: 40px;
}

.join-cont-wrap .bgBtn {
    border: solid 1px #505ea4;
    background-color: #505ea4;
    color: #fff;
}


/* 로그인 */
.formSection {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px - 291px);
    /* height: 100vh; */
    padding: 0 20px;
}

.auth-panel {
    /* width: 100%; */
    width: calc(100% - 32px);
    max-width: 520px;
    height: fit-content;
    text-align: center;
    /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
    margin-top: 80px;
    margin-bottom: 104px;
}

.auth-heading {
    font-size: 40px;
    color: #222;
    font-weight: bold;
}

.auth-heading .side-sub {
    font-size: 14px;
    font-weight: bold;
    color: #ed1515;
    margin-left: 16px;
}

.auth-description {
    font-size: 17px;
    color: #202020;
    margin-top: 24px;
    line-height: 1.7;
}

.form-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
}

.input-inner-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-com-wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}


.input-wrap {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 16px;
}


.input-col-wrap {
    display: flex;
    align-items: start;
    gap: 40px;
}

.input-col-wrap .input-wrap {
    width: 100%;
    max-width: 520px;
    gap: 8px;
}


.input-col-wrap .input-wrap.wide {
    max-width: unset;
}

.form-input[readonly] {
    background-color: #f5f5f5;
}


.date-range {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 520px;
}

.form-input[type="date"] {
    flex: 1;
    min-width: 140px;
}

.w-520 {
    max-width: 520px;
}

.user-chk {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

.user-chk .text {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    opacity: 0.5;
}

.register-box .input-col-wrap .input-guide {
    margin-top: unset;
}


.form-input {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    height: 52px;
    color: #202020;
    font-size: 16px;
}

.form-input::placeholder {
    font-size: 16px;
    color: #aeaeae;
}

.count-input-wrap {
    position: relative;
}

.form-input-group {
    position: relative;
    width: 100%;
}


.input-inner-wrap .btn {
    max-width: 154px;
}

.view-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 20px;
    color: #aeaeae;
    cursor: pointer;
}

.form-chk-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.formSection input[type="checkbox"] {
    display: flex;
}


.form-check {
    font-size: 14px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-submit-btn {
    background-color: #2d3e1f;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

.auth-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    font-size: 13px;
}

.auth-link {
    margin-left: 4px;
    text-decoration: none;
}

.auth-link > span {
    font-weight: bold;
}


.view-btn .x-icon::before {
    content: ''; /* 기본 눈 감김 아이콘 */
}

.view-btn.active .x-icon::before {
    content: ''; /* 눈 뜸 아이콘 */
}


/* 회원가입 */
.join-wrap {
    margin-top: 120px;
    min-height: calc(100vh - 120px - 291px);
}

.join-wrap .stepProgress {
    margin-bottom: 80px;
}

.joinSection {
    position: unset;
}

.joinSection .auth-heading {
    margin-bottom: 24px;
}

.joinSection .auth-panel {
    position: unset;
    transform: unset;
}

.joinSection .auth-sub {
    font-size: 16px;
    color: #222;
    line-height: 1.5;
}

.joinSection .auth-sub-sm {
    font-size: 14px;
    color: #222;
    margin-top: 8px;
    padding-bottom: 40px;
    border-bottom: 1px solid #222;
}

.joinSection .auth-sub-sm.top {
    padding-bottom: unset;
    border-bottom: unset;
}


.join-wrap {
    padding-bottom: 80px;
}

.join-wrap .formSection {
    min-height: unset;
}

.joinSection .filter-group {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-bottom: unset;
    border: unset;
}

.joinSection .custom-radio:not(:last-child) {
    margin-bottom: unset;
}

.joinSection .file-box {
    margin-top: 12px;
}


.form-guide {
    font-size: 14px;
    font-weight: 500;
    margin-top: -8px;
}

.form-guide.success {
    color: #00b505;
}

.form-guide.error {
    color: #ed1515;
}


.joinSection input[type="checkbox"] {
    display: none;
}

.check-icon {
    width: 24px;
    height: 24px;
    border: 1px solid #e4e4e4;
    border-radius: 2px;
    display: inline-block;
    background-color: #fff;
    position: relative;
    flex-shrink: 0;
    padding: 1px 2px;
    transition: all 0.3s;
}

.check-icon .chk-icon {
    font-size: 16px;
    color: #aeaeae;
    line-height: 21px;
}

input:checked + .check-icon {
    border: solid 1px #007be3;
    background-color: #007be3;
}

input:checked + .check-icon .chk-icon {
    color: white;
}

input:checked ~ .text {
    opacity: unset;
}


.agree-box {
    font-size: 16px;
    color: #000;
    margin-top: 8px;
    padding-bottom: 24px;
    border-bottom: 1px solid #222;
}

.agree-box .box-title {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    text-align: left;
    margin-bottom: 16px;
}

.agree-box strong {
    font-weight: 600;
}

.agree-all,
.agree-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.agree-all {
    font-size: 17px;
    border-radius: 8px;
    background-color: #f5f5f5;
    padding: 12px 16px;
}


.agree-items {

}

.agree-item {
    position: relative;
    justify-content: start;
    padding: 12px 16px;
}

.agree-item:last-child {
    margin-bottom: 0;
}

.agree-box .text {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    opacity: 0.5;
}

.agree-item .link {
    position: absolute;
    right: 0;
    color: #202020;
    text-decoration: underline;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
}


.joinSection .form-btn-wrap {
    width: 100%;
    margin-top: 16px;
}

.top-line {
    padding-top: 24px;
    border-top: 1px solid #222;
}


.form-wrap .btn-disabled {
    width: 100%;
    border-radius: 4px;
    background-color: #e4e4e4;
    height: 52px;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
}

.form-wrap .btn-active {
    width: 100%;
    border-radius: 4px;
    height: 52px;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    background-color: #505ea4;
}

.form-wrap .btn-reSend {
    background-color: #707070;
}

.form-wrap .add-input-wrap {
    margin-top: -8px;
}


.auth-heading {
    font-size: 32px;
    color: #202020;
}

.auth-heading .side-sub {
    font-size: 14px;
    font-weight: bold;
    color: #ed1515;
    margin-left: 16px;
}

.auth-description {
    font-size: 17px;
    color: #202020;
    margin-top: 24px;
    line-height: 1.7;
}


.input-title {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.input-title.required:after {
    position: absolute;
    content: "*";
    color: #ed1515;
    font-size: 16px;
    font-weight: bold;
    margin-left: 4px;
}

.input-title.re-type {
    display: flex;
    align-items: end;
    gap: 8px;
}

.input-title.re-type.required:after {
    right: -10px;
}

.input-side-sub {
    position: absolute;
    font-size: 12px;
    color: #707070;
    margin-left: 20px;
    width: max-content;
    font-weight: normal;
    padding-top: 5px;
}


.joinSection .input-side-sub,
.edit-form-wrap .input-side-sub {
    margin-left: 55px;
}

.joinSection .input-side-sub.ml-100 {
    margin-left: 100px;
}


@media screen and (max-width: 1280px) {

    .joinSection .input-side-sub.ml-100 {
        margin-left: 0px;
    }

    .form-wrap .add-input-wrap {
        margin-top: unset;
    }

    .joinSection .file-box {
        margin-top: 8px;
    }

    .file-box {
        padding: 0 16px;
        height: 48px;
    }

    .file-box i {
        font-size: 14px;
    }

}


.red-txt {
    color: #eb3131;
}

.blue-txt {
    color: #505ea4;
}

.formSection .divi-line {
    width: 100%;
    height: 1px;
    background-color: #222;
    margin-top: 16px;
}


.consumer .auth-sub-sm {
    border-bottom: unset;
}


.step-indicator {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 120px;
    padding-bottom: 40px;
    border-bottom: 1px solid #222;
}

.step-indicator .step-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-indicator .circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #505ea4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 18px;
    color: #505ea4;
    background-color: transparent;
    z-index: 1;
}

.step-indicator .step-item.active .circle {
    background-color: #505ea4;
    color: #fff;
}

.step-indicator .step-label {
    font-size: 14px;
    color: #505ea4;
    margin-top: 8px;
    text-align: center;
}

.step-indicator .step-title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 8px;
    color: #505ea4;
}

/* 선을 원 기준으로 오른쪽으로 배치 */
.step-indicator .step-line {
    position: absolute;
    top: 24%;
    left: 90%;
    transform: translateY(-50%);
    height: 3px;
    width: 134px;
    background-color: #4d5ca4;
    border-radius: 3px;
}

.joinSection .select-group {
    width: 100%;
    gap: 8px;
    margin-bottom: unset;
}


.joinSection .select-group select {
    min-width: unset;
}

.joinSection .btn-file {
    background-color: #707070;
    border-radius: 8px;
    height: 52px;
    font-size: 16px;
    color: #fff;
}

.joinSection.consumer .agree-box {
    padding-top: 24px;
    border-top: 1px solid #222;
}


/* 광고 문의하기  ad-inquiry */

.adInquiry .auth-sub-sm {
    line-height: 1.57;
}

.adInquiry .agree-box {
    padding-top: 24px;
    border-top: 1px solid #222;
}


.radio-group {
    display: flex;
    gap: 10px;
}


.position-item-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.position-item,
.radio-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 10px;
    width: 168px;
    border-radius: 8px;
    border: solid 1px #e4e4e4;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 20px;
    color: #888;
}

.position-item {
    width: unset;
    width: calc((100% - (8px * 1)) / 2);
}

.position-item .check-icon,
.radio-item .check-icon {
    font-size: 19px;
    color: #ccc;
    margin-bottom: 10px;
    width: unset;
    height: unset;
    border: unset;
    color: rgba(32, 32, 32, 0.24);
    background-color: unset;
}

.position-item .label-text,
.radio-item .label-text {
    font-size: 16px;
    color: rgba(32, 32, 32, 0.6);
}

.position-item.pick-position {
    position: relative;
    border: solid 1px #202020;
}

.position-item .badge,
.radio-item .badge {
    position: absolute;
    width: 72px;
    height: 24px;
    top: -12px;
    left: 10px;
    background: #202020;
    color: #fff;
    border-radius: 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.position-item:has(input[type="radio"]:checked),
.radio-item:has(input[type="radio"]:checked),
.program-type-group .radio-item:has(input[type="checkbox"]:checked) {
    background-color: #202020;
}


.position-item input:checked ~ .check-icon,
.radio-item input:checked ~ .check-icon {
    color: #fff;
}

.position-item input:checked ~ .check-icon,
.radio-item input:checked ~ .check-icon {
    color: #fff;
    border: unset;
    background-color: unset;
}

.position-item input:checked ~ .label-text,
.radio-item input:checked ~ .label-text {
    color: #fff;
}

.position-item input:checked ~ .check-icon,
.position-item input:checked ~ .label-text,
.radio-item input:checked ~ .check-icon,
.radio-item input:checked ~ .label-text {
    z-index: 2;
}

.position-item input:checked ~ .badge,
.radio-item input:checked ~ .badge {
    z-index: 3;
    background-color: #fff;
    border: solid 1px #202020;
    color: #202020;
}

.position-item input:checked ~ .badge + .check-icon + .label-text,
.radio-item input:checked ~ .badge + .check-icon + .label-text {
    color: #fff;
}


.ad-pariod-group {
    width: 100%;
    margin-top: unset;
}

.ad-pariod-group .position-item {
    width: 100%;
    padding: 16px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ad-pariod-group .check-icon {
    margin-bottom: unset;
    margin-right: 10px;
}


.period-input-wrap .pariod-type-day {
    width: 100%;
}

.pariod-type-month,
.service-local-wrap {
    display: none;
}


.textarea-wrap {
    position: relative;
    width: 100%;
}

.textarea-wrap textarea {
    padding: 16px;
    width: 100%;
    font-size: 16px;
    height: 200px;
    border-radius: 8px;
    border: solid 1px #e4e4e4;
    background-color: #fff;
}

.textarea-wrap textarea.h-52 {
    height: 52px;
}

.textarea-wrap textarea.h-123 {
    height: 123px;
}

.textarea-wrap textarea::placeholder {
    font-size: 16px;
    color: #202020;
    opacity: 0.4;
}

.char-count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 14px;
    color: #888;
}

.char-count .current-count {
    color: #202020;
}

.char-mid-count {
    top: 50%;
    bottom: unset;
    transform: translateY(-50%);
}


.btn-full {
    border-radius: 8px;
    background-color: #505ea4;
    height: 56px;
    padding: 0 8px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
}

.btn-full-grey {
    border-radius: 8px;
    background-color: #959595;
    height: 56px;
    padding: 0 8px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}


.collabInquiry .textarea-wrap {
    margin-bottom: 14px;
}

.collabInquiry .form-btn-wrap {
    margin-top: unset;
}


.findSection .auth-sub-sm {
    line-height: 1.5;
}


.resultSection .auth-panel {
    max-width: unset;
}

.resultSection .auth-heading {
    font-size: 40px;
}

.findSection .auth-heading.line {
    border-bottom: 1px solid #000;
    padding-bottom: 40px;
}

.resultSection .success-check {
    font-size: 48px;
    color: #505ea4;
    margin-bottom: 24px;
}

.resultSection .result-cont {
    font-size: 18px;
    color: #222;
    line-height: 1.44;
}

.resultSection .result-cont .program {
    display: inline-block;
    font-size: 18px;
    color: #222;
    line-height: 1.44;
}

.resultSection .form-btn-wrap {
    max-width: 320px;
    margin: 40px auto 0;
}

.resultSection .call-txt {
    display: block;
    font-weight: bold;
    margin-top: 16px;
}

.resultSection .type-part,
.resultSection .type-part .user {
    font-weight: unset;
}

.resultSection .type-part span {
    font-weight: bold;
}

.resultSection .result-link {
    font-size: 18px;
    color: #222;
    line-height: 1.44;
    text-decoration: underline;
    margin-top: 32px;
}

.joinSection .find-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
    border-bottom: 1px solid #222;
}

.joinSection .find-btn-wrap .divi-bar {
    height: 19px;
    width: 1px;
    background-color: #e4e4e4;
    margin: 0 16px;
}

.joinSection .find-btn-wrap .find-link {
    font-size: 16px;
    color: #949599;
}

.joinSection .join-move-box .txt {
    font-size: 18px;
    color: #222;
}

.joinSection .join-move-box .blue-txt {
    font-weight: 600;
}

.joinSection .join-move-box .form-btn-wrap {
    margin-top: 24px;
}

.joinSection .join-move-box .btn-line {
    max-width: unset;
    border: solid 2px #505ea4;
}


/* 프로그램 등록 attentionSection */

.registerSection .form-wrap {
    gap: 32px;
}

.attention-box {
    padding: 32px 40px;
    border-radius: 16px;
    border: solid 1px #e4e4e4;
    max-width: 1080px;
    margin: 40px auto 0;
}

.attention-box .attention-icon {
    font-size: 24px;
    color: #eb3131;
    margin-bottom: 8px;
}

.attention-box .attention-title {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    margin-bottom: 24px;
}

.attention-box .item-sub {
    font-size: 15px;
    color: #222;
    margin: 8px 0;
    text-align: left;
    line-height: 1.47;
    padding-left: 15px;
}

.attention-box .item-list-wrap {
    padding-left: 15px;
    text-align: left;
}

.attention-box .item-list {
    font-size: 15px;
    color: #222;
    line-height: 1.47;
}

.attention-item {
    margin-top: 24px;
}

.attention-item .item-title span {
    font-size: 8px;
    color: #222;
    margin-right: 8px;
}

.attention-item .item-title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    text-align: left;
}

.attention-item .item-cont {
    margin-top: 8px;
    border-radius: 10px;
    background-color: #f5f5f5;
    padding: 16px;
    padding-right: 24px;
    text-align: left;
    font-size: 15px;
    line-height: 1.6;
    color: #222;
    max-height: 152px;
    overflow-y: scroll;
}

.attention-item .item-cont::-webkit-scrollbar {
    display: flex;
}

.attention-box .agree-item {
    border-radius: 8px;
    background-color: #f5f5f5;
    margin-top: 24px;
}


.register-box {
    max-width: 1080px;
    margin: 60px auto 0;
}

.register-box .box-title {
    font-size: 24px;
    font-weight: 500;
    color: #222;
    text-align: left;
}

.register-box .input-guide {
    font-size: 14px;
    opacity: 0.6;
    color: #202020;
    margin-top: -8px;
}

.image-upload-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    overflow: hidden;
}

.upload-box {
    width: 104px;
    height: 104px;
    border-radius: 4px;
    border: solid 1px #e4e4e4;
    background-color: #f5f5f5;
    color: #007bff;
    font-size: 14px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    flex-shrink: 0;
}

.upload-box i {
    font-size: 18px;
    margin-bottom: 8px;
}

.upload-box span {
    font-size: 14px;
    font-weight: bold;
}


.thumbnail-list {
    display: flex;
    gap: 8px;
    overflow-x: scroll;
}

.thumbnail {
    width: 104px;
    height: 104px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumbnail .remove-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: #fff;
    width: 24px;
    height: 24px;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}

.attentionSection .filter-group,
.userSection .filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: unset;
    padding-bottom: unset;
    width: 100%;
    border-bottom: unset;
}


.attentionSection .filter-group select,
.userSection .filter-group select {
    min-width: unset;
    max-width: 256px;
}

.filter-select-list {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: scroll;
}

.filter-select-list .select-item {
    padding: 16px;
    border-radius: 4px;
    background-color: #f5faff;
    height: 52px;
    min-width: fit-content;
    font-size: 16px;
    font-weight: 500;
    color: #007be3;
}

.filter-select-list .select-item i {
    font-size: 16px;
    margin-left: 16px;
    color: #202020;
}

.program-type-group,
.local-type-group {
    width: 100%;
}

.program-type-group .radio-item,
.local-type-group .radio-item {
    flex-direction: row;
    gap: 10px;
    width: 100%;
    max-width: 168px;
    height: 52px;
}

.program-type-group .check-icon,
.local-type-group .check-icon {
    margin-bottom: unset;
}

.program-type-group .radio-item {
    flex-direction: row;
    gap: 10px;
    width: 100%;
    max-width: 168px;
    height: 52px;
}


.service-local-wrap {
    margin-top: 16px;
}

.service-local-wrap .filter-select-list {
    margin-top: 8px;
}


.registerSection .divi {
    display: flex;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    margin: 32px 0;
}

.editor-wrap {
    width: 100%;
}

.cke_editor_editor,
.cke_editor_editor2 {
    height: 600px !important;
}

.input-video-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.registerSection .form-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    margin-top: 40px;
}

.registerSection .form-btn-wrap .btn {
    width: 100%;
    max-width: 320px;
}


.portfolioSection .filter-group {
    gap: 40px;
}

.portfolioSection .custom-radio:not(:last-child) {
    margin-bottom: unset;
}

.portfolioSection .mid {
    margin-top: 40px;
}


/* 마이페이지 mySection */

.mySection {
    margin-top: 60px;
    padding-bottom: 120px;
}

.mySection .container {
    max-width: 1280px;
}

.my-container {
    display: flex;
    gap: clamp(12px, 3.125vw, 40px);
    margin-top: 60px;
}

.my-content {
    flex-grow: 1;
    max-width: 1020px;
}

.my-content .cont-title {
    font-size: 24px;
    font-weight: bold;
    color: #202020;
    margin-bottom: 24px;
}

.my-content .cont-sub {
    font-size: 16px;
    color: #202020;
}

.my-content .cont-sub .num {
    font-weight: bold;
    color: #505ea4;
}

.mySection .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 24px;
}

.btn-my-review {
    width: 100%;
}

.btn-my-review .card-rating {
    margin-bottom: unset;
}

.btn-my-review .xi-angle-right {
    font-size: 14px;
    color: #202020;
    margin-left: 8px;
}

.my-content .cont-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.my-content .cont-title-wrap .cont-title {
    margin-bottom: unset;
}

.my-content .line-title {
    padding-bottom: 24px;
    border-bottom: 1px solid #202020;
}

.my-content .cont-title-wrap .btn-full {
    width: 100%;
    max-width: 200px;
}


/* 마이페이지 - 사이드바 */

.sideNav {
    width: 220px;
    flex-shrink: 0;
}

.side-nav-box:not(:last-child) {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e4e4e4;
}


.nav__title {
    font-size: 18px;
    color: #222;
    font-weight: bold;
    margin-bottom: 24px;
}

.nav__link {
    font-size: 16px;
    color: #222;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.nav__link:not(:last-child) {
    margin-bottom: 16px;
}

.nav__link:hover {
    color: #505ea4;
    font-weight: bold;
}

.nav__link.is-active {
    color: #505ea4;
    font-weight: bold;
}

.badge-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    background: #505ea4;
    border-radius: 9px;
    width: 18px;
    height: 18px;
    font-size: 11px;
    color: #fff;
    padding: 3px 0 2px;
}


.stat__label .t-mo {
    display: none;
}

.stat__label .t-pc {
    display: inline;
}

/* 모바일 전환 */
@media (max-width: 1280px) {
    .stat__label .t-pc {
        display: none;
    }

    .stat__label .t-mo {
        display: inline;
    }
}

/* 마이페이지 - 웰컴박스 */
.profile-header {
    display: flex;
    align-items: center;
    background-color: #505ea4;
    padding: 15px 40px;
    color: #fff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.welcome-box .profile-header {
    border-radius: 24px;
    min-height: 80px;
    justify-content: space-between;
}


.profile-image-upload {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.profile-img-wrap {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.profile-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.camera-icon i {
    font-size: 14px;
    color: #4b61a1;
}

.profile-text {
    margin-left: 24px;
    font-size: 18px;
}

.profile-text .profile-name {
    font-weight: bold;
}

.profile-text i {
    font-size: 16px;
    margin-left: 10px;
}

.stats {
    background-color: #f8f8f8;
    padding: 24px 40px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}


.stats .stat-wrap {
    padding: 24px 40px;
    background-color: #fff;
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 16px;
    border-radius: 24px;
}

.stat__label {
    color: #202020;
    font-size: 16px;
}

.stat__label i {
    color: #202020;
    margin-left: 10px;
    font-size: 12px;
}

.stat__value {
    display: block;
    font-size: 32px;
    font-weight: bold;
    margin-top: 16px;
}

.section {
    margin-top: 28px
}

.section__title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 16px
}


@media (max-width: 1280px) {

    .attention-box {
        padding: 24px 16px;
        margin-top: 24px;
    }

    .attention-box .attention-icon {
        font-size: 18px;
    }

    .attention-box .attention-title {
        font-size: 16px;
    }

    .attention-item .item-title {
        font-size: 14px;
        display: flex;
        align-items: center;
    }

    .attention-item .item-title.base-line {
        align-items: baseline;
    }

    .attention-item .item-cont {
        font-size: 14px;
        padding: 14px;
    }

    .attention-item .item-title span {
        font-size: 6px;
    }

    .attention-box .item-sub {
        font-size: 14px;
        line-height: 1.3;
        padding-left: 0px;
    }

    .attention-box .item-list {
        font-size: 14px;
        line-height: 1.3;
    }

    .attention-box .item-list-wrap {
        padding-left: 0;
    }

    .attention-box .agree-item {
        margin-top: 16px;
    }

    .attention-box .agree-item span {
        text-align: start;
        font-size: 14px;
        color: #222;
        opacity: 0.5;
    }


    /* 테이블 스크롤바 노출 */
    .attention-item .item-cont::-webkit-scrollbar {
        display: block !important;
    }

    .attention-item .item-cont::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .attention-item .item-cont::-webkit-scrollbar-thumb {
        background: #D6D6D6;
        border-radius: 2px;
    }

    .attention-item .item-cont::-webkit-scrollbar-thumb:hover {
        background: #888;
    }

    .attention-item .item-cont::-webkit-scrollbar-track {
        background: transparent;
    }

    .findSection .auth-heading.line {
        padding-bottom: 24px;
    }

    .welcome-box .profile-header {
        min-height: 60px;
    }


}


/* 테이블 */


/* 테이블 기본 스타일 */
.table-wrap {
    display: flex;
    width: 100%;
}

.styled-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    text-align: center;
    border-radius: 12px;
    table-layout: fixed;
    display: flex;
    flex-direction: column;
}

.styled-table .table-head {
    display: flex;
    align-items: center;
    min-height: 47px;
}

.styled-table .table-row {
    display: flex;
    align-items: center;
}

.styled-table tbody {
    border-radius: 12px;
    overflow: hidden;
}

.styled-table tbody tr:first-child td:first-child {
    border-top-left-radius: 12px;
}

.styled-table tbody tr:first-child td:last-child {
    border-top-right-radius: 12px;
}

.styled-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.styled-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.styled-table tr {
    width: 100%;
    display: flex;
}


.styled-table th,
.styled-table td {
    padding: 12px;
    border-bottom: 1px solid #fff;
    flex: 1;
}

.styled-table thead {
    background-color: #fff;
    width: 100%;
}

.styled-table th {
    background-color: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    word-break: keep-all;
}

.styled-table tbody {
    display: block;
    overflow-y: auto;
}

.styled-table tbody tr {
    background-color: #f9f9f9;
}

.styled-table tbody td {
    font-size: 14px;
    font-weight: normal;
    color: #000;
    padding: 24px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: keep-all;
}


.styled-table tbody tr:first-child {
    border-top-left-radius: 12px;
    overflow: hidden;
}

.styled-table tbody tr:first-child {
    border-top-right-radius: 12px;
    overflow: hidden;
}

.styled-table tbody tr:last-child {
    border-bottom-left-radius: 12px;
    overflow: hidden;
}

.styled-table tbody tr:last-child {
    border-bottom-right-radius: 12px;
    overflow: hidden;
}

.styled-table .type-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---flex 넓이 설정 */

.styled-table .flex-05 {
    flex: 0.5;
}

.styled-table .flex-07 {
    flex: 0.7;
}

.styled-table .flex-10 {
    flex: 1;
}

.styled-table .flex-15 {
    flex: 1.5;
}

.styled-table .flex-20 {
    flex: 2;
}

.styled-table .flex-30 {
    flex: 3;
}


.styled-table .flex-50 {
    flex: 5;
}

.styled-table .typeHead {
    background-color: rgba(39, 90, 255, 0.08);
}

.styled-table .type-head-01 {
    background-color: #f8f8f8;
}

.styled-table .type-head-01 .table-cell {
    font-weight: bold;
}


.mySection .table-wrap {
    width: 100%;
}

.table-wrap .left-cell {
    text-align: left;
}


/* 마이페이지 - 수요자 - 문의하기 myInquiryTableWrap */
.myInquiryTableWrap,
.myRequestTabelWrap {
    border-bottom: 1px solid #202020;
}

.myRequestTabelWrap {
    border-top: 1px solid #202020;
}

.myInquiryTableWrap .table-row {
    padding: 24px 0 24px 16px;
}

.myInquiryTableWrap .table-row:not(:last-child),
.myRequestTabelWrap .table-row:not(:last-child) {
    border-bottom: 1px solid #e4e4e4;
}

.myInquiryTableWrap .inner-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    gap: 8px;
    min-width: 0;
    height: fit-content;
    align-items: stretch;
}

.myInquiryTableWrap .state {
    width: 80px;
    height: 28px;
    padding: 6px 0;
    min-width: fit-content;
    font-size: 14px;
    color: #fff;
    border-radius: 14px;
}

.myInquiryTableWrap .cell-title {
    text-align: left;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 740px;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

/* <div id="floating"></div> */

.myInquiryTableWrap .flex-20 {
    display: grid;
}

.badge-pending .state {
    background-color: #505ea4;
}


.badge-completed .state {
    background-color: #202020;
}

.status-open .state {
    font-weight: bold;
    color: #505ea4;
    min-width: fit-content;
}

.status-upcoming .state {
    font-weight: bold;
    color: #202020;
    opacity: 0.64;

}

.status-closed .state {
    font-weight: bold;
    color: #202020;
    opacity: 0.3;
}


/* 문의하기 작성 */
.inquirySection .form-wrap {
    gap: 16px;
}

.inquirySection .input-wrap.top {
    border-top: 1px solid #202020;
    padding-top: 24px;
}

.inquirySection .input-wrap {
    gap: 8px;
}

.inquirySection textarea {
    height: 400px;
}

.inquirySection .input-wrap .btn-full-grey {
    width: 100%;
    background-color: #707070;
    font-weight: 500;
}

.inquirySection .file-download-list {
    width: 100%;
}

.inquirySection .file-box {
    background-color: #e8f7fe;
}

.inquirySection .file-box span {
    font-weight: normal;
}

.inquirySection .file-box i {
    font-size: 16px;
    color: #222;
}

.inquirySection .form-btn-wrap .btn {
    background-color: #e4e4e4;
}

.inquirySection .form-btn-wrap .btn-complete {
    background-color: #505ea4;
}

.inquirySection .agree-item {
    width: fit-content;
    margin: 24px auto 0;
}

.inquirySection .agree-item .text {
    font-size: 16px;
    font-weight: 600;
}

.inquirySection .agree-item a {
    display: inline-block;
    color: #505ea4;
}


.inquirySection .mail-input-wrap {
    position: relative;
}

.inquirySection .mail-check {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
    color: #aeaeae;
}

.inquirySection .mail-check .check-mark {
    border-radius: 50%;
    width: 16px;
    height: 16px;
}

.inquirySection .custom-checkbox input:checked + .check-mark::after {
    font-size: 12px;
}

.inquirySection .agree-wrap {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 40px auto 0;
}

.inquirySection .agree-item {
    padding: unset;
    margin: unset;
}

.inquirySection .agree-item:first-child {
    margin-bottom: 24px;
}

.inquirySection .form-btn-wrap {
    margin-top: 80px;
}

/* 마이페이지 - 수요자 - 강사모집공고요청 */


.myRequestTabelWrap .table-cell {
    text-align: center;
}

.myRequestTabelWrap .left-cell {
    text-align: left;
}

.myRequestTabelWrap .table-row {
    padding: 16px 0;
}


/* 마이페이지 - 수요자 - 개인정보수정 */
.mySection .form-wrap {
    max-width: 520px;
}

.mySection .form-wrap .divi {
    display: flex;
    width: 100%;
    height: 1px;
    background-color: #222;
    margin: 16px 0 0px;
}

.form-wrap .form-sub-title {
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

.edit-form-wrap .filter-group,
.edit-form-wrap .btn-full-grey,
.edit-form-wrap .file-download-list {
    width: 100%;
}

.edit-form-wrap .form-btn-wrap {
    margin-top: 16px;
}

.edit-form-wrap .filter-group {
    display: flex;
    align-items: center;
    gap: 40px;
}

.edit-form-wrap .custom-radio:not(:last-child) {
    margin-bottom: unset;
}

.btn-withdraw {
    font-size: 14px;
    color: #fff;
    opacity: 0.7;
    text-decoration: underline;
}


/* 마이페이지 - 공급자 - 내 프로그램 */
:root {
    --ink: #202020;
    --muted: #8a8a8a;
    --line: #e8e8e8;
    --brand: #4d5aa3;
    --accent: #2f46c1;
    --danger: #e94b35;
    --bg: #f9fbff;
}


/* 리스트 */
.myProgramList {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}


/* 카드 */
.myProgramList .my-program-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: calc((100% - (16px * 1)) / 2);
    border: 1px solid #e4e4e4;
    border-radius: 24px;
    padding: 16px;
    background: #fff;
    max-width: unset;
    position: relative;

}

/* 썸네일 */

.myProgramList .thumb {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #f2f2f2;
    aspect-ratio: 221/166;
}

.myProgramList .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-program-card .status-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    width: 72px;
    height: 28px;
    border-radius: 14.5px;
    background-color: #eb3131;
    color: #fff;
    font-size: 14px;
    padding: 0 16px;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.my-program-card .status-badge .label {
    position: relative;
    z-index: 2;
    flex: 1;
    text-align: left;
    line-height: 2;
}

.my-program-card .status-badge .dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 17px;
    height: 17px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    z-index: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* 모집 상태 */
.my-program-card .status-badge.is-open {
    background-color: #eb3131;
    color: #fff;
    text-align: left;
}

.my-program-card .status-badge.is-open .dot {
    transform: translateX(0);
}

/* 마감 상태 */
.my-program-card .status-badge.is-closed {
    background-color: #202020;
    color: #fff;
    text-align: right;
    justify-content: center;
}

.my-program-card .status-badge.is-closed .label {
    text-align: right;
}

.my-program-card .status-badge.is-closed .dot {
    transform: translateX(-44px);
}


/* 찜 카운트 */

.my-program-card .like-count {
    position: absolute;
    top: 20px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    color: #202020;
    font-size: 16px;
    font-weight: bold;
}

.my-program-card .like-count i {
    font-size: 20px;
    color: #ee2424;
    margin-right: 8px;
}

/* 정보 */
.myProgramList .info {
    max-width: 340px;
    padding: 9px 0 8px;
}

.myProgramList .info-title {
    min-width: 0;
    font-size: 20px;
    font-weight: bold;
    color: #202020;
    margin-bottom: 14px;
    min-height: calc(1.3em * 4); /* 최소 4줄 */
    max-height: calc(1.3em * 4); /* 최대 4줄 */
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.myProgramList .meta {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 18px;
    color: #202020;
    font-weight: bold;
}

.myProgramList .meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.myProgramList .meta .rate img {
    max-width: 20px;
}

.myProgramList .meta .like i {
    color: #e53935;
}

/* 점수 리스트 */
.score-list {
    max-width: 271px;
    margin-top: 14px;
}

.score-row {
    display: grid;
    grid-template-columns:28px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.score-row dt {
    font-size: 14px;
    color: #202020;
}

.score-row dd {
    margin: 0;
}

.bar {
    position: relative;
    display: block;
    height: 7px;
    border-radius: 3.5px;
    background: #f5f5f5;
    overflow: hidden;
}

/* 바그래프 채우기 */
.bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--val, 0%);
    background: #505ea4;
    border-radius: 6px;
}

/* 우측 아이콘 */

.myProgramList .actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 14px;
}

.myProgramList .icon-btn,
.myPortfolioList .icon-btn {
    border: none;
    background: transparent;
    color: #9aa1aa;
    cursor: pointer;
    font-size: 22px;
}

.myProgramList .icon-btn:hover,
.myPortfolioList .icon-btn:hover {
    color: #5d6470;
}

/* 마이페이지 - 공급장 - 동의내역 */
.agreement-content .cont-sub {
    font-size: 14px;
    color: #8c8c8c;
    line-height: 1.5;
}

.agreement-content .cont-sub .bold {
    font-weight: 600;
    text-decoration: underline;
}

.agreement-content .agree-item {
    border-radius: 8px;
    background-color: #f5f5f5;
    margin-top: 24px;
}

.agreement-content .check-icon {
    display: flex;
    justify-content: center;
}


/* 마이페이지 - 공급자 - 포트폴리오 관리 */
.portfolio-manage-content .cont-title-wrap .btn-full {
    max-width: 86px;
}

.myPortfolioList .my-portfol-card {
    display: flex;
    gap: 24px;
    border: 1px solid #e4e4e4;
    border-radius: 24px;
    padding: 32px clamp(20px, 2.083vw, 40px);
    background: #fff;
    max-width: unset;
    position: relative;
    margin-top: 24px;
    justify-content: space-between;
}

.myPortfolioList .info {
    /* min-width: calc(100% + 12px); */
}

.myPortfolioList .info-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 24px;
    line-height: 1.3;
}

.myPortfolioList .meta-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.myPortfolioList .meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.myPortfolioList .meta-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

.myPortfolioList .meta-txt {
    font-size: 16px;
    color: #222;
}

.myPortfolioList .actions {
    min-width: fit-content;
    display: flex;
    align-items: start;
    gap: clamp(16px, 1.458vw, 28px);
}

@media (max-width: 960px) {
    .myPortfolioList .my-portfol-card {
        grid-template-columns:1fr;
    }
}


.subSection {
    display: flex;
    flex-direction: column;
    padding: 80px 0 120px;
}

.subSection .head-title {
    margin-bottom: 60px;
}

/* 채용/광고/협업 안내 페이지  BOGSection  */

.mbt-16 {
    margin-bottom: 16px;
}


:root {
    --brand: #4d5aa3;
    --ink: #202020;
    --card-radius: 28px;
}

/* 레이아웃 */

.cta-grid {
    width: 100%;
    max-width: 1320px;
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 24px;
    margin: 80px auto 0;
}

@media (max-width: 980px) {
    .cta-grid {
        grid-template-columns: 1fr;
    }
}

/* 카드 공통 */
.cta-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 28px 32px 40px;
    border-radius: 24px;
    text-decoration: none;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.cta-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

/* 모눈 배경 공통 */
/* 모눈 배경 공통 */
.cta-card {
    position: relative; /* ::before 절대배치용 */
    overflow: hidden; /* 마스크 밖 영역 숨김(권장) */
}

.cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: 28px 28px;
    z-index: 0;
    pointer-events: none;
}

/* 라이트 카드 */
.cta-card--light {
    background: #ffffff;
    border: 2px solid #505ea4;
}

.cta-card--light::before {
    background-image: linear-gradient(to right, rgba(80, 94, 164, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(80, 94, 164, 0.04) 1px, transparent 1px);
}

/* 다크 카드 */
.cta-card--dark {
    background: var(--brand);
    border: 2px solid var(--brand);
    color: #fff;
}

.cta-card--dark::before {
    background-image: linear-gradient(to right, rgba(255, 255, 255, .12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .12) 1px, transparent 1px);

    -webkit-mask-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(255, 255, 255, 0.0) 100%
    );
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;

    mask-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(255, 255, 255, 0.0) 100%
    );
    mask-repeat: no-repeat;
    mask-size: cover;
}


/* 내용 */
.cta-illust {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 124px;
}

.cta-illust img {
    height: auto;
    object-fit: contain;
}

.cta-inner-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cta-body {
    position: relative;
    z-index: 1;
    padding: 0 16px 0 24px;
    width: fit-content;
}

.cta-kicker {
    font-size: 16px;
    color: #222;
}

.cta-card--dark .cta-kicker {
    color: #fff;
}

.cta-title {
    font-size: 28px;
    line-height: 1.2;
    font-weight: bold;
    color: #222;
    margin-top: 8px;
}

.cta-card--dark .cta-title {
    color: #fff;
}

/* 화살표 버튼 (XE 아이콘 사용) */
.cta-action {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.cta-round-btn {
    min-width: 70px;
    aspect-ratio: 1/1;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: #505ea4;
    color: #fff;
    font-size: 24px;
    transition: transform .25s ease, background-color .25s ease, color .25s ease;
}

.cta-round-btn--light {
    background: #fff;
    color: #222;
}

.cta-card--light:hover .cta-round-btn {
    background: #3b489c;
}

.cta-card--dark:hover .cta-round-btn--light {
    background: #f4f6ff;
    color: #2c3aa0;
}


/* 프모프로그램공고등록 안내 PNGSection */
.PNGSection .order-wrap {
    display: flex;
    align-items: center;
}

.PNGSection .order-item {
    width: 100%;
    padding: 56px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.PNGSection .order-item img {
    max-width: 70px;
}

.PNGSection .order-wrap i {
    font-size: 24px;
    color: #202020;
    margin: 0 8px;
}

.PNGSection .order-title {
    font-size: 18px;
    font-weight: bold;
    color: #202020;
    margin-top: 16px;
}

.PNGSection .cta-grid {
    display: flex;
    width: 100%;
}

.PNGSection .cta-card {
    width: 100%;
}

.PNGSection .cta-action {
    align-items: center;
    gap: 24px;
}

.PNGSection .cta-sub {
    min-width: fit-content;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}


/* 아코디언 */

.accordion-header {
    width: 100%;
    padding: 27px 40px;
    background: #f8f8f8;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 10px;
}

.accordion-item:not(:last-child) {
    margin-bottom: 10px;
}

.accordion-header.active {
    background: #79b7b0;
    color: #fff;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background: rgba(123, 187, 180, 0.1);
    border-radius: 10px;
    padding: 0 40px;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    font-size: 16px;
    color: #202020;
}

.accordion-content.show {
    opacity: 1;
    padding: 32px 40px;
    margin-top: 10px;
    min-height: fit-content;
}

.accordion .icon {
    font-size: 20px;
}


/* 모집공고 목록 */
.inner-cell-wrap {
    display: flex;
    width: 100%;
}

.recruitmentTableWrap .out-cell {
    width: 100%;
    padding: 0 21px;
    min-width: 70px;
}

.recruitmentTableWrap .table-row {
    padding: 24px 0;
}

.recruitmentTableWrap {
    margin-top: 16px;
}

.recruitmentTableWrap.re-table {
    margin-top: unset;
}

@media screen and (max-width: 1280px) {

    .recruitmentTableWrap {
        border-top: 1px solid #707070;
    }

    .recruitmentTableWrap .table-head {
        display: none;
    }

    .recruitmentTableWrap .table-row {
        display: flex;
    }

    .recruitmentTableWrap .inner-cell-wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: start;
    }


    .recruitmentTableWrap .col-status {
        order: 1;
        flex: 0 0 auto !important; /* flex-07, flex-10 등의 기존 폭을 무시 */
        width: auto !important;
    }

    .recruitmentTableWrap .col-type {
        order: 2;
        flex: 0 0 auto !important;
        width: auto !important;
    }

    /* 나머지 칸들은 다음 줄에서 꽉 차게 */
    .recruitmentTableWrap .inner-cell-wrap .col-title,
    .recruitmentTableWrap .inner-cell-wrap .col-region,
    .recruitmentTableWrap .inner-cell-wrap .col-posted,
    .recruitmentTableWrap .inner-cell-wrap .col-deadline {
        flex: 0 0 100% !important; /* 기존 flex-xx 무시하고 한 줄 전체 */
        width: 100% !important;
    }

    .recruitmentTableWrap .inner-cell-wrap .col-title {
        order: 3;
    }

    .recruitmentTableWrap .inner-cell-wrap .col-region {
        order: 4;
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .recruitmentTableWrap .inner-cell-wrap .col-posted {
        order: 5;
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .recruitmentTableWrap .inner-cell-wrap .col-deadline {
        order: 6;
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .recruitmentTableWrap .table-row {
        padding: 14px 0;
    }

    .recruitmentTableWrap .table-cell {
        font-size: 12px;
        color: #959595;
    }

    .recruitmentTableWrap .col-status {
        padding: 4px 12px;
        background-color: #505EA4;
        border-radius: 4px;
        color: #fff;
        font-weight: unset;
    }

    .recruitmentTableWrap .col-type {
        padding: 4px 12px;
        background-color: #fff;
        border: 1px solid #E4E4E4;
        border-radius: 4px;
        font-weight: unset;
        margin-left: 4px;
    }

    .recruitmentTableWrap .col-title {
        margin-top: 12px;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: bold;
        color: #202020;
    }

    .recruitmentTableWrap .col-region {
        margin-right: 8px;
    }

    .recruitmentTableWrap .col-deadline {
        position: relative;
        margin-left: 10px;
    }

    .recruitmentTableWrap .col-deadline::after {
        position: absolute;
        content: "~";
        left: -9px;
    }

    .recruitmentTableWrap .col-num {
        color: #202020;
        padding: 0 18px;
        min-width: 50px;
    }


    .recruitmentTableWrap .status-upcoming .col-status,
    .recruitmentTableWrap .status-closed .col-status {
        background-color: #222;
    }


}

.page-cont {
    width: 100%;
}


/* 자주 묻는 질문 */

.faqSection {
    padding: 80px 0 120px;
}

.faqSection .seg-tabs {
    margin-top: 60px;
}


/* 탭 콘텐츠 기본 */
.seg-tab-content-wrap {
    padding: 20px 0;
}

.seg-tab-content {
    display: none;
}

.seg-tab-content.is-active {
    display: block;
}


:root {
    --line: #2f2f2f; /* 선 색 */
    --muted: #9aa0a6; /* 비활성 글자색 */
    --bg: #fff; /* 컨테이너 배경색 (페이지 배경과 맞춰주세요) */
}

/* 탭 컨테이너: 아래쪽에 전체 기준선 */
.seg-tabs {
    position: relative;
    display: flex;
    gap: 0; /* 양 옆 탭이 붙어 보이도록 */
    padding-top: 12px; /* 둥근 선이 올라올 공간 */
}

.seg-tabs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--line); /* 기준선 */
    border-radius: 2px;
}

.seg-tabs .tab-title {
    position: relative;
    font-size: 20px;
    font-weight: 600;
    color: #222;
    opacity: 0.44;
}

/* 버튼 기본 */
.seg-tab {
    flex: 1 1 0; /* 양쪽이 균등 폭 */
    padding: 18px 0 14px; /* 텍스트 세로 정렬 */
    background: transparent;
    border: 0;
    color: var(--muted);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    position: relative;
    cursor: pointer;
}

/* 활성 탭: 둥근 상단 보더 */
.seg-tab.is-active {
    color: #222;
    z-index: 1; /* 기준선 위로 */
}

.seg-tab.is-active .tab-title {
    opacity: unset;
}

/* 둥근 보더(상단+좌우). 아래는 투명해서 띄워진 느낌 */
.seg-tab.is-active::before {
    content: "";
    position: absolute;
    left: 0; /* 좌우 여백(모서리 반경/폭 조절) */
    right: 0;
    bottom: -2px; /* 기준선과 정확히 맞춤 */
    height: 56px; /* 둥근 높이 */
    border: 2px solid var(--line);
    border-bottom-color: transparent; /* 아랫선 숨김 */
    border-radius: 10px 10px 0 0; /* 위쪽 둥글게 */
    background: var(--bg); /* 안쪽 채우기(밑줄 가림) */
}

/* 기준선을 가리기 위한 작은 덮개(미세한 이음새 보정용) */
.seg-tab.is-active::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: -2px;
    height: 2px;
    background: var(--bg);
}


.sort-list {
    margin-top: 40px;
    display: flex;
    gap: 10px;
}

.sort-list .sort-item {
    height: 48px;
    padding: 0 24px;
    min-width: fit-content;
    border-radius: 24px;
    border: solid 1px #202020;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #202020;
    cursor: pointer;
    transition: all 0.3s;
}

.sort-list .sort-item.active {
    background-color: #202020;
    color: #fff;
}

.sort-list .sort-item:hover {
    background-color: #202020;
    color: #fff;
}


/* 공지사항 */

.noticeTableWrap {
    margin-top: 80px;
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
}

.noticeTableWrap .styled-table .table-head {
    height: 56px;
}

.noticeTableWrap .out-cell {
    width: 100%;
    padding: 0 26px;
    min-width: 80px;
}

.noticeTableWrap .table-row {
    padding: 24px 0;
}

.noticeTableWrap .table-row:not(:last-child) {
    border-bottom: 1px solid #e4e4e4;
}

.noticeTableWrap .fixed-row .col-num {
    display: none;
}

.noticeTableWrap .alert-cell {
    display: none;
}

.noticeTableWrap .fixed-row {
    background-color: rgba(80, 94, 164, 0.12);
    padding: 14px 0;
}

.noticeTableWrap .fixed-row .alert-cell {
    display: flex;
    justify-content: center;
}

.noticeTableWrap .fixed-row .alert-cell i {
    min-width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
    border-radius: 20px;
    background-color: #505ea4;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
}

.noticeTableWrap .col-title {
    padding-left: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1099px;
}

.noticeTableWrap .col-meta {
    display: flex;
    width: 100%;
    max-width: 261px;
}

@media screen and (max-width: 1280px) {

    .noticeTableWrap .table-head {
        display: none;
    }

    .noticeTableWrap .inner-cell-wrap {
        flex-direction: column;
        justify-content: start;
    }

    .noticeTableWrap .col-title {
        padding-left: unset;
        font-size: 14px;
        max-width: 76%;
    }

    .noticeTableWrap .col-posted,
    .noticeTableWrap .col-view {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #959595;
    }

    .noticeTableWrap .col-meta {
        gap: 14px;
        margin-top: 14px;
        width: fit-content;
    }

    .noticeTableWrap .col-meta i {
        margin-right: 4px;
    }

    .noticeTableWrap .fixed-row .alert-cell i {
        width: 32px;
        min-width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .noticeTableWrap .out-cell {
        padding: 0 16px;
        min-width: 64px;
    }

    .noticeTableWrap .table-row {
        padding: 16px 0;
    }

}


/* 검색결과 페이지 searchSection */
.searchSection {
    padding: 80px 0 120px;
}

.searchSection .search-bar {
    margin: 32px auto 0;
}

.searchSection .result-content {
    margin-top: 60px;
}

.searchSection .search-result-title {
    font-size: 32px;
    color: #202020;
    text-align: center;
    margin-bottom: 40px;
}

.searchSection .detail-cont-wrap .cont-title {
    padding-bottom: 16px;
    border-bottom: 1px solid #202020;
    justify-content: space-between;
    margin-bottom: 16px;
}

.searchSection .inner-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.searchSection .inner-wrap h2 {
    font-size: 28px;
}

.searchSection .inner-wrap .num {
    font-size: 18px;
    color: #222;
}

.searchSection .page-tab .detail-cont-wrap:not(:last-child) {
    border-bottom: unset;
}

.searchSection .btn-add {
    font-size: 16px;
    font-weight: 500;
    color: #202020;
}

.searchSection .btn-add i {
    font-size: 16px;
    color: #202020;
    margin-left: 8px;
}

.searchSection .cont-box-wrap .img-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    min-width: 160px;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.searchSection .cont-box-wrap .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.searchSection .cont-box {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 24px 0;
    border-bottom: 1px solid #e4e4e4;
}

.searchSection .cont-box:not(:last-child) {
    margin-bottom: unset;
}

.searchSection .cont-box:first-child {
    padding-top: unset;
    margin-bottom: unset;
}

.searchSection .detail-cont-wrap .tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.searchSection .detail-cont-wrap .host {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    opacity: 0.6;
    margin-bottom: 16px;
}

.searchSection .detail-cont-wrap .program-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 16px;
}

.searchSection .detail-cont-wrap .program-sub {
    font-size: 16px;
    color: #222;
    opacity: 0.4;
    line-height: 1.5;
}


.null-box {
    width: 100%;
    padding: 60px 0;
    text-align: center;
}

.null-box i {
    font-size: 40px;
    color: #202020;
    opacity: 0.4;
}

.null-box .null-txt {
    font-size: 16px;
    color: #222;
    opacity: 0.4;
    margin-top: 16px;
}

.searchSection .noticeTableWrap {
    margin-top: 0;
    border-top: unset;
}

.searchSectio .list-box-wrap {
    padding: 24px 0;
}

.searchSection .list-box-wrap .cont-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.searchSection .col-type {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    opacity: 0.6;
}

.searchSection .col-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.searchSection .col-txt-wrap {
    display: flex;
    align-items: center;
    gap: 25px;
}

.searchSection .col-txt-wrap .col-txt {
    font-size: 16px;
    color: #222;
    opacity: 0.4;
    height: fit-content;
}

.searchSection .col-txt-wrap .bar {
    position: relative;
    background-color: unset;
    border-radius: unset;
    overflow: unset;
}

.searchSection .col-txt-wrap .bar::after {
    position: absolute;
    content: "";
    height: 16px;
    width: 2px;
    background-color: #222;
    opacity: 0.4;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
}


.searchSection .detail-cont-wrap .cont-title {
    display: flex;
    padding-bottom: 16px;
    border-bottom: 1px solid #202020;
    justify-content: space-between;
    margin-bottom: 16px;
}


/* 반응형 */
/* 프로그램 목록  program-search.html */

@media screen and (max-width: 1280px) {

    .programSwiper .swiper-slide .pc {
        display: block;
    }

    .programSwiper .swiper-slide .mb {
        display: none;
    }

    .search-result-wrap .area-top-wrap {
        margin-bottom: 16px;
    }

    .mb-filter-area {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mb-filter-area .m-filter-btn {
        height: 36px;
        border: 1px solid #E4E4E4;
        background-color: #fff;
        border-radius: 8px;
        padding: 0 16px;
        font-size: 14px;
        color: #222;
        cursor: pointer;
    }

    .mb-filter-area .m-filter-btn.active {
        border: 1px solid #505EA4;
        font-weight: bold;
        color: #505EA4;
    }

    .mb-filter-modal {
        position: fixed;
        left: 0;
        bottom: -100%;
        width: 100%;
        background: #fff;
        border-radius: 24px 24px 0 0;
        padding: 24px 16px 80px;
        transition: bottom 0.3s ease;
        z-index: 1001;
        max-height: 70%;
        overflow-y: auto;
    }

    .mb-filter-modal.active {
        bottom: 0;
    }

    .mb-filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 1000;
    }

    .mb-filter-overlay.active {
        display: block;
    }

    .mb-filter-content {
        display: none;
    }

    .mb-filter-content.active {
        display: block;
    }

    .mb-filter-btns {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mb-filter-btns .btn {
        height: 48px;
        width: 50%;
        font-size: 14px;
        line-height: 48px;
    }

    .mb-filter-btns .cancle {
        background-color: #e4e4e4;
        font-weight: bold;
        border-radius: 10px;
        color: #fff;
    }

    .mb-filter-modal .filter-group strong {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .mb-filter-modal .filter-group {
        border-bottom: unset;
        margin-bottom: unset;
        padding-bottom: 32px;
    }

    .mb-filter-modal .radio-mark {
        margin-right: 8px;
    }

    .mb-filter-modal .filter-group {
        display: flex;
        flex-direction: column;
    }


    .mb-filter-modal .filter-group label {
        font-weight: normal;
    }

    .mb-filter-modal .filter-group .custom-radio:not(:last-child),
    .mb-filter-modal .filter-group .custom-checkbox:not(:last-child) {
        margin-bottom: 20px;
    }

    .mb-filter-modal .mb-filter-content > strong {
        margin-bottom: 20px;
        display: flex;
        font-size: 16px;
    }

    .mb-filter-modal .mb-filter-content .filter-group > strong {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .mb-filter-modal .check-mark {
        width: 22px;
        height: 22px;
    }

    .mb-filter-modal .custom-checkbox input:checked + .check-mark::after {
        font-size: 14px;
    }

    .mb-filter-modal .m-inner-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 36px;
    }

    .mb-filter-modal .filter-group .m-inner-wrap.col-2,
    .mb-filter-modal .filter-group .m-inner-wrap.col-3 {
        flex-wrap: unset;
    }

    .mb-filter-modal .filter-group .m-inner-wrap.col-3 {
        gap: 16px 12px;
    }

    .mb-filter-modal .filter-group .m-inner-wrap .custom-radio,
    .mb-filter-modal .filter-group .m-inner-wrap .custom-checkbox {
        margin-bottom: unset;
        max-width: 50%;
        width: calc((100% - (36px * 1)) / 2);
    }

    .mb-filter-modal .filter-group .m-inner-wrap.col-3 .custom-checkbox {
        width: calc((100% - (12px * 2)) / 3);
        min-width: fit-content;
    }

    .mb-filter-modal .filter-group .m-inner-wrap .custom-checkbox {
        margin-bottom: unset;
        max-width: 50%;
        width: calc((100% - (36px * 1)) / 2);
    }

    .mb-filter-modal .m-select-wrap {
        flex-direction: row;
        gap: 8px;
        flex-wrap: unset;
    }

    .mb-filter-modal .m-select-wrap select {
        width: calc((100% - (8px * 1)) / 2);
        min-width: 100px
    }


}


@media screen and (max-width: 768px) {

    .programSwiper .swiper-slide .pc {
        display: none;
    }

    .programSwiper .swiper-slide .mb {
        display: block;
    }

    .programSwiper {
        aspect-ratio: unset;
        min-height: 160px;
    }

    .programSwiper .swiper-slide img {
        object-fit: cover;
        min-height: 160px;
    }

    .programSwiper .swiper-slide a {
        height: auto;
    }
}


/* 프로그램 디테일 */
.review-cont-wrap .mb {
    display: none !important;
}


@media screen and (max-width: 1280px) {
    .program-detail {
        padding: 0 16px;
        gap: 24px;
        margin-bottom: 40px;
    }

    .program-detail .program-image-section {
        max-width: unset;
    }

    .program-detail .main-image {
        width: 100%;
        height: auto;
        border-radius: 12px;
        aspect-ratio: 1/1;
    }

    .program-detail .main-image img {
        border-radius: 12px;
    }

    .program-detail .thumbnailSwiper {
        margin-top: 8px;
        gap: unset;
    }

    .thumbnailSwiper .swiper-slide {
        width: 64px;
        height: 64px;
    }

    .program-detail .thumb {
        width: 64px;
        height: 64px;
        aspect-ratio: 1/1;
    }

    .program-detail .info-box .tags {
        gap: 4px;
        margin-bottom: 20px;
    }

    .program-detail .info-box .tag,
    .detail-cont-wrap .tag {
        font-size: 12px;
    }

    .program-detail .host {
        font-size: 14px;
    }

    .program-detail .info-box h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .program-detail .info-top-wrap {
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .program-detail .list-icon {
        font-size: 14px;
        margin-right: 8px;
    }

    .program-detail .program-info-list strong {
        font-size: 14px;
        margin-right: 10px;
        min-width: 78px;
    }

    .program-detail .program-info-list .list-inner-wrap .inner-item {
        font-size: 14px;
    }

    .program-detail .program-info-list .list-inner-wrap span {
        font-size: 14px;
        margin-right: 4px
    }

    .program-detail .program-info-list li {
        font-size: 14px;
    }

    .program-detail .blue-txt {
        margin-right: 4px;
    }

    .program-detail .info-box ul {
        margin-bottom: 4px;
    }

    .program-detail .info-box .buttons {
        gap: 8.5px;
    }

    .program-detail .buttons button {
        height: 48px;
    }

    .program-detail .info-box .buttons button {
        font-size: 14px;
        max-width: unset;
    }

    .program-detail .btn-like-detail {
        width: 48px;
        max-width: 48px !important;
        aspect-ratio: 1/1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .program-detail .btn-like-detail img {
        width: 24px;
    }

    .video-cont-wrap {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 8px;
    }

    .video-wrap {
        max-width: unset;
    }

    .video-thumb::after {
        width: 48px;
        height: 48px;
    }

    .video-thumb::before {
        border-width: 11px 0 11px 15px;
    }


}


@media screen and (max-width: 1280px) {

    .searchResultSection {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .searchResultSection .cateTitle {
        font-size: 28px;
    }

    .search-result-wrap {
        margin-top: 24px;
    }

    .result-count {
        display: none;
    }


    .result-count.mb-view {
        display: flex;
        font-size: 14px;
        margin-top: 24px;
    }

    .review-head img {
        max-width: 26px;
    }

    .review-head .txt {
        font-size: 14px;
        line-height: 1.3;
    }

    .review-cont-wrap .review-wrap {
        margin-top: 10px;
    }

    .empty-box .x-icon {
        font-size: 26px;
        margin-bottom: 8px;
    }

    .empty-box .text {
        font-size: 14px;
    }

    .review-cont-wrap .review-item {

    }


    .review-cont-wrap .review-item.mb {
        display: flex !important;
        padding: 20px;
    }

    .review-cont-wrap .review-item.pc {
        display: none !important;
    }

    .review-item .review-innner-wrap {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .review-item .review-meta-wrap {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .review-item .review-innner-wrap .date {
        font-size: 12px;
        color: #202020;
    }

    .review-item .review-innner-wrap .user {
        font-size: 14px;
        font-weight: bold;
    }

    .review-item .star-wrap img {
        width: 14px;
    }

    .review-rating .score {
        font-size: 12px;
    }

    .review-cont-wrap .review-cont {
        font-size: 14px;
        margin-bottom: 0;
    }

    .review-more-btn-wrap .review-more-btn {
        height: 48px;
        font-size: 14px;
    }

}

@media screen and (max-width: 1280px) {

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 8px;
    }

    .program-card {
        max-width: unset;
    }

    .card-img-wrap,
    .card-img {
        border-radius: 8px;
    }

    .icon-favorite {
        top: 4px;
        left: 4px;
        width: 42px;
    }

    .program-card .btn-like {
        right: 10px;
        top: 8px;
        width: 42px;
    }

    .card-content {
        padding-top: 10px;
    }

    .card-tag {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .card-title {
        font-size: 14px;
        line-height: 1.5;
        min-height: calc((14px * 1.5) * 2);
    }

    .wanted-card .card-sub {
        margin-top: unset;
    }

    .card-price {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .card-rating {
        margin-bottom: 10px;
    }

    .card-rating .star {
        max-width: 14px;
    }

    .card-rating .score,
    .card-rating .count {
        font-size: 12px;
    }

    .card-labels .label {
        font-size: 11px;
        font-weight: unset;
        height: 20px;
    }

    .programBoard .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .programBoard .search-result-wrap {
        margin-top: 40px;
    }

}


/* 탭 */
@media screen and (max-width: 1280px) {

    .page-tab {
        padding: 0 16px;
    }

    .page-tab .detail-tab-nav {
        border-radius: 8px;
    }

    .page-tab .detail-tab-nav li {
        font-size: 14px;
    }

    .page-tab .detail-cont-wrap {
        padding-top: 32px;
    }

    .page-tab .cont-title {
        gap: 14px;
        margin-bottom: 16px;
    }

    .page-tab .cont-title .bar {
        height: 26px;
    }

    .page-tab .cont-title h2 {
        font-size: 20px;
    }

    .page-tab .img-cont-wrap .img-wrap {
        max-width: 50%;
        width: calc((100% - (8px * 1)) / 2);
    }

    .page-tab .img-cont-wrap {
        gap: 8px;
    }


    .file-box .file-icon {
        width: 18px;
    }

    .file-box span {
        font-size: 14px;
    }

    .page-tab .box-title {
        font-size: 16px;
    }

    .page-tab .box-txt {
        font-size: 14px;
        line-height: 1.3;
    }

    .page-tab .cont-box:not(:last-child) {
        margin-bottom: 32px;
    }

    .page-tab .box-list-txt {
        gap: 4px;
    }
}


/* 인증, 폼 등 */
@media screen and (max-width: 1280px) {

    .auth-panel {
        margin-top: 60px;
        max-width: 768px;
        width: 100%;
        /* text-align: start; */
    }

    .auth-heading {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .joinSection .auth-sub-sm {
        font-size: 14px;
        line-height: 1.5;
        margin-top: unset;
        padding-bottom: 24px;
    }


    .form-wrap {
        margin-top: 32px;
    }

    .input-wrap {
        gap: 8px;
    }

    .input-title {
        font-size: 14px;
    }


    .form-input {
        height: 48px;
        border-radius: 8px;
        font-size: 14px;
    }

    .position-item-group {
        width: 100%;
        flex-direction: column;
        margin-top: 12px;
    }

    .position-item {
        width: 100%;
        font-size: 14px;
    }

    .position-item .check-icon {
        font-size: 17px;
    }

    .position-item .label-text, .radio-item .label-text {
        font-size: 14px;
    }

    .ad-pariod-group {
        margin-top: 0;
        flex-direction: row;
        gap: 8px;
    }

    .ad-pariod-group .check-icon {
        margin-bottom: unset;
    }

    .textarea-wrap textarea {
        height: 140px;
    }

    .textarea-wrap textarea::placeholder {
        font-size: 14px;
    }

    .agree-all {
        border-radius: unset;
    }

    .agree-box .text {
        text-align: start;
        font-size: 14px;
    }

    .agree-box .box-title {
        font-size: 16px;
    }

    .check-icon {
        width: 20px;
        height: 20px;
    }

    .joinSection .btn-file {
        height: 48px;
        font-size: 14px;
    }

    .collabInquiry .top-line .input-title {
        font-size: 16px;
    }

    .btn-full {
        height: 48px;
        font-size: 14px;
    }

}


@media screen and (max-width: 1280px) {

    .subSection {
        padding-top: 60px;
    }

    .head-title {
        font-size: 28px;
    }

    .subSection .head-title {
        margin-bottom: 24px;
    }

    .cta-grid {
        margin-top: 40px;
        padding: 0 16px;
        gap: 16px;
    }

    .cta-card {
        /* grid-template-columns: 120px 1fr 72px; */
        padding: 18px 10px;
        min-height: 109px;
        border-radius: 12px;
    }

    .cta-body {
        padding: 0 8px 0 12px;
    }


    .cta-illust {
        max-width: 72px;
    }

    .cta-kicker {
        font-size: 12px;
    }

    .cta-title {
        font-size: 20px;
    }

    .cta-round-btn {
        width: 32px;
        min-width: 32px;
        height: 32px;
        font-size: 12px;
    }


}


@media screen and (max-width: 1280px) {

    .faqSection {
        overflow-x: hidden;
        padding-top: 60px;
    }

    .sort-list {
        overflow-x: scroll;
        margin-top: 24px;
    }

    .faqSection .seg-tabs {
        margin-top: 34px;
        padding-top: unset;
    }

    .seg-tabs .tab-title {
        font-size: 16px;
    }

    .seg-tab.is-active::before {
        height: 52px;
        left: 0;
        right: 0;
    }

    .accordion-header,
    .accordion-content.show {
        padding: 28px 16px;
        font-size: 16px;
    }

    .accordion-content.show,
    .accordion-content.show p {
        font-size: 14px;
    }

    .accordion .icon {
        font-size: 16px;
    }

    .PNGSection {
        padding-bottom: 60px;
    }

    .PNGSection .cta-grid {
        margin-top: 80px;
    }

    .PNGSection .cta-card {
        flex-direction: column;
        padding: 48px 16px 24px;
    }

    .PNGSection .cta-body,
    .PNGSection .cta-action {
        width: 100%;
    }

    .PNGSection .cta-body {
        padding: unset;
    }

    .PNGSection .cta-action {
        margin-top: 32px;
        align-items: center;
        justify-content: start;
    }

    .PNGSection .cta-inner-wrap {
        flex-direction: column;
    }

    .PNGSection .cta-illust {
        max-width: 124px;
        margin-bottom: 48px;
    }

    .PNGSection .cta-kicker {
        font-size: 14px;
    }

    .PNGSection .cta-title {
        margin-top: 12px;
    }

    .PNGSection .PNGSection .cta-sub {
        font-size: 16px;
    }

    .PNGSection .cta-round-btn {
        width: 48px;
        min-width: 48px;
        height: 48px;
        font-size: 16px;
    }

    .cta-card--dark::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(to right, rgba(255, 255, 255, .12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .12) 1px, transparent 1px);
        background-size: 20px 20px;

        /* 👇 위쪽도 살짝 연하게 시작 → 아래로 갈수록 사라짐 */
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.6) 0%, /* 시작: 60% 불투명 (연하게) */ rgba(255, 255, 255, 0.3) 40%, /* 중간쯤 더 옅어짐 */ rgba(255, 255, 255, 0) 100% /* 끝: 완전 투명 */
        );
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: cover;

        mask-image: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0.3) 40%,
            rgba(255, 255, 255, 0) 100%
        );
        mask-repeat: no-repeat;
        mask-size: cover;

        pointer-events: none;
    }


}

@media screen and (max-width: 1280px) {

    .userSection {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .register-box {
        margin-top: 32px;
    }

    .inquirySection .input-col-wrap {
        flex-direction: column;
    }

    .btn-full-grey,
    .btn-line {
        height: 48px;
        font-size: 14px;
    }

    .inquirySection .file-box i {
        font-size: 14px;
    }

    .inquirySection .agree-item {
        margin-top: 4px;
    }

    .inquirySection .agree-item .text {
        font-size: 14px;
    }

    .registerSection .form-btn-wrap {
        margin-top: 24px;
        gap: 8px;
    }

    .inquirySection .agree-wrap {
        margin: 0 auto;
    }

    .inquirySection .agree-item:first-child {
        margin-bottom: 18px;
    }

    .inquirySection .form-btn-wrap {
        margin-top: 40px;
    }


}


@media screen and (max-width: 1280px) {


    .introPmoSection {
        padding-top: 60px;
        padding-bottom: 40px;
        max-width: 1028px;
        margin: 0 auto;
        gap: 24px;
    }


    .feature-item {
        flex-direction: column;
        gap: 24px;
    }

    .feature-item:not(:last-child) {
        margin-bottom: 40px;
    }

    .feature-item.reverse {
        flex-direction: column;
    }

    .feature-img-wrap {
        max-width: unset;
        border-radius: 12px;
    }

    .feature-text {
        flex: 1;
        width: 100%;
    }

    .feature-text h3 {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .feature-text .desc {
        font-size: 14px;

    }


    .introRegister {
        margin-top: 40px;
        padding: 60px 0 80px;
    }

    .introRegister .head-title {
        font-size: 24px;
    }

    .introRegister .sub-title {
        font-size: 14px;
        max-width: calc(100% - 32px);
        margin: 0 auto;
    }

    .introRegister .sub-title {
        margin-top: 48px;
    }

    .introRegister .info-cards {
        gap: 24px;
        max-width: calc(100% - 32px);
        margin: 48px auto 40px;
    }

    .introRegister .info-card {
        padding: 24px 16px;
        border-radius: 16px;
        max-width: unset;
    }

    .introRegister .info-card img {
        width: 56px;
        height: auto;
        margin-bottom: 16px;
    }

    .introRegister .info-card h3 {
        margin-bottom: 14px;
    }

    .introRegister .btn-register {
        max-width: calc(100% - 32px);
        height: 48px;
        font-size: 14px;
        border-radius: 8px;
    }

}


@media screen and (max-width: 1280px) {

    .PNGSection .order-wrap {
        flex-direction: column;
    }

    .PNGSection .order-wrap i {
        transform: rotate(90deg);
    }

    .PNGSection .order-item img {
        max-width: 60px;
    }

    .PNGSection .order-title {
        font-size: 14px;
    }

    .PNGSection .order-item {
        padding: 48px 0;
    }

    .PNGSection .accordion {
        margin-top: 8px;
    }

    .PNGSection .accordion-header {
        border-radius: 4px;
    }
}


@media screen and (max-width: 1280px) {
    .registerGuideSection .sub-title {
        font-size: 20px;
        margin: 24px 0 40px;
    }

    .registerGuideSection .info-box {
        flex-direction: column;
        padding: 32px 12px;
        border-radius: 8px;
        gap: 24px;
    }

    .registerGuideSection .info-box .icon {
        width: 48px;
        min-width: 48px;
    }

    .registerGuideSection li {
        font-size: 14px;
    }

    .registerGuideSection li:not(:last-child) {
        margin-bottom: 24px;
    }

    .registerGuideSection small {
        font-size: 12px;
    }

}


@media screen and (max-width: 1280px) {

    .search-bar {
        height: 56px;
    }

    .searchSection {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .searchSection .page-tab {
        padding: unset;
    }

    .searchSection .search-bar {
        margin-top: 16px;
    }

    .searchSection .result-content {
        margin-top: 40px;
    }

    .searchSection .search-result-title {
        font-size: 18px;
        margin-bottom: 24px;
    }

    .searchSection .inner-wrap {
        gap: 8px;
    }

    .searchSection .inner-wrap h2 {
        font-size: 18px;
    }

    .searchSection .inner-wrap .num {
        font-size: 14px;
    }

    .searchSection .btn-add {
        font-size: 14px;
    }

    .searchSection .btn-add i {
        font-size: 14px;
        margin-left: 4px;
    }

    .searchSection .detail-cont-wrap .cont-title {
        padding-bottom: 10px;
    }

    .searchSection .cont-box {
        flex-direction: column-reverse;
        gap: 16px;
        padding: 12px 0;
    }

    .searchSection .cont-box-wrap .img-wrap {
        width: 100px;
        height: 100px;
        min-width: 100px;
    }

    .searchSection .cont-box-wrap .img-wrap img {
        min-width: 100px;
    }

    .searchSection .detail-cont-wrap .host {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .searchSection .detail-cont-wrap .program-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .searchSection .detail-cont-wrap .program-sub {
        font-size: 14px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        max-height: calc(1.4em * 2);
    }

    .searchSection .page-tab .cont-box:not(:last-child) {
        margin-bottom: 0;
    }

    .searchSection .col-title {
        font-size: 14px;
    }

    .searchSection .col-txt-wrap {
        gap: 20px;
    }

    .searchSection .list-box-wrap .cont-box {
        gap: 10px;
    }

    .searchSection .col-txt-wrap .col-txt {
        font-size: 14px;
    }

    .searchSection .col-txt-wrap .bar::after {
        height: 12px;
        left: -10px;
    }

}


@media screen and (max-width: 1280px) {
    .join-cont-wrap .box-wrap {
        flex-direction: column;
    }

    .join-cont-wrap .join-box {
        background-color: #fff;
        border: solid 1px #e4e4e4;
        padding: 24px;
    }

    .userSection .page-title {
        font-size: 24px;
    }

    .userSection .page-sub {
        font-size: 14px;
        margin-top: 16px;
    }

    .join-cont-wrap .box-wrap {
        margin-top: 24px;
        gap: 10px;
    }

    .join-cont-wrap .join-icon {
        max-width: 127px;
    }

    .join-cont-wrap .box-title {
        margin-top: 24px;
        font-size: 18px;
    }

    .join-cont-wrap .box-sub {
        margin-top: 16px;
        font-size: 14px;
    }

    .join-cont-wrap .btn-join {
        height: 48px;
        border: solid 1px #505ea4;
        background-color: #505ea4;
        color: #fff;
        font-size: 14px;
    }

    .joinSection .auth-heading {
        margin-bottom: 40px;
    }

    .joinSection .input-wrap.btm {
        margin-top: -16px;
    }

    .joinSection .form-btn-wrap.top {
        margin-top: 0;
    }

    .joinSection .find-btn-wrap .find-link {
        font-size: 14px;
    }

    .joinSection .find-btn-wrap .divi-bar {
        height: 12px;
        margin: 0 12px;
    }

    .joinSection .find-btn-wrap {
        margin-top: 16px;
    }

    .joinSection .join-move-box {
        margin-top: 32px;
    }

    .joinSection .join-move-box .txt {
        font-size: 14px;
    }

    .joinSection .join-move-box .btn-line {
        height: 48px;
        font-size: 14px;
        border: solid 1px #505ea4;
    }

    .joinSection .auth-panel {
        margin-bottom: 60px;
    }

    .joinSection .auth-heading {
        text-align: center;
    }

    .joinSection .auth-sub {
        font-size: 14px;
    }

    .joinSection .auth-sub-sm {
        text-align: center;
    }

    .provider-panel .auth-heading,
    .consumer-panel .auth-heading {
        margin-bottom: 16px;
    }

    .provider-panel .auth-sub-sm,
    .consumer-panel .auth-sub-sm {
        font-size: 12px;
        margin-top: 10px;
        padding-bottom: 20px;
    }

    .consumer-panel .auth-sub-sm {
        padding-bottom: 24px;
    }

    .filter-group .custom-radio, .filter-group .custom-checkbox {
        font-size: 14px;
    }

    .radio-mark {
        width: 20px;
        height: 20px;
        margin-right: 4px;
    }

    .custom-radio input:checked + .radio-mark::after {
        top: 6px;
        left: 6px;
    }

    .joinSection .filter-group {
        gap: 24px;
    }

    .input-inner-wrap .btn {
        max-width: 100px;
        font-size: 14px;
        height: 48px;
        border-radius: 8px;
    }

    .joinSection .auth-panel .form-wrap {
        gap: 24px;
    }

    .m-mb-8 {
        margin-bottom: 8px;
    }

    .form-input::placeholder {
        font-size: 14px;
    }

    .form-guide {
        font-size: 12px;
        margin-top: 2px;
    }

    .agree-box {
        font-size: 14px;
        padding-bottom: 16px;
    }

    .agree-item {
        padding: 14px 16px;
    }

    .check-icon .chk-icon {
        font-size: 15px;
        line-height: 15px;
    }

    .form-wrap .btn-disabled {
        height: 48px;
        font-size: 14px;
    }

    .joinSection .provider-panel .form-btn-wrap {
        margin-top: unset;
    }


    .step-indicator .circle {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .step-indicator .step-label {
        font-size: 12px;
        margin-top: 10px;
    }

    .step-indicator .step-title {
        font-size: 14px;
        margin-top: 8px;
    }

    .step-indicator {
        padding-bottom: 32px;
        gap: 53px;
    }

    .step-indicator .step-line {
        width: 62px;
        border-radius: unset;
    }

    .joinSection .consumer-panel .form-btn-wrap,
    .joinSection .consumer-panel-2 .form-btn-wrap {
        margin-top: unset;
    }


    .joinSection .select-group {
        gap: 8px;
    }


    .input-side-sub {
        position: unset;
        display: block;
    }

    .input-side-sub .input-title {
        text-align: start;
        justify-content: start;

    }

    .input-side-sub {
        text-align: start;
        margin-left: unset;
    }

    .joinSection .input-side-sub,
    .edit-form-wrap .input-side-sub {
        margin-left: unset;
    }
}


@media screen and (max-width: 1280px) {

    .resultSection .success-check {
        font-size: 38px;
    }

    .resultSection .auth-heading {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .resultSection .result-cont {
        font-size: 14px;
    }

    .resultSection .form-btn-wrap {
        margin-top: 24px;
    }

    .resultSection .result-link {
        font-size: 14px;
    }

    .resultSection .call-txt {
        font-size: 14px;
        font-weight: 600;
    }


}

@media screen and (max-width: 1280px) {

    .findSection .auth-heading {
        margin-bottom: 16px;
    }

    .findSection .form-btn-wrap {
        margin-top: unset;
    }

    .findSection .auth-sub-sm {
        font-size: 13px;
    }

    .findSection .find-pwd-wrap .form-btn-wrap {
        margin-top: 24px;
    }

}


@media screen and (max-width: 1280px) {

    .sideNav {
        display: none;
    }

    .profile-header {
        background-color: unset;
        padding: unset;
        margin-bottom: 10px;
    }

    .profile-img-wrap {
        width: 40px;
        height: 40px;
    }

    .camera-icon {
        width: 20px;
        height: 20px;
    }

    .camera-icon i {
        font-size: 12px;
    }

    .profile-text {
        color: #202020;
        margin-left: 16px;
        font-size: 14px;
    }
    .btn-withdraw {
        color: #202020;
        opacity: 0.5;
    }

    .welcome-box .btn-withdraw  {
        color: #fff;
    }

    .profile-text i {
        font-size: 12px;
        margin-left: 8px;
    }


   .welcome-box .profile-header {
        background-color: #505ea4;
        padding: 10px 16px;
        border-radius: 8px;
    }

  .welcome-box .profile-text {
        color: #fff;
    }


    .stats {
        background-color: unset;
        padding: 18px 16px;
        background-color: #505ea4;
        border-radius: 8px;
    }

    .stats .stat {
        position: relative;
        display: flex;
        align-items: center;
        gap: 4px;
        justify-content: space-between;
        width: 100%;
    }

    .stats .stat.jc-ce {
        justify-content: center;
    }

    .stats .stat:not(:last-child)::after {
        position: absolute;
        content: "";
        width: 1px;
        height: 16px;
        background-color: #ffffff5c;
        right: -16px;
    }

    .stats .state span {
        display: inline-block
    }

    .stats .stat-wrap {
        background-color: unset;
        padding: unset;
        gap: 32px;
    }

    .stat__label i {
        display: none;
    }

    .stat__value {
        display: unset;
        align-items: center;
        font-size: 20px;
        color: #fff;
        margin-top: unset;
    }

    .stat__label .t-mo {
        color: #fff;
        font-size: 14px;
    }


}

@media screen and (max-width: 430px) {

     .profile-text {
        margin-left: unset;
    }

}


@media screen and (max-width: 1280px) {
    .my-container {
        margin-top: 40px;
        padding-bottom: 60px;
        gap: unset;
    }

    .my-content {
        max-width: unset;
    }

    .my-content .cont-title {
        margin-bottom: 16px;
        font-size: 20px;
    }

    .mySection .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 8px;
    }


}


@media screen and (max-width: 1280px) {

    .myInquiryTableWrap .table-row {
        flex-direction: row-reverse;
        justify-content: space-between;
        gap: 24px;
    }

    .myInquiryTableWrap .inner-wrap {
        flex-direction: column;
        height: fit-content;
        align-items: start;
        padding-left: unset;
    }

    .myInquiryTableWrap .cell-title {

    }

    .myInquiryTableWrap .flex-20 {
        flex: unset;
    }


    .my-content .cont-title-wrap .btn-full {
        max-width: 108px;
        background-color: #fff;
        border: solid 1px #505ea4;
        color: #505ea4;
    }
}


/* post */
.postSection {
    margin: 0 auto;
}

.postSection .container {
    padding: 60px 12px 120px;
    max-width: 1104px;
}

.post .post-head {
    border-top: 2px solid #222;
    border-bottom: 1px solid #e4e4e4;
    padding: 32px 0;
}

.post .state {
    width: 80px;
    height: 28px;
    padding: 6px 0;
    min-width: fit-content;
    font-size: 14px;
    color: #f0f9f5;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-weight: 500;
}

.post .post-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    line-height: 1.36;
    text-align: center;
    margin-top: 16px;
}

.post .post-date {
    font-size: 16px;
    color: #aeaeae;
    text-align: center;
    margin-top: 16px;
}

.post .post-body {
    padding-top: 40px;
}

.post .file-box {
    margin-top: 24px;
}

.post .file-box span {
    font-weight: normal;
}

.post-m-title {
    display: none;
}

.answer-box {
    margin-top: 40px;
    padding: 40px;
    border-radius: 8px;
    background-color: #f5f5f5;
}

.answer-meta {
    display: flex;
    align-items: end;
    gap: 8px;
    margin-bottom: 24px;
}

.answer-meta .answer-author {
    font-size: 20px;
    font-weight: bold;
    color: #202020;
}

.answer-meta .answer-date {
    font-size: 16px;
    color: #aeaeae;
}

.postSection .btn-full-grey {
    max-width: 320px;
    margin: 40px auto 0;
}


@media screen and (max-width: 1280px) {

    .post-m-title {
        display: flex;
        font-size: 28px;
        font-weight: 600;
        justify-content: center;
        margin-bottom: 24px;
    }

    .post .post-head {
        border-top: 1px solid #222;
        padding: 24px 0;
    }

    .post .state {
        font-size: 12px;
        width: 73px;
        height: 26px;
        font-weight: 300;
    }

    .post .post-title {
        font-size: 18px;
    }

    .post .post-date {
        margin-top: 10px;
        font-size: 14px;
    }

    .post .file-box {
        margin-top: 16px;
    }

    .answer-box {
        margin-top: 24px;
        padding: 24px;
    }

    .answer-meta .answer-author {
        font-size: 16px;
    }

    .answer-meta .answer-date {
        font-size: 14px;
    }

    .answer-meta {
        margin-bottom: 16px;
    }

    .postSection .btn-full-grey {
        max-width: 320px;
        margin: 24px auto 0;
    }

}

@media screen and (max-width: 573px) {

    .postSection .btn-full-grey {
        max-width: unset;
    }

}


@media screen and (max-width: 1280px) {

    .mySection .form-wrap {
        max-width: unset;
    }

    .mySection .form-wrap .divi {
        margin-top: 8px;
    }

    .mySection .form-wrap .filter-group {
        border-bottom: unset;
        margin-bottom: unset;
        padding-bottom: unset;
    }

    .mySection .form-wrap .file-input-wrap {
        margin-top: -16px;
    }

    .edit-form-wrap .form-btn-wrap {
        margin-top: unset;
    }

    .edit-form-wrap .btn-full-grey,
    .edit-form-wrap .file-box span {
        font-weight: normal;
    }

    .edit-form-wrap .file-box i {
        font-size: 14px;
        color: #222222;
    }

    .btn-withdraw {
        font-size: 12px;
    }


}


@media (max-width: 1280px) {
    .myProgramList .my-program-card {
        grid-template-columns:1fr;
    }

    .myProgramList .my-program-card {
        padding: 16px;
        padding-bottom: 8px;
        border-radius: 16px;
        gap: 14px;
    }

    .myProgramList .thumb {
        border-radius: 16px;
    }


    .myProgramList .actions i {
        font-size: 20px;
    }

    .myProgramList .info-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .myProgramList .meta {
        gap: 16px;
    }

    .myProgramList .meta .rate img {
        max-width: 16px;
    }

    .myProgramList .meta .like i {
        font-size: 16px;
    }

    .myProgramList .meta span {
        font-size: 14px;
    }

    .myProgramList .info {
        max-width: unset;
        padding: unset;
    }

    .myProgramList .score-list {
        margin-top: 24px;
        max-width: unset;
    }

    .myProgramList .score-row dt {
        font-size: 12px;
    }

    .myProgramList .bar {
        height: 6px;
    }

    .myProgramList .score-row {
        grid-template-columns: 16px 1fr;
        margin-bottom: 8px;
    }

    .my-program-card .like-count {
        font-size: 14px;
    }

    .my-program-card .like-count i {
        font-size: 14px;
        margin-right: 4px;
    }

}



@media (max-width: 1280px) {

    .registerSection .form-wrap {
        gap: 24px;
    }

    .register-box .box-title {
        font-size: 17px;
    }

    .registerSection .form-wrap {
        margin-top: 16px;
    }

    .register-box .input-guide {
        font-size: 12px;
        text-align: left;
        margin-top: unset;
    }

    .upload-box,
    .thumbnail {
        width: 80px;
        height: 80px;
    }

    .thumbnail-list {
        gap: 4px;
    }

    .upload-box i {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .upload-box span {
        font-size: 12px;
    }

    .image-upload-wrapper {
        gap: 4px;
    }

    .filter-select-list .select-item {
        font-size: 14px;
        padding: 12px 16px;
        height: 40px;
        font-weight: normal;
    }

    .filter-select-list .select-item i {
        margin-left: 8px;
        font-size: 14px;
    }

    .filter-select-list {
        overflow: unset;
        flex-wrap: wrap;
    }

    .program-type-group {
        flex-wrap: wrap;
        gap: 8px;
    }

    .program-type-group .radio-item {
        max-width: unset;
        height: 48px;
        width: calc((100% - (8px * 1)) / 2);
    }

    .registerSection .input-col-wrap {
        flex-direction: column;
        gap: 24px;
    }

    .program-type-group, .local-type-group {
        gap: 8px;
    }

    .local-type-group .radio-item {
        height: 48px;
        padding: 16px 8px;
        max-width: unset;
    }

    .position-item .check-icon, .radio-item .check-icon {
        font-size: 17px;
    }

    .user-chk {
        margin-left: unset;
    }

    .user-chk .text {
        font-size: 14px;
    }

    .baseline-wrap {
        position: relative;
    }

    .registerSection .user-chk {
        position: absolute;
        top: -2px;
        right: 0;
    }

    .registerSection .input-inner-wrap .user-chk {
        position: unset;
    }

    .cke_editor_editor,
    .cke_editor_editor2 {
        height: 300px !important;
    }


}


@media (max-width: 768px) {
    .myProgramList .my-program-card  {
        width: 100%;
    }
}


/* 공급자 - 내 프로그램 - 후기 */
.PPRSection .head-title {
    font-size: 32px;
}

.review-board-wrap {
    display: flex;
    align-items: center;
    gap: 60px;
}

.review-board-wrap .board-item {
    width: 100%;
    max-width: 620px;
}

.review-board-wrap .score-list {
    max-width: unset;
}

.review-board-wrap .star-board {
    text-align: center;
    border-radius: 24px;
    background-color: #f8f8f8;
    padding: 40px 0;
}

.review-board-wrap .star-title {
    font-size: 18px;
    font-weight: bold;
    color: #202020;
    margin-bottom: 32px;
}

.review-board-wrap .score {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 16px;
}

.review-board-wrap .review-rating {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.review-board-wrap .score-row dt {
    font-size: 16px;
}

.review-board-wrap .bar {
    height: 10px;
}

.review-board-wrap .score-row {
    margin-bottom: unset;
}

.review-board-wrap .score-row:not(:last-child) {
    margin-bottom: 13px;
}


.PPRSection .review-cont-wrap {
    margin-top: 40px;
}

.PPRSection .review-item {
    display: flex !important;
}

.PPRSection .review-item.mb {
    display: none !important;
}


/* 분류필터 */
.sort-filter {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
    color: #666;
}

.sort-filter-icon i {
    font-size: 14px;
    line-height: 1;
    color: #202020;
}

.sort-filter-options {
    display: flex;
    align-items: center;
    gap: 24px;
}

.sort-filter-item {
    position: relative;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
}

.sort-filter-item.is-active {
    color: #202020;
    font-weight: bold;
}

.sort-filter-item:not(:first-child)::before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 1px;
    height: 15px;
    background-color: #e4e4e4;
    vertical-align: middle;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
}

.sort-filter-item:hover {
    color: #202020;
}


.PPRSection .star-wrap img {
    max-width: 16px;
}

.PPRSection .review-cont {
    max-width: 1200px;
}

.PPRSection .review-thumbnail {
    width: 118px;
    height: 118px;
    border-radius: 4px;
}

.PPRSection .img-count {
    border-radius: 4px;
    width: 20px;
    height: 20px;
    top: 0;
    right: 0;
    padding: 3px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}


@media (max-width: 1280px) {

    .PPRSection .review-item.pc {
        display: none !important;
    }

    .PPRSection .review-item.mb {
        display: flex !important;
    }

    .PPRSection .review-cont-wrap .review-wrap {
        margin-top: 14px;
    }

    .PPRSection .review-thumbnail {
        width: 66px;
        height: 66px;
        min-width: 66px;
        aspect-ratio: 1/1;
    }

    .PPRSection .head-title {
        font-size: 24px;
    }

    .review-board-wrap {
        gap: 16px;
    }

    .review-board-wrap .star-board {
        border-radius: 16px;
        padding: 26px 0;
    }

    .review-board-wrap .star-title {
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 10px;
    }

    .review-board-wrap .score {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .PPRSection .star-wrap img {
        min-width: 20px;
    }

    .review-board-wrap .score-row dt {
        font-size: 12px;
    }

    .review-board-wrap .score-row {
        grid-template-columns: 18px 1fr;
        gap: 10px;
    }

    .review-board-wrap .bar {
        height: 6px;
    }

    .review-board-wrap .score-row:not(:last-child) {
        margin-bottom: 8px;
    }

    .PPRSection .review-cont-wrap {
        margin-top: 24px;
    }

    .sort-filter-options {
        gap: 16px;
    }

    .sort-filter-icon i,
    .sort-filter-item {
        font-size: 12px;
    }

    .sort-filter-item:not(:first-child)::before {
        height: 14px;
        left: -7px;
    }

}


@media (max-width: 1280px) {

    .agreement-content .agree-item {
        margin-top: 16px;
    }

    .my-content .agree-item .text {
        font-size: 14px;
    }

}

@media (max-width: 1280px) {

    .myPortfolioList .info-title {
        font-size: 16px;
        margin-bottom: 16px;
        max-width: 80%;
    }

    .myPortfolioList .meta-wrap {
        gap: 24px;
    }

    .myPortfolioList .meta-item {
        flex-direction: column;
        align-items: start;
        gap: 4px;
    }

    .myPortfolioList .meta-title,
    .myPortfolioList .meta-txt {
        font-size: 12px;
    }

    .myPortfolioList .icon-btn {
        font-size: 18px;
        color: #CACACA;
    }

    .myPortfolioList .my-portfol-card {
        gap: 20px;
        padding: 20px;
    }

    .portfolio-manage-content .cont-title-wrap .btn-full {
        max-width: 68px;
        height: 40px;
    }

    .myPortfolioList .my-portfol-card {
        margin-top: unset;
        gap: unset;
        border-radius: 16px;
    }

    .myPortfolioList .my-portfol-card:not(:first-child) {
        margin-top: 10px;
    }

    .portfolio-manage-content .cont-title-wrap {
        padding-bottom: 16px;
        border-bottom: 1px solid #707070;
        margin-bottom: 16px;
    }

    .myPortfolioList .actions {
        min-width: unset;
        gap: 12px;
        height: fit-content;
        margin-left: -60px;
    }

    .input-col-wrap .input-wrap {
        max-width: unset;
    }

    .w-520 {
        max-width: unset;
    }

}


/* 메인 - 파트너 로고 섹션 */
.partner-section {
    max-width: 1920px;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 100px;
}

.index-partner-slide {
    height: 50px;
    position: relative;
}

.index-partner-slide .swiper-wrapper {
    transition-timing-function: linear;
}

.index-partner-slide img {
    min-width: 180px;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.index-partner-slide-btm {
    transform: scaleX(-1);
    margin-top: 40px;
}

.index-partner-slide-btm .swiper-slide {
    transform: scaleX(-1);
}



@media (max-width: 768px){

    .index-partner-slide {
        height: 34px;
    }

}


/* 메인 */

.pickSection .card-content .AD {
    display: none;
}

.review-slide .review-cont-wrap .review-cont.mb {
    display: none;
}


@media (max-width: 1280px) {

    .mainBanner {
        padding: 0 16px;
        margin: 0 auto;
    }

    .mainBannerSwiper .swiper-button-prev,
    .mainBannerSwiper .swiper-button-next {
        display: none;
    }

    .mainBannerSwiper .swiper-slide img {
        border-radius: 12px;
    }

    .mainBannerSwiper .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 2.5px !important;
    }

    .mainPage .search-bar {
        margin-top: 16px;
        max-width: calc(100% - 32px);
        padding: 0 24px;
    }

    .search-bar input {
        font-size: 14px;
    }

    .pickSection .title-wrap,
    .pickSection .title-wrap .title {
        font-size: 24px;
    }

    .pickSection .title-wrap {
        padding: 0 16px;
    }

    .pickSection .title-wrap i {
        font-size: 14px;
        margin-left: 16px;
    }

    .pickSection .category-tabs {
        margin-top: 32px;
    }

    .pickSection .container {
        padding: unset;
    }

    .category-tabs .tab-btn {
        font-size: 14px;
        height: 40px;
        padding: 0 18px;
    }

    .category-tabs .tab-scroll {
        padding-left: 16px;
    }

    .pickSection .category-tabs .AD {
        display: none;
    }

    .pickSection .card-content {
        position: relative;
    }

    .pickSection .card-content .AD {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 0;
        top: 10px;
        width: 32px;
        font-size: 12px;
    }

    .pickSection .slide-wrap {
        margin: 24px auto 0;
        width: calc(100% - 32px);
    }

    .pickSection .global-nav-buttons {
        display: none;
    }

    .pickSection .card-title {
        min-height: unset;
    }


    .pickSection .slide-btn-wrap {
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
        width: 81%;
        height: 100%;
        text-align: center;
        z-index: 5;
        pointer-events: none;

    }

    .pickSection .swiper-pagination {
        display: inline-block;
        margin-top: 8px;
    }

    .pickSection .swiper-pagination-bullet-active {
        background-color: #4a56a7;
    }


    .programSection {
        padding: 60px 0;
    }

    .programSection .program-wrap {
        flex-direction: column;
        gap: 24px;
    }

    .new-program-right {
        max-width: unset;
    }


    .programSection .title-wrap .arrow-buttons {
        position: unset;
        height: fit-content;
    }

    .programSection .title-wrap {
        position: unset;
        max-width: unset;
        display: flex;
        justify-content: space-between;
        align-items: end;
    }

    .programSection .title-inner-wrap {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .programSection .new-badge {
        font-size: 14px;
    }

    .programSection .title-wrap .title {
        font-size: 20px;
        margin-bottom: unset;
    }

    .programSection .want-wrap {
        margin-top: 60px;
    }

    .review-slide .review-program {
        text-align: start;
    }

    .introSection {
        padding: 60px 0;
    }

    .intro-title {
        margin-bottom: 24px;
        font-size: 24px;
    }

    .intro-cards {
        gap: 16px;
    }

    .intro-card {
        max-width: 768px;
        width: calc(100% - 32px);
        padding: 32px 12px;
    }

    .intro-step {
        margin-bottom: 16px;
    }

    .intro-heading {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .intro-desc {
        font-size: 14px;
    }

    .intro-more-wrap {
        margin-bottom: 16px;
    }

    .review-section .section-title, .partner-section .section-title {
        font-size: 24px;
    }

    .partner-section {
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .index-partner-slide img {
        min-width: fit-content;
    }

    .index-partner-slide-btm {
        margin-top: 26px;
    }

    .review-section .container {
        padding: unset;
    }

    .review-section {
        padding: 60px 0;
    }

    .review-card {
        min-width: unset;
    }

    .review-slide .review-title {
        font-size: 16px;
    }

    .review-slide .review-cont {
        font-size: 14px;
        margin-top: 16px;
        min-height: calc((14px * 1.2) * 3);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .review-slide {
        height: fit-content;
        min-height: 212px;
    }

    .review-slide .review-cont-wrap .review-cont.mb {
        display: flex;
    }

    .review-slide .review-cont-wrap .review-cont.pc {
        display: none;
    }


}


.side-floating-menu {
    position: fixed;
    top: 40%;
    right: 40px; /* 화면 오른쪽에서 살짝 떨어지게 */
    transform: translateY(-50%);
    background: #fff;
    border-radius: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 80px;
    z-index: 2000;
}

.side-floating-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-floating-menu li {
    margin: 24px 0;
}

.side-floating-menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-size: 14px;
    color: #333;
    transition: color 0.2s;
    text-align: center;
}

.side-floating-menu a:hover {
    color: #007be3;
    font-size: bold;
}

.side-floating-menu img {
    width: 41px;
    height: auto;

}

/* 반응형 */
@media (max-width: 1024px) {
    .side-floating-menu {
        display: none;
    }
}


.modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1000;
}

/* 오버레이 */
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* 컨텐츠 */
.modal-content {
    position: relative;
    background: #fff;
    width: 680px;
    max-height: 90vh;
    border-radius: 24px;
    overflow-y: auto;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    padding: 80px 30px;
}

/* 헤더 */
.modal-title {
    font-size: 40px;
    font-weight: bold;
    margin: 0 auto 40px;
}

.modal-header {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #202020;
    border-top: 1px solid #202020;
    padding: 32px 0;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.modal-close {
    position: absolute;
    right: 30px;
    top: 30px;
    font-size: 40px;
    cursor: pointer;
}


.modal-header .program-title {
    font-size: 24px;
    color: #333;
    font-weight: bold;
}

.modal-header .program-cost {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    font-size: 16px;
    color: #222;
}

/* 본문 */
.modal-body {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.modal-body .date-range {
    max-width: unset;
}

.modal-body .filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border-bottom: unset;
    border: unset;
}

.modal-body .filter-group select {
    min-width: unset;
}

.modal-body .agree-item .check-icon {
    padding: 1px 3px;
}

.modal-body .form-btn-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.modal-body .form-btn-wrap .btn {
    width: 100%;
}

.modal-body .form-btn-wrap .btn-line {
    border: solid 1px #e4e4e4;
    background-color: #fff;
    color: #202020;
}

.modal-body .form-btn-wrap .btn-full-grey {
    background-color: #e4e4e4;
}

.modal-body .form-btn-wrap .btn-full-grey.active {
    background-color: #505ea4;
}


.modal-body .input-wrap .filter-group {
    padding-bottom: unset;
    margin-bottom: unset;
}


/* ✅ 반응형: 1280px 이하 전체화면 */
@media (max-width: 1280px) {
    .modal-content {
        width: 100%;
        max-width: 768px;
        height: 100%;
        max-height: none;
        border-radius: 0;
        transform: none;
        top: 0;
        left: 0;
        padding: 60px 16px;
    }

    #requestModal .modal-content,
    #applyModal .modal-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 90vh;
        width: 90%;
        max-width: 680px;
        padding: 24px 16px;
        border-radius: 8px;
    }

    .modal-close {
        font-size: 30px;
        top: 16px;
        right: 16px;
    }


    .modal-title {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .modal-header {
        padding: 24px 0;
    }

    .modal-header .program-title {
        font-size: 20px;
    }

    .modal-header .program-cost {
        margin-top: 12px;
        font-size: 14px;
    }

    .modal-header .program-cost p {
        font-size: 14px;
    }

    .modal-body .filter-group {
        margin-bottom: unset;
        padding-bottom: unset;
    }


}


/* 작성예시 */
.floating-btn {
    position: fixed;
    top: 40%;
    right: 10%;
    z-index: 1000;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font-size: 14px;
}

.floating-btn img {
    width: 92px;
}


/* 반응형: 1280px 이하에서는 fullscreen */
@media (max-width: 1280px) {

}


#previewModal .modal-content {
    width: 100%;
    max-width: 1440px;
    position: absolute;
    top: inherit;
    bottom: inherit;
    border-radius: 16px 16px 0 0;
    padding: 0;
    transform: translate(-50%, 112%);
    transition: transform 0.3s ease-in-out;
}


#previewModal .modal-close {
    position: sticky;
    top: 16px;
    margin-left: auto;
    display: block;
    right: 16px;
    background: #fff;
    border: none;
    font-size: 28px;
    cursor: pointer;
    z-index: 10;
}


#requestModal .modal-close,
#applyModal .modal-close {
    position: sticky;
    top: 0px;
    margin-left: auto;
    display: block;
    right: 8px;
    background: #fff;
    border: none;
    font-size: 28px;
    cursor: pointer;
    z-index: 10;
}

#previewModal .modal-body {
    max-width: unset;
}


#previewModal .modal-body img {
    display: block;
    width: 100%;
    height: auto;
}


/* 기본 모달 공통 스타일 */
#previewModal {


}

/* 모달 콘텐츠 */
/* previewModal 전용 */

#previewModal.is-open .modal-content {
    transform: translate(-50%, 12%); /* ✅ 열릴 때 위로 올라옴 */
}


@media (max-width: 1280px) {
    .floating-btn img {
        width: 50px;
    }

    .floating-btn {
        font-size: 12px;
        font-weight: 600;
    }

    #previewModal .modal-content {
        left: 50%;
        max-width: calc(100% - 24px);
    }

    #previewModal .modal-close {
        top: 8px;
        font-size: 20px;
        right: 8px;
    }

}

@media (max-width: 768px) {
    .floating-btn {
        font-size: 12px;
        right: 16px;
        gap: 8px;
    }


}

/*
@media (max-width: 768px) {
 #previewModal {
    align-items: flex-end;
  }
  #previewModal .modal-content {
    width: 100%;
    max-width: none;
    max-height: 80%;
    border-radius: 16px 16px 0 0;
    animation: slideUp 0.3s ease;
  }
}

@keyframes slideUp {
  from {transform: translateY(100%);}
  to   {transform: translateY(0);}
} */


.modal-center .modal-content {
    width: 100%;
    max-width: 440px;
    padding: 60px 32px 32px;
}

.modal-center .modal-title {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    margin-bottom: 16px;
}


#portfolioModal .portfolio-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

#portfolioModal .portfolio-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: solid 1px #e4e4e4;
    border-radius: 10px;
    padding: 0 18px;
    cursor: pointer;
    height: 56px;
    line-height: 54px;
    font-size: 16px;
    color: #202020;
}

#portfolioModal .portfolio-item .item-title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}

#portfolioModal .portfolio-item i {
    font-size: 16px;
    color: #cacaca;
}

#portfolioModal .portfolio-item.active {
    background-color: #505ea4;
    border-color: #505ea4;
}

#portfolioModal .portfolio-item.active .item-title {
    color: #fff;
}

#portfolioModal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

#portfolioModal button {
    font-size: 14px;
}

#portfolioModal .btn-submit:disabled {
    cursor: not-allowed;
}

#portfolioModal .btn-submit:not(:disabled) {
    background-color: #505ea4;
    border-color: #505ea4;
    cursor: pointer;
}


.modal-center .btn-line {
    background: #fff;
    border: solid 1px #e4e4e4;
    color: #202020;
}

.modal-center .btn-full-grey {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #fff;
    font-size: 14px;
    background-color: #e4e4e4;
}

.modal-center .btn-full-grey.active {
    background-color: #505ea4;
}

.modal-center .btn-full-grey:disabled {
    background-color: #e4e4e4;
    cursor: not-allowed;
}

.modal-center .form-btn-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-center .form-btn-wrap button {
    width: 100%;
    height: 56px;
}

.modal-center .modal-guide {
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    color: #222;
    margin-bottom: 24px;
}

/* 반응형: 1280px 이하 → 꽉 차게 */
@media (max-width: 1280px) {
    .modal-center .modal-content {
        border-radius: 16px;
        width: calc(100% - 32px);
        top: 50%;
        left: 50%;
        max-height: fit-content;
        transform: translate(-50%, -50%);
        padding: 40px 16px 16px;
    }

    .modal-center .modal-title {
        font-size: 16px;
        margin-bottom: 24px;
    }

    #portfolioModal .portfolio-item {
        height: 48px;
    }

    #portfolioModal .portfolio-item .item-title {
        font-size: 14px;
    }

    #portfolioModal .portfolio-list {
        gap: 8px;
        margin-bottom: 8px;
    }

    #portfolioModal .portfolio-item i {
        font-size: 14px;
    }

    .modal-center .form-btn-wrap button {
        height: 48px;
    }
}


.reviewModal .modal-title {
    text-align: center;
}

.reviewModal .star-rating {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reviewModal .star-rating img {
    max-width: 30px;
}

.reviewModal .rating-desc {
    margin-top: 24px;
    font-size: 16px;
    color: #222;
    text-align: center;
}

.reviewModal textarea {
    height: 200px;
}

.reviewModal .textarea-wrap {
    margin-top: 24px;
}

.reviewModal .upload-box {
    width: 56px;
    height: 56px;
    padding: 16px;
}

.reviewModal .upload-box i {
    font-size: 24px;
    color: #c4c4c4;
    margin-bottom: unset;
}

.reviewModal .input-wrap.btm {
    margin-top: 16px;
    margin-bottom: 16px;
}

.reviewModal .thumbnail {
    width: 56px;
    height: 56px;
}

.reviewModal .form-btn-wrap {
    margin-top: 24px;
}


/* 게시글 */
.postViewWrap {
    max-width: 1440px;
    margin: 60px auto 120px;
    padding: 40px 20px;
    font-family: sans-serif;
    color: #111;
}

.postViewWrap .postHead {
    border-top: 2px solid #202020;
    border-bottom: 1px solid #dedede;
    padding: 32px 0;
}

.postTitle {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.postMeta {
    text-align: center;
    color: #aeaeae;
    font-size: 14px;
    display: flex;
    justify-content: center;
    gap: 24px;
}

.postMeta strong {
    font-weight: 600;
    margin-right: 8px;
}

.postContent {
    padding: 40px 0 80px;
}

.postContent img {
    width: fit-content;
    max-width: 100%;
    margin: 32px 0;
}

.postFile {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    padding: 16px 24px;
    border-radius: 4px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    margin: 40px 0;
    font-size: 17px;
    font-weight: 600;
    color: #202020;
}

.postFile i {
    font-size: 20px;
    color: #a4a4a4;
}

.postFile .x-icon {
    font-style: normal;
}

.downloadBtn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
}

.postNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #333;
    border-top: 1px solid #333;
    padding-top: 16px;
    margin-top: 32px;
}

.postNav .label {
    font-size: 16px;
    font-weight: bold;
    color: #202020;
    min-width: fit-content;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.postNav .prev .label {
    margin-right: 20px;
}

.postNav i {
    font-size: 24px;
    color: #202020;
    line-height: 1.2;
}

.postNav .prev .label i {
    margin-right: 8px;
}

.postNav .next .label {
    margin-left: 20px;
}

.postNav .next .label i {
    margin-left: 8px;
}

.postNav button {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 30%;
}

.postNav .next {
    justify-content: right;
}

.postNav button .title {
    font-size: 16px;
    font-weight: 300;
    color: #202020;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 288px;
}

.postFile span {
    margin: 0 8px;
}


.listBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #aeaeae;
    border-radius: 999px;
    cursor: pointer;
    width: 56px;
    height: 56px;
}

.listBtn i {
    font-size: 24px;
    color: #aeaeae;
}


@media screen and (max-width: 1024px) {

    .postViewWrap .postHead {
        padding: 16px 0;
    }

    .postContent {
        padding: 40px 0;
    }

    .postTitle {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .postFile {
        margin: 16px 0;
    }

    .postFile i {
        font-size: 18px;
    }

    .postFile span {
        font-size: 14px;
    }

    .postNav button {
        flex-direction: column-reverse;
        align-items: end;
    }

    .postNav button.prev {
        flex-direction: column;
        align-items: start;
    }

    .postNav button .title {
        font-size: 12px;
        color: #AEAEAE;
        max-width: 120px;
    }

    .listBtn {
        border: 1px solid #aeaeae;
        width: 40px;
        height: 40px;
    }

    .listBtn i {
        font-size: 16px;
    }

    .postNav {
        margin-top: 16px;
    }

    .postNav .label i {
        font-size: 23px;
    }

    .postNav .label {
        font-size: 14px;
    }


    .postViewWrap {
        margin-bottom: 60px;
        margin-top: unset;
    }

}


.detailSection {
    padding-bottom: 120px;
}

@media screen and (max-width: 1280px) {

    .detailSection {
        padding-bottom: 80px;
    }
}


/* 고객 지원 support */
.supportSection {
    margin: 80px 0 120px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.support-box-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    justify-content: center;
    margin-top: 60px;
}

.support-box-wrap .support-box {
    width: calc((100% - (24px * 2)) / 3);
    border-radius: 24px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 227px;
}

.support-box-wrap .link-box {
    background-color: #505ea4;
    position: relative;
}

.support-box-wrap .link-box img {
    position: absolute;
    right: 40px;
    top: 32px;
    max-width: 63px;
    aspect-ratio: 1/1;
}

.support-box-wrap .support-box p {
    color: #202020;
}

.support-box-wrap .link-box p {
    color: #fff;
}


.support-box-wrap .title {
    font-size: 16px;
    font-weight: 600;
}

.support-box-wrap .content {
    font-size: 32px;
    font-weight: bold;
    margin-top: 10px;
}

.support-box-wrap .info {
    font-size: 14px;
    opacity: 0.4;
    line-height: 1.43;
}


@media screen and (max-width: 1440px) {

    .support-box-wrap .content {
        font-size: 24px;
    }

}


@media screen and (max-width: 1280px) {

    .supportSection {
        margin: 60px 0;
    }

    .support-box-wrap {
        flex-direction: column;
        max-width: 768px;
        margin: 24px auto 0;
        gap: 16px;
    }

    .support-box-wrap .support-box {
        width: 100%;
        border-radius: 16px;
        padding: 20px;
        gap: 24px;
        height: unset;
        min-height: 138px;
    }

    .support-box-wrap .title {
        font-size: 14px;
    }

    .support-box-wrap .content {
        font-size: 22px;
        margin-top: 6px;
    }

    .support-box-wrap .info {
        font-size: 12px;
    }

    .support-box-wrap .link-box img {
        max-width: 46px;
        top: 20px;
        right: 20px;
    }

}


/* 약관 */

.policy-page {
    max-width: 1440px;
    margin: 0 auto;
}


.terms-container {
    max-width: 1472px;
    padding: 0 16px;
    margin: 120px auto 202px;
    color: #202020;
}

.terms-container h2 {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 78px;
    text-align: center;
    color: #000;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 78px;
    text-align: left;
}

.terms-article {
    margin-bottom: 36px;
}

.terms-article h3 {
    font-size: 20px;
    font-weight: bold;
    color: #202020;
    margin-bottom: 12px;
}

.terms-article p {
    font-size: 20px;
    color: #202020;
    line-height: 1.5;
}

.terms-article ul {
    padding-left: 20px;
    margin: 8px 0 12px;
}

.terms-article ul li {
    font-size: 20px;
    color: #202020;
}

.terms-article ul li:not(:last-child) {
    margin-bottom: 12px;
}

.terms-article ul li ul {
    margin-top: 6px;
    padding-left: 20px;
    margin-top: 12px;
}

.terms-article ul li ul li {
    font-size: 16px;
    color: #202020;
}


@media screen and (max-width: 1024px) {

    .terms-container {
        margin: 120px auto 80px;
    }

    .terms-container h2 {
        font-size: 24px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .terms-article {
        margin-bottom: 24px;
    }

    .terms-article h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .terms-article p,
    .terms-article ul li {
        font-size: 14px;
    }

    .terms-article ul {
        padding-left: 8px;
    }

    .terms-article ul li ul {
        padding-left: 14px;
        margin-top: 8px;
    }


    .terms-container .table-wrap th, .terms-container .table-wrap td {
        font-size: 14px;
    }

}


.terms-container .table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 16px 0;
}

.terms-container .table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    min-width: 600px; /* 모바일에서 가로 스크롤 발생 */
}

.terms-container .table-wrap th,
.terms-container .table-wrap td {
    border: 1px solid #e0e0e0;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.terms-container .table-wrap th {
    background: #f9f9f9;
    font-weight: bold;
}


.policy-page .tab-menu {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 24px;
}

.policy-page .tab-btn {
    flex: 1;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    opacity: 0.4;
    color: #222;
}

.policy-page .tab-btn.active {
    border-bottom: 2px solid #000;
    opacity: unset;
}

.policy-page .tab-content {
    display: none;
}

.policy-page .tab-content.active {
    display: block;
}


.registerSection .terms-article h3 {
    font-size: 12px;
    margin-bottom: 8px;
}

.registerSection .terms-article p,
.registerSection .terms-article ul li {
    font-size: 10px;
}

.registerSection .terms-article ul {
    padding-left: 8px;
}

.registerSection .terms-article ul li:not(:last-child) {
    margin-bottom: 4px;
}

.registerSection .terms-article {
    margin-bottom: 12px;
}

.registerSection .terms-container {
    padding: unset;
    margin: 8px 0;
}

.registerSection .terms-container .table-wrap th,
.registerSection .terms-container .table-wrap td {
    font-size: 10px;
}

.registerSection .terms-container .table-wrap table {
    max-width: 573px;
}


@media screen and (max-width: 1280px) {
    .terms-container {
        margin: 40px 0 60px;
    }
}


.guide-container {
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 16px;
}

.guide-container h2 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
    color: #111;
}

.guide-article {
    margin-bottom: 60px;
}

.guide-article h3 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #222;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.guide-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: solid 1px #e4e4e4;
    position: relative;
    padding-right: 20%;
}

.guide-container span {
    display: flex;
    font-size: 6px;
    margin-right: 8px;
}

.guide-card h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
}

.guide-container ul li {
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.guide-card img {
    position: absolute;
    max-width: 80px;
    bottom: 20px;
    right: 20px;
}

.guide-container li.re-type {
    align-items: baseline;
}


.guide-card.highlight ul li {
    color: rgba(255, 255, 255, 0.95);
}

.guide-card .sub-text {
    font-size: 14px;
    color: #666;
    display: contents;
}


@media screen and (max-width: 1280px) {

    .guide-container {
        margin: 60px auto;
    }

    .guide-article {
        margin-bottom: 32px;
    }

    .guide-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .guide-card {
        padding: 20px;
        padding-top: 24px;
    }

    .guide-card img {
        position: unset;
        max-width: 60px;
        float: right;
    }

    .guide-article h3 {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .guide-card h4 {
        font-size: 16px;
    }

}

.adMark {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 12px;
    color: #999;
    position: relative;
    cursor: pointer;
}

/* 말풍선 기본 */
.adMark::after {
    content: "프모 광고 서비스에 등록된 프로그램입니다.\A‘프모 PICK 추천 프로그램’과 함께\A메인 페이지에 노출됩니다.";
    white-space: pre-line;
    position: absolute;
    bottom: 188%;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    max-width: 90vw;
    background-color: #f1f1f1;
    color: #202020;
    font-size: 14px;
    padding: 10px;
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 99999;
}

/* 꼬리 */
.adMark::before {
    content: "";
    position: absolute;
    bottom: 90%;
    left: 46%;
    transform: translateX(-50%);
    border-width: 9px;
    border-style: solid;
    border-color: #f1f1f1 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 99999;
}

/* 호버 시 보이기 */
.adMark:hover::after,
.adMark:hover::before {
    opacity: 1;
    visibility: visible;
}

/* --- 방향 전환 --- */
/* 오른쪽 붙을 때 */
.adMark.tooltip-right::after {
    right: 0;
    left: auto;
    transform: none; /* translateX 빼야 자연스러움 */
}

.adMark.tooltip-right::before {
    right: 20px; /* 꼬리를 살짝 안쪽으로 */
    left: auto;
    transform: none;
}

/* 왼쪽 붙을 때 */
.adMark.tooltip-left::after {
    left: 0;
    transform: none;
}

.adMark.tooltip-left::before {
    left: 20px;
    transform: none;
}


/* PC 기본 툴팁  */
@media (min-width: 1281px) {

    .adMark::after {
        font-size: 12px;
        left: 244%;
        transform: translateX(-50%);
    }

    .adMark::before {
        left: 70%;
        transform: translateX(-50%) rotate(0deg);
    }
}

/* 모바일/태블릿 (1280px 이하) → 기존 그대로 중앙 */
@media (max-width: 1280px) {
    .adMark::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .adMark::before {
        left: 50%;
        transform: translateX(-50%);
    }
}

.input-title.re-type:after {
    display: none;
}

.input-title.re-type {
    gap: unset;
}

.input-title.re-type .star {
    color: #ed1515;
    font-size: 16px;
    font-weight: bold;
    margin: 0 4px;
}

.input-title.re-type .input-side-sub {
    position: unset;
}

.joinSection .input-side-sub, .edit-form-wrap .input-side-sub {
    margin: unset;
}


.mmp {
    display: flex;
}

.mmb {
    display: none;
}

@media (max-width: 374px) {

    .mmp {
        display: none;
    }

    .mmb {
        display: block;
    }

    .input-side-sub {
        font-size: 10px;
    }

    .input-side-sub.mmb {
        margin-top: -8px;
    }

    .input-title {
        font-size: 12px;
    }

    .input-title.re-type .input-side-sub {

    }

}


.mmt-8 {
    margin-top: -8px;
    color: #2c3aa0;
    font-weight: 500;
}

.time {
    font-size: 14px;
    margin-top: -10px;
}

.regi-btn {
    max-width: 360px;
    height: 56px;
    margin: 40px auto 0;
}


/* 수요자 - 강사모집공고 - 상세리스트 recruitmentTableListWrap */

.recruitmentTableListWrap .m-title {
    display: none;
}

.recruitmentTableListWrap .in-title {
    text-align: center;
}

@media screen and (max-width: 1280px) {
    .recruitmentTableListWrap .m-title {
        display: flex;
    }

    .recruitmentTableListWrap .col-title {
        margin-top: unset;
    }


    .recruitmentTableListWrap .m-left-cell {
        display: flex;
        text-align: left;

    }

    .recruitmentTableListWrap .table-row .inner-cell-wrap {
        flex-direction: column-reverse;
    }

    .recruitmentTableListWrap .m-left-cell p {
        color: rgba(0, 0, 0, 0.5);
        font-size: 12px;
    }

    .recruitmentTableListWrap .m-left-cell .in-title {
        font-weight: 500;
        margin-left: 12px;
    }


}


/* 수요자 - 마이페이지 - 포트폴리오 상세 portfolioDetailSection */

.portfolioDetailSection .info-box {
    pointer-events: unset;
    user-select: unset;
}

.portfolioDetailSection .info-box::before {
    display: none;
}

.portfolioDetailSection .info-box h2 {
    font-size: 40px;
}

.portfolioDetailSection .info-top-wrap {
    margin-bottom: unset;
}

.portfolioDetailSection .detail-cont-wrap {
    padding-top: unset;
}

.portfolioDetailSection .detail-cont-wrap h2 {
    font-size: 32px;
}

.portfolioDetailSection .sub-title {
    text-align: left;
    font-size: 24px;
    font-weight: bold;
    color: #222;
    margin-bottom: 16px;
}

.portfolioDetailSection .sub-cont {
    font-size: 16px;
    opacity: 0.8;
    color: #222;
    line-height: 1.5;
}

.portfolioDetailSection .sub-item:not(:last-child) {
    margin-bottom: 40px;
}

.portfolioDetailSection .info-box {
    flex: unset;
    width: 100%;
}

.portfolioDetailSection .program-detail {
    flex-direction: column;
}


@media screen and (max-width: 1280px) {

    .portfolioDetailSection .info-box h2 {
        font-size: 32px;
    }

    .portfolioDetailSection .detail-cont-wrap h2 {
        font-size: 24px;
    }

    .portfolioDetailSection .sub-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .portfolioDetailSection .sub-cont {
        font-size: 14px;
    }

    .portfolioDetailSection .sub-item:not(:last-child) {
        margin-bottom: 24px;
    }

}


/* 250930 */
.form-btn-wrap .btn-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 48px;
    width: fit-content;
    margin: 32px auto 0;
}

@media screen and (max-width: 1280px) {
    .form-btn-wrap .btn-wrap {
        gap: 24px;
        margin: 32px auto 0;
    }
}


.no-post {
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(14px, 2vw, 18px);
    margin: clamp(24px, 5vh, 54px) auto;
    padding: 0 16px;
}

.no-post.re-position {
    margin-left: -115px;
    padding-top: 180px;
}


@media screen and (max-width: 1280px) {

    .no-post.re-position {
        margin-left: unset;
        padding-top: unset;
    }

}


.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

/* 사이드 정렬 셀렉트 */
.sido-select {
    margin-bottom: 6px;
}


/* 사이트 팝업 */
/* 전체 오버레이 */
.site-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 9998;
    display: none;
}


/* 팝업 전체 묶음 */
.site-popup-wrap {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;

    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 20px;
}

.site-popup-wrap.is-open {
    display: flex;
}

.site-popup-overlay.is-open {
    display: flex;
}

.popup-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 20px;
}


/* 개별 팝업 */


.site-popup-dialog .site-popup-body {
    max-width: 480px;
    aspect-ratio: 1 / 1;
    min-height: fit-content;
}

.site-popup-body a {

}


:root {
    --popup-size: 560px;
    --popup-footer-height: 50px;
}

.site-popup-dialog {

    --responsive-size: unset;
    /* width: var(--responsive-size); */
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
    display: flex;
    flex-direction: column;
}


.site-popup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-radius: 0 0 14px 14px;
}


.site-popup-body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 1/1;
}

@media screen and (max-width: 1280px) {

    :root {
        --popup-footer-height: 32px;
    }

}


@media screen and (max-width: 768px) {

    :root {
        --popup-size: 480px;
    }

    .site-popup-wrap.is-open {

        padding: 40px 16px;
        height: 100vh;
        overflow-y: scroll;
    }


    .popup-inner {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        min-height: fit-content;
        top: 0;
        padding: 20px 0;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        max-width: 100%;

    }


    .site-popup-dialog {
        width: 100%;
        max-width: 480px; /* 모바일 최대 크기 제한 */
    }

    .site-popup-footer {
        padding: 4px 12px;
    }


    .site-popup-body img {
        width: 100%;
        display: block;
    }

    .site-popup-never {
        font-size: 14px;
    }

}


/* 프로그램등록 파일첨부 */
.grey-type-2 {
    width: 100%;
    background-color: #707070;
    height: 51px;
    font-weight: normal;
}

@media screen and (max-width: 1280px) {
    .grey-type-2 {
        height: 48px;
    }
}


/* 찜하기 꽉찬ver */
.full-line {
    max-width: unset;
}

.full-line.active {
    background-color: #505ea4;
    color: #fff;
}