@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); }

/* ---------------------------------------------------------
   상단 유틸바
   --------------------------------------------------------- */
#header .util,
.util{ height:auto !important; background:var(--pnj-surface); border-bottom:1px solid var(--pnj-line); overflow:visible !important; }
#header .util .default_layout,
.util .default_layout{
  max-width:1180px; margin:0 auto; padding:8px 20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
#header .util ul,
.util ul{ float:none !important; display:flex; align-items:center; margin:0 0 0 auto; padding:0; list-style:none; }
#header .util ul li,
.util ul li{ float:none !important; margin-left:12px; font-size:12px; }
#header .util ul li a,
.util ul a{ background:none !important; color:var(--pnj-ink-muted); text-decoration:none; }
.util ul a:hover{ color:var(--pnj-accent); }
.util .bookmark{ display:none !important; }
#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;
}

/* ---------------------------------------------------------
   로고 / 검색 / 상단배너
   --------------------------------------------------------- */
/* 주의: 그누보드5 레거시 색상스킨(grn.css/dbl.css/wht.css 등)이 #header 접두사가 붙은
   고특이도(specificity) 셀렉터 + 절대위치(position:absolute)로 이 영역을 하드코딩하고 있어서,
   같은 접두사 패턴 + !important 없이는 새 스타일이 씹힘. 아래는 그 문제를 해결한 버전. */
#header .top_center_box,
.top_center_box{
  height:auto !important;
  max-width:1180px; margin:0 auto !important; padding:20px !important;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:var(--pnj-surface);
}
#header .top_center_box #logo,
#logo{ float:none !important; line-height:normal !important; margin:0; }
#header .top_center_box #logo img,
#logo img{ height:46px !important; width:auto !important; vertical-align:middle; }

#header .top_center_box .top_search,
.top_search{
  position:static !important; left:auto !important; top:auto !important; width:auto !important;
  display:flex; align-items:center;
}
/* .top_search 바로 아래는 <form>이 한 겹 더 감싸고 있어서, .top_search에만 flex를 줘도
   text_input/btn_input이 form의 기본 block 흐름을 타고 세로로 쌓임 — form도 flex로 펴줘야 함 */
#header .top_center_box .top_search form,
.top_search form{ display:flex !important; align-items:center; }
#header .top_center_box .top_search .text_input,
.top_search .text_input{ margin-right:0 !important; }
#header .top_center_box .top_search .text_input input,
.top_search .text_input input{
  width:220px !important; height:36px !important; line-height:normal !important;
  border:1px solid var(--pnj-line-strong) !important; border-radius:100px 0 0 100px; padding:0 16px;
  background:var(--pnj-surface); color:var(--pnj-ink); font-size:13.5px;
}
#header .top_center_box .top_search .btn_input,
.top_search .btn_input{ position:static !important; right:auto !important; top:auto !important; width:auto !important; }
#header .top_center_box .top_search .btn_input input,
.top_search .btn_input input{
  width:auto !important; height:36px !important; border:none !important; border-radius:0 100px 100px 0;
  padding:0 18px; text-indent:0 !important; background-image:none !important;
  background-color:var(--pnj-accent) !important; color:var(--pnj-accent-ink); font-weight:700; font-size:13px; cursor:pointer;
}
/* 방문자 카운터(Histats 등 서드파티 위젯) — 로고/검색 줄이 아니라 최상단 유틸바 오른쪽 끝에
   작게 표시되도록 head.php에서 .util 안으로 위치 이동함(구조 변경) */
#header .util .top_mobile_news,
.util .top_mobile_news{
  float:none !important; margin:0 0 0 14px !important; flex:0 0 auto;
  font-size:10.5px; line-height:1.4; color:var(--pnj-ink-faint); opacity:.8;
}
#header .top_center_box .top_mobile_news,
.top_mobile_news{ float:none !important; margin-top:0 !important; font-size:12.5px; color:var(--pnj-ink-muted); }

/* ---------------------------------------------------------
   메인 메뉴
   --------------------------------------------------------- */
#topMenubox{ background:var(--pnj-surface) !important; 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{ float:none !important; display:flex; align-items:center; margin:0; padding:0; list-style:none; overflow-x:auto; }
#topMenu li.menu_list,
.menu_list{ position:relative; margin:0 !important; letter-spacing:normal !important; }
#topMenu li.menu_list a.depth_link,
.depth_link{
  display:inline-block; padding:14px 16px !important; font-size:13.5px !important; font-weight:700; color:var(--pnj-ink-muted) !important;
  text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; line-height:normal !important;
  background:none !important;
}
#topMenu li.menu_list a.depth_link:hover,
.depth_link:hover{ color:var(--pnj-accent) !important; }
.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) !important; color:var(--pnj-ink) !important; }
.topMenu_etc .btn02 a{ background:var(--pnj-accent) !important; color:var(--pnj-accent-ink) !important; }

/* ---------------------------------------------------------
   네트워크 &amp; 유용한 정보 패널 (원래 우상단에 떠다니던 floating 패널로 복원)
   --------------------------------------------------------- */
/* 본문 흐름을 차지하는 가로 스트립이 아니라, 원래 컨셉대로 우측에 붙어 스크롤을 따라다니는
   별도 layer로 복원. 좁은 화면에서는 본문과 겹칠 수 있어 넓은 화면(1700px+)에서만 노출. */
.pnj_netpanel{
  display:none; box-sizing:border-box;
}
@media (min-width:1700px){
  .pnj_netpanel.is_open{
    display:block; position:fixed; top:110px; right:20px; z-index:400;
    width:220px; max-height:calc(100vh - 150px); overflow-y:auto; overflow-x:hidden;
    background:var(--pnj-surface); border:1px solid var(--pnj-line); border-radius:14px;
    box-shadow:var(--pnj-shadow);
  }
}
.pnj_netpanel_head{
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px;
  border-bottom:1px solid var(--pnj-line); font-size:11px; font-weight:700; color:var(--pnj-ink-faint);
}
.pnj_netpanel_close{
  border:none; background:none; color:var(--pnj-ink-faint); cursor:pointer; font-size:14px; line-height:1; padding:2px 4px;
}
.pnj_netpanel_close:hover{ color:var(--pnj-accent); }
/* 중첩 flex(컬럼)의 stretch 계산에 기대지 않고, 각 단계마다 명시적으로 width:100%+border-box를
   지정하는 순수 블록 흐름으로 작성 — 링크가 안 줄바꿈되고 옆으로 넘치던 문제를 확실히 방지 */
.pnj_netpanel .default_layout{
  max-width:none; width:100%; box-sizing:border-box; margin:0; padding:12px;
  display:block;
}
.pnj_netpanel_music{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
.pnj_netpanel_music button{
  border:1px solid var(--pnj-line-strong); background:var(--pnj-surface); border-radius:100px; padding:3px 8px;
  font-size:10.5px; cursor:pointer; color:var(--pnj-ink-muted);
}
.pnj_netpanel_grid{ display:block; width:100%; }
.pnj_netcat{ display:block; width:100%; margin-bottom:10px; }
.pnj_netcat h2{
  display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--pnj-ink-faint); margin:0 0 4px 2px;
}
.pnj_netcat a{
  display:block; width:100%; box-sizing:border-box; font-size:11.5px; color:var(--pnj-ink-muted); text-decoration:none;
  padding:4px 8px; border-radius:8px; margin:1px 0; white-space:normal; word-break:keep-all; overflow-wrap:break-word;
}
.pnj_netcat a:hover{ color:var(--pnj-accent); background:var(--pnj-surface-2); }

.pnj_crosscard{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; width:100%; box-sizing:border-box;
  background:var(--pnj-surface-2); border:1px solid var(--pnj-line); text-decoration:none;
}
.pnj_crosscard_glyph{
  flex:none; width:22px; height:22px; border-radius:6px; background:var(--pnj-accent); color:var(--pnj-accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;
}
.pnj_crosscard_text{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; font-size:11.5px; color:var(--pnj-ink-muted);
  white-space:normal; flex:1 1 auto; min-width:0; word-break:keep-all;
}
.pnj_crosscard_text em{ display:block; font-size:10px; font-style:normal; color:var(--pnj-ink-faint); }
.pnj_crosscard:hover .pnj_crosscard_text{ color:var(--pnj-accent); }

/* 접었을 때 다시 열 수 있는 작은 탭 */
.pnj_netpanel_reopen{
  display:none;
}
@media (min-width:1700px){
  .pnj_netpanel_reopen{
    display:block; position:fixed; top:110px; right:0; z-index:400;
    writing-mode:vertical-rl; background:var(--pnj-surface); border:1px solid var(--pnj-line); border-right:none;
    border-radius:10px 0 0 10px; padding:10px 6px; font-size:11px; color:var(--pnj-ink-faint); cursor:pointer;
  }
  .pnj_netpanel_reopen:hover{ 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{ margin-top:0 !important; background:var(--pnj-surface); border-top:1px solid var(--pnj-line); color:var(--pnj-ink-muted); }
#footergroup .f_cscenter{ padding:24px 0 !important; background:none !important; }
#footergroup .f_cscenter .default_layout{ background:none !important; }
#footergroup .f_cscenter .default_layout .box{ padding:0 !important; }
#footergroup .f_cscenter .default_layout .box .col{ float:none !important; min-height:0 !important; border-right:none !important; padding:0 !important; }
.f_cscenter .default_layout, .f_util ul, .f_info{ max-width:1180px; margin:0 auto; padding-left:20px; padding-right:20px; }
#footergroup .f_cscenter h3,
.f_cscenter h3{ color:var(--pnj-ink); font-size:14px; font-weight:700; margin-bottom:8px !important; }
.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; }

/* 상단 배너 슬라이드 + 퀵채용 + 로그인박스: 원래 theme/basic/css/main.css(홈페이지 전용)가
   float:left/float:right + 고정폭(478/310/255px) 픽셀 계산으로 딱 맞춰놓은 3단 레이아웃이라,
   .default_layout에 패딩을 더한 순간 여유폭이 깨져서 로그인박스가 다음 줄로 밀려남.
   float 픽셀 계산에 기대지 않도록 flex로 강제 전환. */
.main_top{
  overflow:visible !important; padding:24px 0 8px;
  display:flex !important; align-items:flex-start; gap:16px; flex-wrap:wrap;
}
.main_top_banner{
  float:none !important; width:auto !important; height:auto !important; margin-right:0 !important;
  flex:1 1 380px; min-width:280px; align-self:stretch;
  border:none !important; border-radius:16px; overflow:hidden; box-shadow:var(--pnj-shadow);
}
.main_top_banner img{ width:100%; height:100%; object-fit:cover; }

/* 퀵 채용/인재 캐러셀 */
.quick_job_view{
  float:none !important; width:340px !important; flex:0 0 340px;
  background:var(--pnj-surface); border:1px solid var(--pnj-line) !important; border-radius:16px; padding:16px;
  margin-top:0 !important; box-shadow:var(--pnj-shadow);
}
@media (max-width:900px){ .quick_job_view{ width:100% !important; flex:1 1 100%; } }
.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{
  float:none !important; width:255px !important; height:auto !important; margin-top:0 !important;
  flex:0 0 255px; align-self:stretch;
}
@media (max-width:900px){ .main_login{ width:100% !important; flex:1 1 100%; } }
.main_login .box{
  background:var(--pnj-surface); border:1px solid var(--pnj-line) !important; border-radius:16px; padding:18px;
  box-shadow:var(--pnj-shadow); height:auto !important;
}
#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.css가 .main_bottom{overflow:hidden} + .main_quick_item{height:188px} +
   .m1/.m2/.m3{width:305px/501px/262px} 고정값을 걸어놔서, 카테고리가 늘어나 박스가 원래
   188px보다 커지면 .main_bottom의 overflow:hidden에 의해 아래쪽이 통째로 잘리고(높이 클리핑),
   3열 각각의 고정폭이 grid 비율 배분과 충돌해 우측 열이 밀리거나 잘리는 문제가 있었음. */
.main_bottom{ padding:28px 0; overflow:visible !important; }
.main_quick_item{
  display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:16px; align-items:stretch;
  height:auto !important;
}
@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;
  display:flex; flex-direction:column;
  width:auto !important; height:auto !important; float:none !important;
}
.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.css가 .col ul에 height:160px!overflow:hidden을 걸어놔서 분야별 검색(91개
   biz_type 카테고리)이 위쪽 몇 줄만 보이고 나머지는 통째로 잘려서 안 보이는 버그가 있었음.
   높이 고정을 풀고 스크롤 가능한 영역으로 바꿔서 전체 목록에 접근 가능하도록 수정. */
.main_quick_item .col ul{
  margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px;
  height:auto !important; max-height:320px !important; overflow-y:auto !important; overflow-x:hidden !important;
  flex:1 1 auto;
}
.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 구조)
   주의: 레거시 CSS(dbl.css 등)의 .common_no_data{height:100%}가 grid의 기본 stretch와
   합쳐지면 빈 슬롯이 페이지 전체 높이로 늘어나는 버그가 생겨서 align-items:start로 방지 */
.grand_banner ul, .focus_banner ul, .recommend_banner ul{
  display:grid; gap:12px; margin:0; padding:0; list-style:none;
  align-items:start !important;
  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,
.common_no_data{
  height:auto !important; min-height:64px !important; align-self:start;
  align-items:center; justify-content:center; color:var(--pnj-ink-faint); font-size:12px;
  background:var(--pnj-surface-2) !important; background-image:none !important;
}
.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); }