/* ═══════════════════════════════════════════════
   취업포털 전용 – work.css
   메뉴별 색상 테마 (블루 계열 차별화)
   구인·채용  : #1d4ed8 인디고블루  – 신뢰·전문성
   구직·인재  : #0891b2 시안블루    – 가능성·성장
   아르바이트 : #0f766e 틸그린      – 활동적·생동감
   취업게시판 : #4f46e5 인디고퍼플  – 커뮤니티·소통
   ═══════════════════════════════════════════════ */
:root {
  /* 공통 기본 */
  --wk-primary:  #0ea5e9;
  --wk-dark:     #0369a1;
  --wk-light:    #e0f2fe;
  --wk-bg:       #f0f9ff;
  --wk-green:    #059669;
  --wk-orange:   #d97706;
  --wk-red:      #dc2626;
  --wk-purple:   #7c3aed;
  --wk-gray:     #64748b;
  --wk-white:    #ffffff;
  --wk-border:   #e2e8f0;
  --wk-text:     #1e293b;
  --wk-muted:    #64748b;
  --wk-radius:   10px;
  --wk-shadow:   0 2px 8px rgba(0,0,0,.08);
  --wk-shadow-lg:0 6px 24px rgba(0,0,0,.12);

  /* ── 메뉴별 테마 색상 ── */
  /* 구인·채용 – 인디고블루 */
  --rc-main:   #1d4ed8;
  --rc-dark:   #1e3a8a;
  --rc-mid:    #3b82f6;
  --rc-light:  #dbeafe;
  --rc-bg:     #eff6ff;
  --rc-muted:  #bfdbfe;

  /* 구직·인재 – 시안블루 */
  --tl-main:   #0891b2;
  --tl-dark:   #0e7490;
  --tl-mid:    #22d3ee;
  --tl-light:  #cffafe;
  --tl-bg:     #ecfeff;
  --tl-muted:  #a5f3fc;

  /* 아르바이트 – 틸그린 */
  --ab-main:   #0f766e;
  --ab-dark:   #115e59;
  --ab-mid:    #14b8a6;
  --ab-light:  #ccfbf1;
  --ab-bg:     #f0fdfa;
  --ab-muted:  #99f6e4;

  /* 취업게시판 – 인디고퍼플 */
  --bd-main:   #4f46e5;
  --bd-dark:   #3730a3;
  --bd-mid:    #818cf8;
  --bd-light:  #e0e7ff;
  --bd-bg:     #eef2ff;
  --bd-muted:  #c7d2fe;

  /* ── 타이포그래피 스케일 (PROJECT_RULES.md 원칙3 / layout.css --fs-* 공통 참조) ── */
  --wk-fs-xs: var(--fs-xs, 12px);   /* 12px — 배지 전용 */
  --wk-fs-sm: var(--fs-sm, 14px);   /* 14px — 메타·날짜·보조텍스트 최솟값 */
  --wk-fs-base: var(--fs-base, 16px);   /* 16px — 본문 기본 */
  --wk-fs-md: var(--fs-md, 17px);   /* 17px — 강조 본문·버튼·폼 */
  --wk-fs-lg: var(--fs-lg, 18px);   /* 18px — 카드 제목·섹션명 */
  --wk-fs-xl: var(--fs-xl, 20px);   /* 20px — 서브 헤더 */
  --wk-fs-2xl: var(--fs-2xl, 24px);   /* 24px — 페이지 제목 */
  --wk-fs-3xl: var(--fs-3xl, 28px);   /* 28px — 섹션 대제목 */
  --wk-fs-hero: var(--fs-hero, 32px);   /* 32px — 히어로 제목 */
}

/* ── sector-inner grid 탈출 ── */
.wk-subnav,.wk-page-header,.wk-type-tabs,
.wk-filter-panel,.wk-content-wrap,.wk-wrap { grid-column:1/-1; width:100%; box-sizing:border-box; }

/* ══════════════════════════════
   서브네비 – 공통 기본
══════════════════════════════ */
.wk-subnav { background:#fff; border-bottom:2px solid var(--wk-border); position:sticky; top:0; z-index:50; }
.wk-subnav-inner { max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; gap:4px; padding:10px 16px; align-items:center; }
.wk-snav-item { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:20px; font-size:var(--wk-fs-sm); font-weight:500; text-decoration:none; color:var(--wk-gray); transition:all .18s; }
.wk-snav-write { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:20px; color:#fff; font-size:var(--wk-fs-sm); font-weight:600; text-decoration:none; transition:all .18s; }

/* ── 구인·채용 서브네비 (인디고블루) ── */
.theme-recruit .wk-subnav { border-bottom-color: var(--rc-muted); }
.theme-recruit .wk-snav-item:hover,
.theme-recruit .wk-snav-item.active { background:var(--rc-main); color:#fff; }
.theme-recruit .wk-snav-write { background:var(--rc-main); }
.theme-recruit .wk-snav-write:hover { background:var(--rc-dark); }

/* ── 구직·인재 서브네비 (시안블루) ── */
.theme-talent .wk-subnav { border-bottom-color: var(--tl-muted); }
.theme-talent .wk-snav-item:hover,
.theme-talent .wk-snav-item.active { background:var(--tl-main); color:#fff; }
.theme-talent .wk-snav-write { background:var(--tl-main); }
.theme-talent .wk-snav-write:hover { background:var(--tl-dark); }

/* ── 아르바이트 서브네비 (틸그린) ── */
.theme-arbeit .wk-subnav { border-bottom-color: var(--ab-muted); }
.theme-arbeit .wk-snav-item:hover,
.theme-arbeit .wk-snav-item.active { background:var(--ab-main); color:#fff; }
.theme-arbeit .wk-snav-write { background:var(--ab-main); }
.theme-arbeit .wk-snav-write:hover { background:var(--ab-dark); }

/* ── 취업게시판 서브네비 (인디고퍼플) ── */
.theme-board .wk-subnav { border-bottom-color: var(--bd-muted); }
.theme-board .wk-snav-item:hover,
.theme-board .wk-snav-item.active { background:var(--bd-main); color:#fff; }
.theme-board .wk-snav-write { background:var(--bd-main); }
.theme-board .wk-snav-write:hover { background:var(--bd-dark); }

/* ══════════════════════════════
   페이지 헤더
══════════════════════════════ */
.wk-page-header { background:linear-gradient(135deg, var(--wk-primary) 0%, #38bdf8 100%); color:#fff; }
.wk-page-header-inner { max-width:1100px; margin:0 auto; padding:28px 16px 22px; }
.wk-page-header h1 { margin:0 0 6px; font-size:22px; font-weight:800; }
.wk-page-header p  { margin:0; font-size:var(--wk-fs-sm); opacity:.88; }
.wk-page-header .wk-stats { display:flex; gap:20px; margin-top:14px; flex-wrap:wrap; }
.wk-stat-item { font-size:var(--wk-fs-xs); opacity:.9; }
.wk-stat-item strong { font-size:var(--wk-fs-lg); font-weight:800; display:block; }

/* ══════════════════════════════
   타입 탭
══════════════════════════════ */
.wk-type-tabs { background:#fff; border-bottom:1px solid var(--wk-border); }
.wk-type-tabs-inner { max-width:1100px; margin:0 auto; padding:0 16px; display:flex; gap:0; overflow-x:auto; }
.wk-ttab { display:inline-flex; align-items:center; gap:6px; padding:13px 18px; font-size:var(--wk-fs-sm); font-weight:600; color:var(--wk-gray); text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap; transition:all .15s; }
.wk-ttab:hover  { color:var(--wk-primary); }
.wk-ttab.active { color:var(--wk-primary); border-bottom-color:var(--wk-primary); }
.wk-ttab-cnt { font-size:11px; padding:2px 7px; border-radius:20px; background:var(--wk-light); color:var(--wk-dark); font-weight:700; }

/* ══════════════════════════════
   필터 패널
══════════════════════════════ */
.wk-filter-panel { background:#fff; border-bottom:1px solid var(--wk-border); }
.wk-filter-inner  { max-width:1100px; margin:0 auto; padding:12px 16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.wk-fselect,.wk-finput { height:34px; border:1.5px solid var(--wk-border); border-radius:8px; padding:0 10px; font-size:var(--wk-fs-sm); color:var(--wk-text); background:#fff; }
.wk-fselect:focus,.wk-finput:focus { outline:none; border-color:var(--wk-primary); }
.wk-finput { width:180px; }
.wk-fbtn { height:34px; padding:0 16px; border-radius:8px; background:var(--wk-primary); color:#fff; border:none; font-size:var(--wk-fs-sm); font-weight:600; cursor:pointer; }
.wk-fbtn:hover { background:var(--wk-dark); }
.wk-ftag { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border:1.5px solid var(--wk-border); border-radius:20px; font-size:var(--wk-fs-xs); font-weight:500; color:var(--wk-gray); text-decoration:none; cursor:pointer; transition:all .15s; background:#fff; }
.wk-ftag.active,.wk-ftag:hover { background:var(--wk-light); border-color:var(--wk-primary); color:var(--wk-dark); }

/* ══════════════════════════════
   콘텐츠 래퍼 (목록 + 사이드)
══════════════════════════════ */
.wk-content-wrap { max-width:1100px; margin:0 auto; padding:24px 16px 60px; display:grid; grid-template-columns:1fr 260px; gap:24px; }
.wk-list-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.wk-list-count { font-size:var(--wk-fs-sm); color:var(--wk-gray); }
.wk-list-count strong { color:var(--wk-primary); font-weight:700; }
.wk-sort-select { height:32px; border:1.5px solid var(--wk-border); border-radius:8px; padding:0 8px; font-size:var(--wk-fs-sm); color:var(--wk-text); }

/* ══════════════════════════════
   구인·채용 카드
══════════════════════════════ */
.wk-recruit-list { display:flex; flex-direction:column; gap:10px; }
.wk-recruit-card { background:#fff; border:1.5px solid var(--wk-border); border-radius:var(--wk-radius); padding:16px 18px; text-decoration:none; color:inherit; transition:all .15s; display:block; }
.wk-recruit-card:hover { border-color:var(--wk-primary); box-shadow:var(--wk-shadow); transform:translateY(-1px); }
.wk-recruit-card.closed { opacity:.6; }
.wk-rc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.wk-rc-company { font-size:var(--wk-fs-xs); color:var(--wk-gray); font-weight:600; }
.wk-rc-title { font-size:var(--wk-fs-base); font-weight:700; color:var(--wk-text); margin:4px 0 8px; }
.wk-rc-meta { display:flex; flex-wrap:wrap; gap:6px; font-size:var(--wk-fs-xs); color:var(--wk-muted); }
.wk-rc-meta span { display:inline-flex; align-items:center; gap:3px; }
.wk-rc-salary { font-size:var(--wk-fs-sm); font-weight:700; color:var(--wk-primary); }
.wk-rc-badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.wk-badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.wk-badge-new     { background:#dcfce7; color:#166534; }
.wk-badge-closed  { background:#f1f5f9; color:#94a3b8; }
.wk-badge-cat     { background:var(--wk-light); color:var(--wk-dark); }
.wk-badge-region  { background:#fef3c7; color:#92400e; }
.wk-badge-career  { background:#ede9fe; color:#5b21b6; }
.wk-badge-edu     { background:#fce7f3; color:#9d174d; }
.wk-badge-info    { background:#e0f2fe; color:#0369a1; }
.wk-badge-free    { background:#f0fdf4; color:#166534; }
.wk-deadline { font-size:11px; color:var(--wk-red); font-weight:600; white-space:nowrap; }
.wk-deadline.safe { color:var(--wk-green); }

/* ══════════════════════════════
   구직·인재 카드
══════════════════════════════ */
.wk-talent-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wk-talent-card { background:#fff; border:1.5px solid var(--wk-border); border-radius:var(--wk-radius); padding:16px; text-decoration:none; color:inherit; transition:all .15s; display:block; }
.wk-talent-card:hover { border-color:var(--wk-primary); box-shadow:var(--wk-shadow); }
.wk-tc-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, var(--wk-primary), #38bdf8); display:flex; align-items:center; justify-content:center; color:#fff; font-size:var(--wk-fs-lg); font-weight:800; flex-shrink:0; }
.wk-tc-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.wk-tc-name { font-size:var(--wk-fs-sm); font-weight:700; color:var(--wk-text); }
.wk-tc-career { font-size:11px; color:var(--wk-gray); }
.wk-tc-title { font-size:var(--wk-fs-sm); font-weight:600; color:var(--wk-text); margin-bottom:8px; }
.wk-tc-skills { font-size:11px; color:var(--wk-gray); line-height:1.6; }
.wk-tc-salary { font-size:var(--wk-fs-xs); color:var(--wk-primary); font-weight:700; margin-top:8px; }

/* ══════════════════════════════
   아르바이트 카드
══════════════════════════════ */
.wk-arbeit-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wk-arbeit-card { background:#fff; border:1.5px solid var(--wk-border); border-radius:var(--wk-radius); padding:15px; text-decoration:none; color:inherit; transition:all .15s; display:block; }
.wk-arbeit-card:hover { border-color:var(--wk-orange); box-shadow:var(--wk-shadow); }
.wk-ac-company { font-size:11px; color:var(--wk-gray); font-weight:600; margin-bottom:4px; }
.wk-ac-title { font-size:var(--wk-fs-sm); font-weight:700; color:var(--wk-text); margin-bottom:8px; }
.wk-ac-pay { font-size:var(--wk-fs-base); font-weight:800; color:var(--wk-orange); margin-bottom:8px; }
.wk-ac-meta { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--wk-muted); }
.wk-ac-meta span { display:flex; align-items:center; gap:4px; }

/* ══════════════════════════════
   게시판 목록
══════════════════════════════ */
.wk-board-list { border:1.5px solid var(--wk-border); border-radius:var(--wk-radius); overflow:hidden; background:#fff; }
.wk-board-header { display:grid; grid-template-columns:50px 1fr 80px 80px 70px; gap:0; background:#f8fafc; border-bottom:1px solid var(--wk-border); padding:10px 16px; font-size:var(--wk-fs-xs); font-weight:700; color:var(--wk-gray); }
.wk-board-row { display:grid; grid-template-columns:50px 1fr 80px 80px 70px; gap:0; padding:12px 16px; border-bottom:1px solid var(--wk-border); font-size:var(--wk-fs-sm); align-items:center; text-decoration:none; color:inherit; transition:background .1s; }
.wk-board-row:last-child { border-bottom:none; }
.wk-board-row:hover { background:#f8fafc; }
.wk-board-num { color:var(--wk-gray); font-size:var(--wk-fs-xs); text-align:center; }
.wk-board-title-cell { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:500; }
.wk-board-title-cell a { text-decoration:none; color:var(--wk-text); }
.wk-board-title-cell a:hover { color:var(--wk-primary); }
.wk-board-author,.wk-board-date,.wk-board-views { font-size:var(--wk-fs-xs); color:var(--wk-gray); text-align:center; }

/* ══════════════════════════════
   사이드바
══════════════════════════════ */
.wk-sidebar { display:flex; flex-direction:column; gap:16px; }
.wk-sb-box { background:#fff; border:1.5px solid var(--wk-border); border-radius:var(--wk-radius); overflow:hidden; }
.wk-sb-title { padding:12px 16px; font-size:var(--wk-fs-sm); font-weight:700; color:var(--wk-text); background:#f8fafc; border-bottom:1px solid var(--wk-border); display:flex; align-items:center; gap:6px; }
.wk-sb-body { padding:14px 16px; }
.wk-sb-stat { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid #f1f5f9; font-size:var(--wk-fs-sm); }
.wk-sb-stat:last-child { border-bottom:none; }
.wk-sb-stat-num { font-size:var(--wk-fs-base); font-weight:800; color:var(--wk-primary); }
.wk-sb-link-list a { display:block; padding:7px 0; font-size:var(--wk-fs-sm); color:var(--wk-gray); text-decoration:none; border-bottom:1px dotted #f1f5f9; }
.wk-sb-link-list a:last-child { border-bottom:none; }
.wk-sb-link-list a:hover { color:var(--wk-primary); }
.wk-sb-notice { font-size:var(--wk-fs-xs); color:var(--wk-gray); line-height:1.8; }
.wk-sb-notice li { padding:2px 0; }

/* ══════════════════════════════
   페이지네이션
══════════════════════════════ */
.wk-pagination { display:flex; justify-content:center; gap:4px; margin-top:24px; }
.wk-pag-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1.5px solid var(--wk-border); border-radius:8px; font-size:var(--wk-fs-sm); color:var(--wk-gray); text-decoration:none; transition:all .15s; }
.wk-pag-btn:hover  { border-color:var(--wk-primary); color:var(--wk-primary); }
.wk-pag-btn.active { background:var(--wk-primary); color:#fff; border-color:var(--wk-primary); }

/* ══════════════════════════════
   빈 상태
══════════════════════════════ */
.wk-empty { text-align:center; padding:60px 24px; color:var(--wk-gray); background:#f8fafc; border-radius:var(--wk-radius); border:1.5px dashed var(--wk-border); }
.wk-empty i { font-size:40px; display:block; margin-bottom:12px; opacity:.4; }

/* ══════════════════════════════
   메인 인덱스 – 서브메뉴 그리드
══════════════════════════════ */
.wk-index-wrap { max-width:1100px; margin:0 auto; padding:30px 16px 60px; }
.wk-submenu-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px; }
.wk-submenu-card { background:#fff; border:1.5px solid var(--wk-border); border-radius:14px; padding:24px 16px; text-align:center; text-decoration:none; color:inherit; transition:all .2s; }
.wk-submenu-card:hover { transform:translateY(-3px); box-shadow:var(--wk-shadow-lg); border-color:var(--wk-primary); }
.wk-submenu-icon { width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:22px; }
.wk-submenu-name { font-size:var(--wk-fs-base); font-weight:700; color:var(--wk-text); margin-bottom:4px; }
.wk-submenu-desc { font-size:var(--wk-fs-xs); color:var(--wk-gray); }
.wk-submenu-cnt  { font-size:var(--wk-fs-lg); font-weight:800; color:var(--wk-primary); display:block; margin-top:8px; }
.wk-recent-section { margin-bottom:32px; }
.wk-recent-title { font-size:var(--wk-fs-base); font-weight:700; color:var(--wk-text); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.wk-recent-title a { margin-left:auto; font-size:var(--wk-fs-xs); color:var(--wk-primary); font-weight:500; text-decoration:none; }
.wk-recent-rows { background:#fff; border:1.5px solid var(--wk-border); border-radius:var(--wk-radius); overflow:hidden; }
.wk-recent-row { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--wk-border); font-size:var(--wk-fs-sm); text-decoration:none; color:inherit; transition:background .1s; }
.wk-recent-row:last-child { border-bottom:none; }
.wk-recent-row:hover { background:#f8fafc; }
.wk-recent-row-title { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:500; }
.wk-recent-row-company { font-size:11px; color:var(--wk-gray); white-space:nowrap; }
.wk-recent-row-pay { font-size:var(--wk-fs-xs); font-weight:700; color:var(--wk-orange); white-space:nowrap; }
.wk-recent-row-date { font-size:11px; color:var(--wk-gray); white-space:nowrap; }

/* ══════════════════════════════
   반응형
══════════════════════════════ */
@media (max-width:900px) {
  .wk-content-wrap { grid-template-columns:1fr; }
  .wk-sidebar { position:static; }
  .wk-talent-grid,.wk-arbeit-grid { grid-template-columns:1fr; }
  .wk-submenu-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .wk-board-header,.wk-board-row { grid-template-columns:40px 1fr 60px 60px; }
  .wk-board-views { display:none; }
  .wk-ttab { padding:11px 12px; font-size:var(--wk-fs-sm); }
  .wk-submenu-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
}