:root {
	--default: #111;
	--accent: #1a5bd6;
}

a {
	text-decoration: none;
	color: #111;
}

/* slider */
.slider {
	position: relative;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 18px 0;
	margin-bottom: 26px
}

.thumbs {
	display: flex;
	gap: 12px;
	overflow: hidden;
	margin: 0 60px
}

.thumbs img {
	width: 150px;
	/* height: 80px; */
	object-fit: cover;
	border-radius: 4px
}

.slider .nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer
}

.slider .nav.prev {
	left: 6px
}

.slider .nav.next {
	right: 6px
}


.thumbs.swiper {
    display: block;   /* 기존 flex 해제 (Swiper가 제어) */
	width: 82%;
}

.thumbs .swiper-wrapper {
    display: flex;    /* Swiper 슬라이드 정렬 */
}

.thumbs .swiper-slide {
    flex-shrink: 0;   /* 슬라이드 줄어들지 않게 */
    width: auto;      /* 이미지 기준으로 폭 자동 */
}

/* 이미지 크기 유지 */
.thumbs .swiper-slide img {
    width: 80px;
    object-fit: cover;
    border-radius: 4px;
}

/* 버튼이 슬라이드 위로 올라오도록 */
.slider .nav {
    z-index: 20;
}


/* content area */
.content {
	display: block;
	margin-top: 22px;
}

.center {
	flex: 1
}

/* 인기글 */

.popular {
	/* background: #fafafa; */
	padding: 12px;
	border-radius: 4px;
}

.popular .popular-col p,
.popular .popular-col div{
	margin: 5px 0;
}
.popular .popular-col p a,
.popular .popular-col div a{
	font-size: 14px;
}

/* 탭 영역 */
.tab-wrap {
	width: 100%;
}

.tab-menu {
	display: flex;
	border-bottom: 1px solid #eee;
	margin-bottom: 6px;
	font-size: 20px;
}

.tab-menu div {
	padding: 10px 18px;
	cursor: pointer;
	font-weight: 600;
	color: var(--default);
}

.tab-menu .active {
	color: var(--accent);
	border-bottom: 2px solid var(--accent);
}



/* 게시글 영역 */
.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

.popular-item {
	display: flex;
	gap: 10px;
	border-bottom: 1px dashed #eee;
	padding: 10px 6px
}

.popular-item:last-child {
	border-bottom: none
}

/* 베스트글 (center top) */
.best-wrap {
	background: #fff;
	padding: 18px 0 0;
	border-bottom: 1px solid #f0f0f0;
}

.best-title {
	color: var(--accent);
	font-weight: 800;
	font-size: 20px;
	margin-bottom: 8px
}

.best-note {
	font-size: 13px;
	color: #333;
	margin-bottom: 10px
}

/* list (center) */
.post-list {
	list-style: none;
	margin: 0;
	padding: 0
}

.post-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 0;
	border-bottom: 1px solid #f0f0f0;
}

.post-item a.title {
	flex: 1;
	color: #111;
	text-decoration: none;
	font-size: 16px;
}

.post-count {
	color: #e74c3c;
	margin-left: 8px;
	font-weight: 700
}

.post-thumb {
	width: 80px;
	height: 60px;
	margin-left: 18px;
	flex-shrink: 0
}

.post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px
}

/* right sidebar */
.side-box {
	padding: 0 12px;
	margin-bottom: 20px;
}

.side-box h4 {

	color: var(--accent);
	font-weight: 800;
	font-size: 20px;
	margin-bottom: 8px;
	border-bottom: 1px solid #f0f0f0;
}

.side-list {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
}


/* pagination */
.pagination {
	display: flex;
	gap: 6px;
	justify-content: center;
	padding: 26px 0
}

.pagination button {
	border: 1px solid #ddd;
	background: #fff;
	padding: 8px 12px;
	border-radius: 4px;
	cursor: pointer
}

.pagination .active {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent)
}


@media (max-width:768px) {


	.wrap {
		width: 100%;
		margin: 0 auto;
		padding: 0 10px;
	}

	/* slider */
	.slider {
		position: relative;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		padding: 8px 0;
		margin-bottom: 12px
	}

	.thumbs {
		display: flex;
		gap: 6px;
		overflow: hidden;
		margin: 0 30px;
	}

	.thumbs img {
		width: 66px;
		object-fit: cover;
		border-radius: 4px
	}

	.slider .nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: #fff;
		border: 1px solid #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer
	}

	.slider .nav.prev {
		left: 0
	}

	.slider .nav.next {
		right: 0
	}

	/* content area */
	.content {
		display: block;
		margin-top: 16px
	}

	/* 인기글 */	
	.tab-menu {
		margin-bottom: 3px;
		font-size: 14px;
	}

	.tab-menu div {
		padding: 5px 10px;
	}

	.popular {
		padding: 2px 3px;
	}

	.popular .popular-col p,
	.popular .popular-col div{
		margin: 5px 0;
	}

	.popular .popular-col p a,
	.popular .popular-col div a{
		font-size: 14px;
	}


	.popular-item {
		display: flex;
		gap: 10px;
		border-bottom: 1px dashed #eee;
		padding: 10px 6px
	}

	.popular-item:last-child {
		border-bottom: none
	}

	/* 베스트글 (center top) */
	.best-wrap {
		background: #fff;
		padding: 18px 0 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.best-title {
		color: var(--accent);
		font-weight: 800;
		font-size: 14px;
		margin-bottom: 6px
	}

	.post-list {
		list-style: none;
		margin: 0;
		padding: 0
	}

	.post-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.post-item a.title {
		flex: 1;
		color: #111;
		text-decoration: none;
		font-size: 14px;
	}

	.post-count {
		color: #e74c3c;
		margin-left: 4px;
		font-weight: 700;
	}

	.post-thumb {
		width: 60px;
		height: 60px;
		flex-shrink: 0;
	}

	.post-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 6px
	}

	/* pagination */
	.pagination {
		display: flex;
		gap: 4px;
		justify-content: center;
		padding: 26px 0;
	}

	.pagination button {
		border: 1px solid #ddd;
		background: #fff;
		padding: 6px 8px;
		border-radius: 4px;
		cursor: pointer;
		font-size: 10px;
	}

	.pagination .active {
		background: var(--accent);
		color: #fff;
		border-color: var(--accent)
	}
}