@charset "utf-8";
/* ============================================================
   피플앤잡 2026 테마 디자인 시스템 (theme/pnj2026)
   - PC 홈페이지: 이 파일 단독 (레거시 default/main/색상스킨 미로드)
   - PC 서브페이지: default.css + 색상스킨 위에 오버레이
   - 버티컬별 강조색: html[data-vertical], 다크모드: [data-theme]
   ============================================================ */

/* ---------- 1. 토큰 ---------- */
:root{
  --pnj-paper:#f4f3f7;
  --pnj-surface:#ffffff;
  --pnj-surface-2:#ecebf1;
  --pnj-ink:#1c1a2b;
  --pnj-ink-muted:#63607a;
  --pnj-ink-faint:#9693a8;
  --pnj-line:#e2e0e9;
  --pnj-line-strong:#c9c6d6;
  --pnj-shadow:0 1px 2px rgba(28,26,43,.05), 0 14px 40px -18px rgba(28,26,43,.22);
  --pnj-radius:16px;
  --pnj-radius-sm:10px;
  --pnj-urgent:#e05a4e;
  --pnj-success:#2f9e63;

  --pnj-accent-hub:#423f7a;
  --pnj-accent-food:#c1602f;
  --pnj-accent-beauty:#a8546f;
  --pnj-accent-solution:#1f6f74;
  --pnj-accent:var(--pnj-accent-hub);
  --pnj-accent-soft:rgba(66,63,122,.08);
  --pnj-accent-ink:#ffffff;
}
:root[data-theme="dark"]{
  --pnj-paper:#141320;
  --pnj-surface:#1c1a29;
  --pnj-surface-2:#252336;
  --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,.4), 0 14px 40px -18px rgba(0,0,0,.6);
  --pnj-accent-hub:#9490d1;
  --pnj-accent-food:#e08a55;
  --pnj-accent-beauty:#cf90a8;
  --pnj-accent-solution:#4fa8ad;
  --pnj-accent-soft:rgba(148,144,209,.12);
  --pnj-accent-ink:#141320;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pnj-paper:#141320; --pnj-surface:#1c1a29; --pnj-surface-2:#252336;
    --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,.4), 0 14px 40px -18px rgba(0,0,0,.6);
    --pnj-accent-hub:#9490d1; --pnj-accent-food:#e08a55; --pnj-accent-beauty:#cf90a8; --pnj-accent-solution:#4fa8ad;
    --pnj-accent-soft:rgba(148,144,209,.12); --pnj-accent-ink:#141320;
  }
}
html[data-vertical="food"]{ --pnj-accent:var(--pnj-accent-food); --pnj-accent-soft:rgba(193,96,47,.09); }
html[data-vertical="beauty"]{ --pnj-accent:var(--pnj-accent-beauty); --pnj-accent-soft:rgba(168,84,111,.09); }
html[data-vertical="solution"]{ --pnj-accent:var(--pnj-accent-solution); --pnj-accent-soft:rgba(31,111,116,.09); }
html[data-vertical="hub"]{ --pnj-accent:var(--pnj-accent-hub); }

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

/* ---------- 2. 베이스 ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--pnj-paper); color:var(--pnj-ink);
  font-family:"Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  font-size:14px; line-height:1.6; word-break:keep-all;
}
img{ max-width:100%; border:0; vertical-align:middle; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--pnj-accent); }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
h1,h2,h3,h4{ margin:0; line-height:1.35; }
.sound_only{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.hide{ position:absolute; left:-9999px; text-indent:-9999px; }
.clearfix:after{ content:""; display:block; clear:both; }
.pnj-wrap, .default_layout{
  max-width:1180px; margin:0 auto; padding-left:20px; padding-right:20px; box-sizing:border-box;
}
input, button, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; }

/* 버튼 */
.pnj-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 18px; border-radius:100px; font-size:13.5px; font-weight:700; cursor:pointer;
  border:1px solid transparent; transition:filter .2s ease, background .2s ease; white-space:nowrap;
}
.pnj-btn-fill{ background:var(--pnj-accent); color:var(--pnj-accent-ink) !important; }
.pnj-btn-fill:hover{ filter:brightness(1.08); color:var(--pnj-accent-ink); }
.pnj-btn-ghost{ background:var(--pnj-surface); border-color:var(--pnj-line-strong); color:var(--pnj-ink); }
.pnj-btn-ghost:hover{ border-color:var(--pnj-accent); color:var(--pnj-accent); }
.pnj-btn-sm{ padding:6px 14px; font-size:12.5px; }

/* 팝업레이어 래퍼: 접근성용 제목이 화면에 노출되지 않도록 (default.css 미로드 페이지 대응) */
#hd_pop h2{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- 3. 헤더 ---------- */
#header.pnj-hd{
  background:var(--pnj-surface); border-bottom:1px solid var(--pnj-line);
  height:auto !important; position:relative; z-index:100;
}
/* 유틸 스트립 */
.pnj-hd-util{ border-bottom:1px solid var(--pnj-line); background:var(--pnj-surface); }
.pnj-hd-util .pnj-wrap{ display:flex; align-items:center; gap:12px; padding-top:7px; padding-bottom:7px; flex-wrap:wrap; }
.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:5px 13px; border-radius:100px; color:var(--pnj-ink-muted);
  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:28px; height:28px; border-radius:50%; border:1px solid var(--pnj-line-strong);
  background:var(--pnj-surface); color:var(--pnj-ink); cursor:pointer; font-size:12px; padding:0; line-height:1;
}
/* 방문자 카운터(Histats): 우측으로 밀고 축소해서 존재감 최소화
   (transform은 레이아웃 박스를 안 줄여 어중간하게 잘려 보였음 → zoom으로 실제 축소) */
.pnj-hd-counter{
  order:4; margin-left:auto; font-size:10px; line-height:1.2; color:var(--pnj-ink-faint);
  opacity:.5; zoom:.62; border-radius:6px; overflow:hidden;
}
.pnj-hd-counter table{ font-size:10px !important; }
.pnj-hd-counter:hover{ opacity:.9; }
.pnj-hd-links{ display:flex; align-items:center; order:5; margin-left:0; gap:14px; }
.pnj-hd-translate{ order:6; }
.pnj-hd-links li{ font-size:12px; }
.pnj-hd-links a{ color:var(--pnj-ink-muted); }
.pnj-hd-links a:hover{ color:var(--pnj-accent); }
.pnj-hd-translate{ font-size:11px; }

/* 메인 스트립 */
.pnj-hd-main .pnj-wrap{ display:flex; align-items:center; gap:24px; padding-top:16px; padding-bottom:16px; flex-wrap:wrap; }
.pnj-logo{ flex:none; }
.pnj-logo img{ height:44px !important; width:auto !important; }
.pnj-search{ flex:1 1 340px; min-width:260px; max-width:520px; }
.pnj-search form{
  display:flex; align-items:center; background:var(--pnj-surface);
  border:1.5px solid var(--pnj-line-strong); border-radius:100px; overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.pnj-search form:focus-within{ border-color:var(--pnj-accent); box-shadow:0 0 0 3px var(--pnj-accent-soft); }
.pnj-search input[type="text"]{
  flex:1 1 auto; min-width:0; border:none; outline:none; background:none; color:var(--pnj-ink);
  height:42px; padding:0 18px; font-size:14px;
}
.pnj-search button{
  flex:none; border:none; cursor:pointer; height:42px; padding:0 20px;
  background:var(--pnj-accent); color:var(--pnj-accent-ink); font-weight:700; font-size:13.5px;
  display:flex; align-items:center; gap:5px;
}
.pnj-search-ico{ font-size:17px; line-height:1; }
.pnj-hd-cta{ display:flex; gap:8px; margin-left:auto; }

/* 내비게이션 스트립 */
#topMenubox.pnj-hd-nav{ background:var(--pnj-surface); border-top:1px solid var(--pnj-line); }
.pnj-hd-nav .pnj-wrap{ display:flex; align-items:center; }
#topMenu{ display:flex; align-items:center; overflow-x:auto; }
#topMenu li.menu_list{ position:relative; }
#topMenu li.menu_list a.depth_link{
  display:inline-block; padding:13px 16px; font-size:14px; font-weight:700; color:var(--pnj-ink-muted);
  border-bottom:2.5px solid transparent; white-space:nowrap; line-height:normal;
}
#topMenu li.menu_list a.depth_link:hover{ color:var(--pnj-accent); border-bottom-color:var(--pnj-accent); }
.depth_box{
  display:none; position:absolute; top:100%; left:0; z-index:300; min-width:170px;
  background:var(--pnj-surface); border:1px solid var(--pnj-line); border-radius:12px;
  box-shadow:var(--pnj-shadow); padding:6px;
}
.depth_link2{ display:block; padding:9px 12px; border-radius:8px; font-size:13px; color:var(--pnj-ink); }
.depth_link2:hover{ background:var(--pnj-surface-2); color:var(--pnj-accent); }
#gnb_empty{ padding:12px; font-size:13px; color:var(--pnj-ink-faint); }

/* ---------- 4. 우측 floating 네트워크 패널 ---------- */
.pnj_netpanel{ display:none; box-sizing:border-box; }
@media (min-width:1700px){
  .pnj_netpanel.is_open{
    display:block; position:fixed; top:120px; right:20px; z-index:400;
    width:220px; max-height:calc(100vh - 160px); 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); }
.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; 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);
  padding:4px 8px; border-radius:8px; margin:1px 0; white-space:normal; word-break:keep-all;
}
.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);
}
.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; gap:2px; font-size:11.5px; color:var(--pnj-ink-muted); flex:1 1 auto; min-width:0; }
.pnj_crosscard_text em{ display:block; font-size:10px; font-style:normal; color:var(--pnj-ink-faint); }
.pnj_netpanel_reopen{ display:none; }
@media (min-width:1700px){
  .pnj_netpanel_reopen{
    display:block; position:fixed; top:120px; 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); }
}

/* ---------- 5. 홈페이지 ---------- */
#wrap{ background:var(--pnj-paper); }
#container{ min-height:300px; }

/* 히어로 인트로 */
.pnj-hero-intro{
  background:linear-gradient(135deg, var(--pnj-accent-soft), transparent 60%), var(--pnj-surface);
  border-bottom:1px solid var(--pnj-line);
}
.pnj-hero-intro .pnj-wrap{ padding-top:34px; padding-bottom:30px; }
.pnj-hero-intro h2{ font-size:27px; font-weight:800; letter-spacing:-.01em; }
.pnj-hero-intro h2 em{ font-style:normal; color:var(--pnj-accent); }
.pnj-hero-intro p{ margin:8px 0 0; font-size:14.5px; color:var(--pnj-ink-muted); }

/* 상단 3단: 배너 / 채용·인재 탭 / 로그인 */
.main_top{ display:flex; align-items:stretch; gap:16px; flex-wrap:wrap; padding:24px 0 8px; }
.main_top_banner{
  flex:1 1 380px; min-width:280px; border-radius:var(--pnj-radius); overflow:hidden; box-shadow:var(--pnj-shadow);
  background:var(--pnj-surface);
}
.main_top_banner img{ width:100%; height:100%; object-fit:cover; }
.main_top_banner .cycle-slideshow{ height:100%; }

/* 채용/인재 탭 카드 (skin.js + cycle2 구조 유지) */
.quick_job_view{
  flex:0 0 340px; width:340px; box-sizing:border-box; position:relative;
  background:var(--pnj-surface); border:1px solid var(--pnj-line); border-radius:var(--pnj-radius);
  padding:16px; box-shadow:var(--pnj-shadow);
}
/* dt(탭)-dd(내용)이 DOM상 교차 배치되어 있어 flex order로 탭 두 개를 한 줄에 모음 */
.quick_job_view .tep_list{ display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
.quick_job_view dt.btn{
  order:1; display:inline-block; padding:7px 16px; margin:0 0 8px 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 dd{ order:2; width:100%; }
.quick_job_view dt.btn a{ color:inherit; cursor:pointer; }
.quick_job_view dt.btn.on{ background:var(--pnj-accent); }
.quick_job_view dt.btn.on a{ color:var(--pnj-accent-ink); }
.quick_job_view dd{ display:none; }
.quick_job_view dd.first{ display:block; }
.quick_job_view dd .box{
  display:inline-flex !important; align-items:center; gap:10px; padding:10px; margin:2px 0; width:100%; box-sizing:border-box;
  border:1px solid var(--pnj-line); border-radius:12px; background:var(--pnj-surface);
}
.quick_job_view dd .box:hover{ border-color:var(--pnj-accent); }
.quick_job_view dd .box a{ display:flex; align-items:center; gap:10px; width:100%; }
.quick_job_view dd .box .photo{ flex:none; }
.quick_job_view dd .box .photo img{ border-radius:8px; }
.quick_job_view dd .box .info{ min-width:0; }
.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); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.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{ position:absolute; right:14px; top:18px; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--pnj-ink-faint); }
.quick_job_view .pager .btn a{ cursor:pointer; opacity:.7; }
.quick_job_view .pager .btn a:hover{ opacity:1; }

/* 로그인 카드 */
.main_login{
  flex:0 0 255px; width:255px; box-sizing:border-box; align-self:stretch;
}
.main_login .box{
  background:var(--pnj-surface); border:1px solid var(--pnj-line); border-radius:var(--pnj-radius);
  padding:18px; box-shadow:var(--pnj-shadow); height:100%; box-sizing:border-box;
}
#ol_before h3, .main_login h3{ font-size:14px; font-weight:800; color:var(--pnj-ink); margin:0 0 10px; }
#ol_before .text_input input, .main_login input[type="text"], .main_login input[type="password"]{
  display:block; width:100%; box-sizing:border-box; height:34px; margin-bottom:6px; padding:0 10px;
  border:1px solid var(--pnj-line-strong); border-radius:8px; background:var(--pnj-surface); color:var(--pnj-ink); font-size:13px;
}
#ol_before .btn_input input, .main_login input[type="submit"]{
  width:100%; height:34px; border:none; border-radius:8px; cursor:pointer;
  background:var(--pnj-accent); color:var(--pnj-accent-ink); font-weight:700; font-size:13px;
}
#ol_before .login_etc{ margin-top:8px; font-size:11.5px; }
#ol_before .login_etc a{ color:var(--pnj-ink-muted); }
#ol_before .login_etc a:hover{ color:var(--pnj-accent); }
#ol_after{ font-size:13px; }
#ol_after a{ color:var(--pnj-ink-muted); }

/* 3단 바로가기 (분야별/실시간/지역별) */
.main_bottom{ padding:24px 0; }
.main_quick_item{ display:flex; flex-wrap:wrap; gap:16px; align-items:stretch; }
.main_quick_item .col{
  background:var(--pnj-surface); border:1px solid var(--pnj-line); border-radius:14px; padding:16px;
  display:flex; flex-direction:column; box-sizing:border-box;
  flex:1 1 300px; min-width:280px;
}
.main_quick_item .col.m2{ flex:1.6 1 380px; min-width:320px; }
.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{
  display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start;
  height:auto; max-height:320px; overflow-y:auto; overflow-x:hidden; flex:1 1 auto;
}
.main_quick_item .col a{ font-size:12.5px; color:var(--pnj-ink-muted); }
.main_quick_item .col.m1 ul li, .main_quick_item .col.m3 ul li{ width:auto; }
.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); white-space:nowrap;
}
.main_quick_item .col.m1 a:hover, .main_quick_item .col.m3 a:hover{ color:var(--pnj-accent); }
.main_quick_item .col.m3 ul{ gap:10px; }
.main_quick_item .col.m3 a{ padding:8px 18px; font-size:13.5px; }
.main_quick_item .col.m2 ul{ display:block; }
.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); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.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_quick_item .col.m2 span{
  display:inline-block; background:var(--pnj-success); color:#fff; font-size:10.5px; border-radius:5px; padding:1px 5px; margin:0 3px;
}
.main_side{ flex:1 1 100%; }
.main_cs{ display:flex; padding:12px 16px; background:var(--pnj-surface-2); border-radius:12px; font-size:12.5px; color:var(--pnj-ink-muted); }
.main_cs ul{ display:flex; gap:20px; flex-wrap:wrap; }
.main_cs i{ color:var(--pnj-accent); margin-right:5px; }

/* 섹션 타이틀 */
.common_title{
  display:flex; align-items:baseline; justify-content:space-between; margin:26px auto 14px;
  padding-bottom:10px; border-bottom:1px solid var(--pnj-line);
}
.common_title h3{ font-size:17px; font-weight:800; color:var(--pnj-ink); }
.common_title .btn{ display:flex; gap:6px; }

/* 그랜드/긴급/추천 카드 그리드 */
.grand_banner, .focus_banner, .recommend_banner{ max-width:1180px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
.grand_banner ul, .focus_banner ul, .recommend_banner ul{
  display:grid; gap:12px; align-items:start;
}
.grand_banner ul{ grid-template-columns:repeat(4,1fr); }
.focus_banner ul{ grid-template-columns:repeat(3,1fr); }
.recommend_banner ul{ grid-template-columns:repeat(2,1fr); }
.grand_banner li.list, .focus_banner li.list, .recommend_banner li{
  background:var(--pnj-surface); border:1px solid var(--pnj-line); border-radius:14px; overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease; position:relative;
}
.grand_banner li.list:hover, .focus_banner li.list:hover{ border-color:var(--pnj-accent); box-shadow:var(--pnj-shadow); }
.grand_banner .box, .focus_banner .box, .recommend_banner .box{ padding:14px; position:relative; }
.grand_banner .photo, .focus_banner .photo{ text-align:center; margin-bottom:10px; }
.grand_banner .photo img, .focus_banner .photo img{ max-height:69px; width:auto; border-radius:8px; }
.grand_banner .photo a, .focus_banner .photo a{ font-size:15px; font-weight:800; color:var(--pnj-ink-muted); }
.grand_banner .subject a, .focus_banner .subject a{ font-size:14px; font-weight:800; color:var(--pnj-ink); }
.grand_banner .subject_info a, .focus_banner .subject_info a{
  font-size:12.5px; color:var(--pnj-ink-muted); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px;
}
.grand_banner .info_line{ margin-top:10px; padding-top:8px; border-top:1px dashed var(--pnj-line); font-size:11.5px; color:var(--pnj-ink-faint); display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.focus_banner .employ_info, .focus_banner .price_info{ font-size:11.5px; color:var(--pnj-ink-faint); display:inline-block; margin-top:6px; margin-right:8px; }
.grand_banner .more_btn, .focus_banner .more_btn{ position:absolute; top:10px; right:10px; }
.grand_banner .more_btn a, .focus_banner .more_btn a{
  font-size:10.5px; color:var(--pnj-ink-faint); border:1px solid var(--pnj-line); border-radius:100px; padding:2px 8px; background:var(--pnj-surface);
}
.grand_banner .more_btn a:hover, .focus_banner .more_btn a:hover{ color:var(--pnj-accent); border-color:var(--pnj-accent); }
.recommend_banner .box{ display:flex; align-items:center; gap:10px; min-height:28px; }
.recommend_banner .company a{ font-weight:800; font-size:13px; }
.recommend_banner .cont a{ font-size:12.5px; color:var(--pnj-ink-muted); }
.common_no_data, .no_data{
  height:auto !important; min-height:64px !important; background:var(--pnj-surface-2) !important; background-image:none !important;
  border-radius:10px; display:flex; align-items:center; justify-content:center;
}
.common_no_data::after{ content:"광고 대기중"; font-size:11.5px; color:var(--pnj-ink-faint); }

/* 일반 채용정보 테이블 */
table.cStyle5{ width:100%; font-size:13px; border-spacing:0; border-collapse:collapse; background:var(--pnj-surface); border-radius:14px; overflow:hidden; border:1px solid var(--pnj-line); }
table.cStyle5 th{ color:var(--pnj-ink); background:var(--pnj-surface-2); padding:10px 8px; font-size:12.5px; border-bottom:1px solid var(--pnj-line); }
table.cStyle5 td{ color:var(--pnj-ink-muted); padding:9px 8px; border-bottom:1px solid var(--pnj-line); text-align:center; }
table.cStyle5 tr:last-child td{ border-bottom:none; }
table.cStyle5 tr:hover td{ background:var(--pnj-accent-soft); }
table.cStyle5 .left{ text-align:left; }
table.cStyle5 td a{ color:var(--pnj-ink); }
table.cStyle5 td a:hover{ color:var(--pnj-accent); }
.text_color_ddd{ color:var(--pnj-ink-faint); font-size:11.5px; }

/* ---------- 6. 푸터 ---------- */
#footergroup.pnj-ft{
  margin-top:36px; background:var(--pnj-surface); border-top:1px solid var(--pnj-line); color:var(--pnj-ink-muted);
}
.pnj-ft-grid{ display:flex; gap:32px; flex-wrap:wrap; padding-top:30px; padding-bottom:30px; }
.pnj-ft-brand{ flex:1.4 1 260px; min-width:240px; }
.pnj-ft .f_logo img{ height:22px; width:auto; opacity:.75; margin-bottom:10px; }
.pnj-ft-copy{ font-size:12px; line-height:1.9; color:var(--pnj-ink-faint); }
.pnj-ft-col{ flex:1 1 180px; min-width:170px; }
.pnj-ft-col h3{ font-size:13px; font-weight:800; color:var(--pnj-ink); margin:0 0 10px; }
.pnj-ft-em a{ font-size:14.5px; font-weight:700; color:var(--pnj-accent); }
.pnj-ft-note{ font-size:12px; color:var(--pnj-ink-faint); margin:6px 0 10px; }
.pnj-ft-links li{ margin:5px 0; font-size:12.5px; }
.pnj-ft-links a{ color:var(--pnj-ink-muted); }
.pnj-ft-links a:hover, .pnj-ft-links a.is_active{ color:var(--pnj-accent); }

/* ---------- 7. 서브페이지 호환 레이어 ----------
   (default.css + 색상스킨이 함께 로드되는 페이지에서 새 크롬이 이기도록) */
#header.pnj-hd .pnj-hd-util, #header.pnj-hd .pnj-hd-main, #header.pnj-hd .pnj-hd-nav{ float:none !important; width:auto !important; }
#header.pnj-hd, #header.pnj-hd *{ text-indent:0; }
#topMenubox.pnj-hd-nav{ height:auto !important; background:var(--pnj-surface) !important; }
#topMenu li.menu_list{ float:none !important; margin:0 !important; letter-spacing:normal !important; background:none !important; }
#topMenu li.menu_list a.depth_link{ background:none !important; color:var(--pnj-ink-muted) !important; }
#topMenu li.menu_list a.depth_link:hover{ color:var(--pnj-accent) !important; }
#footergroup.pnj-ft{ height:auto !important; background:var(--pnj-surface) !important; }
#footergroup.pnj-ft .f_logo{ float:none !important; }
.pnj-hd-links li{ float:none !important; background:none !important; padding:0 !important; }
.pnj-hd-links a{ background:none !important; }
.pnj-logo{ float:none !important; margin:0 !important; line-height:normal !important; }
.pnj-search{ position:static !important; }
#container{ width:auto !important; }

/* ---------- 7.3 서브페이지 본문 현대화 오버레이 ----------
   (default.css/색상스킨과 공존 — 레이아웃은 유지하고 표면만 교체) */

/* 카드 리스트 (목록페이지 유료섹션: s_grand/s_premium/s_focus/s_recommend) */
.s_grand_banner ul, .s_premium_banner ul, .s_focus_banner ul, .s_recommend_banner ul{
  display:grid !important; gap:12px; align-items:start; width:auto !important; overflow:visible !important;
}
.s_grand_banner ul{ grid-template-columns:repeat(4,1fr); }
.s_premium_banner ul{ grid-template-columns:repeat(4,1fr); }
.s_focus_banner ul{ grid-template-columns:repeat(3,1fr); }
.s_recommend_banner ul{ grid-template-columns:repeat(2,1fr); }
.s_grand_banner li.list, .s_premium_banner li.list, .s_focus_banner li.list, .s_recommend_banner li.list{
  float:none !important; width:auto !important; height:auto !important; margin:0 !important;
  background:var(--pnj-surface) !important; border:1px solid var(--pnj-line) !important; border-radius:14px !important;
  overflow:hidden; box-sizing:border-box;
}
.s_grand_banner li.list:hover, .s_premium_banner li.list:hover, .s_focus_banner li.list:hover{
  border-color:var(--pnj-accent) !important; box-shadow:var(--pnj-shadow);
}

/* G5 게시판 공통 테이블/페이지네이션/버튼 */
.tbl_head01 table, .tbl_wrap table{ border-collapse:collapse; }
.tbl_head01 th, .tbl_frm01 th{
  background:var(--pnj-surface-2) !important; color:var(--pnj-ink) !important;
  border-color:var(--pnj-line) !important; font-size:12.5px;
}
.tbl_head01 td, .tbl_frm01 td{ border-color:var(--pnj-line) !important; color:var(--pnj-ink-muted); }
.tbl_head01 tbody tr:hover td{ background:var(--pnj-accent-soft) !important; }
.pg_wrap{ padding:16px 0; }
.pg_page, .pg_current{
  display:inline-block; min-width:30px; height:30px; line-height:30px; text-align:center;
  border-radius:8px !important; border:1px solid var(--pnj-line) !important; background:var(--pnj-surface) !important;
  color:var(--pnj-ink-muted) !important; font-size:12.5px; margin:0 2px; padding:0 6px; box-sizing:border-box;
}
.pg_current{ background:var(--pnj-accent) !important; color:var(--pnj-accent-ink) !important; border-color:var(--pnj-accent) !important; }
.pg_page:hover{ border-color:var(--pnj-accent) !important; color:var(--pnj-accent) !important; }

.btn_submit{
  background:var(--pnj-accent) !important; color:var(--pnj-accent-ink) !important;
  border:none !important; border-radius:8px !important; cursor:pointer;
}
.btn01 a, .btn02 a, .btn_b01, .btn_b02, .common_btn{
  border-radius:8px !important;
}
.common_btn{
  display:inline-block; padding:7px 16px; background:var(--pnj-surface-2) !important;
  border:1px solid var(--pnj-line-strong) !important; color:var(--pnj-ink) !important; font-size:12.5px;
}
.common_btn:hover{ border-color:var(--pnj-accent) !important; color:var(--pnj-accent) !important; }

/* 폼 요소 */
.frm_input, input[type="text"].frm_input, input[type="password"].frm_input{
  border:1px solid var(--pnj-line-strong) !important; border-radius:8px !important;
  background:var(--pnj-surface) !important; color:var(--pnj-ink) !important; padding:6px 10px; box-sizing:border-box;
}
.frm_input:focus{ border-color:var(--pnj-accent) !important; outline:none; }
.frm_info{ color:var(--pnj-ink-faint); font-size:12px; }

/* 회원가입/회원 스킨 */
.mbskin{
  background:var(--pnj-surface); border:1px solid var(--pnj-line); border-radius:16px; padding:24px;
  box-shadow:var(--pnj-shadow);
}
.btn_frmline{
  background:var(--pnj-surface-2) !important; border:1px solid var(--pnj-line-strong) !important;
  border-radius:8px !important; color:var(--pnj-ink) !important; cursor:pointer;
}

/* 상세(view) 페이지 */
.subject_title{ font-size:20px !important; font-weight:800 !important; color:var(--pnj-ink) !important; line-height:1.4; }
.shop_name{ font-weight:800; color:var(--pnj-ink); }
table.cStyle th, table.cStyle3 th, table.cStyle6 th{
  background:var(--pnj-surface-2) !important; color:var(--pnj-ink) !important; border-color:var(--pnj-line) !important;
}
table.cStyle td, table.cStyle3 td, table.cStyle6 td{ border-color:var(--pnj-line) !important; }
.shop_detail_info_common_box{
  background:var(--pnj-surface) !important; border:1px solid var(--pnj-line) !important; border-radius:14px !important;
}
.member_views{ border-radius:10px !important; }

/* ---------- 7.4 모바일 오버레이 (theme/pnj2026/mobile 기존 구조 위에) ---------- */
.pnj_m_topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; border-bottom:1px solid var(--pnj-line); background:var(--pnj-surface);
}
.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); }
.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;
}
#device_change, .pnj_m_crosscard{ border-radius:10px; }
.header_top{ background:var(--pnj-surface); }
.top_search_box input#sch_stx{
  height:38px; border:1px solid var(--pnj-line-strong) !important; border-radius:100px 0 0 100px !important;
  padding:0 14px; background:var(--pnj-surface) !important; color:var(--pnj-ink) !important; font-size:13.5px;
}
.top_search_box .btn input{
  height:38px; border:none !important; border-radius:0 100px 100px 0 !important; padding:0 16px;
  background:var(--pnj-accent) !important; color:var(--pnj-accent-ink) !important; font-weight:700;
}
.top_sub_menu{ background:var(--pnj-surface-2) !important; }
.top_sub_menu a{ border-radius:100px !important; background:var(--pnj-surface) !important; color:var(--pnj-ink-muted) !important; }
#containers{ background:var(--pnj-paper) !important; }
#menu .menu_contents_box{ background:var(--pnj-surface) !important; color:var(--pnj-ink) !important; }

/* ---------- 7.5 떠다니는 운세·마음위로 홍보 (zzinpang 스타일) ---------- */
.pnj-float-promo{
  position:fixed; left:18px; bottom:18px; z-index:500;
  animation:pnjFloatY 3.4s ease-in-out infinite;
}
@keyframes pnjFloatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.pnj-float-promo a{
  display:flex; align-items:center; gap:10px;
  background:var(--pnj-surface); border:1px solid var(--pnj-line); border-radius:100px;
  padding:8px 18px 8px 10px; box-shadow:var(--pnj-shadow);
}
.pnj-float-promo a:hover{ border-color:var(--pnj-accent); }
.pnj-float-emoji{
  flex:none; width:34px; height:34px; border-radius:50%; background:var(--pnj-accent-soft);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.pnj-float-text{ display:flex; flex-direction:column; line-height:1.3; }
.pnj-float-text em{ font-style:normal; font-size:10.5px; color:var(--pnj-ink-faint); }
.pnj-float-text strong{ font-size:12.5px; color:var(--pnj-ink); font-weight:700; }
.pnj-float-close{
  position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%;
  border:1px solid var(--pnj-line-strong); background:var(--pnj-surface); color:var(--pnj-ink-faint);
  font-size:10px; line-height:1; cursor:pointer; padding:0;
}
.pnj-float-close:hover{ color:var(--pnj-urgent); }
@media (max-width:640px){
  .pnj-float-promo{ left:10px; bottom:10px; }
  .pnj-float-text strong{ font-size:11.5px; }
}

/* ---------- 8. 반응형 ---------- */
@media (max-width:980px){
  .quick_job_view{ flex:1 1 320px; width:auto; }
  .main_login{ flex:1 1 240px; width:auto; }
}
@media (max-width:640px){
  .pnj-hd-counter, .pnj-hd-translate{ display:none; }
  .pnj-hd-main .pnj-wrap{ gap:12px; }
  .pnj-hd-cta{ margin-left:0; width:100%; }
  .pnj-hd-cta .pnj-btn{ flex:1 1 auto; }
  .pnj-hero-intro h2{ font-size:21px; }
  .grand_banner ul{ grid-template-columns:repeat(2,1fr); }
  .focus_banner ul{ grid-template-columns:1fr; }
  .recommend_banner ul{ grid-template-columns:1fr; }
  .pnj-ft-grid{ gap:20px; }
}