@charset "UTF-8";
/* variable */
/* 전체 스크롤바 스타일 */
::-webkit-scrollbar {
    width: 6px; /* 스크롤바의 너비 */
}

/* 스크롤바의 트랙(배경) */
::-webkit-scrollbar-track {
    background: #f8f8f8;
    border-radius: 10px; /* 모서리 둥글게 */
}

/* 스크롤바의 핸들(움직이는 부분) */
::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 300px; /* 모서리 둥글게 */
}

/* 스크롤바의 핸들(hover 상태) */
::-webkit-scrollbar-thumb:hover {
    background: #aeaeae;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

li, ol, ul {
    list-style: none;
}

button {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: inherit;
    font-weight: inherit;
}

section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 1440px;
    height: 100%;
    display: flex;
    position: relative;
}

#wrap {
    width: 100%;
    height: 100vh;
    padding-top: 140px;
    position: relative;
    /* .bg-area */
}

#wrap .bg-area {
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    overflow: hidden;
    pointer-events: none;
}

#wrap .bg-area .ob-box {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

#wrap .bg-area .ob-box svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

#wrap .bg-area .ob-box.left {
    right: 8%;
    width: 150%;
}

#wrap .bg-area .ob-box.left svg path {
    fill: #DC6468;
}

#wrap .bg-area .ob-box.right {
    left: 62%;
    top: -20px;
    width: 90%;
}

#wrap .bg-area .ob-box.right svg path {
    fill: #FDD458;
}

.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: inherit;
}

.disabled {
    pointer-events: none;
}

/* 버튼 툴팁 메세지 */
.tooltip:hover .tooltip-box {
    translate: 0 0;
    opacity: 1;
}

.tooltip:hover .tooltip-box span {
    font-family: "SUIT Variable", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.25px;
    color: #fff;
}

.tooltip {
    position: relative;
}

.tooltip .tooltip-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: -moz-max-content;
    width: max-content;
    padding: 14px 24px;
    border-radius: 4px;
    top: calc(100% + 8px);
    background: rgba(42, 42, 42, 0.8);
    opacity: 0;
    translate: 0 -4px;
    transition: all 0.4s ease;
}

.tooltip .tooltip-box span {
    font-family: "SUIT Variable", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.25px;
    color: #fff;
}

.tooltip.top .tooltip-box {
    top: auto;
    bottom: calc(100% + 8px);
    translate: 0 4px;
    transition: all 0.4s ease;
}

.tooltip.top:hover .tooltip-box {
    translate: 0;
}

section.paging-button-content-wrap.qna {
    display: none;
}

section.paging-button-content-wrap.qna .container .paging-button-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* 기본 */
    /* 이전 버튼 */
    /* 다음 버튼 */
    /* 학습시작 버튼 */
    /* 버튼 숨기기 클래스 */
}

section.paging-button-content-wrap.qna .container .paging-button-box .button-area a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 43px;
    border-radius: 300px;
    background: #B70002;
}

section.paging-button-content-wrap.qna .container .paging-button-box .button-area a span {
    font-family: "SUIT Variable", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.8px;
    color: #fff;
}

section.paging-button-content-wrap.qna .container .paging-button-box .button-area a .icon-box {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

section.paging-button-content-wrap.qna .container .paging-button-box .button-area a .icon-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

section.paging-button-content-wrap.qna .container .paging-button-box .button-area.prev a .icon-box {
    margin-right: 8px;
}

section.paging-button-content-wrap.qna .container .paging-button-box .button-area.prev a:hover .icon-box {
    translate: -10px 0;
    opacity: 0;
}

section.paging-button-content-wrap.qna .container .paging-button-box .button-area.next a .icon-box {
    margin-left: 8px;
    rotate: 180deg;
}

section.paging-button-content-wrap.qna .container .paging-button-box .button-area.next a:hover .icon-box {
    translate: 10px 0;
    opacity: 0;
}

section.paging-button-content-wrap.qna .container .paging-button-box .button-area.next.start a:hover .icon-box {
    rotate: 135deg;
    translate: unset;
    opacity: unset;
}

section.paging-button-content-wrap.qna .container .paging-button-box .button-area.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

section.paging-button-content-wrap.learning {
    padding-top: 60px;
}

section.paging-button-content-wrap.learning .container .paging-button-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

section.paging-button-content-wrap.learning .container .paging-button-box .button-area {
    display: flex;
}

section.paging-button-content-wrap.learning .container .paging-button-box .button-area a {
    width: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    border: 1px solid #ddd;
    border-radius: 12px;
    transition: border 0.4s ease;
    position: relative;
    z-index: 2;
}

section.paging-button-content-wrap.learning .container .paging-button-box .button-area a span {
    font-family: "SUIT Variable", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.25px;
    color: #aeaeae;
    transition: color 0.4s ease;
}

section.paging-button-content-wrap.learning .container .paging-button-box .button-area a:not(:last-child) {
    margin-right: 24px;
}

section.paging-button-content-wrap.learning .container .paging-button-box .button-area a:hover {
    border: 1px solid #2a2a2a;
}

section.paging-button-content-wrap.learning .container .paging-button-box .button-area a:hover span {
    color: #2a2a2a;
}

@media (max-width: 768px) {

    /* 배경 레이어가 화면을 꽉 덮도록 */
    #wrap .bg-area {
        position: fixed;
        overflow: hidden;
        pointer-events: none;
    }

    /* 좌/우 도형을 일부러 더 크게(oversize) 깔아 틈 제거 */
    #wrap .bg-area .ob-box {
        /* SVG가 부모에 맞춰 커지도록 */
        width: auto;
        height: auto;
    }

    /* 왼쪽(분홍) — 오른쪽으로 조금 더 들어오게 + 살짝 아래로 */
    #wrap .bg-area .ob-box.left {
        right: -31vw;     /* 기존 8% → 음수로 당겨 겹침 강화 */
        bottom: -16vh;
        width: 287vw;     /* 기존 150% → 더 크게 덮기 */
    }

    /* 오른쪽(노랑) — 왼쪽으로 더 많이 진입 + 위쪽 살짝 올림 */
    #wrap .bg-area .ob-box.right {
        left: 15vw;       /* 기존 62% → 32vw로 당겨 분홍과 맞물림 */
        top: 13vh;        /* 기존 -20px → 뷰포트 기준으로 보정 */
        width: 359vw;     /* 기존 90% → 더 크게 덮기 */
    }

    /* SVG는 컨테이너에 딱 맞게 */
    #wrap .bg-area .ob-box svg {
        width: 100%;
        height: 100%;
    }
}