@charset "utf-8";

#container {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* support 페이지는 상단 배너를 사용하지 않으므로 기본 상단 이미지를 숨긴다. */
#ctt_himg {
    display: none;
}

#ctt.jc-support {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

#ctt.jc-support .jc-support-form {
    width: 100%;
    padding: 0;
    background: #ffffff;
}

#ctt.jc-support .jc-support-inner {
    box-sizing: border-box;
    width: min(1440px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
}

#ctt.jc-support .jc-support-content {
    width: 100%;
    padding: 64px 140px 160px;
    display: flex;
    align-items: flex-start;
    gap: 48px;
    /* sticky 레이아웃: 왼쪽 고정을 위해 부모는 stretch가 아닌 flex-start */
    box-sizing: border-box;
}

#ctt.jc-support .jc-support-intro {
    width: 527px;
    max-width: 100%;
    flex: 1 1 527px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 44px;
    /* PC 전용 sticky: 기존 상단 여백을 유지한 채 즉시 고정 */
    position: sticky;
    top: calc(var(--header-height, 66px) + 64px);
    align-self: flex-start;
}

/* PC Figma: Subtitle Strong 32px Bold, line-height 1.2, letter-spacing -0.02em */
#ctt.jc-support .jc-support-title {
    margin: 0;
    width: 100%;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    word-break: keep-all;
}

/* PC Figma: Body Strong 16px Medium */
#ctt.jc-support .jc-support-desc {
    margin: 0;
    width: 100%;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: pretty;
}

#ctt.jc-support .jc-support-faq {
    width: 625px;
    max-width: 100%;
    flex: 0 0 625px;
    border-top: 1px solid #ebebeb;
}

@media (min-width: 1025px) and (max-width: 1279px) {
    #ctt.jc-support .jc-support-content {
        padding: 64px 80px 120px;
        gap: 40px;
    }

    #ctt.jc-support .jc-support-intro,
    #ctt.jc-support .jc-support-faq {
        width: auto;
        min-width: 0;
        flex: 1 1 0;
    }
}

#ctt.jc-support .jc-support-faq-item {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 24px 0;
    border-bottom: 1px solid #ebebeb;
}

#ctt.jc-support details.jc-support-faq-item>summary {
    list-style: none;
}

#ctt.jc-support details.jc-support-faq-item>summary::-webkit-details-marker {
    display: none;
}

#ctt.jc-support .jc-support-question {
    margin: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
}

#ctt.jc-support details.jc-support-faq-item>.jc-support-question {
    cursor: pointer;
}

/* PC Figma: Subheading Strong 20px Bold #F29712 */
#ctt.jc-support .jc-support-question-mark {
    flex: 0 0 auto;
    min-width: 15px;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #FF5B25;
}

/* PC Figma: Subheading Strong 20px Bold */
#ctt.jc-support .jc-support-question-text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #000000;
    word-break: keep-all;
}

#ctt.jc-support .jc-support-question-text * {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

#ctt.jc-support .jc-support-question-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

#ctt.jc-support .jc-support-question-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #000000;
    border-bottom: 1.5px solid #000000;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: transform 0.2s ease;
}

#ctt.jc-support details.jc-support-faq-item[open] .jc-support-question-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#ctt.jc-support .jc-support-answer-wrap {
    overflow: clip;
}

/* PC Figma: Body Base 16px Regular, pt 24px (space/600) */
#ctt.jc-support .jc-support-answer {
    margin: 0;
    padding-top: 24px;
    width: 100%;
    font-family: "Pretendard", "SUIT Variable", "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
    transform-origin: top;
    will-change: opacity, transform;
    word-break: keep-all;
}

#ctt.jc-support .jc-support-answer * {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* Figma 테블릿(company/vision): padding 96px, gap 24px·48px, 세로 1열 */
@media (max-width: 1024px) {
    #ctt.jc-support .jc-support-content {
        padding: 96px;
        flex-direction: column;
        gap: 24px;
    }

    #ctt.jc-support .jc-support-intro {
        gap: 48px;
        /* 태블릿/모바일에서는 sticky 해제 */
        position: static;
        top: auto;
        align-self: auto;
    }

    #ctt.jc-support .jc-support-intro,
    #ctt.jc-support .jc-support-faq {
        width: 100%;
        max-width: 100%;
        flex: 0 1 auto;
        margin-top: 0;
    }

    #ctt.jc-support .jc-support-title {
        font-size: 24px;
        font-weight: 600;
    }

    #ctt.jc-support .jc-support-desc {
        font-size: 13px;
        font-weight: 400;
    }

    #ctt.jc-support .jc-support-question-mark {
        font-size: 14px;
        font-weight: 500;
    }

    #ctt.jc-support .jc-support-question-text {
        font-size: 14px;
        font-weight: 500;
    }

    #ctt.jc-support .jc-support-answer {
        font-size: 13px;
        font-weight: 400;
    }
}

/* Figma 모바일(360px 기준): 타이포·간격 */
@media (max-width: 640px) {
    #ctt.jc-support .jc-support-inner {
        padding: 0;
        gap: 0;
        display: flex;
        justify-content: center;
    }

    #ctt.jc-support .jc-support-content {
        width: 100%;
        margin: 0 auto;
        max-width: none;
        padding: 48px 32px;
        background: #ffffff;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        box-sizing: border-box;
    }

    #ctt.jc-support .jc-support-intro,
    #ctt.jc-support .jc-support-faq {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
    }

    #ctt.jc-support .jc-support-intro {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    #ctt.jc-support .jc-support-title {
        width: 100%;
        max-width: 100%;
        font-size: 24px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0;
    }

    #ctt.jc-support .jc-support-desc {
        width: 100%;
        max-width: 100%;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.4;
    }

    #ctt.jc-support .jc-support-desc .jc-line {
        display: inline;
    }

    #ctt.jc-support .jc-support-desc .jc-line + .jc-line::before {
        content: " ";
    }

    /* Figma 모바일(360px): FAQ 영역 */
    #ctt.jc-support .jc-support-faq {
        border-top: 1px solid #ebebeb;
        padding-top: 0;
    }

    #ctt.jc-support .jc-support-faq-item {
        padding: 24px 0;
        border-bottom: 1px solid #ebebeb;
    }

    #ctt.jc-support details.jc-support-faq-item[open] {
        padding: 12px 0 12px;
    }

    #ctt.jc-support .jc-support-faq-item+.jc-support-faq-item {
        padding-top: 24px;
    }

    #ctt.jc-support .jc-support-question-mark {
        font-size: 14px;
        font-weight: 500;
        line-height: 18.2px;
        color: #FF5B25;
    }

    #ctt.jc-support .jc-support-question-text {
        font-size: 14px;
        font-weight: 500;
        line-height: 18.2px;
        color: #000000;
    }

    #ctt.jc-support .jc-support-answer {
        padding-top: 12px;
        font-size: 13px;
        font-weight: 400;
        line-height: 18.2px;
        color: #000000;
    }
}

@media (max-width: 360px) {
    #ctt.jc-support .jc-support-title {
        font-size: 20px;
    }
}