/* ==================== 리얼후기 - 상세 ==================== */
.ss_cont.real-story {
    width: min(820px, calc(100vw - 52px));
    margin: 46px auto 110px;
}

.ss_cont.real-story .category_area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.ss_cont.real-story .category_area li p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--paper);
    font-size: 13px;
}

.ss_cont.real-story .category_area li p span:first-child {
    color: #9a8f88;
}

.ss_cont.real-story .category_area li p span:last-child {
    color: var(--copper);
    font-weight: 650;
}

.real-story-wrap #bo_v_head {
    padding-bottom: 18px;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--deep);
}

.real-story-wrap #bo_v_head h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 650;
    line-height: 1.4;
}

.real-story-cont .txt_area .column_wrapper p {
    margin: 0 0 18px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.8;
}

.real-story-cont .txt_area .column_wrapper img {
    display: block;
    width: 70%;
    height: auto;
    margin: 4px auto;
}

.real-story-cont .list_area {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.real-story-cont .bo_btn ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.real-story-cont .bo_btn li a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--deep);
}

.real-story-cont .bo_btn i {
    font-style: normal;
}

.real-story-cont .bo_btn li.left-btn i::before {
    content: '\2039';
    font-size: 20px;
}

.real-story-cont .bo_btn li.right-btn i::before {
    content: '\203A';
    font-size: 20px;
}

.real-story-cont .bo_btn li.list i::before {
    content: '\2261';
    font-size: 15px;
}

.real-story-cont .bo_btn li.left-btn a,
.real-story-cont .bo_btn li.right-btn a {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: border-color .2s ease-out, color .2s ease-out;
}

.real-story-cont .bo_btn li.left-btn a:hover,
.real-story-cont .bo_btn li.right-btn a:hover {
    border-color: var(--copper);
    color: var(--copper);
}

.real-story-cont .bo_btn li.list a {
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    border-radius: 22px;
    background: var(--deep);
    color: var(--white);
    font-size: 14px;
    transition: background .2s ease-out;
}

.real-story-cont .bo_btn li.list a:hover {
    background: var(--copper);
}

@media (max-width: 760px) {
    .ss_cont.real-story {
        margin: 30px auto 80px;
    }

    .real-story-wrap #bo_v_head {
        margin-bottom: 22px;
    }
}