/* board.css */
/* ===== 구인/구직 메뉴 ===== */
.gnb{ background:#fff; }
.gnb__inner{
  width:var(--w);
  margin:0 auto;
  padding: 25px 20px;
}
.gnb__item{
  display:inline-block;
  margin-right:45px;
  font-weight:bold;
  font-size:17px;
  color:#111 !important;
}
.gnb__item.is-active{
  color:var(--orange) !important;
}

/* ===== 검색/필터 ===== */
.filters__inner{
  width:var(--w);
  margin:0 auto;
}

.filters__form{
  background:var(--graybar);
  border:1px solid var(--line);
  padding:12px;
  display:flex;
  align-items:center;
}

/* select */
.filters__select{
  height:32px;
  border:1px solid #c8c8c8;
  background:#fff;
  font-size:14px;
  padding:0 6px;
  margin-left: 4px;
}
.filters__select{ width:150px; }

/* ✅ 검색 input: 너무 길지 않게 + 검색버튼이 오른쪽 끝에 붙게 */
.filters__input{
  height:32px;
  width: 200px;              /* 핵심: 길이 제한 */
  border:1px solid #c8c8c8;
  background:#fff;
  padding:0 8px;
  font-size:14px;
  margin-left:auto;          /* ✅ 오른쪽 정렬 핵심 */
}

.filters__btn{
  width:70px;
  height:32px;
  border:1px solid #c8c8c8;
  background:#e9e9e9;
  font-size:14px;
  cursor:pointer;
}

/* ===== 게시판 ===== */
.board{
  padding-top: 10px;
  padding-bottom: 20px; /* footer 여유 */
}
.board__inner{
  width:var(--w);
  margin:0 auto;
}

/* 연한 박스 */
.board__panel{
}

/* VIP 라인 */
.vip{
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 padding-bottom: 5px;
    background: #fffbe6;
}
.vip__label{
  display:flex;
  align-items:center;
  gap:12px;
	padding: 17px 20px 8px;
    font-size: 17px;
  background: #fffbe6;
}
.vip__tag{
  color:var(--orange) !important;
  font-weight:bold;
}
.vip__text{
  color:#666 !important;
  text-decoration: underline;
}

/* 리스트 */
.board__list{
  list-style:none;
  margin:0;
  padding:5px 20px 0 20px;
  font-weight: 500;
}
.board__list_vip{
  list-style:none;
  margin:0;
  padding:0 20px;
  background: #fffbe6;
  font-weight: 500;
}

/* 제목 + 메타 */
.board__title{
  display: inline-block;
/*  line-height: 26px;*/
/*  vertical-align: middle;*/
  color:var(--acolor) !important;
}

/* 메타 정보 (회색 글씨) */
.board__meta{
  line-height: 26px;
  color:var(--muted) !important;
}

.board__dash{ color:var(--muted); }

/* 하단 라인 */
.board__hr{
  border-top:1px solid var(--line);
  margin:12px 0 0;
}

/* 부모 컨테이너를 플렉스로 설정 */
.board__bottom {
    display: flex;
    justify-content: space-between; /* 양 끝으로 배치 */
    align-items: center;            /* 세로 중앙 정렬 */
    margin-top: 10px;
    padding: 10px 0;
    border-top: 1.5px solid #eee;     /* 구분선 (선택사항) */
}

/* 맨위로 버튼 스타일 */
.to-top, .btn-edit {
	float: right;
	padding:3px 10px;
	border:1px solid #c8c8c8;
	background:#efefef;
	color:#333 !important;
	font-size:14px;
}
.btn-delete  {
    float: right;
    padding: 3px 10px;
    border: 1px solid #ff3900;
    background: #ff3900;
    color: #fff !important;
    font-size: 14px;
}

.to-top:hover {
    background-color: #efefef;
    color: #fff;
}

/* 검색 결과 없음 - 전체 리스트와 조화로운 스타일 */
.board__row--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0; /* 위아래로 넓게 여백을 주어 허전함을 방지 */   
    color: #999999; /* 텍스트는 연한 회색 */
    font-size: 15px;
    list-style: none;
    text-align: center;
    margin: 10px 0;
}

/* 아이콘 역할을 할 수 있는 가상 요소 (선택 사항) */
.board__row--empty::before {
    content: '!'; /* 혹은 아이콘 이미지 */
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: #9a9a9a; /* 페이지네이션과 같은 회색 */
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
}

/* 뷰페이지 전체 컨테이너 보정 */
.view-container {
    padding: 20px 10px;
    background-color: #fff;
}

.view-content-wrapper {
    max-width: 1240px;
    margin: 0 auto;
    -webkit-font-smoothing: none;
    text-rendering: optimizeSpeed;
}

/* 제목 영역 */
.view-top {
    border-bottom: 1.5px solid #ddd;
    padding-bottom: 12px;
    margin-bottom: 25px;
}

.view-main-title {
    font-size: 19px;
    font-weight: bold;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.view-loc {
}

/* 메타 정보 (등록일, 글번호 등) */
.view-info-bar {
    font-size: 14px;
    color: #999;
    letter-spacing: -0.5px;
}

.view-info-bar .bar {
    margin: 0 8px;
    color: #eee;
}

/* 본문 내용 */
.view-body-text {
    font-size: 15px;
    line-height: 1.8; /* 줄 간격을 넓혀 가독성 확보 */
    color: #333;
	padding-bottom: 20px;
	word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

.view-body-text p {
    margin: 0; /* 단락 간격 최소화하여 이미지와 동일하게 */
}
/* 정보 요약 박스 */
.view-details-box {
    margin: 20px 0;
	width: 740px;
}

.detail-section {
    margin-bottom: 25px;
}

.section-title {
    font-size: 14px;
    font-weight: bold;
    border-left: 3px solid var(--orange);
    padding-left: 8px;
    margin-bottom: 10px;
}

/* 테이블 스타일 */
.detail-table {
    width: 100%;
    border-top: 1px solid #ddd;
    border-collapse: collapse;
    font-size: 14px;
}

.detail-table th {
    width: 15%;
    background-color: var(--graybar);
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    color: #666;
    text-align: left;
}

.detail-table td {
    width: 35%;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    color: #333;
}

/* 주의사항 및 강조 */
.caution-text {
    font-size: 12px;
    color: #999;
    padding: 8px 0 !important;
    border-bottom: none !important;
}

.point-color {
/*    color: #ff3900;*/
    font-weight: bold;
}
.notice-box {
	padding: 18px;
	border: 1px solid #eef2f6;
	border-radius: 12px;
	line-height: 1.7;
	background-color: #f8fafc;
	margin: 10px 0;
}
.notice-box .title {
	color: #e11d48; /* 조금 더 세련된 레드 계열 */
	font-weight: 800;
	margin-bottom: 8px;
	font-size: 1.1em;
	display: flex;
	align-items: center;
}
.notice-box .content {
	font-size: 15px;
	color: #475569;
	word-break: keep-all;
}
.notice-box .highlight {
	color: #2563eb;
	font-weight: 700;
}
.notice-box .footer-note {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #cbd5e1;
	font-size: 14px;
	color: #64748b;
}
.bar { margin: 0 5px; color: #ddd; }
.my-post-label { color: #ff3900; font-weight: 700; }
.write-container {
    width: 1250px;
    margin: 20px auto;
}

.write-container .line{
	border-bottom: 1.5px solid #d7d7d7;
	margin-bottom: 15px;
}

/* 각 입력 행 */
.write-row {
    display: flex;
    padding: 0px 0 15px 0;
    align-items: center;
}

/* 내용 부분처럼 위로 정렬이 필요한 경우 */
.write-row.align-top {
    align-items: flex-start;
}

/* 좌측 라벨 (게시판, 지역, 제목 등) */
.write-row .label {
    width: 120px;
    font-size: 14px;
    color: #333;
    padding-left: 10px;
}

/* 우측 입력 필드 영역 */
.write-row .input-data {
    flex: 1;
}

/* 라디오 버튼 간격 */
.write-row .input-data label {
    margin-right: 15px;
    font-size: 14px;
    cursor: pointer;
}

/* 셀렉트 박스 스타일 */
.write-row select {
    padding: 5px;
    border: 1px solid #ccc;
    margin-right: 5px;
    min-width: 120px;
}

/* 제목 입력창 */
.write-row .input-full {
    width: 95%;
    padding: 5px;
    border: 1px solid #ccc;
}

/* 내용 입력창 (Textarea) */
.write-row textarea {
    width: 95%;
    height: 350px;
    padding: 10px;
    border: 1px solid #ccc;
    resize: none;
}

/* 안내 문구 */
.write-row .notice {
    color: #ff3900;
    margin-top: 10px;
    margin-bottom: 0;
}

/* 하단 버튼 영역 */
.btn-area {
    padding: 15px 0;
    border-top: 1.5px solid #d7d7d7;
}

/* 등록하기 버튼 */
.btn-submit {
    background-color: #ff3900;
    color: #fff;
    border: none;
    padding: 5px 20px;
    font-size: 14px;
/*    font-weight: bold;*/
    cursor: pointer;
    border-radius: 2px;
	margin-left: 120px;
}
.wage-compact-box{
    margin: 10px 0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    max-width: 320px; 
    font-family: sans-serif;
    background: #fff;
}
.write-row-addr{
	border-bottom: 1.5px solid #d7d7d7; 
	border-top: 1.5px solid #d7d7d7; 
	padding-top: 15px; 
	margin-bottom: 15px;
}
.legal-warning-box{
	margin-top: 15px;
    padding: 15px;
    border: 1px solid #ffeeba;
    border-radius: 8px;
    background-color: #fffdf5;
}
.addr-mt5{
	margin-top:5px;
}
/* 모바일은 다음 단계 */
@media (max-width: 768px){
/* 3. 주소창 감싸는 div와 내부 input들 */
.write-row-addr .addr-mt5 {
	width: 100% !important;
	display: block !important;
	clear: both; /* 플로팅 해제 */
}
.addr-mt5{
	margin-top:0px;
}
.legal-warning-box{
	margin-top: 0px;
}
.write-row-addr{
	border-bottom: 0px solid #d7d7d7; 
	border-top: 0px solid #d7d7d7; 
	padding-top: 0px;
	margin: 15px 0;
}
.wage-compact-box{
    max-width: 100%;
}
#char_count_wrapper{
	 width: 100% !important;
}
.write-row.align-top {
	margin-bottom: 0px !important;
}
.write-row select {
   margin-right: 0px; 
}
.btn-area {
	padding: 15px 0px;
	margin: 10px !important;
}
.write-container {
    width: 100%;
}
.btn-delete {
    margin-left: 0px !important;
}
/* 1. 라벨 전체 숨기기 */
        .write-row .label { 
            display: none !important; 
        }

        /* 2. 행 구조 변경 */
        .write-row { 
            display: block; 
            margin-bottom: 10px; 
            padding: 0 10px;
        }

        /* 3. 입력 영역 꽉 채우기 */
        .write-row .input-data { 
            display: flex;
            flex-wrap: wrap; /* 내용이 많으면 아래로 흐르게 */
            gap: 8px;        /* 요소 사이 간격 */
            width: 100%; 
        }
        
        /* 4. [핵심] 2개씩 나란히 배치해야 하는 요소들 */
        /* 시/도(city), 근무시간(jobdate), 급여유형 등을 2열로 */
        .write-row .input-data select,
        .write-row .input-data input[type="text"].half-mobile {
            flex: 1 1 calc(50% - 4px); /* 2열 배치 (gap 고려) */
            min-width: 0;              /* flex 박스 내부 찌그러짐 방지 */
        }

        /* 5. 제목, 주소, 상세내용 등 한 줄을 다 써야 하는 요소들 */
        .write-row .input-data .input-full,
        .write-row .input-data textarea,
        .write-row .input-data #addr,
        .write-row .input-data .notice-policy-box,
        .write-row .input-data .legal-warning-box {
            flex: 1 1 100% !important; 
            width: 100% !important;
        }

        /* 6. 이미지 업로드/설명 박스 최적화 */
        .image-scroll-box {
            max-width: 100% !important;
        }
.view-details-box {
    width: 100%;
}
    /* '내가 작성한 글'이 있을 때만 특수 레이아웃 적용 */
    .is-me .my-post-label {
        display: block;      /* 한 줄을 통째로 차지 (자동 줄바꿈) */
        margin-bottom: 4px;  /* 아래 줄과의 간격 */
        font-size: 14px;
    }

    /* 모바일에서 '내가 작성한 글' 옆의 첫 번째 구분선 숨기기 */
    .is-me .hide-mobile {
        display: none;
    }

    /* 나머지 정보 아이템들 설정 */
    .info-item {
        display: inline-block;
        vertical-align: middle;
    }
.gnb__item{
  margin-right:35px;
}
  :root{ --w: 94%; }
  .filters__form{ flex-wrap:wrap; padding: 8px;}
  .filters__input{ width:100%; margin-left:0; }
  .filters__btn{ width:100%; }

	.gnb__inner {padding: 15px;}
    .detail-table th { width: 30%; }
    .detail-table td { width: 70%; display: table-cell; }
    .detail-table tr { display: flex; flex-wrap: wrap; }
    .detail-table tr .m-td {width: 100%;} /* 2열 유지 */
	.filters__inner{width:100%}
	.board__inner{width:100%}
	.vip__label{padding: 10px;}	
	.board__list_vip{padding: 0 10px;}
	.board__list{padding: 5px 10px 0 10px;}
	.board__title{
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}
	.board__bottom{padding: 10px 10px 10px 0;}

    .filters__inner {
/*        padding: 15px; /* 모바일 여백 조정 */*/
    }

    .filters__form {
        display: flex;
        flex-wrap: wrap; /* 요소가 넘치면 다음 줄로 */
        gap: 5px; /* 요소들 사이의 간격 */
    }

    /* 1. 셀렉트 박스 공통 설정 */
    .filters__select {
        flex: 1 1 calc(50% - 4px); /* 가로 2개씩 꽉 차게 (여백 제외) */
        width: calc(50% - 4px);
        margin-left: 0 !important; /* 기존 PC용 마진 제거 */
        box-sizing: border-box;
/*        height: 32px; /* 터치하기 쉬운 높이 */*/
        font-size: 14px;
    }

    /* 2. 검색창 + 버튼 컨테이너 (한 줄 배치) */
    .filters__input {
        flex: 1; /* 가용 공간 모두 차지 */
/*        height: 45px;*/
        margin: 0 !important;
        padding: 0 10px;
        border: 1px solid #ddd;
        border-radius: 4px 0 0 4px; /* 왼쪽만 둥글게 */
        font-size: 14px;
        box-sizing: border-box;
    }

    .filters__btn {
        flex: 0 0 80px; /* 버튼 너비 고정 */
/*        height: 45px;*/
        margin: 0 !important;
        background-color: #ff3900;
        color: #fff;
        border: none;
        border-radius: 0 4px 4px 0; /* 오른쪽만 둥글게 */
        font-weight: bold;
        white-space: nowrap; /* 텍스트 줄바꿈 방지 */
        cursor: pointer;
    }

    /* 텍스트가 길 경우를 대비한 말줄임 스타일 (요청하신 부분) */
    .filters__select option {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.board__row{
    display: flex;
    align-items: center;
    gap: 8px;
	margin-bottom: 10px;
}
.board__row2{
    display: flex;
    align-items: center;
    gap: 8px;
	margin-bottom: 10px;
}

.vip-period{
    margin-left: auto;
    padding: 0px 8px;
    font-size: 12px;
    border-radius: 12px;
    background: rgba(255,57,0,0.08);
    color: #ff3900;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 768px) {
	.vip__label {
		font-size: 15px;
	}	
	.board {
		padding-top: 0px;
	}	
  .board__row{    
	display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
	margin-bottom: 10px;
  }

  .board__row2{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    gap: 0 6px;
	margin-bottom: 10px;
  }

  /* 🔝 VIP 기간 : 1줄 단독 */
  .vip-period{
    order: 0;
   width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--orange);
    line-height: 1.2;
	text-align: right; 
	background:#fffbe6;
  }

  /* 📅 날짜 */
  .board__date{
    order: 1;
    white-space: nowrap;
	margin-right: 0px;
  }

  /* [TOP끌올], (미노출) */
  .btn-re-reg{
    order: 1;
    white-space: nowrap;
  }

  .btn-re-reg2{
    order: 2;
    white-space: nowrap;
  }

  /* 제목 + 지역 + 카테고리 → 날짜 뒤에 붙어서 같은 줄 */
  .board__title{
    order: 3;
    flex: 1;
    min-width: 0;   /* 🔥 줄임말 핵심 */

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .board__title .location{
  }
}