@charset "utf-8";
/* AI_SPM 레이아웃 셸 — SPM SideBar.vue / MenuList.vue 의 scoped 스타일을 그대로 이식.
   (전역 컴포넌트 스타일은 contents.css 에 있고, 여기엔 사이드바/메뉴만 둔다) */

/* ===== LNB (사이드바) ===== */
nav {
  position: fixed;
  left: 0; top: 0; z-index: 20;
  width: 280px; height: 100vh;
}
nav::before {
  position: absolute; left: 0; z-index: -1;
  width: 100%; height: 100vh;
  background-color: #2e2e30;
  box-shadow: 0 0 20px #00000019;
  content: '';
}
nav .nav-inner { position: relative; width: 100%; height: 100vh; }
nav .nav-inner::before {
  position: absolute; left: 0; top: 0; z-index: 21;
  width: 100%; height: 76px;
  border-bottom: 1px solid #3b3b3c;
  background: #2e2e30;
  content: '';
}
nav .nav-toggle {
  position: relative; width: 100%; height: 76px;
  background: url('../img/logo_02.png') no-repeat 28px 24px;
  z-index: 21;
}

nav aside {
  height: calc(100vh - 86px);
  margin-top: 10px;
  overflow-x: hidden; overflow-y: auto;
}
nav aside::-webkit-scrollbar { width: 4px; border-radius: 2px; }
nav aside::-webkit-scrollbar-track { background-color: #1f2127; border-radius: 2px; }
nav aside::-webkit-scrollbar-thumb { background-color: #414248; border-radius: 2px; }

/* ===== 메뉴 (MenuList.vue .asidebox) ===== */
.asidebox { padding: 0 28px; }
.asidebox .menu_title {
  height: 46px; line-height: 46px;
  color: #979798; font-weight: 800; font-size: 14px;
  cursor: pointer;
}
.asidebox .menu_title a { display: inline-block; width: 100%; padding-left: 34px; }
.asidebox .menu_title.on a { color: #fff; }

.asidebox .submenu > li { height: 46px; color: #979798; font-weight: 600; font-size: 14px; line-height: 46px; }
.asidebox .submenu li a { display: inline-block; width: 100%; padding-left: 34px; }
.asidebox .submenu li a span { line-height: 14px; font-size: 14px; font-weight: 800; color: #979798; }

/* 아이콘 (채용/구직자/대시보드) */
.asidebox .menu_title a.dashboard { background: url('../img/icon/icon_dashboard.png') no-repeat 4px 55%; }
.asidebox .menu_title.on a.dashboard, .asidebox .menu_title a.dashboard:hover { background: url('../img/icon/icon_dashboard_on.png') no-repeat 4px 55%; color: #fff; }
.asidebox .menu_title a.managerecruit { background: url('../img/icon/icon_recruit.png') no-repeat 4px 55%; }
.asidebox .menu_title.on a.managerecruit, .asidebox .menu_title a.managerecruit:hover { background: url('../img/icon/icon_recruit_on.png') no-repeat 4px 55%; color: #fff; }
.asidebox .menu_title a.manageapplicant { background: url('../img/icon/icon_applicant.png') no-repeat 4px 55%; }
.asidebox .menu_title.on a.manageapplicant, .asidebox .menu_title a.manageapplicant:hover { background: url('../img/icon/icon_applicant_on.png') no-repeat 4px 55%; color: #fff; }

/* 서브메뉴 펼침 (활성 메뉴만) */
.asidebox .submenu { height: 0; overflow: hidden; transition: height 0.2s linear; }
.asidebox .menu_title.on + .submenu { height: 46px; }
.asidebox .submenu li a.on span,
.asidebox .submenu li a.router-link-active span,
.asidebox .submenu li a:hover span { color: #fff; }

/* ===== AI 매칭 인재 찾기 — 무게감 있는 신규 버튼 ===== */
.btn-ai-match {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 28px;
  background: linear-gradient(135deg, #2E2E30 0%, #44444a 100%);
  color: #fff; border: 0; border-radius: 10px;
  font-size: 15px; font-weight: 800; letter-spacing: -0.3px;
  box-shadow: 0 6px 18px rgba(46,46,48,0.28);
  position: relative; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-ai-match:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(46,46,48,0.36); }
.btn-ai-match:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.btn-ai-match svg { width: 22px; height: 22px; }
.btn-ai-match .badge-new {
  position: absolute; top: -9px; right: -9px;
  background: #EBB52A; color: #2E2E30;
  font-size: 10px; font-weight: 800; line-height: 1;
  padding: 3px 7px; border-radius: 10px;
  box-shadow: 0 2px 6px rgba(235,181,42,0.5);
}
.ai-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; margin-bottom: 20px;
  background: #FBFBFB; border: 1px solid #E8E8E8; border-radius: 8px;
}
.ai-hero .ai-hero-txt { flex: 1; }
.ai-hero .ai-hero-txt .t { font-size: 15px; font-weight: 800; color: #2E2E30; }
.ai-hero .ai-hero-txt .d { font-size: 12px; color: #7B7B7B; margin-top: 4px; }

/* ===== 매칭 후보 카드 (PassON식) ===== */
.ai-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ai-card-list { display: flex; flex-direction: column; gap: 10px; }
.ai-card {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px; background: #fff;
  border: 1px solid #E8E8E8; border-radius: 8px;
  transition: background 0.15s, box-shadow 0.15s;
}
.ai-card:hover { background: #FCF3DC; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.ai-card .rank {
  flex: 0 0 30px; width: 30px; height: 30px; line-height: 30px; text-align: center;
  background: #2E2E30; color: #fff; border-radius: 50%; font-size: 13px; font-weight: 800;
}
.ai-card .score { flex: 0 0 80px; text-align: center; }
.ai-card .score .num { font-size: 24px; font-weight: 800; color: #EBB52A; line-height: 1; }
.ai-card .score .lab { font-size: 11px; color: #979798; margin-top: 3px; }
.ai-card .info { flex: 1; min-width: 0; }
.ai-card .info .name { font-size: 15px; font-weight: 800; color: #2E2E30; }
.ai-card .info .name a:hover { text-decoration: underline; }
.ai-card .info .meta { font-size: 11px; color: #979798; margin-top: 2px; }
.ai-card .info .reason { font-size: 12px; color: #7B7B7B; margin-top: 6px; line-height: 1.5; }
.ai-card .actions { flex: 0 0 auto; }
.ai-card.applied { background: #F8F8F8; }

/* ===== 목록 행 hover (SPM 동일) — 행 배경만 바뀌고 링크 글자색은 고정 ===== */
.boardwrite table tbody tr.colored:hover td { background: #FCF3DC !important; }
.boardwrite table tbody tr.colored a,
.boardwrite table tbody tr.colored a:hover { color: #2E2E30; text-decoration: none; }

/* ===== 상세 보기 — SPM .recruitdetail / .formgroup 스타일 복제 ===== */
/* 컨테이너: 테두리 + 내부 여백(타이틀과 테이블이 붙지 않도록) */
.detailview .pannelbox .pannel-contents { border: 1px solid #E8E8E8; padding: 20px; background: #fff; }
/* 라벨/값 구분: 라벨(th)·헤더 회색 배경 + 전체 그리드 라인 (SPM 동일 — 색+라인) */
.detailview .pannel-contents .boardwrite table {
  border-top: 1px solid #E8E8E8; border-left: 1px solid #E8E8E8;
}
.detailview .pannel-contents .boardwrite table th,
.detailview .pannel-contents .boardwrite table td {
  border-right: 1px solid #E8E8E8; border-bottom: 1px solid #E8E8E8; border-top: 0;
  padding: 10px 14px; vertical-align: middle; height: auto; text-align: left;
}
/* 라벨(tbody th) + 컬럼헤더(thead th) = 회색 배경 */
.detailview .pannel-contents .boardwrite table tbody th,
.detailview .pannel-contents .boardwrite table thead th {
  background: #FBFBFB; color: #2E2E30; font-weight: bold;
}
.detailview .pannel-contents .boardwrite table tbody th span { font-weight: bold; }
/* 값(td) = 흰 배경 */
.detailview .pannel-contents .boardwrite table tbody td { background: #fff; color: #2E2E30; }
/* 섹션(패널) 사이 간격은 기본 40px 유지 */

/* ===== TOP 버튼 (SPM TopButton.vue 동일) — 스크롤 따라다님 ===== */
.container { scroll-behavior: smooth; }
.btn-top {
  position: fixed; right: 50px; bottom: 50px; z-index: 30;
  width: 55px; height: 50px;
  color: #fff; font-size: 12px; font-weight: 600;
}
.btn-top:before {
  content: ''; display: block; width: 0; height: 0; margin: 0 auto 5px;
  border-bottom: 8px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent;
}

/* 상단 AI 버튼은 약간 컴팩트하게 — 우측 상단(목록 버튼 옆) */
.ai-top-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 15px; }
.ai-top-bar .btn-ai-match { height: 44px; padding: 0 22px; font-size: 14px; }
.ai-top-bar .btn-ai-match svg { width: 19px; height: 19px; }