.container {
    display: flex;
    max-width: 1200px;
    gap: 20px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 100px;
    justify-content: center;
    align-items: flex-start;
}

.container3 {
    display: flex;
    flex-direction: column;
    align-items: center; /* 가로 가운데 정렬 */
    padding: 20px;
    box-sizing: border-box;
	flex-wrap: wrap;
}


.row {
    display: flex;
    flex-wrap: wrap; /* 줄바꿈 허용 */
    justify-content: flex-start; /* 왼쪽 정렬 */
    gap: 10px 10px; /* 각 div 간격 */
    padding: 20px;
    box-sizing: border-box;
	width: 1000px;
	
        }

.write-button {
    text-align: right;
    margin-bottom: 20px;
    position: sticky; /* 고정 위치 */
    top: 0; /* 페이지 상단에 고정 */
    z-index: 1000; /* 다른 요소 위에 표시 */
}

.write-button button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.main-box {flex: 1 1 calc(33.33% - 20px);
    display: flex;
    min-width: 400px; 
	max-width: 430px;
    justify-content: center; 
    margin-bottom: 20px;
	margin-top: 20px;
    background: #f4f7fa;
	border: 1px solid #e3e6ea;
	padding: 20px;
	border-radius: 10px;
	height: auto;
}


.left-box {
    flex: 0 0 170px;
    height: 230px;
	
}

.left-box img {
    width: 170px;
    height: 230px;
	object-fit: cover; 
    object-position: center; 
    display: block;
	border: 1px solid #ddd; 
}

.right-box {
	flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content:center;
    padding: 0px;
    height: auto; 
}

.sub-box {
    flex: 1;
    margin: 5px 0;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 20px;
	line-height: 1.5;
}

/* 각 서브박스 고유 스타일 */
.sub-box-1 a {
    font-size: 20px;
    font-weight: bold;
    color:#7d94ad;
	text-decoration: none;
	margin-top:-10px;
	transition: all 0.3s ease;
	line-height: 1.5;
}

.sub-box-1 a:hover {
    font-size: 20px;
    font-weight: bold;
    color:#5d7997;
	text-decoration: none;
}

.sub-box-2 {margin-top: -5px;
    font-size: 15px;
    color:#787878;
}

.mylover {font-weight: bold;}

.sub-box-3 {
    font-size: 12px;
    color:#787878;
	margin-top: -5px;
}

.rating-stars {
    font-size: 14px; 
    color: #dc3232; 
    margin-right: 5px; 
	line-height: 1;
}

.rating-number {
    font-size: 13px; /* 숫자 크기 */
    color: #555; /* 숫자 색상 */
    font-weight: bold;
	line-height: 1;
}

.sub-box-4 {
    font-size: 12px;
    color:#acc9e5;
	font-weight: 700;
	display: flex; /* 키워드를 가로로 나열 */
    flex-wrap: wrap;
	gap: 3px;
	row-gap: 10px;
}

.sub-box-5 {
    font-size: 15px;
    color: #555;
    font-weight: bold;
	margin-top: -10px;
}


.keyword-badge {
    display: inline-block; /* 키워드를 박스처럼 보이게 */
    background-color: #f0f0f0; /* 배경색 */
    color: #515151; /* 텍스트 색상 */
    padding: 5px 8px; /* 내부 여백 */
    margin: 0 5px; /* 키워드 간 간격 */
    border-radius: 7px; /* 모서리를 둥글게 */
    font-size: 10px; /* 텍스트 크기 */
    font-weight: bold; /* 텍스트 굵기 */
    text-decoration: none; /* 텍스트 밑줄 제거 */
    cursor: pointer; /* 클릭 가능한 버튼처럼 커서 변경 */
}

.keyword-badge.highlight {
    background-color: #81aad3; /* 강조 키워드는 금색 배경 */
    color: #fff;
}


.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.grid-item {
    position: relative;
    border: 1px solid #ccc;
    overflow: hidden;
    text-align: center;
    background: #f9f9f9;
}

.grid-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
	image-rendering: auto;
}

.hover-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.grid-item:hover .hover-title {
    opacity: 1;
}


	  :root {
      --right-group-gap: 10px; /* 박스 간 간격 조절 변수 */
    }  
	  

    .group-wrapper {
      display: flex;
      width: 100%;
      gap: 10px;
    }

    .left-group, .right-group {
      display: flex;
      flex-direction: column;
    }

    .left-group {
      flex: 1;
      gap: 10px;
    }
	  
    .right-group {
      flex: 2;
      gap: var(--right-group-gap);
    }
	  
	  
    .bottom-group {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 10px;
    }
	  
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
	  
    .box1 {
		width: 200px;
		height: 280px; 
		font-size: 20px; /* 텍스트 크기 */
	  }

    .box1 img {
		width: 200px;
 	    height: 280px;
		object-fit: cover; 
        object-position: center; 
        display: block;
		border: 1px solid #ddd;
		image-rendering: auto;
	  }

img {
    width: auto; /* 기본 설정 */
    max-height: 100%;
	image-rendering: auto;
}

    /* .box2 스타일 */
.box2 {
  display: flex; /* 버튼 중앙 정렬 */
  justify-content: center; /* 가로 방향 중앙 정렬 */
  align-items: center; /* 세로 방향 중앙 정렬 */
  height: 50px; /* 높이 지정 */
  background-color: #f9f9f9; /* 배경색 */
  border: 1px solid #ddd; /* 경계선 */
  border-radius: 7px; /* 모서리 둥글게 */
}

/* 버튼 스타일 */
.link-button {
  display: inline-block; 
  padding: 10px 20px; 
  font-size: 16px; 
  font-weight: bold; 
  text-align: center; 
  text-decoration: none; 
  color: #494949; 
  transition: all 0.3s ease; 
}

/* 버튼 호버 효과 */
.link-button:hover {
  color: #b5cdeb; 
}

    .box3 { 
		display: flex;
 		justify-content: flex-start; /* 가로 방향으로 왼쪽 정렬 */
  		align-items: center; /* 세로 방향으로 가운데 정렬 */
		padding-left: 10px; /* 텍스트와 왼쪽 경계 간 여백 추가 */
 		font-size: 20px; 
		height: 50px;
		color: #7d94ad;
		margin-top: 10px;
	  }
	  
    .box4 { 
		display: flex;
 		justify-content: flex-start; 
  		align-items: center; 
		padding-left: 10px; 
 		font-size: 15px; 
		color: #787878;
		margin-top:14px;
	  }

    .box10 { 
		display: flex;
 		justify-content: flex-start; 
  		align-items: center; 
		padding-left: 10px; 
 		font-size:15px; 
		color: #787878;
		font-weight: 700;
		margin-top:-14px;
	  }

	  
    .box5 { 
		display: flex;
 		justify-content: flex-start; 
  		align-items: left; 
		padding-left: 10px; 
 		font-size: 15px; 
		height: 40px;
		color: #dc3232;
		margin-top:-20px;
	  }
	  
    .box6 {padding-left: 10px;
	font-size: 14px;
    color:#acc9e5;
	font-weight: bold;
	display: flex; /* 키워드를 가로로 나열 */
    flex-wrap: wrap;
	gap: 3px;
	row-gap: 10px;
	justify-content: flex-start;
	align-items: flex-start;
	  }
	  

    .box7 { 
		height: 40px; 
	  }
	  
    .box8 { 
		display: flex; /* 버튼 중앙 정렬 */
		justify-content: center; /* 가로 방향 중앙 정렬 */
	    align-items: center; /* 세로 방향 중앙 정렬 */
 	    height: auto; /* 높이 지정 */
		border-top: 1px solid #e6e6e6; /* 경계선 */
		border-bottom: 1px solid #e6e6e6; /* 경계선 */
	  }

	.content {
      display: flex; /* 플렉스 컨테이너 설정 */
      gap: 0px; 
      width: 100%;
      margin: 0 auto;
    }

    .bbb {
      flex: 1; 
      padding: 20px;
      text-align: center;
      font-size: 16px;
	  box-sizing: border-box;
		
    }
    .boxx1 {
     background-color: #fafafa; 
  color: #7B7B7B;
  width: 120px; /* 고정 너비 설정 */
  flex: 0 0 170px; /* 플렉스: 고정 너비로 설정 */
  border-right: 1px solid #e6e6e6; /* 경계선 */
  display: flex; /* 플렉스 컨테이너 설정 */
  justify-content: center; /* 가로 방향 중앙 정렬 */
  align-items: center; /* 세로 방향 중앙 정렬 */
  text-align: center; /* 텍스트 가운데 정렬 */
  box-sizing: border-box; /* 테두리와 패딩 포함 */
		      font-weight: bold;
    }


    .boxx2 {
      background-color: #fff; /* 박스 2 전용 색상 */
      color: #858585; /* 박스 2 텍스트 색상 */
	  flex: 1; 
    }
	  
    .box9 a { 
		display: flex; /* 버튼 중앙 정렬 */
		justify-content: center; /* 가로 방향 중앙 정렬 */
	    align-items: center; /* 세로 방향 중앙 정렬 */
 	    height: auto; /* 높이 지정 */
 		background-color: #f9f9f9; /* 배경색 */
		border: 1px solid #ddd; /* 경계선 */
		border-radius: 7px; /* 모서리 둥글게 */
		padding:10px;
		color:#7E7E7E;
		text-decoration: none;
		transition: all 0.3s ease; 
		font-size: 12px;
	  }

    .box9 a:hover { 
 		background-color: #bcd2ed; /* 배경색 */
		color:#fff; 
		border: 1px solid #acc9e5; /* 경계선 */
		font-weight: 700;
	  }

    .containerss {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 600px;
      gap: 10px;
	  background-color: #fff;
	  border: 1px solid #F2F2F2;
	  padding: 40px;
	  position: relative;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 
	  border-radius: 10px 10px 0 0;
		margin-bottom: 100px;
	
    }

.containerss::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 20px;
    background: repeating-linear-gradient(
        90deg,
        white 0px,
        white 10px,
        #E9EEF4 10px,
        #E9EEF4 20px
    );
    clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}


/* 카테고리1 스타일 */
.category1 {color: #9E9E9E;
	padding: 10px 10px 10px 0;
}

/* 카테고리2 스타일 */
.category2 {font-size: 9px;
	font-weight: 700;
	color: #fff;
    background-color: #ABABAB; 
	padding: 3px 5px;
	border-radius: 5px;
}


footer p {
    pointer-events: none; /* 푸터의 클릭 이벤트 비활성화 */
}


.box.box11 {
    margin-top: 3px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
	text-align: left;
}

.worktitle {
	display: block;
	text-align: left;
	color: #9A9A9A;
	font-size: 16px; 
	font-weight: 700;
}

.extra-content-wrapper {
    position: relative;
    max-height: 100px; /* 초기 높이 제한 */
    overflow: hidden; /* 넘치는 내용 숨기기 */
    width: 100%;
    transition: max-height 0.6s ease; /* 부드러운 전환 효과 */
	font-size: 14px;
	color: #4E4E4E;
}

.extra-content-wrapper.expanded {
    max-height: 3000px; /* 충분히 큰 값으로 설정 */
}

.fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px; /* 흐림 영역 높이 */
    background: linear-gradient(to bottom, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 1) 100%);
    pointer-events: none; /* 클릭 방지 */
    opacity: 1;
    transition: opacity 0.6s ease; /* 부드러운 흐림 효과 */
}

.fade-overlay.hidden {
    opacity: 0; /* 흐림 효과 제거 */
}

.read-more-btn {
	margin-top:8px;
    padding: 8px 200px;
    background-color: #fff;
    color: #7c7e7f;
    border: 1px solid #cccccb;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.6s ease; /* 버튼 색상 전환 */
}

.read-more-btn:hover {
    background-color: #fff;
}

.custom-icon {
    color: blue;
    font-size: 24px;
}



/* 페이지네이션 감싸는 영역 */
.pagination-wrapper {
	width: 100%;
    display: flex;
    justify-content: center; /* 가운데 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    margin-top: 20px; /* 위쪽 여백 */
	font-family: roboto;
	color: #a1c1e5;
}

/* 페이지네이션 스타일 */
.pagination {
    display: flex;
    gap: 10px; /* 버튼 간격 */
    padding: 10px 20px;
	color: #a1c1e5;
	list-style: none;
}

/* 페이지 링크 스타일 */
.pagination a {
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
    color: #a1c1e5;
    border: 1px solid #e9eef4;
    background-color: white;
    transition: background-color 0.3s, color 0.3s;
}

.pagination a:hover {
    background-color: #a1c1e5;
    color: white;
	font-weight: 700;
}

/* 현재 페이지 스타일 */
.pagination .current {
    display: inline-block;
    padding: 8px 16px;
    background-color: #333;
    color: white;
    border-radius: 4px;
    font-weight: bold;
}
		
		.pagination a, .pagination .current {
    font-size: 12px; /* 원하는 크기로 변경 */
}
	

.pagination ul {
    display: flex; /* 가로 정렬 */
    justify-content: center; /* 가운데 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    list-style: none; /* 점 제거 */
    padding: 0; /* 기본 패딩 제거 */
    margin: 0; /* 기본 마진 제거 */
	gap:10px;
}

/* 모바일 최적화 */
@media screen and (max-width: 768px) {
	
	.container {width: 100%}

	
	    .container3 {
        width: 100%;
		margin-top:30px;
    }

	
	.row {
		display: flex;
        align-items: center; /* 중앙 정렬 */
        gap: 10px; /* 각 박스 간격 */
        width: 100%; /* 화면 너비에 맞춤 */
		 margin: 0 auto;
        }
	
    .main-box {
        max-width:100%;
		min-width: 95%;
        margin: 0 auto;
		
    }
	
	.left-box {
    flex: 1;
    max-width: 120px;
	
}

.left-box img {
    width: 100%; /* 부모 요소의 크기에 맞게 조정 */
        height: auto; /* 비율에 맞춰 높이 조정 */
}

    .container {
        gap: 10px; /* 간격 축소 */
    }


    .sub-box {
        font-size: 12px;
    }

    .read-more-btn {
        font-size: 12px;
        padding: 6px 15px;
    }

}

@media screen and (max-width: 480px) {
	
	.container {width: 100%}
	    .container3 {margin-top: 80px;
        width: 100%;
    }

	
	.row {
		display: flex;
        gap: 10px; /* 각 박스 간격 */
        width: 100%; /* 화면 너비에 맞춤 */
        margin: 0 auto;
        }
	
    .main-box {
        max-width: 80%; 
        margin: 0 auto;
	min-width: 60%
    }
	
	    .boxx1 {
  width: 90px; /* 고정 너비 설정 */
  flex: 0 0 90px; /* 플렉스: 고정 너비로 설정 */
    }

    .box3 {
 		font-size: 15px; 
		line-height: 1.2;
	  }
	
	
	.box1 {
		width: 120px;
		height: 200px; 
	  }

    .box1 img {
		width: 120px;
		height: 200px; 
	  }
	
.box2 {margin-top:-15px;
}


    .sub-box {
        font-size: 12px;
    }

    .read-more-btn {
        font-size: 12px;
        padding: 6px 15px;
    }

}