/* /css/page_my_request.css */
@charset "utf-8";

/* ==============================================
   매수의뢰 공통 변수 및 기본값
============================================== */
#boxMyRequest {
	--request-bg: var(--color-background);
	--request-box: #fff;
	--request-text: var(--color-dark);
	--request-text-strong: var(--color-dark);
	--request-text-muted: var(--color-gray);
	--request-text-light: var(--color-placeholder);
	--request-border: var(--color-surface);
	--request-primary: var(--color-primary);
	--request-primary-soft: var(--color-background-light);
	--request-primary-dark: var(--color-primary-dark);
	--request-radius-sm: .5rem;
	--request-radius-md: .75rem;
	--request-radius-lg: 1rem;
	--request-radius-xl: 1.5rem;
	--request-radius-pill: 999px;
	--request-shadow: 0 .25rem 1rem rgba(15, 23, 42, .04);
	padding: 1.25rem 0 2rem;
	background: var(--request-bg);
	color: var(--request-text);
	font-size: 1rem;
	line-height: 1.5;
}

#boxMyRequest.is-general,
#boxMyRequest.is-company {
	--request-theme: var(--request-primary);
	--request-theme-soft: var(--request-primary-soft);
	--request-theme-dark: var(--request-primary-dark);
}

#boxMyRequest *,
#boxMyRequest *::before,
#boxMyRequest *::after {
	box-sizing: border-box;
}

#boxMyRequest a {
	text-decoration: none;
}

#boxMyRequest button,
#boxMyRequest input,
#boxMyRequest select {
	font-family: inherit;
}

#boxMyRequest button.rf-button-primary.open-write-form {
    height: 38px;
    line-height: 38px;
    padding: 0 1rem;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
}

/* ==============================================
   페이지 레이아웃
============================================== */
#boxMyRequest .request-contain {
	width: 100%;
	margin: 0 auto;
	padding: 0 1rem;
}

#boxMyRequest .request-layout {
	display: flex;
	flex-direction: column;
	width: 100%;
}

#boxMyRequest .request-content {
	order: 1;
	width: 100%;
	min-width: 0;
}

#boxMyRequest .request-panel {
	margin: 0;
	padding: 1.25rem;
	border-radius: var(--request-radius-lg);
	background: var(--request-box);
	box-shadow: var(--request-shadow);
}

/* ==============================================
   목록 상단
============================================== */
#boxMyRequest .request-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--request-border);
}

#boxMyRequest .request-title {
	margin: 0;
	font-size: 1.5rem;
}

#boxMyRequest .request-count {
	margin-left: .35rem;
	color: var(--request-text-muted);
	font-size: 1rem;
	font-weight: 400;
}

#boxMyRequest .request-count strong {
	color: var(--request-theme-dark);
	font-weight: 600;
}

/* ==============================================
   검색 영역
============================================== */
#boxMyRequest .request-search {
	margin-bottom: 2rem;
}

#boxMyRequest .request-filter-scroll {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: .5rem;
}

#boxMyRequest .request-select-wrap {
	position: relative;
	min-width: 8.5rem;
}

#boxMyRequest .request-select-wrap .material-symbols-outlined {
	position: absolute;
	right: .7rem;
	top: 50%;
	font-size: 1.25rem;
	line-height: 1;
	pointer-events: none;
	transform: translateY(-50%);
}

#boxMyRequest .request-filter-select {
	width: 100%;
	height: 2.75rem;
	padding: 0 2.25rem 0 .875rem;
	border: 1px solid #d7dce2;
	border-radius: var(--request-radius-sm);
	background: #fff;
	color: var(--request-text-strong);
	font-size: var(--rf-font-md);
	font-weight: 400;
	outline: none;
	cursor: pointer;
	appearance: none;
}

#boxMyRequest .request-filter-select:focus {
	border-color: var(--request-theme);
	box-shadow: 0 0 0 .1875rem rgba(28, 140, 120, .08);
}

#boxMyRequest .request-keyword {
	border-color: #d7dce2;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

#boxMyRequest .request-keyword + .rf-button-primary {
	margin-left: -.5rem;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

#boxMyRequest .request-reset {
	border: 1px solid #333;
	background: #333;
	color: #fff;
}

/* ==============================================
   매수의뢰 목록
============================================== */
#boxMyRequest .request-list {
	display: flex;
	flex-direction: column;
}

#boxMyRequest .request-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--request-border);
}

#boxMyRequest .request-item:first-child {
	padding-top: 0;
}

#boxMyRequest .request-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

#boxMyRequest .request-item-main {
	min-width: 0;
}

#boxMyRequest .request-item-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .75rem;
}

#boxMyRequest .request-heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	min-width: 0;
}

#boxMyRequest .request-number {
	color: var(--request-text-strong);
	font-weight: 500;
}

#boxMyRequest .request-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--request-text-light);
	cursor: pointer;
}

#boxMyRequest .request-copy .material-symbols-outlined {
	font-size: 1.1rem;
	font-weight: 300;
}

#boxMyRequest .request-copy:hover {
	color: var(--request-theme-dark);
}

/* ==============================================
   상태 뱃지
============================================== */
#boxMyRequest .request-badges {
	display: flex;
	align-items: center;
	gap: .35rem;
}

#boxMyRequest .request-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.625rem;
	padding: .2rem .65rem;
	border-radius: var(--request-radius-pill);
	font-size: .85rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

#boxMyRequest .request-badge.status {
	border: 1px solid rgba(28, 140, 120, .16);
	background: rgba(28, 140, 120, .1);
	color: var(--color-primary-dark);
}

/* ==============================================
   의뢰 주요 정보
============================================== */
#boxMyRequest .request-body {
	display: block;
	color: inherit;
}

#boxMyRequest .request-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .45rem;
	margin-bottom: .5rem;
	color: var(--request-text-strong);
}

#boxMyRequest .request-info span::after {
	content: "·";
	margin-left: .45rem;
	color: var(--request-text-light);
}

#boxMyRequest .request-info span:last-child::after {
	display: none;
}

/* ==============================================
   희망 지역 뱃지
============================================== */
#boxMyRequest .request-region-badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .75rem 0 0;
}

#boxMyRequest .request-region-badge {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: .35rem .65rem;
	border: 1px solid #e1e5ea;
	border-radius: var(--request-radius-pill);
	background: #f5f7f9;
	color: #5f6875;
	font-size: .8rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

#boxMyRequest .request-region-empty {
	color: #8b93a1;
	font-size: .9rem;
}

/* ==============================================
   수정·이력·삭제 버튼
   매물관리 버튼 규격과 동일하게 구성
============================================== */
#boxMyRequest .request-actions-column {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: .75rem;
	width: 20rem;
}

#boxMyRequest .request-actions {
	display: flex;
	align-items: stretch;
	gap: .375rem;
}

#boxMyRequest .request-action {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 2.625rem;
	padding: 0 .625rem;
	border: 1px solid #d8dee8;
	border-radius: .5rem;
	background: #fff;
	color: #374151;
	font-size: .85rem;
	white-space: nowrap;
	cursor: pointer;
}

#boxMyRequest .request-action:hover {
	border-color: #9ca3af;
	background: #f9fafb;
}

#boxMyRequest .request-action:disabled {
	opacity: .55;
	cursor: wait;
}

#boxMyRequest .request-action .material-symbols-outlined {
	margin-right: .25rem;
	color: #666;
	font-size: 1.25rem;
	font-weight: 300;
}

#boxMyRequest .request-delete {
	color: #b91c1c;
}

#boxMyRequest .request-delete .material-symbols-outlined {
	color: #b91c1c;
}

#boxMyRequest .request-date {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .35rem;
	color: var(--request-text-muted);
	white-space: nowrap;
}

#boxMyRequest .request-date .material-symbols-outlined {
	font-size: 1.1rem;
	font-weight: 300;
}

/* ==============================================
   빈 목록 및 페이징
============================================== */
#boxMyRequest .request-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 12rem;
	padding: 1rem;
	color: var(--request-text-muted);
	text-align: center;
}

#boxMyRequest .request-paging {
	margin-top: 1.5rem;
	text-align: center;
}

#boxMyRequest .request-paging:empty {
	display: none;
}

/* ==============================================
   마이페이지 사이드 메뉴
============================================== */
#boxMyRequest .my-side {
	display: block;
	order: 2;
	margin-top: 1rem;
}

#boxMyRequest .my-side-top,
#boxMyRequest .my-side-bottom {
	display: none;
}

#boxMyRequest .my-side-menu {
	display: grid;
	grid-template-columns: 1fr;
	padding: 1.25rem;
	border-radius: var(--request-radius-xl);
	background: var(--request-box);
	box-shadow: var(--request-shadow);
}

#boxMyRequest .my-side-menu a {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
	align-items: center;
	gap: .75rem;
	min-height: 3.75rem;
	color: var(--request-text);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: -.04em;
}

#boxMyRequest .my-side-menu a::after {
	content: "chevron_right";
	display: block;
	color: var(--request-text-light);
	font-family: "Material Symbols Outlined";
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	text-align: right;
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40;
}

#boxMyRequest .my-side-menu a span {
	display: block;
	color: inherit;
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 1;
}

#boxMyRequest .my-side-menu a.active,
#boxMyRequest .my-side-menu a.active span,
#boxMyRequest .my-side-menu a.active::after {
	color: var(--request-theme-dark);
}

/* ==============================================
   이력 모달
============================================== */
/* ==============================================
   PC 레이아웃
============================================== */
@media (min-width: 769px) {
	#boxMyRequest {
		padding: 2rem 0 3rem;
		background: #f8fafc;
	}

	#boxMyRequest .request-contain {
		padding: 0 1.25rem;
	}

	#boxMyRequest .request-layout {
		display: grid;
		grid-template-columns: 16.25rem minmax(0, 1fr);
		gap: 2rem;
		align-items: start;
	}

	#boxMyRequest .request-content {
		order: 0;
	}

	#boxMyRequest .request-panel {
		padding: 2.5rem;
		border: 1px solid var(--request-border);
		border-radius: var(--request-radius-xl);
	}

	#boxMyRequest .my-side {
		position: sticky;
		top: 1.5rem;
		display: block;
		order: 0;
		margin: 0;
		border: 1px solid var(--request-border);
		border-radius: var(--request-radius-xl);
		background: #fff;
		box-shadow: var(--request-shadow);
		overflow: hidden;
	}

	#boxMyRequest .my-side-top {
		display: block;
		padding: 1.5rem 1.25rem;
		border-bottom: 1px solid var(--request-border);
		text-align: center;
	}

	#boxMyRequest .my-avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4rem;
		height: 4rem;
		margin: 0 auto .75rem;
		border-radius: 50%;
		background: var(--request-theme-soft);
		color: var(--request-theme-dark);
	}

	#boxMyRequest .my-avatar span {
		font-size: 2rem;
	}

	#boxMyRequest .my-name {
		margin: 0 0 .5rem;
		color: var(--request-text-strong);
		font-size: 1.05rem;
		font-weight: 500;
		text-align: center;
		letter-spacing: -.03em;
	}

	#boxMyRequest .my-mode-switch {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: .35rem;
		margin-top: 1rem;
		padding: .25rem;
		border-radius: var(--request-radius-pill);
		background: #f8fafc;
	}

	#boxMyRequest .my-mode-switch a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 2rem;
		border-radius: var(--request-radius-pill);
		color: var(--request-text-muted);
		font-size: .82rem;
		font-weight: 500;
	}

	#boxMyRequest .my-mode-switch a.active {
		background: #fff;
		color: var(--request-theme-dark);
		box-shadow: 0 .125rem .5rem rgba(15, 23, 42, .08);
	}

	#boxMyRequest .my-side-menu {
		display: block;
		padding: .75rem;
		border-radius: 0;
		background: #fff;
		box-shadow: none;
	}

	#boxMyRequest .my-side-menu a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: .625rem;
		min-height: 2.75rem;
		padding: 0 .875rem;
		border-radius: var(--request-radius-md);
		color: var(--request-text-muted);
		font-size: .95rem;
		font-weight: 500;
		letter-spacing: -.03em;
	}

	#boxMyRequest .my-side-menu a::after {
		display: none;
	}

	#boxMyRequest .my-side-menu a + a {
		margin-top: .25rem;
	}

	#boxMyRequest .my-side-menu a span {
		flex: 0 0 auto;
		font-size: 1.25rem;
	}

	#boxMyRequest .my-side-menu a:hover {
		background: #f8fafc;
		color: var(--request-text);
	}

	#boxMyRequest .my-side-menu a.active {
		background: var(--request-theme-soft);
		color: var(--request-theme-dark);
	}

	#boxMyRequest .my-side-bottom {
		display: block;
		padding: 1rem 1.25rem 1.25rem;
		border-top: 1px solid var(--request-border);
	}

	#boxMyRequest .my-side-bottom a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		height: 2.75rem;
		border: 1px solid var(--request-border);
		border-radius: var(--request-radius-md);
		background: #fff;
		color: var(--request-text-muted);
		font-size: .95rem;
		font-weight: 500;
	}
}

/* ==============================================
   좁은 PC 및 태블릿
============================================== */
@media (max-width: 1120px) and (min-width: 769px) {
	#boxMyRequest .request-item {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	#boxMyRequest .request-actions-column {
		width: 100%;
	}
}

@media (max-width: 960px) {
	#boxMyRequest .my-side {
		display: none;
	}

	#boxMyRequest .request-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

/* ==============================================
   모바일 레이아웃
============================================== */
@media (max-width: 768px) {
	#boxMyRequest {
		padding: 0;
		background: var(--request-box);
	}

	#boxMyRequest .request-contain {
		padding: 0;
	}

	#boxMyRequest .request-panel {
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	#boxMyRequest .request-head {
		display: none;
	}

	#boxMyRequest .request-search {
		margin: 0;
		padding: 1rem 0;
		border-bottom: .5rem solid var(--request-bg);
	}

	#boxMyRequest .request-filter-scroll {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: .5rem;
		padding: 0 1rem;
	}

	#boxMyRequest .request-select-wrap {
		flex: 1 1 100%;
		min-width: 0;
	}

	#boxMyRequest .request-filter-select {
		width: 100%;
		min-width: 0;
		height: 2.625rem;
		padding: 0 2.25rem 0 1rem;
		border-radius: var(--request-radius-pill);
	}

	#boxMyRequest .request-keyword {
		flex: 1 1 10rem;
		width: auto;
		min-width: 0;
		border-radius: var(--request-radius-pill) 0 0 var(--request-radius-pill);
	}

	#boxMyRequest .request-filter-scroll .rf-button {
		flex: 0 0 auto;
		border-radius: var(--request-radius-pill);
	}

	#boxMyRequest .request-keyword + .rf-button-primary {
		border-radius: 0 var(--request-radius-pill) var(--request-radius-pill) 0;
	}

	#boxMyRequest .request-list {
		padding: 0;
	}

	#boxMyRequest .request-item {
		display: block;
		padding: 1rem;
	}

	#boxMyRequest .request-item:first-child {
		padding-top: 1rem;
	}

	#boxMyRequest .request-item:last-child {
		padding-bottom: 1rem;
	}

	#boxMyRequest .request-item-head {
		display: block;
		margin-bottom: .625rem;
	}

	#boxMyRequest .request-heading {
		gap: .35rem;
	}

	#boxMyRequest .request-info {
		gap: .3rem;
		margin-bottom: .35rem;
	}

	#boxMyRequest .request-info span::after {
		margin-left: .3rem;
	}

	#boxMyRequest .request-region-badges {
		gap: .3rem;
		margin-top: .45rem;
	}

	#boxMyRequest .request-region-badge {
		padding: .3rem .55rem;
		font-size: .78rem;
	}

	#boxMyRequest .request-actions-column {
		width: 100%;
		margin-top: 1rem;
	}

	#boxMyRequest .request-action {
		height: 2.5rem;
		padding: 0 .4375rem;
		font-size: .8rem;
	}

	#boxMyRequest .request-date {
		justify-content: flex-end;
	}

}

@media (max-width: 420px) {
	#boxMyRequest .request-filter-scroll .request-reset {
		width: 100%;
	}

	#boxMyRequest .request-action .material-symbols-outlined {
		margin-right: .15rem;
		font-size: 1.1rem;
	}
}