/* =======================================================
        [1] Callcard Main Layout & Hero Banner
        ======================================================= */
        .content-container { 
            width: 100%; 
            max-width: 1100px; /* 위 배너와 동일하게 설정 */
            margin: 0 auto; 
            padding: 40px 20px; 
            box-sizing: border-box; 
        }
            
       /* Hero Banner: Prevents right-side expansion */
        .hero-banner { 
            width: 100% !important; 
            margin: 0 0 25px 0 !important; 
            padding: 50px 20px !important; 
            box-sizing: border-box !important; /* 패딩 먹고 뚱뚱해지는 것 차단 */
            background: linear-gradient(135deg, #1e9653 0%, #15733e 100%); 
            color: #fff; 
            text-align: center; 
            border-radius: 20px; 
            box-shadow: 0 4px 15px rgba(30, 150, 83, 0.15); 
            display: block; 
        }
        .hero-banner p { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: #e8f5e9; word-break: keep-all; line-height: 1.3; }
        .hero-banner h2 { font-size: 34px; font-weight: 800; margin: 0 0 15px; color: #fff; letter-spacing: -1.5px; word-break: keep-all; line-height: 1.2; }
        .highlight-badge { display: inline-block; background: #ffeb3b; color: #222; padding: 10px 30px; border-radius: 50px; font-weight: 900; font-size: 18px; word-break: keep-all; }

        /* =======================================================
        [2] Discount Card Product Grid & Items
        ======================================================= */
        .card-grid { 
            display: flex !important; 
            justify-content: space-between !important; 
            gap: 15px !important; 
            width: 100% !important; 
            margin: 0 0 40px 0 !important; 
            
            box-sizing: border-box !important; 
        }

        

        .card-item { 
            flex: 1 1 0 !important; 
            width: auto !important; 
            max-width: none !important; 
            min-width: 0 !important; 
            margin: 0 !important; 
            padding: 25px 15px !important; 
            box-sizing: border-box !important; 
            background: #fff; 
            border-radius: 20px; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            border: 1px solid #eee; 
        }
        .card-item:hover { transform: translateY(-10px); border-color: #27ae60; box-shadow: 0 10px 20px rgba(0,0,0,0.08); }

        /* Smart Card Component in Grid */
        .smart-card-wrapper { 
            width: 100%; 
            max-width: 100%; 
            aspect-ratio: 1.58; 
            margin: 20px; 
            position: relative; 
        }
        .smart-card { 
            width: 100%; 
            height: 100%; 
            border-radius: 14px; 
            padding: 18px; 
            display: flex; 
            flex-direction: column; 
            justify-content: space-between; 
            text-align: left; 
            color: #fff; 
            position: relative; 
            overflow: hidden; 
            box-sizing: border-box;
            z-index: 1; 
        }
        .card-item:hover .smart-card { transform: scale(1.03); }

        /* Card Watermark Logo */
        .card-watermark { 
            position: absolute; 
            height: 70% !important; 
            width: auto !important; 
            top: 50% !important; 
            left: auto !important;    
            right: 5% !important;    
            transform: translateY(-50%) !important; 
            
            filter: brightness(0) invert(1) !important; 
            z-index: 0; 
            pointer-events: none;
        }
        
        .card-item:nth-child(1) .card-watermark { opacity: 0.25 !important; } 
        .card-item:nth-child(2) .card-watermark { opacity: 0.20 !important; } 
        .card-item:nth-child(3) .card-watermark { opacity: 0.15 !important; } 
        .card-item:nth-child(4) .card-watermark { opacity: 0.10 !important; }

        .smart-card-top, .smart-card-chip, .smart-card-number, .smart-card-bottom { z-index: 2; position: relative; }
        .smart-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } 
        .smart-card-badge { background: rgba(255, 255, 255, 0.25); padding: 5px 12px; border-radius: 6px; font-size: 15px; font-weight: 800; letter-spacing: -0.5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .smart-card-feature { font-size: 11px; opacity: 0.95; font-weight: 600; text-align: right; line-height: 1.3; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
        .smart-card-middle { 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            z-index: 2; 
            flex-grow: 1; 
            margin-top: 10px; 
        }
        .smart-card-chip { width: 34px !important; height: auto; }
        .smart-card-number { font-size: 18px !important; font-weight: 800; letter-spacing: 0.5px; }
        .smart-card-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 10px; opacity: 0.8; font-weight: 600; text-transform: uppercase; }

        .card-item:nth-child(1) .smart-card { background: linear-gradient(135deg, #53A962, #418D4F); } 
        .card-item:nth-child(2) .smart-card { background: linear-gradient(135deg, #4A9B5A, #398146); }
        .card-item:nth-child(3) .smart-card { background: linear-gradient(135deg, #418E50, #2E6A37); }
        .card-item:nth-child(4) .smart-card { background: linear-gradient(135deg, #377E44, #24572D); }

        .card-info-content { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
        .main-title { font-size: 20px; font-weight: 800; color: #333; margin-bottom: 4px; }
        .sub-title { font-size: 14px; font-weight: 500; color: #666; margin-bottom: 12px; }
        
        .price-container { display: flex; flex-direction: column; align-items: center; }
        .origin-price { font-size: 14px; color: #aaa; text-decoration: line-through; margin-bottom: 2px; }
        .final-price { display: flex; align-items: baseline; margin-bottom: 15px; }
        .discount-rate { font-size: 18px; font-weight: 800; color: #e74c3c; margin-right: 5px; }
        .price-val { font-size: 24px; font-weight: 800; color: #111; }
        .unit { font-size: 15px; font-weight: 400; color: #111; }

        .btn-buy { width: calc(100% - 20px); margin: 0 auto; background: #27ae60; color: #fff; padding: 14px 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; border: none; cursor: pointer; transition: background 0.2s; white-space: nowrap; }
        .btn-buy:hover { background: #1e8449; }
          
        section.guide-box { 
            width: 100% !important; 
            padding: 50px 20px !important; 
            background: #fff; 
            border: 1px solid #eee; 
            border-radius: 20px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.02); 
            margin-bottom: 40px; 
            text-align: center; 
            box-sizing: border-box !important; 
        }
        .guide-title { font-size: 28px; font-weight: 800; margin-bottom: 15px; letter-spacing: -0.5px; color: #222; word-break: keep-all; line-height: 1.3; }
        .guide-sub-text { color: #555; font-size: 16px; margin-bottom: 40px; word-break: keep-all; letter-spacing: -0.3px; line-height: 1.5; }

        .benefit-container { display: flex; justify-content: center; gap: 20px; width: 100%; max-width: 1000px; margin: 0 auto; }
        .benefit-card { 
            flex: 1; 
            background: #fff; 
            border: 1px solid #eaeaea; 
            border-radius: 16px; 
            padding: 35px 25px; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
        }
        .benefit-icon { width: 50px; height: 50px; background: #e8f5e9; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; }
        .benefit-icon svg { width: 26px; height: 26px; fill: #27ae60; }
        
        .benefit-title { font-size: 19px; font-weight: 800; color: #222; margin-bottom: 15px; width: 100%; text-align: center; }
        .benefit-desc-wrapper {
            width: 100%;
            display: flex;
            justify-content: center; 
        } 
        .benefit-desc { 
            
            text-align: left;      
            font-size: 15px; 
            color: #555; 
            line-height: 1.6; 
            word-break: keep-all; 
            margin: 0; 
            width: 220px; 

        }    

        .market-box { 
            background: #1a1a1a; 
            padding: 60px 20px !important; 
            text-align: center; 
            border-radius: 20px; 
            color: #fff; 
            width: 100% !important; 
            display: block; 
            margin-bottom: 40px; 
            box-sizing: border-box !important; 
        }
        .market-box a {
            text-decoration: none !important;
        }
        .market-box h4 { color: #27ae60; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
        .market-box .select-title { color: #ffffff; font-size: 24px; margin-bottom: 30px; word-break: keep-all; }
        .market-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 25px 0; }
        .btn-market { padding: 10px 25px; background: #333333; border-radius: 50px; font-size: 15px; color: #ffffff; font-weight: 600; transition: all 0.2s ease; display: inline-block; }
        .btn-market:hover { background: #27ae60; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
        .btn-total { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 40px auto 0; padding: 12px 30px; background: #27ae60; color: #fff; font-size: 16px; font-weight: 700; border-radius: 50px; transition: all 0.2s ease; }
        .btn-total:hover { background: #219150; }

        /* =======================================================
        [3] Integrated Modal & Payment UI
        ======================================================= */
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 10000; align-items: center; justify-content: center; }
        .modal-content-box { background: #fff; padding: 40px 30px; border-radius: 20px; width: 90%; max-width: 400px; position: relative; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); box-sizing: border-box; }
        .close-modal { position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: #aaa; font-weight: 300; }
        
        /* Selection Buttons & Inputs */
        .modal-content-box h3.choice-title { font-size: 22px; color: #222; margin: 0 0 10px 0; font-weight: 800; }
        .modal-content-box p.choice-desc { font-size: 15px; color: #666; margin: 0 0 30px 0; }
        .btn-choice { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.2s; margin-bottom: 12px; border: none; font-family: inherit;}
        .btn-choice.red { background: #fff; color: #d32f2f; border: 1px solid #d32f2f; }
        .btn-choice.green { background: #27ae60; color: #fff; border: 1px solid #27ae60; }
        .btn-choice.dark { background: #444; color: #fff; border: 1px solid #444; }
        .btn-choice-cancel { display: inline-block; margin-top: 15px; font-size: 14px; color: #999; text-decoration: underline; cursor: pointer; }

        .modal-content-box h3.input-title { font-size: 22px; color: #27ae60; margin: 0 0 10px 0; font-weight: 800; }
        .modal-content-box p.input-desc { font-size: 15px; color: #666; margin: 0 0 25px 0; word-break: keep-all; }
        .input-group { display: flex; flex-direction: column; gap: 12px; width: 100%; }
        .input-group input { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; text-align: center; box-sizing: border-box; outline: none; }
        .input-group button { width: 100%; padding: 15px; background: #27ae60; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.2s; }
        .input-group button:hover { background: #219653; }

        /* Payment Layer Specific Styles */
        #payLayer { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95% !important; max-width: 440px !important; max-height: 85vh !important; background: #fff; border-radius: 20px; z-index: 10001; transition: opacity 0.3s ease; opacity: 0; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
        #payLayer.show { opacity: 1; }
        
        .pay-layer-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: #fdfdfd; border-bottom: 1px solid #eee; height: 60px; }
        .pay-layer-header h3 { display: flex; align-items: center; font-size: 20px; font-weight: 800; color: #333; margin: 0; letter-spacing: -1px; }
        .btn-close { background: none; border: none; font-size: 28px; cursor: pointer; color: #999; margin: 0; padding: 0; line-height: 1; }

        .pay-layer-body { padding: 15px 20px 25px 20px; overflow-y: auto; max-height: calc(85vh - 60px); text-align: left; }

        /* Selected Item Preview in Payment Modal */
        .pay-selected-item { display: flex; flex-direction: column; align-items: center; background: #f8f9fa; border-radius: 12px; padding: 15px; margin-bottom: 20px; }
        #selectedCardImg { display: block; width: 140px; height: auto; margin-bottom: 15px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); }
        .pay-selected-item .info { text-align: center; }
        #selectedCardName { font-size: 18px; font-weight: 700; color: #444; margin: 0 0 5px 0; }
        #selectedCardPrice { font-size: 21px; font-weight: 800; color: #27ae60; margin: 0; }

        .section-title { font-size: 14px; font-weight: 700; margin: 15px 0 10px; color: #333; }
        
        /* Expert selection radio button grid */
        .expert-select-grid { display: flex; gap: 8px; margin-bottom: 25px; }
        .expert-btn { flex: 1; cursor: pointer; }
        .expert-btn input[type="radio"] { display: none; }
        .expert-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 0; border: 1px solid #ddd; border-radius: 12px; background: #fff; transition: all 0.2s ease; }
        .expert-box .icon { font-size: 22px; margin-bottom: 4px; }
        .expert-box span:not(.icon) { font-size: 13px; font-weight: bold; color: #666; }
        .expert-btn input[type="radio"]:checked + .expert-box { border-color: #27ae60; background: #f0fdf4; }
        .expert-btn input[type="radio"]:checked + .expert-box span:not(.icon) { color: #27ae60; }

        /* ==========================================================
        Callcard Payment Modal CSS
        ========================================================== */

        /* Payment Method Button Grid */
        .method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
        .btn-method, .btn-method-sub { padding: 12px; border: 1px solid #eee; background: #fff; border-radius: 10px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

        /* Payment Method Button Active States */
        .btn-method.active { border-color: #333; background: #333; color: #fff; }

        /* Naver Pay: Green background, White text */
        .btn-method.naver-pay.active { background-color: #03C75A; border-color: #03C75A; color: #fff; }
        .btn-method.naver-pay.active span { color: #fff !important; }

        /* Kakao Pay: Dark brown background, Yellow text */
        .btn-method.kakao-pay.active { background-color: #3C1E1E; border-color: #3C1E1E; color: #fff; }
        .btn-method.kakao-pay.active span { color: #FEE500 !important; font-weight: 800; }

        /* Toss Pay: Blue background, White text */
        .btn-method.toss-pay.active { background-color: #3182f6; border-color: #3182f6; color: #fff; }
        .btn-method.toss-pay.active span { color: #fff !important; }

        /* Credit Card & Default Sub-methods: Dark grey background, White text */
        .btn-method.credit-card.active,
        .btn-method-sub.active { background-color: #333; border-color: #333; color: #fff; }

        /* Payment Execute Button */
        .btn-pay-execute:hover { background: #219150; }

        /* User Info Section (Phone Input) */
        .user-info-section { background: #f0fdf4; padding: 15px; border-radius: 12px; margin-bottom: 20px; border: 1px inset #e0f2e5; }
        .input-phone { width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; font-weight: 700; color: #27ae60; box-sizing: border-box; outline: none; }
        .input-phone:focus { border-color: #27ae60; }

        /* Membership Benefit Box */
        .membership-benefit-box { background: #fff9e6; border: 1px solid #f1c40f; border-radius: 12px; padding: 15px; margin-bottom: 20px; text-align: left; }
        .benefit-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
        .benefit-header .badge { background: #e67e22; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 800; text-transform: uppercase; }
        .benefit-header p { margin: 0; font-size: 14px; color: #333; font-weight: 600; }
        .benefit-list { margin: 0 0 12px 0; padding-left: 0; list-style: none; }
        .benefit-list li { font-size: 12px; color: #666; margin-bottom: 4px; position: relative; padding-left: 15px; }
        .benefit-list li::before { content: '•'; position: absolute; left: 0; color: #f1c40f; }
        .btn-join-sm { display: block; text-align: center; background: #333; color: #fff; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; }

        /* Non-member Warning Message */
        .non-member-warning { margin-top: 10px; padding: 10px 12px; background: #fff5f5; border-radius: 8px; font-size: 12px; color: #e74c3c; border: 1px solid #ffdada; line-height: 1.5; }

        /* Terms and Conditions Agreement Box */
        .terms-agreement-box { background: #f8f9fa; border: 1px solid #e9ecef; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
        .terms-label { display: flex; align-items: center; cursor: pointer; font-size: 14px; font-weight: 600; color: #333; }
        .terms-checkbox { margin-right: 8px; width: 16px; height: 16px; accent-color: #27ae60; cursor: pointer; }
        .terms-links { margin-top: 8px; padding-left: 24px; font-size: 12px; color: #888; }
        
        /* Payment Success View */
        .payment-success-box { text-align: center; padding: 20px; background: #f8fdfa; border-radius: 12px; border: 1px solid #d1e7dd; box-sizing: border-box; }
        .pin-display { background: #fff; border: 2px dashed #27ae60; padding: 20px; border-radius: 10px; font-size: 24px; font-weight: 800; color: #27ae60; margin-bottom: 15px; letter-spacing: 2px; }

        /* Action Buttons */
        .btn-copy, .btn-call-direct, .btn-close-final { display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px; border-radius: 12px; font-weight: 700; font-size: 16px; border: none; cursor: pointer; margin-top: 10px; box-sizing: border-box; font-family: inherit; }
        .btn-copy { background: #f1f1f1; color: #666; }
        .btn-call-direct { background: #27ae60; color: #ffffff; text-decoration: none; }
        .btn-close-final { background: #ffffff; color: #888; border: 1px solid #eee; }

        /* Cart Button */
        .btn-cart-add { width: 100%; height: 45px; background: #fff; color: #666; border: 1px solid #ccc; border-radius: 10px; margin-top: 8px; margin-bottom: 20px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; box-sizing: border-box; font-family: inherit; }
        
        /* ==========================================================
        [4] Terms & Policy Modal UI
        ========================================================== */
        #policyIframeModal {
            display: none; 
            position: fixed !important; 
            top: 0 !important; 
            left: 0 !important; 
            width: 100vw !important; 
            height: 100vh !important; 
            background: rgba(0, 0, 0, 0.7) !important; /* 배경 더 어둡게 */
            z-index: 999999 !important; /* 결제창(1050)을 압도하는 최상위 층수 */
            align-items: center !important; 
            justify-content: center !important;
        }

        #policyIframeModal .modal-content {
            background: #fff;
            width: 90% !important;
            max-width: 600px !important;
            height: 80vh !important;
            border-radius: 15px;
            z-index: 1000000 !important;
            display: flex;
            flex-direction: column;
            padding: 20px;
            position: relative;
            margin: auto;
        }

        #policyIframeModal .modal-header { 
            margin-bottom: 15px; font-size: 18px; font-weight: 700; color: #222; padding-bottom: 10px; border-bottom: 2px solid #27ae60;
        }
        #policyIframeModal .iframe-container { 
            flex: 1; width: 100%; border: 1px solid #eee; border-radius: 8px; overflow: hidden; background: #f7f7f7; margin-bottom: 15px; 
        }
        #policyIframeModal .iframe-container iframe { 
            width: 100%; height: 100%; display: block; 
        }
        #policyIframeModal .modal-btn { 
            width: 100%; padding: 15px; color: white; background-color: #27ae60; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.2s; flex-shrink: 0; 
        }
        #policyIframeModal .modal-btn:hover { 
            opacity: 0.9; 
        }

        .terms-links a {
            font-size: 12px;
            color: #888;
            text-decoration: underline; 
            background: none;
            border: none;
            cursor: pointer;
        }

        /* =======================================================
        [5] Responsive Design (Media Queries)
        ======================================================= */
        @media (max-width: 1024px) {
            html, body { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; }

            #mainBody .content-container {
                width: 100% !important;
                max-width: 100vw !important;
                margin: 0 !important; 
                box-sizing: border-box !important;
                overflow-x: hidden !important;
            }
            
            #mainBody .content-container * {
                box-sizing: border-box !important;
            }

            #mainBody .content-container .card-grid { 
                display: flex !important; 
                flex-wrap: wrap !important; 
                justify-content: center !important; 
                gap: 20px !important; 
                padding: 0 !important; 
                margin: 0 auto 40px auto !important;  
                width: 100% !important;
            }
            #mainBody .content-container .card-grid .card-item { 
                flex: 0 0 calc(50% - 15px) !important; 
                max-width: calc(50% - 15px) !important; 
                margin: 0 !important; 
                padding: 25px 15px !important;
            }
            #mainBody .content-container .card-grid .card-item:last-child {
                max-width: calc(50% - 15px) !important; 
                margin: 0 !important;
            }
            .benefit-container { flex-direction: column; gap: 15px; }
        }

        @media (max-width: 768px) {
            #mainBody .content-container { 
                padding: 20px 15px !important; 
            }
            
            .hero-banner { padding: 35px 15px !important; }
            .hero-banner p { font-size: 16px !important; word-break: keep-all; }
            .hero-banner h2 { font-size: 24px !important; word-break: keep-all; }

           #mainBody .content-container .card-grid { 
                flex-direction: column !important; 
                align-items: center !important; 
                justify-content: center !important;
                gap: 20px !important; 
                padding: 0 !important; 
                margin: 0 auto 30px auto !important; 
                width: 100% !important;
            }
            #mainBody .content-container .card-grid .card-item,
            #mainBody .content-container .card-grid .card-item:last-child { 
                flex: 0 0 auto !important; 
                width: 100% !important; 
                max-width: 340px !important; 
                margin: 0 auto !important; 
                padding: 30px 20px !important; 
            }

            .smart-card-wrapper { max-width: 280px !important; margin: 0 auto 20px auto !important; }
            .smart-card-number { font-size: 18px !important; }
            .price-val { font-size: 24px !important; }

             section.guide-box, .market-box { padding: 35px 15px !important; }
            .benefit-card { padding: 30px 20px !important; align-items: center !important; }
            .benefit-desc-wrapper { 
                display: flex !important; 
                justify-content: center !important; 
                width: 100% !important; 
            }
            .benefit-desc { 
                text-align: left !important; 
                font-size: 14px !important; 
                line-height: 1.6 !important; 
                width: fit-content !important; 
                max-width: 260px !important; 
                margin: 0 !important; 
            }
        }

        @media (max-width: 360px) {
            .hero-banner h2 { font-size: 21px !important; }
            #mainBody .content-container .card-grid .card-item,
            #mainBody .content-container .card-grid .card-item:last-child { 
                max-width: 300px !important; 
            }
            .price-val { font-size: 20px !important; }
        }