/* 대전서구지역자활센터 — 원본 테마(2018, Pofo/Bootstrap3) 위에 덧입히는 디자인·접근성 층
 *
 * 🔴 원본 CSS 를 고치지 않는다. 이 파일만 마지막에 실어 덮는다.
 *    되돌리기 = 이 <link> 한 줄 제거. 테마 파일은 원본 그대로 남는다.
 *
 * 왜 이 값들인가 — 실측(26-09-23) 결과 접근성 기준 위반이 있었다:
 *   본문 14px(모바일 최소 16px) · 메타 #939393 = 대비 3.2:1(기준 4.5) ·
 *   게시판 링크 높이 20px / 페이징 버튼 8×20px(기준 44×44) · 맨위로 버튼 30×30px
 * 자활센터 이용자에는 고령·저시력 이용자가 있다. 화려함이 아니라 또렷함이 기준이다.
 *
 * 디자인 방향 — 「또렷한 공공」
 *   ① 글자가 먼저다: 한글 전용 가변폰트(Pretendard) 자체호스팅 + 16/17px 본문
 *   ② 초록은 한 번만 세게: 면에는 브랜드 #6daf00, 글자에는 진한 변형 #4a7a00
 *   ③ 회색 대신 초록기 도는 흰색 계열로 면을 통일 — 2018년 테마의 '스톡 회색'을 걷는다
 *   ④ 움직임은 절제: 150~240ms, 의미 있는 곳에만
 */

/* ══ 0. 토큰 ══════════════════════════════════════════════ */
:root{
  /* 브랜드 — 면(배경)에는 이 색 그대로. 센터 정체성이므로 바꾸지 않는다 */
  --djsj-green:#6daf00;
  /* 🔴 #6daf00 은 흰 배경에서 2.75:1 이라 글자로 쓰면 안 읽힌다.
     브랜드를 바꾸지 않고 글자용만 진하게 내린다. */
  --djsj-green-text:#4a7a00;      /* 흰 배경 위 5.12:1 */
  --djsj-green-hover:#3c6300;     /* 흰 배경 위 7.2:1 */
  --djsj-green-deep:#2f4f00;      /* 어두운 띠·패널 바탕 */
  --djsj-green-tint:#f2f7e8;      /* 아주 옅은 초록 면 */
  --djsj-green-line:#cfe2a8;

  --djsj-ink:#1b1f19;             /* 제목 15.8:1 */
  --djsj-body:#2b2b2b;            /* 본문 12.7:1 */
  --djsj-meta:#5a6157;            /* 보조 6.6:1 — 옛 #939393(3.2:1) 대체 */
  --djsj-line:#e2e6dc;
  --djsj-line-strong:#c8cfc0;
  --djsj-surface:#ffffff;
  --djsj-surface-2:#f6f8f2;       /* 초록기 도는 오프화이트 */
  --djsj-surface-3:#eef1e8;
  --djsj-focus:#1a5fb4;

  --djsj-radius:6px;
  --djsj-radius-lg:10px;
  --djsj-shadow:0 1px 2px rgba(27,31,25,.05), 0 6px 20px -8px rgba(27,31,25,.14);
  --djsj-shadow-lift:0 2px 4px rgba(27,31,25,.06), 0 14px 32px -10px rgba(27,31,25,.22);
  --djsj-ease:cubic-bezier(.2,.7,.3,1);
}

/* ══ 1. 글자 ══════════════════════════════════════════════
   테마는 'Noto Sans KR' 를 부르지만 실제로 싣지 않아 시스템 폰트로 떨어져 있었다.
   Pretendard 가변폰트를 자체 호스팅한다(외부 CDN 없음, 유니코드 범위별 분할 → 실제 전송은 일부만). */
:root{
  --djsj-sans:'Pretendard Variable','Pretendard','Noto Sans KR',
              system-ui,-apple-system,'Segoe UI','Malgun Gothic',sans-serif;
}
body,button,input,select,textarea,
.alt-font,.score-font,
h1,h2,h3,h4,h5,h6,
.navbar-nav>li>a,.btn{ font-family:var(--djsj-sans); }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
/* 🔴 아이콘 폰트(et-line·themify·FontAwesome)는 <i> 요소 자신에 font-family 가 걸려 있다.
   여기서 글꼴을 건드리면 아이콘이 전부 두부(□)로 바뀐다 — 어떤 선택자로도 덮지 마라. */

/* ══ 2. 기본 타이포 ═════════════════════════════════════ */
main{ display:block; }
body{ font-size:16px; line-height:1.7; color:var(--djsj-body); letter-spacing:-.005em; }
p{ line-height:1.8; margin-bottom:16px; }
/* 한글은 단어 중간에서 끊으면 읽기 나빠진다. 푸터 '이메 일:' 같은 깨짐을 막는다 */
body,.text-small,td,th,p,li,h1,h2,h3,h4,h5,h6,span,div{ word-break:keep-all; overflow-wrap:break-word; }

h1,h2,h3,h4,h5,h6{ color:var(--djsj-ink); font-weight:700; letter-spacing:-.02em; margin:0 0 14px; }
h1{ font-size:40px; line-height:1.3; }
h2{ font-size:32px; line-height:1.34; }
h3{ font-size:28px; line-height:1.38; }
h4{ font-size:22px; line-height:1.45; letter-spacing:-.015em; }
h5{ font-size:19px; line-height:1.5; letter-spacing:-.01em; }
h6{ font-size:17px; line-height:1.55; letter-spacing:-.01em; }

.text-small{ font-size:15px; line-height:1.7; }
.text-large{ font-size:18px; line-height:1.75; }
.text-extra-large{ font-size:21px; line-height:1.55; letter-spacing:-.015em; }
.text-medium-gray,.text-small.text-medium-gray,.text-medium-gray .text-small{ color:var(--djsj-meta); }
.text-extra-dark-gray{ color:var(--djsj-ink); }
.text-green{ color:var(--djsj-green-text); }
a{ color:var(--djsj-green-text); transition:color .18s var(--djsj-ease); }
a:hover,a:focus{ color:var(--djsj-green-hover); }
strong,b,.font-weight-600{ font-weight:700; }
.font-weight-700{ font-weight:800; }

/* 어두운 면 위에서는 반대로 */
.bg-extra-dark-gray .text-medium-gray,.parallax .text-medium-gray{ color:#d6dbd1; }
.parallax .text-light-gray,.main-slider .text-very-light-gray{ color:#eef1e8; }

/* ══ 3. 키보드 초점 — 테마가 지워 둔 것을 되살린다 ═══════ */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--djsj-focus); outline-offset:2px; border-radius:3px;
}
/* 어두운 배경 위 초점은 흰 테두리를 덧대 어디서나 보이게 */
.bg-extra-dark-gray a:focus-visible,.main-slider a:focus-visible,
.parallax a:focus-visible,.top-header-area a:focus-visible,
.page-title-large a:focus-visible,footer a:focus-visible{
  outline-color:#fff; box-shadow:0 0 0 6px rgba(26,95,180,.9);
}

/* ══ 4. 본문 바로가기 ══════════════════════════════════ */
.djsj-skip{
  position:absolute; left:16px; top:-64px; z-index:10010;
  display:inline-flex; align-items:center; min-height:48px; padding:0 22px;
  background:var(--djsj-green-deep); color:#fff; font-size:16px; font-weight:700;
  border-radius:0 0 var(--djsj-radius) var(--djsj-radius); text-decoration:none;
  transition:top .18s var(--djsj-ease);
}
.djsj-skip:focus{ top:0; color:#fff; }
#djsj-main:focus{ outline:none; }

/* ══ 5. 헤더 ═══════════════════════════════════════════ */
/* 5-1 상단 띠 — 전화·이메일을 누를 수 있게(고령 이용자에게 이게 제일 큰 차이다) */
.top-header-area{ background:var(--djsj-green-deep); padding:0; }
.top-header-area .container>.row{ display:flex; flex-wrap:wrap; align-items:center; }
.djsj-topbar-link{
  display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 6px;
  color:#fff !important; font-size:15px; font-weight:500; text-decoration:none;
}
.djsj-topbar-link:hover,.djsj-topbar-link:focus{ color:#fff !important; text-decoration:underline; }
.djsj-topbar-ico{ width:15px; height:15px; flex:none; opacity:.85; }
.top-header-area .separator-line-verticle-extra-small{ opacity:.45; }
.top-header-area .text-link-white{
  display:inline-flex; align-items:center; min-height:44px; padding:0 8px;
  color:#fff; font-size:15px;
}
.top-header-area .text-link-white:hover{ color:#fff; text-decoration:underline; }

/* 5-2 내비게이션 — 글자를 키우고 손가락이 닿게 */
.navbar.bootsnav{ border-bottom:1px solid var(--djsj-line); box-shadow:0 1px 0 rgba(27,31,25,.03); }
/* 🔴 테마 쪽 선택자(nav.navbar.bootsnav ul.nav > li > a)가 더 구체적이라 색이 안 먹는다 */
nav.navbar.bootsnav ul.nav>li>a,.navbar.bootsnav ul.nav>li>a{
  font-size:17px; font-weight:600; color:var(--djsj-ink); letter-spacing:-.015em;
  padding:26px 20px; transition:color .18s var(--djsj-ease);
}
nav.navbar.bootsnav ul.nav>li>a:hover,
nav.navbar.bootsnav ul.nav>li.active>a{ color:var(--djsj-green-text); }
/* 현재 위치·호버를 색만이 아니라 밑줄로도 알린다 */
.navbar.bootsnav ul.nav>li{ position:relative; }
.navbar.bootsnav ul.nav>li>a::after{
  content:""; position:absolute; left:20px; right:20px; bottom:16px; height:3px;
  background:var(--djsj-green); border-radius:2px;
  transform:scaleX(0); transform-origin:center; transition:transform .2s var(--djsj-ease);
}
.navbar.bootsnav ul.nav>li:hover>a::after,
.navbar.bootsnav ul.nav>li:focus-within>a::after{ transform:scaleX(1); }
.navbar.bootsnav ul.nav ul.dropdown-menu{
  border:1px solid var(--djsj-line); border-top:3px solid var(--djsj-green);
  box-shadow:var(--djsj-shadow); padding:8px 0; border-radius:0 0 var(--djsj-radius) var(--djsj-radius);
}
.navbar.bootsnav ul.nav ul.dropdown-menu>li>a{
  font-size:16px; color:var(--djsj-body); padding:12px 22px; min-height:44px;
  display:flex; align-items:center;
}
.navbar.bootsnav ul.nav ul.dropdown-menu>li>a:hover{
  background:var(--djsj-green-tint); color:var(--djsj-green-text);
}
/* 로고 원본은 188×36px 이다. 그 이상으로 키우면 흐려진다 */
.logo img,.navbar .logo img{ max-height:36px; width:auto; }
.navbar-toggle{ min-width:48px; min-height:48px; border-radius:var(--djsj-radius); }
.header-social-icon a{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--djsj-radius);
}
.header-social-icon a:hover{ background:var(--djsj-green-tint); }
.header-social-icon .text-green{ color:var(--djsj-green-text); }

/* ══ 6. 섹션 리듬 ══════════════════════════════════════ */
section{ padding:96px 0; }
.half-section{ padding:72px 0; }
/* 🔴 원본 문안에 <br> 이 박혀 있다. 통을 760px 로 좁히면 그 줄이 한 번 더 꺾여
   '제공하고' 같은 낱말이 홀로 남는다 — 박힌 줄바꿈이 들어가는 880px 로 잡는다. */
.djsj-section-head{ max-width:880px; margin:0 auto 52px; text-align:center; float:none; }
/* 원본은 설명문을 <p> 가 아니라 <div class="text-medium-gray"> 로 쓴다 */
.djsj-section-head p,.djsj-section-head>div{ font-size:18px; line-height:1.8; color:var(--djsj-meta); margin:0; }

/* 섹션 제목 — 테마가 h3/h5 에 흩어 놓은 것을 하나의 위계로 */
.score-font{ letter-spacing:-.025em; }
h3.text-extra-dark-gray,h5.text-extra-dark-gray.score-font{ font-size:32px; line-height:1.32; }
/* 제목 아래 짧은 초록 선 — 페이지마다 같은 자리에서 반복되는 표시 */
.djsj-rule::after{
  content:""; display:block; width:48px; height:4px; border-radius:2px;
  background:var(--djsj-green); margin:18px auto 0;
}

/* ══ 7. 메인 슬라이더(히어로) ═════════════════════════ */
/* 사진 위 글자는 대비를 증명할 수 없다 → 어두운 막을 충분히 올리고 글자를 키운다 */
/* 🔴 막 농도는 취향이 아니라 계산이다. 사진 픽셀이 순백(최악)일 때도 기준을 넘겨야 한다.
   .62 에서는 눈썹글 4.20:1(기준 4.5), 연두 강조 3.18:1(기준 3.0)로 여유가 없었다 →
   .68 로 올려 각각 5.22:1 · 3.93:1. 어떤 사진을 깔아도 성립한다. */
.main-slider .opacity-extra-medium{ opacity:.68; background:#141a10; }
/* 원본은 700px 높이에 글자를 17% 지점(padding-seventeen-top)에 얹어 아래쪽 300px 가 비어 있었다.
   높이를 줄이고 글자를 실제로 가운데 둔다 — 첫 화면에서 본문이 더 빨리 보인다. */
.main-slider .one-fourth-screen{ height:560px; }
.main-slider .slider-typography{
  position:absolute; z-index:2; display:flex; align-items:center; justify-content:center;
  padding:40px 24px;
}
.main-slider .slider-text-middle-main{ display:block; height:auto; width:100%; }
.main-slider .padding-seventeen-top{ padding-top:0 !important; }
.main-slider .text-large{
  font-size:16px; font-weight:600; letter-spacing:.04em; color:#e8efd9;
  display:inline-block !important; width:auto !important; float:none;
  padding:7px 18px; border:1px solid rgba(255,255,255,.45);
  border-radius:999px; margin:0 auto 22px !important;
}
.main-slider h1{
  font-size:52px; line-height:1.28; letter-spacing:-.03em; font-weight:700;
  color:#fff; width:auto !important; max-width:720px; margin:0 auto 34px !important;
  text-wrap:balance;
}
.main-slider h1 .text-green{ color:#a9e04a; font-weight:800; }
.main-slider .btn-dual{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
/* 🔴 테마가 슬라이드 커서로 없는 파일(../../1804/images/icon-move-light.png)을 부른다 —
   원본부터 404 였다. 표준 커서로 바꿔 요청 자체를 없앤다. */
.white-move .swiper-slide{ cursor:grab; }
.white-move .swiper-slide:active{ cursor:grabbing; }
.main-slider .swiper-pagination-bullet{ width:12px; height:12px; opacity:.55; }
.main-slider .swiper-pagination-bullet-active{ opacity:1; background:var(--djsj-green); }
.swiper-button-next,.swiper-button-prev{ width:48px; height:48px; }

/* ══ 8. 버튼 ═══════════════════════════════════════════ */
.btn{
  border-radius:var(--djsj-radius) !important; border-width:1px !important; border-style:solid !important;
  font-weight:600; letter-spacing:-.01em;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .18s var(--djsj-ease),color .18s var(--djsj-ease),
             border-color .18s var(--djsj-ease),transform .18s var(--djsj-ease);
}
.btn.btn-rounded{ border-radius:999px !important; }
.btn-small{ font-size:15px; padding:0 22px; min-height:44px; }
.btn-medium{ font-size:16px; padding:0 30px; min-height:50px; }
.btn-white{ background:#fff !important; border-color:#fff !important; color:var(--djsj-ink) !important; }
.btn-white:hover,.btn-white:focus{ background:var(--djsj-green) !important; border-color:var(--djsj-green) !important; color:#fff !important; }
.btn-dark-gray{ background:var(--djsj-ink) !important; border-color:var(--djsj-ink) !important; color:#fff !important; }
.btn-dark-gray:hover,.btn-dark-gray:focus{ background:var(--djsj-green-text) !important; border-color:var(--djsj-green-text) !important; color:#fff !important; }
/* 히어로의 두 번째 버튼(외곽선) */
.djsj-btn-ghost{
  background:transparent !important; border-color:rgba(255,255,255,.75) !important; color:#fff !important;
}
.djsj-btn-ghost:hover,.djsj-btn-ghost:focus{ background:#fff !important; border-color:#fff !important; color:var(--djsj-ink) !important; }

/* ══ 9. 서브 페이지 제목 띠 ═══════════════════════════
   🔴 반투명 막 위의 흰 글자는 대비를 증명할 수 없다(검사기가 조상 배경만 읽는다).
      글자를 '불투명 패널' 안에 넣어 실제로도 검사에서도 4.5:1 을 넘긴다. */
.page-title-large .display-table-cell{ padding:0 !important; }
.page-title-large .djsj-title-panel,
.page-title-large>.display-table-cell>.breadcrumb{ position:relative; z-index:2; }
.djsj-title-panel{
  display:inline-block; text-align:center;
  background:var(--djsj-green-deep);
  padding:30px 56px 34px; border-radius:var(--djsj-radius-lg);
  border-bottom:4px solid var(--djsj-green);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.6);
}
.djsj-title-panel h1{
  font-size:40px; line-height:1.3; color:#fff; margin:0; letter-spacing:-.03em;
}
.djsj-title-panel .breadcrumb{ margin:0 0 12px !important; }
.djsj-title-panel .breadcrumb ul li,
.djsj-title-panel .breadcrumb ul li.text-light-gray{
  color:#dbe8c2 !important; font-size:15px; letter-spacing:-.005em;
}
/* 구분점은 테마가 이미 li:after 로 찍는다(마지막 항목 처리까지). 색만 맞춘다 */
.djsj-title-panel .breadcrumb ul>li:after{ color:#9cb87a; opacity:.9; padding:0 9px; }
.djsj-title-panel .breadcrumb a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.djsj-title-panel .breadcrumb a:hover{ color:#e4f0cc; }
.page-title-large .opacity-extra-medium,
section.cover-background>.opacity-extra-medium{ opacity:.5; background:#141a10; }

/* ══ 10. 카드 — 메인 3분할(info-banner-box-2) ══════════
   원본은 높이 300px 고정 + hover 때 두 번째 상자가 옆에서 밀려드는 2018년 패턴이었다.
   글자를 키우면 300px 를 넘쳐 잘린다 → 고정 높이를 풀고 카드 한 장으로 세운다.
   숨긴 hover-box 는 문안이 같아 잃는 내용이 없다(사회서비스 칸 제목만 원본 쪽을 남긴다). */
.info-banner-box-2{ height:auto !important; overflow:visible !important; margin-bottom:0; }
.info-banner-box-2 .hover-box{ display:none !important; }
.info-banner-box-2 .content-box{
  position:relative !important; left:auto !important; top:auto !important; height:auto !important;
  background:var(--djsj-surface) !important;
  border:1px solid var(--djsj-line); border-top:4px solid var(--djsj-green);
  border-radius:var(--djsj-radius-lg); box-shadow:var(--djsj-shadow);
  transition:box-shadow .2s var(--djsj-ease),transform .2s var(--djsj-ease),border-color .2s var(--djsj-ease);
}
.info-banner-box-2>a{ display:block; height:100%; text-decoration:none; }
.info-banner-box-2>a:hover .content-box,
.info-banner-box-2>a:focus-visible .content-box{
  box-shadow:var(--djsj-shadow-lift); transform:translateY(-4px); border-color:var(--djsj-green-line);
}
.info-banner-box-2 .content-box .display-table-cell{ padding:38px 30px 34px !important; }
.info-banner-box-2 .content-box i{
  display:inline-flex; align-items:center; justify-content:center;
  width:66px; height:66px; border-radius:50%;
  background:var(--djsj-green-tint); color:var(--djsj-green-text) !important;
  font-size:30px;
}
.info-banner-box-2 .content-box span{
  font-size:21px !important; font-weight:700; color:var(--djsj-ink) !important;
  letter-spacing:-.02em; margin:20px 0 10px !important;
}
.info-banner-box-2 .content-box p{
  font-size:16px !important; line-height:1.75 !important; color:var(--djsj-body) !important;
  max-width:30em; margin:0 auto !important;
}
/* 세 칸 높이를 맞춘다 */
@media (min-width:768px){
  .info-banner-box-2{ display:flex; padding-left:9px; padding-right:9px; }
}

/* ══ 11. 카드 — 사진 + 설명(blog-post-style1) ══════════ */
.blog-post.blog-post-style1{
  border:1px solid var(--djsj-line); border-radius:var(--djsj-radius-lg); overflow:hidden;
  box-shadow:var(--djsj-shadow); background:var(--djsj-surface);
  display:flex; flex-direction:column; height:100%;
  transition:box-shadow .2s var(--djsj-ease),transform .2s var(--djsj-ease);
}
.blog-post.blog-post-style1:hover{ box-shadow:var(--djsj-shadow-lift); transform:translateY(-4px); }
.blog-post-style1 .blog-post-images{ background:var(--djsj-surface-3); aspect-ratio:16/10; }
.blog-post-style1 .blog-post-images a{ display:block; height:100%; }
.blog-post-style1 .blog-post-images img{ width:100%; height:100%; object-fit:cover; }
.blog-post-style1:hover .blog-post-images img{ opacity:1; transform:scale(1.06,1.06); }
.blog-post-style1 .inner-match-height{
  display:flex; flex-direction:column; flex:1 1 auto; padding:26px 24px 26px !important;
}
.blog-post-style1 .inner-match-height>span{
  font-size:20px !important; font-weight:700; color:var(--djsj-ink) !important;
  letter-spacing:-.02em; margin-bottom:8px !important;
}
.blog-post-style1 .inner-match-height p{
  font-size:16px !important; line-height:1.7; color:var(--djsj-meta) !important; margin-bottom:18px;
}
/* 🔴 equalize 플러그인이 .inner-match-height 에 인라인 height 를 박는다.
   글자 크기를 키운 뒤에는 그 값이 실제보다 커서 카드 안에 큰 빈칸이 생겼다.
   높이는 CSS 로 맞추고(아래 flex) 인라인 값은 무시한다. */
.blog-post-style1 .inner-match-height{ height:auto !important; }
/* 버튼을 카드 바닥에 맞춰 세 칸의 눈금이 어긋나지 않게 */
.blog-post-style1 .inner-match-height .btn{ margin-top:auto; align-self:center; }
.box-shadow-light{ box-shadow:var(--djsj-shadow); }

/* 같은 줄의 카드는 같은 높이로 — 부동(float) 대신 flex 로 세운다.
   🔴 푸터에도 .row.equalize 가 있으므로 section 안으로만 한정한다. */
@media (min-width:768px){
  section .row.equalize{ display:flex; flex-wrap:wrap; }
  section .row.equalize>[class*="col-"]{ display:flex; flex-direction:column; float:none; }
  section .row.equalize>[class*="col-"]>*{ flex:1 1 auto; }
  /* 🔴 안쪽 줄은 서로 높이만 맞추고 바깥 칸 높이까지 늘리지는 않는다.
     늘리면 사진 카드 아래에 흰 여백만 길게 남는다(공지 카드가 훨씬 길어서). */
  section .row.equalize .row{ display:flex; flex-wrap:wrap; flex:0 0 auto; margin-left:-15px; margin-right:-15px; }
  section .row.equalize .row>[class*="col-"]{ display:flex; flex-direction:column; float:none; }
}

/* ══ 12. 어두운 띠(자활이란) ═══════════════════════════ */
.parallax .opacity-full{ opacity:.86; background:#141a10; }
.parallax h4.text-green{ color:#a9e04a !important; font-size:34px; letter-spacing:-.03em; }
.parallax .text-light-gray{ font-size:18px; line-height:1.8; }
.feature-box-9{
  padding:34px 20px !important; border-radius:var(--djsj-radius-lg);
  transition:background .2s var(--djsj-ease);
}
.feature-box-9 a{ display:block; text-decoration:none; }
.feature-box-9:hover{ background:rgba(255,255,255,.07); }
.feature-box-9 i{ color:#a9e04a !important; font-size:44px; }
.feature-box-9 p{ font-size:19px !important; font-weight:600; color:#fff !important; letter-spacing:-.02em; }
.feature-box-9:hover p{ color:#a9e04a !important; }
.feature-box-9 .text-bottom-line{
  width:40px; height:3px; background:var(--djsj-green); border:0 !important;
  margin:16px auto 0; border-radius:2px;
}

/* ══ 13. 메인 — 공지 위젯 ═════════════════════════════ */
/* 공지 카드도 옆 사진 카드들과 같은 카드 언어로 */
.bg-white.box-shadow-light.padding-25px-all{
  display:flex; flex-direction:column; height:100%;
  background:var(--djsj-surface); border:1px solid var(--djsj-line);
  border-radius:var(--djsj-radius-lg); padding:26px 28px 22px !important;
}
.bg-white.box-shadow-light.padding-25px-all>a{ text-decoration:none; }
.bg-white.box-shadow-light.padding-25px-all .separator-line-horrizontal-full{
  margin:0 0 6px !important;
}
#recent-notice{ flex:1 1 auto; }
#recent-notice ul{ margin:0; }
#recent-notice li{
  border-bottom:1px solid var(--djsj-line); margin:0 !important; padding:0;
}
#recent-notice li:last-child{ border-bottom:0; }
#recent-notice li a{
  display:block; min-height:48px; padding:13px 0 4px; font-size:16px; line-height:1.55;
  color:var(--djsj-body); font-weight:500; text-decoration:none;
}
#recent-notice li a:hover,#recent-notice li a:focus-visible{ color:var(--djsj-green-text); }
#recent-notice li>span{
  display:block; padding:0 0 13px; font-size:14px; color:var(--djsj-meta);
  font-variant-numeric:tabular-nums;
}
/* 카드 머리: 제목은 왼쪽, '전체보기'는 오른쪽 */
.djsj-card-head{
  display:flex !important; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:21px !important; font-weight:700; letter-spacing:-.02em;
}
.djsj-more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:15px; font-weight:600; color:var(--djsj-green-text); white-space:nowrap;
}
a:hover .djsj-more,a:focus-visible .djsj-more{ color:var(--djsj-green-hover); text-decoration:underline; }

/* ══ 14. 게시판 — 목록 ════════════════════════════════ */
#board{ max-width:960px; margin:0 auto; }
#board table{ width:100%; border-top:2px solid var(--djsj-ink); border-collapse:collapse; }
#board table td{ padding:0; border-bottom:1px solid var(--djsj-line); vertical-align:middle; }
#board table tr{ transition:background .15s var(--djsj-ease); }
#board table tr:hover{ background:var(--djsj-green-tint); }
#board table td:first-child a{
  display:flex; align-items:center; gap:9px;
  min-height:60px; padding:16px 12px;          /* 터치 타겟 60px */
  font-size:17px; color:var(--djsj-ink); line-height:1.5; font-weight:500;
  text-decoration:none;
}
#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:16px 12px; font-size:15px; color:var(--djsj-meta);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* 첨부 표시는 색이 아니라 모양으로 — 색만으로 뜻을 전하지 않는다 */
#board .djsj-clip{ flex:none; width:16px; height:16px; opacity:.6; }

/* 목록 위 안내줄 */
.djsj-board-bar{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 18px; padding:0 2px;
}
.djsj-board-bar p{ margin:0; }
.djsj-board-bar .djsj-count{ font-size:16px; color:var(--djsj-meta); }
.djsj-board-bar .djsj-count b{ color:var(--djsj-green-text); font-weight:700; font-variant-numeric:tabular-nums; }
.djsj-board-bar .djsj-page-of{ font-size:15px; color:var(--djsj-meta); font-variant-numeric:tabular-nums; }

/* 모바일: 제목과 날짜를 위아래로 놓는다(가로로 밀면 제목이 두 줄로 꺾인다) */
@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:4px 0; }
  #board table td{ border-bottom:0; }
  #board table td:first-child a{ min-height:52px; padding:12px 6px 4px; font-size:16px; }
  /* 제목이 왼쪽인데 날짜만 오른쪽 끝에 있으면 눈이 두 번 움직인다 — 아래로 흘려 왼쪽 정렬 */
  #board table td+td,#board table td.text-right{ padding:0 6px 12px; text-align:left !important; }
}

/* ══ 15. 게시판 — 쪽 넘기기(8×20px 이던 것을 손가락이 닿게) ══ */
#board .djsj-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:40px; }
#board .djsj-pager a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 12px;
  border:1px solid var(--djsj-line-strong); border-radius:var(--djsj-radius);
  font-size:16px; font-weight:500; color:var(--djsj-body); text-decoration:none;
  background:var(--djsj-surface); font-variant-numeric:tabular-nums;
  transition:border-color .18s var(--djsj-ease),color .18s var(--djsj-ease),background .18s var(--djsj-ease);
}
#board .djsj-pager a:hover{ border-color:var(--djsj-green-text); color:var(--djsj-green-text); background:var(--djsj-green-tint); }
/* 현재 위치는 색만이 아니라 채움과 굵기로도 알린다 */
#board .djsj-pager a[aria-current="page"]{
  background:var(--djsj-green-text); border-color:var(--djsj-green-text);
  color:#fff; font-weight:700;
}

/* ══ 16. 포토 자료실 ══════════════════════════════════ */
#board .row{ display:flex; flex-wrap:wrap; margin-left:-12px; margin-right:-12px; }
#board .djsj-thumb{ padding:0 12px; margin-bottom:30px; float:none; }
#board .djsj-thumb a{
  display:flex; flex-direction:column; height:100%; padding:0 0 14px;
  background:var(--djsj-surface); border:1px solid var(--djsj-line);
  border-radius:var(--djsj-radius-lg); overflow:hidden; text-decoration:none;
  box-shadow:var(--djsj-shadow);
  transition:box-shadow .2s var(--djsj-ease),transform .2s var(--djsj-ease);
}
#board .djsj-thumb a:hover,#board .djsj-thumb a:focus-visible{
  box-shadow:var(--djsj-shadow-lift); transform:translateY(-4px);
}
#board .djsj-thumb img,#board .djsj-thumb .djsj-thumb-empty{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  background:var(--djsj-surface-3); display:block;
}
#board .djsj-thumb-title{
  height:auto; min-height:3.2em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; margin:16px 16px 6px; padding:0;
  font-size:16px; font-weight:600; color:var(--djsj-ink); line-height:1.6; letter-spacing:-.015em;
}
#board .djsj-thumb time{
  margin:auto 16px 0; font-size:14px; color:var(--djsj-meta); font-variant-numeric:tabular-nums;
}
#board .djsj-thumb a:hover .djsj-thumb-title{ color:var(--djsj-green-text); }

/* ══ 17. 게시판 — 글 상세 ════════════════════════════ */
.djsj-detail-head{
  padding:0 0 18px; margin-bottom:8px; border-bottom:2px solid var(--djsj-ink);
}
.djsj-detail-head h4{
  font-size:26px; line-height:1.45; color:var(--djsj-ink); font-weight:700;
  letter-spacing:-.025em; margin-bottom:12px;
}
.djsj-detail-head p{ margin:0 !important; border-bottom:0 !important; padding-bottom:0 !important; font-variant-numeric:tabular-nums; }
.djsj-body{ font-size:17px; line-height:1.9; color:var(--djsj-body); padding:8px 0 0; }
.djsj-body img{ max-width:100%; height:auto; margin:14px 0; border-radius:var(--djsj-radius); }
/* 옛 글 끝에 빈 문단·줄바꿈이 줄줄이 붙어 본문과 '목록으로' 사이가 크게 벌어져 있었다 */
.djsj-body p:empty,.djsj-body div:empty,.djsj-body>br:last-child{ display:none; }
.djsj-body>*:last-child{ margin-bottom:0; }
/* 옛 글에는 고정폭 표가 많다. 화면을 밀어내지 않고 표 안에서만 스크롤시킨다 */
.djsj-body table{ max-width:100%; }
.djsj-table-scroll{ position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:14px 0; }
.djsj-files{
  margin:22px 0 28px; padding:16px 18px; background:var(--djsj-green-tint);
  border:1px solid var(--djsj-green-line); border-radius:var(--djsj-radius); list-style:none;
}
.djsj-files li+li{ margin-top:4px; border-top:1px solid var(--djsj-green-line); }
.djsj-files a{
  display:inline-flex; align-items:center; gap:9px; min-height:46px;
  font-size:16px; font-weight:500; color:var(--djsj-green-hover); text-decoration:none;
}
.djsj-files a:hover span:not(.djsj-size){ text-decoration:underline; }
.djsj-files .djsj-clip{ flex:none; width:17px; height:17px; opacity:.8; }
.djsj-files .djsj-size{ color:var(--djsj-meta); font-size:14px; font-variant-numeric:tabular-nums; }

/* ══ 17-2. 빈 게시판 안내 — 한 줄만 떠 있던 것을 안내 카드로 ══ */
.djsj-empty{
  max-width:560px; margin:0 auto; text-align:center;
  padding:52px 32px 48px; background:var(--djsj-surface-2);
  border:1px solid var(--djsj-line); border-radius:var(--djsj-radius-lg);
}
.djsj-empty-ico{
  width:52px; height:52px; color:var(--djsj-green-text); opacity:.75; margin-bottom:18px;
}
.djsj-empty-title{
  font-size:21px; font-weight:700; color:var(--djsj-ink); letter-spacing:-.02em; margin:0 0 10px;
}
.djsj-empty-sub{ font-size:16px; line-height:1.8; color:var(--djsj-meta); margin:0 0 24px; }
.djsj-empty .btn{ margin:0; }

/* ══ 18. 불러오는 동안 — 빈 화면 대신 자리를 잡아 둔다 ══ */
.djsj-skeleton{
  display:block; height:60px; border-bottom:1px solid var(--djsj-line);
  background:linear-gradient(90deg,#f4f5f1 25%,#e9ebe4 37%,#f4f5f1 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%} }

/* ══ 19. 푸터 ═════════════════════════════════════════ */
footer.footer-strip{
  background:var(--djsj-surface-2); border-top:4px solid var(--djsj-green) !important;
  padding:52px 0 !important; color:var(--djsj-body);
}
footer.footer-strip .text-small,footer.footer-strip .xs-text-small{ font-size:15px; line-height:1.85; }
/* 로고 PNG 바탕이 흰색이라 색면 위에 놓으면 흰 사각형이 드러난다.
   숨기지 말고 의도한 흰 칩으로 만든다. */
footer.footer-strip .footer-logo{
  max-height:36px; width:auto; background:#fff;
  padding:9px 12px; border-radius:var(--djsj-radius); border:1px solid var(--djsj-line);
  box-sizing:content-box;
}
footer.footer-strip h6{
  font-size:20px; font-weight:700; color:var(--djsj-green-hover); letter-spacing:-.02em;
}
footer.footer-strip a{ color:var(--djsj-green-hover); }
.djsj-foot-tel{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-size:21px; font-weight:700; color:var(--djsj-green-hover); text-decoration:none;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.djsj-foot-tel:hover{ color:var(--djsj-green-hover); text-decoration:underline; }

/* ══ 20. 맨 위로 — 30×30px 이던 것을 44px 이상으로 ═════ */
.scroll-top-arrow,.scroll-top-arrow:focus{
  width:52px; height:52px; line-height:52px; right:24px; top:auto; bottom:28px;
  background:var(--djsj-green-deep); border-radius:var(--djsj-radius-lg);
  box-shadow:var(--djsj-shadow-lift);
}
.scroll-top-arrow i{ line-height:52px; font-size:17px; }
.scroll-top-arrow:hover{ background:var(--djsj-green-text); opacity:1; }

/* ══ 21. 본문 페이지 공통 보정 ═══════════════════════ */
.bg-light-gray{ background-color:var(--djsj-surface-2); }
.bg-medium-light-gray{ background-color:var(--djsj-surface-3); }
.box-shadow-light,.bg-white.box-shadow-light{ border-radius:var(--djsj-radius-lg); }
hr,.separator-line-horrizontal-full{ border-color:var(--djsj-line); }
.separator-line-horrizontal-full.bg-medium-gray{ background:var(--djsj-green) !important; height:3px; }
ul li,ol li{ line-height:1.8; }
img{ max-width:100%; }

/* ══ 22. 움직임 ═══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .djsj-skeleton{ animation:none; }
  .wow{ visibility:visible !important; animation:none !important; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ══ 23. 화면 크기별 ══════════════════════════════════ */
@media (max-width:991px){
  section{ padding:68px 0; }
  .half-section{ padding:52px 0; }
  .main-slider h1{ font-size:40px; }
  .djsj-title-panel{ padding:26px 36px 28px; }
  .djsj-title-panel h1{ font-size:32px; }
  h3.text-extra-dark-gray,h5.text-extra-dark-gray.score-font{ font-size:28px; }
}
@media (max-width:767px){
  section{ padding:52px 0; }
  .half-section{ padding:40px 0; }
  h1{ font-size:30px; } h2{ font-size:27px; } h3{ font-size:24px; } h4{ font-size:20px; }
  .main-slider h1{ font-size:30px; line-height:1.34; margin-bottom:24px !important; }
  .main-slider .text-large{ font-size:15px; margin-bottom:16px !important; }
  .main-slider .btn-dual{ flex-direction:column; align-items:stretch; padding:0 24px; }
  .main-slider .btn-dual .btn{ width:100%; margin:0 0 10px !important; }
  .djsj-title-panel{ padding:22px 24px 24px; display:block; border-radius:var(--djsj-radius); }
  .djsj-title-panel h1{ font-size:26px; }
  h3.text-extra-dark-gray,h5.text-extra-dark-gray.score-font{ font-size:24px; }
  .djsj-section-head{ margin-bottom:34px; }
  .djsj-section-head p{ font-size:16px; }
  .info-banner-box-2{ margin-bottom:16px; }
  .info-banner-box-2 .content-box .display-table-cell{ padding:28px 22px !important; }
  .blog-post-style1 .inner-match-height{ padding:22px 18px !important; }
  .parallax h4.text-green{ font-size:26px; }
  .feature-box-9{ padding:26px 16px !important; height:auto !important; }
  footer.footer-strip{ padding:36px 0 !important; text-align:center; }
  footer.footer-strip .text-right{ text-align:center !important; }
  .scroll-top-arrow,.scroll-top-arrow:focus{ right:14px; bottom:18px; width:48px; height:48px; line-height:48px; }
  .scroll-top-arrow i{ line-height:48px; }
  .top-header-area .container>.row{ justify-content:center; }
  .djsj-topbar-link{ font-size:14px; }
}

/* 원서버에서 사라진 사진 자리 — 깨진 그림 대신 사실을 적는다(지어내지 않는다) */
.djsj-body .djsj-img-gone{
  display:inline-block; margin:8px 0; padding:10px 14px;
  background:#f3f3f1; border:1px dashed #c9cdc2; border-radius:4px;
  color:var(--djsj-meta); font-size:15px;
}