@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@font-face {
    font-family: 'MalgunGothic';
    src: url('../css/malgunsl.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'NanumSquareNeoLight';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeoBold';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeoExtraBold';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeoHeavy';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeoVariable';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeo-Variable.ttf) format("truetype");
}

@font-face {
    font-family: 'CarlaSans';
    src: url('../css/Carla_Sans_Regular.otf') format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Gotham';
    src: url('../css/Gotham-Medium.ttf') format('truetype');
    font-weight: 400;
}

/* 후기 리스트 */

.review-container {
    margin-top: 58px;
    display: flex;
    box-sizing: border-box;
    padding: 120px;
    flex-direction: column;
    gap: 60px;
    background: #FFF;
    flex-direction: column;
}

.review-list-big-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

.review-list-container {
    width: 100%;
    display: flex;
    gap: 50px 20px;
    flex-wrap: wrap;
    min-height: 518px;
}

.review-list-container .review-box {
    width: calc(33.3% - 14px);
    height: fit-content;
    padding: 0;
    gap: 0;
}

.review-box-title {
    line-height: 130%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 52px;
}

.review-content {
    -webkit-line-clamp: 5;
    font-size: 16px;
    line-height: 150%; /* 24px */
    letter-spacing: -0.4px;
}

.review-content>img {
    display: none;
}

.review-content div, .review-content p, .review-content span {
    font-size: 16px;
    line-height: 150%; /* 24px */
    font-weight: 400;
    letter-spacing: -0.4px;
}

.review-content img {
    display: none;
}

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

.review-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    min-height: 265px;
}

.review-div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-box-date {
    color: #999;
}


/* 후기 상세 */
.review-detail-container {
    width: 100%;
    margin-top: 58px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    padding: 120px;
    justify-content: center;
}

.review-detail-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    box-sizing: border-box;
    padding: 0 10px;
}

.review-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EFEFEF;
}

.review-detail-content {
    color: #505050;
    font-size: 20px;
    line-height: 150%; /* 30px */
    letter-spacing: -0.5px;
}

.review-detail-content a {
    display: inline-block;
    cursor: pointer;
}

.review-writer {
    color: #505050;
    font-size: 16px;
    line-height: 150%; /* 24px */
    letter-spacing: -0.4px;
}

.review-detail-bottom {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
}

.review-btn-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.review-btn {
    width: 182px;
    display: flex;
    align-items: center;
    display: flex;
    box-sizing: border-box;
    padding: 12px 60px;
    align-items: center;
    justify-content: center;
}

.detail-back-btn {
    background: #BBB;
}

.detail-back-btn:hover {
    background: #AAA;
}

.detail-forward-btn {
    background: #1B1C80;
}

.detail-forward-btn:hover {
    background: #171855;
}

.go-list {
    background: #777;
    width: fit-content;
    display: flex;
    box-sizing: border-box;
    padding: 6px 44px;
    justify-content: center;
    align-items: center;
    margin-left: auto;
}

.review-detail-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
}

/* 후기 작성 */

#review_form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.flex-input {
    width: 100%;
    display: flex;
    gap: 40px;
}

.item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.item label {
    color: #505050;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 150% !important; /* 24px */
    letter-spacing: -0.4px !important;
}

input[type="text"] {
    display: flex;
    box-sizing: border-box;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    border: 1px solid #DDD;
    color: #505050;
    font-size: 16px;
    line-height: 24px; /* 150% */
    letter-spacing: -0.4px;
}

input[type="text"]::placeholder {
    color: #BBB;
    font-size: 16px;
    line-height: 24px; /* 150% */
    letter-spacing: -0.4px;
}

.w-3 {
    width: 75%;
}

.w-1 {
    width: 25%;
}

.ql-editor {
    font-family: 'Pretendard', 'Manrope', 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', 'Sandol Gothic Neo2', 'Nanum Square Neo', 'Carla', 'Gotham', sans-serif !important;
}

.ql-font .ql-picker-label[data-value="Pretendard"]::before,
.ql-font .ql-picker-item[data-value="Pretendard"]::before {
    content: "Pretendard" !important;
    font-family: 'Pretendard', sans-serif !important;
}

.ql-font-Pretendard {
    font-family: 'Pretendard', sans-serif !important;
}

.ql-font .ql-picker-label[data-value="Manrope"]::before,
.ql-font .ql-picker-item[data-value="Manrope"]::before {
    content: "Manrope" !important;
    font-family: 'Manrope', sans-serif !important;
}

.ql-font-Manrope {
    font-family: 'Manrope', sans-serif !important;
}

.ql-font .ql-picker-label[data-value="NotoSansKR"]::before,
.ql-font .ql-picker-item[data-value="NotoSansKR"]::before {
    content: "NotoSansKR" !important;
    font-family: 'NotoSansKR', sans-serif !important;
}

.ql-font-NotoSansKR {
    font-family: 'NotoSansKR', sans-serif !important;
}

.ql-font .ql-picker-label[data-value="NanumGothic"]::before,
.ql-font .ql-picker-item[data-value="NanumGothic"]::before {
    content: "나눔고딕" !important;
    font-family: 'NanumGothic', sans-serif !important;
}

.ql-font-NanumGothic {
    font-family: 'NanumGothic', sans-serif !important;
}

.ql-font .ql-picker-label[data-value="MalgunGothic"]::before,
.ql-font .ql-picker-item[data-value="MalgunGothic"]::before {
    content: "맑은고딕" !important;
    font-family: 'MalgunGothic', sans-serif !important;
}

.ql-font-MalgunGothic {
    font-family: 'MalgunGothic', sans-serif !important;
}

/* .ql-font-Sandol-Gothic-Neo2 {
    font-family: 'SandolGothicNeo2', sans-serif !important;
} */

.ql-font .ql-picker-label[data-value="NanumSquareNeo"]::before,
.ql-font .ql-picker-item[data-value="NanumSquareNeo"]::before {
    content: "나눔스퀘어네오" !important;
    font-family: 'NanumSquareNeo', sans-serif !important;
}

.ql-font-NanumSquareNeo {
    font-family: 'NanumSquareNeo', sans-serif !important;
}

.ql-font .ql-picker-label[data-value="Carla"]::before,
.ql-font .ql-picker-item[data-value="Carla"]::before {
    content: "CARLA Sans" !important;
    font-family: 'Carla', sans-serif !important;
}

.ql-font-Carla {
    font-family: 'CarlaSans', sans-serif !important;
}

.ql-font .ql-picker-label[data-value="Gotham"]::before,
.ql-font .ql-picker-item[data-value="Gotham"]::before {
    content: "Gotham" !important;
    font-family: 'Gotham', sans-serif !important;
}

.ql-font-Gotham {
    font-family: 'Gotham', sans-serif !important;
}

.ql-font-sans-serif {
    font-family: 'sans-serif' !important;
}

.add-line {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 10px 0;
    padding: 8px 10px;
    border: 1px solid #DDD;
    border-radius: 8px;
    color: #505050;
    font-size: 14px;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.35px;
}

#review_form .ql-editor {
    height: 400px;
    box-sizing: border-box;
    padding: 20px !important;
}

.form-control {
    border: 1px solid #DDD !important;
    color: #505050 !important;
}

.img-preview {
    width: 100%;
    margin-top: 20px;
}

.img-preview img {
    width: 50%;
}

.submit-btn {
    margin: 0 auto;
    max-width: 160px;
    width: 100%;
    margin-top: 60px;
    box-sizing: border-box;
    display: flex;
    padding: 12px 60px;
    justify-content: center;
    align-items: center;
    background: #1B1C80;
    color: var(--White, #FFF);
    font-size: 16px;
    line-height: 24px; /* 150% */
    letter-spacing: -0.4px;
    border: none;
}

.submit-btn:hover {
    background: #171855;
}

.new-badge {
    background: #1B1C80;
    color: #FFF;
    padding: 4px 8px;
    border-radius: 8px;
    margin-right: 4px;
}

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

/* 600px */
.mo-br {
    display: none;
}

@media(max-width: 1350px) {
    .review-container, .review-detail-container {
        padding: 120px 60px;
    }
}

@media(max-width: 1200px) {
    .review-content {
        -webkit-line-clamp: 3;
        min-height: unset;
    }
    .review-wrapper {
        min-height: 215px;
    }
}

@media(max-width: 1024px) {
    .review-container, .review-detail-container {
        padding: 80px 60px 120px;
    }
    .review-list-container .review-box {
        width: calc(50% - 14px);
    }
}

@media(max-width: 900px) {
    .review-list-container {
        gap: 40px 12px;
    }
    .review-list-container .review-box {
        width: calc(50% - 6px);
    }
    .review-writer {
        font-size: 18px;
        letter-spacing: -0.45px;
    }
    .flex-input {
        flex-direction: column;
    }
    .w-1, .w-3 {
        width: 100%;
    }
    input[type="text"], #review_form .ql-editor {
        padding: 10px;
    }
    input[type="text"], input[type="text"]::placeholder {
        font-size: 14px;
        line-height: 20px; /* 142.857% */
        letter-spacing: -0.35px;
    }
    .submit-btn {
        margin-top: 40px;
    }
}

@media(max-width: 768px) {
    .review-container, .review-detail-container {
        padding: 60px 40px 100px;
    }
}

@media(max-width: 600px) {
    .review-container {
        padding: 40px 20px 80px;
        gap: 40px;
    }
    .review-detail-container {
        padding: 40px 20px 80px;
        gap: 20px;
    }
    .review-list-container .review-box {
        width: 100%;
    }
    .review-btn {
        padding: 12px 0;
        width: 165px;
    }
    .review-btn>span {
        font-size: 14px;
        line-height: 24px; /* 171.429% */
        letter-spacing: -0.35px;
    }
    .review-btn>svg {
        width: 20px;
        height: 20px;
    }
    .go-list {
        padding: 4px 32px;
        font-size: 14px;
        line-height: 24px; /* 171.429% */
        letter-spacing: -0.35px;
    }
    .p28 {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    .review-wrap {
        gap: 6px;
    }
    .mo-br {
        display: block;
    }
    .review-wrapper {
        gap: 20px;
        min-height: unset;
    }
    .review-detail-bottom {
        margin-top: 20px;
    }
    .review-btn {
        padding: 12px 0;
        font-size: 14px;
        line-height: 24px; /* 171.429% */
        letter-spacing: -0.35px;
    }
    .go-list {
        font-size: 14px;
        line-height: 24px; /* 171.429% */
        letter-spacing: -0.35px;
    }
    .review-writer {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    .review-box-title {
        min-height: unset;
    }
    .new-badge {
        font-size: 12px;
        letter-spacing: -0.3px;
    }
    .review-wrap .new-badge {
        padding: 2px 8px;
    }
    .review-wrap>.semibold {
        gap: 4px;
    }
}

@media(max-width: 480px) {
    .submit-btn {
        max-width: 100%;
        font-size: 14px;
        line-height: 24px; /* 171.429% */
        letter-spacing: -0.35px;
        padding: 12px 0px;
    }
    .review-content div, .review-content p, .review-content span {
        font-size: 14px !important;
        letter-spacing: -0.35px !important;
    }
    .review-btn>span, .go-list {
        font-size: 12px;
        line-height: 22px; /* 171.429% */
        letter-spacing: -0.3px;
    }
}