@charset "utf-8";
/* 피플앤잡 네트워크 공통 리스킨 레이어 (theme/basic 적용) — 기존 default.css/{cf_color}.css 위에 얹혀서
   헤더 유틸/로고/검색/메뉴/네트워크패널/푸터의 색·간격·타이포만 재정의합니다.
   결제·유료서비스 관련 PHP 로직 및 게시판 내부 스킨은 건드리지 않습니다. */

:root{
  --pnj-paper:#f2f1f5;
  --pnj-surface:#ffffff;
  --pnj-surface-2:#ebe9f0;
  --pnj-ink:#1c1a2b;
  --pnj-ink-muted:#66637a;
  --pnj-ink-faint:#9693a8;
  --pnj-line:#e1dfe8;
  --pnj-line-strong:#cbc8d6;
  --pnj-shadow: 0 1px 2px rgba(28,26,43,0.05), 0 12px 32px -16px rgba(28,26,43,0.18);

  --pnj-accent-hub:#423f7a;
  --pnj-accent-food:#c1602f;
  --pnj-accent-beauty:#a8546f;
  --pnj-accent-solution:#1f6f74;
  --pnj-accent:var(--pnj-accent-hub);
  --pnj-accent-ink:#ffffff;
}
:root[data-theme="dark"]{
  --pnj-paper:#14131c;
  --pnj-surface:#1c1a29;
  --pnj-surface-2:#242233;
  --pnj-ink:#eeecf5;
  --pnj-ink-muted:#a5a2b8;
  --pnj-ink-faint:#716e85;
  --pnj-line:#2d2b3d;
  --pnj-line-strong:#3a374d;
  --pnj-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px -16px rgba(0,0,0,0.6);
  --pnj-accent-hub:#9490d1;
  --pnj-accent-food:#e08a55;
  --pnj-accent-beauty:#cf90a8;
  --pnj-accent-solution:#4fa8ad;
  --pnj-accent-ink:#14131c;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pnj-paper:#14131c;
    --pnj-surface:#1c1a29;
    --pnj-surface-2:#242233;
    --pnj-ink:#eeecf5;
    --pnj-ink-muted:#a5a2b8;
    --pnj-ink-faint:#716e85;
    --pnj-line:#2d2b3d;
    --pnj-line-strong:#3a374d;
    --pnj-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px -16px rgba(0,0,0,0.6);
    --pnj-accent-hub:#9490d1;
    --pnj-accent-food:#e08a55;
    --pnj-accent-beauty:#cf90a8;
    --pnj-accent-solution:#4fa8ad;
    --pnj-accent-ink:#14131c;
  }
}
html[data-vertical="food"]     { --pnj-accent:var(--pnj-accent-food); }
html[data-vertical="beauty"]   { --pnj-accent:var(--pnj-accent-beauty); }
html[data-vertical="solution"] { --pnj-accent:var(--pnj-accent-solution); }
html[data-vertical="hub"]      { --pnj-accent:var(--pnj-accent-hub); }

@media (prefers-reduced-motion: reduce){
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

body{ background:var(--pnj-paper); color:var(--pnj-ink); }

/* ---------------------------------------------------------
   상단 유틸바
   --------------------------------------------------------- */
.util{ background:var(--pnj-surface); border-bottom:1px solid var(--pnj-line); }
.util .default_layout{
  max-width:1180px; margin:0 auto; padding:8px 20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.util ul{ display:flex; align-items:center; margin:0 0 0 auto; padding:0; list-style:none; }
.util ul li{ margin-left:12px; font-size:12px; }
.util ul a{ color:var(--pnj-ink-muted); text-decoration:none; }
.util ul a:hover{ color:var(--pnj-accent); }
.util .bookmark{ display:none; }
#google_translate_element{ font-size:11px; }

.pnj_vswitch{ display:flex; gap:2px; padding:3px; background:var(--pnj-surface-2); border-radius:100px; }
.pnj_vtab{ font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:100px; color:var(--pnj-ink-muted); text-decoration:none; transition:background .25s ease, color .25s ease; }
.pnj_vtab:hover{ color:var(--pnj-ink); }
.pnj_vtab.is_active{ background:var(--pnj-accent); color:var(--pnj-accent-ink); }

#pnj_theme_toggle{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--pnj-line-strong);
  background:var(--pnj-surface); color:var(--pnj-ink); cursor:pointer; font-size:13px; padding:0; line-height:1;
}

/* ---------------------------------------------------------
   로고 / 검색 / 상단배너
   --------------------------------------------------------- */
.top_center_box{
  max-width:1180px; margin:0 auto; padding:20px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:var(--pnj-surface);
}
#logo{ margin:0; }
#logo img{ height:34px; width:auto; }

.top_search .text_input input{
  height:36px; border:1px solid var(--pnj-line-strong); border-radius:100px 0 0 100px; padding:0 16px;
  background:var(--pnj-surface); color:var(--pnj-ink); font-size:13.5px; width:220px;
}
.top_search .btn_input input{
  height:36px; border:none; border-radius:0 100px 100px 0; padding:0 18px; background:var(--pnj-accent);
  color:var(--pnj-accent-ink); font-weight:700; font-size:13px; cursor:pointer;
}
.top_search{ display:flex; align-items:center; }
.top_search form{ display:flex; }
.top_mobile_news{ flex:1 1 100%; font-size:12.5px; color:var(--pnj-ink-muted); }

/* ---------------------------------------------------------
   메인 메뉴
   --------------------------------------------------------- */
#topMenubox{ background:var(--pnj-surface); border-bottom:1px solid var(--pnj-line); }
#topMenubox .default_layout{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
}
#topMenu{ display:flex; align-items:center; margin:0; padding:0; list-style:none; overflow-x:auto; }
.menu_list{ position:relative; }
.depth_link{
  display:inline-block; padding:14px 16px; font-size:13.5px; font-weight:700; color:var(--pnj-ink-muted);
  text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap;
}
.depth_link:hover{ color:var(--pnj-accent); }
.depth_box{
  position:absolute; top:100%; left:0; z-index:30; min-width:160px; background:var(--pnj-surface);
  border:1px solid var(--pnj-line); border-radius:10px; box-shadow:var(--pnj-shadow); padding:6px;
}
.depth_box ul{ margin:0; padding:0; list-style:none; }
.depth_link2{ display:block; padding:9px 12px; border-radius:7px; font-size:12.5px; color:var(--pnj-ink); text-decoration:none; }
.depth_link2:hover{ background:var(--pnj-surface-2); color:var(--pnj-accent); }

.topMenu_etc{ display:flex; gap:8px; margin:0; padding:8px 0; list-style:none; }
.topMenu_etc a{
  display:inline-block; padding:8px 14px; border-radius:100px; font-size:12.5px; font-weight:700; text-decoration:none;
}
.topMenu_etc .btn01 a{ background:var(--pnj-surface-2); color:var(--pnj-ink); }
.topMenu_etc .btn02 a{ background:var(--pnj-accent); color:var(--pnj-accent-ink); }

/* ---------------------------------------------------------
   네트워크 & 유용한 정보 패널 (구 floating 패널)
   --------------------------------------------------------- */
.pnj_netpanel{ background:var(--pnj-surface-2); border-bottom:1px solid var(--pnj-line); }
.pnj_netpanel .default_layout{ max-width:1180px; margin:0 auto; padding:18px 20px; }
.pnj_netpanel_music{ margin-bottom:10px; }
.pnj_netpanel_music button{
  border:1px solid var(--pnj-line-strong); background:var(--pnj-surface); border-radius:8px; padding:5px 10px;
  font-size:12px; margin-right:6px; cursor:pointer; color:var(--pnj-ink);
}
.pnj_netpanel_grid{ display:grid; grid-template-columns:repeat(3,1fr) 1.2fr; gap:16px; align-items:start; }
@media (max-width:920px){ .pnj_netpanel_grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .pnj_netpanel_grid{ grid-template-columns:1fr; } }
.pnj_netcat h2{ margin:0 0 8px; font-size:12px; font-weight:700; color:var(--pnj-ink-faint); text-transform:uppercase; letter-spacing:.04em; }
.pnj_netcat{ display:flex; flex-direction:column; }
.pnj_netcat a{ font-size:13px; color:var(--pnj-ink-muted); text-decoration:none; padding:3px 0; }
.pnj_netcat a:hover{ color:var(--pnj-accent); }

.pnj_crosscard{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px;
  background:var(--pnj-surface); border:1px solid var(--pnj-line); text-decoration:none; align-self:stretch;
}
.pnj_crosscard_glyph{
  flex:none; width:36px; height:36px; border-radius:10px; background:var(--pnj-accent); color:var(--pnj-accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800;
}
.pnj_crosscard_text{ display:flex; flex-direction:column; font-size:13px; color:var(--pnj-ink); }
.pnj_crosscard_text em{ font-style:normal; font-size:10.5px; color:var(--pnj-ink-faint); margin-bottom:2px; }
.pnj_crosscard:hover .pnj_crosscard_text{ color:var(--pnj-accent); }

/* ---------------------------------------------------------
   본문 폭
   --------------------------------------------------------- */
#wrap{ background:var(--pnj-paper); }
#container{ max-width:1180px; margin:0 auto; padding:0 20px; }
.guide_group h3{ color:var(--pnj-ink); }

/* ---------------------------------------------------------
   하단
   --------------------------------------------------------- */
#footergroup{ background:var(--pnj-surface); border-top:1px solid var(--pnj-line); color:var(--pnj-ink-muted); }
.f_cscenter .default_layout, .f_util ul, .f_info{ max-width:1180px; margin:0 auto; padding-left:20px; padding-right:20px; }
.f_cscenter h3{ color:var(--pnj-ink); font-size:14px; }
.f_util ul{ display:flex; gap:16px; list-style:none; padding-top:14px; padding-bottom:14px; border-top:1px solid var(--pnj-line); font-size:12px; }
.f_util a{ color:var(--pnj-ink-muted); text-decoration:none; }
.f_util a:hover{ color:var(--pnj-accent); }
.f_info{ padding-top:16px; padding-bottom:24px; font-size:12px; line-height:1.9; color:var(--pnj-ink-faint); }
.f_logo img{ height:20px; opacity:.7; }

/* ---------------------------------------------------------
   모바일 테마 (theme/basic/mobile)
   --------------------------------------------------------- */
#header{ background:var(--pnj-surface); border-bottom:1px solid var(--pnj-line); }
.pnj_m_topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; border-bottom:1px solid var(--pnj-line);
}
.pnj_m_topbar .pnj_vswitch{ display:flex; gap:2px; padding:3px; background:var(--pnj-surface-2); border-radius:100px; }
.pnj_m_topbar .pnj_vtab{ font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:100px; color:var(--pnj-ink-muted); text-decoration:none; }
.pnj_m_topbar .pnj_vtab.is_active{ background:var(--pnj-accent); color:var(--pnj-accent-ink); }
.pnj_m_topbar #pnj_theme_toggle{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--pnj-line-strong);
  background:var(--pnj-surface); color:var(--pnj-ink); font-size:12px; padding:0;
}

.header_top{ padding:10px 14px; text-align:center; }
.header_top h2 img{ height:28px; width:auto; }
.top_search_box input#sch_stx{
  height:38px; border:1px solid var(--pnj-line-strong); border-radius:100px 0 0 100px; padding:0 14px;
  background:var(--pnj-surface); color:var(--pnj-ink); font-size:13.5px; width:70%;
}
.top_search_box .btn input{
  height:38px; border:none; border-radius:0 100px 100px 0; padding:0 16px; background:var(--pnj-accent);
  color:var(--pnj-accent-ink); font-weight:700;
}

.top_sub_menu{ display:flex; overflow-x:auto; gap:4px; margin:0; padding:8px 10px; list-style:none; background:var(--pnj-surface-2); }
.top_sub_menu a{ display:block; padding:8px 12px; border-radius:100px; font-size:12.5px; font-weight:600; color:var(--pnj-ink-muted); text-decoration:none; white-space:nowrap; background:var(--pnj-surface); }
.top_sub_menu a:hover{ color:var(--pnj-accent); }

#menu .menu_contents_box{ background:var(--pnj-surface); color:var(--pnj-ink); }
#menu .login_off{ background:var(--pnj-surface-2); }
#menu .login_off .btn a{ background:var(--pnj-accent); color:var(--pnj-accent-ink); }
#menu dt.menu_list a{ color:var(--pnj-ink); border-bottom:1px solid var(--pnj-line); }

#containers{ background:var(--pnj-paper); }

.pnj_m_crosscard{ margin:14px; }

/* ===========================================================
   홈페이지 본문 (theme/basic/index.php) — 카드형 디자인으로 통일
   =========================================================== */
.default_layout{ max-width:1180px; margin:0 auto; padding-left:20px; padding-right:20px; box-sizing:border-box; }

/* 상단 배너 슬라이드 */
.main_top{ padding:24px 0 8px; }
.main_top_banner{ border-radius:16px; overflow:hidden; box-shadow:var(--pnj-shadow); }

/* 퀵 채용/인재 캐러셀 */
.quick_job_view{
  background:var(--pnj-surface); border:1px solid var(--pnj-line); border-radius:16px; padding:16px;
  margin-top:16px; box-shadow:var(--pnj-shadow);
}
.quick_job_view .tep_list{ margin:0; padding:0; }
.quick_job_view dt.btn{
  display:inline-block; padding:7px 16px; margin:0 6px 12px 0; border-radius:100px; font-size:13px; font-weight:700;
  color:var(--pnj-ink-muted); background:var(--pnj-surface-2); cursor:pointer;
}
.quick_job_view dt.btn.on{ background:var(--pnj-accent); color:var(--pnj-accent-ink); }
.quick_job_view dd .box{
  display:inline-flex !important; align-items:center; gap:10px; padding:10px; margin-right:10px;
  border:1px solid var(--pnj-line); border-radius:12px; min-width:220px; background:var(--pnj-surface);
}
.quick_job_view dd .box img{ border-radius:8px; }
.quick_job_view .info .t1{ font-weight:700; font-size:13px; color:var(--pnj-ink); }
.quick_job_view .info .t2{ font-size:12.5px; color:var(--pnj-ink-muted); }
.quick_job_view .info .t3{ font-size:11.5px; color:var(--pnj-ink-faint); display:flex; align-items:center; gap:4px; margin-top:2px; }
.quick_job_view .pager{ margin-top:10px; text-align:right; font-size:12px; color:var(--pnj-ink-faint); }

/* 메인 로그인 박스 */
.main_login{ margin-top:16px; }
.main_login .box{
  background:var(--pnj-surface); border:1px solid var(--pnj-line); border-radius:16px; padding:18px;
  box-shadow:var(--pnj-shadow);
}
#outlogin, .outlogin{ color:var(--pnj-ink); }
#outlogin input[type="text"], #outlogin input[type="password"],
.outlogin input[type="text"], .outlogin input[type="password"]{
  border:1px solid var(--pnj-line-strong); border-radius:8px; padding:8px 10px; background:var(--pnj-surface); color:var(--pnj-ink);
}
#outlogin .btn_submit, .outlogin .btn_submit,
#outlogin input[type="submit"], .outlogin input[type="submit"]{
  background:var(--pnj-accent); color:var(--pnj-accent-ink); border-radius:8px; border:none;
}
#outlogin a, .outlogin a{ color:var(--pnj-ink-muted); }

/* 바로가기 3단 (분야별/실시간채용/지역별) + 문의처 */
.main_bottom{ padding:28px 0; }
.main_quick_item{ display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:16px; align-items:start; }
@media (max-width:920px){ .main_quick_item{ grid-template-columns:1fr; } }
.main_quick_item .col{
  background:var(--pnj-surface); border:1px solid var(--pnj-line); border-radius:14px; padding:16px;
}
.main_quick_item .col h3{
  margin:0 0 10px; font-size:13.5px; font-weight:800; color:var(--pnj-ink); display:flex; align-items:center; gap:6px;
}
.main_quick_item .col h3 img{ display:none; }
.main_quick_item .col h3::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--pnj-accent); display:inline-block; }
.main_quick_item .col ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.main_quick_item .col.m2 ul{ display:block; }
.main_quick_item .col a{ font-size:12.5px; color:var(--pnj-ink-muted); text-decoration:none; }
.main_quick_item .col.m1 a, .main_quick_item .col.m3 a{
  display:inline-block; padding:5px 10px; border-radius:100px; background:var(--pnj-surface-2);
}
.main_quick_item .col.m1 a:hover, .main_quick_item .col.m3 a:hover{ color:var(--pnj-accent); }
.main_quick_item .col.m2 li{ padding:8px 0; border-bottom:1px dashed var(--pnj-line); font-size:12.5px; }
.main_quick_item .col.m2 li:last-child{ border-bottom:none; }
.main_quick_item .col.m2 a{ color:var(--pnj-ink); }
.main_quick_item .col.m2 a:hover{ color:var(--pnj-accent); }
.main_quick_item .col.m2 font[color="orange"]{ color:var(--pnj-urgent) !important; font-size:11px; }

.main_side{ grid-column:1 / -1; }
.main_cs{
  display:flex; gap:20px; padding:12px 16px; background:var(--pnj-surface-2); border-radius:12px;
  list-style:none; margin:0; font-size:12.5px; color:var(--pnj-ink-muted);
}
.main_cs ul{ display:flex; gap:20px; margin:0; padding:0; list-style:none; }
.main_cs i{ color:var(--pnj-accent); margin-right:5px; }

/* 섹션 타이틀 (그랜드/긴급/일반 채용정보) */
.common_title{
  display:flex; align-items:baseline; justify-content:space-between; margin:28px 0 14px;
  padding-bottom:10px; border-bottom:1px solid var(--pnj-line);
}
.common_title h3{ margin:0; font-size:17px; font-weight:800; color:var(--pnj-ink); }
.common_title .btn img{ height:24px; width:auto; border-radius:6px; }
.common_title .btn{ display:flex; gap:6px; }

/* 그랜드/긴급/추천 카드 그리드 (li.box 구조) */
.grand_banner ul, .focus_banner ul, .recommend_banner ul{
  display:grid; gap:12px; margin:0; padding:0; list-style:none;
  grid-template-columns:repeat(4,1fr);
}
.focus_banner ul{ grid-template-columns:repeat(3,1fr); }
.recommend_banner ul{ grid-template-columns:repeat(2,1fr); }
@media (max-width:920px){ .grand_banner ul, .focus_banner ul, .recommend_banner ul{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grand_banner ul, .focus_banner ul, .recommend_banner ul{ grid-template-columns:1fr; } }

.grand_banner li.list, .focus_banner li.list, .recommend_banner li{ list-style:none; }
.grand_banner .box, .focus_banner .box, .recommend_banner .box{
  display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid var(--pnj-line); border-radius:14px;
  background:var(--pnj-surface); position:relative; transition:box-shadow .2s ease, transform .2s ease;
  min-height:64px;
}
.grand_banner .box:hover, .focus_banner .box:hover, .recommend_banner .box:hover{
  box-shadow:var(--pnj-shadow); transform:translateY(-2px);
}
.grand_banner .box.no_data, .focus_banner .box.no_data, .recommend_banner .box.no_data{
  align-items:center; justify-content:center; color:var(--pnj-ink-faint); font-size:12px; background:var(--pnj-surface-2);
}
.grand_banner .subject a, .focus_banner .subject a{ font-weight:700; font-size:13.5px; color:var(--pnj-ink); text-decoration:none; }
.grand_banner .subject_info a, .focus_banner .subject_info a{ font-size:12.5px; color:var(--pnj-ink-muted); text-decoration:none; }
.grand_banner .info_line, .focus_banner .info_line{
  display:flex; justify-content:space-between; font-size:11.5px; color:var(--pnj-ink-faint);
  padding-top:8px; border-top:1px dashed var(--pnj-line); margin-top:auto;
}
.grand_banner .employ_info, .focus_banner .employ_info{ color:var(--pnj-ink-faint); }
.grand_banner .price_info, .focus_banner .price_info{ font-weight:700; color:var(--pnj-ink); }
.grand_banner .more_btn a, .focus_banner .more_btn a{ font-size:11px; color:var(--pnj-accent); text-decoration:none; }
.grand_banner .photo img, .focus_banner .photo img{ border-radius:10px; }

.recommend_banner li .box{ min-height:44px; justify-content:center; }
.recommend_banner .company a{ font-weight:700; font-size:12.5px; color:var(--pnj-ink); text-decoration:none; }
.recommend_banner .cont a{ font-size:12px; color:var(--pnj-ink-muted); text-decoration:none; }

/* 일반 채용정보 테이블 */
table.cStyle5{
  width:100%; border-collapse:collapse; font-size:12.5px; background:var(--pnj-surface);
  border:1px solid var(--pnj-line) !important; border-radius:12px; overflow:hidden;
}
table.cStyle5 th{
  background:var(--pnj-surface-2) !important; color:var(--pnj-ink-muted) !important; font-weight:700;
  border-bottom:1px solid var(--pnj-line) !important; padding:10px 6px !important;
}
table.cStyle5 td{ color:var(--pnj-ink) !important; border-bottom:1px solid var(--pnj-line) !important; padding:9px 6px !important; }
table.cStyle5 ul li.list:hover{ background:var(--pnj-surface-2) !important; }
table.cStyle5 tr:hover td{ background:var(--pnj-surface-2); }

/* 접속자집계 위젯 */
#visit{
  display:inline-flex; align-items:center; gap:14px; padding:8px 14px; margin:10px 0;
  background:var(--pnj-surface); border:1px solid var(--pnj-line); border-radius:100px; font-size:11.5px;
  color:var(--pnj-ink-muted);
}
#visit h2{ position:absolute; font-size:0; overflow:hidden; }
#visit dl{ display:flex; gap:12px; margin:0; }
#visit dt{ font-weight:600; }
#visit dd{ margin:0; font-weight:700; color:var(--pnj-ink); font-variant-numeric:tabular-nums; }

/* 인기검색어 위젯 */
#popular{
  padding:8px 14px; margin:6px 0; background:var(--pnj-surface); border:1px solid var(--pnj-line);
  border-radius:100px; font-size:11.5px; color:var(--pnj-ink-muted);
}
#popular h2{ position:absolute; font-size:0; overflow:hidden; }
#popular a{ color:var(--pnj-ink-muted); margin-right:8px; }
#popular a:hover{ color:var(--pnj-accent); }