/* 미래고용나눔협회 새 홈페이지 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: #333;
  background: #f7f8fa;
  line-height: 1.6;
}
a { color: #2b5ea7; text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ---------- 헤더 ---------- */
.topbar { background: #fff; border-bottom: 3px solid #2b5ea7; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; flex-direction: column; line-height: 1.2; color: #2b5ea7; gap: 2px; }
.logo strong { font-size: 20px; letter-spacing: -0.5px; }
.logo span { font-size: 12px; color: #888; }
.logo img { height: 40px; width: auto; object-fit: contain; }
.logo:has(img) { flex-direction: row; align-items: center; gap: 8px; }
.logo:has(img) strong { font-size: 16px; }
.nav { display: flex; list-style: none; gap: 4px; }
.nav > li { position: relative; padding: 8px 14px; cursor: pointer; font-size: 15px; font-weight: 600; color: #333; }
.nav > li.active, .nav > li:hover { color: #2b5ea7; }
.nav > li > .sub {
  display: none; position: absolute; top: 100%; left: 0; min-width: 170px;
  background: #fff; border: 1px solid #e3e6ea; border-top: 2px solid #2b5ea7;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08); z-index: 50;
}
.nav > li:hover > .sub { display: block; }
.nav > li > .sub a { display: block; padding: 10px 16px; font-size: 14px; font-weight: 400; color: #444; white-space: nowrap; }
.nav > li > .sub a:hover { background: #f0f4fa; color: #2b5ea7; text-decoration: none; }
.nav-toggle { display: none; background: none; border: none; font-size: 26px; color: #2b5ea7; cursor: pointer; }

/* ---------- 메인 배너 ---------- */
.hero {
  background: linear-gradient(135deg, #2b5ea7 0%, #3f7fd4 100%);
  color: #fff; text-align: center; padding: 70px 16px 64px;
}
.hero h1 { font-size: 30px; margin-bottom: 12px; letter-spacing: -0.5px; }
.hero p { font-size: 16px; opacity: 0.92; }

/* 홈 히어로 롤링 배너 (Skitter — 원본 사이트 라이브러리, 1920×500 고정 렌더 + zoom 반응형) */
.hero-skitter-box { position: relative; width: 100%; overflow: hidden; background: #eef1f5; }
.hero-skitter-box .box_skitter { margin: 0 auto; }
/* Skitter 내장 화살표(1920px 기준이라 축소 시 너무 작음)는 숨기고 반응형 커스텀 화살표 사용 */
.hero-skitter-box .box_skitter .prev_button,
.hero-skitter-box .box_skitter .next_button { display: none !important; }
.hero-skitter-box .hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 200;
  background: rgba(0, 0, 0, 0.35); color: #fff; border: 0; width: 42px; height: 42px;
  font-size: 18px; cursor: pointer; border-radius: 50%; line-height: 1;
}
.hero-skitter-box .hero-arrow:hover { background: rgba(0, 0, 0, 0.55); }
.hero-skitter-box .hero-arrow.prev { left: 14px; }
.hero-skitter-box .hero-arrow.next { right: 14px; }
@media (max-width: 860px) {
  /* 모바일: 배너 높이 240px 고정 + cover 크롭(양옆 잘림, 중앙 정렬)
     주의: flex-shrink:0 필수 — flex 아이템이 컨테이너 폭으로 수축하면
     내부 이미지(1920→zoom 921px)가 박스 왼쪽부터 흘러넘쳐 좌측 편향으로 보임 */
  .hero-skitter-box { height: 240px; display: flex; justify-content: center; }
  .hero-skitter-box .box_skitter { margin: 0; flex-shrink: 0; }
  .hero-skitter-box .hero-arrow { width: 32px; height: 32px; font-size: 14px; }
}
/* Skitter 로딩 표시 (원본 ajax-loader.gif 미보유 → CSS 스피너) */
.box_skitter .loading {
  position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  background: transparent !important; border: 3px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff; border-radius: 50%;
  animation: skitter-spin 0.8s linear infinite;
  text-indent: -9999em; overflow: hidden; z-index: 10000;
}
@keyframes skitter-spin { to { transform: rotate(360deg); } }

/* ---------- 섹션 ---------- */
.section { padding: 40px 0; }
.section h2 { font-size: 22px; color: #2b5ea7; margin-bottom: 18px; border-left: 4px solid #2b5ea7; padding-left: 10px; }
.card { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 22px; }

/* ---------- 홈 알림마당 — PC: 게시판 카드 그리드(최대 3열) / 모바일: 게시판 단위 슬라이드 ----------
   주의: board.html 게시판 스킨에 이미 .board-grid가 있어 충돌 방지용 고유 클래스 사용 */
.home-alim-grid { display: none; }
.home-alim-slider { display: block; }
@media (min-width: 861px) {
  .home-alim-grid { display: grid; gap: 14px; }
  .home-alim-slider { display: none; }
  .ticker-card { background: transparent; border: 0; padding: 0; overflow: visible; }
}
.home-alim-card { border: 1px solid #e3e6ea; border-radius: 8px; padding: 16px 18px 8px; background: #fff; min-width: 0; overflow: hidden; }
.bc-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 2px solid #2b5ea7; margin-bottom: 4px; }
.bc-name { font-size: 15px; font-weight: 700; color: #2b5ea7; }
.bc-more { font-size: 13px; color: #888; }
.bc-more:hover { color: #2b5ea7; }
.tb-list { list-style: none; }
.tb-list li { padding: 10px 0; border-bottom: 1px solid #f0f2f5; }
.tb-list a { display: block; color: #333; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-list a:hover { color: #2b5ea7; }
.tb-list li:last-child { border-bottom: 0; }
.ticker-item { padding: 18px 20px 6px; transition: opacity 0.3s ease; }
.ticker-dots { display: flex; gap: 6px; padding: 10px 20px 16px; }
.tick-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #d3d9e2; cursor: pointer; }
.tick-dot.on { background: #2b5ea7; }
@media (max-width: 860px) {
  .ticker-item { padding: 14px 14px 4px; }
  .tb-list a { font-size: 14px; }
}

/* ---------- 홈 사진자료 — PC: 4열 캐러셀(자동 슬라이드) / 모바일: 1개 슬라이더 ---------- */
.home-photo-grid { display: none; }
.home-photo-slider { display: block; }
@media (min-width: 861px) {
  .home-photo-grid { display: block; overflow: hidden; position: relative; }
  .home-photo-slider { display: none; }
}
.hp-track { display: flex; gap: 14px; transition: transform 0.5s ease; }
.hp-track .hp-item { flex: 0 0 calc(25% - 10.5px); min-width: 0; width: calc(25% - 10.5px); }
.hp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.hp-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #d3d9e2; cursor: pointer; }
.hp-dot.on { background: #2b5ea7; }
.hp-item { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; overflow: hidden; color: #333; }
.hp-item:hover { text-decoration: none; border-color: #2b5ea7; }
.hp-thumb { aspect-ratio: 1 / 1; background: #eef1f5; overflow: hidden; display: block; }
.hp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-cap { padding: 9px 12px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 홈 사진자료 슬라이더 (모바일) ---------- */
.ps-view { position: relative; background: #eef1f5; border-radius: 8px; overflow: hidden; }
.ps-item { display: block; }
.ps-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: opacity 0.25s ease; }
.ps-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); color: #fff; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  background: rgba(0, 0, 0, 0.35); color: #fff; border: 0; width: 40px; height: 40px;
  border-radius: 50%; font-size: 16px; cursor: pointer; line-height: 1;
}
.ps-arrow:hover { background: rgba(0, 0, 0, 0.55); }
.ps-arrow.prev { left: 12px; }
.ps-arrow.next { right: 12px; }
.ps-count {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 12px;
}
@media (max-width: 860px) {
  .ps-arrow { width: 30px; height: 30px; font-size: 13px; }
}

/* ---------- 홈 하단 배너 (원본 main_banner05.jpg — 좌: 광주사업본부, 우: 사업소개) ---------- */
.banner05-box { position: relative; border-radius: 8px; overflow: hidden; }
.banner05-box img { width: 100%; height: auto; display: block; }
.b05-area { position: absolute; display: block; }
/* 원본 Map12 좌표(1200×412 기준)를 %로 변환 */
.b05-left  { left: 0.33%; top: 5.58%; width: 49.17%; height: 90.53%; }  /* 4,23 → 594,396 → page 109 광주사업본부 */
.b05-right { left: 49.92%; top: 6.07%; width: 49.33%; height: 88.11%; }  /* 599,25 → 1191,388 → page 136 사업소개 */

/* ---------- 푸터 유관기관 (원본 main__slide_banner00~08.jpg — 풀사이즈 무한 스크롤, 푸터 상단) ---------- */
.partner-band { width: 100%; overflow: hidden; background: #f3f3f3; border-top: 1px solid #e3e6ea; padding: 16px 0; }
.pm-track { display: flex; align-items: center; width: max-content; animation: pm-scroll 40s linear infinite; }
.partner-band:hover .pm-track { animation-play-state: paused; }
.pm-item { display: flex; align-items: center; justify-content: center; margin: 0 20px; opacity: 0.85; }
.pm-item:hover { opacity: 1; }
.pm-item img { height: 45px; width: auto; display: block; }
@keyframes pm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 860px) {
  .pm-item { margin: 0 12px; }
  .pm-item img { height: 34px; }
}

/* 게시글 목록 */
.post-list { list-style: none; }
.post-list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #eef0f3; }
.post-list a { flex: 1; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-list a:hover { color: #2b5ea7; }
.post-list .date { color: #999; font-size: 13px; white-space: nowrap; }

/* 갤러리 그리드 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
/* 홈 최근글 카드 (모바일 1열, 데스크톱 2열) — 오버플로우 방지 */
.home-grid { grid-template-columns: 1fr; }
.home-grid > * { min-width: 0; }
@media (min-width: 861px) {
  .home-grid { grid-template-columns: 1fr 1fr; }
}
.grid .item { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; overflow: hidden; }
.grid .item img { width: 100%; height: 160px; object-fit: cover; display: block; }
.grid .item .cap { padding: 8px 12px; font-size: 13px; color: #555; }

/* 게시판 스킨 (메뉴 관리에서 지정: 리스트/웹진/사진/영상) */
.board-grid { list-style: none; display: grid; gap: 16px; }
.board-grid .item { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; overflow: hidden; }
.board-grid .item a { display: block; color: #333; }
.board-grid .item a:hover { text-decoration: none; }
.board-grid .item a:hover .cap strong, .board-grid .item a:hover .cap { color: #2b5ea7; }
.board-grid .thumb { position: relative; aspect-ratio: 16 / 9; background: #eef1f5; overflow: hidden; }
.board-grid .thumb.square { aspect-ratio: 1 / 1; }
.board-grid .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-grid .thumb .noimg { display: block; width: 100%; height: 100%; background: #eef1f5; }
.board-grid .cap { padding: 10px 12px; }
.board-grid .cap strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-grid .cap .date { color: #999; font-size: 12px; margin-left: 8px; }
/* 웹진 — 카드형 2열 (모바일 1열) */
.webzine-grid { grid-template-columns: 1fr; }
@media (min-width: 861px) { .webzine-grid { grid-template-columns: 1fr 1fr; } }
/* 사진 — 썸네일 갤러리 (자동 열, 정사각) */
.photo-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.photo-grid .cap { padding: 8px 10px; font-size: 13px; }
/* 사진 갤러리 호버/터치 효과 — 카드 리프트 + 이미지 스케일업 */
.board-grid .item { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.board-grid .item:hover,
.board-grid .item:active { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border-color: #2b5ea7; }
.board-grid .thumb img { transition: transform 0.35s ease; }
.board-grid .item:hover .thumb img,
.board-grid .item:active .thumb img { transform: scale(1.1); }
@media (hover: none) { .board-grid .item:hover { transform: none; box-shadow: none; border-color: #e3e6ea; } }
/* 영상 — 16:9 썸네일 + 재생 배지 */
.video-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.video-grid .vplay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 50%; font-size: 15px; padding-left: 3px;
}

/* 페이지 본문 */
.page-body { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 28px; min-height: 400px; overflow-x: hidden; }
.page-body p, .page-body div, .page-body td, .page-body th { text-align: inherit; }
.page-body img { max-width: 100% !important; height: auto !important; width: auto !important; }
.page-body div { max-width: 100% !important; overflow: hidden; }
.page-body table { max-width: 100% !important; }
.page-body table { border-collapse: collapse; max-width: 100%; }
.page-body td, .page-body th { border: 1px solid #ddd; padding: 6px 10px; }
.page-body blockquote { margin: 16px 0; padding: 14px 20px; border-left: 4px solid #2b5ea7; background: #f0f4fa; color: #555; font-size: 15px; line-height: 1.7; border-radius: 0 6px 6px 0; position: relative; }
.page-body blockquote::before { content: '\201C'; position: absolute; top: -4px; left: 8px; font-size: 42px; color: #2b5ea7; opacity: 0.3; line-height: 1; font-family: Georgia, serif; }

/* 게시글 본문 */
.post-view { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 28px; }
.post-view h1 { font-size: 22px; margin-bottom: 10px; }
.post-meta { color: #999; font-size: 13px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #eef0f3; }
.post-body { line-height: 1.8; }
.post-body p, .post-body div, .post-body td, .post-body th { text-align: inherit; }
.post-body img { max-width: 100% !important; height: auto !important; width: auto !important; }
.post-body table { border-collapse: collapse; max-width: 100%; }
.post-body td, .post-body th { border: 1px solid #ddd; padding: 6px 10px; }
.post-body blockquote { margin: 16px 0; padding: 14px 20px; border-left: 4px solid #2b5ea7; background: #f0f4fa; color: #555; font-size: 15px; line-height: 1.7; border-radius: 0 6px 6px 0; position: relative; }
.post-body blockquote::before { content: '\201C'; position: absolute; top: -4px; left: 8px; font-size: 42px; color: #2b5ea7; opacity: 0.3; line-height: 1; font-family: Georgia, serif; }
/* 첨부파일 */
.post-attachments { margin-top: 24px; margin-bottom: 28px; padding: 16px 20px; background: #f8f9fb; border: 1px solid #e0e4ea; border-radius: 10px; }
.post-attachments .att-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e8eaed; }
.post-attachments .att-label { font-size: 15px; font-weight: 600; color: #333; }
.post-attachments .att-count { font-size: 12px; color: #888; }
.post-attachments ul { list-style: none; }
.post-attachments li { margin-bottom: 8px; background: #fff; border: 1px solid #e0e4ea; border-radius: 8px; }
.post-attachments li:last-child { margin-bottom: 0; }
.post-attachments li a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #2b5ea7; font-size: 14px; text-decoration: none; width: 100%; box-sizing: border-box; }
.post-attachments li a:hover { background: #f0f4ff; border-radius: 7px; }
.post-attachments li a:active { background: #e0e8f4; }
.post-attachments li a::before { content: "📄"; font-size: 18px; flex-shrink: 0; }
.post-attachments li a .att-name { flex: 1; }
.post-attachments li a .att-arrow { color: #999; font-size: 12px; }
/* 에디터 첨부파일 링크 */
.editor-body .attach-link { display: inline-block; padding: 4px 10px; background: #f0f4fa; border: 1px solid #d0d8e4; border-radius: 4px; color: #2b5ea7; font-size: 13px; margin: 4px 0; text-decoration: none; }
.editor-body .attach-link:hover { background: #e0e8f4; text-decoration: none; }

/* 게시판 헤더 (제목 + 검색) */
.board-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.board-header h2 { margin-bottom: 0; border-left: none; padding-left: 0; }
.board-search { display: flex; gap: 6px; align-items: center; }
.board-search input { width: 200px; padding: 7px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; }
.board-search input:focus { border-color: #2b5ea7; outline: none; }
@media (max-width: 600px) {
  .board-header { flex-direction: column; align-items: flex-start; }
  .board-search input { width: 100%; }
  .board-search { width: 100%; }
}

/* 버튼/폼 */
.btn {
  display: inline-block; background: #2b5ea7; color: #fff; border: none; border-radius: 6px;
  padding: 9px 18px; font-size: 14px; cursor: pointer;
}
.btn:hover { background: #24508f; text-decoration: none; }
.btn.ghost { background: #fff; color: #2b5ea7; border: 1px solid #2b5ea7; }
.btn.danger { background: #c0392b; }
.btn.danger:hover { background: #a93226; }
input[type="text"], input[type="password"], input[type="search"], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid #cfd4da; border-radius: 6px; font-size: 14px; font-family: inherit;
}
textarea { min-height: 220px; resize: vertical; }
label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }

/* 페이지네이션 */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }
.pagination a, .pagination span {
  padding: 7px 12px; border: 1px solid #d8dce1; border-radius: 6px; background: #fff; color: #555; font-size: 14px;
}
.pagination a:hover { border-color: #2b5ea7; color: #2b5ea7; text-decoration: none; }
.pagination .cur { background: #2b5ea7; color: #fff; border-color: #2b5ea7; }

/* 검색창 */
.search-box { display: flex; gap: 8px; max-width: 420px; margin: 0 auto 26px; }
.search-box input { flex: 1; }

/* 푸터 */
footer { background: #2c323a; color: #b8c0ca; padding: 34px 0 30px; font-size: 14px; }
footer p { margin-bottom: 6px; }
footer strong { color: #e6e9ed; }
footer .copy { color: #7d8691; font-size: 12px; }

/* 로그인/관리 */
.auth-box { max-width: 360px; margin: 60px auto; }
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

/* 관리자 대시보드 레이아웃 */
.admin-layout { display: flex; gap: 24px; align-items: flex-start; }
.admin-side {
  width: 200px; flex-shrink: 0; background: #fff; border: 1px solid #e3e6ea;
  border-radius: 8px; padding: 10px 0; position: sticky; top: 90px;
}
.admin-side a {
  display: block; padding: 11px 18px; color: #444; font-size: 14px; border-left: 3px solid transparent;
}
.admin-side a:hover { background: #f0f4fa; color: #2b5ea7; text-decoration: none; }
.admin-side a.active { background: #f0f4fa; color: #2b5ea7; border-left-color: #2b5ea7; font-weight: 600; }
.admin-main { flex: 1; min-width: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat {
  background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 18px;
  text-align: center;
}
.stat .num { font-size: 28px; font-weight: 700; color: #2b5ea7; }
.stat .lbl { font-size: 13px; color: #888; margin-top: 4px; }
.board-bars { display: flex; flex-direction: column; gap: 8px; }
.board-bars .row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.board-bars .bar {
  flex: 1; height: 10px; background: #eef0f3; border-radius: 5px; overflow: hidden;
}
.board-bars .bar i { display: block; height: 100%; background: #2b5ea7; }
.board-bars .cnt { width: 40px; text-align: right; color: #666; }
.view { display: none; }
.view.active { display: block; }
/* 페이지 관리 — 탑다운 레이아웃 (위: 셀렉트박스, 아래: 전체 폭 편집기) */
.page-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.page-toolbar label { margin: 0; white-space: nowrap; }
.page-toolbar select { flex: 1; min-width: 220px; max-width: 480px; }
.page-toolbar .btn { white-space: nowrap; }
.page-edit-col { width: 100%; min-width: 0; }
/* 위지위그 편집기 — 툴바는 스크롤 시 화면 상단에 고정 (sticky) */
.editor-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  background: #f4f6f9; border: 1px solid #cfd4da; border-bottom: none;
  border-radius: 6px 6px 0 0; padding: 6px 8px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.editor-toolbar button {
  min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid transparent;
  border-radius: 4px; background: none; font-size: 14px; cursor: pointer; color: #333;
}
.editor-toolbar button:hover { background: #e4e9f0; }
.editor-toolbar button.on { background: #2b5ea7; color: #fff; }
.editor-toolbar .sep { width: 1px; height: 20px; background: #d0d5dc; margin: 0 4px; }
.editor-toolbar select, .editor-toolbar input[type="color"] {
  height: 30px; border: 1px solid #cfd4da; border-radius: 4px; background: #fff;
  padding: 0 4px; font-size: 13px; width: auto;
}
.editor-toolbar input[type="color"] { width: 34px; padding: 2px; cursor: pointer; }
/* 이미지 미리보기 */
.img-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.img-preview-item {
  position: relative; width: 100px; height: 100px; border: 1px solid #e3e6ea;
  border-radius: 8px; overflow: hidden; background: #f4f6f9;
}
.img-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-preview-del {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none;
  border-radius: 50%; background: rgba(0,0,0,0.65); color: #fff; font-size: 12px;
  line-height: 1; cursor: pointer;
}
.img-preview-del:hover { background: #c0392b; }
.editor-body {
  min-height: 260px; background: #fff; border: 1px solid #cfd4da; border-radius: 0 0 6px 6px;
  padding: 14px 16px; font-size: 14px; line-height: 1.7; outline: none; overflow-y: auto;
  text-align: left;
}
.editor-body p, .editor-body div, .editor-body td, .editor-body th, .editor-body blockquote, .editor-body li {
  text-align: inherit;
}
.editor-body:focus { border-color: #2b5ea7; }
.editor-body img { max-width: 100%; height: auto; }
.editor-hint { font-size: 12px; color: #888; margin-top: 8px; }
/* HTML 소스 편집 모드 — textarea로 전환 */
.editor-source {
  width: 100%; min-height: 260px; background: #1e1e2e; color: #cdd6f4;
  border: 1px solid #cfd4da; border-radius: 0 0 6px 6px;
  padding: 14px 16px; font-size: 13px; font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
  line-height: 1.6; resize: vertical; outline: none; tab-size: 2;
}
.editor-source:focus { border-color: #2b5ea7; }
/* 마크다운 편집 모드 textarea */
.editor-md {
  width: 100%; min-height: 260px; background: #1e1e2e; color: #cdd6f4;
  border: 1px solid #cfd4da; border-radius: 0 0 6px 6px;
  padding: 14px 16px; font-size: 13px; font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
  line-height: 1.6; resize: vertical; outline: none; tab-size: 2;
}
.editor-md:focus { border-color: #2b5ea7; }
.editor-body table { border-collapse: collapse; max-width: 100%; }
.editor-body td, .editor-body th { border: 1px solid #ddd; padding: 6px 10px; }
/* 에디터 인용구 */
.editor-body blockquote {
  margin: 14px 0; padding: 14px 20px;
  border-left: 4px solid #2b5ea7; background: #f0f4fa;
  color: #555; font-size: 14px; line-height: 1.7;
  border-radius: 0 6px 6px 0;
  position: relative;
}
.editor-body blockquote::before {
  content: '\201C'; position: absolute; top: -4px; left: 8px;
  font-size: 40px; color: #2b5ea7; opacity: 0.3; line-height: 1;
  font-family: Georgia, serif;
}
.filter-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
/* 유관기관 관리 목록 (배너 목록과 동일 레이아웃, 로고 썸네일은 작게) */
.partner-admin-list { list-style: none; }
.partner-admin-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #eef0f3; flex-wrap: wrap; }
.partner-admin-list .thumb { width: 150px; flex-shrink: 0; }
.partner-admin-list .thumb img { width: 100%; height: 40px; object-fit: contain; border-radius: 4px; border: 1px solid #e3e6ea; display: block; background: #fff; }
.partner-admin-list .info { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.partner-admin-list .info .link { color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partner-admin-list .badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #eee; color: #888; width: fit-content; }
.partner-admin-list .badge.on { background: #e3f2fd; color: #2b5ea7; }
.partner-admin-list .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.partner-admin-list .acts .btn { padding: 3px 10px; font-size: 12px; }

/* 배너 관리 목록 */
.banner-admin-list { list-style: none; }
.banner-admin-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #eef0f3; flex-wrap: wrap; }
.banner-admin-list .thumb { width: 200px; flex-shrink: 0; }
.banner-admin-list .thumb img { width: 100%; height: 52px; object-fit: cover; border-radius: 4px; border: 1px solid #e3e6ea; display: block; }
.banner-admin-list .info { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.banner-admin-list .info .link { color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner-admin-list .badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #eee; color: #888; width: fit-content; }
.banner-admin-list .badge.on { background: #e3f2fd; color: #2b5ea7; }
.banner-admin-list .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.banner-admin-list .acts .btn { padding: 3px 10px; font-size: 12px; }

/* 이미지 관리 그리드 */
.img-manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.img-manage-grid .im-item { border: 1px solid #e3e6ea; border-radius: 8px; overflow: hidden; background: #fff; }
.img-manage-grid .im-thumb { width: 100%; height: 100px; object-fit: cover; display: block; background: #f4f6f8; }
.img-manage-grid .im-info { padding: 8px 10px; font-size: 11px; color: #666; }
.img-manage-grid .im-key { word-break: break-all; margin-bottom: 4px; color: #444; }
.img-manage-grid .ref-on { color: #c0392b; }
.img-manage-grid .ref-off { color: #2e7d32; }
.img-manage-grid .im-acts { display: flex; gap: 6px; padding: 0 10px 10px; }
.img-manage-grid .im-acts .btn { padding: 3px 8px; font-size: 12px; }

/* ---------- 메뉴 관리 ---------- */
.menu-group { border: 1px solid #e3e6ea; border-radius: 8px; background: #fff; margin-bottom: 12px; padding: 12px; }
.menu-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.menu-group-head input { flex: 1 1 120px; min-width: 0; font-weight: 700; }
.menu-children { display: flex; flex-direction: column; gap: 6px; }
.menu-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.menu-child input[type="text"], .menu-child .menu-child-name { flex: 1 1 150px; }
.menu-child .menu-target { flex: 1 1 180px; }
.menu-child .menu-child-type { width: auto; }
/* 메뉴 편집기 컨트롤 높이 통일 — 네이티브 select가 input보다 2px 큰 것을 명시적 height로 맞춤 */
.menu-group-head input,
.menu-child input[type="text"],
.menu-child select { height: 44px; }
.menu-target-wrap { flex: 1 1 180px; display: inline-flex; }
.menu-target-wrap select, .menu-target-wrap input { width: 100%; }
.menu-children label { font-size: 12px; color: #888; margin-right: 4px; }
.btn.small { padding: 3px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.4; cursor: default; }

/* 메뉴 순서 변경 모달 */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1000;
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
  background: #fff; border-radius: 10px; width: 100%; max-width: 480px; max-height: 80vh;
  display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.modal-box h3 { padding: 18px 20px 0; font-size: 17px; color: #333; }
.modal-body { padding: 14px 20px; overflow-y: auto; flex: 1; }
.modal-acts { padding: 10px 20px 18px; display: flex; gap: 8px; justify-content: flex-end; }
.modal-order-list { list-style: none; }
.modal-order-list li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid #e3e6ea; border-radius: 8px; margin-bottom: 8px; background: #fafbfc;
}
.modal-order-list .mo-name {
  flex: 1; font-size: 14px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-order-list .mo-type { font-size: 11px; color: #888; flex-shrink: 0; }
.modal-order-list .mo-acts { display: flex; gap: 4px; flex-shrink: 0; }

.filter-bar select, .filter-bar input { width: auto; }
.filter-bar input { flex: 1; min-width: 180px; }
/* 홈 노출 게시판 (글관리) — 게시판별 체크 토글 */
.home-board-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 0;
  border: 1px solid #e3e6ea; border-radius: 20px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 400;
}
.hb-item input { width: auto; margin: 0; cursor: pointer; }
.hb-item .hb-group { font-size: 11px; color: #aaa; }
.hb-item.on { background: #e3f2fd; border-color: #2b5ea7; }
.hb-item.on .hb-name { color: #2b5ea7; font-weight: 700; }
@media (max-width: 860px) {
  .admin-layout { flex-direction: column; align-items: stretch; }
  .admin-side { width: 100%; position: static; display: flex; flex-wrap: wrap; }
  .admin-side a { border-left: none; border-bottom: 2px solid transparent; }
  .admin-side a.active { border-bottom-color: #2b5ea7; }
  /* 모바일에서 본문이 화면 폭을 넘지 않도록 (데스크톱용 flex-start 수축 방지)
     주의: overflow-x: hidden은 position: sticky(에디터 툴바 고정)를 깨뜨리므로 넣지 않음 */
  .admin-main { width: 100%; min-width: 0; }
  .admin-toolbar { flex-wrap: wrap; gap: 8px; }
}

/* ---------- 서브메뉴 탭 바 (PC) ---------- */
.sub-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 4px;
  padding: 10px 12px; background: #fff; border: 1px solid #e3e6ea; border-radius: 8px;
}
.sub-tabs a {
  padding: 8px 16px; border-radius: 6px; font-size: 14px; color: #555;
  border: 1px solid transparent;
}
.sub-tabs a:hover { background: #f0f4fa; color: #2b5ea7; text-decoration: none; }
.sub-tabs a.active { background: #2b5ea7; color: #fff; }

/* ---------- Breadcrumbs (경로 표시) ---------- */
.breadcrumbs {
  padding: 12px 0 0; font-size: 13px; color: #888;
}
.breadcrumbs .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.breadcrumbs a { color: #5a7bb5; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .bc-sep { color: #ccc; margin: 0 2px; }
.breadcrumbs .bc-current { color: #333; font-weight: 500; }
@media (max-width: 860px) {
  .breadcrumbs { font-size: 12px; padding: 10px 0 0; }
}

/* ---------- 모바일 메뉴: 대메뉴 아이콘 2x3 그리드 + 하단 서브메뉴 ---------- */
.m-menu { display: none; }
.m-overlay { display: none; }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav { display: none !important; }
  .m-menu { display: none; }
  .m-menu.open {
    display: block;
    position: fixed; top: 72px; left: 0; right: 0;
    z-index: 100;
    max-height: calc(100vh - 72px); overflow-y: auto;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  }
  .m-overlay {
    display: none; position: fixed; inset: 0; z-index: 95;
    background: rgba(0,0,0,0.45);
  }
  .m-overlay.show { display: block; }
  .sub-tabs { margin: 14px 0 2px; padding: 8px; overflow-x: auto; flex-wrap: nowrap; }
  .sub-tabs a { white-space: nowrap; padding: 7px 13px; }
  .m-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    padding: 12px 16px 14px; background: #fff;
  }
  .m-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: #f2f6fc; border: 1px solid #e3e6ea; border-radius: 10px;
    padding: 12px 14px; cursor: pointer; color: #333;
  }
  .m-item .m-ico { display: flex; color: #2b5ea7; }
  .m-item .m-ico svg { width: 26px; height: 26px; }
  .m-item .m-lbl { font-size: 15px; font-weight: 600; }
  .m-item:active { background: #e4ecf8; }
  .m-item.active { background: #2b5ea7; border-color: #2b5ea7; }
  .m-item.active .m-ico { color: #fff; }
  .m-item.active .m-lbl { color: #fff; }
  /* 하단 서브메뉴 리스트 */
  .m-sub { display: none; border-top: 1px solid #e3e6ea; background: #fff; }
  .m-sub.open { display: block; }
  .m-sub a {
    display: block; padding: 13px 22px; font-size: 14px; color: #444;
    border-bottom: 1px solid #f0f2f5; position: relative;
  }
  .m-sub a:last-child { border-bottom: none; }
  .m-sub a:active { background: #f0f4fa; }
}

/* 📷 사진 라이브러리 모달 */
.pl-tabs { display: flex; gap: 0; border-bottom: 2px solid #e3e6ea; margin: 14px 0 0; padding: 0 20px; }
.pl-tab { padding: 8px 16px; background: none; border: none; cursor: pointer; font-size: 14px; color: #888; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.pl-tab.active { color: #2b5ea7; border-bottom-color: #2b5ea7; font-weight: 600; }
.pl-panel { padding: 14px 20px; max-height: 50vh; overflow-y: auto; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.pl-item { background: #f7f8fa; border: 1px solid #e3e6ea; border-radius: 6px; overflow: hidden; text-align: center; cursor: pointer; position: relative; }
.pl-item:hover { border-color: #2b5ea7; }
.pl-item img { width: 100%; height: 90px; object-fit: cover; display: block; }
.pl-item .pl-name { display: block; font-size: 11px; color: #555; padding: 4px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-item .pl-date { display: block; font-size: 10px; color: #999; padding: 0 6px 4px; }
.pl-item .pl-acts { display: flex; gap: 4px; justify-content: center; padding: 4px 4px 6px; }
.pl-drop-zone { border: 2px dashed #cfd4da; border-radius: 8px; padding: 36px 16px; text-align: center; color: #888; cursor: pointer; transition: border-color 0.2s; }
.pl-drop-zone:hover, .pl-drop-zone.drag-over { border-color: #2b5ea7; background: #f0f4fa; }

/* ✂️ 이미지 편집기 모달 */
.ie-crop-area { flex: 1 1 380px; max-width: 480px; background: #1a1a2e; border-radius: 6px; overflow: hidden; min-height: 280px; position: relative; }
.ie-crop-area img { max-width: 100%; display: block; }
.ie-dim-display {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.7); color: #fff; font-size: 13px; font-weight: 600;
  padding: 4px 14px; border-radius: 20px; white-space: nowrap; z-index: 10;
  pointer-events: none; font-family: monospace;
}
.ie-controls { flex: 1 1 200px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ie-controls label { font-weight: 600; color: #555; margin-top: 2px; }
.ie-controls select, .ie-controls input[type="number"], .ie-controls input[type="text"] {
  width: 100%; padding: 5px 7px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;
}
/* 이미지 편집기 모달 — 높이 제한 + 스크롤 */
.ie-modal { max-width: 860px; max-height: 85vh; display: flex; flex-direction: column; }
.ie-body { display: flex; gap: 14px; padding: 14px 20px; flex-wrap: wrap; overflow-y: auto; flex: 1; min-height: 0; }
.ie-wm-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.ie-size-row { display: flex; gap: 8px; align-items: flex-end; }
.ie-size-row > div { flex: 1; }
.ie-size-row label { font-size: 12px; color: #888; display: block; margin-bottom: 2px; }
.ie-size-row select, .ie-size-row input { width: 100%; }
/* Cropper 커스텀 */
.cropper-view-box { outline-color: rgba(43, 94, 167, 0.6); }
.cropper-line, .cropper-point { background-color: #2b5ea7; }