@charset "UTF-8";

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

body.modal-open {
  overflow: hidden;
}

* { box-sizing: border-box; } 



#container {
  width: 100%;
  min-width: 360px;
}

html, body {
	width: 100%;
	height: 100%;
	min-width: 360px;
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

header {
	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-weight: 300;
	font-size: 18px;
	/*text-shadow: 
		  -2px -2px 0 #A9BCF5,  
		   2px -2px 0 #A9BCF5,  
		  -2px  2px 0 #A9BCF5,  
		   2px  2px 0 #A9BCF5;*/
}

body {
	color: #000000;
	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-size: 18px;
}

button {
	cursor: pointer;
}
h2{
	font-size: 16px;
}
ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.text-center{
	text-align: center !important;
}

ul.pagination {
	display: flex;
	list-style: none;
	display: flex;
	justify-content: center;
}

.pagination li {
	display: inline-block;
	margin-right: 4px;
}

.pagination li a{
	padding: 5px 9px;
	border-radius: 6px;
}
#pagination{
	padding-top: 40px;
}
.pagination > li > .selected_btn{
	color: #0F2D4A;
    border-color: #0F2D4A;
    font-weight: bold;
    background-color: #fff;
    border: none;
    font-size: 1rem;
}
.pagination > li > .default_btn{
	border: none;
	font-size: 1rem;
	font-weight: normal;
	color: #666;
}
.favoriteSpan{
	font-size: 20px;
}
span{
	font-size: 15px;
}
.page-header {
    text-align: left;
    margin-bottom: 40px;
}
.page-title {
    font-size: 24px;
    font-weight: 600;
}

/* 고정 버튼 스타일 */
.scroll-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.wrap {
	max-width: 100%;
	margin: 0 auto;
}

#content{
	min-height: 500px;
    margin: 0 auto;	
}
a:hover {
	text-decoration: none;
}

a {
	text-decoration: none;
}

label {
	margin: 0;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#header_name{
	font-size: 15px;
}


.color_y {
	color: #f2eadd;
}

.color_r {
	color: #ffb689;
}

.color_o {
	color: #FAAC58;
}

.color_w{
	color: #fff;
}

.font-color-orange {
	color: #FDD77F
}

.font-color-blue{
	color : #88B3FC
}

.font-color-gray{
	color : #6e6e6e
}

.bColor_fff {
	background-color: #fff;
}

.bColor_y {
	background-color: #f2eadd;
}

.rem-2 {
	padding-left: 2rem;
	padding-right: 2rem;
}

.rem-20 {
	padding-left: 20rem;
	padding-right: 20rem;
}

.rem-30 {
	padding-left: 30rem;
	padding-right: 30rem;
}

.padding-right-1{
	padding-right: 1rem;
}

.padding-right-2{
	padding-right: 2rem;
}


.userNameToggle {
    position: relative; 
    display: inline-flex;
    align-items: center;
    z-index: 9999;
}
.user_toggle{
	position: absolute;
    left: -7rem;
    top: 1rem;
}

#header-main {
	font-size: 50px;
}

.bttitle{
	font-size: 19px;
    font-weight: 500;
    letter-spacing: -1.2px;
}
.title {
	font-size: 30px;
	font-weight: bold;
	margin: 0;
}

.login_title, .join_title {
	font-size: 30px;
	height: 60px;
}

.login_title {
	margin: 50px 0 30px 0;
}

.join_title>p, .login_title>p {
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.36;
	color: #A9BCF5;
}

.info_title>p {
	font-weight: bold;
	font-size: 20px;
	letter-spacing: 0;
}
#join_form .address-row {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 10px;
}
#join_form #detailAddress {
	margin: 0;
}
#join_form #address_search {
	border: none;
	padding: 14px 18px;
}
.common-box {
	padding: 40px;
	width: 560px;
	margin: 0 auto;
}

#join-box{
	min-height: 840px;
    height: auto;
}
#info-box {
	height: 840px;
}

.join_button, .login_button, .findID_div, .findPw_div {
	display: flex;
	justify-content: center;
	align-items: center;
}

.join_agree {
	margin-top: 30px;
	width: 480px;
    font-weight: 600;
    padding: 20px 0;
    color: #fff;
    background: linear-gradient(120deg, #c8d2ff, #b8fff2);
    transition: 0.3s ease;
    display: block;
    text-align: center;
    font-size: 18px;
    line-height: 20px;
    border-radius: 100px;
    border: none;
}


.join_check {
	width: 23px;
	height: 20px;
	margin-left: 5px;
	display: none;
	position: absolute;
    right: 15px; 
    top: 46px; 
    transform: translateY(-50%); 
    z-index: 5;
}
#join_form li {
    position: relative; 
    margin-bottom: 20px;
    list-style: none;
}
#loginBtn {
	width: 480px;
	font-weight: 600;
	padding: 20px 0;
	color: #fff;    
	background: linear-gradient(120deg, #c8d2ff, #b8fff2);
    transition: 0.3s ease;
	display: block;
	text-align: center;
	font-size: 18px;
	line-height: 20px;
	border-radius: 100px;
	border: none;
}

.join_input, .login-input {
	padding: 0 20px 0 20px;
	font-size: 15px;
	letter-spacing: -0.9px;
	height: 53px;
	width: 480px;
	margin-top: 20px;
	border-radius: 10px;
	border: none;
	box-shadow: inset 2px 2px 6px rgba(0,0,0,0.08),
	              inset -2px -2px 6px rgba(255,255,255,0.9);
	background-color: #e8edff;
}
.login-input{
	width: 400px;
}
#join, #login {
	padding: 0 15px;
	font-size: 12px;
	color: #a5a5a5;
}

.nav-icon {
	width: 120px;
	max-height: 67px;
	object-fit: contain;
}

.nav-items {
	display: inline-block;
	float: right;
	margin-top: 25px;
	margin-right: 80px;
}

.nav-items>li {
	float: left;
	font-weight: 700;
}

.nav-items>li>a {
	font-size: 20px;
	color: #F4BC97;
}

.nav-items>li>a:hover {
	text-decoration: none;
}


.item {
	flex-grow: 1; 
}

.postBtn {
	border: solid 1px hsla(220, 9%, 46%, .3);
	background-color: #fff;
	border-bottom: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 8px;
	width: -webkit-fill-available;
}


.join_hint {
	padding-left: 5px;
	font-size: 14px;
	line-height: 20px;
	color: #a5a5a5;
}


.mypage_toggle {
	background-color: #fff;
	width: 12rem;
	text-align: center;
	box-shadow: -1px 3px 7px #E6E6E6;
	top: 55px;
    right: 135px;
    z-index: 999;
    height: fit-content;
}

#address_search {
	border-radius: 15px;
	font-size: 15px;
	border: none;
	letter-spacing: -0.9px;
	flex-shrink: 0;
    padding: 8px 18px;
    white-space: nowrap;
    border-radius: 20px;
    border: 1.5px solid #ccc;
    background: #f5f5f7;
    font-size: 14px;
    cursor: pointer;
    color: #333;
}

.join_find {
	margin: 25px auto 25px;
	text-align: center;
}

.join_find>li {
	display: inline-block;
	position: relative;
	padding: 0 10px 0 10px;
}

.join_find>li>a {
	color: #a5a5a5;
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
}
.boardTitle{
	font-weight: 600;
    font-size: 15px;
    color: #666;
    display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.post-title{
	font-size: 23px;
	font-weight: 600;
}
.post-container {
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 10px 16px 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.content-div{
	min-height: 100px;
	margin: 16px;
    line-height: 1.6;
}

.post-info {
	display: flex;
	justify-content: space-between;
    align-items: center;
    margin: 0 10px;
    font-size: 14px;
    color: #666;
}

.post-info .post-view-count img {
    width: 16px;
    vertical-align: middle;
}
.post-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 16px 30px;
    justify-content: flex-end;
}


.board-btn, .action-btn {
    padding: 8px 16px; 
    background-color: #f8f9fa; 
    border: 2px solid #ddd; 
    border-radius: 12px;
    font-size: 14px; 
    font-weight: 600;
    color: #333;
    cursor: pointer;
    max-width: 66px;
    max-height: 40px;
    line-height: normal;
    display: inline-flex;
    font-family: inherit;
    transition: all 0.2s ease-in-out;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 
}

.board-btn:hover, .action-btn:hover{
    background-color: #e9ecef; 
    border-color: #bbb; 
    transform: scale(1.05);
}
.post-user-profile{
	align-items: center;
    display: flex;
    gap: 5px;
}
.post-user-profile span{
	font-weight: 500;
}
.post-meta{
    display: flex;
    gap: 10px;	
}
#btn-div{
	display: flex;
    gap: 10px;
}

#com_content img{
	max-width: 100%;
	height: auto;
	display: block;	
}

.commentContainer {
    width: 100%;
    margin-top: 6rem;
    margin-bottom: 4rem;
}


.comment_div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 800px; /* 최대 너비 지정 (선택 사항) */
    margin: 0 auto;
}

.comment-input-container {
    width: 100%;
    margin-top: 10px;
}

textarea.comment_content {
    width: 100%; /* 부모 크기만큼 확장 */
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: none;
}


.deco {
	border-right: solid 2px #a5a5a5;
}

.login_sns {
	text-align: center;
}


.socialLoginBtn{
	width: 350px;
    height: 54px;
}

.socialLoginBtn:hover {
  cursor: pointer;
}

.kakao {
	background-color: #FAE80C;
	padding-top: 4px;
}

.naver {
	background-color: #00C300;
	padding-left: 7px;
	padding-top: 4px;
}

.login_sns_p {
	text-align: center;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #a5a5a5;
	margin-top: 40px;
	margin-bottom: 25px;
}

.write_div {
	/*border: 3px solid #ffb689;*/
	border-radius: 7px;
	width: 11rem;
	height: 4rem;
}

.write_btn_border {
	height: 2rem;
}

.write_btn_font {
	/*color: #ffb689;
	color: #5B67A2 ;*/
	font-weight: bold;
}

.write_border{
	border: 2px solid #f2eadd;
}

#receive_btn{
		border : 2px #848484;
		border-top-left-radius: 1em;
		border-top-right-radius: 1em;
	}
#send_btn {
		border : 2px #848484;
		border-top-left-radius: 1em;
		border-top-right-radius: 1em;
	}
.message_menu{font-weight:bold;}

.message {color : #777;}
.msg_title {
		border : none;
		background-color : white;
		}

.resize-none {
	resize: none;
}

.height4 {
	height: 2rem;
}

#textarea {
	min-height: 48rem;
}

.comWriteBtn, .fleaWriteBtn, .jobWriteBtn, .roomWriteBtn {
	border-radius: 10px;
	border: 3px solid #CED8F6;
	background-color: #fff;
	height: 35px;
	width: 60px;
	font-weight: 600;
	align-items: center;
	justify-content: center;
	display: flex;
	color: #848484;
}

.comUpdateBtn, .fleaUpdateBtn, .jobUpdateBtn, .roomUpdateBtn {
	border-radius: 10px;
	border: 3px solid #f2eadd;
	background-color: #fff;
	height: 35px;
	width: 60px;
	font-weight: 600;
	align-items: center;
	justify-content: center;
	display: flex;
	color: #848484;
}


.logoutA {
	/*color: #fff;*/
	font-weight: bold;
	width: 4rem;
	border: solid 2px;
	border-radius: 13px;
	padding: 6px;
	font-size: 12px;
}

.logoutA:hover {
	background-color:#7B86AA;
	color:#fff;
}

#btnColor {
	color: #fff;
	/*background-color: #f2eadd;*/
	background-color: #BFC8EA;
}

.search {
	margin: 5px;
}

.w-45rem {
	width: 45rem;
}

.w-10rem{
	width: 10rem;
}

.flex-container {
	/*flex-wrap: wrap;*/
	column-gap: 5rem;
	row-gap: 2.5rem;
	flex-direction: row;
	justify-content: center;
}

.mainDiv{
	border: 3px solid #BFC8EA;
    border-radius: 30px;
    padding: 30px 20px;
}

.mainListDiv {
	width: 40rem;
	height: 3.5rem;
	/*border: #FBF3E3 solid;*/
	border-radius: 2rem;
	background-color: #BFC8EA;
	display: flex;
	align-items: center;
}

.search-icon {
	width: 30px;
	object-fit: contain;
}

#comHeader, #fleaHeader, #jobHeader, #roomHeader {
	color: #6E6E6E;
	font-weight: 700;
	font-size: 15px;
	width: 100%;
}

#comTemplate, #fleaTemplate, #jobTemplate, #roomTemplate {
	display: none;
}


#jobHeader_text, #roomHeader_text, #fleaHeader_text, #comHeader_text {
	/*color: #FAAC58;*/
	text-decoration: none;
}

#jobHeader:hover #jobHeader_text, #roomHeader:hover #roomHeader_text,
	#fleaHeader:hover #fleaHeader_text, #comHeader:hover #comHeader_text {
	color: #2E9AFE;
	cursor: pointer;
}

#jobHeader:hover, #roomHeader:hover, #fleaHeader:hover, #comHeader:hover {
	cursor: pointer;
}


#item-template {
	display: none;
}

.page-header h1 {
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 1px;
}

.page-header {
	color: #666;
	font-size: 0.95rem;
}

.title-container {
	flex-grow: 1;
    min-width: 190px;
    max-width: 680px;
    margin-left: 2rem;
}

.userName-div{
	max-width: 150px;
    min-width: 100px;
    flex: 1;
    justify-content: center;
}

.date-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    flex-shrink: 0; 
    min-width: 45px;
    max-width: 170px; 
}

.user_toggle {
    left: -6rem;
    top: 3rem;
}

.boardReplyCnt{
	font-size: 10px;
    color: #746eff;
}

.boardHits, .boardDate{
    font-size: 13px;
    color: #8b8b8b;
}

.popular-item{
	padding: 6px;
	align-items: center;
}
.boardLink:hover, .popular-item:hover {
	background-color: #f5f5f5;	
	cursor: pointer;
}
.bttitle{
	border-bottom: 1px solid #e3e3e3;
	padding: 15px;
}
.arrow-btn {
	border: none;
	background: none;
	cursor: pointer;
	padding: 10px;
	color: #8b8b8b;
}

.arrow-btn:hover {
	color: #333;
	background-color: #f5f5f5;
	border-radius: 5px;
}
.hot-box {
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 12px 16px;
	background: #fffdfbdb;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.hot-label {
	font-weight: 600;
	font-size: 1rem;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	color: #222;
	font-family: "Playfair Display", serif;
}

.hot-post-title {
	color: #666;
	font-size: 0.95rem;
	line-height: 1.4;
	font-weight: 700;
}
.hot-comment-count {
	color: #5a52ff;
	font-size: 0.8rem;
	margin-left: 4px;
}
.board-section{
	margin-top: 100px;
}
.comment_div {
	border: 1px solid #BDBDBD;
	padding: 10px 30px;
	border-radius: 10px;
	margin-bottom: 35px;
}

.comment-insert-btn {
	padding: 8px 16px;
    float: right;
    border: none;
    background-color: #BFC8EA;
    border-radius: 10px;
    color: #F8F9FC;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
    margin-top: 10px;
    align-self: flex-end;
}

.comment-insert-btn:hover{
	background-color: #CAD1F0; 
    border-color: #bbb; 
    transform: scale(1.05); 
}

#comment-edit-textarea {
	border-radius: 10px;
	border: 1px solid #BDBDBD;
	width: 857px;
	height: 100px;
	padding: 10px;
}

#comment_name {
	font-size: 15px;
	font-weight: 700;
	color: #6E6E6E;
}

.date, .mypage_font {
	color: #A4A4A4;
	font-size: 14px;
}

.name {
	font-weight: 700;
	color: #ffb689;
}

.panel-btn {
	display: inline;
}
.comment_login{
	font-size: 15px;
}
.delBtn, .upBtn, #commentUpdatedBtn {
    float: right;
    border: none;
    background-color: #fff;
    font-size: 15px;
    color: #444; 
    padding: 4px 8px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.delBtn:hover, .upBtn:hover, #commentUpdateBtn:hover {
    background-color: #f0f0f0;
    color: #222; 
    text-decoration: underline;
    opacity: 0.8;
}

.msg_border {
	border: 1px solid #BDBDBD;
	border-radius: 3px;
}

.background-color-gray {
	background-color: #F2F2F2;
}

.msgBtn_div {
	display: flex;
	float: right;
}

.msgBtn {
	background-color: #0080FF;
	color: #fff;
	font-weight: 600;
	border: none;
	border-radius: 3px;
	height: 35px;
}

.msgBtn2 {
	background-color: #fff;
	color: #0080FF;
	font-weight: 600;
	border: 1px solid #0080FF;
	border-radius: 3px;
	height: 35px;
}

.message_contents {
	display: flex;
	justify-content: center;
	margin: 10px 0;
}

.message {
	color: #6E6E6E;
}

.send_message {
	background-color: #fff;
	border: none;
}

#msg_title {
	font-weight: bold;
	font-size: 27px;
}



.panel-body {
	padding: 15px;
	color: #6E6E6E;
	font-size: 15px;
}

.chatRoom{
	display: flex;
	flex-direction: column;
	    height: 100%;
	    
}

.chatList{
	flex: 1;
	overflow-y: auto;
	display: flex;
    flex-direction: column; 
    width: 100%;
    max-height: 370px; 
    
}

.chatInput{
	display: flex;
	align-items: center;
    gap: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    width: 100%;
}


.otherChat {
    align-self: flex-start; /* 왼쪽 정렬 */
    width: auto;  /* 너비 설정 */
    background-color: #f0f0f0; /* (선택) 배경색 추가 */
    padding: 5px 10px; /* (선택) 여백 추가 */
    border-radius: 10px; /* (선택) 둥근 테두리 */
    margin: 5px; /* (선택) 상하 간격 추가 */
    height: 30px;
}

.myChat {
    align-self: flex-end; /* 오른쪽 정렬 */
    width: auto; /* 너비 설정 */
    background-color: #d1ffd1; /* (선택) 배경색 추가 */
    padding: 5px 10px; /* (선택) 여백 추가 */
    border-radius: 10px; /* (선택) 둥근 테두리 */
    margin: 5px; /* (선택) 상하 간격 추가 */
    height: 30px;
}
.chat > span{
	white-space: pre-wrap;
}
.member-list-row{
	display: grid;
    grid-template-columns: 0.5fr 2fr 1.5fr 1fr 0.1fr 1fr; 
    width: 100%;
}

.company-list-row{
	display: grid;
    grid-template-columns: 0.5fr 2fr 1.5fr 1fr 1fr 1fr; 
    width: 100%;
}

.room-list-row{
	display: grid;
	grid-template-columns: 0.5fr 1.5fr 2fr 1fr 1fr 1fr 0.5fr 0.5fr ;
	width: 100%;
}

.room-header-row{
	display: grid;
	grid-template-columns: 0.5fr 1.5fr 2fr 1fr 1fr 1fr 0.5fr 0.5fr ;
	width: 100%;
}


.write_btn, .write_btn_font, .glass_icon, #job_write_btn, .selected_btn, .pagination_border {
    transition: all 0.5s ease; /* 색, 테두리, 배경 등 전체에 스르륵 */
}

.job-title p{
	transition: all 0.5s ease;
}

.member-mode .job-title p{
	color:#f2eadd;
}
.community .write_btn,
.fleaMarket .write_btn {
    border: 2px solid #f2eadd;
}


.member-mode .glass_icon{
    color: #f2eadd;
}
.community .glass_icon{
	color: #FDD77F;
}
.fleaMarket .glass_icon{
	color: #FDD77F;
}
.member-mode #job_write_btn{
    color: #f2eadd;
}
.member-mode .selected_btn{
    background-color: #f2eadd;
}
    
.member-mode .write_btn_font{
	color: #f2eadd;
}

.company-mode .job-title p{
	color: #003366;
}
.company-mode .glass_icon {
    color: #003366;
}
.company-mode #job_write_btn {
    color: #003366;
}
.company-mode .selected_btn {
    background-color: #003366;
}
.company-mode .write_btn_font{
	color: #003366;
}

.jam-card {
    background: #fff;  /* 흰색 카드 */
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #ddd;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* 살짝 그림자 */
}
.jam-card-title {
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    color: #333;
}
.jam-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.jam-flex {
    display: flex;
    gap: 10px;
}

.jam-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 한 줄에 4개 고정 */
    gap: 10px;
}


.jam-grid label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: #f7f8fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    font-size: 14px;
    font-weight: 500;
}




.jam-grid label:hover {
    background-color: #e9f5ff;
    border-color: #007bff;
}
.jam-grid input[type="radio"] {
    display: none; /* 기본 라디오 숨김 */
}




.jam-type-select {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.jam-radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border-radius: 20px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
}

/* 라디오 숨김 */
.jam-radio-label input {
    display: none;
}

.jam-type-member {
    background-color: #f2eadd;
    color: #333;
}

.jam-type-company {
    background-color: #003366;
    color: #fff;
}

/* 기업 구인 hover 시 */
.jam-radio-label:hover input[value="0"] + .jam-radio-text,
.jam-radio-label input[value="0"]:checked + .jam-radio-text {
    background-color: rgba(0, 51, 102, 0.1);
    color: #003366;
    border-color: #003366;
}

/* 멤버 모집 hover 시 */
.jam-radio-label:hover input[value="1"] + .jam-radio-text,
.jam-radio-label input[value="1"]:checked + .jam-radio-text {
    background-color: rgba(255, 221, 119, 0.3);
    color: #d18c00;
    border-color: #f2eadd;
}

/* 선택되었을 때 전체 라벨에 색 입히기 */
.jam-radio-label input[value="0"]:checked + .jam-radio-text {
    background-color: #003366;
    color: #fff;
}

/* 멤버 모집 선택 시 */
.jam-radio-label input[value="1"]:checked + .jam-radio-text {
    background-color: #f2eadd;
    color: #333;
}

/* 텍스트 영역 스타일 (버튼 안 글자 부분) */
.jam-radio-text {
    padding: 6px 12px;
    border-radius: 20px;
    transition: background-color 0.3s, color 0.3s;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
}

.jam-radio-label span::before {
    display: none;
}

.jam-type-select label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}
.jam-type-select input[type="radio"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #bbb;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
}
.jam-type-select input[type="radio"]:checked {
    background-color: #007bff;
    border-color: #007bff;
}
.jam-type-select input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.jam-type-select-wrapper {
    display: flex; 
    padding: 6px 10px; 
    border-radius: 12px;
    transition: all 0.3s;
    margin-bottom: 16px;
    align-items: center;
}

/* 포커스 시 빨간색 강조 */
.jam-type-select-wrapper.focused {
    box-shadow: 0 0 0 3px rgba(255, 51, 85, 0.8); /* 빨간색 */
    border: 2px solid rgba(255, 51, 85, 0.8);
}

.area-wrapper.focused{
	background-color: #ffe7e7;
}

.position-wrapper.focused{
	background-color: #ffe7e7;
}


.jam-input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.jam-btn-group{
	display: flex;
    gap: 10px;
    justify-content: center; /* 가운데 정렬 */
    margin-top: 20px;
}

.jam-btn {
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 70px;
    text-align: center;
}

/* 등록 버튼 - 메인 블루 */
.jam-btn.register {
    background-color: #007bff;
    color: #fff;
}
.jam-btn.register:hover {
    background-color: #0056b3;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* 취소 버튼 - 포인트 옐로우 */
.jam-btn.cancel {
    background-color: #f0f0f0;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.jam-btn.cancel:hover {
    background-color: #e0e0e0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.jam-type-select label {
    margin-right: 15px;
    font-weight: bold;
    cursor: pointer;
}

.jam-pay-section {
    display: none; 
}

.jam-pay-section {
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
    display: flex;
    gap: 8px;
    align-items: center;
    width: fit-content;
    margin-bottom: 16px;
}

.jam-pay-section h3 {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    color: #555;
}

.jam-pay-section select,
.jam-pay-section input {
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    max-height: 30px;
}

.pay_input{
	text-align: right;
	width: 100px;
}

.search-div {
    max-width: 530px; 
    width: 100%;
    padding: 0px 10px;
    height: 45px;
}

.search-input{
	border: none;
    border-bottom: 1px solid #e5e7eb;
    font-size: 16px;
    color: #4a4a4a;
}

.search-bar-wrapper {
    display: flex;
    gap: 8px; 
    width: 100%;
    max-width: 800px; 
}

.search-bar-wrapper select {
    flex: 0.2;
    min-width: 100px; 
}

.search-bar-wrapper input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.search-bar-wrapper .glass_icon {
    cursor: pointer;
    font-size: 18px;
    align-self: center;
}


.selected-wrapper {
    max-width: 600px; 
    width: 100%;
    margin: 10px auto;
    text-align: left;
    margin-bottom: 8px;
    min-height: 23px;
}

.selected-location, .selected-position{
    font-weight: bold;
    font-size: 14px;
    color: #333;
}

.switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    font-weight: bold;
    font-size: 16px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ddd;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* 기본 색상 (unchecked 상태일 때) */
.slider {
    background-color: #003366;  
}

input:checked + .slider {
    background-color: #f2eadd;
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.filterBtnContainer{
    gap: 10px;
    align-items: center; 
	max-width: 700px;
    margin: 10px auto;	
}
.setting-filter {
    display: none;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    max-width: 800px;  
    margin: 0 auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
    padding: 10px;
}


.setting-base-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;  /* 각 컬럼 사이 간격 */
}

.setting-base__col--title {
    flex: 1;
    height: 40px;
    line-height: 40px;
    font-weight: 600;
    font-size: 1.2rem;
    text-align: center;
    border-bottom: 1px solid #e5e8ec;
    color: #4c515b;
    background-color: #f7f8fa;
    border-right: 1px solid #e5e8ec;
}



.setting-base__col {
    flex: 1; 
    border: 1px solid #e5e8ec;
    border-radius: 4px;
    background-color: #f9f9f9;
    overflow: hidden;
}

.setting-base__col--list {
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    padding: 8px;
    border: 1px solid #e5e8ec;
    border-radius: 4px;
}

.setting-base__col--list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.setting-base__col--list li {
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

.setting-base__col--list li:last-child {
    border-bottom: none;
}

.setting-base__col--list li:hover {
    background-color: #f0f5ff;
}

.setting-base__col--list .placeholder {
    color: #aaa;
    font-style: italic;
    text-align: center;
}


/* 선택된 지역 표시 줄 */
.selected-area-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 15px;
    padding: 8px 12px;
    background: #f0f5ff;
    border: 1px solid #cce5ff;
    border-radius: 16px;
    font-size: 14px;
    color: #007bff;
    font-weight: 500;
    max-width: fit-content;
    white-space: nowrap;
}

/* x버튼 */
.area-remove-btn {
    background: none;
    border: none;
    font-weight: bold;
    color: #ff6b6b;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

/* 선택된 지역이 없을 때 기본값 */
.selected-area-badge:empty::before {
    content: '선택된 지역 없음';
    color: #999;
    font-weight: normal;
}


.selected-area-badge {
    font-weight: 500;
    color: #007bff;
}

.neo-wrap {
	padding: 7px 11px;            
	border-radius: 999px;
	background: #fff;      

	box-shadow: 6px 6px 12px rgb(0 0 0 / 14%);
}
.neo-wrap::before {
	content: "";
	position: absolute;
	width: 291px;
    height: 34px;
	border-radius: 999px;
	background: #fff;
	z-index: 1;
}
.neo-input {
	width: 430px;
    height: 30px;
	padding: 0 22px;
	border: none;
	outline: none;
	border-radius: 999px;
	font-size: 14px;
	color: #555;
	background: #cbd8e93d;
	position: relative;
	z-index: 2;

	box-shadow: inset 6px 4px 6px rgba(0, 0, 0, 0.08), 5px 5px 20px 0px rgba(255, 255, 255, 1.0);
}

.neo-input::placeholder {
	color:#b3b3b3;
}

.rainbow-btn {
    padding: 3px 20px;
    height: 40px;
    border: none;
    border-radius: 32px;
    font-size: 15px;
    font-weight: 600;
   	background: linear-gradient(280deg, #ffe2d8, #f8ffe2, #d8faff, #e8e2ff);
    background-size: 200% 200%;
    color: #666;
    cursor: pointer;
    transition: background-position 3s ease, transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.rainbow-btn .icon {
    font-size: 22px;
}

.search-icon {
    transition: filter 0.4s ease, transform 0.25s ease;
}
.search-icon:hover {
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.7));
    transform: scale(1.05);
}

select {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #444;
	background-color: #fff;
	padding: 2px 1px 3px 5px;
	margin: 0;
	border: 1px solid #aaa;
	border-radius: .5em;
	box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
}

_height {
	height: 35rem;
}

footer {
	position: absolute;
	padding-top: 27px;
	width: 100%;
	clear: both;
	margin-top: 60px;
}

.icon {
	width: 35px;
}

a {
	color: #6e6e6e;
	text-decoration: none;
}

#header-main:hover {
	cursor: pointer;
}

.w-full {
	width: 100%;
}

.clear-both {
	clear: both;
}

.inline {
	display: inline;
}

.display-block {
	display: block;
}

.inline-block {
	display: inline-block;
}
.none{
	display: none; 
}

.justify-space-around {
	justify-content: space-around;
}

.justify-end {
	justify-content: end;
}

.justify-between {
	justify-content: space-between;
}

.justify-center {
	justify-content: center;
}

.justify-right {
	justify-content: right;
}

.items-center {
	align-items: center;
}

.content-center {
	align-content: center;
}

.vertical-align-m {
	vertical-align: middle;
}

.flex {
	display: flex;
}

.flex-1{
	flex: 1;
}

.float-right {
	float: right;
}

.float-left{
	float: left;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.width_100px {
	width: 100px;
}

.width_80px {
	width: 80px;
}

.width_20 {
	width: 20rem;
}

.width_45 {
	width: 45rem;
}

.width_50 {
	width: 50rem;
}

.width_60 {
	width: 60rem;
}

.width-85 {
	width: 80rem;
}

.width-13rem {
	width: 13rem;
}

.height_35px {
	height: 35px;
}

.border {
	border: 2px solid #e5e7eb;
}

.border-g {
	border: 2px solid #04B431;
}

.border-r {
	border: 2px solid #FE2E2E;
}

.border-top {
	border-top-color: hsla(220, 9%, 46%, .3);
	border-top: 1px solid #e5e7eb;
}

.border-bottom {
	border-bottom-color: hsla(220, 9%, 46%, .3);
	border-bottom: 1px solid #e5e7eb;
}

.padding-10 {
	padding: 10px;
}
.pd-top05 {
	padding-top: 0.5rem;
}

.pd-top1 {
	padding-top: 1rem;
}

.pd-top5 {
	padding-top: 5rem;
}

.pd-2rem {
	padding: 1rem;
}

.py-2rem {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.py-8 {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

.margin15px {
	margin: 15px;
}

.my-7 {
	margin-top: 1.75rem;
	margin-bottom: 1.75rem;
}


.my-4 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.my-top-2{
	margin-top: 2px;
}
.my-top-4 {
	margin-top: 1rem;
}

.my-top-7 {
	margin-top: 1.75rem;
}

.my-top-75 {
	margin-top: 2rem;
}

.my-top-8 {
	margin-top:1.5rem;
}

.my-top-15 {
	margin-top: 4rem;
}

.my-bottom-1px {
	margin-bottom: 1px;
}

.my-bottom-4 {
	margin-bottom: 6px;
}

.my-bottom-7 {
	margin-bottom: 1.75rem;
}

.my-bottom-8 {
	margin-bottom: 1.5rem;
}

.my-bottom-15 {
	margin-bottom: 4rem;
}

.mr-1 {
	margin-right: 1rem;
}

.mr-2 {
	margin-right: 2rem;
}

.mr-5 {
	margin-right: 5rem;
}

.mr-11 {
	margin-right: 11rem;
}

.ml-05 {
	margin-left: 0.5rem;
}

.ml-1 {
	margin-left: 1rem;
}

.ml-2 {
	margin-left: 2rem;
}

.ml-5 {
	margin-left: 5rem;
}

.height25 {
	height: 25px;
}

.height35 {
	height: 35px;
}

.height60 {
	height: 60px;
}

.height75 {
	height: 75px;
}

.height100 {
	height: 100px;
}

.min-height20 {
	min-height: 20rem;
}

.min-height60 {
	min-height: 60px;
}

.m-height350 {
	min-height: 350px;
}

.border-radius-43px {
	border-radius: 43px;
}

.border-radius-15px {
	border-radius: 15px;
}

.border-radius-10 {
	border-radius: 10px;
}

.border-radius-7px {
	border-radius: 7px;
}

.border-none {
	border-style: none;
}
.background-none{
	background: none;
}
.font-size-14{
	font-size: 14px;
}
.font-size-1 {
	font-size: 2rem;
}

.font-size-2 {
	font-size: 2.2rem;
}

.font-size-3 {
	font-size: 1.75rem;
}

.font-size-4 {
	font-size: 1.2rem;
}

.font-size-5 {
	font-size: 16px;
}

.font600 {
	font-weight: 600;
}

.font-weight-bold {
	font-weight: bold;
}

.text-alignL {
	text-align: left;
}

.text-alignR {
	text-align: right;
}

.text-alignC {
	text-align: center;
}

textarea {
	resize: none;
}

.cursor-pointer {
	cursor: pointer;
}

.top100{
	top: 100%;
}

.left0{
	left: 0%;
}

.flex-directionC{
	flex-direction: column;
}

.favorite-btn i {
    font-size: 24px;
    color: gray;
}

.favorite-btn.favorited i {
    color: gold;
    font-weight: bold;
}

.contents {
    width: 92%;
    max-width: 1100px;
    margin: 6rem auto;
}

.page-header-text {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  margin: 20px 0 10px 10px;
}

		
.hot-box {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.hot-paper {
	background-image: url('/images/check-paper.png');
	background-size: 380px; 
	background-repeat: repeat;
	padding: 20px 20px; 
	border-radius: 18px;
}
.f-board-button {
	background: none;
	font-size: 15px;
	width: 87px;
	position: relative;
	padding: 0 12px;
}

.f-board-button:not(:first-child) {
	margin-left: 8px;
}

.f-board-button:not(:first-child)::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 14px;
	background-color: #ccc;
}
.category-table {
	margin: 46px 0 30px 0;
	display: table;
	width: 100%;
	table-layout: fixed;
}

.category-row {
	display: table-row;
	outline: 1px solid #eee;
	border-radius: 16px;
	overflow: hidden;
}

.category-cell {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 7px 0;
	font-size: 15px;
	color: #444;
	cursor: pointer;
}

.category-cell a {
	display: inline-block; 
	padding: 7px 31px;
	border-radius: 12px;
	transition: .22s;
	line-height: 1;
}

.category-cell:hover a, .selected-category a {
	background: #e5ebff;
	padding: 7px 16px; 
	border-radius: 14px;
	color: #3b4abb;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(80, 110, 255, 0.22);
}


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

.post-card {
	cursor: pointer;
	border: 1px solid #ddd;
	border-radius: 14px;
	overflow: hidden;
	background-color: #fff;
	font-family: sans-serif;
	box-shadow:
		0 4px 10px rgba(0, 0, 0, 0.06);
	transition:
		transform 0.18s ease-out,
		box-shadow 0.18s ease-out;
}

.post-card img {
	width: calc(100% - 20px);
    height: 200px;
    margin: 10px;
    border-radius: 14px;
    object-fit: cover;
}
.post-card:hover {
	transform: translateY(-6px);
	box-shadow:
		0 10px 24px rgba(0, 0, 0, 0.12); 
}
.post-content {
	padding: 10px;
}

.post-title {
	font-size: 16px;
	line-height: 1.3em;
	text-overflow: ellipsis;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-category{
    margin: 8px 0 0;
	font-size: 13px;
    color: #666;
}
.post-price {
	font-size: 15px;
	color: #000;
	margin: 0 0 8px;
}

.post-meta {
	color: #666;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.post-createdAt {
	font-size: 14px;
}

.search-input:focus{
	outline: none;
	border: none; 
	box-shadow: none;
}
.f-board-button::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	width: 0;
	height: 2px;
	background: #bfc8ea;
	border-radius: 2px;
	transition: width .25s ease, left .25s ease;
}
.f-board-button:hover {
	color: #4a4a4a;
}
.f-board-button:hover::after {
	width: 100%;
	left: 0;
}

#header_name{margin-right: 1rem;}

.section {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 22px rgba(0,0,0,0.06);
    margin-top: 30px;
}


.section-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 12px;
    position: relative;
    margin-left: 30px;
}

.section-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    background: var(--pink);
    margin-top: 14px;
    border-radius: 2px;
}

.board-list {
    list-style: none;
    padding: 10px;
    padding-top: 0;
    margin: 0 20px;
    border-radius: 20px;
    background-color: #eff8ff;
}

.board-item {
    padding: 12px 6px;
    border-bottom: 1px solid #E9E3DD;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .2s;
    cursor: pointer;
}

.board-item:hover {
    transform: translateX(2px);
    opacity: 0.85;
    color: #CF93B6;
}

.listTitle {
    font-size: 16px;
    font-weight: 500;
    color: var(--brown);
    letter-spacing: 0.6px;
}

.listTitle:hover {
    color: #CF93B6;
}

.meta-info {
    font-size: 15px;
    color: rgba(58,30,19,0.65);
    letter-spacing: 0.3px;
}
.main-pagination{
    margin: 10px 0;
}
.chat-container {
display: flex;
width: 800px;
height: 600px;
border: 1px solid #ccc;
font-family: 'Arial', sans-serif;
background-color: white;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 13px;
/*box-shadow: 0 0 10px rgba(0,0,0,0.2);
z-index: 999;*/
}

.chat-sidebar {
	width: 280px;
	border-right: 1px solid #eee;
	overflow-y: auto;
}

.chat-main {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.chat-header {
	padding: 10px;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
	height: 43px;
	display: flex;
	align-items: center;
}

.chat-room-list {
	padding: 0;
	margin: 0;
}

.chat-room-item {
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	position: relative;
}
.chat-room-info{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.chat-room-item:hover {
	background-color: #f9f9f9;
}

.chat-room-item.active {
    background-color: #f9f9f9;
}
.chat-room-item.has-new-notif::after {
    content: 'N';
    position: absolute;
    right: 13px;
    top: 38px;
    background: #ff5a5a;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
}

.chat-profile-img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	margin-right: 10px;
}

.chat-room-info {
	flex-grow: 1;
}

.chat-user-name {
	font-weight: bold;
}

.chat-last-message {
	padding-right: 20px;
	font-size: 12px;
	color: #888;
	width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-room-time {
	font-size: 11px;
	color: #aaa;
	white-space: nowrap;
}

.chat-topbar {
	padding: 10px 12px;
	background: #f5f5f5;
	border-bottom: 1px solid #ddd;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	border-radius: 0 13px 0 0;
	height: 43px;
}

.chat-messages {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 10px;
	background: #fafafa;
    flex: 1;
    gap: 8px;
}

.chat-input-container {
	display: flex;
	border-top: 1px solid #ddd;
}

.chat-input-container input {
	flex: 1;
	padding: 10px;
	border: none;
	outline: none;
}
.chat-input-container textarea{
	min-height: 40px;
    max-height: 150px; 
    overflow-y: auto;
    resize: none; 
    flex: 1;
	padding: 10px;
	border: none;
	outline: none;
	font-size: 15px;
	font-family: 'Arial', sans-serif;
}

.chat-input-container button {
	padding: 10px 20px;
	background: #ffa425;
	color: white;
	border: none;
	cursor: pointer;
	font-size: 15px;
    font-weight: 600;
    border-radius: 0 0 13px 0;
}
.chat {
	display: inline-block;
	max-width: 60%;
	padding: 8px 12px;
	border-radius: 12px;
	word-wrap: break-word;
	position: relative;
	margin-bottom: 8px;
	height: fit-content;
}

.myChat {
	background-color: #ffa425;
	color: white;
	align-self: flex-end;
	border-bottom-right-radius: 0;
	font-weight: 500;
}
.otherChat {
	background-color: #eee;
	color: black;
	align-self: flex-start;
	border-bottom-left-radius: 0;
}

.chat-time {
	font-size: 13px;
	color: #888;
	margin-top: 4px;
	text-align: right;
}
.chat-date-line {
    text-align: center;
    margin: 20px 0;
    font-size: 0.8rem;
    color: #888;
    position: relative;
}
.chat-date-line::before {
    content: "";
    position: absolute;
    left: 0; top: 50%; width: 100%; height: 1px;
    background-color: #eee;
    z-index: -1;
}

/* 방을 아직 선택하지 않은 상태 */
.chat-main.empty .chat-topbar,
.chat-main.empty .chat-input-container,
.chat-main.empty .chat-messages { display: none; }

.chat-main.empty::before {
	content: "대화를 선택해 주세요";
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	color: #aaa;
	font-size: 14px;
}	

.job-meta-box {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    max-width: 400px;
}

.job-meta-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

.job-meta-row:last-child {
    border-bottom: none;
}

.job-meta-label {
    color: #444;
    font-size: 16px;
}

.job-status {
    margin: 16px 0;
    padding: 8px;
    background-color: #ffefef;
    color: #d9534f;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
}

.post-actions{
	justify-content: center;
    display: flex;
    align-items: center;
    gap: 12px; 
    margin-top: 16px;
}

#apply {
	background-color: #ff5722; 
	color: #fff;
	padding: 10px 20px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
}
#apply:hover {
	background-color: #e64a19; 
	box-shadow: 0 4px 10px rgba(255, 87, 34, 0.3);
	transform: translateY(-2px);
}
#apply:active {
	transform: translateY(1px);
}

.company-name{
	font-weight:800;
	font-size:1.125rem; /* 18px */
	letter-spacing:.2px;
	color:#111827;
}
		
.fa-face-smile{font-size: 25px; color: #bbb;}

.com-content{margin: 45px 16px; min-height: 200px; }
		
@media (max-width: 768px) {
	body {
		font-size: 14px;
	}

	h2 {
		font-size: 18px;
	}

	.btn-edit {
		font-size: 12px;
	}

	footer {
		font-size: 12px;
	}

	.nav-icon {
		width: 90px;
		margin: 0;
	}

	.nav-container {
		max-width: 183px;
	}

	.header-container {
		padding: 0 !important;
	}

	#header_name {
		font-size: 12px;
		margin-right: 6px;
	}

	#logout {
		margin-right: 0;
	}

	.paginate-a {
		padding: 3px 7px !important;
		font-size: 14px;
	}

	.neo-wrap {
		width: 100%;
		padding: 4px 6px;
	}

	.neo-wrap::before {
		width: 0;
	}

	.neo-input {
		width: 100%;
		max-width: 215px;
		min-width: 215px;
		font-size: 10px;
		padding: 0 20px;
		height: 23px;
	}

	.page-header {
		margin: 0;
	}

	.page-header-text {
		font-size: 20px;
		margin: 0 0 10px 10px;
	}

	.rainbow-btn {
		padding: 3px 13px;
		height: 28px;
		font-size: 10px;
	}

	.search-icon {
		width: 20px;
	}

	#searchBtn {
		height: 23px;
	}

	.header-icon {
		display: none;
	}

	.chat-sidebar {
		width: 35%;
	}
}

@media (max-width: 600px) {
	p {
		font-size: 15px;
	}

	.board-list {
		margin: 0 10px;
	}

	.common-box {
		width: 100% !important;
		min-width: 320px;
		padding: 20px !important;
		min-height: auto !important;
		margin: 10px auto;
	}

	.join_input,
	.login-input {
		width: 100%;
		height: 40px;
		font-size: 16px;
		margin-top: 10px;
	}

	.join_title > p,
	.login_title > p {
		font-size: 20px;
	}

	.join_hint {
		font-size: 12px;
	}

	.join_check {
		top: 23px;
	}

	.join_agree {
		padding: 13px 0;
	}

	#join-box {
		padding: 20px 60px !important;
	}

	#join_form #address_search {
		padding: 10px 18px;
	}

	.address-row {
		display: flex;
		gap: 8px;
		align-items: center;
	}

	.neo-wrap {
		width: 100%;
		padding: 4px 6px;
	}

	.neo-wrap::before {
		width: 0;
	}

	.neo-input {
		width: 100%;
		min-width: 215px;
		font-size: 10px;
		padding: 0 20px;
		height: 23px;
	}

	.page-header {
		margin: 0;
	}

	.page-header-text {
		font-size: 20px;
		margin: 0 0 10px 10px;
	}

	.rainbow-btn {
		padding: 3px 13px;
		height: 28px;
		font-size: 10px;
	}

	.socialLoginBtn {
		width: 100%;
		height: auto;
	}

	.login_sns_p {
		font-size: 14px;
		margin-bottom: 5px;
	}

	.hot-post-title {
		font-size: 11px;
	}

	.hot-box {
		padding: 3px 12px;
	}

	.hot-paper {
		padding: 10px;
	}

	.arrow-btn {
		padding: 9px;
	}

	.boardTitle {
		font-size: 14px;
	}

	.boardLink {
		padding: 3px;
	}

	.userName-div .userName {
		font-size: 11px;
	}

	.boardHits,
	.boardDate {
		font-size: 11px;
	}

	.board-section {
		margin-top: 35px;
	}

	.f-board-buttons {
		justify-content: center;
	}

	.f-board-button {
		font-size: 11px;
		width: auto;
		padding: 0 8px;
		margin: 0;
	}

	.f-board-button:not(:first-child) {
		margin: 0;
	}

	.category-cell {
		font-size: 12px;
	}

	.category-cell a {
		padding: 0;
	}

	.post-grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: 10px;
		padding: 10px 20px 60px 20px;
	}

	.section-title {
		font-size: 15px;
		margin-top: 5px;
		margin-left: 20px;
	}

	.section-title::after {
		margin-top: 5px;
	}

	.listTitle {
		font-size: 12px;
	}

	.board-item {
		padding: 9px;
	}

	.meta-info {
		font-size: 12px;
	}

	.main-pagination {
		margin: 0;
	}

	.board-btn,
	.action-btn,
	.comment-insert-btn {
		padding: 5px 10px;
		font-size: 13px;
	}

	.comment_div {
		padding: 6px 13px;
	}

	.comment_login,
	.comment_login > span {
		font-size: 11px;
	}

	textarea.comment_content {
		min-height: 55px;
		font-size: 16px;
	}

	.commentContainer {
		margin: 0;
	}

	.comment-insert-btn {
		margin: 0;
	}

	#comment_name,
	.panel-title .name {
		font-size: 13px;
	}

	.post-title {
		height: 2.6em;
		overflow: hidden;
	}

	.post-header {
		margin: 0 10px 10px 10px;
	}

	.panel-body {
		font-size: 11px;
	}

	.paginate_button {
		margin: 0;
	}

	.pagination li a {
		padding: 5px;
	}

	.pagination > li > .selected_btn,
	.pagination > li > .default_btn {
		font-size: 12px;
	}

	.title-container {
		min-width: 200px;
	}

	.chat-container {
		width: 95%;
	}

	.chat-container > span,
	.chat-user-name,
	.chat > span,
	.chat-last-message {
		font-size: 10px;
	}

	.chat-header > span,
	#chatPartnerName {
		font-size: 11px;
	}

	.chat-header,
	.chat-topbar {
		height: 25px;
	}

	.chat-time,
	.chat-room-time {
		font-size: 9px;
	}

	.chat-date-line {
		margin: 0;
		font-size: 9px;
	}

	.chat {
		padding: 3px 10px;
	}

	.chat-room-item {
		padding: 2px 10px;
	}

	.chat-messages {
		gap: 0;
		padding: 0;
	}

	.chat-input-container textarea {
		font-size: 11px;
	}

	.chat-input-container button {
		padding: 3px 9px;
		font-size: 11px;
	}
}

@media (max-width: 480px) {
	.contents {
		width: 85%;
		max-width: 1100px;
		margin: 4rem auto;
	}

	.neo-input {
		max-width: 200px;
		min-width: 200px;
	}

	.community {
		margin: 2rem auto;
	}

	.title-container {
		min-width: 135px;
		margin-left: 1rem;
	}

	.post-container {
		padding: 10px;
	}

	#content {
		width: 100%;
	}

	.job-meta-label,
	.job-meta-value > span {
		font-size: 12px;
	}

	.job-meta-box {
		padding: 10px;
	}

	.fa-face-smile {
		font-size: 16px;
	}

	.com-content {
		margin: 45px 16px;
		min-height: 200px;
	}

	.note-btn {
		padding: 4px 7px !important;
		font-size: 13px !important;
	}

	.note-toolbar {
		padding: 6px !important;
	}

	.note-editable {
		min-height: 250px !important;
		font-size: 16px !important;
	}

	.note-fontname .note-current-fontname {
		max-width: 80px !important;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}