/* 대전서구지역자활센터 — 원본 테마(2018, Bootstrap3) 위에 덧입히는 개선층
 *
 * 🔴 원본 CSS 를 고치지 않는다. 이 파일만 마지막에 실어 덮는다.
 *    되돌리기 = 이 <link> 한 줄 제거. 테마 파일은 원본 그대로 남는다.
 *
 * 왜 이 값들인가 — 실측(26-09-23) 결과 접근성 기준 위반이 있었다:
 *   본문 14px(모바일 최소 16px) · 메타 #939393 = 대비 3.2:1(기준 4.5) ·
 *   게시판 링크 높이 20px / 페이징 버튼 8×20px(기준 44×44)
 * 자활센터 이용자에는 고령·저시력 이용자가 있다. 화려함이 아니라 또렷함이 기준이다.
 */

:root{
  --djsj-green:#6daf00;              /* 브랜드 색. 면(배경)에는 이대로 쓴다 */
  /* 🔴 #6daf00 은 흰 배경에서 2.75:1 이라 글자로 쓰면 안 읽힌다.
     브랜드를 바꾸지 않고 글자용만 진하게 내린다(5.1:1). */
  --djsj-green-text:#4a7a00;
  --djsj-ink:#2b2b2b;                /* 본문 12.7:1 */
  --djsj-meta:#666;                  /* 보조 5.7:1 — 옛 #939393(3.2:1) 대체 */
  --djsj-line:#e3e3e3;
  --djsj-focus:#1a5fb4;
}

/* ── 타이포: 읽는 글자를 키운다 ───────────────────────── */
body{ font-size:16px; line-height:1.7; color:var(--djsj-ink); }
p{ line-height:1.75; }
/* 한글은 단어 중간에서 끊으면 읽기 나빠진다. 푸터 '이메 일:' 같은 깨짐을 막는다 */
body,.text-small,td,th,p,li,h1,h2,h3,h4,h5{ word-break:keep-all; overflow-wrap:break-word; }
.text-small{ font-size:15px; }
.text-medium-gray,.text-small.text-medium-gray{ color:var(--djsj-meta); }
a{ color:var(--djsj-green-text); }
.text-green{ color:var(--djsj-green-text); }

/* ── 키보드 초점: 테마가 지워 둔 것을 되살린다 ─────────── */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--djsj-focus); outline-offset:2px; border-radius:2px;
}

/* ── 게시판 목록 ──────────────────────────────────────── */
#board table{ width:100%; border-top:2px solid var(--djsj-ink); }
#board table td{ padding:0; border-bottom:1px solid var(--djsj-line); vertical-align:middle; }
#board table td:first-child a{
  display:flex; align-items:center; gap:8px;
  min-height:56px; padding:14px 4px;      /* 터치 타겟 56px */
  font-size:16px; color:var(--djsj-ink); line-height:1.5;
}
#board table td:first-child a:hover,#board table td:first-child a:focus-visible{ color:var(--djsj-green-text); }
#board table td+td{ padding:14px 4px; font-size:15px; color:var(--djsj-meta); }
/* 첨부 표시는 색이 아니라 모양으로 — 색만으로 뜻을 전하지 않는다 */
#board .djsj-clip{ flex:none; width:16px; height:16px; opacity:.55; }

/* 모바일: 제목과 날짜를 위아래로 놓는다(가로로 밀면 제목이 두 줄로 꺾인다) */
@media (max-width:767px){
  #board table,#board tbody,#board tr,#board td{ display:block; width:100%; }
  #board table tr{ border-bottom:1px solid var(--djsj-line); padding:6px 0; }
  #board table td{ border-bottom:0; }
  #board table td:first-child a{ min-height:48px; padding:10px 2px; }
  #board table td+td{ padding:0 2px 8px; }
}

/* ── 페이징: 8×20px 이던 것을 손가락이 닿게 ─────────────── */
#board .djsj-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:32px; }
#board .djsj-pager a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 10px;
  border:1px solid var(--djsj-line); border-radius:4px;
  font-size:16px; color:var(--djsj-ink); text-decoration:none;
}
#board .djsj-pager a:hover{ border-color:var(--djsj-green-text); color:var(--djsj-green-text); }
/* 현재 위치는 색만이 아니라 채움과 굵기로도 알린다 */
#board .djsj-pager a[aria-current="page"]{
  background:var(--djsj-green-text); border-color:var(--djsj-green-text);
  color:#fff; font-weight:700;
}

/* ── 포토 자료실 ──────────────────────────────────────── */
#board .djsj-thumb img{ width:100%; height:190px; object-fit:cover; background:#f2f2f2; display:block; }
#board .djsj-thumb-title{
  height:3.2em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; margin:10px 0 4px; font-size:15px; color:var(--djsj-ink); line-height:1.6;
}
#board .djsj-thumb a{ display:block; padding-bottom:8px; }

/* ── 글 상세 ──────────────────────────────────────────── */
.djsj-body{ font-size:17px; line-height:1.85; color:var(--djsj-ink); }
.djsj-body img{ max-width:100%; height:auto; margin:12px 0; }
/* 옛 글에는 고정폭 표가 많다. 화면을 밀어내지 않고 표 안에서만 스크롤시킨다 */
.djsj-body table{ max-width:100%; }
.djsj-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:12px 0; }
.djsj-detail-head h4{ font-size:22px; line-height:1.5; color:var(--djsj-ink); font-weight:700; }
.djsj-files{ margin:16px 0 24px; padding:14px 16px; background:#f7f8f5;
  border:1px solid var(--djsj-line); border-radius:4px; list-style:none; }
.djsj-files li+li{ margin-top:6px; }
.djsj-files a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:16px; }
.djsj-files .djsj-size{ color:var(--djsj-meta); font-size:14px; }

/* ── 불러오는 동안: 빈 화면 대신 자리를 잡아 둔다(레이아웃 흔들림 방지) ── */
.djsj-skeleton{ display:block; height:56px; border-bottom:1px solid var(--djsj-line);
  background:linear-gradient(90deg,#f3f3f3 25%,#ececec 37%,#f3f3f3 63%);
  background-size:400% 100%; animation:djsj-sheen 1.2s ease-in-out infinite; }
@keyframes djsj-sheen{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

@media (prefers-reduced-motion:reduce){
  .djsj-skeleton{ animation:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}