/**
 * ┌─────────────────────────────────────────────────────────────────────┐
 * │  FILE INDEX — 여수뉴스포털                                          │
 * ├──────────────┬──────────────────────────────────────────────────────┤
 * │  파일명      │  work.css                                           │
 * │  위치        │  /work/assets/css/work.css                                        │
 * │  생성일      │  2026-05-16                                           │
 * │  수정일      │  2026-05-16                                           │
 * │  버전        │  v1.0                                                 │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  기능/역할   │  스타일시트 — 포털·컴포넌트별 규칙 적용               │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  레이아웃    │  기준 너비: 1200px (전역·포털 변수와 연동)            │
 * │  섹터 구조   │  .sector-wrap width:100% — 다열은 .sector-inner (원칙2) │
 * │  폰트 기준   │  최소 14px (--fs-base 등 변수 연동)                 │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  연관 파일   │  load-by  : header.php·포털 레이아웃 (상이)            │
 * │              │  변수 주입: echoLayoutVars()·포털 CSS (해당 시)       │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  참조 사항   │  /docs/PROJECT_RULES.md 원칙8·포털 CSS 접두 규칙       │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  변경 이력   │  2026-05-16 v1.0 - FILE INDEX 일괄 부여                     │
 * └──────────────┴──────────────────────────────────────────────────────┘
 */

: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-sm, 14px);   /* 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 { width:100%; 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 { width:100%; padding:28px 0 22px; }
.wk-page-header h1 { margin:0 0 6px; font-size:24px; 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 { width:100%; padding-left:0; padding-right:0; 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:14px; 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  { width:100%; padding:12px 0; 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;  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 { width:100%; padding:0; display:block; box-sizing:border-box; }
.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:14px; 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:14px; 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:14px; 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:14px; 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:14px; 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:14px; 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:32px; display:block; margin-bottom:12px; opacity:.4; }

/* ══════════════════════════════
   메인 인덱스 – 서브메뉴 그리드
══════════════════════════════ */
.wk-index-wrap { width:100%; 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:24px; }
.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:14px; 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:14px; color:var(--wk-gray); white-space:nowrap; }

/* ══════════════════════════════
   반응형
══════════════════════════════ */
@media (max-width:900px) {
  .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; }
}

/* ── Mobile-First 보정 (원칙: 최소 14px · 모바일 우선 · 터치 44px) ── */
/* wk-* 전용 — pub-content-wrap·pub-sidebar 등 B-pattern shell 과 충돌 금지 */
@media (max-width: 768px) {
  .wk-content-wrap,
  .wk-list-wrap,
  .wk-talent-grid,
  .wk-arbeit-grid,
  .wk-submenu-grid {
    grid-template-columns: 1fr !important;
  }
  .wk-page-header-inner,
  .wk-list-header,
  .wk-filter-inner,
  .wk-board-header {
    flex-wrap: wrap !important;
  }
  .wk-sidebar {
    display: none !important;
  }
  .wk-filter-panel input[type="text"],
  .wk-filter-panel input[type="search"],
  .wk-filter-panel select,
  .wk-filter-panel textarea {
    font-size: 16px !important;
  }
  .wk-fbtn,
  .wk-apply-btn,
  .btn-apply,
  .wk-pag-btn {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .wk-talent-grid,
  .wk-arbeit-grid {
    grid-template-columns: 1fr !important;
  }
}