/* 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;
}

/* 부가서비스 위저드 안의 「🧮 계산기」 링크 — 부가서비스 금액을 더할 때 팝업을 닫고
   나갔다 오지 않도록 그 자리에서 일반 계산기를 띄운다(2026-08-18 사장님 요청). */
.wizard-calc-link {
    float: right; border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca;
    font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1;
    padding: 4px 9px; border-radius: 999px; cursor: pointer; margin-left: 8px;
}
.wizard-calc-link:hover { background: #e0e7ff; }
.wizard-calc-link:active { transform: scale(.95); }
body.dark-mode .wizard-calc-link { background: #312e81; border-color: #4338ca; color: #e0e7ff; }
/* 계산기 결과를 금액 칸으로 바로 옮기는 바 — 위저드에서 열었을 때만 보인다 */
.calc-apply-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed #d7dee8;
}
.calc-apply-target { font-size: 12px; font-weight: 700; color: #64748b; }
.calc-apply-btn {
    border: none; border-radius: 10px; background: #1a73e8; color: #fff;
    font-family: inherit; font-size: 13px; font-weight: 800; padding: 10px 16px; cursor: pointer;
}
.calc-apply-btn:hover { background: #1557b0; }
.calc-apply-btn:active { transform: scale(.97); }
body.dark-mode .calc-apply-bar { border-top-color: #374151; }
body.dark-mode .calc-apply-target { color: #9aa7b8; }

/* 계산기를 바텀시트(z-index 10000) 위로 올린다 — 시트에서 열 때만 붙는 클래스 */
#standardCalcModal.calc-over-sheet { z-index: 10050; }

.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;
    /* 옆 입력칸(44px·라운드 12px)과 도형 통일 — 버튼만 작고 둥글기 달라 어긋나 보이던 문제 (2026-08-05 사장님 지적) */
    height: 44px;
    border-radius: 12px;
    font-size: 0.82em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.plan-list-btn:hover { background: #1557b0; }
/* 자급제 "기기값 확인" 줄 — 매장 일시불/할부 자리와 같은 구조라 버튼도
   그 칸을 꽉 채우고 입력칸(40px)과 높이 일치 (2026-08-05 사장님 제안.jpg) */
.device-payment-row .plan-list-btn {
    width: 100%;
    height: 40px;
}
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; }
.plan-picker-badge.pp-badge-online { background: #ede9fe; color: #6d28d9; }
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; }
body.dark-mode .plan-picker-badge.pp-badge-online { background: #3b0764; color: #d8b4fe; }

/* 온라인 전용(다이렉트·요고·너겟) 구분 칩 — 보라 강조, 선약 12/24 중엔 잠금(점선) */
.pp-filter-chip.pp-chip-online { border-color: #c4b5fd; color: #7c3aed; background: #faf7ff; }
.pp-filter-chip.pp-chip-online:hover { border-color: #7c3aed; color: #7c3aed; }
.pp-filter-chip.pp-chip-online.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.pp-filter-chip.pp-chip-online.pp-chip-locked { opacity: 0.5; cursor: not-allowed; border-style: dashed; }
body.dark-mode .pp-filter-chip.pp-chip-online { background: #2e1065; border-color: #6d28d9; color: #d8b4fe; }
body.dark-mode .pp-filter-chip.pp-chip-online:hover { border-color: #a78bfa; color: #d8b4fe; }
body.dark-mode .pp-filter-chip.pp-chip-online.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }

/* ── 플립 등 좁은 폭 + 시스템 글자 확대(안드로이드 글자 크게) 대비 —
   결과 카드 텍스트를 clamp로 뷰포트 비례 축소해 칸 이탈 방지 (2026-08-12 플립 제보).
   시스템 배율은 clamp 결과값에 곱해지므로 기준을 낮춰야 확대 시에도 칸 안에 들어온다 ── */
@media screen and (max-width: 768px) {
    #result.result-section .timeline-period > p,
    #result.result-section .timeline-period > p > strong,
    #result.result-section .timeline-period > p > strong > span {
        font-size: clamp(0.64rem, 2.9vw, 0.82rem) !important;
        line-height: 1.3 !important;
    }
    #result.result-section .breakdown-card li,
    #result.result-section .breakdown-card li > span:last-child {
        font-size: clamp(0.6rem, 2.7vw, 0.76rem) !important;
    }
    #result.result-section .device-price-section strong,
    #result.result-section .total-cost-section strong,
    #result.result-section .summary-total strong {
        font-size: clamp(0.66rem, 3vw, 0.85rem) !important;
    }
    /* 유지기간 트리거·요금제 명칭 인라인도 확대 대비 축소 */
    .keep-trigger { font-size: clamp(0.66rem, 2.9vw, 0.8rem); min-width: 0; }
    .pni-inline { font-size: clamp(0.62rem, 2.8vw, 0.8rem); }
    /* 🎉 승자 문구 — 인라인 1.5em 고정이라 글자 확대 시 우측 잘림 → clamp로 교체 */
    #result.result-section #winner {
        font-size: clamp(0.85rem, 3.8vw, 1.25rem) !important;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    /* 결합할인 유형 트리거 — 글자 확대 시 "결합없음"이 글자 중간에서 쪼개지던 것 방지 */
    .discount-type-select-trigger,
    .discount-type-select-label {
        font-size: clamp(0.78rem, 3vw, 0.95rem);
        word-break: keep-all;
        overflow-wrap: normal;
    }
}

/* 결합 유형 팝업 — 온라인 전용 요금제 사용 중 가입 불가 결합 옵션 잠금 (배지는 mvno-inline-ban 톤) */
.discount-type-modal-option.olp-locked { opacity: 0.55; cursor: not-allowed; }
.olp-combo-ban {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 0 7px;
    height: 17px;
    border: 1px solid #f3b1ac;
    border-radius: 999px;
    background: #fdecea;
    color: #d93025;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}
body.dark-mode .olp-combo-ban { background: #3a1715; border-color: #7f2b24; color: #f87171; }

/* ============================================================
   [16] 유지기간 트리거+팝업 & 요금제 명칭 인라인 (2026-08-11 개편)
   - 유지기간 6/4/직접입력 3버튼 → 「유지 N개월 ▾」 버튼 하나(공용 팝업)
   - 요금제 목록에서 고르면 금액 뒤 회색 명칭, 자리 부족 시 아랫줄(… 금지)
   ============================================================ */

/* 유지기간 트리거 — 옆 요금제 목록 버튼(44px·라운드 12px)과 도형 통일 */
.keep-trigger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 44px;
    padding: 0 12px;
    border: 1.5px solid #a5c4f5;
    border-radius: 12px;
    background: #f2f7ff;
    color: #1a56c9;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.keep-trigger:hover { border-color: #1a73e8; background: #e8f0fe; }
.keep-trigger .kt-chev { font-size: 0.68rem; color: #6b8fd8; }
body.dark-mode .keep-trigger { background: #1e3a5f; border-color: #2563eb; color: #93c5fd; }
body.dark-mode .keep-trigger:hover { background: #1e40af; }
body.dark-mode .keep-trigger .kt-chev { color: #60a5fa; }

/* 유지기간 팝업 */
.mnt2-ov {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10001;
    align-items: center;
    justify-content: center;
}
.mnt2-modal {
    width: 300px;
    max-width: 92vw;
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.mnt2-modal h3 { margin: 0 0 4px; font-size: 0.95rem; color: #1a73e8; display: flex; justify-content: space-between; align-items: center; }
.mnt2-modal h3 .mnt2-x { background: none; border: none; font-size: 1.05rem; color: #888; cursor: pointer; padding: 2px 6px; }
.mnt2-desc {
    font-size: clamp(0.68rem, 2vw, 0.74rem);
    color: #64748b;
    margin: 0 0 12px;
    /* 자동 줄바꿈: 한글 단어 단위로 꺾고, 좁은 폭·글자 확대에서도 팝업 밖으로 안 나가게 */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.5;
}
.mnt2-opt {
    display: flex; justify-content: space-between; align-items: center;
    border: 1px solid #dbe4ee; border-radius: 10px; padding: 12px 13px; margin-bottom: 7px;
    font-size: clamp(0.78rem, 2.2vw, 0.86rem); font-weight: 700; cursor: pointer; color: #334155;
    word-break: keep-all;
}
.mnt2-opt small { font-weight: 500; color: #94a3b8; font-size: clamp(0.64rem, 1.9vw, 0.72rem); white-space: normal; word-break: keep-all; text-align: right; }
.mnt2-opt:hover { border-color: #1a73e8; }
.mnt2-opt.on { border-color: #1a73e8; background: #e8f0fe; color: #1a73e8; }
.mnt2-custom { display: none; gap: 6px; align-items: center; margin: 2px 0 7px; padding: 0 4px; }
.mnt2-custom.show { display: flex; }
.mnt2-custom input { width: 90px; padding: 9px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.9rem; }
.mnt2-custom label { font-size: 0.8rem; color: #475569; font-weight: 600; }
.mnt2-apply {
    width: 100%; margin-top: 4px; background: #1a73e8; color: #fff; border: none; border-radius: 9px;
    padding: 11px; font-size: 0.88rem; font-weight: 700; cursor: pointer;
}
body.dark-mode .mnt2-modal { background: #1f2937; border: 1px solid #374151; }
body.dark-mode .mnt2-modal h3 { color: #60a5fa; }
body.dark-mode .mnt2-desc { color: #9ca3af; }
body.dark-mode .mnt2-opt { border-color: #4b5563; color: #d1d5db; }
body.dark-mode .mnt2-opt.on { border-color: #2563eb; background: #1e3a5f; color: #93c5fd; }
body.dark-mode .mnt2-custom input { background: #374151; border-color: #4b5563; color: #fff; }
body.dark-mode .mnt2-custom label { color: #9ca3af; }

/* 요금제 명칭 인라인 — 입력칸 래퍼(host)가 기존 input의 flex 자리를 이어받는다 */
.pni-host { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.pni-host input { width: 100%; }
.pni-inline {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 0.8rem; pointer-events: none; white-space: nowrap;
    display: none;
}
.pni-mirror { position: absolute; visibility: hidden; white-space: pre; pointer-events: none; left: -9999px; }
.pni-below {
    margin-top: 4px; font-size: 0.76rem; color: #94a3b8; line-height: 1.35;
    word-break: keep-all; overflow-wrap: break-word; display: none;
}
.pni-olp { color: #7c3aed; font-weight: 600; }
body.dark-mode .pni-inline, body.dark-mode .pni-below { color: #6b7280; }
body.dark-mode .pni-olp { color: #a78bfa; }

/* ── 배치 규칙: PC 넓은 칼럼 = [입력칸][목록][유지] 한 줄,
       태블릿·모바일·비교모드 = 입력칸 한 줄 전체 + 아래 [목록|유지] 반반 (시안 v4 확정) ── */
.comparison-mode .pmr-wrap { flex-wrap: wrap; }
.comparison-mode .pmr-wrap .pni-host { flex: 1 1 100%; }
/* 버튼 최소폭 = 글자폭(fit-content): 글자 확대 등으로 반반이 안 되면
   글자를 이탈시키지 않고 다음 줄로 내려간다 (2026-08-12 플립 제보) */
.comparison-mode .pmr-wrap .plan-list-btn,
.comparison-mode .pmr-wrap .keep-trigger { flex: 1 1 auto; min-width: fit-content; }
@media (max-width: 1120px) {
    .pmr-wrap { flex-wrap: wrap; }
    .pmr-wrap .pni-host { flex: 1 1 100%; }
    .pmr-wrap .plan-list-btn,
    .pmr-wrap .keep-trigger { flex: 1 1 auto; min-width: fit-content; }
}

/* 모바일 비교모드(≤768px): 기존 규칙이 .plan-input-wrapper를 세로 스택으로 강제 —
   pmr-wrap은 [입력칸 100%] + [목록|유지 반반] 가로 wrap으로 되돌린다.
   컴팩트 규격(34px)은 요금제 목록 버튼 규칙과 짝 맞춤 */
@media (max-width: 768px) {
    .comparison-mode .plan-input-wrapper.pmr-wrap {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }
    .comparison-mode .pmr-wrap .plan-list-btn { width: auto !important; }
    .comparison-mode .pmr-wrap .keep-trigger,
    .comparison-mode .plan-input-wrapper .keep-trigger {
        height: 34px;
        min-height: 34px;
        padding: 4px 8px;
        font-size: 0.72rem;
        border-radius: 8px;
    }
    .comparison-mode .pni-inline { font-size: 0.66rem; }
    .comparison-mode .pni-below { font-size: 0.66rem; }
}
.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; }
/* 나이 제한 상세 줄 — 경계 생일 예시 두 줄("○○생은<br>오늘까지만 가입가능") (2026-08-05 사장님 확정) */
.plan-picker-item .plan-picker-birth {
    font-size: 0.72em;
    color: #d97706;
    font-weight: 500;
    line-height: 1.3;
    word-break: keep-all;
}
body.dark-mode .plan-picker-item .plan-picker-birth { color: #fbbf24; }
.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만원만 입력하세요.")
   — 평소에는 숨기고, 1만~13만 범위를 벗어난 값이 입력됐을 때만 .show로 표시
   (ui-components.js의 setupPlanInputGuides가 토글, family.html과 동일 규칙).
   단독/비교 모드 어디서든 두 줄로 꺾이지 않고 한 줄 유지.
   좁은 화면에서는 글자 크기를 화면 폭에 맞춰 줄인다.
   (screen and 필수 — 안 붙이면 태블릿 인쇄에 모바일 축소가 그대로 찍힌다) */
.plan-range-note { display: none; white-space: nowrap; }
.plan-range-note.show { display: block; }
@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; }
}

/* 모바일 세로(≤599px — 플립 등 좁은 폰): 이 구간엔 그동안 칩 축소 규칙이 없어
   PC 크기 알약(7px 15px·0.92em)이 그대로 나와 필터가 시트를 다 차지했다
   (2026-08-11 플립8 시연기 제보 — 글자 확대와 겹치면 목록이 1칸까지 줄어듦).
   칩을 컴팩트하게 줄이고 목록 최소 높이를 보장한다. 600px 이상은 폴드형 블록 담당. */
@media (max-width: 599px) {
    .plan-picker-title-row { margin-bottom: 7px; }
    .plan-picker-title-row h3 { font-size: 1em; }
    .plan-picker-sticky-header {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 4px;
    }
    .plan-picker-filters { gap: 5px; margin-bottom: 6px; }
    .plan-picker-filter-row { gap: 6px; }
    #ppFilter-category-row { padding-bottom: 6px; margin-bottom: 2px; }
    .pp-filter-label { font-size: 0.7em; min-width: 26px; }
    .pp-filter-chips { gap: 4px; }
    .pp-filter-chip { padding: 4px 11px; font-size: clamp(11px, 2.9vw, 12.5px); }
    .plan-picker-carrier-info { padding: 2px 0 0; }
    .plan-picker-list {
        min-height: 200px;
        min-height: min(34dvh, 320px);
    }
    /* 목록 행도 칩과 같은 톤으로 축소 — 칩만 줄이니 행 글자(1.08em≈17px)가 상대적으로
       과대해 보인다는 제보(2026-08-11 플립). clamp는 칩(v4.9.160)과 동일 패턴. */
    .plan-picker-item { padding: 9px 11px; gap: 8px; }
    .plan-picker-info { gap: 2px; }
    .plan-picker-item .plan-picker-name { font-size: clamp(13px, 3.6vw, 15px); }
    .plan-picker-item .plan-picker-data { font-size: clamp(11px, 3vw, 12.5px); }
    .plan-picker-item .plan-picker-age { font-size: clamp(10.5px, 2.8vw, 12px); }
    .plan-picker-item .plan-picker-birth { font-size: clamp(10px, 2.7vw, 11.5px); }
    .plan-picker-item .plan-picker-price { font-size: clamp(12px, 3.3vw, 14px); }
}

/* 접힌 커버 화면(플립·폴드 커버 — 좁고 '낮음'): 위 ≤599px 규칙으로도 칩이 시트를
   다 차지해 목록이 한 줄만 걸침(2026-08-11 시연기 영상 제보). 일반 폰 세로는
   높이 700px 이상이라 이 블록에 안 걸린다. 칩·제목·여백을 한 단계 더 줄이고
   목록 최소 높이를 키워 화면 절반은 목록이 갖게 한다. */
@media (max-width: 599px) and (max-height: 620px) {
    /* 시트를 전체 화면으로 — 가운데 뜬 시트 주변으로 배경 페이지의 버튼들이
       비쳐 보이는 게 지저분하다는 제보(2026-08-11 영상). 커버 화면은 작아서
       여백을 남길 이유도 없다. transform은 기본/활성 두 상태 모두 무효화 필수. */
    .plan-picker-sheet,
    .bottom-sheet-modal.active .plan-picker-sheet {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
        height: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .plan-picker-title-row { margin-bottom: 4px; }
    .plan-picker-title-row h3 { font-size: 0.92em; }
    .plan-picker-filters { gap: 3px; margin-bottom: 4px; }
    .plan-picker-filter-row { gap: 4px; }
    #ppFilter-category-row { padding-bottom: 4px; margin-bottom: 1px; }
    .pp-filter-label { font-size: 0.62em; min-width: 22px; }
    .pp-filter-chips { gap: 3px; }
    .pp-filter-chip { padding: 3px 8px; font-size: clamp(10px, 2.5vw, 11px); }
    .plan-picker-carrier-info { padding: 1px 0 0; font-size: 0.72em; }
    .plan-picker-list {
        min-height: 170px;
        min-height: min(45dvh, 300px);
        padding-top: 4px;
    }
    .plan-picker-footer { padding: 6px 14px 8px; }
    .plan-picker-item { padding: 7px 10px; gap: 7px; }
    .plan-picker-item .plan-picker-name { font-size: clamp(12px, 3.3vw, 14px); }
    .plan-picker-item .plan-picker-price { font-size: clamp(11.5px, 3.1vw, 13px); }
}

/* 세로 폭이 짧은 화면(모바일 가로 모드 등) — 필터를 세로로 쌓으면 목록이
   1~2개밖에 안 보여서, 가로 여유를 활용해 좌우 분할한다(B안, 2026-08-10):
   필터 헤더 = 왼쪽 고정 컬럼(내부 스크롤), 목록 = 오른쪽 전체 높이.
   하단 닫기 버튼은 숨기고 우상단 ×(시트 기준 절대배치)와 오버레이 클릭으로 닫는다.
   phone.html·family.html 픽커 공용, internet의 .picker-modal은 클래스가 달라 무영향.
   폭 상한 1500px·높이 620px: 플립 펼침 가로는 기기·배율에 따라 CSS 폭 1000~1320px·
   높이 500px 초과로 잡혀(플립8 시연기 제보 2026-08-11) 960/500 조건을 벗어나
   세로 시트(목록 1칸)로 떨어지던 문제 — 높이 조건이 있어 일반 PC 창은 무영향.
   ★orientation:landscape + min-width:600 가드(2026-08-11 커버 화면 제보): 접힌
   플립·폴드 커버 화면은 세로·좁음인데 화면 확대 배율 탓에 CSS 높이가 620 이하로
   잡혀 이 분할이 발동 → 목록 칸 ~100px에 글자가 한 자씩 세로로 쌓였다.
   눕힌 폰은 반드시 가로(폭>높이)이므로 두 가드로 커버 화면을 제외한다. */
@media (min-width: 600px) and (max-width: 1500px) and (max-height: 620px) and (orientation: landscape) {
    .plan-picker-sheet {
        flex-direction: row;
        width: 94vw;
        max-width: 760px;
        height: 94vh;
        height: 94dvh;
        max-height: 94vh;
        max-height: 94dvh;
    }
    .plan-picker-sticky-header {
        width: 250px;
        flex-shrink: 0;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-bottom: none;
        border-right: 1px solid #f0f0f0;
        padding: 0 10px 6px 14px;
    }
    body.dark-mode .plan-picker-sticky-header {
        border-bottom: none;
        border-right-color: #374151;
    }
    .plan-picker-title-row {
        margin-bottom: 4px;
    }
    .plan-picker-title-row h3 { font-size: 0.95em; }
    /* ×는 왼쪽 컬럼이 아니라 시트 우상단에 고정 — 목록 위에 떠 있으므로 배경 원 추가 */
    .plan-picker-close-x {
        position: absolute;
        top: 6px;
        right: 8px;
        z-index: 5;
        background: rgba(255, 255, 255, 0.92);
        border-radius: 50%;
        padding: 2px 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }
    body.dark-mode .plan-picker-close-x {
        background: rgba(31, 41, 55, 0.92);
    }
    .plan-picker-filters {
        gap: 6px;
        margin-bottom: 4px;
    }
    /* 좁은 컬럼이므로 라벨을 칩 위로 */
    .plan-picker-filter-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }
    #ppFilter-category-row {
        padding-bottom: 5px;
        margin-bottom: 1px;
    }
    .pp-filter-label {
        min-width: 0;
        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 {
        min-height: 0;
        padding: 32px 14px 8px; /* 상단 여백은 우상단 × 자리 */
    }
    .plan-picker-footer {
        display: none;
    }
}

/* 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; }
/* U+ 추가 할인 팝업: 내용이 짧아 스크롤 불필요 — 툴팁 말풍선이 팝업 위 경계에 잘리지 않게 오버플로 허용 (2026-08-02) */
#lguExtraModal .modal-content { overflow: visible; max-height: none; }
.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; }
/* 입력칸(44px·라운드 12px)과 같은 줄에 놓이는 버튼 그룹 도형 통일 (2026-08-05 사장님 지적: 높이·둥글기 제각각)
   — PC 전용: 모바일(≤768px)은 컴팩트 버튼 규칙(30px)이 우선이라 건드리지 않는다 */
@media (min-width: 769px) {
    .mnt-flex-row .payment-button,          /* 유지비 계산기 결제/약정 버튼 */
    .maintenance-month-button {             /* 메인 계산기 요금제 유지기간(6개월·4개월·직접입력) */
        min-height: 44px !important;        /* style-base의 min-height:40px !important를 이겨야 한다 */
        border-radius: 12px;
    }
}
.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; }
/* 요약 박스는 3~5개로 변동(할부금/기기값·페이백 조건부) — 고정 4열 그리드는 개수가 안 맞으면
   빈 칸이 남으므로(2026-08-12 사장님 제보) flex 자동 채움: 있는 박스들이 항상 가로를 꽉 채운다 */
.mnt-summary-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px; }
.summary-item { flex: 1 1 160px; min-width: 0; 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 { gap: 6px; padding: 10px; }
    .summary-item { flex-basis: 90px; 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: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    max-width: 720px;
    margin: 0 auto 18px;
}
.penalty-heading-row h2 {
    grid-column: 2;
    min-width: 0;
    margin: 0;
    text-align: center;
}
.penalty-heading-row .calc-reset-card-btn {
    position: static;
    top: auto;
    right: auto;
    grid-column: 3;
    justify-self: end;
}
@media screen and (max-width: 640px) {
    .penalty-heading-row {
        grid-template-columns: minmax(0, 1fr);
        width: calc(100% - 20px);
        margin: 0 10px 12px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-sizing: border-box;
    }
    .penalty-heading-row h2 {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        margin: 0 !important;
        color: #1f6fd5;
        font-size: 1.02rem !important;
        line-height: 1.25;
        text-align: center;
        word-break: keep-all;
    }
    .penalty-heading-row .calc-reset-card-btn {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        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);
}
/* 선택약정 잠금 — 그룹 전체 opacity 대신 버튼만 흐리게(라벨의 인라인 배지는 선명 유지) */
.input-group.mvno-on .payment-method-options {
    opacity: 0.5;
    filter: grayscale(0.6);
}
/* 불가 안내 — 버튼 아래 배너는 비교모드에서 우측(자급제) 칼럼만 길어져 좌우 행이
   어긋나므로 라벨 옆 인라인 알약 배지로 확정(2026-08-09 시안 컨펌).
   라벨은 flex nowrap → 배지가 어떤 폭에서도 아랫줄로 떨어지지 않아 좌우 높이 항상 동일 */
label.has-mvno-ban { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; }
.mvno-inline-ban {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 6px;
    padding: 0 8px;
    height: 18px;
    border: 1px solid #f3b1ac;
    border-radius: 999px;
    background: #fdecea;
    color: #d93025;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
body.dark-mode .mvno-inline-ban {
    background: #3a1715;
    border-color: #7f2b24;
    color: #f87171;
}
@media (max-width: 768px) {
    /* 비교모드 좁은 칼럼: 「🔒 불가」로 축약 + 행 오른쪽 끝 정렬.
       알뜰폰 상태(.mvno-on)에선 ⓘ도 숨겨 한 줄 사수 — 전역 모바일
       .tooltip-icon { display:inline-flex !important }를 이기려면 !important 필수 */
    .comparison-mode .mvno-inline-ban { margin-left: auto; padding: 0 5px; height: 15px; font-size: 0.6rem; }
    .comparison-mode .mvno-inline-ban .mib-full { display: none; }
    .comparison-mode .input-group.mvno-on label .tooltip-icon { display: none !important; }
    /* ⓘ(17px)를 숨기면 라벨 높이가 15px로 줄어 좌측(매장) 라벨과 2px 어긋남 → 높이 고정 */
    .comparison-mode label.has-mvno-ban { min-height: 17px; }
}
/* 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;
}
}

/* ============================================================
   [17] 위약금 계산기 UI 개편 (2026-07-30, phone.html 전용)
   - 방식 세그먼트 토글 + 통합 입력 그리드 + 요약 문장 + 표 강조
   ============================================================ */

/* 방식 세그먼트 토글 */
.pen-seg {
    display: flex;
    background: #f1f3f4;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    max-width: 520px;
    margin: 0 auto 18px;
}
.pen-seg button {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #80868b;
    cursor: pointer;
    font-family: inherit;
    word-break: keep-all;
}
.pen-seg button.active {
    background: #fff;
    color: #202124;
    box-shadow: 0 1px 3px rgba(60, 64, 67, .25);
}

/* 통합 입력 그리드 (PC 2열 / 모바일 1열) */
.pen-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    align-items: start;
    max-width: 720px;
    margin: 0 auto;
}
.pen-form-grid .input-group { margin: 0; }
/* 선약 모드의 약정 기간(홀수 번째 항목)은 전체 폭으로 */
.pen-form-grid .pen-duration-group { grid-column: 1 / -1; }

/* 해지 계산기는 입력 의미 순서가 항상 같은 2×2가 되도록 명시적으로 배치한다.
   DOM 순서도 동일하게 유지해 모바일의 1열 전환 및 키보드 탐색 순서도 자연스럽다. */
#penalty-termination-calculator .pen-form-grid {
    grid-template-areas:
        "term-contract term-additional"
        "term-start term-end";
}
#penalty-termination-calculator .term-field-contract { grid-area: term-contract; }
#penalty-termination-calculator .term-field-additional { grid-area: term-additional; }
#penalty-termination-calculator .term-field-start { grid-area: term-start; }
#penalty-termination-calculator .term-field-end { grid-area: term-end; }

/* 컨트롤 높이 통일 — 위약금 폼 안의 선택 버튼을 입력칸(46px)과 같은 높이로
   (style-extra [4c]의 32px !important 터치 타깃 규칙을 여기서만 되돌린다) */
#penalty-calculator-wrapper .pen-form-grid .payment-button {
    min-height: 46px !important;
    height: auto !important;
}
/* PC에서 라벨 영역 높이를 통일해 같은 행의 컨트롤 윗선을 맞춘다 */
@media screen and (min-width: 641px) {
    .pen-form-grid > .input-group > label {
        display: block;
        min-height: 40px;
    }
}

/* 날짜 팝업 트리거 — 입력칸처럼 보이는 버튼 */
.pen-date-trigger {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    color: #9aa0a6;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.pen-date-trigger.has-value { color: #202124; font-weight: 600; }

/* 날짜 선택 팝업 (연도 → 월 → 일) */
#pen-date-popup {
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 16px;
}
.pen-dp-card {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 340px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.pen-dp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pen-dp-head strong { font-size: 16px; color: #202124; }
.pen-dp-close {
    border: none;
    background: none;
    font-size: 22px;
    color: #9aa0a6;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    min-height: 0 !important;
}
.pen-dp-yearrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
}
.pen-dp-yearrow label { font-size: 13.5px; font-weight: 600; color: #5f6368; flex-shrink: 0; }
#pen-dp-year {
    flex: 1;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    color: #202124;
    font-family: inherit;
    cursor: pointer;
}
.pen-dp-crumb { font-size: 13px; color: #5f6368; margin-bottom: 10px; min-height: 22px; }
.pen-dp-back {
    border: none;
    background: #f1f3f4;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 13px;
    font-weight: 700;
    color: #1a73e8;
    cursor: pointer;
    font-family: inherit;
    min-height: 0 !important;
}
.pen-dp-grid { display: grid; gap: 6px; }
.pen-dp-grid-year { grid-template-columns: repeat(4, 1fr); }
.pen-dp-grid-month { grid-template-columns: repeat(4, 1fr); }
.pen-dp-grid-day { grid-template-columns: repeat(7, 1fr); }
.pen-dp-opt {
    border: 1px solid #e8eaed;
    background: #fff;
    border-radius: 8px;
    min-height: 40px;
    font-size: 14px;
    color: #202124;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}
.pen-dp-opt:hover { border-color: #1a73e8; color: #1a73e8; }
.pen-dp-opt.now { border-color: #1a73e8; color: #1a73e8; font-weight: 700; }
.pen-dp-clear {
    display: none;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #e8eaed;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 13.5px;
    color: #5f6368;
    cursor: pointer;
    font-family: inherit;
}
/* 날짜 팝업 다크모드 */
body.dark-mode .pen-date-trigger { background: #1f2937; border-color: #334155; color: #94a3b8; }
body.dark-mode .pen-date-trigger.has-value { color: #e5e7eb; }
body.dark-mode .pen-dp-card { background: #1f2937; }
body.dark-mode .pen-dp-head strong { color: #f1f5f9; }
body.dark-mode .pen-dp-crumb { color: #94a3b8; }
body.dark-mode .pen-dp-yearrow label { color: #94a3b8; }
body.dark-mode #pen-dp-year { background: #111827; border-color: #334155; color: #e5e7eb; }
body.dark-mode .pen-dp-back { background: #334155; color: #93c5fd; }
body.dark-mode .pen-dp-opt { background: #111827; border-color: #334155; color: #e5e7eb; }
body.dark-mode .pen-dp-opt:hover, body.dark-mode .pen-dp-opt.now { border-color: #60a5fa; color: #93c5fd; }
body.dark-mode .pen-dp-clear { background: #111827; border-color: #334155; color: #94a3b8; }
.pen-hint {
    font-weight: 400;
    color: #9aa0a6;
    font-size: 12px;
}

/* PC에서 위약금 계산기 요소 폭을 720px 컬럼으로 통일 (버튼·표·결과가 폼보다 넓게 튀어나오지 않게) */
#penalty-standard-calculator #calculateAllPenaltiesBtn,
#penalty-termination-calculator #calculateTerminationPenaltyBtn {
    display: block;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
#penalty-calc-table-wrapper,
#penalty-termination-calculator #plan-history-container,
#penalty-termination-calculator #add-plan-change-btn,
#termination-penalty-result {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
/* style-components의 "#penalty-termination-calculator .result-section { max-width:600px }"가
   결과 영역만 600px로 좁혀 위 폼(720px)과 좌우 라인이 어긋남 → 더 높은 특이도로 720px 통일 */
#penalty-termination-calculator #termination-penalty-result.result-section {
    max-width: 720px;
}
#penalty-termination-calculator #plan-history-container { margin-top: 14px; }
#penalty-termination-calculator #add-plan-change-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
}

/* 월별 위약금 표 */
#penalty-calc-table-wrapper .pen-table th {
    background: #f8f9fa;
    color: #5f6368;
    font-size: 12.5px;
    border: none;
    border-bottom: 2px solid #e8eaed;
    padding: 10px 8px;
    white-space: nowrap;
}
#penalty-calc-table-wrapper .pen-table td {
    border: none;
    border-bottom: 1px solid #f1f3f4;
    padding: 9px 10px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
#penalty-calc-table-wrapper .pen-table td:first-child {
    text-align: center;
    color: #5f6368;
    white-space: nowrap;
}
#penalty-calc-table-wrapper .pen-table td.pen-total {
    background: #fafafa;
    font-weight: 700;
}
#penalty-calc-table-wrapper .pen-table tr.pen-zero td { color: #188038; }
#penalty-calc-table-wrapper .pen-table tr.pen-zero td.pen-total { background: #f3faf5; color: #188038; }
.pen-caption {
    margin-top: 12px;
    font-size: 12.5px;
    color: #80868b;
    line-height: 1.7;
    text-align: left;
    word-break: keep-all;
}

/* 중도해지 결과: 큰 금액 + 칩 + 상세 접기 */
.term-total {
    margin: 20px auto 0;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(60, 64, 67, .08);
}
.term-total .tt-lbl { font-size: 14px; color: #5f6368; margin: 0 0 6px; }
.term-total .tt-amt { font-size: 30px; font-weight: 800; color: #d93025; letter-spacing: -.5px; margin: 0; }
.term-total .tt-desc { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: #3c4043; word-break: keep-all; }
.term-chips { display: flex; gap: 10px; margin-top: 12px; }
.term-chip {
    flex: 1;
    background: #f8f9fa;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    padding: 13px 10px;
    text-align: center;
}
.term-chip .tc-t { font-size: 12px; color: #80868b; margin-bottom: 4px; }
.term-chip .tc-v { font-size: 16px; font-weight: 700; color: #202124; font-variant-numeric: tabular-nums; }
details.term-detail {
    margin-top: 14px;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    overflow: hidden;
}
details.term-detail summary {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #3c4043;
    cursor: pointer;
    background: #f8f9fa;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
details.term-detail summary::-webkit-details-marker { display: none; }
details.term-detail summary::after { content: "▾"; color: #9aa0a6; }
details.term-detail[open] summary::after { content: "▴"; }
details.term-detail ul { margin: 0; padding: 6px 16px 12px; }

/* 다크모드 */
body.dark-mode .pen-seg { background: #1e293b; }
body.dark-mode .pen-seg button { color: #94a3b8; }
body.dark-mode .pen-seg button.active { background: #334155; color: #f1f5f9; }
body.dark-mode .pen-hint { color: #64748b; }
body.dark-mode .pen-caption { color: #94a3b8; }
/* 표 다크모드: style-base의 .monthly-table !important 규칙보다 우선해야 함 */
body.dark-mode #penalty-calc-table-wrapper .pen-table td.pen-total { background: #111827 !important; }
body.dark-mode #penalty-calc-table-wrapper .pen-table tr.pen-zero td { background: #0f2417 !important; color: #4ade80 !important; }
body.dark-mode .term-total { background: #1f2937; border-color: #334155; }
body.dark-mode .term-total .tt-lbl { color: #94a3b8; }
body.dark-mode .term-total .tt-amt { color: #f87171; }
body.dark-mode .term-total .tt-desc { color: #cbd5e1; }
body.dark-mode .term-chip { background: #1f2937; border-color: #334155; }
body.dark-mode .term-chip .tc-t { color: #94a3b8; }
body.dark-mode .term-chip .tc-v { color: #e5e7eb; }
body.dark-mode details.term-detail { border-color: #334155; }
body.dark-mode details.term-detail summary { background: #1e293b; color: #e2e8f0; }

/* 모바일 */
@media screen and (max-width: 640px) {
    .pen-form-grid { grid-template-columns: 1fr; }
    #penalty-termination-calculator .pen-form-grid {
        grid-template-areas:
            "term-contract"
            "term-additional"
            "term-start"
            "term-end";
    }
    .pen-seg button { font-size: 13px; }
    #penalty-calc-table-wrapper .pen-table th { font-size: 11px; padding: 8px 4px; }
    #penalty-calc-table-wrapper .pen-table td { font-size: 12.5px; padding: 8px 5px; }
    .term-chip .tc-v { font-size: 14.5px; }
}

/* ============================================================
   [17] 기기 구매가 라벨 반응형 표기 (2026-08-11 사장님 제보 — 플립8 가로)
   「(공통지원/선택약정)」이 좁은 칼럼·글자 확대에서 괄호 중간에 접히는 게 보기 흉함
   → 좁은 화면·눕힌 폰에서는 축약 「(공통/선약)」으로 스왑해 무조건 한 줄 유지.
   ui-components.js가 store_vs_unlocked 진입 시 두 span(.gdp-full/.gdp-short)을 주입한다.
   ============================================================ */
.gdp-short { display: none; }
/* 모바일 세로 비교모드: 칼럼이 절반이라 원문이 무조건 안 들어감 */
@media (max-width: 768px) {
    .comparison-mode .gdp-full { display: none; }
    .comparison-mode .gdp-short { display: inline; }
}
/* 눕힌 폰(픽커 분할과 동일 범위): 글자 확대 시연기에서 원문이 접히던 케이스 */
@media (max-width: 1500px) and (max-height: 620px) {
    .comparison-mode .gdp-full { display: none; }
    .comparison-mode .gdp-short { display: inline; }
}


/* ================================================================ */
/* == 공유 모달 v2 (2026-08-12): 콘텐츠 세그 + 카카오/시스템 두 갈래 == */
/* == phone.html·internet.html 공용 — modals.js·internet-ui.js 짝    == */
/* ================================================================ */
.share-sub { text-align: center; font-size: 0.85rem; color: #666; margin: 4px 0 14px; }
.share-kind-seg {
    display: flex; border: 1.5px solid #1a73e8; border-radius: 9px;
    overflow: hidden; margin: 0 0 6px;
}
.share-kind-seg button {
    flex: 1; border: 0; background: #fff; color: #1a73e8;
    font-size: 0.85rem; padding: 9px 4px; cursor: pointer; min-height: 38px;
}
.share-kind-seg button.active { background: #1a73e8; color: #fff; font-weight: 700; }
.share-kind-status { text-align: center; font-size: 0.74rem; color: #888; margin: 0 0 12px; min-height: 1.1em; }
.share-act {
    /* 두 버튼 모두 2px 테두리(카카오는 투명) — 테두리 유무로 아이콘·높이 기준점이 어긋나지 않게 */
    position: relative; width: 100%; min-height: 56px; box-sizing: border-box;
    border: 2px solid transparent; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    /* 좌우 동일 여백(아이콘 폭 포함)으로 텍스트가 버튼 정중앙에 오도록 */
    padding: 10px 48px; margin-bottom: 10px; cursor: pointer; text-align: center;
}
.share-act-ic {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 8px; line-height: 1;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.share-act-tx { width: 100%; text-align: center; }
.share-act-tx strong { display: block; font-size: 0.92rem; }
.share-act-tx span { display: block; font-size: 0.7rem; opacity: 0.75; line-height: 1.3; margin-top: 2px; word-break: keep-all; }
.share-act-kakao { background: #fee500; color: #191919; }
.share-act-kakao .share-act-ic { background: #191919; color: #fee500; }
.share-act-sys { background: #f4f8ff; border-color: #1a73e8; color: #1a73e8; }
.share-act-sys .share-act-ic { background: #1a73e8; color: #fff; }
.share-act-sys .share-act-tx span { color: #5b6675; }
.share-act-wait { opacity: 0.55; }
.share-link-line { text-align: center; margin: 2px 0 0; }
.share-link-line button {
    border: 0; background: none; color: #777; font-size: 0.78rem;
    text-decoration: underline; cursor: pointer; padding: 8px 10px; /* 탭 표적 확보 */
}
body.dark-mode .share-sub { color: #aab3c0; }
body.dark-mode .share-kind-seg button { background: #1e2733; }
body.dark-mode .share-kind-seg button.active { background: #1a73e8; }
body.dark-mode .share-kind-status { color: #93a0b1; }
body.dark-mode .share-act-sys { background: #1d2a3f; }
body.dark-mode .share-link-line button { color: #9aa7b8; }