/* ===== 거래 요청 모달 공통 컴포넌트 =====
 * company_detail.html / company_detail_ai.html 공유
 * 모달 전용 색상은 아래 변수로 관리 (페이지별 --purple과 독립)
 * ================================================= */

:root {
	--modal-aurora:       linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb, #60a5fa, #1d4ed8, #3b82f6);
	--modal-accent:       #3b82f6;   /* blue-500 */
	--modal-accent-dark:  #2563eb;   /* blue-600 */
	--modal-accent-soft:  #eff6ff;   /* blue-50  */
	--modal-accent-muted: rgba(59, 130, 246, 0.14);
	--modal-accent-glow:  rgba(59, 130, 246, 0.32);
	--modal-chip-hover:   #93c5fd;   /* blue-300 */
}

@keyframes modalAurora {
	0%, 100% { background-position: 0% 50%; }
	50%       { background-position: 100% 50%; }
}

.trm-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}
.trm-overlay.open { display: flex; }
.trm-modal {
	background: var(--card);
	border-radius: 16px;
	width: 100%;
	max-width: 920px;
	max-height: calc(90vh - 40px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 80px rgba(0,0,0,0.2);
	font-family: "Pretendard Variable", "SUIT Variable", sans-serif;
	color: #111827;
}
.trm-modal.trm-modal-sm { max-width: 640px; }
.trm-header {
	background: var(--modal-aurora);
	background-size: 300% 300%;
	animation: modalAurora 8s ease infinite;
	color: #fff;
	padding: 18px 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.trm-header h2 { font-size: 18px; font-weight: 700; }
.trm-close {
	width: 36px; height: 36px;
	border: none;
	background: rgba(255,255,255,0.2);
	color: #fff;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
}
.trm-close:hover { background: rgba(255,255,255,0.35); }
.trm-body { padding: 22px; overflow-y: auto; flex: 1; }
.trm-footer {
	padding: 16px 22px;
	background: #eff6ff;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}
.trm-btn-secondary {
	padding: 12px 24px;
	background: #e2e8f0;
	color: #475569;
	border: none;
	border-radius: 10px;
	font-weight: 600;
	cursor: pointer;
}
.trm-btn-secondary:hover { background: #cbd5e1; }
.trm-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: var(--modal-aurora);
	background-size: 300% 300%;
	animation: modalAurora 8s ease infinite;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 10px var(--modal-accent-glow);
}
.trm-btn-primary:hover { box-shadow: 0 4px 18px var(--modal-accent-glow); filter: brightness(1.08); }

/* 거래 타입 선택 카드 */
.trm-type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .trm-type-cards { grid-template-columns: 1fr; } }
.trm-type-card {
	border: 2px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	cursor: pointer;
	position: relative;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.trm-type-card:hover { border-color: var(--modal-chip-hover); }
.trm-type-card.selected { border-color: var(--modal-accent); box-shadow: 0 0 0 3px var(--modal-accent-muted); }
.trm-type-card .trm-badge-rec {
	position: absolute;
	top: 12px; right: 12px;
	background: var(--modal-aurora);
	background-size: 300% 300%;
	animation: modalAurora 8s ease infinite;
	color: #fff;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 6px;
	font-weight: 700;
}
.trm-type-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.trm-type-radio {
	margin-top: 4px;
	accent-color: var(--modal-accent);
	appearance: auto;
	-webkit-appearance: radio;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}
.trm-type-title { font-weight: 700; font-size: 16px; }
.trm-type-cost { color: #7c3aed; font-size: 13px; font-weight: 700; margin-top: 4px; }
.trm-type-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.trm-type-features { list-style: none; font-size: 12px; }
.trm-type-features li { margin-bottom: 6px; padding-left: 4px; }

/* 거래 요청서 폼 */
.form-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 24px;
}
@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } }
.form-section-title {
	font-size: 15px;
	font-weight: 700;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--modal-accent);
	margin-bottom: 14px;
}
.form-section-head { margin-bottom: 14px; }
.form-section-head .form-section-title { margin-bottom: 4px; }
.form-section-callout {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	background: #f8fbff;
	border: 1px solid #dbeafe;
	border-radius: 10px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.form-section-help {
	font-size: 12px;
	color: #94a3b8;
	line-height: 1.4;
}
.form-section-help-mail {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	font-size: 12px;
	font-weight: 600;
	color: var(--modal-accent-dark);
	text-decoration: none;
}
.form-section-help-mail:hover { text-decoration: underline; }
.read-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.read-table th {
	text-align: left;
	padding: 10px 12px;
	background: #eff6ff;
	color: var(--text-muted);
	font-weight: 600;
	width: 38%;
	border: 1px solid var(--border);
}
.read-table td {
	padding: 10px 12px;
	border: 1px solid var(--border);
	font-weight: 600;
}
.hint { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.radio-row { display: flex; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.radio-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.radio-row input { width: 18px; height: 18px; accent-color: var(--modal-accent); }
.msg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .msg-grid { grid-template-columns: 1fr; } }
.msg-card {
	border: 2px solid var(--border);
	border-radius: 12px;
	padding: 14px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.msg-card:hover { border-color: var(--modal-chip-hover); }
.msg-card.checked { border-color: var(--modal-accent); background: var(--modal-accent-soft); }
.msg-card input { float: left; margin-right: 10px; margin-top: 3px; accent-color: var(--modal-accent); }
.msg-card h4 { font-size: 14px; margin-bottom: 6px; }
.msg-card p { font-size: 12px; color: var(--text-muted); clear: both; }
.info-tip {
	margin-top: 14px;
	padding: 14px;
	background: var(--modal-accent-soft);
	border-radius: 10px;
	font-size: 12px;
	color: var(--modal-accent-dark);
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.trm-extra {
	width: 100%;
	min-height: 88px;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	resize: vertical;
	margin-top: 8px;
	box-sizing: border-box;
}
.trm-extra:focus { outline: none; border-color: var(--modal-accent); box-shadow: 0 0 0 3px var(--modal-accent-muted); }

/* 모달 내부 스크롤바 (페이지 전역 스크롤바와 분리) */
.trm-modal .trm-body {
	scrollbar-width: thin;
	scrollbar-color: var(--modal-accent) var(--modal-accent-soft);
}
.trm-modal .trm-body::-webkit-scrollbar { width: 6px; }
.trm-modal .trm-body::-webkit-scrollbar-track { background: var(--modal-accent-soft); border-radius: 3px; }
.trm-modal .trm-body::-webkit-scrollbar-thumb { background: var(--modal-accent); border-radius: 3px; }
.trm-modal .trm-body::-webkit-scrollbar-thumb:hover { background: var(--modal-accent-dark); }

/* 거래요청 폼 */
.req2-step { margin-bottom: 20px; }
.req2-step-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.req2-step-label { font-size: 13px; font-weight: 700; color: var(--modal-accent); margin-bottom: 8px; }
.req2-step-head .req2-step-label { margin-bottom: 0; }
.req2-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.req2-chip { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 2px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 600; transition: all .15s; user-select: none; }
.req2-chip:hover { border-color: var(--modal-chip-hover); }
.req2-chip.active { border-color: var(--modal-accent); background: var(--modal-accent-soft); color: var(--modal-accent); }
.req2-chip input { display: none; }
.req2-dynamic { margin-top: 8px; }
.req2-dynamic label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #333; }
.req2-dynamic input[type="text"],
.req2-dynamic select,
.req2-dynamic textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; margin-bottom: 12px; box-sizing: border-box; }
.req2-dynamic input[type="text"]::placeholder,
.req2-dynamic textarea::placeholder { color: #a0aec0; }
.trm-extra::placeholder { color: #a0aec0; }
.req2-dynamic textarea { min-height: 70px; resize: vertical; }
.req2-dynamic input[type="text"]:focus,
.req2-dynamic input[type="date"]:focus,
.req2-dynamic select:focus,
.req2-dynamic textarea:focus { outline: none; border-color: var(--modal-accent); box-shadow: 0 0 0 3px var(--modal-accent-muted); }
.req2-dynamic .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .req2-dynamic .field-row { grid-template-columns: 1fr; } }
.req2-check-row { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; font-size: 13px; cursor: pointer; white-space: nowrap; vertical-align: middle; }
.req2-check-row input[type="checkbox"] { accent-color: var(--modal-accent); width: 16px; height: 16px; flex-shrink: 0; margin: 0; vertical-align: middle; }
.req2-check-row label { margin: 0; line-height: 1; vertical-align: middle; cursor: pointer; }
.req2-required::after { content: ' *'; color: #e03131; }
.trm-auto-note-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border: 1px solid #bfdbfe;
	border-radius: 999px;
	background: #eff6ff;
	color: var(--modal-accent-dark);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.trm-auto-note-btn:hover {
	background: #dbeafe;
	border-color: #93c5fd;
	transform: translateY(-1px);
}
.trm-auto-note-btn:active { transform: translateY(0); }

@media (max-width: 560px) {
	.req2-step-head {
		align-items: flex-start;
		flex-direction: column;
	}
}

html.hide-scroll { overflow: hidden; padding-right: var(--scrollbar-w, 0px); }