/* =========================================================
   SERVICE 02 (COMMERCE) - 기획자 보정안 반영 최종본
   ========================================================= */

/* 1. 색감의 위계 조정 (레드 -> 버건디) */
:root {
    --burgundy-main: #881111; /* 톤 다운된 버건디 */
    --burgundy-light: rgba(136, 17, 17, 0.03);
    --burgundy-line: rgba(136, 17, 17, 0.1);
}

.service-commerce .service-badge {
    background: var(--burgundy-main) !important;
    box-shadow: 0 4px 12px rgba(136, 17, 17, 0.15);
}

.service-commerce .service-title span {
    color: var(--burgundy-main) !important;
}

/* 2. 폰트 및 굵기(Weight) 밸런스 조정 */
.service-commerce .service-title {
    font-weight: 700; /* 서비스 01보다 한 단계 낮춤 (팽창 효과 방지) */
    letter-spacing: -0.05em; /* 자간을 조여 밀도감 형성 */
    line-height: 1.3;
}

/* 3. 문단 가독성 및 여백 확보 */
.service-commerce .service-define-group {
    margin: 32px 0 48px 0; /* 문단 위아래 공기(여백) 확보 */
}

.service-commerce .service-define {
    line-height: 1.8; /* 줄간격 확대 */
    margin-bottom: 16px;
    word-break: keep-all; /* 한글 단어 끊김 방지 */
    color: #444;
}

/* 4. 리스트 아이템 간격 보정 */
.service-commerce .service-list.relaxed li {
    margin-bottom: 20px !important; /* 각 항목 사이 숨통 확보 */
}

.service-commerce .service-list li strong {
    color: var(--burgundy-main);
}

/* 5. 카드 및 시각적 증거 영역 */
.service-commerce .highlight-card {
    border: 1px solid var(--line) !important; /* 기본 테두리 */
    border-top: 4px solid #881111 !important; /* 상단만 굵은 버건디 포인트 (서비스 01과 대칭) */
    border-radius: 24px;
}

.service-commerce .nb-chip {
    background: var(--burgundy-main);
    color: #fff;
}

.price-compare-ui .new-price-val {
    color: var(--burgundy-main);
    font-size: 30px; /* 기존보다 약간 줄여 밸런스 조정 */
    font-weight: 900;
}

/* 6. 하단 강조 박스 */
.service-commerce .highlight-box {
    background: var(--burgundy-light);
    border: 1px solid var(--burgundy-line);
    padding: 32px !important;
    margin-top: 40px;
}
/* 서비스 2 우측 카드 전용 디테일 */

/* 가격 표시 박스 디자인 */
.price-display-box {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 1px solid #f0f0f0;
}

.price-context {
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
}

.price-main {
    text-align: center;
}

.price-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--point-burgundy);
    margin-bottom: 4px;
}

.price-amount {
    font-size: 32px;
    font-weight: 900;
    color: var(--point-burgundy);
    letter-spacing: -1px;
}

.price-amount span {
    font-size: 18px;
    margin-left: 2px;
}

/* 텍스트 컬러 유틸리티 */
.text-burgundy {
    color: var(--point-burgundy) !important;
}

.nb-chip.danger {
    background: var(--point-burgundy);
    color: #fff;
    border: none;
}

/* 카드 간격 일관성 */
.nb-wide-stack {
    gap: 25px; /* 서비스 1과 동일하게 간격 고정 */
}
.price-focus-box {
    background: #fdfdfd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    border-radius: 16px;
}

/* 타 플랫폼 가격 (작게) */
.compare-row {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
}

.c-label { font-size: 13px; color: #000000; }
.c-price del { font-size: 15px; color: #000000; }

/* 지원플러스 가격 (대폭 강조) */
.main-price-row {
    text-align: center;
    padding-top: 10px;
}

.m-label {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #881111;
    margin-bottom: 8px;
}

.m-price {
    font-size: 42px; /* 기존보다 훨씬 크게 확대 */
    font-weight: 900;
    color: #881111;
    letter-spacing: -1.5px;
    line-height: 1;
}

.m-price small {
    font-size: 20px;
    margin-left: 2px;
}

/* 버건디 강조색 */
.text-burgundy { color: #881111 !important; }
/* [문제점 1 해결] 최저가 확인 뱃지 가독성 확보 */
.service-commerce .nb-chip.danger {
    background: #881111 !important; /* 배경색 강제 지정 */
    color: #ffffff !important; /* 글씨 흰색 강제 지정 */
    font-weight: 800;
    border: none;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* [문제점 2 해결] 카드 헤더(리포트/관리) 굵기 통일 */
.service-commerce .nb-brand {
    font-weight: 800 !important; /* 둘 다 굵게 통일 */
    font-size: 16px;
    color: #1a1a1a;
}

/* [문제점 3 해결] 하단 캡션 글씨 크기 확대 */
.service-commerce .nb-detail-report .report-label,
.service-commerce .nb-detail-report .report-value {
    font-size: 14px !important; /* 기존보다 2px 확대 */
    line-height: 1.6;
}
.service-commerce .nb-detail-report .report-value {
    font-weight: 700;
    color: #333;
}

/* [문제점 4 해결] 모든 카드 상단에 동일한 버건디 테두리 적용 */
.service-commerce .nb-card-large {
    border: 1px solid #e2e8f0 !important; /* 전체 테두리 연하게 */
    border-top: 5px solid #881111 !important; /* 상단 포인트 바 굵게 적용 */
    border-radius: 20px;
    background: #ffffff;
    overflow: hidden;
    margin-bottom: 25px; /* 카드 간 간격 */
}

/* 추가 보정: 타 플랫폼 가격 대비 강조 */
.service-commerce .c-label, 
.service-commerce .c-price del {
    color: #666 !important; /* 완전 검정보다 세련된 다크그레이 */
}
/* [공통] 좌우 간격 완벽 동기화 */
.service-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px; /* 전체 컨테이너 폭 */
    margin: 0 auto;
    gap: 60px; /* 좌우 사이 간격 고정 */
}

/* 좌측 텍스트 영역 폭 강제 고정 */
.service-ops .service-copy,
.service-commerce .service-copy,
.service-global .service-copy {
    flex: 0 0 520px !important; /* 늘어나거나 줄어들지 않게 520px로 고정 */
    max-width: 520px !important;
}

/* 우측 카드 영역 폭 강제 고정 */
.service-ops .service-proof,
.service-commerce .service-proof,
.service-global .service-proof {
    flex: 0 0 550px !important; /* 550px로 고정 */
    max-width: 550px !important;
}

/* [문제 해결] 서비스 02 하단 세로 바(|) 및 문구 복구 */
.service-commerce .service-connection {
    font-size: 14px;
    line-height: 1.75;
    color: #444;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: flex-start;
}

/* 세로 바(|) 생성 */
.service-commerce .service-connection::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 18px;
    background-color: #881111; /* 서비스 02 버건디 컬러 */
    margin-right: 12px;
    margin-top: 3px;
    flex-shrink: 0;
}