/* 세이프케어 전화상담 | goods/safe_care_phone_consult.html
 * Figma PC: node 13334:20145 / MO: node 13334:25030
 * 다크 카드 2개(요금제 구분 / 상담 정보 입력) + 다크 폼. PC/MO 동일 구조, 사이즈만 차이.
 */

@font-face {
    font-family: 'WellnessSans';
    src: url('https://namuhx-static.mock.pe.kr/fonts/WellnessSans-Regular_0207-2.ttf') format('truetype'),
         url('https://namuhx-static.mock.pe.kr/fonts/WellnessSans-Regular_0207-2.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'WellnessSans';
    src: url('https://namuhx-static.mock.pe.kr/fonts/WellnessSans-Bold_0207-2.ttf') format('truetype'),
         url('https://namuhx-static.mock.pe.kr/fonts/WellnessSans-Bold_0207-2.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.scc {
    --mint: #8ce2d0;
    --navy-normal: #002554;
    --card: #1d1d1f;
    --blue-line: #d9dee5;
    --blue-line-strong: #b0bbca;
    --grey-8: #1d1d1f;
    --grey-5: #8d8d8d;
    --grey-4: #ddd;
    --red: #fd5c51;
    --cloud: #f0efeb;
    --line: rgba(255, 255, 255, .6);
    --mo-input: #5a5a5b;

    box-sizing: border-box;
    width: 100%;
    max-width: 1416px;
    margin: 0 auto;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #fff;
}

.scc * {
    box-sizing: border-box;
}

.scc-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 0 40px;
}

.scc-title {
    margin: 0 0 20px;
    font-family: 'WellnessSans', 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: var(--grey-4);
}

/* ===== 다크 카드 + 헤더 ===== */
.scc-sec {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 60px;
    border-radius: 20px;
    background: var(--card);
}

.scc-sec-head {
    width: 100%;
    color: var(--mint);
    font-family: 'WellnessSans', 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
}


.scc-sec--form .scc-sec-body {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ===== 요금제 비교표 =====
 * 두 컬럼(플러스/베이직) 항상 노출. 활성 컬럼은 컨트롤러가 .is-plus / .is-basic 로 지정.
 * 배경 사진 + 어두운 오버레이 위에 표를 얹는다. 행 정렬을 위해 본문은 grid.
 */
.scc-plan {
    --title-h: 56px;
    /* 컬럼 비율: 구분(--cat-fr) : 플러스(1) : 베이직(1). --plan-total = --cat-fr + 2.
     * 그리드와 강조 박스가 같은 변수를 써서 항상 정렬되도록 한다. */
    --cat-fr: 0.857;
    --plan-total: 2.857;

    position: relative;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'WellnessSans', 'Pretendard', sans-serif;
    background: #0d0d0f url('../img/main_v3/main_visual_202605281119.png') no-repeat right center / cover;
}

/* 가독성용 어두운 오버레이 */
.scc-plan::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .72) 100%);
    pointer-events: none;
}

/* 전체 표 — 단일 3컬럼 grid (구분 1.4 : 플러스 1 : 베이직 1).
 * grid 라 행 높이가 컬럼 간 자동 정렬되고, '구분' 셀이 타이틀+플랜명 두 행을 세로 병합한다. */
.scc-plan-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        calc(var(--cat-fr) / var(--plan-total) * 100%)
        calc(1 / var(--plan-total) * 100%)
        calc(1 / var(--plan-total) * 100%);
    width: 100%;
}

/* '구분' 셀 — 타이틀 행 + 플랜명 행 두 행 높이를 함께 차지 (세로 병합) */
.scc-plan-cell--cattop {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* '세이프 케어' 타이틀 — 플러스+베이직 두 컬럼 위에 걸쳐진다 */
.scc-plan-title {
    grid-column: 2 / span 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--title-h);
    border-bottom: .5px solid rgba(255, 255, 255, .22);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: #fff;
}

.scc-plan-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 6px 16px;
    text-align: center;
    border-bottom: .5px solid rgba(255, 255, 255, .22);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: #fff;
}

.scc-plan-cell--last {
    border-bottom: none;
}

.scc-plan-cell--head {
    font-weight: 700;
    font-size: 22px;
}

/* 세로 구분선 — 컬럼 사이(구분|플러스, 플러스|베이직).
 * 플러스/베이직 셀과 타이틀 셀의 좌측에 그어 연속된 세로 라인을 만든다. */
.scc-plan-cell--plus,
.scc-plan-cell--basic,
.scc-plan-title {
    border-left: .5px solid rgba(255, 255, 255, .22);
}

/* 구분(카테고리) 컬럼 — 활성 플랜과 무관하게 항상 또렷한 흰색 */
.scc-plan-cell--cat {
    color: #fff;
    opacity: 1;
}

/* 비활성 컬럼 — 흐리게, 테두리 박스 없음.
 * 컨트롤러가 .is-plus / .is-basic 를 주기 전 기본값은 '플러스 활성'(그레이스풀 폴백). */
.scc-plan-cell--basic {
    opacity: .4;
}

.scc-plan.is-basic .scc-plan-cell--basic {
    opacity: 1;
}

.scc-plan.is-basic .scc-plan-cell--plus {
    opacity: .4;
}

/* 활성 컬럼 핵심 값 — 볼드 (기본: 플러스) */
.scc-plan-cell--plus.scc-plan-cell--key {
    font-weight: 700;
}

.scc-plan.is-basic .scc-plan-cell--plus.scc-plan-cell--key {
    font-weight: 400;
}

.scc-plan.is-basic .scc-plan-cell--basic.scc-plan-cell--key {
    font-weight: 700;
}

/* 활성 컬럼 강조 박스 — 플랜명 행부터 마지막 행까지 감싸는 테두리.
 * 그리드와 같은 컬럼 비율 변수를 써서 위치/너비를 계산(항상 컬럼에 정렬).
 * 기본은 플러스 위치, .scc-plan-box--basic 일 때만 베이직 컬럼으로 이동. */
.scc-plan-box {
    position: absolute;
    top: var(--title-h);
    bottom: 0;
    left: calc(var(--cat-fr) / var(--plan-total) * 100%);
    width: calc(1 / var(--plan-total) * 100%);
    border: 1px solid rgba(255, 255, 255, .7);
    pointer-events: none;
}

.scc-plan-box--basic {
    left: calc((var(--cat-fr) + 1) / var(--plan-total) * 100%);
}

/* ===== 폼 (다크) ===== */
.scc-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.scc-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.scc-label {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
}

.scc-label-text > em {
    margin-left: 2px;
    font-style: normal;
    color: var(--red);
}

.scc-label-count {
    font-weight: 400;
    font-size: 14px;
    color: var(--grey-5);
}

.scc .scc-input,
.scc .scc-textarea {
    width: 100%;
    height: 56px;
    padding: 16px 32px;
    border: 1px solid var(--blue-line);
    border-radius: 10px;
    background: transparent;
    background-color: transparent;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
}

.scc .scc-input::placeholder,
.scc .scc-textarea::placeholder {
    color: var(--grey-5);
}

.scc .scc-input:focus,
.scc .scc-textarea:focus {
    outline: none;
    border-color: var(--mint);
}

.scc .scc-input--readonly {
    border-color: var(--blue-line-strong);
    color: #fff;
}

.scc .scc-textarea {
    height: 112px;
    min-height: 112px;
    resize: vertical;
}

.scc-error {
    display: none;
    font-size: 14px;
    line-height: 1.4;
    color: var(--red);
}

.scc-group.is-error .scc-error {
    display: block;
}

.scc .scc-group.is-error .scc-input {
    border-color: var(--red);
}

/* ===== 약관 동의 ===== */
.scc-agree {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.scc-agree-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.scc-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.scc-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.scc-check-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 4px;
    position: relative;
}

.scc-check input:checked + .scc-check-box {
    border-color: var(--mint);
    background: var(--mint);
}

.scc-check input:checked + .scc-check-box::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid var(--grey-8);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.scc-check-label {
    font-size: 14px;
    line-height: 1.4;
    color: var(--grey-4);
}

.scc-check-label em {
    font-style: normal;
    color: var(--red);
}

.scc-terms-btn {
    flex-shrink: 0;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    background: #38383a;
    color: var(--grey-4);
    font-family: inherit;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

/* ===== 하단 버튼 ===== */
.scc-btns {
    display: flex;
    gap: 40px;
    width: 100%;
}

.scc-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 56px;
    padding: 0 32px;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity .2s;
}

.scc-btn:hover {
    opacity: .88;
}

.scc-btn--cancel {
    background: var(--navy-normal);
    color: var(--mint);
}

.scc-btn--submit {
    background: var(--mint);
    color: var(--grey-8);
}

.scc-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ===== 공통 팝업 ===== */
.scc-overlay {
    --mint: #8ce2d0;
    --navy-normal: #002554;
    --grey-8: #1d1d1f;
    --grey-5: #8d8d8d;
    --grey-4: #ddd;
    --red: #fd5c51;

    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .5);
}

.scc-overlay.is-open {
    display: flex;
}

.scc-popup {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    color: var(--grey-8);
}

/* 전문보기(약관) 모달 - 다크 네이비 */
.scc-popup--terms {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 940px;
    padding: 80px;
    border: 2px solid #001c3f;
    border-radius: 20px;
    background: linear-gradient(146deg, #082140 17%, #0a2b54 91%);
    color: var(--grey-4);
    overflow-y: auto;
}

.scc-popup-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #0f0f0f;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.scc-popup-title {
    margin: 0;
    font-family: 'WellnessSans', 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    color: var(--mint);
}

.scc-popup-intro {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: var(--grey-4);
}

.scc-popup-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--grey-4);
}

.scc-popup-body p {
    margin: 0;
}

.scc-popup-body ol {
    margin: 0;
    padding-left: 22px;
    list-style: decimal;
}

.scc-popup-body li {
    list-style: decimal;
    line-height: 1.4;
}

.scc-popup-message {
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
}

.scc-popup-btn {
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: var(--navy-normal);
    color: var(--mint);
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

/* 약관 모달 동의 버튼 - 민트 */
.scc-popup--terms .scc-popup-btn {
    height: 56px;
    margin: 0;
    padding: 0 32px;
    border-radius: 10px;
    background: var(--mint);
    color: var(--grey-8);
    font-size: 16px;
}

/* =========================================================
 * 모바일 (≤ 768px) — Figma 베이직_MO (node 13334:25030)
 * ========================================================= */
@media (max-width: 768px) {
    .scc {
        max-width: none;
    }

    .scc-inner {
        gap: 20px;
        padding: 40px 20px;
    }

    .scc-title {
        margin: 0;
        font-size: 16px;
    }

    .scc-sec {
        gap: 20px;
        padding: 15px;
        border-radius: 10px;
    }

    .scc-sec-head {
        font-size: 16px;
    }


    .scc-sec--form .scc-sec-body {
        gap: 20px;
    }

    /* 표 (모바일 축소) */
    .scc-plan {
        --title-h: 40px;
        /* 모바일은 긴 라벨 줄바꿈을 줄이기 위해 기존 1.4 비율 유지 */
        --cat-fr: 1.4;
        --plan-total: 3.4;
        border-radius: 8px;
    }

    .scc-plan-title {
        font-size: 16px;
    }

    .scc-plan-cell {
        min-height: 44px;
        padding: 5px 6px;
        font-size: 11px;
    }

    .scc-plan-cell--head {
        font-size: 13px;
    }

    /* 폼 (모바일) */
    .scc-form {
        gap: 20px;
    }

    .scc-group {
        gap: 8px;
    }

    .scc-label {
        font-size: 14px;
    }

    .scc .scc-input,
    .scc .scc-textarea {
        height: 48px;
        padding: 8px 16px;
        border-color: var(--mo-input);
        font-size: 12px;
    }

    .scc .scc-input--readonly {
        border-color: var(--mo-input);
    }

    .scc .scc-textarea {
        height: 96px;
        min-height: 96px;
    }

    .scc-error {
        font-size: 10px;
    }

    .scc-agree {
        gap: 12px;
    }

    .scc-check-label {
        font-size: 12px;
    }

    /* 버튼 (모바일) */
    .scc-btns {
        gap: 8px;
    }

    .scc-btn {
        height: 48px;
        padding: 0 16px;
        font-size: 14px;
    }
}

/* 전문보기 모달 - 모바일 */
@media (max-width: 768px) {
    .scc-popup--terms {
        gap: 16px;
        padding: 48px 24px 20px;
        border-radius: 10px;
    }

    .scc-popup-close {
        top: 14px;
        right: 14px;
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .scc-popup-title {
        font-size: 20px;
    }

    .scc-popup-intro {
        font-size: 12px;
    }

    .scc-popup-body {
        gap: 12px;
        font-size: 12px;
    }

    .scc-popup--terms .scc-popup-btn {
        height: 48px;
        font-size: 14px;
    }
}