@charset "utf-8";
/* ============================================================
   워크넷 그누보드5 테마 CSS — v5 HTML 완전 일치
   ============================================================ */

/* ══ CSS 변수 ══ */
:root {
  --blue:   #009cff;
  --blue-d: #007dd4;
  --blue-l: #e6f5ff;
  --blue-ll:#f0f9ff;
  --navy:   #0a2540;
  --text:   #1a2336;
  --muted:  #6b7a8d;
  --border: #dde5ef;
  --bg:     #f5f8fc;
  --white:  #ffffff;
  --green:  #00a86b;
  --green-l:#e6f7f1;
  --amber:  #e07b00;
  --amber-l:#fff6e6;
  --red:    #d93025;
  --red-l:  #fdecea;
}

/* ══ 기본 리셋 ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-y: scroll; scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans KR', '맑은 고딕', sans-serif;
  background: #fff; color: var(--text);
  font-size: 14px; line-height: 1.6;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Noto Sans KR','맑은 고딕',sans-serif; margin:0; padding:0; border:0; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
ul,dl,dt,dd { margin:0; padding:0; list-style:none; }
legend { position:absolute; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden; }
label,input,button,select,img { vertical-align:middle; font-size:1em; }
input,button,select,textarea { font-family:'Noto Sans KR','맑은 고딕',sans-serif; font-size:1em; }
input[type="submit"],button { cursor:pointer; }
p { margin:0; padding:0; word-break:break-all; }
hr { display:none; }
pre { overflow-x:scroll; font-size:1.1em; }
a { text-decoration:none; color:inherit; }
a:hover { color: var(--blue); }
img { max-width:100%; height:auto; }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
  outline:none; box-shadow:0 0 0 3px rgba(0,156,255,.15); border-color:var(--blue) !important;
}

/* ══ 레이아웃 ══ */
#hd, #wrapper, #ft { min-width: 1160px; }
.inner { max-width: 1160px; margin: 0 auto; padding: 12px 24px; }

/* ══ 그누보드 필수 — 화면낭독기 ══ */
.sound_only, .msg_sound_only {
  display:inline-block !important; position:absolute; top:0; left:0; width:0; height:0;
  margin:0 !important; padding:0 !important; font-size:0; line-height:0; border:0 !important; overflow:hidden !important;
}
#hd_login_msg { position:absolute; top:0; left:0; font-size:0; line-height:0; overflow:hidden; }
#skip_to_container a { z-index:100000; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; overflow:hidden; }
#skip_to_container a:focus, #skip_to_container a:active { width:100%; height:56px; background:var(--navy); color:#fff; font-size:1.1em; font-weight:700; text-align:center; line-height:3.5em; }

/* ══ 팝업레이어 ══ */
#hd_pop { z-index:1000; position:relative; margin:0 auto; height:0; }
#hd_pop h2 { position:absolute; font-size:0; overflow:hidden; }
.hd_pops { position:absolute; border:1px solid var(--border); background:#fff; border-radius:10px; }
.hd_pops img { max-width:100%; }
.hd_pops_footer { padding:0; background:var(--navy); color:#fff; text-align:left; position:relative; }
.hd_pops_footer::after { display:block; visibility:hidden; clear:both; content:""; }
.hd_pops_footer button { padding:10px; border:0; color:#fff; }
.hd_pops_footer .hd_pops_reject { background:var(--navy); }
.hd_pops_footer .hd_pops_close { background:#333; position:absolute; top:0; right:0; }

/* ══ 그누보드 헤더 wrapper ══ */
#hd { background:var(--navy); }
#hd_h1 { position:absolute; font-size:0; overflow:hidden; }

/* ══ 섹션 공통 ══ */
.sec { padding: 44px 0; }
.sec-white { background: #fff; border-bottom: 1px solid var(--border); }
.sec-bg    { background: var(--bg); border-bottom: 1px solid var(--border); }
.sec-blue  { background: var(--blue); }
.sec-navy  { background: var(--navy); }
.sec-head  { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.sec-kicker { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--blue); margin-bottom:3px; }
.sec-title  { font-size:20px; font-weight:700; color:var(--navy); }
.sec-more   { font-size:13px; color:var(--blue); }
.sec-more:hover { text-decoration:underline; }
.sec-blue .sec-kicker { color:rgba(255,255,255,.6); }
.sec-blue .sec-title  { color:#fff; }
.sec-blue .sec-more   { color:rgba(255,255,255,.5); }

/* ══ 1. 상단바 ══ */
.top-bar {
  background: var(--navy); padding: 7px 0;
  color: rgba(255,255,255,.4);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.top-bar-inner { display:flex; justify-content:space-between; align-items:center; }
.top-bar a { color:rgba(255,255,255,.35); margin-left:14px; transition:color .15s; }
.top-bar a:hover { color:#fff; }
.tnb-visit { margin-left:14px; color:rgba(255,255,255,.3); }
.tnb-visit strong { color:var(--blue); font-weight:700; margin-left:3px; }

/* ══ 2. 헤더 ══ */
header, #hd_wrapper {
  background: #fff; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 300;
  box-shadow: 0 1px 8px rgba(0,0,0,.07);
}
header::after, #hd_wrapper::after { display:block; visibility:hidden; clear:both; content:""; }
.header-inner { display:flex; align-items:center; height:110px; gap:24px; }

/* 로고 */
.logo, #logo { display:flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; color:inherit; }
.logo-mark {
  width:52px; height:52px; border-radius:9px;
  background:var(--blue); display:flex; align-items:center; justify-content:center;
}
.logo-group { display:flex; flex-direction:column; gap:1px; }
.logo-text { font-size:32px; font-weight:700; color:var(--navy); letter-spacing:-.5px; line-height:1; }
.logo-text span { color:var(--blue); }
.logo-sub { font-size:14px; color:var(--muted); display:flex; gap:6px; }
.logo-sub span { color:var(--blue); font-weight:600; }

/* 검색바 */
.search-wrap, .hd_sch_wr {
  flex:1; max-width:560px; float:none !important;
  display:flex; border:2px solid var(--blue); border-radius:34px;
  overflow:hidden; height:52px;
  box-shadow:0 3px 16px rgba(0,156,255,.13);
  margin:0 !important; padding:0 !important; width:auto !important;
}
.search-form, #hd_sch { display:flex; width:100%; }
#hd_sch h3, #hd_sch legend { position:absolute; font-size:0; overflow:hidden; }
.search-cat, #sch_cat {
  background:#fff; border:none; border-right:1px solid var(--border);
  color:var(--navy);
  padding:0 16px; cursor:pointer; font-family:inherit; flex-shrink:0; outline:none;
  box-shadow:none !important; letter-spacing: -0.8px;
}
.search-inp, #sch_stx {
  flex:1; border:none; outline:none;
  padding:0 18px; font-size:15px; font-family:inherit; color:var(--text);
  box-shadow:none !important; border-color:transparent !important;
}
.search-inp::placeholder, #sch_stx::placeholder { color:#aab4c0; }
.search-btn, #sch_submit {
  background:var(--blue); border:none; color:#fff;
  padding:0 24px; cursor:pointer; transition:background .18s;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.search-btn:hover, #sch_submit:hover { background:var(--blue-d); }

/* 헤더 버튼 */
.header-actions, .hd_login {
  margin-left:auto; display:flex; gap:7px; align-items:center;
  position:static !important;
}
.hd_login li { float:none !important; margin:0 !important; border:0 !important; padding:0 !important; }
.hbtn, .hd_login a {
  font-size:13px; font-weight:400; padding:8px 16px;
  border-radius:6px; border:none; font-family:inherit; transition:all .18s;
  display:inline-block; text-decoration:none;
}
.hbtn-outline, .hd_login a { background:#fff; color:var(--blue); border:1px solid var(--blue); }
.hbtn-outline:hover, .hd_login a:hover { background:var(--blue-l); color:var(--blue); }
.hbtn-solid { background:var(--blue); color:#fff; border:1px solid var(--blue); }
.hbtn-solid:hover { background:var(--blue-d); }

/* ══ 3. GNB ══ */
.gnb, #gnb {
  background:#fff; border-bottom:2px solid var(--border);
  position:sticky; top:66px; z-index:200;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.gnb > h2, #gnb > h2 { position:absolute; font-size:0; overflow:hidden; }
.gnb .inner, #gnb .gnb_wrap { max-width:1160px; margin:0 auto; padding:0 10px; position:relative; }
.gnb-list, #gnb_1dul { display:flex; overflow-x:auto; }
#gnb ul::after { display:block; visibility:hidden; clear:both; content:""; }
.gnb_1dli { float:none !important; position:relative; }
.gnb-item, #gnb .gnb_1da {
  display:flex; align-items:center;
  padding:15px 20px; font-size:14px; font-weight:400;
  color:var(--muted); white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:all .15s; flex-shrink:0;
}
.gnb-item:hover, #gnb .gnb_1dli:hover > .gnb_1da { color:var(--blue); }
.gnb-item.on, #gnb .gnb_1dli.current > .gnb_1da { color:var(--blue); border-bottom-color:var(--blue); font-weight:700; }
.gnb-item.dim, .wk-gnb-dim { color:#c8d0db; }
.gnb-item.dim:hover { color:#a0aab4; border-bottom-color:transparent; }

/* GNB 서브메뉴 */
.gnb-sub, #gnb .gnb_2dul {
  display:none; position:absolute; top:100%; left:0;
  background:#fff; border:1px solid var(--border);
  border-radius:0 0 10px 10px; box-shadow:0 4px 16px rgba(0,0,0,.1);
  min-width:180px; z-index:500;
}
.gnb-sub ul, #gnb .gnb_2dul ul { padding:6px 0; }
#gnb .gnb_2da {
  display:block; padding:9px 18px;
  font-size:13px; color:var(--text); transition:all .15s;
}
#gnb .gnb_2da:hover { background:var(--blue-ll); color:var(--blue); }
#gnb .bg { display:none; }
.gnb_1dli:hover .gnb-sub,
.gnb_1dli:hover .gnb_2dul { display:block; }
#gnb_all_bg { display:none; background:rgba(0,0,0,.3); width:100%; height:100%; position:fixed; left:0; top:0; z-index:999; }
#gnb .gnb_empty { padding:18px; color:var(--muted); font-size:13px; }

/* ══ 4. HERO ══ */
.hero {
  background: linear-gradient(155deg, var(--navy) 0%, #0d3461 60%, #0a4d8f 100%);
  overflow: hidden;
}
.hero-slide { min-width:100%; padding:48px 0 44px; display:none; }
.hero-slide.active { display:block; }
.hero-grid { display:grid; grid-template-columns:1fr 400px; gap:48px; align-items:center; }

.slide-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(0,156,255,.18); border:1px solid rgba(0,156,255,.38);
  color:#7dd3ff; font-size:12px; font-weight:500;
  padding:5px 14px; border-radius:20px; margin-bottom:16px;
}
.slide-title {
  font-size:clamp(24px,3.5vw,42px); font-weight:900;
  color:#fff; line-height:1.2; letter-spacing:-.8px; margin-bottom:14px;
}
.slide-title strong { color:var(--blue); }
.slide-desc {
  font-size:15px; color:rgba(255,255,255,.55); line-height:1.9;
  font-weight:300; margin-bottom:26px;
}
.slide-btns { display:flex; gap:10px; }
.sbtn-p {
  background:var(--blue); color:#fff; border:none;
  padding:13px 26px; border-radius:8px; font-size:15px; font-weight:600;
  cursor:pointer; font-family:inherit; display:inline-block;
  box-shadow:0 4px 18px rgba(0,156,255,.4); transition:all .2s; text-decoration:none;
}
.sbtn-p:hover { background:var(--blue-d); color:#fff; transform:translateY(-1px); }
.sbtn-g {
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.22);
  padding:13px 22px; border-radius:8px; font-size:14px; font-weight:500;
  cursor:pointer; font-family:inherit; transition:all .2s; display:inline-block; text-decoration:none;
}
.sbtn-g:hover { background:rgba(255,255,255,.17); color:#fff; }

/* 검사 카드 박스 */
.test-box {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:22px;
}
.test-box-hd {
  font-size:13px; font-weight:600; color:#7dd3ff;
  margin-bottom:14px; padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:space-between;
}
.test-box-hd span { color:rgba(255,255,255,.35); font-size:12px; font-weight:400; }
.test-items { display:flex; flex-direction:column; gap:8px; }
.test-item {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:12px 14px; cursor:pointer; transition:all .2s; text-decoration:none;
}
.test-item:hover { background:rgba(0,156,255,.18); border-color:rgba(0,156,255,.4); }
.test-ico {
  width:38px; height:38px; border-radius:9px;
  background:rgba(0,156,255,.15); border:1px solid rgba(0,156,255,.22);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.test-info { flex:1; }
.test-name { font-size:14px; font-weight:500; color:#fff; }
.test-sub  { font-size:11px; color:rgba(255,255,255,.4); margin-top:2px; }
.test-dur  { font-size:11px; color:rgba(255,255,255,.35); white-space:nowrap; }
.bdg { font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; margin-left:5px; vertical-align:middle; }
.bdg-hot { background:rgba(255,80,80,.22); color:#ff8080; }
.bdg-new { background:rgba(0,210,150,.22); color:#00d4a0; }

/* 슬라이드 2 — 공공일자리 카드 */
.public-hero-cards { display:flex; flex-direction:column; gap:9px; }
.ph-card {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:11px; padding:14px 16px;
  display:flex; align-items:center; gap:12px; cursor:pointer; transition:all .2s; text-decoration:none;
}
.ph-card:hover { background:rgba(0,156,255,.18); border-color:rgba(0,156,255,.38); }
.ph-ico {
  width:42px; height:42px; border-radius:10px;
  background:rgba(0,156,255,.18); border:1px solid rgba(0,156,255,.28);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ph-info { flex:1; }
.ph-name { font-size:15px; font-weight:600; color:#fff; }
.ph-cnt  { font-size:12px; color:rgba(255,255,255,.45); margin-top:2px; }
.ph-arrow { color:rgba(255,255,255,.35); }

/* 슬라이드 3 — 정책 카드 */
.policy-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.pol-card {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:11px; padding:16px 14px; cursor:pointer; transition:all .2s;
}
.pol-card:hover { background:rgba(0,156,255,.18); border-color:rgba(0,156,255,.38); }
.pol-ico {
  width:40px; height:40px; border-radius:9px;
  background:rgba(0,156,255,.18); border:1px solid rgba(0,156,255,.28);
  display:flex; align-items:center; justify-content:center; margin-bottom:9px;
}
.pol-name { font-size:14px; font-weight:700; color:#fff; margin-bottom:3px; }
.pol-amt  { font-size:12px; color:#7dd3ff; font-weight:700; }

/* 히어로 하단 탭 */
.hero-nav {
  display:flex; align-items:stretch;
  background:rgba(255,255,255,.05);
  border-top:1px solid rgba(255,255,255,.08);
}
.hero-tab {
  flex:1; padding:14px 18px; cursor:pointer;
  display:flex; align-items:center; gap:9px;
  border-right:1px solid rgba(255,255,255,.08);
  transition:all .18s; border-bottom:3px solid transparent;
  max-width:33.33%;
}
.hero-tab:last-child { border-right:none; }
.hero-tab.on { background:rgba(0,156,255,.14); border-bottom-color:var(--blue); }
.hero-tab-ico {
  width:34px; height:34px; border-radius:8px;
  background:rgba(0,156,255,.14); border:1px solid rgba(0,156,255,.22);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hero-tab.on .hero-tab-ico { background:rgba(0,156,255,.28); border-color:rgba(0,156,255,.45); }
.hero-tab-label { font-size:14px; font-weight:400; color:rgba(255,255,255,.6); }
.hero-tab.on .hero-tab-label { color:#fff; font-weight:600; }
.hero-tab-sub { font-size:11px; color:rgba(255,255,255,.3); margin-top:1px; }
.hero-tab.on .hero-tab-sub { color:rgba(255,255,255,.5); }

/* ══ 5. 빠른이동 ══ */
.quick { background:var(--blue); border-bottom:3px solid var(--blue-d); }
.quick-list { display:flex; overflow-x:auto; }
.quick-item {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:18px 20px; cursor:pointer; flex-shrink:0;
  border-bottom:3px solid transparent; transition:all .18s; text-decoration:none;
}
.quick-item:hover { background:rgba(255,255,255,.1); }
.quick-item.on { background:rgba(255,255,255,.15); border-bottom-color:#fff; }
.quick-ico {
  width:46px; height:46px; border-radius:12px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; transition:all .18s;
}
.quick-ico svg { stroke:#fff !important; }
.quick-item:hover .quick-ico, .quick-item.on .quick-ico {
  background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.45);
}
.quick-lab { font-size:12px; font-weight:500; color:rgba(255,255,255,.85); white-space:nowrap; }
.quick-item:hover .quick-lab, .quick-item.on .quick-lab { color:#fff; }

/* ══ 채용공고 카드 ══ */
.job-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.job-card {
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:18px; display:block; cursor:pointer; transition:all .18s; text-decoration:none;
}
.job-card:hover { border-color:var(--blue); box-shadow:0 4px 18px rgba(0,156,255,.1); transform:translateY(-2px); }
.jc-co { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.jc-logo {
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--border); background:var(--blue-ll);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.jc-coname { font-size:13px; color:var(--muted); }
.jc-title { font-size:15px; font-weight:700; line-height:1.4; margin-bottom:10px; color:var(--text); }
.jc-tags  { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.jc-tag   { font-size:12px; padding:3px 9px; border-radius:5px; background:var(--blue-l); color:var(--blue); font-weight:500; }
.jc-tag.g { background:var(--green-l); color:var(--green); }
.jc-tag.a { background:var(--amber-l); color:var(--amber); }
.jc-foot  { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding-top:9px; }
.jc-salary { font-size:14px; font-weight:800; color:var(--blue); }
.jc-dday   { font-size:12px; font-weight:700; padding:2px 8px; border-radius:5px; background:var(--red-l); color:var(--red); }

/* ══ 직업정보 카드 ══ */
.career-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:11px; }
.career-card {
  text-align:center; padding:20px 10px;
  background:#fff; border:1px solid var(--border);
  border-radius:12px; cursor:pointer; transition:all .18s; display:block; text-decoration:none;
}
.career-card:hover { border-color:var(--blue); background:var(--blue-ll); transform:translateY(-2px); }
.career-ico {
  width:48px; height:48px; border-radius:12px;
  border:1px solid var(--border); background:var(--blue-l);
  display:flex; align-items:center; justify-content:center; margin:0 auto 10px;
}
.career-card:hover .career-ico { border-color:var(--blue); }
.career-name { font-size:14px; font-weight:700; margin-bottom:3px; color:var(--text); }
.career-cnt  { font-size:12px; color:var(--muted); }
.career-sal  { font-size:13px; font-weight:600; color:var(--blue); margin-top:5px; }

/* ══ 정책 카드 (파란 배경) ══ */
.policy-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.policy-card {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:13px; padding:20px 18px; cursor:pointer; transition:all .18s;
}
.policy-card:hover { background:rgba(255,255,255,.17); transform:translateY(-2px); }
.pc-ico {
  width:46px; height:46px; border-radius:11px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; margin-bottom:11px;
}
.pc-name { font-size:16px; font-weight:800; color:#fff; margin-bottom:5px; }
.pc-desc { font-size:13px; color:rgba(255,255,255,.55); line-height:1.7; }
.pc-badge {
  display:inline-block; margin-top:11px;
  font-size:12px; padding:3px 11px; border-radius:5px;
  background:rgba(255,255,255,.18); color:rgba(255,255,255,.9);
}

/* ══ 국비교육 카드 ══ */
.edu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.edu-card {
  background:#fff; border:1px solid var(--border);
  border-radius:13px; overflow:hidden;
  cursor:pointer; transition:all .2s; display:flex; flex-direction:column; position:relative;
}
.edu-card:hover { border-color:var(--blue); box-shadow:0 5px 22px rgba(0,156,255,.11); transform:translateY(-2px); }
.edu-card-ad {
  position:absolute; top:11px; right:11px;
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:4px;
  background:var(--amber-l); color:var(--amber); border:1px solid rgba(224,123,0,.2);
}
.edu-card-top {
  background:var(--blue-l); padding:20px 18px 16px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; gap:12px;
}
.edu-card-ico {
  width:46px; height:46px; border-radius:11px;
  border:1px solid rgba(0,156,255,.2); background:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.edu-card-title { font-size:15px; font-weight:800; line-height:1.35; margin-bottom:4px; color:var(--navy); }
.edu-card-org {
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:700; color:var(--blue);
  background:rgba(0,156,255,.1); border:1px solid rgba(0,156,255,.18);
  padding:2px 8px; border-radius:5px;
}
.edu-card-body { padding:14px 18px; flex:1; }
.edu-card-desc { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:10px; }
.edu-card-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.edu-card-tag {
  font-size:11px; padding:2px 9px; border-radius:5px;
  background:var(--bg); border:1px solid var(--border); color:var(--muted);
}
.edu-card-footer {
  padding:12px 18px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; background:var(--bg);
}
.edu-card-price { font-size:17px; font-weight:900; color:var(--red); }
.edu-card-price span { font-size:12px; color:var(--muted); font-weight:400; margin-left:3px; }
.edu-card-btn {
  background:var(--blue); color:#fff; border:none;
  padding:8px 16px; border-radius:7px; font-size:13px; font-weight:500;
  cursor:pointer; font-family:inherit; transition:background .18s;
}
.edu-card-btn:hover { background:var(--blue-d); }

/* ══ 지역 필터 ══ */
.rfilter {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 15px; border-radius:20px; border:1px solid var(--border);
  background:#fff; color:var(--muted);
  font-size:13px; font-weight:400; cursor:pointer;
  font-family:inherit; transition:all .15s; white-space:nowrap;
}
.rfilter span { font-size:11px; color:var(--muted); background:var(--bg); padding:1px 6px; border-radius:8px; }
.rfilter:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-ll); }
.rfilter:hover span { background:var(--blue-l); color:var(--blue); }
.rfilter.on { border-color:var(--blue); color:var(--blue); background:var(--blue-l); font-weight:600; }
.rfilter.on span { background:var(--blue); color:#fff; }

/* ══ 지역별 섹션 ══ */
.region-wrap { display:grid; grid-template-columns:190px 1fr; gap:0; border:1px solid var(--border); border-radius:13px; overflow:hidden; }
.region-tabs { background:var(--bg); border-right:1px solid var(--border); display:flex; flex-direction:column; }
.region-tab {
  padding:13px 16px; font-size:14px; font-weight:400;
  color:var(--muted); cursor:pointer; border-left:3px solid transparent;
  transition:all .15s; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:7px;
}
.region-tab:last-child { border-bottom:none; }
.region-tab:hover { color:var(--blue); background:var(--blue-ll); }
.region-tab.on { color:var(--blue); border-left-color:var(--blue); background:#fff; font-weight:700; }
.region-tab .r-cnt { font-size:11px; color:var(--blue); background:var(--blue-l); padding:1px 6px; border-radius:8px; margin-left:auto; }
.region-tab:not(.on) .r-cnt { color:var(--muted); background:var(--border); }
.region-content { background:#fff; }
.region-panel { display:none; padding:14px; }
.region-panel.on { display:block; }

/* ══ 공공근로 리스트 ══ */
.pub-list { display:flex; flex-direction:column; gap:9px; }
.pub-item {
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border:1px solid var(--border); border-radius:9px;
  cursor:pointer; transition:all .18s; background:#fff; text-decoration:none;
}
.pub-item:hover { border-color:var(--blue); transform:translateX(3px); box-shadow:0 2px 10px rgba(0,156,255,.08); }
.pub-ico {
  width:40px; height:40px; border-radius:9px;
  border:1px solid var(--border); background:var(--blue-l);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pub-info { flex:1; }
.pub-title { font-size:14px; font-weight:700; margin-bottom:3px; color:var(--text); }
.pub-meta  { font-size:12px; color:var(--muted); display:flex; gap:9px; flex-wrap:wrap; }
.pub-meta span { display:flex; align-items:center; gap:3px; }
.pub-right { text-align:right; flex-shrink:0; }
.pub-wage  { font-size:15px; font-weight:800; color:var(--blue); }
.pub-dday  { font-size:11px; font-weight:700; padding:2px 7px; border-radius:4px; background:var(--red-l); color:var(--red); margin-top:3px; display:inline-block; }

/* ══ 민간채용 리스트 ══ */
.priv-list { display:flex; flex-direction:column; gap:9px; }
.priv-item {
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border:1px solid var(--border); border-radius:9px;
  cursor:pointer; transition:all .18s; background:#fff; text-decoration:none;
}
.priv-item:hover { border-color:var(--blue); transform:translateX(3px); box-shadow:0 2px 10px rgba(0,156,255,.08); }
.priv-ico {
  width:40px; height:40px; border-radius:9px;
  border:1px solid var(--border); background:var(--blue-l);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.priv-info { flex:1; }
.priv-co   { font-size:12px; color:var(--muted); margin-bottom:2px; }
.priv-title { font-size:14px; font-weight:700; margin-bottom:3px; color:var(--text); }
.priv-tags  { display:flex; gap:4px; flex-wrap:wrap; }
.priv-tag   { font-size:11px; padding:2px 7px; border-radius:4px; background:var(--blue-l); color:var(--blue); font-weight:500; }
.priv-tag.g { background:var(--green-l); color:var(--green); }
.priv-right { text-align:right; flex-shrink:0; }
.priv-salary { font-size:14px; font-weight:800; color:var(--blue); }
.priv-dday   { font-size:11px; font-weight:700; padding:2px 7px; border-radius:4px; background:var(--red-l); color:var(--red); margin-top:3px; display:inline-block; }

/* ══ 2단 레이아웃 ══ */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.public-banner {
  background:linear-gradient(135deg,#005fa0,var(--navy));
  border-radius:11px; padding:20px 22px;
  display:flex; align-items:center; gap:15px; color:#fff;
  margin-bottom:11px; border:1px solid rgba(0,156,255,.2);
}
.pb-ico-wrap {
  width:48px; height:48px; border-radius:11px;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pb-t { flex:1; }
.pb-title { font-size:16px; font-weight:900; margin-bottom:2px; }
.pb-desc  { font-size:13px; color:rgba(255,255,255,.55); }
.pb-btn {
  background:var(--blue); color:#fff; border:none;
  padding:10px 18px; border-radius:7px; font-size:14px; font-weight:500;
  cursor:pointer; white-space:nowrap; font-family:inherit; transition:background .18s; flex-shrink:0;
}
.pb-btn:hover { background:var(--blue-d); }
.edu-bdg { font-size:11px; padding:2px 9px; border-radius:5px; flex-shrink:0; }
.bdg-free { background:var(--green-l); color:var(--green); }
.bdg-card { background:var(--blue-l); color:var(--blue); }

/* ══ 통계 도넛 ══ */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.stat-card { background:#fff; border:1px solid var(--border); border-radius:13px; padding:22px 20px; }
.stat-t { font-size:15px; font-weight:700; margin-bottom:18px; text-align:center; color:var(--navy); }
.donut-wrap { display:flex; flex-direction:column; align-items:center; gap:18px; }
.donut-svg-wrap { position:relative; width:160px; height:160px; flex-shrink:0; }
.donut-svg-wrap svg { transform:rotate(-90deg); }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-center-val { font-size:20px; font-weight:700; color:var(--navy); line-height:1; }
.donut-center-lab { font-size:10px; color:var(--muted); margin-top:2px; }
.donut-legend { width:100%; display:flex; flex-direction:column; gap:7px; }
.donut-row { display:flex; align-items:center; gap:8px; }
.donut-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.donut-name { flex:1; font-size:12px; color:var(--text); }
.donut-val { font-size:12px; color:var(--muted); }
.donut-pct { font-size:12px; font-weight:600; color:var(--navy); width:34px; text-align:right; flex-shrink:0; }

/* ══ 미니 배너 ══ */
.mini-banners { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.mini-bn {
  border-radius:11px; padding:20px 22px;
  display:flex; align-items:center; gap:14px;
  cursor:pointer; transition:all .18s; border:1px solid rgba(0,156,255,.18); text-decoration:none;
}
.mini-bn:hover { opacity:.88; box-shadow:0 3px 14px rgba(0,0,0,.1); }
.mini-bn-ico {
  width:48px; height:48px; border-radius:11px;
  border:1px solid rgba(0,156,255,.22); background:rgba(0,156,255,.1);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mini-bn-t { font-size:16px; font-weight:700; margin-bottom:2px; }
.mini-bn-d { font-size:13px; }

/* ══ 일거리마켓 ══ */
.gig-section { padding:24px 0; }
.gig-list { display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; }
.gig-card {
  background:#fff; border:1px solid var(--border);
  border-radius:10px; padding:13px 15px;
  display:flex; align-items:center; gap:12px;
  min-width:220px; flex-shrink:0; cursor:pointer; transition:all .18s; text-decoration:none;
}
.gig-card:hover { border-color:#b3d6f0; box-shadow:0 2px 9px rgba(0,0,0,.06); }
.gig-ico {
  width:38px; height:38px; border-radius:9px;
  border:1px solid var(--border); background:var(--blue-l);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.gig-info { flex:1; min-width:0; }
.gig-cat   { font-size:11px; color:var(--muted); margin-bottom:2px; }
.gig-title { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.gig-price { font-size:13px; font-weight:800; color:var(--blue); margin-top:2px; }
.gig-notice {
  background:var(--blue-l); border:1px solid rgba(0,156,255,.18);
  border-radius:7px; padding:10px 16px;
  font-size:13px; color:var(--muted); margin-top:12px;
  display:flex; align-items:center; gap:7px;
}

/* ── 10. 푸터 ── */
#ft {clear:both; background: var(--navy); padding:0px 24px;}

.ft-top { padding: 40px 0 30px; }
.ft-top-inner { display: flex; gap: 56px; align-items: flex-start; }

.ft-brand { flex-shrink: 0; min-width: 190px; }
.ft-logo { font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 5px; }
.ft-logo span { color: var(--blue); }
.ft-org { font-size: 12px; color: rgba(255,255,255,.38); margin-bottom: 10px; }
.ft-desc { font-size: 12px; color: rgba(255,255,255,.3); line-height: 1.7; }

.ft-links-wrap { display: flex; gap: 36px; flex: 1; }
.ft-link-group { display: flex; flex-direction: column; gap: 7px; }
.ft-link-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.55); margin-bottom: 3px; }
.ft-link-group a { font-size: 12px; color: rgba(255,255,255,.3); transition: color .15s; }
.ft-link-group a:hover { color: rgba(255,255,255,.75); }

.ft-bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 14px 0; }
.ft-bottom-inner { display: flex; justify-content: space-between; align-items: center; }

.ft-policy-links, #ft_link { display: flex; gap: 0; }
#ft_link a { display: inline-block; }
.ft-policy-links a, #ft_link a {
  font-size: 12px; color: rgba(255,255,255,.32); padding: 4px 12px;
  border-right: 1px solid rgba(255,255,255,.1); transition: color .15s;
}
.ft-policy-links a:first-child, #ft_link a:first-child { padding-left: 0; }
.ft-policy-links a:last-child, #ft_link a:last-child { border-right: 0; }
.ft-policy-links a:hover, #ft_link a:hover { color: rgba(255,255,255,.7); }

.ft-copy, #ft_copy {
  font-size: 11px; color: rgba(255,255,255,.22);
  text-align: right; width: auto; margin: 0; padding: 0; border: 0;
}
.ft-copy b, #ft_copy b { color: rgba(255,255,255,.38); font-weight: 500; }

/* 상단으로 버튼 */
#top_btn {
  position: fixed; bottom: 22px; right: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  opacity: 0; pointer-events: none; transition: all .3s;
}
#top_btn.show { opacity: 1; pointer-events: auto; }
#top_btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ══ 컨텐츠 영역 ══ */
#wrapper { background:var(--bg); }
#container_wr { margin:0 auto; }
#container_wr::after { display:block; visibility:hidden; clear:both; content:""; }
#container { position:relative; float:left; min-height:500px; margin:0px; font-size:1em; width:100%; }
#container::after { display:block; visibility:hidden; clear:both; content:""; }
#container_title { font-size:1.3em; margin:0 0 18px; font-weight:700; color:var(--navy); }
#aside { float:right; width:240px; padding:0; height:100%; margin:28px 0 28px 24px; }
body:not(.index) #container_wr { margin:0 auto; padding:0px; }
body:not(.index) #container { width:100%; }

/* ══ 그누보드 게시판 공통 ══ */
.tbl_wrap table { width:100%; border-collapse:collapse; background:#fff; border-top:2px solid var(--navy); }
.tbl_wrap caption { padding:10px 0; font-weight:700; text-align:left; color:var(--navy); }
.tbl_head01 { margin:0 0 10px; }
.tbl_head01 caption { padding:0; font-size:0; overflow:hidden; }
.tbl_head01 thead th { padding:13px 8px; font-weight:600; text-align:center; border-bottom:1px solid var(--border); height:46px; background:var(--bg); color:var(--text); }
.tbl_head01 tfoot th, .tbl_head01 tfoot td { padding:10px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg); text-align:center; }
.tbl_head01 tbody th { padding:11px 8px; border-bottom:1px solid var(--border); }
.tbl_head01 td { color:var(--text); padding:11px 8px; border-bottom:1px solid var(--border); line-height:1.5; word-break:break-all; }
.tbl_head01 tbody tr:hover td { background:var(--blue-ll); }
.tbl_head01 a:hover { text-decoration:underline; color:var(--blue); }
.tbl_head02 { margin:0 0 10px; }
.tbl_head02 caption { padding:0; font-size:0; overflow:hidden; }
.tbl_head02 thead th { padding:9px 8px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg); color:var(--text); font-size:13px; text-align:center; }
.tbl_head02 tfoot th, .tbl_head02 tfoot td { padding:10px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg); text-align:center; }
.tbl_head02 tbody th { padding:8px; border:1px solid var(--border); background:#fff; }
.tbl_head02 td { padding:8px; border:1px solid var(--border); background:#fff; line-height:1.5; word-break:break-all; }
.tbl_frm01 { margin:0 0 20px; }
.tbl_frm01 table { width:100%; border-collapse:collapse; }
.tbl_frm01 th { width:120px; padding:10px 14px; border:1px solid var(--border); border-left:0; background:var(--bg); text-align:left; font-size:13px; font-weight:500; }
.tbl_frm01 td { padding:8px 12px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.wr_content textarea, .tbl_frm01 textarea, .frm_input { border:1px solid var(--border); background:#fff; color:var(--text); vertical-align:middle; border-radius:6px; padding:8px 12px; }
.frm_input { height:40px; }
.full_input { width:100%; }
.half_input { width:49.5%; }

/* 버튼 */
a.btn, .btn { line-height:36px; height:36px; padding:0 14px; text-align:center; font-weight:500; border:0; font-size:13px; border-radius:6px; cursor:pointer; transition:all .18s; }
a.btn01, button.btn01 { display:inline-block; padding:7px 13px; border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:6px; font-size:13px; }
a.btn01:hover, button.btn01:hover { background:var(--blue-ll); color:var(--blue); }
a.btn02, button.btn02 { display:inline-block; padding:7px 13px; border:1px solid var(--navy); background:var(--navy); color:#fff; border-radius:6px; font-size:13px; }
.btn_submit { border:0; background:var(--blue); color:#fff; cursor:pointer; border-radius:6px; padding:9px 18px; font-size:14px; font-weight:500; transition:background .18s; }
.btn_submit:hover { background:var(--blue-d); }
.btn_close { border:1px solid var(--border); cursor:pointer; border-radius:6px; background:#fff; padding:9px 18px; font-size:14px; }
a.btn_cancel, button.btn_cancel { display:inline-block; background:var(--muted); color:#fff; border-radius:6px; padding:9px 18px; font-size:14px; }
a.btn_b01, .btn_b01 { display:inline-block; color:var(--muted); border:0; background:transparent; font-size:13px; }
a.btn_b02, .btn_b02 { display:inline-block; background:var(--blue); padding:7px 13px; color:#fff; border:0; border-radius:6px; font-size:13px; }
a.btn_b02:hover, .btn_b02:hover { background:var(--blue-d); }
a.btn_b03, .btn_b03 { display:inline-block; background:#fff; border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 13px; font-size:13px; }
a.btn_b03:hover, .btn_b03:hover { background:var(--blue-ll); }
a.btn_b04, .btn_b04 { display:inline-block; background:#fff; border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:7px 13px; font-size:13px; }
a.btn_admin, .btn_admin { display:inline-block; color:var(--red); font-size:13px; }
a.btn_frmline, button.btn_frmline { display:inline-block; padding:0 13px; height:40px; border:0; background:var(--navy); border-radius:6px; color:#fff; font-size:13px; vertical-align:top; }

/* 페이징 */
.pg_wrap { clear:both; display:inline-block; width:100%; text-align:center; margin-top:24px; }
.pg { text-align:center; }
.pg_page, .pg_current { display:inline-block; vertical-align:middle; }
.pg_page { color:var(--muted); font-size:13px; height:34px; line-height:32px; padding:0 10px; min-width:34px; border-radius:17px; border:1px solid var(--border); background:#fff; margin:0 2px; transition:all .15s; }
.pg_page:hover { background:var(--blue-ll); color:var(--blue); border-color:var(--blue); }
.pg_current { display:inline-block; background:var(--blue); border:1px solid var(--blue); color:#fff; font-weight:700; height:34px; line-height:34px; padding:0 12px; min-width:34px; border-radius:17px; margin:0 2px; }
.pg_start, .pg_prev, .pg_end, .pg_next { text-indent:-999px; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:17px; margin:0 2px; height:34px; line-height:34px; min-width:34px; display:inline-block; vertical-align:middle; }
.pg_start::before { content:"«"; text-indent:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:12px; color:var(--muted); }
.pg_prev::before  { content:"‹"; text-indent:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:16px; color:var(--muted); }
.pg_end::before   { content:"»"; text-indent:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:12px; color:var(--muted); }
.pg_next::before  { content:"›"; text-indent:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:16px; color:var(--muted); }

/* 리스트/기타 */
.sch_word { color:#fff; background:var(--blue); padding:2px 5px; border-radius:3px; }
.list_01 ul { border-top:1px solid var(--border); }
.list_01 li { border-bottom:1px solid var(--border); background:#fff; padding:11px 15px; list-style:none; position:relative; }
.list_01 li:nth-child(odd) { background:var(--bg); }
.list_01 li:hover { background:var(--blue-ll); }
.list_01 li.empty_li { text-align:center; padding:22px 0; color:var(--muted); }
.is-hidden { display:none !important; }
.is-visible { display:block !important; }
.empty_table { padding:48px 0 !important; text-align:center; color:var(--muted); }
.empty_list  { padding:22px 0 !important; color:var(--muted); text-align:center; }
#bo_v_con ul { display:block; list-style-type:disc; margin:1em 0; padding-left:40px; }
#bo_v_con ol { display:block; list-style-type:decimal; margin:1em 0; padding-left:40px; }
#bo_v_con li { display:list-item; }
#device_change { display:block; margin:.5em; padding:.6em 0; border:1px solid var(--border); border-radius:2em; background:#fff; color:var(--text); font-size:1.2em; text-align:center; }
.sv_wrap .sv { z-index:1000; display:none; margin:5px 0 0; font-size:13px; background:var(--navy); border-radius:10px; }
.sv_wrap .sv a { display:inline-block; padding:0 12px; line-height:32px; width:110px; color:rgba(255,255,255,.7); }
.sv_on { display:block !important; position:absolute; top:26px; left:0; }
.pc-only { display:none; }
@media(min-width:769px) { .pc-only { display:flex !important; } }
.mobile-only { display:block; }
@media(min-width:769px) { .mobile-only { display:none !important; } }
.sound_only { display:inline-block !important; }

/* ══ 애니메이션 ══ */
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.hero-slide.active .hero-grid > * { animation:fadeUp .4s ease both; }
.hero-slide.active .hero-grid > *:nth-child(2) { animation-delay:.08s; }

/* ════════════════════════════════════════
   반응형 — 4단계 브레이크포인트
   1200 / 1024 / 900 / 768 / 600 / 375
════════════════════════════════════════ */

/* ── min-width 해제 ── */
@media(max-width:1200px) {
  #hd, #wrapper, #ft { min-width: 0; }
}

/* pc-only / mobile-only */
@media(min-width:769px) { .pc-only  { display:flex  !important; } }
@media(max-width:768px) { .pc-only  { display:none  !important; } }
@media(min-width:769px) { .mobile-only { display:none !important; } }
@media(max-width:768px) { .mobile-only { display:block !important; } }

/* ══════════════════════════════════════
   1024px — 태블릿 가로
══════════════════════════════════════ */
@media(max-width:1024px) {
  .inner { padding: 12px 20px; }

  /* 헤더 */
  .header-inner { height: 90px; gap: 16px; }
  .logo-text { font-size: 26px; }
  .logo-sub { font-size: 12px; }
  .search-wrap, .hd_sch_wr { max-width: 400px; height: 46px; }

  /* GNB */
  .gnb-item, #gnb .gnb_1da { padding: 14px 16px; font-size: 13px; }

  /* HERO */
  .hero-grid { grid-template-columns: 1fr 320px; gap: 28px; }
  .slide-title { font-size: clamp(22px, 3vw, 36px); }

  /* 섹션 그리드 */
  .job-grid     { grid-template-columns: repeat(3,1fr); }
  .career-grid  { grid-template-columns: repeat(4,1fr); }
  .policy-grid  { grid-template-columns: repeat(2,1fr); }
  .edu-grid     { grid-template-columns: repeat(2,1fr); }
  .stats-grid   { grid-template-columns: repeat(2,1fr); }

  /* 지역 */
  .region-wrap { grid-template-columns: 160px 1fr; }

  /* 푸터 */
  .ft-top-inner  { gap: 36px; }
  .ft-links-wrap { gap: 24px; }
}

/* ══════════════════════════════════════
   900px — 태블릿 세로
══════════════════════════════════════ */
@media(max-width:900px) {
  .inner { padding: 12px 16px; }

  /* 헤더 — sticky 해제, 2줄 */
  header, #hd_wrapper { position: static; box-shadow: none; }
  .gnb, #gnb          { position: static; top: auto; }
  .header-inner {
    height: auto; flex-wrap: nowrap;
    padding: 12px 0; gap: 10px; align-items: center;
  }
  .logo, #logo       { order: 1; flex-shrink: 0; }
  .search-wrap,
  .hd_sch_wr         { order: 2; flex: 1; width: auto !important; max-width: none; }
  .mob-menu-btn      { order: 3; flex-shrink: 0; }
  .search-form, #hd_sch { height: 46px; }

  /* GNB 스크롤 */
  .gnb-list, #gnb_1dul {
    overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  .gnb-item, #gnb .gnb_1da { padding: 13px 14px; font-size: 13px; }

  /* HERO */
  .hero-slide { padding: 32px 0 26px; }
  .hero-grid  { grid-template-columns: 1fr; gap: 24px; }
  .test-box, .public-hero-cards, .policy-hero-grid { max-width: 100%; }
  .slide-title { font-size: clamp(22px, 4vw, 34px); }
  .policy-hero-grid { grid-template-columns: repeat(2,1fr); }

  /* 히어로 하단탭 */
  .hero-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hero-tab { min-width: 120px; padding: 12px 14px; }

  /* 빠른이동 */
  .quick-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
  .quick-item { padding: 14px 8px; flex-direction: column; border-right: none; border-bottom: none; }
  .quick-ico  { width: 44px; height: 44px; }
  .quick-lab  { font-size: 11px; }

  /* 섹션 공통 */
  .sec       { padding: 32px 0; }
  .sec-title { font-size: 18px; }

  /* 채용공고 */
  .job-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }

  /* 직업정보 */
  .career-grid { grid-template-columns: repeat(3,1fr); gap: 10px; }

  /* 정책 */
  .policy-grid { grid-template-columns: repeat(2,1fr); }

  /* 국비교육 */
  .edu-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }

  /* 지역 */
  .region-wrap { grid-template-columns: 1fr; }
  .region-tabs {
    flex-direction: row; overflow-x: auto; border-right: none;
    border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
  }
  .region-tab {
    flex-shrink: 0; border-left: none; border-bottom: 3px solid transparent;
    border-right: 1px solid var(--border);
  }
  .region-tab.on { border-bottom-color: var(--blue); background: #fff; }

  /* 통계 */
  .stats-grid   { grid-template-columns: 1fr; gap: 16px; }
  .two-col      { grid-template-columns: 1fr; gap: 20px; }
  .mini-banners { grid-template-columns: repeat(2,1fr); gap: 10px; }

  /* 공공근로·민간채용 */
  .pub-item, .priv-item { padding: 12px 14px; }

  /* 푸터 */
  .ft-top-inner  { flex-direction: column; gap: 24px; }
  .ft-links-wrap { flex-wrap: wrap; gap: 20px; }
  .ft-link-group { min-width: calc(50% - 10px); }
  .ft-bottom-inner { flex-direction: column; gap: 8px; align-items: flex-start; }
  .ft-copy, #ft_copy { text-align: left; }
}

/* ══════════════════════════════════════
   768px — 태블릿 소형 / 큰 폰 가로
══════════════════════════════════════ */
@media(max-width:768px) {
  /* 검색바 줄 조정 */
  .search-wrap, .hd_sch_wr { height: 44px; border-radius: 22px; }
  .search-cat, #sch_cat { padding: 0 12px; font-size: 13px; }
  .search-inp, #sch_stx { font-size: 14px; padding: 0 14px; }
  .search-btn, #sch_submit { padding: 0 18px; }

  /* HERO 슬라이드 버튼 */
  .slide-btns { gap: 8px; }
  .sbtn-p { padding: 11px 22px; font-size: 14px; }
  .sbtn-g { padding: 11px 18px; font-size: 13px; }

  /* 검사박스 목록 */
  .test-items { gap: 7px; }
  .test-item  { padding: 10px 12px; }
  .test-name  { font-size: 13px; }

  /* 공공일자리 히어로 */
  .public-hero-cards { gap: 8px; }
  .ph-card { padding: 12px 14px; }

  /* 교육 카드 */
  .edu-card-title { font-size: 14px; }

  /* 지역탭 */
  .region-tab { padding: 12px 14px; font-size: 13px; }
  .region-panel { padding: 12px; }

  /* 공공근로/민간 오른쪽 */
  .pub-right, .priv-right { display: none; }

  /* 통계 도넛 */
  .donut-wrap { flex-direction: row; gap: 20px; align-items: center; }
  .donut-svg-wrap { width: 120px; height: 120px; flex-shrink: 0; }
  .donut-center-val { font-size: 17px; }
  .donut-legend { width: auto; flex: 1; }

  /* 일거리마켓 */
  .gig-list { padding-bottom: 8px; }
  .gig-card { min-width: 180px; }
}

/* ══════════════════════════════════════
   600px — 모바일
══════════════════════════════════════ */
@media(max-width:600px) {
  .inner { padding: 12px 14px; }

  /* 상단바 숨김 */
  .top-bar { display: none; }

  /* 헤더 — 1줄: 로고 | 검색창 | 햄버거 */
  .header-inner { padding: 10px 0; gap: 10px; flex-wrap: nowrap; align-items: center; }
  .logo, #logo       { order: 1; flex-shrink: 0; }
  .search-wrap,
  .hd_sch_wr         { order: 2; flex: 1; width: auto !important; max-width: none; }
  .mob-menu-btn      { order: 3; flex-shrink: 0; }
  .logo-mark    { width: 34px; height: 34px; border-radius: 7px; }
  .logo-text    { font-size: 22px; }
  .logo-sub     { display: none; }
  .hbtn         { padding: 7px 12px; font-size: 12px; }
  .search-wrap, .hd_sch_wr { height: 38px; }
  .search-form, #hd_sch    { height: 32px; }
  .search-cat, #sch_cat    { padding: 0 10px; font-size: 12px; }

  /* GNB */
  .gnb-item, #gnb .gnb_1da { padding: 11px 12px; font-size: 12px; }

  /* HERO */
  .hero-slide  { padding: 24px 0 18px; }
  .slide-eyebrow { font-size: 11px; padding: 4px 10px; margin-bottom: 10px; }
  .slide-title { font-size: clamp(20px, 5.5vw, 26px); margin-bottom: 10px; }
  .slide-desc  { font-size: 13px; line-height: 1.7; margin-bottom: 14px; }
  .slide-btns  { flex-direction: column; gap: 8px; }
  .sbtn-p, .sbtn-g { width: 100%; text-align: center; padding: 12px 20px; font-size: 14px; }

  /* 검사박스 */
  .test-box { padding: 14px; }
  .test-items { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex-direction: unset; }
  .test-item  { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 10px; }
  .test-dur   { display: none; }
  .test-name  { font-size: 12px; }
  .test-sub   { font-size: 10px; }

  /* 공공일자리 */
  .public-hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-direction: unset; }
  .ph-card { padding: 10px 12px; }
  .ph-name { font-size: 13px; }

  /* 정책 히어로 */
  .policy-hero-grid { grid-template-columns: 1fr 1fr; }
  .pol-card { padding: 12px; }
  .pol-name { font-size: 13px; }

  /* 히어로 하단 탭 */
  .hero-tab     { min-width: 90px; padding: 10px 10px; }
  .hero-tab-sub { display: none; }
  .hero-tab-ico { width: 28px; height: 28px; }
  .hero-tab-label { font-size: 12px; }

  /* 빠른이동 */
  .quick-list { grid-template-columns: repeat(4,1fr); gap: 5px; }
  .quick-ico  { width: 40px; height: 40px; border-radius: 10px; }
  .quick-lab  { font-size: 10px; }
  .quick-item { padding: 12px 4px; }

  /* 섹션 */
  .sec       { padding: 24px 0; }
  .sec-title { font-size: 16px; }
  .sec-head  { margin-bottom: 12px; }

  /* 채용공고 */
  .job-grid { grid-template-columns: 1fr; gap: 9px; }
  .job-card { padding: 14px; }
  .jc-title { font-size: 14px; }
  .jc-foot  { flex-wrap: wrap; gap: 6px; }

  /* 직업정보 */
  .career-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .career-card { padding: 14px 10px; }
  .career-name { font-size: 13px; }
  .career-ico  { width: 40px; height: 40px; border-radius: 10px; }

  /* 정책 */
  .policy-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .pc-name     { font-size: 14px; }

  /* 국비교육 */
  .edu-grid      { grid-template-columns: 1fr; gap: 10px; }
  .edu-card-top  { padding: 16px 14px; }
  .edu-card-body { padding: 12px 14px; }
  .edu-card-footer { padding: 10px 14px; }

  /* 지역 */
  .region-tab { padding: 10px 12px; font-size: 12px; }
  .r-cnt      { display: none; }

  /* 공공근로/민간 */
  .pub-item, .priv-item { flex-wrap: wrap; gap: 10px; }
  .pub-title, .priv-title { font-size: 13px; }
  .pub-meta span, .priv-tags { font-size: 11px; }

  /* 통계 */
  .stats-grid   { grid-template-columns: 1fr; }
  .stat-card    { padding: 16px 14px; }
  .donut-wrap   { flex-direction: column; align-items: center; gap: 16px; }
  .donut-svg-wrap { width: 140px; height: 140px; flex-shrink: 0; }
  .donut-center-val { font-size: 18px; }
  .donut-legend { width: 100%; flex: none; }
  .mini-banners { grid-template-columns: 1fr; gap: 8px; }
  .two-col      { gap: 16px; }

  /* 일거리마켓 */
  .gig-notice { font-size: 12px; padding: 10px 12px; }
  .gig-card   { min-width: 170px; padding: 11px 12px; }

  /* 페이징 */
  .pg_page, .pg_current { font-size: 12px; height: 30px; line-height: 28px; min-width: 30px; }
  .pg_start, .pg_prev, .pg_end, .pg_next { height: 30px; min-width: 30px; }

  /* 푸터 */
  .ft-top        { padding: 24px 0 18px; }
  .ft-brand      { min-width: 100%; }
  .ft-link-group { min-width: calc(50% - 10px); }
  .ft-policy-links, #ft_link { flex-wrap: wrap; gap: 0; }
  .ft-policy-links a, #ft_link a { font-size: 11px; padding: 4px 10px; }
}

/* ══════════════════════════════════════
   375px — 소형폰
══════════════════════════════════════ */
@media(max-width:375px) {
  .inner { padding: 12px 12px; }

  .logo-mark { width: 30px; height: 30px; }
  .logo-text { font-size: 20px; }
  .hbtn      { padding: 6px 10px; font-size: 11px; }

  /* 검색 */
  .search-cat, #sch_cat { display: none; } /* 소형폰 카테고리 셀렉트 숨김 */

  /* HERO */
  .slide-title { font-size: 30px; }
  .slide-desc  { font-size: 12px; }

  /* 검사박스 */
  .test-items { grid-template-columns: 1fr; }

  /* 빠른이동 */
  .quick-lab  { font-size: 9px; white-space: normal; text-align: center; }
  .quick-ico  { width: 36px; height: 36px; }

  /* 직업정보 */
  .career-grid { grid-template-columns: repeat(2,1fr); }

  /* 정책 */
  .policy-grid { grid-template-columns: 1fr; }

  /* 공공일자리 히어로 */
  .public-hero-cards { grid-template-columns: 1fr; }
  .policy-hero-grid  { grid-template-columns: 1fr; }

  /* 지역탭 */
  .region-tab { padding: 10px; font-size: 12px; }

  /* 도넛 차트 — 소형폰 세로 배치 강제 */
  .donut-wrap     { flex-direction: column !important; align-items: center !important; gap: 14px; }
  .donut-svg-wrap { width: 130px !important; height: 130px !important; }
  .donut-legend   { width: 100% !important; flex: none !important; }

  /* 푸터 */
  .ft-link-group { min-width: 100%; }
  .ft-links-wrap { gap: 16px; }
}

/* ════════════════════════════════════════
   모바일 햄버거 & 드로어 메뉴
════════════════════════════════════════ */

/* 햄버거 버튼 — 기본 숨김, 768px 이하 표시 */
.mob-menu-btn {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px;
  background: transparent; border: 1.5px solid var(--border);
  border-radius: 8px; cursor: pointer; flex-shrink: 0;
}
.mob-menu-btn span {
  display: block; width: 20px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: all .25s;
}
@media(max-width:768px) {
	.hidden {display:none;}
  .mob-menu-btn { display: flex; }
}

/* 오버레이 */
.mob-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 1100;
  opacity: 0; transition: opacity .25s;
}
.mob-overlay.show { display: block; opacity: 1; }

/* 드로어 */
.mob-drawer {
  position: fixed; top: 0; right: -100%; width: 300px; max-width: 85vw; height: 100%;
  background: #fff; z-index: 99999;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.18);
  transition: right .28s cubic-bezier(.4,0,.2,1);
}
.mob-drawer.open { right: 0; }

.mob-drawer-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
  background: var(--navy);
}
.mob-drawer-logo {
  font-size: 22px; font-weight: 900; color: #fff;
}
.mob-drawer-logo span { color: var(--blue); }
.mob-drawer-close {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; width: 34px; height: 34px; border-radius: 50%;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.mob-drawer-close:hover { background: rgba(255,255,255,.25); }

.mob-drawer-nav {
  flex: 1; overflow-y: auto; padding: 8px 0;
}
.mob-nav-item {
  display: block; padding: 14px 24px;
  font-size: 15px; color: var(--text); font-weight: 500;
  border-bottom: 1px solid var(--border);
  transition: all .15s;
}
.mob-nav-item:hover { background: var(--blue-ll); color: var(--blue); padding-left: 30px; }

.mob-drawer-footer {
  padding: 16px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 8px;
}
.mob-drawer-btn {
  flex: 1; text-align: center; padding: 10px 16px;
  border: 1.5px solid var(--blue); border-radius: 8px;
  color: var(--blue); font-size: 14px; font-weight: 600;
  transition: all .15s;
}
.mob-drawer-btn:hover { background: var(--blue-l); color: var(--blue); }
.mob-drawer-btn-solid {
  background: var(--blue); color: #fff;
}
.mob-drawer-btn-solid:hover { background: var(--blue-d); color: #fff; }

/* 상단이동 버튼 */
#top_btn {
  position: fixed; bottom: 22px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 14px rgba(0,0,0,.13);
  opacity: 0; pointer-events: none; transition: all .3s;
}
#top_btn.show { opacity: 1; pointer-events: auto; }
#top_btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }




.sb_wrap {
	margin:0px auto; max-width: 1200px;
}

.sb_wrap .banner_wrap {
	clear:both;
	float:left;
	margin:35px auto; 
    width: 100%;
    display: flex;
	justify-content: space-between;
}
  
.sb_wrap .banner_box {
	margin:3px;
}

.sb_wrap .banner_box img {
    max-width: 100%;
    border-radius: 12px;
}



@media all and (max-width:678px){
    .sb_wrap {
        padding-left: 5%;
        padding-right: 5%;
    }
	.sb_wrap .banner_wrap {display:block; }
	.sb_wrap .banner_box {float:left; width:48%;}
}