@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ===== 클린벨 메인페이지 리뉴얼 PC - 컬러 변수 ===== */
:root {
    --brand-purple: #6031CD;
    --brand-purple-light: #8A6BF0;
    --brand-pink: #FF2E68;
    --brand-green: #14B885;
    --brand-orange: #FF9E2C;

    --bg-purple-light: #EDE8FF;
    --bg-purple-lighter: #F8F6FF;
    --bg-pink-light: #FFE9EF;
    --bg-green-light: #E9F9F1;
    --bg-orange-light: #FFF3E2;

    --text-body: #1A1A2E;
    --text-pink-box: #8A3E4E;
    --text-purple-box: #5B4A8F;
    --text-green-box: #3D7A5C;
    --text-orange-box: #8A6428;
}

/* ===== 상단 헤더 ===== */
.renewal_header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 600;
    box-sizing: border-box;
    width: 100%;
    background: #FFFFFF;
    border-bottom: 1px solid #EEEEF2;
    font-family: 'Pretendard', sans-serif;
}

.renewal_header_inner {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 32px;
}

.renewal_logo {
    flex-shrink: 0;
    margin-right: 56px;
}

.renewal_logo img {
    display: block;
    height: 28px;
    width: auto;
}

.renewal_gnb {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
}

.renewal_gnb a {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-body);
    text-decoration: none;
}

.renewal_gnb a:hover {
    color: var(--brand-purple);
}

.renewal_header_actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.renewal_more_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
}

.renewal_more_btn i {
    font-size: 22px;
    color: #8B8B95;
}

/* ===== 히어로 섹션 (PC 2단 레이아웃) ===== */
.renewal_hero {
    box-sizing: border-box;
    background: #FFFFFF;
    font-family: 'Pretendard', sans-serif;
    padding: 140px 32px 44px;
}

.renewal_hero_inner {
    display: grid;
    grid-template-columns: 620px 460px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
}

.renewal_hero_left {
    min-width: 0;
}

.renewal_hero .headline {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-body);
    margin-bottom: 28px;
}

.renewal_hero .proof_cards {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin-bottom: 22px;
}

.renewal_hero .proof_card {
    flex: 1;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 18px 20px;
}

.renewal_hero .proof_card i {
    display: block;
    font-size: 24px;
    margin-bottom: 10px;
}

.renewal_hero .proof_card .num {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    display: block;
    margin-bottom: 4px;
    color: var(--text-body);
}

.renewal_hero .proof_card .label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.renewal_hero .proof_card.pink {
    background: var(--bg-pink-light);
}

.renewal_hero .proof_card.purple {
    background: var(--bg-purple-light);
}

.renewal_hero .proof_card.pink i {
    color: var(--brand-pink);
}

.renewal_hero .proof_card.purple i {
    color: var(--brand-purple);
}

.renewal_hero .proof_card.pink .label {
    color: var(--text-pink-box);
}

.renewal_hero .proof_card.purple .label {
    color: var(--text-purple-box);
}

/* CTA 버튼 - 시머 애니메이션 (공통) */
.cta_button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 0;
    background: var(--brand-purple);
    border-radius: 999px;
    text-align: center;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-decoration: none;
}

.cta_button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
    animation: shimmer 2.4s infinite;
}

@keyframes shimmer {
    0% { left: -60%; }
    100% { left: 130%; }
}

.renewal_header_cta {
    width: auto;
    padding: 12px 40px;
    font-size: 15px;
}

.renewal_hero_cta {
    display: inline-flex;
    width: auto;
    padding: 19px 44px;
    font-size: 18px;
}

.renewal_hero .live_feed {
    box-sizing: border-box;
    background: #F9F9F9;
    border: 1px solid #EEEEF2;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(26, 26, 46, 0.05);
}

.renewal_hero .live_feed_head {
    font-size: 16px;
    font-weight: 600;
    color: var(--brand-green);
    margin-bottom: 16px;
}

.renewal_hero .live_feed_head i {
    margin-right: 4px;
    color: var(--brand-green);
}

.renewal_hero .live_feed_viewport {
    overflow: hidden;
    max-height: 268px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.renewal_hero .live_feed_track {
    list-style: none;
    animation: liveFeedScroll 12s linear infinite;
}

.renewal_hero .live_feed_track:hover {
    animation-play-state: paused;
}

@keyframes liveFeedScroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

.renewal_hero .live_feed li {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid var(--bg-purple-light);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
}

.renewal_hero .live_feed li:last-child {
    margin-bottom: 0;
}

.renewal_hero .live_feed li .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}

.renewal_hero .live_feed li .dot.request {
    background: var(--brand-pink);
}

.renewal_hero .live_feed li .dot.assign {
    background: var(--brand-purple);
}

.renewal_hero .live_feed li .dot.reserve {
    background: var(--brand-green);
}

.renewal_hero .live_feed li .feed_text {
    font-size: 16px;
    color: var(--text-body);
}

/* ===== 사이드메뉴 (삼선 메뉴) ===== */
.renewal_sidemenu_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 46, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
    z-index: 700;
}

.renewal_sidemenu_overlay.open {
    opacity: 1;
    visibility: visible;
}

.renewal_sidemenu {
    position: fixed;
    top: 0;
    right: 0;
    box-sizing: border-box;
    width: 320px;
    height: 100%;
    background: #FFFFFF;
    box-shadow: -4px 0 24px rgba(26, 26, 46, 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 800;
    font-family: 'Pretendard', sans-serif;
    overflow-y: auto;
}

.renewal_sidemenu.open {
    transform: translateX(0);
}

.renewal_sidemenu_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 24px;
    border-bottom: 1px solid #EEEEF2;
}

.renewal_sidemenu_logo {
    height: 22px;
    width: auto;
}

.renewal_sidemenu_close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
}

.renewal_sidemenu_close i {
    font-size: 20px;
    color: var(--text-body);
}

.renewal_sidemenu_list {
    list-style: none;
    padding: 12px 0;
}

.renewal_sidemenu_list li a {
    display: block;
    box-sizing: border-box;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-body);
    text-decoration: none;
}

.renewal_sidemenu_list li a:hover {
    background: var(--bg-purple-lighter);
    color: var(--brand-purple);
}

.renewal_sidemenu_list li.menu:first-of-type {
    border-top: 1px solid #EEEEF2;
    margin-top: 8px;
    padding-top: 8px;
}

/* ===== 서비스 카테고리 (5열 그리드) ===== */
.renewal_svc_section {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 32px;
}

.renewal_svc_heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: 28px;
}

.renewal_svc_grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.renewal_svc_card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #EEEEF2;
    border-radius: 18px;
    padding: 28px 22px;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.renewal_svc_card:hover {
    box-shadow: 0 8px 24px rgba(26, 26, 46, 0.08);
    transform: translateY(-2px);
}

.renewal_svc_icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
}

.renewal_svc_name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: 6px;
}

.renewal_svc_sub {
    font-size: 13.5px;
    color: #8B8B95;
    line-height: 1.4;
    margin-bottom: 10px;
}

.renewal_svc_cta {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-purple);
    margin-top: auto;
    padding-top: 10px;
}

/* ===== 신청 3단계 ===== */
.renewal_step3_section {
    box-sizing: border-box;
    width: 100%;
    background: #FFFFFF;
    padding: 40px 0;
}

.renewal_step3_section .renewal_step3_inner {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.renewal_step3_heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: 28px;
}

.renewal_step3_box {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #F9F9F9;
    border: 1px solid var(--bg-purple-light);
    border-radius: 24px;
    padding: 48px 40px;
    gap: 48px;
}

.renewal_step3_item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.renewal_step3_circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: var(--bg-purple-light);
    box-shadow: 0 4px 16px rgba(26, 26, 46, 0.06);
    margin-bottom: 18px;
}

.renewal_step3_item:nth-child(3) .renewal_step3_circle {
    background: var(--bg-orange-light);
}

.renewal_step3_item:nth-child(5) .renewal_step3_circle {
    background: var(--bg-green-light);
}

.renewal_step3_circle img {
    width: 56px;
    height: 56px;
}

.renewal_step3_badge {
    position: absolute;
    top: -12px;
    right: -10px;
    background: var(--brand-pink);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.renewal_step3_label {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-body);
    text-align: center;
}

.renewal_step3_arrow {
    color: #C7C0E0;
    font-size: 24px;
}

/* ===== 업체 비교 카드 ===== */
.renewal_compare_section {
    box-sizing: border-box;
    width: 100%;
    background: #F9F9F9;
    padding: 64px 0;
}

.renewal_compare_inner {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.renewal_compare_heading {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-body);
    margin-bottom: 32px;
}

.renewal_compare_row {
    display: flex;
    gap: 24px;
}

.renewal_compare_card {
    position: relative;
    flex: 1;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #E1DFD5;
    border-radius: 20px;
    padding: 28px;
}

.renewal_compare_card.renewal_recommend {
    background: #E4F8EF;
    border: 1px solid var(--brand-green);
}

.renewal_recommend_badge {
    position: absolute;
    top: -14px;
    right: 20px;
    background: var(--brand-green);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
}

.renewal_cmp_group {
    margin-bottom: 20px;
}

.renewal_cmp_group:last-child {
    margin-bottom: 0;
}

.renewal_compare_name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-body);
}

.renewal_compare_rank_row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    white-space: nowrap;
}

.renewal_compare_rank_label {
    font-size: 13px;
    color: #9B9B9B;
}

.renewal_compare_rank_value {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-body);
}

.renewal_compare_rank_pct {
    font-size: 13px;
    font-weight: 500;
    color: #9B9B9B;
}

.renewal_rating_row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.renewal_rating_num {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-body);
    line-height: 1;
}

.renewal_star_rating {
    position: relative;
    top: -1px;
    display: inline-block;
    font-size: 15px;
    letter-spacing: 1px;
}

.renewal_star_bg {
    color: #D9D5C9;
}

.renewal_star_fg {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #FFA634;
}

.renewal_star_fg.renewal_star_fg_gray {
    color: #8B8B95;
}

.renewal_review_count {
    font-size: 13px;
    color: #9B9B9B;
    line-height: 1;
}

.renewal_review_count.renewal_green {
    color: #3D9E7E;
}

.renewal_compare_diff {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.renewal_compare_diff.renewal_diff_low {
    color: #B23E39;
}

.renewal_compare_diff.renewal_diff_high {
    color: #00845B;
}

.renewal_compare_sublabel {
    font-size: 13px;
    color: #9B9B9B;
    margin-bottom: 8px;
}

.renewal_compare_bar {
    height: 8px;
    border-radius: 999px;
    background: #EFECE5;
    overflow: hidden;
    margin-bottom: 12px;
}

.renewal_compare_bar.renewal_bar_track_green {
    background: #C2EBDB;
}

.renewal_compare_bar_fill {
    height: 100%;
    border-radius: 999px;
}

.renewal_compare_bar_fill.renewal_bar_low {
    background: #ABA9A0;
}

.renewal_compare_bar_fill.renewal_bar_high {
    background: var(--brand-green);
}

.renewal_compare_badge {
    display: inline-block;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
}

.renewal_compare_badge.renewal_badge_gray {
    background: #EAE7DE;
    color: #6B6960;
}

.renewal_compare_badge.renewal_badge_green {
    background: var(--brand-green);
    color: #FFFFFF;
}

.renewal_compare_price_label {
    font-size: 13px;
    color: #9B9B9B;
    margin-bottom: 4px;
}

.renewal_compare_price_value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: 12px;
}

.renewal_compare_price_section {
    box-sizing: border-box;
    padding-top: 14px;
    border-top: 1px solid #E1DFD5;
}

.renewal_compare_price_section.renewal_green_line {
    border-top: 1px solid var(--brand-green);
}

.renewal_compare_price {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-body);
}

.renewal_compare_price .renewal_won {
    font-size: 16px;
    font-weight: 500;
    margin-left: 2px;
}

.renewal_compare_rank_label.renewal_green,
.renewal_compare_rank_pct.renewal_green,
.renewal_compare_sublabel.renewal_green,
.renewal_compare_price_label.renewal_green {
    color: #3D9E7E;
}

.renewal_compare_tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    background: #EFECE5;
    border-radius: 16px;
    padding: 18px 22px;
    margin-top: 24px;
    width: 100%;
}

.renewal_compare_tip_icon {
    font-size: 17px;
    flex-shrink: 0;
    line-height: 1.5;
}

.renewal_compare_tip p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-body);
}

/* ===== 필수정보 16가지 ===== */
.renewal_info16_section {
    box-sizing: border-box;
    width: 100%;
    background: #FFFFFF;
    padding: 64px 0;
}

.renewal_info16_inner {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.renewal_info16_heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: 28px;
}

.renewal_info16_box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    background: var(--bg-orange-light);
    border-radius: 22px;
    padding: 28px;
}

.renewal_info16_row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.renewal_info16_chip {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #F0E4D0;
    border-radius: 999px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-body);
    white-space: nowrap;
}

.renewal_info16_chip.renewal_info16_chip_more {
    background: #FFA75D;
    border-color: #FFA75D;
    color: #FFFFFF;
    font-weight: 700;
}

/* ===== 후기 슬라이드 ===== */
.renewal_review_section {
    box-sizing: border-box;
    width: 100%;
    background: #F9F9F9;
    padding: 64px 0;
}

.renewal_review_inner {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.renewal_review_head_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.renewal_review_heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-body);
}

.renewal_review_arrows {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.renewal_review_arrow_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #EEEEF2;
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
}

.renewal_review_arrow_btn i {
    font-size: 18px;
    color: var(--text-body);
}

.renewal_review_arrow_btn:hover {
    background: var(--bg-purple-lighter);
}

.renewal_review_viewport {
    overflow: hidden;
    margin-bottom: 28px;
}

.renewal_review_track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.renewal_review_track::-webkit-scrollbar {
    display: none;
}

.renewal_review_card {
    flex: 0 0 calc((100% - 40px) / 3);
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #ECE9F5;
    border-radius: 18px;
    padding: 24px;
}

.renewal_review_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.renewal_review_area {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-body);
    white-space: nowrap;
}

.renewal_review_badge {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.renewal_review_badge.renewal_badge_purple {
    background: var(--bg-purple-light);
    color: var(--text-purple-box);
}

.renewal_review_badge.renewal_badge_green {
    background: var(--bg-green-light);
    color: var(--text-green-box);
}

.renewal_review_text {
    font-size: 15px;
    color: #6B6960;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.renewal_review_more_wrap {
    text-align: center;
}

.renewal_review_more {
    display: inline-block;
    box-sizing: border-box;
    padding: 16px 40px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #ECE9F5;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-body);
    text-decoration: none;
}

/* ===== 처음이거나 오랜만이라면 ===== */
.renewal_guide_section {
    box-sizing: border-box;
    width: 100%;
    background: #FFFFFF;
    padding: 64px 0;
}

.renewal_guide_inner {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.renewal_guide_heading {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-body);
    margin-bottom: 28px;
}

.renewal_guide_row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.renewal_guide_card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 28px 24px;
    border-radius: 18px;
    text-decoration: none;
}

.renewal_guide_icon_img {
    width: 56px;
    height: 56px;
    display: block;
    margin-bottom: 28px;
}

.renewal_guide_card.renewal_guide_green {
    background: var(--bg-green-light);
}

.renewal_guide_card.renewal_guide_orange {
    background: var(--bg-orange-light);
}

.renewal_guide_card.renewal_guide_purple {
    background: var(--bg-purple-light);
}

.renewal_guide_name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: 6px;
}

.renewal_guide_sub {
    font-size: 14px;
}

.renewal_guide_card.renewal_guide_green .renewal_guide_sub {
    color: var(--text-green-box);
}

.renewal_guide_card.renewal_guide_orange .renewal_guide_sub {
    color: var(--text-orange-box);
}

.renewal_guide_card.renewal_guide_purple .renewal_guide_sub {
    color: var(--text-purple-box);
}

/* ===== 우수업체 인터뷰 ===== */
.renewal_interview_section {
    box-sizing: border-box;
    width: 100%;
    background: #F9F9F9;
    padding: 64px 0;
}

.renewal_interview_inner {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.renewal_interview_head_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.renewal_interview_heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-body);
}

.renewal_interview_arrows {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.renewal_interview_arrow_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #EEEEF2;
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
}

.renewal_interview_arrow_btn i {
    font-size: 18px;
    color: var(--text-body);
}

.renewal_interview_arrow_btn:hover {
    background: var(--bg-purple-lighter);
}

.renewal_interview_viewport {
    overflow: hidden;
    margin-bottom: 28px;
}

.renewal_interview_track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.renewal_interview_track::-webkit-scrollbar {
    display: none;
}

.renewal_interview_card {
    flex: 0 0 calc((100% - 40px) / 3);
    display: block;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #ECE9F5;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
}

.renewal_interview_thumb {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
}

.renewal_interview_text {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-body);
    line-height: 1.4;
    padding: 20px 20px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.renewal_interview_partner {
    font-size: 14px;
    color: #9B9B9B;
    padding: 8px 20px 0;
}

.renewal_interview_meta {
    display: flex;
    gap: 14px;
    font-size: 13px;
    color: #6B6960;
    padding: 6px 20px 20px;
}

.renewal_interview_meta i {
    color: var(--brand-orange);
    font-size: 13px;
    margin-right: 3px;
}

.renewal_interview_more_wrap {
    text-align: center;
}

.renewal_interview_more {
    display: inline-block;
    box-sizing: border-box;
    padding: 16px 40px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #ECE9F5;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-body);
    text-decoration: none;
}

/* ============================================================
   반응형 — 1024px 이하 (노트북)
============================================================ */
@media (max-width: 1024px) {
    /* 헤더 */
    .renewal_header_inner {
        padding: 14px 24px;
    }

    .renewal_logo {
        margin-right: 32px;
    }

    .renewal_gnb {
        gap: 20px;
    }

    .renewal_gnb a {
        font-size: 14px;
    }

    /* 히어로 */
    .renewal_hero {
        padding: 100px 24px 40px;
    }

    .renewal_hero_inner {
        grid-template-columns: 1fr 340px;
        gap: 32px;
    }

    .renewal_hero .headline {
        font-size: 36px;
    }

    /* 서비스 카테고리 5열 → 3열 */
    .renewal_svc_grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 신청 3단계 - 원형 살짝 축소 */
    .renewal_step3_box {
        gap: 24px;
        padding: 36px 24px;
    }

    .renewal_step3_circle {
        width: 84px;
        height: 84px;
    }

    .renewal_step3_circle img {
        width: 44px;
        height: 44px;
    }

    /* 업체비교, 후기, 인터뷰 카드 - 폭 확보 */
    .renewal_compare_card {
        padding: 22px;
    }

    /* 처음이거나 오랜만이라면 3열 → 2열 */
    .renewal_guide_row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   반응형 — 768px 이하 (태블릿)
============================================================ */
@media (max-width: 768px) {
    /* 헤더 */
    .renewal_header_inner {
        padding: 12px 20px;
    }

    .renewal_gnb {
        display: none;
    }

    .renewal_logo {
        margin-right: 0;
        flex: 1;
    }

    .renewal_header_cta {
        padding: 10px 20px;
        font-size: 13px;
    }

    /* 히어로 - 세로 1단으로 전환 */
    .renewal_hero {
        padding: 88px 20px 32px;
    }

    .renewal_hero_inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .renewal_hero_left {
        max-width: none;
    }

    .renewal_hero .headline {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .renewal_hero .proof_cards {
        max-width: none;
    }

    .renewal_hero_cta {
        width: 100%;
        padding: 15px 0;
        font-size: 15px;
    }

    /* 사이드메뉴 폭 조정 */
    .renewal_sidemenu {
        width: 280px;
    }

    /* 서비스 카테고리 3열 → 2열 */
    .renewal_svc_section {
        padding: 48px 20px;
    }

    .renewal_svc_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 신청 3단계 - 세로 배치 */
    .renewal_step3_inner {
        padding: 0 20px;
    }

    .renewal_step3_box {
        flex-direction: column;
        gap: 24px;
        padding: 32px 24px;
    }

    .renewal_step3_arrow {
        transform: rotate(90deg);
    }

    /* 업체 비교 - 세로 스택 */
    .renewal_compare_inner {
        padding: 0 20px;
    }

    .renewal_compare_row {
        flex-direction: column;
    }

    /* 필수정보16 */
    .renewal_info16_inner {
        padding: 0 20px;
    }

    /* 후기 - 카드 2개씩 보이게 */
    .renewal_review_inner,
    .renewal_interview_inner,
    .renewal_guide_inner {
        padding: 0 20px;
    }

    .renewal_review_card,
    .renewal_interview_card {
        flex: 0 0 calc((100% - 20px) / 2);
    }

    .renewal_review_heading,
    .renewal_interview_heading,
    .renewal_compare_heading,
    .renewal_info16_heading,
    .renewal_svc_heading,
    .renewal_step3_heading,
    .renewal_guide_heading {
        font-size: 22px;
    }

    /* 처음이거나 오랜만이라면 - 1열 */
    .renewal_guide_row {
        grid-template-columns: 1fr;
    }

    /* 푸터 - 세로 스택 */
    .renewal_footer_inner {
        padding: 0 20px;
    }

    .renewal_footer_top {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .renewal_footer_cs {
        text-align: left;
        width: 100%;
    }

    .renewal_footer_btn_row {
        justify-content: flex-start;
    }

    .renewal_footer_bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}