/* MoaJob - 구인구직 메인 스타일시트 */
/* /html/moajob/css/style.css */

:root {
  --mj-primary: #1a6fd4;
  --mj-primary-dark: #1558ab;
  --mj-secondary: #f0720a;
  --mj-vip: #e63946;
  --mj-top: #f4a261;
  --mj-text: #222;
  --mj-text-sub: #666;
  --mj-border: #e0e0e0;
  --mj-bg: #f5f7fa;
  --mj-white: #fff;
  --mj-radius: 8px;
  --mj-shadow: 0 2px 8px rgba(0,0,0,.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Noto Sans KR', -apple-system, sans-serif; color: var(--mj-text); background: var(--mj-bg); font-size: 14px; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--mj-primary); }
img { max-width: 100%; }
ul, ol { list-style: none; }

/* =========================================
   레이아웃
   ========================================= */
.mj-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* 헤더 */
.mj-header { background: var(--mj-primary); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); position: sticky; top: 0; z-index: 100; }
.mj-header-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.mj-logo { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -1px; }
.mj-logo span { color: var(--mj-secondary); }
.mj-gnb { display: flex; gap: 4px; align-items: center; }
.mj-gnb a { color: rgba(255,255,255,.9); padding: 8px 12px; border-radius: var(--mj-radius); font-size: 14px; font-weight: 500; transition: background .15s; }
.mj-gnb a:hover, .mj-gnb a.active { background: rgba(255,255,255,.18); color: #fff; }
.mj-header-util { display: flex; gap: 8px; align-items: center; }
.mj-header-util a { font-size: 13px; color: rgba(255,255,255,.85); }
.mj-header-util a:hover { color: #fff; }
.mj-header-util .sep { color: rgba(255,255,255,.4); }

/* 검색바 */
.mj-search-bar { background: var(--mj-white); border-bottom: 1px solid var(--mj-border); padding: 14px 0; }
.mj-search-form { display: flex; gap: 8px; align-items: center; }
.mj-search-selects { display: contents; } /* PC: wrapper 투명, flex 자식처럼 동작 */
.mj-search-form select { padding: 9px 12px; border: 1px solid var(--mj-border); border-radius: var(--mj-radius); background: #fff; font-size: 14px; min-width: 110px; }
.mj-search-input { flex: 1; display: flex; border: 2px solid var(--mj-primary); border-radius: var(--mj-radius); overflow: hidden; }
.mj-search-input input { flex: 1; border: none; padding: 9px 14px; font-size: 15px; outline: none; }
.mj-search-input button { background: var(--mj-primary); color: #fff; border: none; padding: 0 20px; cursor: pointer; font-size: 14px; font-weight: 600; }
.mj-search-input button:hover { background: var(--mj-primary-dark); }

/* 카테고리 탭 */
.mj-cat-bar { background: #fff; border-bottom: 1px solid var(--mj-border); }
.mj-cat-bar .mj-wrap { display: flex; gap: 0; overflow-x: auto; }
.mj-cat-bar a { white-space: nowrap; padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--mj-text-sub); border-bottom: 3px solid transparent; display: block; }
.mj-cat-bar a:hover, .mj-cat-bar a.active { color: var(--mj-primary); border-bottom-color: var(--mj-primary); }

/* 메인 콘텐츠 */
.mj-container { padding: 20px 0; }
.mj-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; }
.mj-main { min-width: 0; }
.mj-sidebar { min-width: 0; }

/* =========================================
   공고 목록
   ========================================= */
.mj-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mj-section-title { font-size: 16px; font-weight: 700; }
.mj-section-more { font-size: 13px; color: var(--mj-primary); }

/* VIP 배지 */
.mj-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-right: 4px; }
.mj-badge.vip { background: var(--mj-vip); color: #fff; }
.mj-badge.top { background: var(--mj-top); color: #fff; }
.mj-badge.new { background: #2ecc71; color: #fff; }
.mj-badge.urgent { background: var(--mj-secondary); color: #fff; }

/* 채용 카드 */
.mj-job-list { display: flex; flex-direction: column; gap: 8px; }

/* 광고 3열 그리드 (VIP/TOP) */
.mj-ad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mj-ad-grid .mj-job-card { height: 100%; box-sizing: border-box; }

.mj-job-card { background: var(--mj-white); border: 1px solid var(--mj-border); border-radius: var(--mj-radius); padding: 16px; display: block; transition: box-shadow .15s, border-color .15s; }
.mj-job-card:hover { box-shadow: var(--mj-shadow); border-color: var(--mj-primary); }
.mj-job-card.vip { border-left: 3px solid var(--mj-vip); }
.mj-job-card.top { border-left: 3px solid var(--mj-top); }

.mj-job-card-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.mj-job-card-title { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--mj-text); }
.mj-job-card-company { font-size: 13px; color: var(--mj-text-sub); margin-bottom: 6px; }

.mj-job-card-info { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.mj-info-item { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--mj-text-sub); }
.mj-info-item .icon { font-size: 13px; }
.mj-info-item.pay { color: var(--mj-primary); font-weight: 700; font-size: 13px; }

.mj-tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.mj-tag { font-size: 11px; padding: 2px 7px; background: #f0f4ff; color: var(--mj-primary); border-radius: 20px; }
.mj-tag.dormitory { background: #fff3e0; color: #e65100; }
.mj-tag.foreigner { background: #e8f5e9; color: #2e7d32; }

.mj-job-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; }
.mj-time { font-size: 11px; color: #aaa; }
.mj-dday { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.mj-dday.urgent { background: #fff3cd; color: #856404; }
.mj-dday.closed { background: #f8d7da; color: #721c24; }
.mj-dday.open { background: #d1e7dd; color: #0f5132; }

/* =========================================
   일반 목록 (텍스트 형)
   ========================================= */
.mj-list-table { background: var(--mj-white); border: 1px solid var(--mj-border); border-radius: var(--mj-radius); overflow: hidden; }
.mj-list-row { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #f5f5f5; gap: 8px; transition: background .1s; }
.mj-list-row:last-child { border-bottom: none; }
.mj-list-row:hover { background: #fafbff; }
.mj-list-row .time { color: #999; font-size: 12px; min-width: 42px; }
.mj-list-row .title { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-list-row .meta { display: flex; gap: 6px; font-size: 11px; color: var(--mj-text-sub); }
.mj-list-row .meta span { background: #f5f5f5; padding: 1px 6px; border-radius: 3px; }

/* =========================================
   구직자 목록
   ========================================= */
.mj-career-card { background: var(--mj-white); border: 1px solid var(--mj-border); border-radius: var(--mj-radius); padding: 16px; display: block; transition: box-shadow .15s; }
.mj-career-card:hover { box-shadow: var(--mj-shadow); border-color: var(--mj-primary); }
.mj-career-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--mj-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; }
.mj-career-header { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.mj-career-name { font-size: 15px; font-weight: 700; }
.mj-career-sub { font-size: 12px; color: var(--mj-text-sub); }

/* =========================================
   폼 스타일
   ========================================= */
.mj-form-wrap { background: var(--mj-white); border: 1px solid var(--mj-border); border-radius: var(--mj-radius); padding: 28px; }
.mj-form-title { font-size: 20px; font-weight: 800; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--mj-primary); }
.mj-form-group { margin-bottom: 18px; }
.mj-form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--mj-text); }
.mj-form-group label .req { color: var(--mj-vip); margin-left: 2px; }
.mj-form-control { width: 100%; padding: 10px 14px; border: 1px solid var(--mj-border); border-radius: var(--mj-radius); font-size: 14px; transition: border-color .15s; }
.mj-form-control:focus { outline: none; border-color: var(--mj-primary); box-shadow: 0 0 0 3px rgba(26,111,212,.1); }
textarea.mj-form-control { min-height: 160px; resize: vertical; }
select.mj-form-control { background: #fff; }

.mj-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mj-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* 체크박스 그룹 */
.mj-check-group { display: flex; flex-wrap: wrap; gap: 8px; }
.mj-check-group label { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 13px; padding: 6px 10px; background: #f5f7fa; border: 1px solid var(--mj-border); border-radius: 20px; transition: all .15s; }
.mj-check-group input[type=checkbox] { display: none; }
.mj-check-group input[type=checkbox]:checked + span,
.mj-check-group label:has(input:checked) { background: var(--mj-primary); color: #fff; border-color: var(--mj-primary); }

/* 폼 버튼 */
.mj-form-actions { display: flex; gap: 10px; justify-content: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--mj-border); }
.mj-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px; border-radius: var(--mj-radius); font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .15s; }
.mj-btn-primary { background: var(--mj-primary); color: #fff; }
.mj-btn-primary:hover { background: var(--mj-primary-dark); }
.mj-btn-secondary { background: #fff; color: var(--mj-text); border: 1px solid var(--mj-border); }
.mj-btn-secondary:hover { background: #f5f5f5; }
.mj-btn-danger { background: var(--mj-vip); color: #fff; }
.mj-btn-lg { padding: 13px 32px; font-size: 16px; }

/* =========================================
   상세 페이지
   ========================================= */
.mj-detail-wrap { background: var(--mj-white); border: 1px solid var(--mj-border); border-radius: var(--mj-radius); overflow: hidden; }
.mj-detail-header { padding: 24px; border-bottom: 1px solid var(--mj-border); }
.mj-detail-title { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.mj-detail-company { font-size: 15px; color: var(--mj-text-sub); margin-bottom: 16px; }
.mj-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.mj-detail-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mj-detail-meta-item strong { color: var(--mj-primary); }

.mj-detail-body { padding: 24px; }
.mj-detail-section { margin-bottom: 28px; }
.mj-detail-section-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; padding-left: 10px; border-left: 3px solid var(--mj-primary); }
.mj-detail-content { line-height: 1.8; font-size: 14px; white-space: pre-wrap; }

.mj-benefit-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mj-benefit-item { display: flex; align-items: center; gap: 5px; padding: 7px 14px; background: #f0f4ff; border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--mj-primary); }

.mj-detail-actions { padding: 20px 24px; border-top: 1px solid var(--mj-border); display: flex; gap: 10px; align-items: center; justify-content: center; }

/* 연락처 박스 */
.mj-contact-box { background: #f8faff; border: 2px solid var(--mj-primary); border-radius: var(--mj-radius); padding: 20px; text-align: center; margin: 20px 0; }
.mj-contact-box .phone { font-size: 24px; font-weight: 800; color: var(--mj-primary); }
.mj-contact-box .note { font-size: 12px; color: var(--mj-text-sub); margin-top: 6px; }

/* =========================================
   사이드바
   ========================================= */
.mj-side-box { background: var(--mj-white); border: 1px solid var(--mj-border); border-radius: var(--mj-radius); margin-bottom: 16px; overflow: hidden; }
.mj-side-box-title { padding: 12px 16px; font-size: 14px; font-weight: 700; background: var(--mj-bg); border-bottom: 1px solid var(--mj-border); }
.mj-side-box-body { padding: 12px; }

.mj-region-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mj-region-grid a { text-align: center; padding: 7px 4px; font-size: 12px; background: #f5f7fa; border-radius: 6px; transition: all .15s; }
.mj-region-grid a:hover, .mj-region-grid a.active { background: var(--mj-primary); color: #fff; }

.mj-sector-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mj-sector-list a { font-size: 12px; padding: 7px 10px; background: #f5f7fa; border-radius: 6px; text-align: center; transition: all .15s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-sector-list a:hover, .mj-sector-list a.active { background: var(--mj-primary); color: #fff; }

/* =========================================
   통계 / 배너
   ========================================= */
.mj-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.mj-stat-card { background: var(--mj-white); border: 1px solid var(--mj-border); border-radius: var(--mj-radius); padding: 16px; text-align: center; }
.mj-stat-card .num { font-size: 24px; font-weight: 800; color: var(--mj-primary); }
.mj-stat-card .label { font-size: 12px; color: var(--mj-text-sub); margin-top: 2px; }

.mj-banner { border-radius: var(--mj-radius); overflow: hidden; margin-bottom: 16px; }
.mj-banner img { width: 100%; display: block; }

/* =========================================
   히어로 / 메인 섹션
   ========================================= */
.mj-hero { background: linear-gradient(135deg, var(--mj-primary) 0%, #0e3d8a 100%); color: #fff; padding: 48px 0; text-align: center; }
.mj-hero h1 { font-size: 32px; font-weight: 800; margin-bottom: 10px; }
.mj-hero p { font-size: 16px; opacity: .85; margin-bottom: 28px; }
.mj-hero-search { max-width: 600px; margin: 0 auto; display: flex; background: #fff; border-radius: 50px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.2); }
.mj-hero-search input { flex: 1; border: none; padding: 16px 24px; font-size: 15px; outline: none; }
.mj-hero-search button { background: var(--mj-secondary); color: #fff; border: none; padding: 0 28px; font-size: 15px; font-weight: 700; cursor: pointer; }
.mj-hero-search button:hover { background: #e06200; }

.mj-hero-tags { margin-top: 16px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.mj-hero-tags span { font-size: 12px; opacity: .7; }
.mj-hero-tags a { background: rgba(255,255,255,.2); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 13px; transition: background .15s; }
.mj-hero-tags a:hover { background: rgba(255,255,255,.35); }

/* =========================================
   페이지네이션
   ========================================= */
.mj-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 20px 0; }
.mj-pagination a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--mj-border); border-radius: var(--mj-radius); font-size: 13px; transition: all .15s; background: #fff; }
.mj-pagination a:hover { border-color: var(--mj-primary); color: var(--mj-primary); }
.mj-pagination a.active { background: var(--mj-primary); color: #fff; border-color: var(--mj-primary); font-weight: 700; }
.mj-pagination a.prev, .mj-pagination a.next { font-size: 16px; }

/* =========================================
   알림 / 메시지
   ========================================= */
.mj-alert { padding: 14px 18px; border-radius: var(--mj-radius); margin-bottom: 16px; font-size: 14px; }
.mj-alert-info    { background: #dbeafe; color: #1e40af; }
.mj-alert-success { background: #d1fae5; color: #065f46; }
.mj-alert-warning { background: #fef3c7; color: #92400e; }
.mj-alert-error   { background: #fee2e2; color: #991b1b; }

/* =========================================
   마이페이지
   ========================================= */
.mj-my-menu { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--mj-border); }
.mj-my-menu a { padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--mj-text-sub); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.mj-my-menu a.active, .mj-my-menu a:hover { color: var(--mj-primary); border-bottom-color: var(--mj-primary); }

/* =========================================
   반응형
   ========================================= */
@media (max-width: 900px) {
  .mj-layout { grid-template-columns: 1fr; }
  .mj-sidebar { display: none; }
  .mj-stats { grid-template-columns: repeat(3, 1fr); }
  .mj-ad-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mj-gnb { display: none; }
  .mj-ad-grid { grid-template-columns: 1fr; }
  .mj-hero h1 { font-size: 22px; }
  .mj-hero p { font-size: 14px; }
  .mj-form-row, .mj-form-row-3 { grid-template-columns: 1fr; }
  .mj-detail-title { font-size: 18px; }
  .mj-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mj-stat-card .num { font-size: 18px; }
  /* 모바일 검색폼: 셀렉트 2개 나란히 + 검색입력 아래 */
  .mj-search-form { flex-direction: column; gap: 6px; }
  .mj-search-selects { display: flex; gap: 6px; width: 100%; }
  .mj-search-selects select { flex: 1; min-width: 0; }
  .mj-search-form .mj-search-input { width: 100%; }
}

/* =========================================
   푸터
   ========================================= */
.mj-footer { background: #1e2530; color: rgba(255,255,255,.7); padding: 32px 0; margin-top: 40px; font-size: 13px; }
.mj-footer-inner { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.mj-footer-logo { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.mj-footer-info { line-height: 1.8; }
.mj-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.mj-footer-links a { color: rgba(255,255,255,.6); font-size: 12px; }
.mj-footer-links a:hover { color: #fff; }
.mj-footer-bottom { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; color: rgba(255,255,255,.4); }