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