@CHARSET "UTF-8";

/* Modal Overlay */
.modal_overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);z-index: 10000;display: flex;align-items: center;justify-content: center;animation: fadeIn 0.3s ease;}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container */
.modal_container {width: 90%;max-width: 600px;max-height: 90vh;background: #fff;overflow-y: autobox-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);animation: slideUp 0.3s ease;}

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Modal Header */
.modal_header{display: flex;justify-content: space-between;align-items: center;padding: 25px 30px;border-bottom: 1px solid #e5e5e5;}
.modal_header h3{margin: 0;font-size: 2.4rem;font-weight: 600;color: #333;}
.modal_close{background: none;border: none;font-size: 3rem;color: #999;cursor: pointer;padding: 0;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;transition: color 0.2s;}

.modal_close:hover {color: #333;}

/* Modal Body */
.modal_body{padding: 30px;}
.modal_desc{margin: 0 0 30px 0;color: #666;text-align: center;}

/* Access Options */
.access_options{display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin-bottom: 20px;}
.access_option{border: 2px solid #e5e5e5;padding: 25px;text-align: center;transition: all 0.3s;}
.access_option:hover{border-color: #333;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.access_option .option_header{margin-bottom: 12px;}
.access_option .option_header h4{margin: 0;font-size: 1.8rem;font-weight: 600;color: #333;}
.access_option .option_header .option_icon{display: block;width: 40px;height: 40px;margin: 0 auto 10px;background: no-repeat center center / 40px auto;}
.access_option .option_header .option_icon.n1{background-image: url(/nanum/site/builder/skin/main/img/common/option_ic1.png);}
.access_option .option_header .option_icon.n2{background-image: url(/nanum/site/builder/skin/main/img/common/option_ic2.png);}
.access_option .option_desc{margin: 0 0 20px 0;font-size: 1.4rem;color: #666;line-height: 1.5;}

/* Buttons */
.btn_primary,
.btn_secondary,
.btn_cancel,
.btn_submit{width: 100%;padding: 12px 24px;border: none;border-radius: 6px;font-size: 1.4rem;font-weight: 600;cursor: pointer;transition: all 0.3s;}
.btn_primary{background: #333;color: #fff;}
.btn_primary:hover{background: #000;}
.btn_secondary{background: #f5f5f5;color: #333;border: 1px solid #ddd;}
.btn_secondary:hover{background: #e5e5e5;}

/* Product Code Form */
.product_code_form{animation: slideIn 0.3s ease;}

@keyframes slideIn {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.form_header{display: flex;align-items: center;gap: 12px;margin-bottom: 20px;padding-bottom: 16px;border-bottom: 1px solid #e5e5e5;}
.btn_back{background: none;border: none;font-size: 16px;color: #666;cursor: pointer;padding: 8px;transition: color 0.2s;}
.btn_back:hover{color: #333;}
.form_header h4 {margin: 0;font-size: 18px;font-weight: 600;color: #333;}
.form_intro{margin: 0 0 24px 0;font-size: 14px;color: #666;line-height: 1.6;}
.form_group{margin-bottom: 20px;}
.form_group label {display: block;margin-bottom: 8px;font-size: 14px;font-weight: 600;color: #333;}
.required{color: #e74c3c;}

.form_input {width: 100%;padding: 12px 16px;border: 1px solid #ddd;border-radius: 6px;font-size: 14px;transition: border-color 0.3s;box-sizing: border-box;}
.form_input:focus {outline: none;border-color: #333;}
.form_help {display: block;margin-top: 6px;font-size: 12px;color: #999;}
.form_actions {display: grid;grid-template-columns: 1fr 1fr;gap: 12px;margin-top: 24px;}

.btn_cancel{background: #f5f5f5;color: #666;}
.btn_cancel:hover{background: #e5e5e5;color: #333;}

.btn_submit{background: #333;color: #fff;}
.btn_submit:hover{background: #000;}

/* Product Info */
.product_info {background: #f8f9fa;padding: 16px 20px;border-radius: 8px;margin-bottom: 24px;}
.product_info .product_label {font-size: 13px;color: #666;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;display: block;margin-bottom: 6px;}
.product_info .product_name {font-size: 16px;color: #333;font-weight: 600; display: block;word-break: break-word;}

.loading { width: 100%; text-align: center; padding: 50px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.loading span { display: inline-block; width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #000; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }
.loading p { color: #333; font-size: 16px; margin: 0; }

@keyframes spin { 
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/********************모바일********************/
@media all and (max-width:767px){
	

.modal_container {width: 95%;margin: 20px;}
.access_options {grid-template-columns: 1fr;}

.product_info .product_label{font-size: 1.8rem;}
.product_info .product_name{font-size: 2rem;}


.modal_body {padding: 15px;}
.modal_desc{margin-bottom: 15px;}
.modal_header {padding: 15px 20px;padding-right: 10px;}
.product_info {padding: 12px 16px;}
.product_name {font-size: 14px;}
    
    
}