@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* ===================================
   단원 홈(mid: UserHome) 전용 스타일
   - 레이아웃 header_script에서 단원 홈일 때 <html>에 .mid-UserHome 클래스를 붙이고 이 파일을 불러옴
   - 모든 규칙은 .mid-UserHome 안에서만 적용 (다른 페이지의 같은 위젯에는 영향 없음)
   - 대상: 게시판 최근글 위젯(simple_rectangle 스킨)
   - 디자인: etc_pages/weekly_schedule(이번 주 일정) 카드와 같은 컨셉
     (톤다운한 남회색 제목 줄 + 오른쪽 링크, 연한 회색 내용 영역, 옅은 구분선)
   =================================== */

.mid-UserHome {
	/* 제목 줄: 톤다운한 남회색 + 연한 금색 */
	--uh-head-bg: #4a5668;
	--uh-head-text: #e3cf9f;
	--uh-head-muted: rgba(255, 255, 255, 0.6);
	/* 내용: 아주 연한 회색 바탕 + 진회색 글씨 */
	--uh-body-bg: #f7f8fa;
	--uh-body-text: #3d4756;
	--uh-body-muted: #8c95a3;
	--uh-body-line: #e7e9ed;
	--uh-accent: #b8975a;
}


/* 위젯 박스(카드) */
.mid-UserHome div.simple_content {
	padding: 0;
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 0.95rem;
	text-align: left;
}
.mid-UserHome section.simple_content {
	overflow: hidden;
	background: var(--uh-body-bg);
	border: 1px solid var(--uh-body-line);
	border-radius: 8px;
	box-shadow: none;
	color: var(--uh-body-text);
}


/* 제목 줄 (게시판 하나짜리 위젯): 금색 제목 + 오른쪽 "전체 보기 →" */
.mid-UserHome .simple_content h1.misolTop {
	margin: 0;
	border-bottom: 0;
	background: var(--uh-head-bg);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
}
.mid-UserHome .simple_content h1.misolTop .misol_top_a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 44px;
	padding: 0 16px;
	box-sizing: border-box;
	color: var(--uh-head-text);
	white-space: nowrap;
}
.mid-UserHome .simple_content h1.misolTop .misol_top_a::after {
	content: '전체 보기 \2192';
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--uh-head-muted);
}
.mid-UserHome .simple_content h1.misolTop .misol_top_a:hover::after {
	color: var(--uh-head-text);
}


/* 탭 줄 (여러 게시판을 묶은 위젯): 선택된 탭은 금색, 나머지는 흐린 흰색 */
.mid-UserHome .simple_content div.misolTab {
	height: auto;
	border-bottom: 0;
	background: var(--uh-head-bg);
}
.mid-UserHome .simple_content ul.simple_contentTabA {
	display: flex;
	gap: 4px;
	padding: 0 8px;
	overflow-x: auto;
	scrollbar-width: none;
}
.mid-UserHome .simple_content ul.simple_contentTabA::-webkit-scrollbar {
	display: none;
}
.mid-UserHome .simple_content ul.simple_contentTabA > li {
	flex-shrink: 0;
	height: auto;
}
.mid-UserHome .simple_content ul.simple_contentTabA > li a {
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 8px;
	box-sizing: border-box;
	border-bottom: 2px solid transparent;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--uh-head-muted);
}
.mid-UserHome .simple_content ul.simple_contentTabA > li a span {
	padding: 0;
	border-left: 0;
}
.mid-UserHome .simple_content ul.simple_contentTabA > li a:hover {
	color: #fff;
}
.mid-UserHome .simple_content ul.simple_contentTabA > li.active a {
	color: var(--uh-head-text);
	font-weight: 700;
	border-bottom-color: var(--uh-head-text);
}


/* 글 목록: 일정 목록과 같은 간격/구분선 */
.mid-UserHome .simple_content ul.simple_content_list {
	padding: 4px 16px 8px;
}
.mid-UserHome .simple_content .simple_content_list li {
	border-top: 1px solid var(--uh-body-line);
}
.mid-UserHome .simple_content .simple_content_list li:first-child {
	border-top: 0;
}
.mid-UserHome .simple_content .simple_content_list .cont_a {
	display: block;
	padding: 8px 0;
	color: var(--uh-body-text);
	letter-spacing: 0;
	line-height: 1.5;
}
.mid-UserHome .simple_content .simple_content_list .cont_a:hover {
	color: var(--uh-accent);
}
.mid-UserHome .simple_content .content_basic {
	display: flex;
	align-items: baseline;
	gap: 12px;
	width: 100%;
	min-width: 0;
}
.mid-UserHome .simple_content .content_title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mid-UserHome .simple_content .content_category {
	margin: 0 6px 0 0;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--uh-accent);
}
.mid-UserHome .simple_content .content_nickname {
	flex-shrink: 0;
	margin: 0 0 0 auto;
	font-size: 0.85rem;
	color: var(--uh-body-muted);
}

/* 글이 없는 게시판 */
.mid-UserHome .simple_content ul.simple_content_list:not(:has(li))::after {
	content: '등록된 글이 없습니다.';
	display: block;
	padding: 8px 0;
	color: var(--uh-body-muted);
}

/* 더보기 버튼 */
.mid-UserHome .simple_content .simple_content_nav {
	border-top: 1px solid var(--uh-body-line);
	color: var(--uh-body-muted);
}
.mid-UserHome .simple_content .simple_content_nav button:hover {
	color: var(--uh-accent);
}


/* 탭 이름: 선택된 탭은 원래 이름, 선택 안 된 탭은 공통 앞뒤를 뺀 짧은 이름 (모바일은 아래에서 한 글자 동그라미)
   (.uh-tab-* 요소는 etc_pages/js/userhome.js가 만들어 줌) */
.mid-UserHome .uh-tab-short,
.mid-UserHome .uh-tab-orig,
.mid-UserHome .simple_content ul.simple_contentTabA > li.active .uh-tab-full {
	display: none;
}
.mid-UserHome .simple_content ul.simple_contentTabA > li.active .uh-tab-orig {
	display: inline;
}

@media all and (max-width: 767px) {
	.mid-UserHome .simple_content ul.simple_contentTabA {
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		padding: 8px 12px;
		overflow: visible;
	}
	.mid-UserHome .simple_content ul.simple_contentTabA > li {
		flex-shrink: 0;
	}
	.mid-UserHome .simple_content ul.simple_contentTabA > li a {
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		font-size: 0.85rem;
		line-height: 1;
	}
	.mid-UserHome .simple_content ul.simple_contentTabA > li:not(.active) a {
		overflow: hidden;
		white-space: nowrap;
	}
	/* userhome.js가 아직 실행되지 않았거나 불러오지 못한 경우: CSS만으로 첫 글자만 보이게 */
	.mid-UserHome .simple_content ul.simple_contentTabA > li:not(.active) a > span:not(:has(.uh-tab-short)) {
		display: block;
		font-size: 0;
	}
	.mid-UserHome .simple_content ul.simple_contentTabA > li:not(.active) a > span:not(:has(.uh-tab-short))::first-letter {
		font-size: 0.85rem;
	}
	.mid-UserHome .simple_content ul.simple_contentTabA > li.active a > span:not(:has(.uh-tab-short)) {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.mid-UserHome .uh-tab-full {
		display: none;
	}
	.mid-UserHome .uh-tab-short {
		display: inline;
	}

	/* 선택된 탭: 이름이 보이는 알약 모양, 길면 말줄임 */
	.mid-UserHome .simple_content ul.simple_contentTabA > li.active {
		flex-shrink: 1;
		min-width: 0;
		max-width: 100%;
	}
	.mid-UserHome .simple_content ul.simple_contentTabA > li.active a {
		width: auto;
		max-width: 100%;
		padding: 0 14px;
		box-sizing: border-box;
		border-radius: 999px;
		background: var(--uh-head-text);
		border-color: var(--uh-head-text);
		color: var(--uh-head-bg);
	}
	.mid-UserHome .simple_content ul.simple_contentTabA > li.active a > span {
		min-width: 0;
		overflow: hidden;
	}
	.mid-UserHome .simple_content ul.simple_contentTabA > li.active .uh-tab-short {
		display: none;
	}
	.mid-UserHome .simple_content ul.simple_contentTabA > li.active .uh-tab-orig {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}