@charset "UTF-8";

/* ==========================================================
   1. Payment Layer Modal Specific Styles
========================================================== */
#payLayerOverlay { z-index: 10000; }
#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; 
    gap: 8px;
    font-size: 20px; 
    font-weight: 800; 
    color: #333; 
    margin: 0; 
    letter-spacing: -1px;
    flex-wrap: nowrap; 
}

.pay-layer-header h3 span:first-child {
    font-size: 18px;
    flex-shrink: 0;
    transform: translateY(1px);
}

#payExpertNameText,
#payExpertJob {
    font-size: 20px !important;
    font-weight: 800 !important;
}

#payExpertNameContainer {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #27ae60 !important;
}

.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; }
.section-title { font-size: 14px; font-weight: 700; margin: 15px 0 10px; color: #333; }

/* Product Radio Buttons (Fixed 2x2 grid layout) */
.prod-radio-wrap { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 20px !important; }
.prod-radio-wrap > div { position: relative; width: 100%; }
.prod-radio-wrap input[type="radio"] { display: none; }
.prod-radio-label { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 18px 10px !important; border: 1px solid #ddd; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; background: #fff; height: 100%; box-sizing: border-box; text-align: center; }
.prod-radio-label .prod-name { font-size: 14px; font-weight: 600; color: #555; margin-bottom: 6px !important; }
.prod-radio-label .prod-price { font-size: 16px; font-weight: 800; color: #333; }
.prod-radio-wrap input[type="radio"]:checked + .prod-radio-label { border-color: #27ae60; background: #f0fdf4; }
.prod-radio-wrap input[type="radio"]:checked + .prod-radio-label .prod-name,
.prod-radio-wrap input[type="radio"]:checked + .prod-radio-label .prod-price { color: #27ae60; }

/* User Info & Membership Benefit Section */
.user-info-section { background: #f0fdf4; padding: 15px; border-radius: 12px; margin-bottom: 20px; border: 1px inset #e0f2e5; }
.phone-tip { font-size: 12px; color: #888; letter-spacing: -0.5px; line-height: 1.4; }
.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; }
.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; text-align: left; }
.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; }
.benefit-list li { font-size: 12px; color: #666; margin-bottom: 4px; list-style: none; 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 !important; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; }

/* Payment Methods (2x2 그리드 배열) */
.method-grid { display: grid; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 10px !important; }
.btn-method { height: 48px !important; border: 1px solid #eee !important; background: #fff !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; transition: all 0.2s; }
.btn-method.active { border: 2px solid #27ae60; font-weight: bold; }
.btn-method.naver-pay.active { background-color: #03C75A !important; border-color: #03C75A !important; color: #fff !important; }
.btn-method.naver-pay.active span { color: #fff !important; }
.btn-method.kakao-pay span { color: #3C1E1E; transition: color 0.2s; margin-right: 4px; }
.btn-method.kakao-pay.active { background-color: #3C1E1E !important; border-color: #3C1E1E !important; color: #fff !important; }
.btn-method.kakao-pay.active span { color: #FEE500 !important; font-weight: 800 !important; }
.btn-method.toss-pay.active { background-color: #3182f6 !important; border-color: #3182f6 !important; color: #fff !important; }
.btn-method.toss-pay.active span { color: #fff !important; }
.btn-method.credit-card.active, .btn-method-sub.active { background-color: #333 !important; border-color: #333 !important; color: #fff !important; }

/* Execute Buttons */
.btn-pay-execute { 
    width: 100% !important; 
    height: 54px !important; 
    background: #27ae60 !important; 
    color: #fff !important; 
    font-size: 18px !important; 
    font-weight: bold !important; 
    border-radius: 12px !important; 
    border: none !important; 
    margin-top: 10px !important; 
    cursor: pointer; 
    font-family: inherit; 
}
.btn-sub-toggle { display: block !important; width: 100% !important; text-align: right !important; margin: 5px 0 15px 0 !important; font-size: 12px !important; color: #999 !important; background: none !important; border: none !important; cursor: pointer !important; }
.btn-cart-add { width: 100%; height: 50px; background: #fff; color: #555; border: 1px solid #ddd; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 10px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; box-sizing: border-box; font-family: inherit;}

/* Terms Buttons */
.btn-view-terms { font-size: 12px; color: #888; text-decoration: underline; background: none; border: none; cursor: pointer; margin-right: 12px; flex-shrink: 0; }

/* ==========================================================
   2. General Modal UI (Choice, PIN Input, Hi-Pass)
========================================================== */
.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; }
.modal-content-box h3.choice-title, .modal-content-box h3.input-title { font-size: 22px; color: #222; margin: 0 0 10px 0; font-weight: 800; }
.modal-content-box p.choice-desc, .modal-content-box p.input-desc { font-size: 15px; color: #666; margin: 0 0 30px 0; word-break: keep-all; }
.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; }
.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; font-family: inherit; }
.modal-info { margin-top: 15px; font-size: 13px; color: #888; text-align: center; }
.modal-info p { margin: 4px 0; }

/* ==========================================================
   3. Payment Success View
========================================================== */
.payment-success-box { text-align: center; padding: 20px; background: #f8fdfa; border-radius: 12px; border: 1px solid #d1e7dd; box-sizing: border-box; }
.success-title { font-size: 18px; font-weight: 800; color: #2c3e50; margin-bottom: 20px; }
.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;}
.success-guide { font-size: 13px; color: #666; margin-bottom: 25px; }
.success-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 20px; }
.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; text-decoration: none; font-size: 16px; border: none; cursor: pointer; box-sizing: border-box; margin-top: 10px; font-family: inherit;}
.btn-copy { background: #f1f1f1; color: #666; }
.btn-call-direct { background: #27ae60; color: #ffffff; }
.btn-close-final { background: #ffffff; color: #888; border: 1px solid #eee; }

/* ==========================================================
   4. Iframe Terms Modal
========================================================== */
#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; 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 #007672; text-align: left; }
#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; border: none; }