/* =========================================================
   OEM/ODM My Page
   - oem-odm.jsp 전용 통교체 CSS
   - 기존 중복된 popup/form/button/mobile CSS 정리본
========================================================= */

/* ==============================
   Layout
============================== */
#odmApp,
#odmApp *{
	box-sizing:border-box;
}

#odmApp{
	height:100%;
	min-height:0;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

#odmApp .main{
	display:flex;
	align-items:flex-start;
	width:100%;
}

#odmApp .container{
	flex:1;
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:20px 24px 60px;
}

#odmApp .sub_content_head{
	margin-bottom:18px;
}

#odmApp .sub_content_head h2{
	margin:0 0 6px;
	font-size:22px;
	font-weight:700;
	color:#111;
	line-height:1.3;
}

#odmApp .sub_content_head p{
	margin:0;
	font-size:14px;
	color:#666;
	line-height:1.45;
}

/* ==============================
   Status Summary
============================== */
#odmApp .status_summary_wrap{
	display:grid;
	grid-template-columns:repeat(5, minmax(0, 1fr));
	gap:12px;
	margin:18px 0 22px;
}

#odmApp .status_summary_box{
	padding:18px 20px;
	border:1px solid #ddd;
	border-radius:10px;
	background:#fff;
	cursor:pointer;
	transition:all .2s ease;
}

#odmApp .status_summary_box .tit{
	font-size:14px;
	color:#666;
	line-height:1.3;
}

#odmApp .status_summary_box .cnt{
	margin-top:8px;
	font-size:26px;
	font-weight:700;
	color:#111;
	line-height:1;
}

#odmApp .status_summary_box.active{
	border-color:#111;
	background:#f8f8f8;
}

/* ==============================
   Search Controls
============================== */
#odmApp .controls{
	display:grid;
	grid-template-columns:minmax(190px, 1fr) minmax(190px, 1fr) minmax(230px, 1.2fr) minmax(300px, 1.5fr);
	gap:14px 18px;
	align-items:center;
	padding:20px;
	margin-bottom:24px;
	border:1px solid #eee;
	border-radius:12px;
	background:#fff;
}

#odmApp .controls .flex{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0;
}

#odmApp .controls .key{
	flex:0 0 70px;
	font-size:13px;
	font-weight:700;
	color:#333;
	line-height:38px;
	white-space:nowrap;
}

#odmApp .controls .value{
	flex:1;
	min-width:0;
}

#odmApp .controls input,
#odmApp .controls select{
	width:100%;
	min-width:0;
	height:38px;
	padding:0 10px;
	border:1px solid #ddd;
	border-radius:6px;
	background:#fff;
	font-size:13px;
	color:#222;
}

#odmApp .controls .date_box{
	display:grid;
	grid-template-columns:minmax(0, 1fr) 16px minmax(0, 1fr);
	gap:8px;
	align-items:center;
	min-width:0;
}

#odmApp .controls .date_box span{
	text-align:center;
	color:#999;
}

#odmApp .controls .btns{
	grid-column:1 / -1;
	display:flex;
	justify-content:flex-end;
	gap:8px;
	margin-top:4px;
}

/* ==============================
   Buttons
============================== */
#odmApp button,
#odmApp .btn_style01,
#odmApp .btn_style02,
#odmApp .btn_style03,
#odmApp .btn_style04,
#odmApp .btn_odm_write,
#odmApp .btn_oem_write,
#odmApp .reset,
#odmApp .theme,
#odmApp .btn_small{
	font-family:inherit;
	white-space:nowrap;
	word-break:keep-all;
	cursor:pointer;
}

#odmApp .btn_odm_write,
#odmApp .btn_oem_write,
#odmApp .reset,
#odmApp .theme,
#odmApp .btn_style01,
#odmApp .btn_style02,
#odmApp .btn_style03,
#odmApp .btn_style04{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:78px;
	height:38px;
	padding:0 14px;
	border-radius:6px;
	font-size:13px;
	font-weight:500;
	line-height:1;
	text-align:center;
}

#odmApp .btn_odm_write,
#odmApp .btn_oem_write,
#odmApp .btn_style01,
#odmApp .theme{
	border:1px solid #ff3d00;
	background:#ff3d00;
	color:#fff;
}

#odmApp .btn_style02,
#odmApp .reset{
	border:1px solid #d8dde6;
	background:#fff;
	color:#333;
}

#odmApp .btn_style03{
	border:1px solid #222;
	background:#fff;
	color:#222;
}

#odmApp .btn_style04{
	border:1px solid #ff3d00;
	background:#fff;
	color:#ff3d00;
}

#odmApp .btn_small{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:32px;
	min-width:52px;
	margin:2px;
	padding:0 10px;
	border:1px solid #ddd;
	border-radius:5px;
	background:#fff;
	color:#222;
	font-size:12px;
	line-height:1;
}

#odmApp .btn_small.danger{
	border-color:#f1b5b5;
	color:#d00;
}

/* ==============================
   List Table
============================== */
#odmApp .thead{
	margin-top:12px;
}

#odmApp .thead .top_line{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:10px;
}

#odmApp .odm_table_wrap{
	width:100%;
	overflow-x:auto;
	background:#fff;
	border-radius:12px;
}

#odmApp .cont_table{
	width:100%;
	min-width:900px;
	border-collapse:collapse;
	background:#fff;
}

#odmApp .cont_table th{
	height:44px;
	border-top:1px solid #111;
	border-bottom:1px solid #ddd;
	background:#fafafa;
	font-size:13px;
	font-weight:700;
	color:#111;
	text-align:center;
}

#odmApp .cont_table td{
	padding:14px 10px;
	border-bottom:1px solid #eee;
	font-size:13px;
	color:#333;
	text-align:center;
	vertical-align:middle;
}

#odmApp .product_cell{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:240px;
	text-align:left;
}

#odmApp .thumb_box{
	flex:0 0 auto;
	width:56px;
	height:56px;
	border:1px solid #ddd;
	border-radius:6px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}

#odmApp .empty_box,
#odmApp .loading_box{
	padding:40px 20px;
	text-align:center;
	color:#777;
}

/* ==============================
   Popup Base
============================== */
#odmApp .cd-popup,
#odmApp .cd-popup2{
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	background:rgba(0,0,0,.45);
}

#odmApp .cd-popup-container{
	position:relative;
	width:95%;
	max-width:1100px;
	max-height:90vh;
	background:#fff;
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 10px 35px rgba(0,0,0,.25);
}

#odmApp .popup_head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:70px;
	padding:0 22px;
	border-bottom:1px solid #eee;
	background:#fff;
}

#odmApp .popup_head h3{
	margin:0;
	font-size:20px;
	font-weight:700;
	color:#111;
	line-height:1.3;
}

#odmApp .popup_body{
	padding:24px;
	max-height:calc(90vh - 145px);
	overflow:auto;
}

#odmApp .popup_foot{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:16px 22px;
	border-top:1px solid #eee;
	background:#fff;
}

#odmApp .cd-popup-close{
	position:relative;
	display:block;
	flex:0 0 auto;
	width:34px;
	height:34px;
	border-radius:50%;
	background:#f5f5f5;
	font-size:0;
}

#odmApp .cd-popup-close:before,
#odmApp .cd-popup-close:after{
	content:"";
	position:absolute;
	left:9px;
	top:16px;
	width:16px;
	height:2px;
	background:#333;
}

#odmApp .cd-popup-close:before{
	transform:rotate(45deg);
}

#odmApp .cd-popup-close:after{
	transform:rotate(-45deg);
}

/* ==============================
   Request Modal
============================== */
#odmApp .odm-request-modal{
	width:95%;
	max-width:1100px;
	max-height:92vh;
	background:#fff;
	border-radius:10px;
	overflow:hidden;
}

#odmApp .odm-request-body{
	max-height:calc(92vh - 140px);
	overflow:auto;
	padding:28px 36px;
}

#odmApp .odm-form-title{
	margin-bottom:28px;
	text-align:center;
	font-size:24px;
	font-weight:700;
	color:#111;
}

#odmApp .odm-section{
	margin-bottom:34px;
}

#odmApp .odm-section-title{
	height:38px;
	line-height:38px;
	padding:0 16px;
	margin-bottom:20px;
	border-left:4px solid #ff3d00;
	background:#f5f5f5;
	font-weight:700;
	color:#111;
}

#odmApp .odm-form-grid{
	display:grid;
	grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
	gap:18px 70px;
}

#odmApp .odm-field{
	display:grid;
	grid-template-columns:110px minmax(0, 1fr);
	gap:8px 12px;
	align-items:start;
	min-width:0;
}

#odmApp .odm-field.full{
	grid-column:1 / -1;
}

#odmApp .odm-field > label:first-child{
	grid-column:1 / 2;
	grid-row:1 / 2;
	margin:0;
	padding:0;
	font-size:13px;
	font-weight:700;
	color:#222;
	line-height:38px;
	white-space:nowrap;
	word-break:keep-all;
}

#odmApp .odm-field.required > label:first-child:before{
	content:'* ';
	color:#ff3d00;
}

#odmApp .odm-field > input,
#odmApp .odm-field > select,
#odmApp .odm-field > textarea,
#odmApp .odm-field > .textarea-wrap,
#odmApp .odm-field > .odm-link-row,
#odmApp .odm-field > .image-upload-box,
#odmApp .odm-field > .file-upload-btn,
#odmApp .odm-field > .select-outline-btn,
#odmApp .odm-field > .email-cert-row{
	grid-column:2 / 3;
	grid-row:1 / 2;
	min-width:0;
}

#odmApp .odm-field > .help-text{
	grid-column:1 / -1;
	grid-row:auto;
	display:block;
	width:100%;
	min-height:44px;
	margin:0;
	padding:8px 0 0;
	font-size:13px;
	line-height:1.35;
	color:#999;
	white-space:normal;
	word-break:keep-all;
}

#odmApp .odm-field input,
#odmApp .odm-field select,
#odmApp .odm-field textarea{
	width:100%;
	height:38px;
	padding:0 12px;
	border:1px solid #d8dde6;
	border-radius:4px;
	background:#fff;
	font-size:13px;
	color:#222;
}

#odmApp .odm-field textarea{
	height:88px;
	padding:12px;
	line-height:1.5;
	resize:none;
}

#odmApp .textarea-wrap{
	position:relative;
	width:100%;
}

#odmApp .textarea-wrap textarea{
	width:100%;
}

#odmApp .textarea-wrap span{
	position:absolute;
	right:10px;
	bottom:8px;
	font-size:12px;
	color:#888;
}

#odmApp .odm-link-row{
	display:flex;
	gap:8px;
	margin-bottom:8px;
}

#odmApp .odm-plus-btn,
#odmApp .odm-minus-btn{
	flex:0 0 auto;
	height:38px;
	border:1px solid #d8dde6;
	border-radius:4px;
	background:#fff;
	font-size:13px;
	color:#333;
}

#odmApp .odm-plus-btn{
	width:38px;
}

#odmApp .odm-minus-btn{
	width:56px;
	color:#d00;
}

#odmApp .select-outline-btn,
#odmApp .file-upload-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:38px;
	border:1px solid #ff3d00;
	border-radius:4px;
	background:#fff;
	color:#ff3d00;
	font-size:13px;
	line-height:1;
	white-space:nowrap;
	word-break:keep-all;
	cursor:pointer;
}

#odmApp .file-upload-btn input,
#odmApp .image-upload-box input{
	display:none;
}

#odmApp .image-upload-box{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:112px;
	height:82px;
	border:1px dashed #ff3d00;
	background:#fff;
	color:#333;
	cursor:pointer;
}

#odmApp .image-upload-box span{
	font-size:24px;
	line-height:1;
}

#odmApp .image-upload-box em{
	display:block;
	margin-top:8px;
	font-style:normal;
	font-size:13px;
	line-height:1.2;
	white-space:nowrap;
	word-break:keep-all;
}

#odmApp .email-cert-row{
	display:flex;
	gap:8px;
	width:100%;
}

#odmApp .email-cert-row input{
	flex:1;
	min-width:0;
}

#odmApp .email-cert-row button{
	flex:0 0 110px;
	height:38px;
	border:0;
	border-radius:4px;
	background:#ff3d00;
	color:#fff;
	font-size:13px;
	white-space:nowrap;
	cursor:pointer;
}

#odmApp .odm-upload-list{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	grid-column:1 / -1;
	margin-top:12px;
}

#odmApp .odm-upload-item{
	width:110px;
	padding:8px;
	border:1px solid #eee;
	border-radius:6px;
	text-align:center;
}

#odmApp .odm-upload-thumb{
	width:92px;
	height:92px;
	margin:0 auto;
	border:1px solid #eee;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}

#odmApp .odm-upload-item p{
	margin:6px 0;
	font-size:12px;
	word-break:break-all;
}

#odmApp .odm-upload-item button,
#odmApp .odm-file-list button{
	padding:3px 8px;
	border:1px solid #ddd;
	border-radius:4px;
	background:#fff;
	font-size:12px;
}

#odmApp .odm-file-list{
	grid-column:1 / -1;
	margin:10px 0 0;
	padding:0;
	list-style:none;
}

#odmApp .odm-file-list li{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	padding:6px 0;
	font-size:13px;
}

/* ==============================
   Select Modal: Make / Package
============================== */
#odmApp .select-modal{
	width:96%;
	max-width:1280px;
	max-height:90vh;
	background:#fff;
	border-radius:8px;
	overflow:hidden;
}

#odmApp .select-modal .popup_body{
	max-height:calc(90vh - 130px);
	overflow:auto;
	padding:20px;
}

#odmApp .select-card-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:16px;
}

#odmApp .select-card{
	position:relative;
	display:grid;
	grid-template-columns:150px minmax(0, 1fr);
	min-height:108px;
	border:1px solid #ddd;
	border-radius:6px;
	overflow:hidden;
	background:#fff;
	cursor:pointer;
}

#odmApp .select-card.selected{
	border-color:#ff3d00;
	box-shadow:0 0 0 1px #ff3d00 inset;
}

#odmApp .select-card img{
	width:150px;
	height:108px;
	object-fit:cover;
	background:#f3f3f3;
}

#odmApp .select-card div{
	padding:16px;
}

#odmApp .select-card strong{
	display:block;
	margin-bottom:8px;
	font-size:16px;
	font-weight:700;
	color:#111;
	line-height:1.3;
}

#odmApp .select-card p{
	margin:0;
	font-size:14px;
	color:#555;
	line-height:1.45;
}

#odmApp .check-mark{
	position:absolute;
	right:0;
	bottom:0;
	width:32px;
	height:32px;
	background:#e5e5e5;
	clip-path:polygon(100% 0, 0 100%, 100% 100%);
}

#odmApp .check-mark.on{
	background:#ff3d00;
}

#odmApp .etc-input-wrap{
	margin-top:26px;
}

#odmApp .etc-input-wrap h4,
#odmApp .package-group h4{
	margin:0 0 14px;
	font-size:15px;
	font-weight:700;
	color:#111;
}

#odmApp .package-group{
	margin-bottom:30px;
}

#odmApp .package-group h4 span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:16px;
	height:16px;
	margin-right:6px;
	border-radius:3px;
	background:#ff3d00;
	color:#fff;
	font-size:12px;
	line-height:1;
}

/* ==============================
   Detail Popup Legacy Form Table
============================== */
#odmApp .popup_body .form_list{
	width:100%;
	border-collapse:collapse;
	table-layout:fixed;
}

#odmApp .popup_body .form_list th{
	width:150px;
	padding:12px 14px;
	border:1px solid #e5e5e5;
	background:#f8f8f8;
	font-size:13px;
	font-weight:700;
	color:#222;
	text-align:left;
	vertical-align:middle;
}

#odmApp .popup_body .form_list td{
	padding:10px 12px;
	border:1px solid #e5e5e5;
	font-size:13px;
	color:#333;
	vertical-align:middle;
}



/* ==============================
   OEM/ODM 사용자 상담 답변
============================== */
#odmApp .consult-reply-box{
	margin-top:24px;
	padding:18px;
	border:1px solid #e5e5e5;
	border-radius:10px;
	background:#fafafa;
}

#odmApp .consult-reply-box h4{
	margin:0 0 10px;
	font-size:16px;
	font-weight:700;
	color:#111;
}

#odmApp .consult-reply-box textarea{
	display:block;
	width:100%;
	min-height:110px;
	padding:12px 14px;
	border:1px solid #d8dde6;
	border-radius:6px;
	background:#fff;
	color:#222;
	font-size:13px;
	line-height:1.5;
	resize:vertical;
	outline:none;
}

#odmApp .consult-reply-box textarea:focus{
	border-color:#ff3d00;
}

#odmApp .consult-reply-actions{
	display:flex;
	justify-content:flex-end;
	gap:8px;
	margin-top:10px;
}

.consult-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:72px;
	height:22px;
	margin-left:6px;
	padding:0 8px;
	border-radius:999px;
	font-size:12px;
	font-weight:700;
	line-height:1;
}

.consult-badge.user{
	background:#fff2e8;
	color:#ff3d00;
	border:1px solid #ffb088;
}

.consult-badge.admin{
	background:#eef4ff;
	color:#3158d4;
	border:1px solid #9db4ff;
}

/* ==============================
   Responsive
============================== */
@media (max-width:1024px){
	#odmApp .container{
		padding:16px;
	}

	#odmApp .status_summary_wrap{
		grid-template-columns:repeat(3, minmax(0, 1fr));
	}

	#odmApp .controls{
		grid-template-columns:1fr 1fr;
	}

	#odmApp .controls .date_box{
		grid-template-columns:minmax(0, 1fr) 14px minmax(0, 1fr);
	}

	#odmApp .select-card-grid{
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}
}

@media (max-width:768px){
	#odmApp{
		height:100%;
		overflow-y:auto;
	}

	#odmApp .main{
		display:block;
		min-width:0 !important;
		min-height:calc(100% - 8.5rem);
		padding:0 12px 86px;
		margin:10px auto;
	}

	#odmApp .container{
		width:100%;
		max-width:100%;
		min-width:0;
		padding:14px 12px 110px;
	}

	#odmApp .sub_content_head h2{
		font-size:19px;
	}

	#odmApp .status_summary_wrap{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:8px;
	}

	#odmApp .status_summary_box{
		padding:14px;
	}

	#odmApp .status_summary_box .cnt{
		font-size:22px;
	}

	#odmApp .controls{
		display:block;
		padding:14px;
	}

	#odmApp .controls .flex{
		display:block;
		margin-bottom:12px;
	}

	#odmApp .controls .key{
		display:block;
		margin-bottom:6px;
		line-height:1.4;
	}

	#odmApp .controls .btns{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:8px;
	}

	#odmApp .btn_odm_write,
	#odmApp .btn_oem_write,
	#odmApp .reset,
	#odmApp .theme{
		width:100%;
	}

	#odmApp .odm_table_wrap{
		overflow:visible;
	}

	#odmApp .cont_table,
	#odmApp .cont_table colgroup,
	#odmApp .cont_table thead,
	#odmApp .cont_table tbody,
	#odmApp .cont_table tr,
	#odmApp .cont_table th,
	#odmApp .cont_table td{
		display:block;
		width:100%;
		min-width:0;
	}

	#odmApp .cont_table thead{
		display:none;
	}

	#odmApp .cont_table tr{
		margin-bottom:12px;
		border:1px solid #eee;
		border-radius:12px;
		background:#fff;
		overflow:hidden;
	}

	#odmApp .cont_table td{
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding:11px 12px;
		border-bottom:1px solid #f1f1f1;
		text-align:right;
	}

	#odmApp .cont_table td:before{
		content:attr(data-label);
		margin-right:14px;
		font-weight:700;
		color:#333;
		text-align:left;
	}

	#odmApp .cont_table td.product_td{
		display:block;
		text-align:left;
	}

	#odmApp .cont_table td.product_td:before{
		display:block;
		margin-bottom:8px;
	}

	#odmApp .product_cell{
		width:100%;
		min-width:0;
	}

	#odmApp .cd-popup,
	#odmApp .cd-popup2{
		align-items:flex-start;
		padding:10px;
		overflow:auto;
	}

	#odmApp .cd-popup-container,
	#odmApp .odm-request-modal,
	#odmApp .select-modal{
		width:100%;
		max-width:100%;
		max-height:none;
		border-radius:10px;
	}

	#odmApp .popup_body,
	#odmApp .odm-request-body,
	#odmApp .select-modal .popup_body{
		max-height:none;
		padding:16px;
	}

	#odmApp .popup_foot{
		position:sticky;
		bottom:0;
	}

	#odmApp .odm-form-title{
		margin-bottom:20px;
		font-size:20px;
	}

	#odmApp .odm-form-grid{
		display:block;
	}

	#odmApp .odm-field{
		display:block;
		margin-bottom:18px;
	}

	#odmApp .odm-field > label:first-child{
		display:block;
		margin-bottom:6px;
		line-height:1.4;
	}

	#odmApp .odm-field > .help-text{
		min-height:auto;
		padding-top:8px;
	}

	#odmApp .email-cert-row{
		display:flex;
	}

	#odmApp .email-cert-row button{
		flex:0 0 105px;
	}

	#odmApp .select-card-grid{
		grid-template-columns:1fr;
	}

	#odmApp .select-card{
		grid-template-columns:110px minmax(0, 1fr);
		min-height:96px;
	}

	#odmApp .select-card img{
		width:110px;
		height:96px;
	}

	#odmApp .select-card div{
		padding:12px;
	}

	#odmApp .select-card strong{
		font-size:14px;
	}

	#odmApp .select-card p{
		font-size:12px;
	}

	#odmApp .popup_body .form_list,
	#odmApp .popup_body .form_list colgroup,
	#odmApp .popup_body .form_list tbody,
	#odmApp .popup_body .form_list tr,
	#odmApp .popup_body .form_list th,
	#odmApp .popup_body .form_list td{
		display:block;
		width:100%;
	}

	#odmApp .popup_body .form_list th{
		padding:12px 0 6px;
		border:0;
		background:none;
	}

	#odmApp .popup_body .form_list td{
		padding:0 0 10px;
		border:0;
	}
}