.problem-detail-wrap {
    padding: 0;

    /* 뒤로가기 버튼 */
    .back-btn {
        .btn {
            padding: 6px 20px 7px 30px; font-weight: 600; position: relative; display: inline-block; font-size: 1.3rem; color: #555; border-radius: 3px; background: #fff; border: 1px solid var(--line);
            &:after {
                content: ''; width: 10px; height: 10px; background-image: url('../img/common/left_arrow_b.svg'); background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: 11px; left: 10px; opacity: .6;
            }
            &:hover {
                box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
            }
        }
    }

    /* 문제 상세 헤더 */
    .problem-detail-head {
        --padding: 15px;
        padding: 40px 10px 30px; position: relative; border-bottom: 1px solid var(--line); text-align: center;
        .back-btn {
            position: absolute; top: -20px; left: 0;
        }
        .head-label {
            display: inline-block; padding: 2px 12px; background: #000; color: #fff; font-size: 1.5rem; font-weight: 700; border-radius: 4px;
            &.type-1 {
                background: var(--pink);
            }
            &.type-2 {
                background: var(--green);
            }
        }
        .head-title {
            font-size: 3rem; font-weight: 700; line-height: 1.4; color: #000; margin-top: var(--padding);
        }
        .head-info {
            display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; margin-top: var(--padding);
            span {
                font-size: 1.6rem; color: #666;
            }
        }
        .head-desc {
            padding: 15px; border-radius: 5px; background: #f2f2f2; border: 1px solid #d7d7d7; font-size: 1.6rem; line-height: 1.5; color: #333; margin-top: 20px;
        }
        .link-more {
            display: inline-block; padding: 3px 30px; border-radius: 50px; font-size: 1.3rem; font-weight: 600; margin-top: 10px; border: 1px solid #9d9d9d;
        }
        .btn-quote {
            margin-top: 20px; text-align: center;
            .btn {
                display: inline-flex; align-items: center; gap: 8px; padding: 8px 35px; border-radius: 50px; background: var(--navy); color: #fff; font-size: 1.6rem; font-weight: 600;
                img {
                    width: 15px; height: 15px;
                }
            }
        }
    }

    /* 문제 상세 */
    .problem-detail-view {
        padding: 0 0 50px;
        .item {
            padding: 20px; 
            &.item-1 {
                .detail-body {
                    .box {
                        background: #fdf3e9; border-color: #e3d4cd;
                        .box-txt {
                            border-color: #e3d4cd;
                        }
                    }
                }
            }
            &.item-2 {
                .detail-body {
                    .box {
                        background: #f5ecf7; border-color: #ddcde3;
                        .box-txt {
                            border-color: #ddcde3;
                        }
                    }
                }
            }
            &.item-3 {
                .detail-body {
                    .box {
                        background: #e9eff7; border-color: #cddae3;
                        .box-txt {
                            border-color: #cddae3;
                        }
                    }
                }
            }
            .detail-head {
                --icon-size: 40px;
                --gap: 15px;
                padding: 20px 0 15px; display: flex; gap: 5px var(--gap); flex-wrap: wrap;
                .icon {
                    width: var(--icon-size); height: var(--icon-size);
                }
                .tit {
                    width: calc(100% - var(--icon-size) - var(--gap)); font-size: 2rem; font-weight: 700; line-height: 1.4; color: var(--navy); word-break: keep-all; padding-top: 6px;
                }
                .txt {
                    width: 100%; font-size: 1.6rem; line-height: 1.5; 
                }
            }
            .detail-body {
                .box {
                    position: relative; padding: 15px; border-radius: 10px; background: #f2f2f2; border: 1px solid #d7d7d7;
                    &:not(:last-child) {
                        margin-bottom: 15px;
                    }
                    .box-tit {
                        font-size: 1.6rem; font-weight: 700; padding-bottom: 5px;
                    }
                    .box-txt {
                        max-height: 150px; overflow-y: auto; padding: 13px; background: #fff; border-radius: 5px; border: 1px solid #d7d7d7;
                        &::-webkit-scrollbar {
                            width: 4px; height: 10px;
                        }
                        &::-webkit-scrollbar-track {
                            background-color: transparent;
                        }
                        &::-webkit-scrollbar-thumb {
                            border-radius: 10px; background-color: #dcdcdc;
                        }
                        .txt {
                            font-size: 1.8rem; line-height: 1.7; color: #333;
                        }
                    }
                }
            }
            .src-area {
                --gap: 15px;
                --title-width: 50px;
                display: flex; gap: var(--gap); align-items: flex-start; margin-top: 10px;
                .src-title {
                    width: var(--title-width); display: flex; align-items: center; gap: 2px; padding: 2px 
                    ; justify-content: center; border-radius: 3px; background: #DACDDD; color: #4B1E40; font-size: 1.4rem; font-weight: 600;
                    img {
                        width: 11px; height: 11px; object-fit: contain; display: block;
                    }
                }
                .src-list {
                    width: calc(100% - var(--title-width) - var(--gap)); display: flex; flex-direction: column; gap: 5px; padding-top: 3px;
                    .src-item {
                        font-size: 1.4rem; color: #333; font-weight: 400; position: relative; padding-left: 10px; line-height: 1.4;
                        &:after {
                            content: ''; width: 4px; height: 4px; background: #333; border-radius: 50%; position: absolute; top: 8px; left: 0;
                        }
                        .file-link {
                            display: flex; align-items: center; gap: 2px; color: #333;
                            &:hover {
                                text-decoration: underline;
                            }
                            img {
                                width: 15px; height: auto;
                            }
                        }
                    }
                }
            }
        }
    }

    /* 인용 */
    .problem-quote {
        border-top: 1px solid var(--line); padding: 40px 0 70px;
        .board-group {
            padding-bottom: 50px;
        }
        .quote-title {
            .tit {
                font-size: 2.4rem; font-weight: 700;
            }
            .btn-wrap {
                position: absolute; bottom: 10px; right: 0;
            }
        }
        .back-btn {
            margin-top: 20px;
        }
    }
}



.quote-form-head {
    padding-bottom: 20px; margin-bottom: 60px; border-bottom: 1px solid var(--line);
    .tit {
        font-size: 2rem; font-weight: 700; padding-bottom: 10px;
    }
    .txt {
        position: relative; padding: 15px; border-radius: 5px; background: #fdf3e9; border: 1px solid #e3d4cd;font-size: 1.6rem; font-weight: 600; position: relative; padding-left: 10px; line-height: 1.4; color: #452b0a; display: block;
        .btn {
            padding: 5px 10px; border-radius: 3px; background: #fff; border: 1px solid var(--line); font-size: 1.3rem; font-weight: 600; color: #333; margin-left: 5px;
        }
    }

}

@media (max-width: 1024px) {
    .problem-detail-wrap {
        .problem-detail-head {
            --padding: 10px;
            .back-btn {
                top: -30px;
            }
            .head-label {
                font-size: 1.4rem;
            }
            .head-title {
                font-size: 2.5rem;
            }
            .head-info {
                span {
                    font-size: 1.4rem;
                }
            }
            .btn-quote {
                margin-top: 15px;
                .btn {
                    font-size: 1.4rem; gap: 5px;
                }
            }
        }
        .problem-detail-view {
            .item {
                padding: 20px 10px 10px;
                .detail-head {
                    --icon-size: 30px;
                    --gap: 10px;
                    padding-top: 0;
                    .tit {
                        font-size: 1.5rem; padding-top: 3px; line-height: 1.3;
                    }
                }
                .detail-body {
                    .box {
                        padding: 10px; border-radius: 5px;
                        .box-tit {
                            font-size: 1.4rem;
                        }
                        .box-txt {
                            padding: 10px; border-radius: 3px;
                            .txt {
                                font-size: 1.4rem;
                            }
                        }
                    }
                }
            }
        }
        .problem-quote {
            padding: 30px 0 50px;
            .quote-title {
                .tit {
                    font-size: 2.2rem;
                }
            }
        }
    }
}

@media (max-width: 650px) {
    .problem-detail-wrap {
        .back-btn {
            .btn {
                font-size: 1.2rem; padding: 4px 13px 5px 20px;
                &:after {
                    width: 9px; height: 9px; top: 10px; left: 8px;
                }
            }
        }
        .problem-detail-head {
            border-bottom: 8px solid #e9e9e9; padding: 50px 10px 25px;
            .sec-width {
                padding: 0;
            }
            .back-btn {
                top: -40px;
            }
            .head-label {
                font-size: 1.3rem; padding: 2px 10px;
            }
            .head-title {
                font-size: 2rem;
            }
            .head-info {
                span {
                    font-size: 1.2rem;
                }
            }
            .head-desc {
                font-size: 1.4rem;
            }
            .link-more {
                font-size: 1.2rem; width: 100%; padding: 3px 15px;
            }
            .btn-quote {
                margin-top: 10px;
                .btn {
                    font-size: 1.3rem; padding: 6px 25px;
                }
            }
        }
        .problem-detail-view {
            grid-template-columns: repeat(1, minmax(0, 1fr));
            .item {
                padding: 20px;
                &:not(:last-child) {
                    border-right: 0; border-bottom: 8px solid #e9e9e9;
                }
                .detail-head {
                    --icon-size: 25px;
                    .tit {
                        padding-top: 2px;
                    }
                }
                .detail-body {
                    padding: 10px 0; 
                    .box {
                        .box-txt {
                            max-height: auto; 
                        }
                    }
                }
                .src-area {
                    .src-title {
                        font-size: 1.3rem;
                    }
                    .src-list {
                        width: 100%; padding-top: 0;
                        .src-item {
                            font-size: 1.3rem; padding-left: 7px;
                            &:after {
                                width: 4px; height: 4px; top: 7px;
                            }
                        }
                    }
                }
            }
        }
        .problem-quote {
            padding: 30px 0 50px; border-top: 8px solid #e9e9e9;
            .quote-title {
                .tit {
                    font-size: 1.9rem;
                }
            }
            .board-group {
                padding-bottom: 30px;
            }
        }
    }
    .quote-form-head {
        padding-bottom: 15px; margin-bottom: 40px;
        .tit {
            font-size: 1.5rem; padding-bottom: 5px;
        }
        .txt {
            font-size: 1.4rem; padding: 10px; border-radius: 3px;
            .btn {
                font-size: 1.2rem; width: 100%; display: block; text-align: center; margin: 10px 0 0;
            }
        }
    }
}

@media (max-width: 485px) {
    .problem-detail-wrap {
        .problem-detail-head {
            --padding: 5px;
            .head-label {
                font-size: 1.2rem;
            }
            .head-title {
                font-size: 1.8rem; margin-top: 10px;
            }
            .btn-quote {
                .btn {
                    font-size: 1.2rem;
                    img {
                        width: 12px; height: 12px;
                    }
                }
            }
        }
        .problem-detail-view {
            .item {
                .detail-body {
                    .box {
                        .box-tit {
                            font-size: 1.3rem;
                        }
                        .box-txt {
                            .txt {
                                font-size: 1.3rem;
                            }
                        }
                    }
                }
                .src-area {
                    flex-direction: column; gap: 7px;
                    .src-list {
                        width: 100%;
                    }
                }
            }
        }
    }
}