/* style-components.css - Components, buttons, cards */
/* Version: 5.7.0 (Modernized Update) */

/* ================================== */
/* ======== Section & Card UI ======== */
/* ================================== */
.section { 
    flex: 1; 
    background: var(--card-bg, #ffffff) !important; 
    padding: 24px !important; 
    border-radius: 16px !important; 
    border: 1px solid var(--border-color, #e2e8f0) !important; 
    min-width: 320px; 
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1)) !important;
    transition: var(--transition, all 0.3s ease) !important;
    margin-bottom: 24px !important;
}

.section:hover {
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1)) !important;
}

.section h3 { 
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--primary, #1a73e8) !important; 
    border-bottom: 2px solid var(--primary-light, #e8f0fe) !important; 
    padding-bottom: 12px !important; 
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.section h3::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--primary, #1a73e8);
    border-radius: 2px;
}

/* ======================================================= */
/* ======== 모바??반응??????(?동 ?식) ======== */
/* ======================================================= */
/* ?�면 ?�비가 768px ?�하?????�래 ?��??�을 ?�용?�니?? */
/* ======================================================= */
/* ======== 모바??반응???��???(?��? 방식) ======== */
/* ======================================================= */
 @media (max-width: 768px) {
    /* 계산�??�션 좌우 배치 �?가�??�크�?(?�동 ?�림 방�?�??�해 !important ?�거) */
    .main-content { 
        display: none; 
        flex-direction: row; 
        flex-wrap: nowrap; 
        overflow-x: auto; 
        gap: 5px; /* 간격 최소??*/
        padding: 5px;
        -webkit-overflow-scrolling: touch;
    }
    /* 계산기�? ?�성???�었???�만 flex ?�용 */
    #main-calculator-content-wrapper[style*="display: flex"],
    #main-calculator-content-wrapper[style*="display: block"] {
        display: flex !important;
    }
    
    .section { 
        flex: 0 0 48% !important; /* ?�면???�반 ?�도�?축소?�여 좌우 ?�시 ?�출 ?�도 */
        min-width: 165px !important; /* 최소 ?�비 ?�??축소 */
        padding: 8px 5px !important; /* ?��? ?�백 최소??*/
        margin-bottom: 0;
        font-size: 0.7rem !important; /* ?�스??극소??*/
    }

    /* ?�션 ?��? ?�소??극소??*/
    .section h3 { font-size: 0.8rem; margin-bottom: 5px; border-bottom-width: 1px; }
    .input-group { margin-bottom: 5px; }
    .input-group label { font-size: 0.65rem; margin-bottom: 2px; letter-spacing: -0.5px; }
    .input-group input, .input-group select { padding: 5px; font-size: 12px !important; height: 30px; }
    
    /* 버튼�?극소??�???�?배치 강제 */
    .carrier-buttons {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    /* ?�금??목록???�신???�택 버튼�?4??그리?�로 강제 (?�체, SKT, KT, LGU+) */
    #plan-carrier-buttons {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        overflow-x: visible !important;
        flex-wrap: wrap !important;
    }

    .payment-method-options, .discount-type-buttons, .maintenance-months-buttons {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important; /* 간격을 살짝 줄여서 밀림 방지 */
        width: 100% !important;
    }

    /* 5인/5회선 등 버튼이 5개인 그룹은 무조건 5열로 배치하여 한 줄 유지 */
    #lgu-together-count-buttons,
    #lgu-together-count-buttons-after,
    #lgu-together-count-buttons-b,
    #lgu-together-count-buttons-after-b,
    #lgu-together-count-buttons-seonyak-comp,
    #lgu-together-count-buttons-after-seonyak-comp,
    #lgu-easy-family-count-buttons,
    #lgu-easy-family-count-buttons-after,
    #lgu-easy-family-count-buttons-b,
    #lgu-easy-family-count-buttons-after-b,
    #lgu-easy-family-count-buttons-seonyak-comp,
    #lgu-easy-family-count-buttons-after-seonyak-comp,
    #lgu-family-love-count-buttons,
    #lgu-family-love-count-buttons-after,
    #lgu-family-love-count-buttons-b,
    #lgu-family-love-count-buttons-after-b,
    #lgu-family-love-count-buttons-seonyak-comp,
    #lgu-family-love-count-buttons-after-seonyak-comp,
    #lgu-family-love-internet-speed-buttons,
    #lgu-family-love-internet-speed-buttons-after,
    #lgu-family-love-internet-speed-buttons-b,
    #lgu-family-love-internet-speed-buttons-after-b,
    #lgu-family-love-internet-speed-buttons-seonyak-comp,
    #lgu-family-love-internet-speed-buttons-after-seonyak-comp,
    #kt-total-bill-amount-buttons,
    #kt-total-bill-amount-buttons-after,
    #skt-line-count-buttons,
    #skt-new-line-count-buttons,
    #kt-family-member-count-buttons,
    #kt-family-member-count-buttons-after,
    #kt-family-member-count-buttons-b,
    #kt-family-member-count-buttons-after-b {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important; /* 강제 5열 */
        gap: 3px !important; /* 간격을 더 좁혀서 공간 확보 */
    }

    /* 5열 버튼 내의 텍스트 크기 추가 축소 (밀림 방지) */
    #lgu-together-count-buttons .payment-button,
    #lgu-together-count-buttons-after .payment-button,
    #lgu-together-count-buttons-b .payment-button,
    #lgu-together-count-buttons-after-b .payment-button,
    #lgu-together-count-buttons-seonyak-comp .payment-button,
    #lgu-together-count-buttons-after-seonyak-comp .payment-button,
    #lgu-easy-family-count-buttons .payment-button,
    #lgu-easy-family-count-buttons-after .payment-button,
    #lgu-easy-family-count-buttons-b .payment-button,
    #lgu-easy-family-count-buttons-after-b .payment-button,
    #lgu-easy-family-count-buttons-seonyak-comp .payment-button,
    #lgu-easy-family-count-buttons-after-seonyak-comp .payment-button,
    #lgu-family-love-count-buttons .payment-button,
    #lgu-family-love-count-buttons-after .payment-button,
    #lgu-family-love-count-buttons-b .payment-button,
    #lgu-family-love-count-buttons-after-b .payment-button,
    #lgu-family-love-count-buttons-seonyak-comp .payment-button,
    #lgu-family-love-count-buttons-after-seonyak-comp .payment-button {
        padding: 8px 1px !important;
        font-size: 0.75rem !important;
    }

    /* ?�금??목록 3??배치 �??��???축소 */
    .plan-results-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
    }

    .plan-card {
        padding: 5px !important;
        border-radius: 4px !important;
        min-height: auto !important;
    }

    .plan-card h4 {
        font-size: 0.7rem !important; /* ?�목 ?�트 축소 */
        margin-bottom: 2px !important;
        line-height: 1.1 !important;
    }

    .plan-card .price {
        font-size: 0.75rem !important; /* 가�??�트 축소 */
        margin-bottom: 2px !important;
    }

    .plan-card .price span {
        font-size: 0.6rem !important; /* 보조 ?�스??축소 */
        display: block; /* 줄바�?*/
        color: #ff4444 !important; /* ?�택?�정 문구 붉�???강조 (?�크모드 가?�성 고려) */
        font-weight: bold !important;
    }

    .plan-card .description {
        font-size: 0.6rem !important; /* ?�명 ?�스??축소 */
        line-height: 1.3 !important;
        white-space: pre-wrap !important; /* 줄바�?문자(\n) 반영 �??�동 줄바�?*/
        word-wrap: break-word !important; /* �??�어 강제 줄바�?*/
        word-break: break-all !important; /* 좁�? 공간 ?�율???�용 */
    }

    .carrier-button, .payment-button, .discount-button, .maintenance-month-button { 
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 4px !important; 
        font-size: 0.82rem !important; /* 글자 크기를 시원하게 키움 */
        min-height: 52px !important; /* 버튼 높이를 키워 터치 영역 확보 */
        line-height: 1.2;
        letter-spacing: -0.02em; /* 자간 압축 완화 */
        white-space: normal !important;
        word-break: keep-all !important; /* 단어 단위로 깔끔하게 배치 */
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 8px !important; /* 모서리를 조금 더 둥글게 */
    }

    .carrier-button img {
        max-height: 20px !important;
    }
    
    .maintenance-month-button { padding: 4px 1px; font-size: 0.6rem; }
    
    /* 로고 �??�단 UI 추�? 축소 */
    h1 img { max-width: 150px !important; }
    .top-right-buttons, .top-left-buttons { transform: scale(0.6); transform-origin: top; }

    html, body { 
        width: 100%; 
        overflow-x: hidden; 
        padding: 0; 
        margin: 0;
        -webkit-text-size-adjust: 100%;
    }
    
    .container { 
        width: 100%; 
        max-width: 100%; 
        padding: 15px; 
        border-radius: 0; 
        box-shadow: none; 
    }
    
    /* 로고 ?�기 축소 */
    h1 { margin-top: 50px; margin-bottom: 10px; }
    h1 img { max-width: 200px !important; height: auto !important; }

    /* ?�개글 ?�백 축소 */
    .intro-text { padding: 0 10px; margin-bottom: 15px; }
    .intro-text p { font-size: 0.85em; margin: 5px 0; }

    /* 버튼 ?�기/?�치�?UI */
    #toggle-choice-btn { 
        display: block !important; 
        width: 100%; 
        max-width: 300px;
        margin: 10px auto !important; 
        padding: 12px; 
        font-size: 1em; 
        background-color: #1a73e8; 
        color: white; 
        border: none;
        border-radius: 8px;
    }
    
    #choice-buttons-wrapper { 
        display: none; 
        width: 100%;
    }
    #choice-buttons-wrapper.active { 
        display: block !important; 
    }

    /* 6�?버튼 ?��???(모바??2??배치: 2x2x2) */
    .grid-area { 
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2??배치 */
        gap: 8px;
        width: 100%;
        margin: 0 auto;
    }
    
    .choice-button { 
        width: 100%;
        padding: 10px 5px !important; 
        min-height: 65px !important; 
        border-radius: 8px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: none !important; /* 갤럭???�드 ???��? ?�면?�서 컬럼??가??채우?�록 ?�정 */
    }
    .choice-button strong { 
        font-size: 0.85rem !important; 
        margin-bottom: 4px;
        line-height: 1.2;
    }
    .choice-button span { 
        font-size: 0.65rem !important; 
        line-height: 1.1;
        word-break: keep-all;
    }

    /* ?�단 ?�백 최적??*/
    #calculator-choice-wrapper { padding: 10px 0; }
    
    /* ?�력 ?�드 �?기�? ?�소 모바??최적??*/
    .section { padding: 15px; margin-bottom: 15px; }
    .input-group label { font-size: 0.9em; }
    .input-group input, .input-group select { padding: 10px; font-size: 16px; } /* 모바???�동�?방�? 16px */
    
    .top-right-buttons { top: 10px; right: 10px; }
    .top-left-buttons { top: 10px; left: 10px; }
    .icon-button { width: 50px; height: 50px; padding: 5px; }
    .icon-button span { font-size: 10px; }

    /* ?�팁 ?�이�??�치 ?�역 ?��? */
    .tooltip-icon {
        padding: 5px 10px !important;
        margin-left: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }

    /* 모바?�에?�는 기존 ?�팁 ?�기�?*/
    .tooltip-text {
        display: none !important;
    }

    /* ?�면 중앙 ?�팁 ?�업 ?��???*/
    #mobile-tooltip-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 15px 20px;
        border-radius: 12px;
        z-index: 9999;
        font-size: 0.9rem;
        line-height: 1.5;
        text-align: center;
        width: 80%;
        max-width: 300px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
        pointer-events: none;
        word-break: keep-all;
    }
    #mobile-tooltip-popup.active {
        opacity: 1;
        visibility: visible;
    }
    /* 강조???�팁 ?�상 (빨간??계열) */
    #mobile-tooltip-popup.highlight {
        border: 2px solid #ff4d4f;
        background-color: rgba(45, 0, 0, 0.9);
    }
}

/* ======================================== */
/* ?�▼???�터???�치 가?��????�인 모달 ?��???(?�체) ?�▼??*/
/* ======================================== */
.coverage-links {
    display: flex;
    flex-direction: column; /* 버튼?�을 ?�로�??�열 */
    gap: 15px; /* 버튼 ?�이??간격 */
    margin-top: 25px;
}

.coverage-link-button {
    display: block;
    padding: 20px;
    font-size: 1.3em;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.coverage-link-button:hover {
    transform: translateY(-3px); /* ?�로 ?�짝 ?�직이???�과 */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* ?�신?�별 고유 ?�상 */
.coverage-link-button.sk { background-color: #E4002B; }
.coverage-link-button.kt { background-color: #5C0000; }
.coverage-link-button.lg { background-color: #8A2BE2; }

/* ======================================== */
/* ?�▼???�치�?좌우 비교 ?��???추�? ?�▼??*/
/* ======================================== */
.installation-fee-comparison {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.installation-fee-comparison > .result-card {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
}
/* ================================== */
/* ?�▼???�약�?계산�?개편 ?��???(?�규) ?�▼??*/
/* ================================== */
#penalty-choice-wrapper {
    text-align: center;
    padding: 20px 0;
}
.choice-buttons-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.choice-button {
    flex: 1;
    max-width: 300px;
    padding: 25px 20px;
    font-size: 1.1em;
    border: 2px solid #1a73e8;
    background-color: #f4f8ff;
    color: #1a73e8;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.choice-button:hover {
    background-color: #1a73e8;
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* ?��? 계산�??�션???�이?�웃???�립?�으�??�정 */
#penalty-termination-calculator .section {
    max-width: 600px; /* 최�? ?�비 지??*/
    margin: 0 auto 20px auto; /* ?�하좌우 마진?�로 중앙 ?�렬 */
    flex: none; /* 부�?flex 컨테?�너???�향 ?�거 */
    width: 100%;
}

/* ?�금??변�?버튼 중앙 ?�렬 */
#add-plan-change-btn {
    display: block; /* 블록 ?�소�?변�?*/
    margin: 0 auto; /* 좌우 마진 auto�?중앙 ?�렬 */
    background: none;
    border: 1px dashed #6c757d;
    color: #6c757d;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    margin-bottom: 10px;
}
#add-plan-change-btn:hover {
    background-color: #f0f0f0;
    border-style: solid;
}

/* ?��? 계산기의 계산 버튼??중앙 ?�렬 */
#penalty-termination-calculator .calc-button {
    max-width: 640px; /* section ?�비?� 비슷?�게 맞춤 */
    margin: 20px auto;
    display: block;
}

/* 결과창도 중앙 ?�렬 */
#penalty-termination-calculator .result-section {
    max-width: 600px;
    margin: auto;
}

/* --- ?�머지 ?��??��? 그�?�??�니??--- */
.plan-history-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #fafafa;
}
.plan-history-item h4 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.remove-plan-btn {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.8em;
    cursor: pointer;
}
#termination-penalty-result h3 {
    text-align: center;
    color: #1a73e8;
}
#termination-penalty-result ul {
    list-style-type: none;
    padding: 0;
}
#termination-penalty-result ul li {
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
}
#termination-penalty-result ul li:last-child {
    border-bottom: none;
}
#termination-penalty-result .final-penalty {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #1a73e8;
    text-align: center;
}
#termination-penalty-result .final-penalty strong {
    font-size: 1.5em;
    color: #d93025;
}
/* ================================== */
/* ?�▼??계산�?메인 ?�택 ?�면 (중앙 ?�렬 ?�정) ?�▼??*/
/* ================================== */

#calculator-choice-wrapper {
    /* flex 관???�성???�거?�고 ?�아???�백�??��??�니?? */
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: center; /* ?��? h2 ?�목???�해 ?��? */
    display: flex; /* Flexbox 추�? */
    flex-direction: column; /* ?�로 ?�렬 */
    justify-content: flex-start; /* ?�직 ?�단 ?�렬 */
    align-items: center; /* ?�평 중앙 ?�렬 */
    min-height: auto; /* 최소 ?�이 ?�정 (조정 가?? */
}

.button-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-area {
    display: grid;
    grid-template-columns: repeat(2, 300px); /* 2??300px 고정 */
    gap: 20px;
    justify-content: center; /* 그리???�이???�체�?중앙 ?�렬 */
}

.span-two-columns {
    grid-column: span 2;
    width: 100%;
    max-width: none !important;
}

.main-return-button {
    display: block; /* 블록 ?�소�?변경하??margin: auto가 ?�동?�도�???*/
    width: 100%;
    max-width: 620px;
    padding: 15px;
    font-size: 1.2em;
    font-weight: bold;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    /* ?�▼???�심 ?�정: ?�하 마진?� 10px, 좌우??auto�?중앙 ?�렬 ?�▼??*/
    margin: 10px auto;
}

.main-return-button:hover {
    background-color: #e9ecef;
}

/* 모바??반응?? 2???��? (2x2x2) */
@media (max-width: 640px) { 
    .grid-area {
        grid-template-columns: 1fr 1fr !important; /* 2??강제 ?��? */
        max-width: 100% !important; 
        gap: 10px;
    }
}

/* ================================================ */
/* ?�▼??글???�기 ?�동 조절 (??부분을 ?�용?�세?? ?�▼??*/
/* ================================================ */

/* 버튼 ?�의 ??글??(?�목) */
.choice-button strong {
    /* ?�면???�아지�?0.7rem, 커�?�?0.9rem, �??�이?�서???�면 ?�비(vw)???�라 ?�동?�로 조절 */
    font-size: clamp(0.7rem, 0.5rem + 1vw, 0.9rem);
    word-break: keep-all; /* ?�어가 ?�려??줄바꿈되???�상 방�? */
}

/* 버튼 ?�의 ?��? 글??(?�명) */
.choice-button span {
    font-size: clamp(0.65rem, 0.5rem + 0.8vw, 0.75rem);
    word-break: keep-all; 
}




/* ?�▼???�기???�로 추�???코드 ?�▼??*/

/* ================================== */
/* ?�▼???��? 방식 버튼 ?��???(?�규) ?�▼??*/
/* ================================== */
.radio-option input[type="radio"] {
            display: none; /* Hide the actual radio button */
        }
        .radio-group .radio-option label {
            flex: 1;
            padding: 10px;
            font-size: 1em;
            border: 1px solid #ccc;
            background-color: #f8f9fa;
            color: #333;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.2s, border-color 0.2s;
            white-space: normal;
            word-break: keep-all;
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .radio-group .radio-option input[type="radio"]:checked + label {
            background-color: #1a73e8;
            color: #fff;
            border-color: #1a73e8;
            font-weight: bold;
        }
.payment-method-options, .discount-type-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.payment-button {
    flex: 1;
    padding: 6px 4px;
    font-size: 0.85em;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-button:hover {
    background-color: #e9ecef;
}

.payment-button.active {
    background-color: #1a73e8; /* Blue */
    color: #fff;
    border-color: #1a73e8; /* Blue */
    font-weight: bold;
}

/* 부가?�비???�용 강조 버튼 */
.payment-button.extra-toggle {
    border-width: 2px;
}

.payment-button.extra-toggle.active {
    background-color: #f59e0b; /* Amber/Orange */
    border-color: #d97706;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.payment-button.extra-toggle:not(.active) {
    border-color: #fcd34d;
    background-color: #fffbeb;
}

.vas-inputs-row, .device-payment-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: flex-end; /* ?�단 ?�렬 */
}

/* 기기�??�력부?� 버튼부???�역??명확?�게 비율�?배분 */
.device-payment-row .device-price-group {
    flex: 1.4 !important; /* ?�력�??�역 */
}

.device-payment-row .payment-method-group {
    flex: 1 !important; /* 버튼 ?�역 */
    min-width: 130px; /* 버튼 2개�? 찌그?��?지 ?�는 최소 ?�비 */
}

/* ?�력창과 버튼???�이�?강제�??�일 */
.device-payment-row input.number-input {
    height: 40px !important;
    padding: 8px 10px !important;
    box-sizing: border-box;
}

.device-payment-row .payment-method-options {
    display: flex !important;
    width: 100% !important;
    gap: 2px !important;
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important; /* 모바?�에?�도 ??�??��? */
}

.device-payment-row .payment-button {
    flex: 1 !important;
    height: 40px !important; /* ?�력�??�이?� ?�치 */
    min-height: 40px !important;
    padding: 0 !important; /* ?��? ?�스??중앙 ?�렬???�해 ?�딩 ?�거 */
    font-size: 0.85em !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 기기�??�션 ?�이�??��???보강 */
.device-payment-row .input-group label {
    font-size: 0.85em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 20px; /* ?�이�??�이 고정?�로 줄바�????�렬 깨짐 방�? */
}

.installment-months-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}

.installment-month-button {
    padding: 8px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.installment-month-button:hover {
    background-color: #e9ecef;
}

.installment-month-button.active {
    background-color: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
    font-weight: bold;
}

/* ================================== */
/* ?�▼??결합 ?�인 버튼 ?��???(?�규) ?�▼??*/
/* ================================== */
.discount-type-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.discount-button {
    padding: 6px 4px;
    font-size: 0.8em;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s;
    line-height: 1.3;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.discount-button:hover {
    background-color: #e9ecef;
}

.discount-button.active {
    background-color: #1a73e8; /* Blue */
    color: #fff;
    border-color: #1a73e8; /* Blue */
    font-weight: bold;
}

/* ================================== */
/* ?�▼???�신??버튼 ?��???(?�규) ?�▼??*/
/* ================================== */
.carrier-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.carrier-button, .payment-button, .discount-button {
    white-space: normal;
    word-break: keep-all;
    min-height: 40px; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
}

.carrier-button, .sort-button {
    padding: 6px 4px;
    font-size: 0.85em;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s;
    min-height: 36px;
}

.carrier-button:hover, .sort-button:hover {
    background-color: #e9ecef;
}

.sort-button.active {
    background-color: #1a73e8; /* Blue */
    color: #fff;
    border-color: #1a73e8; /* Blue */
    font-weight: bold;
}

.carrier-button.active {
    background-color: #fff; /* White background */
    border: 2px solid #1a73e8; /* Blue Border */
    color: #333; /* Dark text */
    font-weight: bold;
}

/* ================================== */
/* ?�▼???�할 계산 버튼 ?��???(?�규) ?�▼??*/
/* ================================== */
.prorate-button-group {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 20px;
}

.prorate-button {
    padding: 10px 20px;
    font-size: 1em;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.prorate-button:hover {
    background-color: #e9ecef;
}

.prorate-button.active {
    background-color: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
    font-weight: bold;
}

/* ================================== */
/* ?�▼???��? 버튼 ?��???(?�규) ?�▼??*/
/* ================================== */
.toggle-button-group {
    display: flex;
}

.toggle-button {
    width: 100%;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.toggle-button:hover {
    background-color: #e9ecef;
}

.toggle-button.active {
    background-color: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
}


/* ================================== */
/* ?�▼???�금???��? 개월??버튼 ?��???(?�규) ?�▼??*/
/* ================================== */
.maintenance-months-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.maintenance-month-button {
    padding: 10px 5px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s;
}

.maintenance-month-button:hover {
    background-color: #e9ecef;
}

.maintenance-month-button.active {
    background-color: #1a73e8; /* Blue */
    color: #fff;
    border-color: #1a73e8; /* Blue */
    font-weight: bold;
}

/* ================================== */
/* ?�▼???�터??계산�??�택 ?�면 (?�규) ?�▼??*/
/* ================================== */
#calculator-choice-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 20px 40px 20px;
}

.choice-buttons-container-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 700px;
    margin: 10px auto;
}

.choice-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px; /* ?�기 축소 */
    font-size: 1em; /* ?�기 축소 */
    min-height: auto; /* 최소 ?�이 ?�동 ?�정 */
    border: 2px solid #1a73e8;
    background-color: #f4f8ff;
    color: #1a73e8;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.choice-button:hover {
    background-color: #1a73e8;
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.choice-button strong {
    font-size: 1.3em;
    margin-bottom: 10px;
}

.choice-button span {
    font-size: 0.9em;
    opacity: 0.8;
}

.main-return-button {
    display: inline-block;
    padding: 12px 25px;
    font-size: 1em;
    font-weight: bold;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    margin-top: 30px;
    transition: background-color 0.2s;
}

.main-return-button:hover {
    background-color: #e9ecef;
}

/* �?버튼???�기 ?�정 */
.choice-button {
    flex: 1 1 200px; /* 버튼???�연?�게 ?�어?�고 줄어?�되, 최소 200px ?�비 ?�보 */
    min-height: 100px;
}

.single-choice-button-wrapper {
    display: flex;
    justify-content: center;
    margin: 20px auto; /* ?�하 20px, 좌우 auto�?중앙 ?�렬 */
    max-width: 620px; /* choice-buttons-container-main�??�사?�게 ?�정 */
    gap: 20px; /* 버튼 �?간격 ?��? */
}

/* ================================================ */
/* ?�▼??글???�기 ?�동 조절 (??부분을 ?�용?�세?? ?�▼??*/
/* ================================================ */

/* 버튼 ?�의 ??글??(?�목) */
.choice-button strong {
    /* ?�면???�아지�?0.7rem, 커�?�?0.9rem, �??�이?�서???�면 ?�비(vw)???�라 ?�동?�로 조절 */
    font-size: clamp(0.7rem, 0.5rem + 1vw, 0.9rem);
    word-break: keep-all; /* ?�어가 ?�려??줄바꿈되???�상 방�? */
}

/* 버튼 ?�의 ?��? 글??(?�명) */
.choice-button span {
    font-size: clamp(0.65rem, 0.5rem + 0.8vw, 0.75rem);
    word-break: keep-all; 
}




/* ?�▼???�기???�로 추�???코드 ?�▼??*/

/* 결과�??��?�??�동??'출력/공유' 버튼 ?��???*/
#result .action-buttons {
    position: static; /* ?�치 고정 ?�제 */
    justify-content: center; /* 버튼 가?�데 ?�렬 */
    padding-top: 10px;
    padding-bottom: 15px;
    display: flex;
}

/* ?�쪽 ?�단???�로 만든 '?�짜 계산�? 버튼 ?��???*/
.top-left-buttons {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    display: flex;
    gap: 10px;
}
.top-left-buttons .icon-button {
    color: #6c757d; /* 기존 ?�른�??�이콘과 ?�일???�상 */
}

.top-left-buttons .icon-button:hover {
    color: #1a73e8; /* ?�버 ???�상 변�?*/
}

/* phone.html 결과 카드 ?��???*/
.breakdown-card {
    flex: 1;
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    min-width: 300px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative;
    transition: all 0.3s ease;
}

.breakdown-card.winner-card {
    border: 2px solid #1a73e8;
    box-shadow: 0 8px 20px rgba(26, 115, 232, 0.2);
    transform: translateY(-5px);
}

.winner-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background-color: #1a73e8;
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.9em;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1;
}

.device-price-section {
    text-align: center;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px dashed #eee; /* Use dashed border to differentiate */
}

.device-price-section p {
    margin: 0;
    font-size: 0.9em; /* Slightly smaller label */
    color: #555;
}

.device-price-section strong {
    font-size: 1.6em; /* Smaller font size for the price */
    color: #333; /* Black color instead of red */
    display: block;
    margin-top: 4px;
}

.total-cost-section {
    text-align: center;
    padding: 15px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.total-cost-section p {
    margin: 0;
    font-size: 1em;
    color: #555;
}

.total-cost-section strong {
    font-size: 2em;
    color: #d93025;
    display: block;
    margin-top: 5px;
}

.breakdown-card h5 {
    font-size: 1.1em;
}

.breakdown-card ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.breakdown-card li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
}

.breakdown-card li:last-child {
    border-bottom: none;
}

.breakdown-card .discount-item {
    color: #1a73e8;
}

/* ================================== */
/* ?�▼???�금??추천 ?�이지 (?�규) ?�▼??*/
/* ================================== */
.plan-results-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.plan-card {
    position: relative; /* Added for rank-badge positioning */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* ?�금??목록 ?�크모드 */
body.dark-mode .plan-card {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

body.dark-mode .plan-card h4 {
    color: #60a5fa !important;
    border-bottom-color: #374151 !important;
}

body.dark-mode .plan-card .price {
    color: #60a5fa !important;
}

body.dark-mode .plan-card .description {
    color: #d1d5db !important;
}

.rank-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    background-color: #ff4500; /* OrangeRed color */
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 8px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 1;
}

.plan-card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #1a73e8;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.plan-card .price {
    font-size: 1.1em;
    font-weight: bold;
    color: #d93025;
    margin-bottom: 15px;
}

/* ?�택?�정 ?�인 문구 강조 (공통) */
.plan-card .price span {
    color: #ff4444; /* 붉�???강조 */
    font-weight: bold;
}

.plan-card .description {
    font-size: 0.9em;
    line-height: 1.6;
    white-space: pre-wrap; /* Allow newlines to be displayed */
    color: #333;
}