@charset "utf-8";

/* =========================================================
   추천매물 게시판 - 공통 토큰
   ========================================================= */
.board .estate-head,
.board .estate-search,
.board .estate-list,
.board .estate-detail {
	--es-text: #222528;
	--es-sub: #6b7178;
	--es-mute: #9aa0a6;
	--es-line: #e6e8eb;
	--es-line-soft: #f1f2f4;
	--es-fill: #f7f8fa;
	--es-point: #0f9d58;
	--es-point-bg: #e7f7ef;
}

/* =========================================================
   목록 상단 제목
   ========================================================= */
.board .estate-head {
	--es-head-gap: 30px;
	margin: 0 0 var(--es-head-gap);
	padding-top: var(--es-head-gap);
}

.board .estate-head.es-align-center {
	text-align: center;
}

.board .estate-head.es-align-left {
	text-align: left;
}

.board .estate-head .estate-head-title {
	margin: 0;
	color: var(--es-text);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
}

.board .estate-head .estate-head-desc {
	margin: 10px 0 0;
	color: var(--es-sub);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: -0.01em;
}

/* =========================================================
   검색 영역
   ========================================================= */
.board .estate-search {
	margin: 0 0 40px;
	padding: 26px 20px;
	border: 1px solid #ebedf0;
	border-radius: 12px;
	background: #fcfcfd;
}

.board .estate-search form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
}

.board .estate-search select {
	height: 42px;
	min-width: 138px;
	padding: 0 32px 0 13px;
	border: 1px solid #d5d8dd;
	border-radius: 7px;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7178' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
	color: var(--es-text);
	font-size: 15px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.board .estate-search select:disabled {
	background-color: #f1f2f4;
	color: var(--es-mute);
	cursor: default;
}

.board .estate-search input[type="text"] {
	height: 42px;
	width: 240px;
	padding: 0 14px;
	border: 1px solid #d5d8dd;
	border-radius: 7px;
	background: #fff;
	color: var(--es-text);
	font-size: 15px;
	line-height: 40px;
}

.board .estate-search input[type="text"]::placeholder {
	color: var(--es-mute);
}

.board .estate-search select:focus,
.board .estate-search input[type="text"]:focus {
	outline: none;
	border-color: #b3b8bd;
}

.board .estate-search .es-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	min-width: 62px;
	padding: 0 16px;
	border: 1px solid #e2e4e8;
	border-radius: 7px;
	background: #f1f2f4;
	color: var(--es-text);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.board .estate-search .es-btn:hover {
	background: #e5e7ea;
	border-color: #d3d6db;
}

.board .estate-search .es-btn-primary {
	background: #f1f2f4;
	border-color: #e2e4e8;
	color: var(--es-text);
}

.board .estate-search .es-btn-primary:hover {
	background: #e5e7ea;
	border-color: #d3d6db;
}

.board .estate-search-info {
	display: flex;
	justify-content: flex-end;
	gap: 16px;
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--es-sub);
}

.board .estate-search-info .count {
	color: var(--es-text);
	font-weight: 600;
}

/* =========================================================
   목록
   ========================================================= */
.board .estate-list {
	margin: 0;
}

.board .estate-list table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.board .estate-list thead th {
	padding: 18px 6px;
	border-top: 1px solid #d5d8dc;
	border-bottom: 1px solid var(--es-line);
	color: var(--es-text);
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
}

.board .estate-list thead th a {
	color: inherit;
}

.board .estate-list thead th a:hover {
	color: var(--es-point);
}

.board .estate-list tbody td {
	padding: 20px 6px;
	border-bottom: 1px solid var(--es-line-soft);
	color: var(--es-sub);
	font-size: 15px;
	text-align: center;
	word-break: keep-all;
}

.board .estate-list tbody tr:hover td {
	background: #fafbfc;
}

/* 행 전체 클릭 */
.board .estate-list tbody tr.es-row[data-href] {
	cursor: pointer;
}

.board .estate-list tbody tr.es-row[data-href]:focus {
	outline: none;
}

.board .estate-list tbody tr.es-row[data-href]:focus-visible td {
	background: #f2f5f9;
	box-shadow: inset 0 0 0 1px #b9c6d8;
}

.board .estate-list tbody tr.es-row[data-href] .col-check {
	cursor: default;
}

.board .estate-list tbody td a {
	color: var(--es-text);
}

.board .estate-list tbody td a:hover {
	text-decoration: underline;
}

.board .estate-list .col-region {
	text-align: center;
}

.board .estate-list .col-money,
.board .estate-list .col-area {
	color: var(--es-text);
}

.board .estate-list .no-data {
	padding: 80px 0;
	color: var(--es-mute);
}

.board .estate-list .no-data td {
	padding: 80px 0;
	color: var(--es-mute);
}

.board .estate-list .is-notice td {
	background: #fbfcfd;
}

.board .estate-list .es-notice {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	background: #eef0f2;
	color: var(--es-sub);
	font-size: 13px;
}

/* 진행유무 배지 */
.board .es-tag {
	display: inline-block;
	min-width: 74px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.board .es-tag-on   { background: var(--es-point-bg); color: var(--es-point); }
.board .es-tag-ing  { background: #fff4e5; color: #c77700; }
.board .es-tag-done { background: #f1f2f4; color: #8a8f98; }
.board .es-tag-etc  { background: #eef2fb; color: #4a68b8; }

/* =========================================================
   본문 (상세) - 클래식 표
   ========================================================= */
.board .estate-detail {
	margin: 0 0 40px;
}

.board .estate-detail .es-title {
	margin: 0 0 18px;
	padding: 0 0 14px;
	border-bottom: 2px solid var(--es-text);
	color: var(--es-text);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.04em;
}

.board .estate-detail .es-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 30px;
}

.board .estate-detail .es-table th,
.board .estate-detail .es-table td {
	padding: 15px 18px;
	border-bottom: 1px solid var(--es-line);
	font-size: 15px;
	text-align: left;
	vertical-align: top;
	word-break: break-word;
}

.board .estate-detail .es-table th {
	width: 150px;
	background: var(--es-fill);
	color: var(--es-sub);
	font-size: 14.5px;
	font-weight: 700;
	white-space: nowrap;
}

.board .estate-detail .es-table td {
	color: var(--es-text);
	line-height: 1.7;
}

.board .estate-detail .es-table td b {
	font-weight: 700;
}

.board .estate-detail .es-table td small {
	color: var(--es-mute);
	font-size: 13px;
}

.board .estate-detail .es-lease span {
	display: inline-block;
}

.board .estate-detail .es-lease i {
	display: inline-block;
	margin: 0 8px;
	color: var(--es-mute);
	font-style: normal;
	font-weight: 400;
}

/* 본문 (에디터 내용 · 이미지) */
.board .estate-detail .es-body {
	margin: 0 0 26px;
	color: var(--es-text);
	font-size: 16px;
	line-height: 1.8;
}

.board .estate-detail .es-body img {
	max-width: 100%;
	height: auto;
}

.board .estate-detail .es-body p {
	margin: 0 0 12px;
}

/* 첨부파일 */
.board .estate-detail .es-files {
	margin: 0 0 26px;
	padding: 14px 18px;
	background: var(--es-fill);
	border-radius: 8px;
}

.board .estate-detail .es-files ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.board .estate-detail .es-files li {
	padding: 3px 0;
	font-size: 14.5px;
}

/* 안내문구 */
.board .estate-detail .es-note {
	margin: 0 0 12px;
	padding: 16px 18px;
	background: #fff6f2;
	border-left: 3px solid #d94b1f;
	color: #c0421a;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.7;
}

.board .estate-detail .es-tel {
	margin: 0;
	padding: 0 4px;
	color: var(--es-text);
	font-size: 15px;
	font-weight: 600;
}

.board .estate-detail .es-tel b {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.02em;
}

/* =========================================================
   글쓰기 - 지역 선택
   ========================================================= */
.board .estate-cate-picker,
.board .estate-region-picker,
.board .estate-title-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.board .estate-region-picker,
.board .estate-title-picker {
	margin: 0 0 10px;
}

.board .estate-cate-picker select,
.board .estate-region-picker select,
.board .estate-title-picker select {
	min-width: 200px;
	height: 46px;
}

.board .estate-region-picker .es-picker-label,
.board .estate-title-picker .es-picker-label {
	min-width: 120px;
	color: var(--es-text);
	font-size: 15px;
	font-weight: 600;
}

.board .estate-region-picker .es-picker-label em,
.board .estate-title-picker .es-picker-label em {
	color: #e0483a;
	font-style: normal;
}

@media (max-width: 768px) {
	.board .estate-region-picker .es-picker-label,
.board .estate-title-picker .es-picker-label { min-width: 0; flex: 1 1 100%; }
	.board .estate-region-picker select { flex: 1 1 calc(50% - 4px); min-width: 0; }
}

/* =========================================================
   반응형
   ========================================================= */
@media (max-width: 1024px) {
	.board .estate-list table { table-layout: auto; }
	.board .estate-list thead th,
	.board .estate-list tbody td { padding: 16px 4px; font-size: 14px; }
	.board .es-tag { min-width: 0; padding: 5px 10px; font-size: 12px; }
}

@media (max-width: 768px) {
	.board .estate-head .estate-head-title { font-size: 22px; }
	.board .estate-head .estate-head-desc { margin-top: 6px; font-size: 14px; }
	.board .estate-search { padding: 16px 14px; }
	.board .estate-search form { justify-content: stretch; }
	.board .estate-search select,
	.board .estate-search input[type="text"] { width: 100%; min-width: 0; flex: 1 1 100%; }
	.board .estate-search .es-btn { flex: 1 1 calc(50% - 4px); }

	.board .estate-list table,
	.board .estate-list thead,
	.board .estate-list tbody,
	.board .estate-list tr,
	.board .estate-list td { display: block; width: 100%; }

	.board .estate-list thead { display: none; }

	.board .estate-list tbody tr {
		position: relative;
		margin: 0 0 12px;
		padding: 16px 14px 8px;
		border: 1px solid var(--es-line);
		border-radius: 10px;
	}

	.board .estate-list tbody tr.es-row[data-href]:active {
		background: #f7f8fa;
	}

	.board .estate-list tbody tr:hover td { background: none; }

	.board .estate-list tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 7px 0;
		border-bottom: 0;
		text-align: right;
	}

	.board .estate-list tbody td:before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: var(--es-mute);
		font-size: 13px;
		text-align: left;
	}

	.board .estate-list tbody td.col-code {
		padding: 0 0 10px;
		border-bottom: 1px solid var(--es-line-soft);
		margin: 0 0 6px;
	}

	.board .estate-list tbody td.col-code:before { content: "매물번호"; }

	.board .estate-list tbody td.col-code a {
		font-size: 16px;
		font-weight: 700;
	}

	.board .estate-list tbody td.col-region a { font-weight: 600; }

	.board .estate-list .no-data td { display: block; text-align: center; }
	.board .estate-list .no-data td:before { content: ""; }

	.board .estate-detail .es-title { font-size: 19px; }
	.board .estate-detail .es-table,
	.board .estate-detail .es-table tbody,
	.board .estate-detail .es-table tr { display: block; width: 100%; }
	.board .estate-detail .es-table th,
	.board .estate-detail .es-table td { display: block; width: 100%; }
	.board .estate-detail .es-table th {
		padding: 10px 14px;
		border-bottom: 0;
		border-radius: 6px 6px 0 0;
		font-size: 13.5px;
	}
	.board .estate-detail .es-table td { padding: 12px 14px; font-size: 14.5px; }
	.board .estate-detail .es-lease i { display: none; }
	.board .estate-detail .es-lease span { display: block; padding: 2px 0; }
}

/* =========================================================
   글쓰기 - 확장변수 입력칸 (형식 무관 공통)
   기존 스킨은 .text / .date 처럼 형식별 클래스로만 너비를 잡아서
   숫자·기타 형식이 찌그러진다. 형식과 무관하게 맞춰준다.
   ========================================================= */
.board .exForm ul.exFormF li .td > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.board .exForm ul.exFormF li .td > select,
.board .exForm ul.exFormF li .td > textarea {
	width: 100%;
	margin: 0;
	padding: 5px 12px;
	border: 1px solid #dbdbdb;
	border-radius: 5px;
	background: #fff;
	color: var(--es-text);
	font-size: 16px;
	vertical-align: top;
	box-sizing: border-box;
}

.board .exForm ul.exFormF li .td > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.board .exForm ul.exFormF li .td > select {
	height: 46px;
	line-height: 44px;
}

.board .exForm ul.exFormF li .td > textarea {
	min-height: 160px;
	padding: 12px;
	line-height: 1.7;
}

/* 숫자 형식 스피너 제거 (콤마 표기와 어울리지 않음) */
.board .exForm input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}
.board .exForm input[type="number"]::-webkit-outer-spin-button,
.board .exForm input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* 전화번호처럼 여러 칸으로 쪼개지는 형식은 예외 */
.board .exForm ul.exFormF li .td > input.tel {
	width: calc(33% - 4px);
}

/* 라디오 / 체크박스 줄바꿈 여유 */
.board .exForm ul.exFormF li .td > input[type="radio"],
.board .exForm ul.exFormF li .td > input[type="checkbox"] {
	margin: 0 4px 0 0;
	vertical-align: middle;
}
.board .exForm ul.exFormF li .td > label {
	margin: 0 14px 0 0;
	font-size: 15px;
	vertical-align: middle;
}