/* style-extra.css - Bottom sheet, additional mobile styles */
/* Version: 9.9.3 (Latest Update) */

/* ================================== */
/* ▼▼▼ 모바일 요금제 상세 바텀 시트 ▼▼▼ */
/* ================================== */
.bottom-sheet-modal {
    display: none !important; /* 기본적으로 강력하게 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.bottom-sheet-modal.active {
    display: block !important; /* 활성화될 때만 보이도록 설정 */
}

.bottom-sheet-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bottom-sheet-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

/* 다크모드 대응 */
body.dark-mode .bottom-sheet-content {
    background-color: #1f2937;
    border-top: 1px solid #374151;
    color: #fff;
}

/* 활성 상태 트랜지션 */
.bottom-sheet-modal.active .bottom-sheet-overlay {
    opacity: 1;
}

.bottom-sheet-modal.active .bottom-sheet-content {
    transform: translateY(0);
}

.bottom-sheet-handle-bar {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.bottom-sheet-handle-bar .handle {
    width: 40px;
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 5px;
}

body.dark-mode .bottom-sheet-handle-bar .handle {
    background-color: #4b5563;
}

.bottom-sheet-body {
    padding: 0 20px 30px 20px;
    overflow-y: auto;
}

.bottom-sheet-body h3 {
    margin-top: 0;
    font-size: 1.3em;
    color: #1a73e8;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

body.dark-mode .bottom-sheet-body h3 {
    color: #60a5fa;
    border-color: #374151;
}

.detail-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #1a73e8;
    margin-bottom: 20px;
    line-height: 1.5;
}

body.dark-mode .detail-price {
    color: #60a5fa;
}

.detail-price span {
    display: block;
    font-size: 0.8em;
    color: #ff4444;
    font-weight: bold;
    margin-top: 5px;
}

.detail-description {
    font-size: 1em;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: break-word; /* 긴 텍스트 자동 줄바꿈 */
    word-break: break-word;
    color: #333;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

body.dark-mode .detail-description {
    background: #374151;
    color: #e5e7eb;
}

/* 요금제 상세 팝업: 데이터 제공량/혜택 부분 형광펜(마카) 강조 */
.detail-description mark.plan-mark-yellow {
    background: linear-gradient(180deg, transparent 55%, #fff176 55%, #fff176 92%, transparent 92%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0 2px;
    color: #202124;
    font-weight: 700;
}

/* 다크모드: 텍스트 절반이 배경(어두운색) 위에 남는 부분 강조 마카는 대비가 낮아 읽기 어려우므로,
   글자 전체를 감싸는 밝은 형광펜 박스로 바꿔 가독성을 확보 */
body.dark-mode .detail-description mark.plan-mark-yellow {
    background: #fbc02d;
    border-radius: 3px;
    color: #1a1a1a;
}

.close-bottom-sheet-btn {
    width: 100%;
    padding: 15px;
    background-color: #1a73e8;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
}

body.dark-mode .close-bottom-sheet-btn {
    background-color: #2563eb;
}

.close-bottom-sheet-btn.secondary {
    background-color: transparent;
    color: #6b7280;
    font-weight: 500;
    font-size: 0.95em;
    padding: 10px;
    margin-top: 4px;
}

body.dark-mode .close-bottom-sheet-btn.secondary {
    background-color: transparent;
    color: #9ca3af;
}

/* ================================== */
/* ▼▼▼ 스마트워치 사용 여부 - 통합 선택 UI (보라색 계열로 다른 파란 토글과 구분) ▼▼▼ */
/* ================================== */
.smartwatch-usage-summary {
    margin-top: 8px;
    font-size: 0.88em;
    font-weight: 600;
    color: #7c3aed;
    background-color: #f3ecfe;
    border-radius: 6px;
    padding: 6px 10px;
}

body.dark-mode .smartwatch-usage-summary {
    color: #c4b5fd;
    background-color: rgba(167, 139, 250, 0.15);
}

#smartwatchUsageModal h3 {
    color: #7c3aed;
}

body.dark-mode #smartwatchUsageModal h3 {
    color: #c4b5fd;
}

#smartwatchUsageModal .close-bottom-sheet-btn:not(.secondary) {
    background-color: #7c3aed;
}

body.dark-mode #smartwatchUsageModal .close-bottom-sheet-btn:not(.secondary) {
    background-color: #8b5cf6;
}

.smartwatch-modal-desc {
    font-size: 0.92em;
    line-height: 1.5;
    color: #555;
    margin: 0 0 18px 0;
}

body.dark-mode .smartwatch-modal-desc {
    color: #d1d5db;
}

.smartwatch-choice-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.smartwatch-choice-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.1s ease;
}

.smartwatch-choice-card:active {
    transform: scale(0.98);
}

.smartwatch-choice-card:hover {
    border-color: #7c3aed;
    background-color: #faf8ff;
}

body.dark-mode .smartwatch-choice-card {
    background-color: #111827;
    border-color: #374151;
}

body.dark-mode .smartwatch-choice-card:hover {
    border-color: #a78bfa;
    background-color: #241b38;
}

.smartwatch-choice-icon {
    font-size: 1.8em;
    line-height: 1;
    flex-shrink: 0;
}

.smartwatch-choice-title {
    display: block;
    font-size: 1.05em;
    font-weight: 700;
    color: #1a1a1a;
}

body.dark-mode .smartwatch-choice-title {
    color: #f3f4f6;
}

.smartwatch-choice-desc {
    display: block;
    font-size: 0.85em;
    color: #777;
    margin-top: 2px;
}

body.dark-mode .smartwatch-choice-desc {
    color: #9ca3af;
}

.smartwatch-month-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 20px 0 16px 0;
}

.smartwatch-month-step-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background-color: #fff;
    font-size: 1.4em;
    font-weight: 700;
    color: #7c3aed;
    cursor: pointer;
}

.smartwatch-month-step-btn:active {
    background-color: #faf8ff;
}

body.dark-mode .smartwatch-month-step-btn {
    border-color: #374151;
    background-color: #111827;
    color: #a78bfa;
}

.smartwatch-month-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.smartwatch-month-value input {
    width: 70px;
    text-align: center;
    font-size: 1.8em;
    font-weight: 800;
    color: #1a1a1a;
    border: none;
    border-bottom: 2px solid #7c3aed;
    background: transparent;
    -moz-appearance: textfield;
}

.smartwatch-month-value input::-webkit-outer-spin-button,
.smartwatch-month-value input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.dark-mode .smartwatch-month-value input {
    color: #f3f4f6;
    border-bottom-color: #a78bfa;
}

.smartwatch-month-value span {
    font-size: 1.05em;
    color: #777;
}

body.dark-mode .smartwatch-month-value span {
    color: #9ca3af;
}

.smartwatch-month-quick-picks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.smartwatch-month-chip {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background-color: #fff;
    font-size: 0.88em;
    color: #444;
    cursor: pointer;
}

.smartwatch-month-chip.active {
    border-color: #7c3aed;
    background-color: #f3ecfe;
    color: #7c3aed;
    font-weight: 700;
}

body.dark-mode .smartwatch-month-chip {
    border-color: #374151;
    background-color: #111827;
    color: #d1d5db;
}

body.dark-mode .smartwatch-month-chip.active {
    border-color: #a78bfa;
    background-color: rgba(167, 139, 250, 0.18);
    color: #c4b5fd;
}

.smartwatch-choice-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 모바일 뷰에서 카드 클릭 시 피드백 추가 */
@media screen and (max-width: 768px) {
    .plan-card {
        cursor: pointer;
        transition: transform 0.1s;
    }
    .plan-card:active {
        transform: scale(0.98);
        background-color: #f0f0f0;
    }
    body.dark-mode .plan-card:active {
        background-color: #374151 !important;
    }
}

/* PC 화면 전용 맨 위로 이동 버튼 스타일 */
.pc-scroll-top-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

.pc-scroll-top-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: transparent;
    border: 2px solid #ff4d4f; /* 눈에 띄는 테두리 */
    border-radius: 8px;
    color: #ff4d4f; 
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    gap: 5px;
}

.pc-scroll-top-btn:hover {
    background-color: #fff1f0;
    transform: translateY(-5px);
}

.pc-scroll-top-btn i {
    font-size: 24px;
}

/* 모바일에서는 숨김 */
@media screen and (max-width: 768px) {
    .pc-scroll-top-container {
        display: none !important;
    }
}

/* ================================== */
/* ======== 요금제 목록 버튼 & 픽커 ======== */
/* ================================== */

/* 입력창 옆 버튼 */
.plan-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ============== 요금제 입력 단계별 가이드 (사용 순서 유도) ============== */
.plan-input-wrapper.guide-pulse {
    position: relative;
    border-radius: 8px;
    animation: guideHaloPulse 1.8s ease-in-out infinite;
}
.plan-input-wrapper.guide-pulse::before {
    content: attr(data-guide-step);
    position: absolute;
    top: -12px;
    left: -10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.45);
    z-index: 5;
    animation: guideBadgeBounce 1.4s ease-in-out infinite;
    pointer-events: none;
}
.plan-input-wrapper.guide-pulse .number-input {
    border-color: #4285f4 !important;
    box-shadow: 0 0 0 1px rgba(26, 115, 232, 0.25) inset !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
body.dark-mode .plan-input-wrapper.guide-pulse::before {
    background: linear-gradient(135deg, #4285f4 0%, #60a5fa 100%);
    box-shadow: 0 2px 10px rgba(96, 165, 250, 0.55);
}

@keyframes guideHaloPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(26, 115, 232, 0.18); }
}
@keyframes guideBadgeBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .plan-input-wrapper.guide-pulse,
    .plan-input-wrapper.guide-pulse::before {
        animation: none !important;
    }
}

.plan-input-wrapper .number-input {
    flex: 1;
    min-width: 0;
}
.plan-list-btn {
    white-space: nowrap;
    padding: 9px 13px;
    background: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.82em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.plan-list-btn:hover { background: #1557b0; }
body.dark-mode .plan-list-btn { background: #2563eb; }
body.dark-mode .plan-list-btn:hover { background: #1d4ed8; }

/* 요금제 목록 팝업 (가운데 창) */
.plan-picker-sheet {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.97);
    width: 90%;
    max-width: 420px;
    max-height: 78vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}
body.dark-mode .plan-picker-sheet {
    background: #1f2937;
    border: 1px solid #374151;
}
.bottom-sheet-modal.active .plan-picker-sheet {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
#planPickerModal .bottom-sheet-handle-bar { display: none; }

/* 필터 고정 헤더 */
.plan-picker-sticky-header {
    flex-shrink: 0;
    padding: 0 18px 10px;
    border-bottom: 1px solid #f0f0f0;
}
body.dark-mode .plan-picker-sticky-header {
    border-bottom-color: #374151;
}
.plan-picker-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.plan-picker-title-row h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 700;
    color: #1a73e8;
}
body.dark-mode .plan-picker-title-row h3 { color: #60a5fa; }
.plan-picker-close-x {
    background: none;
    border: none;
    font-size: 1.5em;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.plan-picker-close-x:hover { color: #333; background: #f0f0f0; }
body.dark-mode .plan-picker-close-x { color: #9ca3af; }
body.dark-mode .plan-picker-close-x:hover { color: #e5e7eb; background: #374151; }

/* 필터 행 */
.plan-picker-filters { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.plan-picker-filter-row { display: flex; align-items: center; gap: 8px; }
/* '구분' 필터가 '연령' 필터와 바로 붙어 보여 혼동을 주지 않도록 하단 경계선 추가 */
#ppFilter-category-row { padding-bottom: 8px; margin-bottom: 3px; border-bottom: 1px solid #e5e7eb; }
body.dark-mode #ppFilter-category-row { border-bottom-color: #4b5563; }
.pp-filter-label {
    font-size: 0.75em;
    font-weight: 700;
    color: #888;
    min-width: 30px;
    flex-shrink: 0;
}
body.dark-mode .pp-filter-label { color: #9ca3af; }

.pp-filter-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pp-filter-chip {
    padding: 7px 15px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: #fff;
    color: #555;
    font-size: 0.92em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.pp-filter-chip:hover { border-color: #1a73e8; color: #1a73e8; }
.pp-filter-chip.active {
    background: #1a73e8;
    border-color: #1a73e8;
    color: #fff;
}
body.dark-mode .pp-filter-chip {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}
body.dark-mode .pp-filter-chip:hover { border-color: #60a5fa; color: #60a5fa; }
body.dark-mode .pp-filter-chip.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* 결과 카운트 */
.plan-picker-carrier-info {
    font-size: 0.8em;
    color: #888;
    padding: 4px 0 2px;
}
body.dark-mode .plan-picker-carrier-info { color: #9ca3af; }

/* 스크롤 목록 */
.plan-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.pp-empty {
    text-align: center;
    padding: 30px 0;
    color: #aaa;
    font-size: 0.9em;
}

.plan-picker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 13px;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    gap: 10px;
}
.plan-picker-item:hover, .plan-picker-item:active {
    background: #e8f0fe;
    border-color: #1a73e8;
}
.plan-picker-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; text-align: center; }
.plan-picker-item .plan-picker-name {
    font-weight: 600;
    color: #333;
    font-size: 1.08em;
    line-height: 1.3;
    /* 긴 요금제명 자동 줄바꿈 — keep-all: 한글을 단어(공백) 단위로만 꺾어
       '라이트 59 75GB업'이 "라이트 59 75G/B업"처럼 어중간하게 잘리지 않게.
       overflow-wrap은 공백 없는 초장문 토큰이 넘칠 때만 최후 수단으로 개입 */
    word-break: keep-all;
    overflow-wrap: break-word;
}
.plan-picker-badge {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    margin-right: 6px;
    vertical-align: middle;
    line-height: 1.5;
}
/* 요금제명 끝 괄호 부가표기((유쓰+6GB) 등) — 아랫줄 분리 표시 */
.plan-name-suffix {
    display: inline-block;
    font-size: 0.85em;
    font-weight: 500;
    color: #1a73e8;
}
body.dark-mode .plan-name-suffix { color: #60a5fa; }
.plan-picker-badge.pp-badge-new { background: #e6f4ea; color: #137333; }
.plan-picker-badge.pp-badge-old { background: #f1f3f4; color: #80868b; }
body.dark-mode .plan-picker-badge.pp-badge-new { background: #14532d; color: #86efac; }
body.dark-mode .plan-picker-badge.pp-badge-old { background: #374151; color: #9ca3af; }
.plan-picker-item .plan-picker-age {
    font-size: 0.78em;
    color: #1a73e8;
    font-weight: 500;
    line-height: 1.2;
}
body.dark-mode .plan-picker-item .plan-picker-age { color: #60a5fa; }
.plan-picker-item .plan-picker-data {
    font-size: 0.82em;
    color: #666;
    line-height: 1.3;
    overflow-wrap: break-word; /* 긴 데이터 정보 자동 줄바꿈 */
    word-break: break-word;
}
.plan-picker-item .plan-picker-price {
    font-weight: 700;
    color: #1a73e8;
    font-size: 1.0em;
    white-space: nowrap;
    flex-shrink: 0;
}

body.dark-mode .plan-picker-item { background: #111827; border-color: #374151; }
body.dark-mode .plan-picker-item:hover,
body.dark-mode .plan-picker-item:active { background: #1e3a5f; border-color: #2563eb; }
body.dark-mode .plan-picker-item .plan-picker-name { color: #e5e7eb; }
body.dark-mode .plan-picker-item .plan-picker-data { color: #9ca3af; }
body.dark-mode .plan-picker-item .plan-picker-price { color: #60a5fa; }

/* 인터넷 결합 선택: 결합명은 정확히 중앙, 간단 설명은 별도 하단 행에 배치한다. */
.bundle-picker-trigger {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 9px 38px 8px !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
}
.bundle-picker-trigger .bundle-picker-content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}
.bundle-picker-trigger .bundle-picker-name {
    display: block;
    width: 100%;
    color: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}
.bundle-picker-trigger .bundle-picker-description {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #667085;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bundle-picker-trigger .bundle-picker-action {
    position: absolute;
    top: 50%;
    right: 12px;
    color: #557096;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%);
    white-space: nowrap;
}
body.dark-mode .bundle-picker-trigger .bundle-picker-description { color: #aebed3; }
body.dark-mode .bundle-picker-trigger .bundle-picker-action { color: #9ec5f8; }

/* 닫기 버튼 영역 */
.plan-picker-footer {
    flex-shrink: 0;
    padding: 10px 18px 20px;
}

/* 초기 요금제 범위 안내문("초기 요금제는 1만원~13만원만 입력하세요.")
   — 단독/비교 모드 어디서든 두 줄로 꺾이지 않고 한 줄 유지.
   좁은 화면에서는 글자 크기를 화면 폭에 맞춰 줄인다.
   (screen and 필수 — 안 붙이면 태블릿 인쇄에 모바일 축소가 그대로 찍힌다) */
.plan-range-note { white-space: nowrap; }
@media screen and (max-width: 768px) {
    .plan-range-note { font-size: min(0.9em, 4vw); }
    .comparison-mode .plan-range-note {
        font-size: clamp(7px, 2.05vw, 0.9em);
        letter-spacing: -0.3px;
    }
}
/* 태블릿(769~1120px) — 위 모바일 축소가 768px에서 끊기면서 폰트가 10px대에서 14.4px로
   튀는데, 비교 모드는 칸이 반으로 줄어 여유가 3px까지 좁아졌었다(810px 실측).
   문구를 줄인 뒤에도 아이패드 세로·폴드형에서 안전하도록 이 구간도 폭에 맞춰 축소한다. */
@media screen and (min-width: 769px) and (max-width: 1120px) {
    .comparison-mode .plan-range-note {
        font-size: clamp(10px, 1.55vw, 0.9em);
        letter-spacing: -0.2px;
    }
}

/* 폴드형 화면(갤럭시 Z 폴드 내부화면 등, 가로는 넓고 세로 700~840px)에서는
   필터 헤더가 시트 높이(78vh)를 거의 다 차지해 요금제 목록이 한 줄만 보이는
   문제가 있어, 가로 여유를 활용해 시트를 넓혀 필터 칩 줄바꿈을 줄이고
   목록 영역에 최소 높이를 보장한다. 공간이 그래도 모자라면 필터 영역이
   내부 스크롤되고 목록은 항상 확보된다. */
@media (min-width: 600px) and (max-height: 840px) {
    .plan-picker-sheet {
        max-width: min(560px, 92vw);
        max-height: 90vh;
        max-height: 90dvh;
    }
    .plan-picker-sticky-header {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px 6px;
    }
    .plan-picker-title-row { margin-bottom: 6px; }
    .plan-picker-filters { gap: 5px; margin-bottom: 6px; }
    .pp-filter-chip { padding: 5px 12px; font-size: 0.85em; }
    .plan-picker-carrier-info { padding: 2px 0 0; }
    .plan-picker-list {
        min-height: 200px;
        min-height: min(36dvh, 280px);
        padding: 8px 16px;
    }
    .plan-picker-footer { padding: 8px 16px 12px; }
}

/* 세로 폭이 짧은 화면(모바일 가로 모드 등)에서는 필터 헤더가 시트 높이보다 커져
   목록/닫기 버튼이 화면 밖으로 밀려나 안 보이는 문제가 있어, 헤더를 압축하고
   시트 자체의 높이 여유를 늘린다. */
@media (max-width: 960px) and (max-height: 500px) {
    .plan-picker-sheet {
        max-height: 96vh;
        max-height: 96dvh;
    }
    .plan-picker-sticky-header {
        padding: 0 14px 4px;
    }
    .plan-picker-title-row {
        margin-bottom: 4px;
    }
    .plan-picker-filters {
        gap: 3px;
        margin-bottom: 4px;
    }
    #ppFilter-category-row {
        padding-bottom: 3px;
        margin-bottom: 1px;
    }
    .pp-filter-label {
        min-width: 24px;
        font-size: 0.68em;
    }
    .pp-filter-chips {
        gap: 3px;
    }
    .pp-filter-chip {
        padding: 3px 9px;
        font-size: 0.78em;
    }
    .plan-picker-carrier-info {
        padding: 2px 0 0;
    }
    .plan-picker-list {
        padding: 6px 14px;
        min-height: 60px;
    }
    .plan-picker-footer {
        padding: 6px 14px 10px;
    }
}

/* U+ 시그니처/프리미어 할인 옵션 스타일 */
.lgu-special-discounts-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.lgu-special-discounts-row .input-group {
    flex: 1;
    margin-bottom: 0;
    padding: 10px;
    border: 1px dashed #c2185b; /* U+ 브랜드 포인트 컬러 배색 */
    border-radius: 8px;
    background-color: #fdf2f8;
}

body.dark-mode .lgu-special-discounts-row .input-group {
    background-color: #2d1b24;
    border-color: #880e4f;
}

.lgu-special-discounts-row .payment-method-options {
    display: flex;
    justify-content: center; /* 버튼 가운데 정렬 */
    margin-top: 8px;
}

.lgu-special-discounts-row .payment-button {
    width: 100%;
    max-width: 120px; /* 버튼이 너무 늘어지지 않도록 제한 */
    padding: 6px 10px;
    font-size: 0.85em;
    min-height: 36px;
    border-radius: 20px; /* 좀 더 둥글고 세련된 느낌 */
    transition: all 0.2s ease;
}

.lgu-special-discounts-row .payment-button.active {
    background-color: #c2185b;
    border-color: #c2185b;
    color: white;
    box-shadow: 0 2px 8px rgba(194, 24, 91, 0.3); /* 활성화 시 그림자 효과 */
}

/* ── U+ 추가 할인 B안(2026-07-23): 분홍 박스 3개 → 트리거 카드 + 중앙 팝업 ──
   js/lgu-extra-popup.js가 각 행에 .lgu-extra-collapsed를 붙이고 트리거를 주입한다.
   옵션 .input-group들은 평소 숨김, 팝업이 열리면 모달 안으로 이동한다. */
.lgu-special-discounts-row.lgu-extra-collapsed > .input-group { display: none !important; }
/* 통신사 변경 리셋 스냅샷이 그룹 className을 공장 상태로 복원해 위 클래스가 벗겨질 수
   있으므로, 트리거 존재 자체를 조건으로 한 :has 규칙을 별도 안전망으로 둔다.
   (:has 미지원 구형 브라우저를 위해 목록으로 합치지 말고 반드시 별도 규칙 유지) */
.lgu-special-discounts-row:has(> .lgu-extra-trigger) > .input-group { display: none !important; }
.lgu-extra-trigger {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #f1cfe0;
    border-radius: 12px;
    background: #fdf8fb;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lgu-extra-trigger:hover {
    border-color: #c2185b;
    box-shadow: 0 2px 8px rgba(194, 24, 91, 0.12);
}
.lgu-extra-trigger .lxt-ic { font-size: 1.05em; flex-shrink: 0; }
.lgu-extra-trigger .lxt-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.lgu-extra-trigger .lxt-txt b { font-size: 0.9em; color: #333; }
.lgu-extra-trigger .lxt-sum {
    font-size: 0.78em;
    font-weight: 600;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lgu-extra-trigger .lxt-sum.on { color: #c2185b; }
.lgu-extra-trigger .lxt-go {
    flex-shrink: 0;
    font-size: 0.8em;
    font-weight: 800;
    color: #c2185b;
    background: #fbe7f0;
    border-radius: 8px;
    padding: 5px 10px;
}
body.dark-mode .lgu-extra-trigger { background: #2d1b24; border-color: #6b2148; }
body.dark-mode .lgu-extra-trigger:hover { border-color: #ec4899; }
body.dark-mode .lgu-extra-trigger .lxt-txt b { color: #e5e7eb; }
body.dark-mode .lgu-extra-trigger .lxt-sum { color: #9ca3af; }
body.dark-mode .lgu-extra-trigger .lxt-sum.on { color: #f472b6; }
body.dark-mode .lgu-extra-trigger .lxt-go { color: #f472b6; background: #4a1d33; }

/* 팝업 내부: 행 스코프 분홍 박스 스타일이 떨어져 나가므로 담백한 구분선 목록으로 */
#lguExtraModalBody .input-group {
    margin: 0;
    padding: 13px 2px;
    border-bottom: 1px solid #f0f0f0;
}
#lguExtraModalBody .input-group:last-child { border-bottom: none; }
#lguExtraModalBody .payment-method-options {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
#lguExtraModalBody .payment-button {
    width: 100%;
    max-width: 130px;
    padding: 8px 12px;
    font-size: 0.88em;
    min-height: 40px;
    border-radius: 20px;
}
#lguExtraModalBody .payment-button.active {
    background-color: #c2185b;
    border-color: #c2185b;
    color: white;
    box-shadow: 0 2px 8px rgba(194, 24, 91, 0.3);
}
body.dark-mode #lguExtraModalBody .input-group { border-bottom-color: #374151; }


/* 유지비 계산기 전용 스타일 */
#maintenance-calculator-wrapper .carrier-buttons { display: flex; gap: 10px; margin-bottom: 15px; }
#mnt-carrier-buttons .carrier-button { flex: 1; padding: 12px; border: 1px solid #ddd; background: #fff; border-radius: 8px; cursor: pointer; font-weight: bold; transition: all 0.2s; text-align: center; }
#mnt-carrier-buttons .carrier-button.active { border-color: #1a73e8; background: #e8f0fe; color: #1a73e8; }
body.dark-mode #mnt-carrier-buttons .carrier-button { background: #374151; border-color: #4b5563; color: #fff; }
body.dark-mode #mnt-carrier-buttons .carrier-button.active { background: #1a73e8; border-color: #1a73e8; }
.result-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
body.dark-mode .result-table { background: #1f2937; color: #fff; }
.result-table th, .result-table td { padding: 12px; border: 1px solid #dee2e6; }
body.dark-mode .result-table th, body.dark-mode .result-table td { border-color: #334155; }

/* 유지비 계산기 전용 고급 스타일 */
.mnt-title { font-size: 1.5em; font-weight: 800; color: #1a73e8; margin-bottom: 25px; }
.mnt-flex-row { display: flex; gap: 15px; margin-bottom: 10px; width: 100%; }
.mnt-input-box { flex: 1; min-width: 0; }
.mnt-input-box.large { flex: 1.5; }
.mnt-input-box label { display: block; font-size: 0.85em; color: #666; margin-bottom: 5px; }
.duration-input { width: 100% !important; height: 45px !important; font-size: 1.1em !important; text-align: center; }
.mnt-highlight-box { background: #f0f4f8; padding: 20px; border-radius: 12px; border: 1px solid #d1d9e6; }
.mnt-date-selection-type { margin-bottom: 15px; }
.mnt-plan-change-box { margin-top: 15px; border-top: 1px solid #ccc; padding-top: 15px; }
.mnt-main-btn { width: 100%; height: 55px; font-size: 1.2em; font-weight: bold; margin-top: 20px; background: #1a73e8; color: #fff; border-radius: 12px; }
/* 다크모드 대응 */
body.dark-mode .mnt-title { color: #60a5fa; }
body.dark-mode .mnt-input-box label { color: #9ca3af; }
body.dark-mode .mnt-highlight-box { background: #1e293b; border-color: #334155; }
body.dark-mode .mnt-result-card { background: #1f2937; border-color: #334155; }
body.dark-mode .mnt-result-header { background: #111827; }
body.dark-mode .summary-item { background: #374151; border-color: #4b5563; }
body.dark-mode .summary-item span { color: #9ca3af; }
body.dark-mode .summary-item strong { color: #fff; }
body.dark-mode .result-table th { background: #111827; color: #60a5fa; }
body.dark-mode .result-table td { color: #e5e7eb; }
body.dark-mode .result-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.mnt-result-card { background: #fff; border-radius: 15px; border: 1px solid #eee; overflow: hidden; margin-top: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.mnt-result-header { background: #f8f9fa; padding: 15px 20px; border-bottom: 1px solid #eee; font-size: 0.9em; }
.mnt-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 20px; }
.summary-item { padding: 15px; border-radius: 10px; border: 1px solid #f0f0f0; text-align: center; }
.summary-item span { display: block; font-size: 0.75em; color: #888; margin-bottom: 5px; }
.summary-item strong { font-size: 1.1em; color: #333; }
.summary-item.penalty strong { color: #d93025; }
.summary-item.payback strong { color: #d93025; }
.summary-item.final { background: #e8f0fe; border-color: #d2e3fc; }
.summary-item.final strong { color: #1a73e8; font-size: 1.3em; }
.mnt-table-wrapper { overflow-x: auto; overflow-y: hidden; padding: 0 10px 20px; -webkit-overflow-scrolling: touch; }
.mnt-table-wrapper .result-table { width: 100%; min-width: 600px; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
.result-table td.status { font-size: 0.8em; color: #777; }
.result-table td.row-total { font-weight: bold; color: #1a73e8; }

#mnt-installment-selector-wrapper {
    opacity: 0;
    max-height: 0;
    transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
    .mnt-flex-row { flex-direction: column; gap: 15px; }
    .mnt-input-box.large { flex: none; width: 100%; }
    
    #mnt-installment-month-buttons {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        padding: 5px 0 !important;
        overflow-x: visible !important;
        white-space: normal !important;
    }
    #mnt-installment-month-buttons .payment-button {
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        padding: 10px 2px !important;
        font-size: 0.8em !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .mnt-summary-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
    .summary-item { padding: 8px 4px; border-radius: 8px; }
    .summary-item span { font-size: 0.65em; letter-spacing: -0.5px; }
    .summary-item strong { font-size: 0.9em; }
    .summary-item.final strong { font-size: 1.0em; }
    .mnt-summary-narrative-container { padding: 12px 15px; font-size: 0.85em; line-height: 1.6; }
    
    /* 유지비 계산기 결과 표 모바일 축소 버전 */
    .mnt-table-wrapper { padding: 0 5px 15px; }
    .mnt-table-wrapper .result-table { 
        min-width: 400px; /* 기존 480px에서 더 축소하여 스크롤 최소화 */
    }
    .mnt-table-wrapper .result-table th, 
    .mnt-table-wrapper .result-table td { 
        padding: 6px 2px; 
        font-size: 0.72em; /* 폰트 약간 더 축소 */
    }
    /* 회차 열 너비 고정 */
    .mnt-table-wrapper .result-table th:nth-child(1),
    .mnt-table-wrapper .result-table td:nth-child(1) {
        width: 45px;
    }
    /* 상태 열 너비 축소 및 자동 줄바꿈 */
    .mnt-table-wrapper .result-table th:nth-child(2),
    .mnt-table-wrapper .result-table td:nth-child(2) {
        width: 55px;
        word-break: break-all;
        line-height: 1.1;
    }
    .mnt-table-wrapper .result-table td.status { 
        font-size: 0.65em; 
    }
}

@media screen and (max-width: 480px) {
    .mnt-table-wrapper .result-table {
        min-width: 340px; /* 초소형 기기 대응 */
    }
    .mnt-table-wrapper .result-table th, 
    .mnt-table-wrapper .result-table td {
        padding: 4px 1px;
        font-size: 0.68em;
    }
    /* 더 좁은 화면에서 상태 열 최적화 */
    .mnt-table-wrapper .result-table th:nth-child(2),
    .mnt-table-wrapper .result-table td:nth-child(2) {
        width: 45px;
    }
}

/* 통신사 로고 크기 긴급 수정 */
#mnt-carrier-buttons .carrier-button { height: 55px; display: flex; align-items: center; justify-content: center; padding: 0 10px; overflow: hidden; }
#mnt-carrier-buttons .carrier-button img { max-height: 22px; width: auto; object-fit: contain; pointer-events: none; }
#mnt-carrier-buttons .carrier-button[data-value='LGU'] img { max-height: 30px; } /* LGU 로고는 세로가 길어서 별도 조정 */

/* 유지비 계산기 결과 창 다크모드 색상 보정 */
body.dark-mode .mnt-result-card { background: #1e293b !important; border-color: #334155 !important; }
body.dark-mode .mnt-result-header { background: #0f172a !important; border-bottom-color: #334155 !important; color: #cbd5e1 !important; }
body.dark-mode .result-table { background: transparent !important; }
body.dark-mode .result-table th { background: #0f172a !important; color: #60a5fa !important; border-color: #334155 !important; }
body.dark-mode .result-table td { border-color: #334155 !important; color: #e2e8f0 !important; }
body.dark-mode .result-table td.status { color: #94a3b8 !important; }
body.dark-mode .result-table td.row-total { color: #60a5fa !important; }
body.dark-mode .summary-item.final { background: #1e3a8a !important; border-color: #2563eb !important; }
body.dark-mode .summary-item.final strong { color: #60a5fa !important; }
body.dark-mode .summary-item.payback strong { color: #f87171 !important; }
body.dark-mode .mnt-plan-change-box { border-top-color: #334155 !important; }
body.dark-mode .mnt-plan-change-box label { color: #94a3b8 !important; }

/* 테이블 행 짝수 줄 다크모드 완벽 대응 */
body.dark-mode .result-table tr { background-color: #1e293b !important; }
body.dark-mode .result-table tr:nth-child(even) { background-color: #111827 !important; }
body.dark-mode .result-table td { background-color: transparent !important; color: #e2e8f0 !important; }
body.dark-mode .mnt-table-wrapper { background-color: #1e293b !important; }
body.dark-mode .mnt-summary-grid { background-color: #1e293b !important; }
body.dark-mode .summary-item { background-color: #0f172a !important; border-color: #334155 !important; }

/* 중도 해지 박스 다크모드 색상 스타일 */
.mnt-highlight-box-red { border-color: #d93025; background: #fff5f5; }
.mnt-label-red { color: #d93025; font-weight: bold; }
body.dark-mode .mnt-highlight-box-red { background: #451a1a !important; border-color: #7f1d1d !important; }
body.dark-mode .mnt-label-red { color: #f87171 !important; }
body.dark-mode #mnt-term-options label { color: #94a3b8 !important; }
body.dark-mode #mnt-term-options input[type='date'] { background-color: #1e293b !important; color: #fff !important; border-color: #334155 !important; }

/* 날짜 개별 입력칸 스타일 */
.mnt-date-input-group { display: flex; align-items: center; gap: 8px; background: #fff; padding: 10px; border-radius: 8px; border: 1px solid #ccc; width: 100%; height: 50px; }
.mnt-date-field { border: none !important; background: transparent !important; text-align: center; font-size: 1.1em; font-weight: bold; color: #333; outline: none; }
.mnt-date-field.year { width: 60px; }
.mnt-date-field.month, .mnt-date-field.day { width: 40px; }
.mnt-date-input-group span { font-size: 0.9em; color: #666; font-weight: bold; }
/* 다크모드 대응 */
body.dark-mode .mnt-date-input-group { background: #1e293b; border-color: #334155; }
body.dark-mode .mnt-date-field { color: #fff !important; }
body.dark-mode .mnt-date-input-group span { color: #94a3b8; }
/* 숫자 입력 스핀 버튼(화살표) 제거 */
.mnt-date-field::-webkit-outer-spin-button, .mnt-date-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mnt-date-field[type=number] { -moz-appearance: textfield; }

/* ================================== */
/* ▼▼▼ 유지비 계산기: "몇 개월째" 스케줄 스테퍼 (요금제 변경 / 중도해지 공용) ▼▼▼ */
/* ================================== */
.mnt-schedule-field { margin-top: 15px; }

.mnt-month-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 8px 0 14px 0;
}

.mnt-month-step-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #d1d9e6;
    background-color: #fff;
    font-size: 1.3em;
    font-weight: 700;
    color: #1a73e8;
    cursor: pointer;
}

.mnt-month-step-btn:active { background-color: #eef4ff; }

body.dark-mode .mnt-month-step-btn {
    border-color: #334155;
    background-color: #0f172a;
    color: #60a5fa;
}

.mnt-month-value { display: flex; align-items: baseline; gap: 6px; }

.mnt-month-value input {
    width: 64px;
    text-align: center;
    font-size: 1.6em;
    font-weight: 800;
    color: #1a1a1a;
    border: none;
    border-bottom: 2px solid #1a73e8;
    background: transparent;
    -moz-appearance: textfield;
}

.mnt-month-value input::-webkit-outer-spin-button,
.mnt-month-value input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

body.dark-mode .mnt-month-value input { color: #f3f4f6; border-bottom-color: #60a5fa; }

.mnt-month-value span { font-size: 1em; color: #666; }
body.dark-mode .mnt-month-value span { color: #9ca3af; }

.mnt-month-quick-picks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.mnt-month-chip {
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid #d1d9e6;
    background-color: #fff;
    font-size: 0.85em;
    color: #444;
    cursor: pointer;
}

.mnt-month-chip.active {
    border-color: #1a73e8;
    background-color: #eaf2ff;
    color: #1a73e8;
    font-weight: 700;
}

body.dark-mode .mnt-month-chip {
    border-color: #334155;
    background-color: #0f172a;
    color: #d1d5db;
}

body.dark-mode .mnt-month-chip.active {
    border-color: #60a5fa;
    background-color: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
}

.mnt-schedule-advanced-link {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #fff;
    border: 1px solid #b9cdf0;
    border-radius: 8px;
    padding: 10px;
    font-size: 0.88em;
    font-weight: 600;
    color: #1a73e8;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.mnt-schedule-advanced-link:hover { background-color: #eaf2ff; }
.mnt-schedule-advanced-link:active { background-color: #dbe8fd; }

body.dark-mode .mnt-schedule-advanced-link {
    background-color: #0f172a;
    border-color: #334155;
    color: #60a5fa;
}
body.dark-mode .mnt-schedule-advanced-link:hover { background-color: #17233a; }

.mnt-schedule-advanced-link.secondary {
    border-color: #d1d9e6;
    color: #666;
    font-weight: 500;
    margin-top: 12px;
}

.mnt-schedule-advanced-link.secondary:hover { background-color: #f3f5f8; }

body.dark-mode .mnt-schedule-advanced-link.secondary {
    border-color: #334155;
    color: #9ca3af;
}
body.dark-mode .mnt-schedule-advanced-link.secondary:hover { background-color: #1e293b; }

.mnt-schedule-advanced-area {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #d1d9e6;
}

body.dark-mode .mnt-schedule-advanced-area { border-top-color: #334155; }

/* 달력 선택 버튼 스타일 */
.mnt-date-wrapper { position: relative; width: 100%; }
.mnt-calendar-btn { background: #1a73e8; color: white; border: none; border-radius: 6px; width: 40px; height: 35px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; margin-left: auto; }
.mnt-calendar-btn:hover { background: #1557b0; }
.mnt-calendar-btn i { font-size: 1.1em; }
body.dark-mode .mnt-calendar-btn { background: #2563eb; }
/* 날짜 필드 포커스 시 테두리 강조 */
.mnt-date-input-group:focus-within { border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2); }
body.dark-mode .mnt-date-input-group:focus-within { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2); }

/* 유지비 계산기 결과 애니메이션 */
@keyframes mntFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mnt-animate-appear {
    animation: mntFadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 유지비 상세 요약 멘트 스타일 */
.mnt-summary-narrative-container { padding: 20px; border-bottom: 1px solid #eee; line-height: 1.8; font-size: 1.05em; white-space: pre-wrap; color: #333; background: #fff; opacity: 0; }
.mnt-summary-grid { opacity: 0; }
body.dark-mode .mnt-summary-narrative-container { background: #1e293b; color: #e2e8f0; border-bottom-color: #334155; }
.mnt-summary-narrative-container b { color: #1a73e8; }
body.dark-mode .mnt-summary-narrative-container b { color: #60a5fa; }

/* 유지비 계산기 제목 툴팁 너비 확장 */
.mnt-title .tooltip-text { width: 280px !important; /* 너비를 넉넉하게 확장 */
  padding: 15px !important;
  line-height: 1.6 !important;
  font-size: 0.9em !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 130% !important;
  white-space: normal !important; /* 자동 줄바꿈 허용 */
  text-align: left !important;
}

/* 모바일에서 툴팁이 화면 밖으로 나가지 않게 조정 */
@media screen and (max-width: 480px) {
  .mnt-title .tooltip-text { width: 240px !important; }
}

/* 유지비 계산기 툴팁 최종 디자인 수정 */
.mnt-title .tooltip-text {
  width: 320px !important;
  font-size: 13px !important; /* 글자 크기 축소 */
  padding: 12px 15px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  word-break: keep-all !important; /* 단어 단위 줄바꿈 */
  text-align: left !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

@media screen and (max-width: 480px) {
  .mnt-title .tooltip-text {
    width: 260px !important;
    font-size: 12px !important;
  }
}

/* 날짜 입력칸 짤림 현상 방지를 위한 너비 재조정 */
.mnt-date-field.year { width: 85px !important; }
.mnt-date-field.month, .mnt-date-field.day { width: 55px !important; }
.mnt-date-input-group { min-width: 280px; justify-content: center; gap: 5px !important; padding: 0 10px !important; }
.mnt-date-field { padding: 0 !important; }

@media screen and (max-width: 480px) {
  .mnt-date-input-group { min-width: 100%; gap: 3px !important; }
  .mnt-date-field.year { width: 75px !important; }
  .mnt-date-field.month, .mnt-date-field.day { width: 45px !important; }
}

/* ===== 일반(윈도우식) 계산기 ===== */
#standardCalcModal .modal-content.std-calc-content {
  max-width: 340px;
  padding: 24px 20px;
}
.std-calc {
  width: 100%;
  max-width: 300px;
  margin: 10px auto 0;
}
.std-calc-expr {
  min-height: 20px;
  text-align: right;
  font-size: 0.85em;
  color: #888;
  padding: 0 8px;
  word-break: break-all;
  line-height: 1.3;
}
.std-calc-display {
  text-align: right;
  font-size: 2.2em;
  font-weight: 700;
  color: #222;
  padding: 4px 8px 12px;
  word-break: break-all;
  line-height: 1.2;
  min-height: 1.2em;
}
.std-calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.std-key {
  border: none;
  border-radius: 8px;
  padding: 16px 0;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  background: #f1f3f4;
  color: #202124;
  transition: background 0.12s, transform 0.05s;
  -webkit-user-select: none;
  user-select: none;
}
.std-key:hover { background: #e3e6e8; }
.std-key:active { transform: scale(0.96); }
.std-key.num { background: #fafafa; }
.std-key.num:hover { background: #eee; }
.std-key.op { background: #e8eef7; color: #1a73e8; }
.std-key.op:hover { background: #d6e2f5; }
.std-key.equals { background: #1a73e8; color: #fff; }
.std-key.equals:hover { background: #1668d6; }

/* 다크모드 */
body.dark-mode .std-calc-display { color: #fff; }
body.dark-mode .std-calc-expr { color: #aaa; }
body.dark-mode .std-key { background: #374151; color: #f3f4f6; }
body.dark-mode .std-key:hover { background: #455065; }
body.dark-mode .std-key.num { background: #2b3543; }
body.dark-mode .std-key.num:hover { background: #374151; }
body.dark-mode .std-key.op { background: #2a3a52; color: #8ab4f8; }
body.dark-mode .std-key.op:hover { background: #34496b; }
body.dark-mode .std-key.equals { background: #1a73e8; color: #fff; }
body.dark-mode .std-key.equals:hover { background: #1668d6; }

@media screen and (max-width: 480px) {
  #standardCalcModal .modal-content.std-calc-content { max-width: 92%; padding: 20px 14px; }
  .std-key { padding: 14px 0; font-size: 1em; }
  .std-calc-display { font-size: 1.9em; }
}

/* ================================================================ */
/* == 2026-07 UI 스킨: 시안 A 부품 (입력창·버튼·결과 카드) == */
/* 색·질감·모서리만 바꾸는 표면 스킨. 크기·간격·display·position은  */
/* 절대 건드리지 않는다 (계산 로직/자동계산/2단 레이아웃 보호).       */
/* 다크모드 색상은 style-base.css의 !important 규칙이 계속 우선한다.  */
/* ================================================================ */
.input-group input,
.input-group select {
    border: 1.5px solid #dfe5ee;
    border-radius: 12px;
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-group input:focus,
.input-group select:focus {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}
body.dark-mode .input-group input:focus,
body.dark-mode .input-group select:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.calc-button {
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.25);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.calc-button:hover {
    box-shadow: 0 6px 16px rgba(26, 115, 232, 0.32);
}

.result-section {
    background: #fff;
    border: 1px solid #e9edf3;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(23, 32, 43, 0.05);
}
.result-table thead { background-color: #f2f6fc; }

/* [UX 개편 2026-07] 버튼 크기 확대 + 터치 타깃 최소 44px (NN/g 권고, Fitts의 법칙)
   ─ 극소화가 필요한 비교모드 전용 !important 규칙(style-responsive.css)은 계속 우선한다. */
.calc-button {
    padding: 17px 15px;
    min-height: 52px;
    letter-spacing: -0.01em;
}
.choice-button,
#simple-calculator-content .option-button {
    min-height: 44px;
}
/* 선택형 버튼(개월·통신사 등)은 컴팩트 — 2026-07-20 시안 확정값 */
.payment-button,
.carrier-button {
    min-height: 32px;
}

/* ================================================================ */
/* == 초기화 버튼: 계산기 카드/컨텍스트 옆 3D 컨트롤 (2026-07) == */
/* 초기화 의미를 아이콘과 명칭으로 함께 전달하되, 계산보다 시선이  */
/* 먼저 가지 않도록 중립색과 짧은 그림자를 사용한다.                */
/* ================================================================ */

/* phone.html과 internet.html이 공유하는 카드 우측 상단 버튼 */
#calculator-main-wrapper .main-content { position: relative; }
.calc-reset-card-btn {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 88px;
    height: 38px;
    padding: 0 11px 0 9px;
    border: 1px solid #d7dee8;
    border-radius: 9px;
    background: #f8fafc;
    color: #2f3948;
    box-shadow: 0 3px 0 #d7dde6, 0 5px 10px rgba(36, 48, 66, 0.12);
    font-family: 'Pretendard Variable', Pretendard, "Pretendard Fallback", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease;
}
.calc-reset-card-btn::before {
    content: '↺';
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 1px solid #d7e5fb;
    border-radius: 7px;
    background: #eef4ff;
    color: #246fda;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(36, 111, 218, 0.18);
    font-family: 'Pretendard Variable', Pretendard, "Pretendard Fallback", 'Segoe UI Symbol', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}
.calc-reset-card-btn:hover {
    transform: translateY(-1px);
    background: #fff;
    color: #172033;
    border-color: #c8d5e7;
    box-shadow: 0 4px 0 #d3dae4, 0 7px 13px rgba(36, 48, 66, 0.14);
}
.calc-reset-card-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #d3dae4, 0 2px 5px rgba(36, 48, 66, 0.12);
}
.calc-reset-card-btn:focus-visible {
    outline: 3px solid rgba(36, 111, 218, 0.22);
    outline-offset: 3px;
}
body.dark-mode .calc-reset-card-btn {
    background: #202938;
    color: #e5eaf1;
    border-color: #455166;
    box-shadow: 0 3px 0 #111827, 0 5px 10px rgba(0, 0, 0, 0.32);
}
body.dark-mode .calc-reset-card-btn::before {
    background: #17243a;
    color: #75a9f5;
    border-color: #334d73;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.28);
}
body.dark-mode .calc-reset-card-btn:hover {
    background: #293448;
    color: #fff;
    border-color: #5a6982;
    box-shadow: 0 4px 0 #111827, 0 7px 13px rgba(0, 0, 0, 0.34);
}
@media screen and (max-width: 640px) {
    .calc-reset-card-btn {
        top: 12px;
        right: 12px;
        min-width: 84px;
        height: 36px;
        padding: 0 10px 0 8px;
        font-size: 0.72rem;
    }
    .calc-reset-card-btn::before {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
    }

    /* 비교 계산은 카드 폭이 절반으로 줄어 초기화가 오른쪽 제목을 덮는다.
       두 카드 모두 같은 상단 여백을 확보해 버튼이 앉을 자리를 비워둔다. */
    #main-calculator-content-wrapper.comparison-mode > .section,
    #calculator-main-wrapper .main-content.comparison-mode > .section {
        padding: 44px 5px 8px !important;
    }
    /* [버그 수정] 비교 모드의 카드 2개(통신사 A/B)는 실기기에서 뷰포트보다 넓어져
       가로 스크롤이 생기는데(min-width:160px×2 + gap이 390px보다 커짐), 이 버튼은
       "통신사 B" 카드 기준 right:18px로 붙어 있어서 화면 밖으로 밀려나 아예 안 보이고
       손도 안 닿았다(실기기 스크린샷으로 확인). 카드/스크롤 기준이 아니라 화면(뷰포트)
       기준으로 고정해서, 스크롤 상태와 무관하게 항상 떠 있게 한다.
       좌하단은 popup-notice.js의 "공지 다시보기" 버튼이 이미 쓰고 있어 우하단으로 피함. */
    #main-calculator-content-wrapper.comparison-mode > .calc-reset-card-btn,
    #calculator-main-wrapper .main-content.comparison-mode > .calc-reset-card-btn {
        position: fixed;
        top: auto;
        left: auto;
        bottom: 14px;
        right: 14px;
        z-index: 60;
        min-width: 78px;
        height: 34px;
        padding: 0 9px 0 7px;
        font-size: 0.7rem;
        box-shadow: 0 3px 0 #d7dde6, 0 6px 16px rgba(36, 48, 66, 0.22);
    }
    body.dark-mode #main-calculator-content-wrapper.comparison-mode > .calc-reset-card-btn,
    body.dark-mode #calculator-main-wrapper .main-content.comparison-mode > .calc-reset-card-btn {
        box-shadow: 0 3px 0 #111827, 0 6px 16px rgba(0, 0, 0, 0.4);
    }
    #main-calculator-content-wrapper.comparison-mode > .calc-reset-card-btn::before,
    #calculator-main-wrapper .main-content.comparison-mode > .calc-reset-card-btn::before {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }
}

/* 비교 모드에서도 버튼은 카드 안 우상단(오른쪽 카드 헤더 옆)에 그대로 둔다.
   한때 카드 바깥 위쪽으로 올렸었는데(top:-46px), phone.html의 비교+결과 2단
   레이아웃에서 "일할 계산 적용중" 버튼과 겹치는 문제가 있어 되돌렸다. */
/* phone.html의 계산기 카드 3종에도 같은 버튼을 앵커링 (internet과 동일한 위치 원칙) */
#main-calculator-content-wrapper,
#maintenance-calculator-wrapper,
#penalty-calculator-wrapper { position: relative; }
/* 위약금 입력 화면의 제목과 초기화를 한 행에 묶어 버튼이 떠 보이지 않게 한다. */
.penalty-heading-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px 18px;
}
.penalty-heading-row h2 {
    flex: 1 1 auto;
    margin: 0;
}
.penalty-heading-row .calc-reset-card-btn {
    position: static;
    top: auto;
    right: auto;
    flex: 0 0 auto;
}
@media screen and (max-width: 640px) {
    .penalty-heading-row {
        gap: 8px;
        width: calc(100% - 20px);
        margin: 0 10px 12px;
        padding: 9px 10px;
        border: 1px solid #dfe5ee;
        border-radius: 6px;
        background: #fff;
        box-sizing: border-box;
    }
    .penalty-heading-row h2 {
        min-width: 0;
        margin: 0 !important;
        color: #1f6fd5;
        font-size: 1.02rem !important;
        line-height: 1.25;
        text-align: left;
        word-break: keep-all;
    }
    .penalty-heading-row .calc-reset-card-btn {
        min-width: 78px;
        height: 34px;
        padding: 0 9px 0 7px;
        font-size: 0.7rem;
    }
    .penalty-heading-row .calc-reset-card-btn::before {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }
    body.dark-mode .penalty-heading-row {
        background: #29313e;
        border-color: #465267;
    }
}

/* ================================================================ */
/* == 상단 유틸리티 컨트롤: 메뉴·테마 3D 아이콘 버튼 (2026-07) == */
/* 기능 설명은 title/숨김 텍스트로 유지하고, 화면에는 익숙한 아이콘 */
/* 만 보여 계산기 콘텐츠보다 조용하게 보이도록 한다.                 */
/* ================================================================ */
/* 다크모드 토글은 2026-07-21 개편으로 슬라이딩 스위치(style-pages.css)로 이동 —
   여기서는 메뉴 버튼만 3D 스타일을 유지한다. */
.icon-button.btn-menu {
    position: relative;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    padding: 0 !important;
    border: 1px solid #d8dee8 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #343d4d !important;
    box-shadow: 0 3px 0 #d6dce5, 0 6px 12px rgba(36, 48, 66, 0.13) !important;
    overflow: visible;
    animation: none !important;
    margin: 0 !important;
    transform: none;
    transition: transform 0.15s ease, background 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.icon-button.btn-menu:hover {
    transform: translateY(-1px) !important;
    background: #fff !important;
    border-color: #c8d3e2 !important;
    box-shadow: 0 4px 0 #d2d9e3, 0 8px 14px rgba(36, 48, 66, 0.15) !important;
}
.icon-button.btn-menu:active {
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 #d2d9e3, 0 3px 6px rgba(36, 48, 66, 0.12) !important;
}
.icon-button.btn-menu:focus-visible {
    outline: 3px solid rgba(36, 111, 218, 0.22);
    outline-offset: 3px;
}

/* 텍스트는 화면에서만 숨겨 스크린리더와 기존 테마 문구 갱신은 유지한다. */
.icon-button.btn-menu > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 메뉴: 입체 막대 세 개와 작은 브랜드 컬러 포인트 */
.icon-button.btn-menu > .hamburger-icon {
    position: relative;
    width: 24px;
    height: 19px;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.icon-button.btn-menu .hamburger-icon .bar,
.icon-button.btn-menu:hover .hamburger-icon .bar {
    width: 24px;
    height: 3px;
    border-radius: 99px;
    background: #343d4d;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 2px rgba(36, 48, 66, 0.18);
}
body.dark-mode .icon-button.btn-menu {
    background: #29313e !important;
    color: #e7ebf1 !important;
    border-color: #4a5668 !important;
    box-shadow: 0 3px 0 #111827, 0 6px 12px rgba(0, 0, 0, 0.34) !important;
}
body.dark-mode .icon-button.btn-menu:hover {
    background: #323c4b !important;
    border-color: #5d6a7e !important;
    box-shadow: 0 4px 0 #111827, 0 8px 14px rgba(0, 0, 0, 0.38) !important;
}
body.dark-mode .icon-button.btn-menu .hamburger-icon .bar,
body.dark-mode .icon-button.btn-menu:hover .hamburger-icon .bar {
    background: #e3e8ef;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 2px rgba(0, 0, 0, 0.34);
}

@media screen and (max-width: 768px) {
    .top-left-buttons,
    .top-right-buttons {
        top: 8px !important;
        transform: none !important;
    }
    .top-left-buttons { left: 8px !important; }
    .top-right-buttons { right: 8px !important; }
    .icon-button.btn-menu {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px;
    }
}

/* ================================================================ */
/* == 모바일 정렬·터치 최적화 (2026-07-17, 시안 v1 A안 반영)      == */
/* 전부 모바일 미디어쿼리 안에서만 동작 — PC 레이아웃 영향 없음.   */
/* 시안: 헤더 버튼 규격 통일(A안) / 상단·초기화 아이콘 정중앙 /    */
/*       비교 카드 여백 정리 / 터치 타깃 44px 기준 통일             */
/* ================================================================ */

@media screen and (max-width: 640px) {
    /* [1-A안] 헤더 버튼 2종을 같은 규격(폭·높이 동일)으로 세로 스택 */
    .header-action-buttons {
        flex-direction: column;
        gap: 8px;
    }
    .header-action-buttons .btn-back-to-menu,
    .header-action-buttons .prorate-button {
        width: min(280px, 86vw);
        min-width: 0;
        height: 44px;
        padding: 0 16px;
        justify-content: center;
        font-size: 0.88rem;
    }
    /* prorate 버튼은 원래 inline 요소라 flex 정렬을 직접 부여
       (btn-back-to-menu의 표시 여부는 기존 .calculator-active 규칙 그대로) */
    .header-action-buttons .prorate-button {
        display: inline-flex;
        align-items: center;
    }
}

@media screen and (max-width: 768px) {
    /* [2] 좌측 상단 메뉴 버튼: 아이콘을 그리드로 정중앙 배치 + 44px 터치 타깃
       (다크모드 토글은 스위치 형태라 제외 — style-pages.css에서 자체 크기 관리) */
    .icon-button.btn-menu {
        display: grid !important;
        place-items: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
    }

    /* [3] 초기화 버튼: ↺ 글자를 SVG로 교체 — 폰트 메트릭과 무관하게 항상 정중앙 */
    .calc-reset-card-btn::before {
        content: '';
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a73e8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpolyline points='3 4 3 9 8 9'/%3E%3C/svg%3E")
            center / 13px 13px no-repeat #f4f8ff;
    }
    body.dark-mode .calc-reset-card-btn::before {
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpolyline points='3 4 3 9 8 9'/%3E%3C/svg%3E")
            center / 13px 13px no-repeat #17243a;
    }

    /* [4c→컴팩트] 선택형 버튼 높이: 44px 터치 기준에서 30px 컴팩트로 조정
       (2026-07-20 시안 컨펌 — 글자 크기는 유지) */
    .carrier-button, .discount-button, .payment-button, .maintenance-month-button {
        min-height: 30px !important;
        font-size: 0.72rem !important;
    }
    .toggle-button { min-height: 44px; }



    /* [4c] 요금제 유지기간(6개월/4개월/직접입력): 버튼이 항상 3개인데
       공용 규칙이 4열 그리드를 강제해 3개가 좁게 밀착되고 4번째 칸이
       비어 있었다. 정확히 3등분 + 숨쉴 간격으로 교정. */
    .maintenance-months-buttons {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    /* [4a+] 결합/옵션 소그룹 버튼(payment-method-options): 버튼 개수만큼
       칸을 자동 분할해 줄을 꽉 채운다 (2개=½씩, 3개=⅓씩, 5개=⅕씩).
       기존에는 "4열 고정 + 5열 강제 ID 목록" 방식이라 개수가 안 맞는
       그룹마다 오른쪽에 빈 칸이 남거나(4개를 5열에) 좁게 뭉개졌다
       (2개를 5열에). 개수를 세는 ID 목록 유지보수도 더는 필요 없다.
       :not(#_)는 기존 ID 목록 규칙(!important)보다 우선순위를 확보하는
       장치(가짜 ID로 특이도만 올림). 버튼 6개 이상인 동적 그룹
       (.discount-type-buttons)은 기존 4열 줄바꿈을 유지한다. */
    .payment-method-options:not(#_) {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: 1fr !important;
        grid-template-columns: none !important;
        gap: 6px !important;
        width: 100% !important;
    }
    /* [4a+ 예외] internet.html: "기가W+버디(1,650원)" 같은 긴 라벨 그룹을
       한 줄에 강제하면 최소 폭 때문에 카드 밖으로 넘친다(실기기 확인).
       인터넷 페이지는 폭에 맞춰 자동 줄바꿈되는 그리드로 되돌린다 —
       좁은 비교 카드에선 2×2, 넓은 단독 모드에선 한 줄로 자연 배치. */
    /* "변경 ›" 픽커 트리거 1개만 담은 컨테이너는 제외 — auto-fit 그리드에
       넣으면 트랙 1칸 폭만 차지해 버튼이 반쪽이 된다 (트리거는 항상 전체 폭) */
    #calculator-main-wrapper .payment-method-options:not(#_):not(:has(> .tv-plan-picker-trigger)) {
        grid-auto-flow: row !important;
        grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)) !important;
    }
    #calculator-main-wrapper .payment-method-options:not(#_) > * {
        min-width: 0;
    }
}

@media screen and (max-width: 640px) {
    /* [3+] 초기화 버튼: 모바일에서는 어떤 계산기 모드든 우하단 고정으로 따라온다.
       원래 비교 모드에서만 fixed였던 동작(가로 스크롤로 버튼이 화면 밖에
       밀리던 버그의 해결책)을 단독계산·유지비·위약금까지 확대해 통일.
       PC(640px 초과)는 기존대로 카드 우상단에 정착 — 반응형 분기. */
    .calc-reset-card-btn,
    .penalty-heading-row .calc-reset-card-btn {
        position: fixed;
        top: auto;
        left: auto;
        right: 14px;
        bottom: 14px;
        z-index: 60;
        min-width: 78px;
        height: 40px;
        padding: 0 10px 0 8px;
        font-size: 0.72rem;
        box-shadow: 0 3px 0 #d7dee6, 0 6px 16px rgba(36, 50, 66, 0.22);
    }
    body.dark-mode .calc-reset-card-btn {
        box-shadow: 0 3px 0 #111927, 0 6px 16px rgba(0, 0, 0, 0.4);
    }
    /* 비교 모드 전용 fixed 규칙(id 선택자)과 크기 통일 */
    #main-calculator-content-wrapper.comparison-mode > .calc-reset-card-btn,
    #calculator-main-wrapper .main-content.comparison-mode > .calc-reset-card-btn {
        height: 40px;
        bottom: 14px;
        right: 14px;
    }

    /* [4a] 비교 모드 카드 여백 정리
       - 초기화 버튼이 우하단 고정(fixed)으로 바뀐 뒤에도 남아 있던
         카드 상단 44px 예약 공간을 회수하고, 좌우 여백을 살짝 넓힌다. */
    #main-calculator-content-wrapper.comparison-mode > .section,
    #calculator-main-wrapper .main-content.comparison-mode > .section {
        padding: 12px 7px 10px !important;
    }
    .main-content.comparison-mode .section,
    #main-calculator-content-wrapper.comparison-mode .section {
        font-size: 0.74rem !important;
    }
    /* 비교 모드 내부의 할부 개월 버튼도 터치 최소선 확보(카드가 좁아 38px) */
    .comparison-mode .installment-month-button {
        min-height: 38px !important;
        font-size: 0.68rem !important;
    }

    /* [4a] "+ 중간 요금제 추가 (선택사항)": 좁은 비교 카드에서
       "(선택사항)"이 어중간하게 잘리지 않도록 그 앞에서만 줄바꿈.
       텍스트에 넣어둔 개행 문자를 여기서만 살린다 — 넓은 화면에서는
       white-space 기본값이라 개행이 공백으로 접혀 한 줄 유지. */
    .comparison-mode .btn-additional-plan {
        white-space: pre-line !important;
        line-height: 1.3;
    }
}

/* [6] 모달/바텀시트(워치 사용, 결합유형 선택 등)가 열릴 때 body 스크롤
   잠금(overflow:hidden)으로 스크롤바가 사라지며 화면 폭이 순간 17px
   늘었다가 닫으면 줄어드는 점프 방지. 스크롤바 자리를 항상 예약해 폭을
   고정한다. 화면 폭과 무관한 결함이라 미디어쿼리 밖에 둔다.
   - 데스크톱형 스크롤바 환경(PC, 좁은 창)에서만 의미가 있고,
     오버레이 스크롤바인 실기기(안드로이드/아이폰)에는 영향 없음.
   - 페이지가 늘 세로 스크롤될 만큼 길어서 평소 화면엔 변화 없음. */
html { scrollbar-gutter: stable; }

/* ================================================================ */
/* == [7] 워치 사용 선택: 바텀시트 → 중앙 팝업 (2026-07-17)       == */
/* 선택지 2개짜리 간단한 질문이라 화면 전체를 미는 바텀시트보다     */
/* 가운데 뜨는 작은 팝업이 가볍다. 마크업/JS는 그대로, 표시만 변경. */
/* ================================================================ */
#smartwatchUsageModal .bottom-sheet-content,
#extraServiceModal .bottom-sheet-content {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(360px, calc(100vw - 32px));
    max-height: min(80vh, 580px);
    border-radius: 16px;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
#smartwatchUsageModal.active .bottom-sheet-content,
#extraServiceModal.active .bottom-sheet-content {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
/* 아래로 끌어내리는 손잡이 바는 팝업에선 어색하므로 숨기고 위 여백 보충 */
#smartwatchUsageModal .bottom-sheet-handle-bar,
#extraServiceModal .bottom-sheet-handle-bar { display: none; }
#smartwatchUsageModal .bottom-sheet-body,
#extraServiceModal .bottom-sheet-body { padding-top: 20px; }
@media (prefers-reduced-motion: reduce) {
    #smartwatchUsageModal .bottom-sheet-content,
    #extraServiceModal .bottom-sheet-content { transition: none; }
}

/* [5] 결과 카드 요금제명 강조 애니메이션: 이름 span에 flex:1(인라인)이
   걸려 있어 글로우 박스가 줄 전체로 늘어나 옆의 금액까지 감쌌다.
   행(li)이 이미 space-between이라 늘릴 필요가 없으므로 내용 크기로
   줄여서 애니메이션이 요금제 이름만 감싸게 한다. (PC·모바일 공통) */
.breakdown-card .result-plan-name {
    flex: 0 1 auto !important;
}

/* [8] 요금제 명칭 자동 줄바꿈 통일 (2026-07-17)
   신규 SK '라이트 59 75GB업'처럼 이름이 길어져도 단어(공백) 단위로만
   줄이 꺾이도록 이름 표시 요소 전반에 keep-all 적용. (PC·모바일 공통) */
.plan-card h4,
.breakdown-card .result-plan-name,
#detailPlanName {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* [9] 연령 혜택(청년·청소년·시니어) 줄 초록 형광펜 (2026-07-17)
   데이터/혜택의 노란 마카와 구분되는 연령 조건 전용 강조.
   상세 팝업(.detail-description)과 요금제 목록 카드(.plan-card) 공용. */
.detail-description mark.plan-mark-green,
.plan-card .description mark.plan-mark-green {
    background: linear-gradient(180deg, transparent 55%, #fff176 55%, #fff176 92%, transparent 92%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0 2px;
    color: #14532d;
    font-weight: 700;
}
body.dark-mode .detail-description mark.plan-mark-green,
body.dark-mode .plan-card .description mark.plan-mark-green {
    background: #2e7d32;
    border-radius: 3px;
    color: #eafff0;
}

/* [10] 결과 카드(공시/선약 등) 안쪽 정돈 — 모바일 (2026-07-17)
   - 카드 좌우 여백이 4px뿐이라 '공시지원 구매' 제목이 모서리에 붙었다 → 10px 확보
   - '단말기 구매가'(10px·점선)와 '총비용'(15px·실선) 칸의 위아래 공백·구분선이
     서로 달랐다 → 8px 스케일·실선 1종으로 통일 (다크모드 선 색은 기존 규칙 재사용) */
@media screen and (max-width: 768px) {
    .breakdown-card {
        padding: 12px 10px !important;
    }
    .breakdown-card h4 {
        margin: 0 0 8px;
    }
    .breakdown-card .device-price-section,
    .breakdown-card .total-cost-section {
        padding: 8px 0;
        margin-bottom: 8px;
        border-bottom: 1px solid #eee;
    }
    .breakdown-card .device-price-section strong,
    .breakdown-card .total-cost-section strong {
        margin-top: 4px !important;
    }
}

/* ================================================================ */
/* == [11] Internet 모바일 결과표 폭 보강 (2026-07-18)            == */
/* 유지비 표의 600px 최소폭이 Internet 월별 결과표에 누수되지 않게.  */
/* (같은 커밋에 있던 "비교 카드 세로 스택" 레이아웃은 좌우 비교 +    */
/*  팝업 픽커 방식이 낫다는 결정에 따라 제거함 — 2026-07-18)        */
@media screen and (max-width: 768px) {
    #calculator-main-wrapper .monthly-table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* [12] internet.html 초기화 버튼 정렬 (2026-07-18)
   main-content 기준 top:18px가 카드(.section, 안쪽 여백 24px)의 제목줄보다
   7px 위에 떠서 모서리에 낀 것처럼 보였다. 제목(h3) 줄과 같은 높이로 맞추고
   우측 여백도 카드 안쪽 여백과 동일하게. (phone.html 쪽 기준값은 그대로) */
@media (min-width: 641px) {
    #calculator-main-wrapper .calc-reset-card-btn {
        top: 25px;
        right: 24px;
    }
}

/* ================================================================ */
/* == [13] 결합 설정 위저드 팝업 (2026-07-18)                      == */
/* internet-bundle-wizard.js 전용. 계산 로직과 무관한 표시 전용.     */
/* ================================================================ */
#bundle-wizard-modal, #change-wizard-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#bundle-wizard-modal .bw-backdrop, #change-wizard-modal .bw-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.18s ease;
}
#bundle-wizard-modal .bw-card, #change-wizard-modal .bw-card {
    position: relative;
    width: min(340px, 100%);
    max-height: min(80vh, 560px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.28);
    transform: translateY(10px) scale(0.97);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
#bundle-wizard-modal.active .bw-backdrop, #change-wizard-modal.active .bw-backdrop { opacity: 1; }
#bundle-wizard-modal.active .bw-card, #change-wizard-modal.active .bw-card { transform: none; opacity: 1; }
.bw-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 15px 10px;
    border-bottom: 1px solid #eef1f5;
}
.bw-head b { font-size: 0.95rem; color: #1c2534; }
.bw-x { border: none; background: none; font-size: 1.05rem; color: #94a3b8; cursor: pointer; padding: 2px 6px; }
.bw-steps { display: flex; gap: 4px; padding: 10px 15px 0; }
.bw-steps i { flex: 1; height: 4px; border-radius: 99px; background: #e2e8f0; }
.bw-steps i.on { background: #1a73e8; }
.bw-body { padding: 12px 15px 15px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.bw-q { font-size: 0.84rem; font-weight: 800; color: #1c2534; margin: 2px 0 4px; word-break: keep-all; }
.bw-opt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: #f8f9fb;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1c2534;
    cursor: pointer;
    font-family: inherit;
    word-break: keep-all;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.bw-opt:hover { border-color: #1a73e8; }
.bw-opt.sel { border-color: #1a73e8; background: #e8f0fe; }
.bw-opt-main small { display: block; font-weight: 500; color: #64748b; font-size: 0.7rem; margin-top: 2px; line-height: 1.45; }
.bw-arrow { color: #94a3b8; flex-shrink: 0; }
.bw-back { align-self: flex-start; border: none; background: none; color: #64748b; font-size: 0.76rem; font-weight: 700; cursor: pointer; padding: 2px 0; font-family: inherit; }
.bw-done { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; padding: 12px 0 4px; }
.bw-ok { width: 44px; height: 44px; border-radius: 50%; background: #1e9e5a; color: #fff; display: grid; place-items: center; font-size: 1.3rem; }
.bw-warn { width: 44px; height: 44px; border-radius: 50%; background: #f59e0b; color: #fff; display: grid; place-items: center; font-size: 1.3rem; font-weight: 900; }
.bw-sum { font-size: 0.86rem; font-weight: 800; color: #1c2534; word-break: keep-all; }
.bw-note { margin: 0; font-size: 0.74rem; color: #64748b; word-break: keep-all; }
.bw-apply { width: 100%; border: none; border-radius: 10px; background: #1a73e8; color: #fff; font-weight: 800; font-size: 0.86rem; padding: 12px 0; cursor: pointer; font-family: inherit; }
.bw-restart { border: none; background: none; color: #1a73e8; font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: inherit; }
body.dark-mode #bundle-wizard-modal .bw-card, body.dark-mode #change-wizard-modal .bw-card { background: #1f2937; }
body.dark-mode .bw-head { border-bottom-color: #374151; }
body.dark-mode .bw-head b, body.dark-mode .bw-q, body.dark-mode .bw-sum { color: #e8edf5; }
body.dark-mode .bw-opt { background: #111827; border-color: #374151; color: #e8edf5; }
body.dark-mode .bw-opt.sel { background: #1e3a5f; border-color: #2563eb; }
body.dark-mode .bw-steps i { background: #374151; }
@media (prefers-reduced-motion: reduce) {
    #bundle-wizard-modal .bw-backdrop, #bundle-wizard-modal .bw-card, #change-wizard-modal .bw-backdrop, #change-wizard-modal .bw-card { transition: none; }
}

/* [13-추가] 위저드 옵션 우측 가격 표시 (인터넷 속도 등) */
.bw-opt .bw-price { font-weight: 800; color: #1a73e8; font-size: 0.8rem; flex-shrink: 0; white-space: nowrap; }
body.dark-mode .bw-opt .bw-price { color: #60a5fa; }

/* ================================================================ */
/* == [14] phone 결합 조건 위저드 + 패널 접기 (2026-07-19)         == */
/* phone-bundle-wizard.js 전용 — 계산과 무관한 표시 전용.            */
/* ================================================================ */
#phone-bundle-wizard-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#phone-bundle-wizard-modal .bw-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.18s ease;
}
#phone-bundle-wizard-modal .bw-card {
    position: relative;
    width: min(340px, 100%);
    max-height: min(80vh, 560px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.28);
    transform: translateY(10px) scale(0.97);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
#phone-bundle-wizard-modal.active .bw-backdrop { opacity: 1; }
#phone-bundle-wizard-modal.active .bw-card { transform: none; opacity: 1; }
body.dark-mode #phone-bundle-wizard-modal .bw-card { background: #1f2937; }

/* 조건 패널 접기 — 인라인 display는 기존 핸들러 몫이라 건드리지 않고 클래스로만 숨김 */
.pbw-collapsed { display: none !important; }

/* 접힌 패널 대신 보여주는 요약 한 줄 */
.pbw-summary {
    display: flex;
    /* 좁은 화면(모바일 비교모드 반폭 등)에서 텍스트가 칸을 넘쳐 버튼 밑에 깔리던
       버그 수정: 한 줄에 안 들어가면 버튼 묶음이 텍스트 아래 줄로 내려가게 함 */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 0 12px;
    padding: 9px 12px;
    border: 1px dashed #c9d6ea;
    border-radius: 8px;
    background: #f6f9ff;
    font-size: 0.78rem;
}
.pbw-summary-text {
    color: #2f3948;
    font-weight: 700;
    word-break: keep-all;
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere; /* (500MB/1G) 같은 라틴 토큰이 초협폭에서도 넘치지 않게 */
}
.pbw-summary-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
.pbw-summary-actions button {
    border: 1px solid #b9cdf0;
    background: #fff;
    color: #1a73e8;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.pbw-summary-actions button:hover { background: #e8f0fe; }
body.dark-mode .pbw-summary { background: #1e293b; border-color: #33415a; }
body.dark-mode .pbw-summary-text { color: #e5eaf1; }
body.dark-mode .pbw-summary-actions button { background: #111827; border-color: #33415a; color: #60a5fa; }
@media (prefers-reduced-motion: reduce) {
    #phone-bundle-wizard-modal .bw-backdrop, #phone-bundle-wizard-modal .bw-card { transition: none; }
}

/* ================================================================ */
/* == [15] 알뜰폰(MVNO) 잠금·안내 강조 (2026-07-19)                == */
/* ================================================================ */
/* 결합할인 트리거 잠금 상태 — 자물쇠 느낌으로 비활성 표시 */
.discount-type-buttons.mvno-locked button {
    opacity: 0.45;
    cursor: not-allowed !important;
    filter: grayscale(0.6);
}
/* 불가 안내 — 일반 안내보다 강조되는 경고 배너 */
.mvno-ban-notice {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #f3b1ac;
    border-left: 4px solid #d93025;
    border-radius: 8px;
    background: #fdecea;
    color: #a11c12;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: left;
    word-break: keep-all;
}
.mvno-ban-notice strong { color: #d93025; font-weight: 800; }
body.dark-mode .mvno-ban-notice {
    background: #3a1715;
    border-color: #7f2b24;
    border-left-color: #f87171;
    color: #fecaca;
}
body.dark-mode .mvno-ban-notice strong { color: #f87171; }
/* 100원 입력 가능 안내 — 박스 없는 담백한 캡션(템플릿 느낌 제거) */
.mvno-min-note {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #666;
    word-break: keep-all;
}
.mvno-min-note strong { color: #1e8e3e; font-weight: 700; }
body.dark-mode .mvno-min-note { color: #9ca3af; }
body.dark-mode .mvno-min-note strong { color: #4ade80; }

/* 부가서비스 팝업: 월 금액 검증 에러 (0원/100원 미만 차단) */
.extra-modal-error {
    color: #d93025;
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 6px;
}
body.dark-mode .extra-modal-error { color: #f87171; }
#extraServiceModal .number-input.input-error {
    border-color: #d93025 !important;
    box-shadow: 0 0 0 2px rgba(217, 48, 37, 0.15) !important;
}


/* [이동] 사용방법 영상 배너·팝업 CSS는 index에서도 쓰도록 style-pages.css로 이동 (2026-07-21) */

/* 변경 위저드(internet-change-wizard.js) 적용 월 직접 입력 줄 */
.cw-month-row { display: flex; gap: 8px; align-items: stretch; margin-top: 4px; }
.cw-month-input { width: 90px; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 0.9rem; }
.cw-month-row .cw-month-next { flex: 1; margin: 0; }
body.dark-mode .cw-month-input { background: #111827; border-color: #4b5563; color: #f9fafb; }

/* Mobile result density (320-768px)
   Keep prices and numeric values on one line while scaling typography and
   spacing with the viewport. Long table headings may wrap only at word
   boundaries; horizontal scrolling remains the final narrow-screen fallback. */
@media screen and (max-width: 768px) {
    #result.result-section {
        font-size: clamp(0.82rem, 3.8vw, 1rem);
    }

    #result.result-section #result-summary-section {
        gap: clamp(4px, 1.8vw, 8px) !important;
        padding: clamp(6px, 2vw, 10px) 4px !important;
    }

    #result.result-section .result-summary-text {
        min-width: 0 !important;
        padding: clamp(5px, 1.8vw, 8px) 3px !important;
        font-size: clamp(0.72rem, 3vw, 0.88rem) !important;
    }

    #result.result-section .result-summary-text strong {
        margin-bottom: 3px;
        font-size: 0.9em !important;
        line-height: 1.2;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    #result.result-section #storeTotal,
    #result.result-section #unlockedTotal,
    #result.result-section #carrier1-total,
    #result.result-section #carrier2-total {
        font-size: clamp(0.82rem, 3.6vw, 1rem) !important;
        white-space: nowrap !important;
        word-break: normal !important;
        font-variant-numeric: tabular-nums;
    }

    #result.result-section #discount-breakdown {
        gap: clamp(5px, 2vw, 8px) !important;
    }

    #result.result-section .breakdown-card {
        padding: clamp(7px, 2.5vw, 10px) clamp(5px, 2vw, 8px) !important;
        font-size: clamp(0.68rem, 2.8vw, 0.8rem) !important;
    }

    #result.result-section .breakdown-card li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        column-gap: 5px;
        align-items: baseline;
        line-height: 1.2 !important;
    }

    #result.result-section .device-price-section strong,
    #result.result-section .total-cost-section strong,
    #result.result-section .timeline-period > p > strong,
    #result.result-section .breakdown-card li > span:last-child,
    #result.result-section .summary-total strong {
        white-space: nowrap !important;
        word-break: normal !important;
        font-variant-numeric: tabular-nums;
    }

    #result.result-section .monthly-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    #result.result-section .monthly-table {
        --monthly-first-column: clamp(42px, 12vw, 52px);
        width: 100% !important;
        min-width: 300px !important;
        table-layout: fixed !important;
    }

    #result.result-section .monthly-table th,
    #result.result-section .monthly-table td {
        padding: clamp(2px, 0.9vw, 4px) 1px !important;
        font-size: clamp(0.6rem, 2.5vw, 0.68rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em;
        text-align: center !important;
        vertical-align: middle;
        font-variant-numeric: tabular-nums;
    }

    #result.result-section .monthly-table th {
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    #result.result-section .monthly-table td:not(:first-child) {
        white-space: nowrap !important;
        word-break: normal !important;
    }

    #result.result-section .monthly-table th:first-child,
    #result.result-section .monthly-table td:first-child {
        width: var(--monthly-first-column) !important;
        min-width: var(--monthly-first-column) !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }

    #result.result-section .monthly-table:not(.single-mode-table) th:not(:first-child),
    #result.result-section .monthly-table:not(.single-mode-table) td:not(:first-child) {
        width: calc((100% - var(--monthly-first-column)) / 4) !important;
    }

    #result.result-section .monthly-table.single-mode-table {
        min-width: 260px !important;
        table-layout: auto !important;
    }

    #result.result-section .monthly-detail-toggle-button {
        max-width: 100%;
        padding: 8px 12px;
        font-size: clamp(0.72rem, 3vw, 0.88rem);
        white-space: nowrap;
    }
}

/* 비교 모드에서 결과 패널이 열리면 입력 카드가 매우 좁아진다.
   안내문은 우선 글자를 줄이고, 더 이상 읽기 좋은 크기로 한 줄 유지가 불가능한
   폭에서는 두 줄로 자연스럽게 내려가도록 한다. */
@media screen {
body:has(> .container > #result.result-section[style*="block"])
#main-calculator-content-wrapper.comparison-mode .plan-range-note {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
    letter-spacing: -0.25px;
}
}

@media screen and (max-width: 768px) {
    body:has(> .container > #result.result-section[style*="block"])
    #main-calculator-content-wrapper.comparison-mode .plan-range-note {
        font-size: clamp(8px, 2.05vw, 0.9em);
    }
}

@media screen and (min-width: 769px) {
    body:has(> .container > #result.result-section[style*="block"])
    #main-calculator-content-wrapper.comparison-mode .plan-range-note {
        font-size: clamp(9px, 0.95vw, 0.9em);
    }
}

/* 결과 카드의 금액 자체는 한 덩어리로 유지하되, 긴 설명은 카드 밖으로 밀지 않는다. */
@media screen {
#result.result-section .device-price-section strong > span {
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

#result.result-section .timeline-period > p > strong {
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

#result.result-section .timeline-period > p > strong > span {
    white-space: nowrap;
}

#result.result-section .breakdown-card li > span:first-child {
    min-width: 0;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere;
    padding-right: 4px !important;
}

/* "유지 기간 이후 결합 유형 변경"은 비교 결과의 좁은 카드에서만 압축한다.
   모바일의 기존 44px 최소 터치 높이는 그대로 유지된다. */
body:has(> .container > #result.result-section[style*="block"])
#main-calculator-content-wrapper.comparison-mode :is(
    #changeCombinationAfterBtn,
    #changeCombinationAfterBtn-b,
    #changeCombinationAfterBtn-seonyak-comp
) {
    padding: 8px !important;
    font-size: 0.78em !important;
    white-space: normal !important;
    word-break: keep-all !important;
    line-height: 1.25 !important;
    min-width: 0;
}
}