@charset "UTF-8";
/* =====================================================================
   퍼블리셔 자산 위에 얹는 **우리 보강 레이어** (2026-08-14, fe-developer)

   원칙 — 퍼블리셔 css(common/page/responsive)는 **한 줄도 고치지 않는다.**
    다음 전달본이 오면 그 파일들을 통째로 덮어쓸 수 있어야 한다. 우리가 고치면
    덮어쓰는 순간 수정이 사라지고, 사라진 줄도 모른다. 그래서 보강은 전부 이 파일에 모으고
    **가장 마지막에 링크**한다.

   여기 들어올 수 있는 것은 셋뿐이다.
    ① 퍼블리셔 마크업을 **기능 요소로 바꾸면서** 생기는 기본 스타일 차이(예: a → button)
    ② 퍼블리셔에 없는데 **우리 기능상 필요한** 요소(전자점자 준비중 표기 · noscript 대체 목록)
    ③ 접근성 보정(퍼블리셔 기준보다 접근성이 위다)
   시각 디자인을 우리 취향으로 바꾸는 규칙은 **여기에 넣지 않는다** — 그것은 퍼블리셔가 정한다.
   ===================================================================== */

/* (2026-08-14) 인트로의 button.intro-card-link 보정과 「오늘 하루 보지 않기」(.intro-nosee)
   규칙이 이 자리에 있었다 — 발주처 지시로 체크박스·폼 구조를 없애고 퍼블리셔 원본의
   <a class="intro-card-link"> 로 되돌리면서 둘 다 고아가 되어 함께 지웠다. */

/* ② 전자점자 — 엔진이 준비되기 전에는 조작 요소로 만들지 않는다(눌러도 안 되는 링크를 두지 않는다).
      링크가 아니므로 밑줄·포인터를 주지 않고, 준비 중임이 글자로 읽히게 둔다. */
.a11y-btn.is-off {
  cursor: default;
  opacity: .7;
}

/* ② 유관기관 「이동」 버튼 — 퍼블리셔는 select 하나만 상정했다(13rem).
      우리가 붙인 이동 버튼(KWCAG — onchange 즉시 이동 금지)이 스타일 없이 인라인으로 붙어
      1400px 캡처에서 우측이 잘렸다(2026-08-14 실측). select 와 같은 치수로 나란히 세운다.
      ★ 반드시 min-width 로 한정한다 — responsive.css 가 ≤1024 에서 .related-site 를
        display:none 으로 숨기는데, 이 파일이 마지막에 로드돼 전 구간 규칙을 두면
        그 none 을 도로 켠다(px 대조 1차에서 실제로 MO 푸터가 128~278px 커졌다). */
@media (min-width: 1024.02px) {
  .footer-nav .related-site { display: inline-flex; align-items: center; gap: 0.8rem; }
  .footer-nav .related-site .go {
    flex: 0 0 auto;
    height: 4.4rem;
    padding: 0 1.6rem;
    border: 1px solid #bfbfbf;
    border-radius: 0.6rem;
    background: #fff;
    font-size: 1.6rem;
    color: #404040;
  }
  /* 퍼블 캐럿(:after)이 컨테이너 우측 기준이라 버튼 위에 얹힌다 — select 우측 안쪽으로 고정 */
  .footer-nav .related-site::after { right: auto; left: 18.24rem; }
}

/* ② 유관기관 — 스크립트가 꺼져 있을 때만 나오는 대체 목록(<noscript> 안).
      셀렉트로는 이동할 수 없으므로 같은 목록을 링크로 제공한다. */
.related-site-fallback {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}
.related-site-fallback a {
  font-size: 1.4rem;
  text-decoration: underline;
}

/* ③ 접근성 — 키보드 초점이 어디 있는지 항상 보이게 한다.
      퍼블리셔 css 에 :focus-visible 이 정의된 요소가 일부라, 빠진 곳의 기본 윤곽선을 지우지 않도록
      **덮어쓰기만 하고 제거하지 않는다.** (윤곽선을 없애는 규칙은 이 파일에 넣지 않는다) */
.gs-form .gs-input:focus-visible,
.related-site select:focus-visible,
.related-site .go:focus-visible {
  outline: 2px solid var(--primary-color, #0b50a0);
  outline-offset: 2px;
}

/* ③ 배너·SNS 등 자동 재생 영역은 「멈춤」 버튼이 반드시 보여야 한다(KWCAG 2.2.2).
      퍼블리셔 마크업에 버튼이 이미 있으므로 여기서는 **화면에서 사라지지 않게만** 지킨다. */
.round-btn.pause[hidden],
.icon-btn.pause[hidden] {
  display: inline-flex !important;
}

/* =====================================================================
   서브 레이아웃 배선 보정 (2026-08-14, layout_sub 현행화)

   pb-sub.html 은 우리 본문 CSS(portal/base·debc·renewal — 본문이 아직 우리 마크업이다)와
   퍼블리셔 CSS 를 **함께** 싣는다. 순서는 「우리 → 퍼블」 이라 껍데기 충돌은 퍼블이 이기지만,
   ① 속성이 겹치지 않는 잔류 규칙(캐스케이드로 못 지우는 것)과
   ② 퍼블 전역 규칙이 우리 본문을 침범하는 지점은 여기서 격리한다.
   ===================================================================== */

/* ① 껍데기 요소 리셋 잔류 격리 — portal/base.css 의 **요소 셀렉터**(특정도 0-0-1)가
      퍼블 리셋 `*{margin:0;padding:0}`(특정도 0)을 이겨 껍데기에 남는다(px 대조 실측):
       · h1{margin:0 0 .5rem}        → 헤더 로고가 8px 내려앉아 헤더가 116→132px (Δ16)
       · ul,ol{margin-bottom:1rem;padding-left:2rem} → 푸터·GNB 목록이 부풀거나 밀린다
      본문(우리 마크업)은 base.css 값이 정상이므로 **껍데기 컨테이너로 한정**해 지운다. */
.header-wrap h1 { margin: 0; }
.title-wrap .title { margin: 0; }
.header-wrap ul, .header-wrap ol,
.mobile-gnb ul, .mobile-gnb ol,
.global-search ul,
.footer-wrap ul, .footer-wrap ol,
nav.breadcrumb ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ① `.breadcrumb` 는 **이름이 겹치는 다른 물건**이다 —
      퍼블: 서브 상단 브레드크럼 바(nav.breadcrumb > ol.breadcrumb-list)
      우리: 미리뉴얼 본문의 부트스트랩식 경로(ol.breadcrumb > li)
      태그로 갈라 서로의 잔류 규칙을 지운다. */
/* 퍼블 바에서 우리(portal/base.css) 잔류를 격리
   ※ font-size 는 «값을 정하지 않고 상속» 시킨다 — 퍼블 원본은 브레드크럼에 크기를 주지 않고
     body(1.7rem = 17px)를 그대로 물려받는다. 여기에 숫자를 적으면 퍼블이 body 크기를 바꿀 때
     이 바만 따라가지 않는다. 실제로 `1rem` 이라고 적어 두었다가 루트가 62.5% 라 **10px** 로 나갔고,
     드롭다운(4뎁스 메뉴) 글씨가 읽기 어려웠다(2026-08-19 지적 · 퍼블 원본 대조 17px).
     지우기만 하면 portal/base.css 의 `.breadcrumb{font-size:13px}` 이 살아나므로 inherit 를 명시한다. */
nav.breadcrumb { display: block; font-size: inherit; margin-bottom: 0; }
nav.breadcrumb .breadcrumb-item { color: inherit; }
nav.breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: none; }
/* 우리 본문 경로에서 퍼블 잔류를 격리(위아래 보더·쉐브론 이중 구분자) */
ol.breadcrumb { border: 0; }
ol.breadcrumb .breadcrumb-item:not(:first-child)::after { content: none; }

/* ① `.page-link` 도 **이름이 겹치는 다른 물건**이다 (`.row`·`.breadcrumb` 와 같은 계열).
      퍼블: `.krds-pagination` 안의 숫자 버튼 — 테두리 없이 배경만 바뀐다.
      우리: portal/base.css 의 부트스트랩식 페이저 — 흰 배경 + 1px 테두리 + 좌우 패딩.
      퍼블 규칙이 «선언하지 않은» 속성은 우리 값이 그대로 살아남는다. 그래서 시안에 없는
      **네모 테두리가 페이지 번호마다 그려졌다**(2026-08-19 지적).
      퍼블 원본과 계산값을 나란히 재서 어긋난 네 가지만 되돌린다 —
        테두리 1px→0 · min-width 32px→auto · padding 0 8px→0 · 글자 14.4px→17px(상속)
      («이전/다음» `.page-navi` 는 우리 규칙이 닿지 않아 원래부터 일치했다.) */
.krds-pagination .page-link {
  border: 0;
  min-width: auto;
  padding: 0;
  font-size: inherit;
}

/* ① subhead 래퍼 — 퍼블 `.content` 는 본문까지 감싸는 컨테이너지만 우리 subhead 는
      타이틀·탭까지만 만든다(본문은 각 화면의 우리 마크업). padding-bottom 8rem 이
      타이틀·탭과 본문 사이에 끼어들지 않게 뺀다. */
.content.sub-head { padding-bottom: 0; }

/* ② 브레드크럼 드롭다운 — **정본으로 넘겼다** (2026-08-21, debc_krds_260821)
      2026-08-14~20 에는 전달본에 펼침 스타일도 여는 스크립트도 없어(=죽은 마크업) 우리가
      패널 모양·자리기준·좁은 화면 잘림까지 전부 보완했었다. 이번 전달본이 그것을 정식으로 넣었다:
        · `.breadcrumb-item.open .breadcrumb-menu { display:block; visibility:visible; opacity:1 }` + 전환효과
        · `.breadcrumb-item { position: relative }`  — 좁은 화면에서도 자리기준이 생겼다
        · `.breadcrumb { overflow:hidden }` 이 **사라졌다** — 우리가 `has-open` 으로 우회하던 원인이 없어졌다
        · 여닫기·화살표 이동·Escape·바깥 클릭은 common.js 가 한다(우리 토글 스크립트는 걷어냈다 —
          둘을 함께 두면 두 리스너가 각각 토글해 «눌러도 열리지 않는다»)
      그래서 여기 남는 것은 **정본이 다루지 않는 우리 사정** 둘뿐이다(아래). */

/* 이동할 곳이 없는 뎁스는 button 이 아니라 span 이다(눌러도 아무 일 없는 버튼 금지) —
   퍼블 `.depth-name:after` 의 ▼ 캐럿은 「열 수 있다」는 표시라 span 에서는 지운다. */
span.depth-name::after { content: none; }

/* 좁은 화면에서 1뎁스를 되살리던 보완을 **뺐다** (2026-08-21 발주처 지시:
   「서브페이지의 네비게이터가 상위뎁스 표현을 안한거는 무시해줘」).

   2026-08-20 에는 반대로 넣었었다 — 퍼블 `.breadcrumb-list .home+.depth{display:none}` 때문에
   좁은 화면에서 「제도안내 > 장애인기업이란」이 「장애인기업이란」만 남는 것이 위치 정보를
   잃는다고 보았다. 발주처가 그대로 두라고 정했으므로 **정본을 따른다.**
   (되돌릴 일이 생기면 이 주석이 근거다 — 규칙이 아니라 판단이 바뀐 자리다.) */
@media (max-width: 1023.98px) {
  /* 뎁스 이름이 길면 말줄임 — 이것은 남긴다(감추기가 아니라 넘침 처리다). */
  .breadcrumb-item.depth .depth-name {
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* (형제 탭의 외부 링크 표시는 renewal.css 의 전역 `.rnw-ext::after`(U+2197)가
    퍼블 탭(.tab-btn)에도 그대로 적용되므로 여기서 다시 정의하지 않는다.) */

/* ---------------------------------------------------------------------
   ② 메인 팝업(REQ-055) — **퍼블리셔 전달본에 없는 우리 기능**이라 스타일도 우리가 갖는다.

   왜 여기에 다시 두는가
    이 규칙은 `css/portal/renewal.css` 에도 있다. 그런데 퍼블리셔 화면은 renewal.css 를
    싣지 않는다(그걸 실으면 전환 안 한 화면과 클래스가 충돌한다 — /pb 네임스페이스를 만든 이유).
    스타일이 없으면 `.rnw-popup{position:absolute;display:none}` 이 적용되지 않아
    **팝업 내용이 본문 아래로 그대로 쏟아진다**(실측으로 잡았다 — 메인 하단이 글자로 무너졌다).
    HTTP 200 이고 마크업도 정상이라 지표로는 잡히지 않는다.

   ★ 두 곳에 있으므로 **한쪽만 고치면 화면마다 다르게 보인다.** 값을 바꿀 때는 renewal.css 와 함께 고칠 것.
     (전환이 끝나 renewal.css 를 걷어낼 때 이 사본이 정본이 된다)
   --------------------------------------------------------------------- */
.rnw-popup-area { position: absolute; top: 0; left: 0; width: 100%; z-index: 1030; pointer-events: none; }

/* ── 팝업 뒤 어둡게(모달 레이어) — 2026-08-19 발주처 지적 「시안은 바탕이 어둡다」 ──
   1차에는 «공지성 알림이라 본문 이용을 막지 않는다»는 판단으로 딤 없이 얹기만 했다.
   시안은 모달이므로 딤을 넣되, **관리자 팝업관리의 좌표·크기 지정(REQ-055)과 여러 개 동시 노출은
   그대로 살린다** — 딤 한 장 위에 팝업 여러 개가 올라간다.
   딤이 켜져 있는 동안에는 팝업 영역을 화면 고정으로 바꾼다. 그러지 않으면 스크롤할 때
   딤(고정)만 남고 팝업은 문서와 함께 흘러가 «어둡기만 하고 아무것도 없는» 화면이 된다.
   팝업이 화면보다 길면 이 영역 안에서 스크롤된다(본문 스크롤은 잠근다). */
.rnw-popup-dim {
  position: fixed;
  inset: 0;
  z-index: 1029;
  background: rgba(0, 0, 0, .5);
}
.rnw-popup-area.is-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: auto; overflow: auto; }
body.rnw-popup-open { overflow: hidden; }
/* 시안(main_팝업.jpg)은 테두리·둥근모서리가 없다 — 네모난 판에 그림자만 있다. */
.rnw-popup {
  position: absolute; display: none; pointer-events: auto;
  background: #fff; border: 0; border-radius: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .16); overflow: hidden; max-width: calc(100vw - 24px);
}
/* 여닫기는 클래스로 한다(main-popup.js). 인라인 display 를 쓰면 화면 폭별 배치를 CSS 가 못 정한다. */
.rnw-popup.is-open { display: block; }
/* 본문은 여백 없이 꽉 채운다 — 시안의 팝업은 «이미지 한 장» 이라 안쪽 여백이 없다.
   글로 된 팝업은 관리자가 에디터에서 여백을 준다(본문 HTML 이 스스로 갖는다). */
.rnw-popup-body { padding: 0; overflow: auto; }
.rnw-popup-body img { display: block; max-width: 100%; height: auto; }
/* 글로 된 팝업은 문단에만 좌우 여백을 준다 — 이미지 팝업(시안)은 여백 없이 꽉 차야 한다. */
.rnw-popup-body > p { margin: 0; padding: 0.6rem 1.6rem; }
.rnw-popup-body > p:first-child { padding-top: 1.6rem; }
.rnw-popup-body > p:last-child { padding-bottom: 1.6rem; }

/* 하단 — 시안대로 좌우 반반 버튼 두 개. 가운데 세로선으로만 나뉜다. */
.rnw-popup-foot { display: flex; align-items: stretch; border-top: 1px solid #DDE3EC; background: #fff; }
.rnw-popup-foot > button {
  flex: 1 1 0;
  min-height: 6.4rem;
  border: 0;
  background: #fff;
  font-size: 1.7rem;
  color: #333;
  cursor: pointer;
}
.rnw-popup-foot > button + button { border-left: 1px solid #DDE3EC; }
.rnw-popup-foot > button:hover { background: #F1F4F9; color: var(--primary-color, #16337E); }
.rnw-popup-foot > button:focus-visible { outline: 2px solid var(--primary-color, #16337E); outline-offset: -2px; }

/* 좁은 화면에서는 관리자가 지정한 좌표·폭을 무시한다 —
   PC 기준 left:600px 같은 값이 그대로 먹으면 팝업이 화면 밖으로 나가 닫을 수도 없다.

   ── 모바일 배치(2026-08-19 지시, 잠정) ──
   여러 개를 **아래로 늘어놓지 않고 겹쳐서** 띄운다. 좁은 화면에서 세로로 쌓으면 두 번째부터는
   스크롤해야 보이는데, 팝업은 «지금 봐야 하는 알림» 이라 그 순간 눈에 들어오지 않으면 의미가 없다.
   겹쳐 두면 위엣것을 닫는 대로 다음 것이 드러난다(닫기 동선이 한 자리에 고정된다).
   각 팝업은 상하좌우 12px 여백만 남기고 화면을 채운다. 본문이 길면 팝업 «안에서» 스크롤된다.
   ※ 모바일 최종안은 발주처 의사결정 대기 — 정해지면 이 블록만 바꾸면 된다. */
@media (max-width: 767.98px) {
  .rnw-popup {
    left: 12px !important; right: 12px; width: auto !important; max-width: none;
    /* ★ 관리자 좌표와 함께 오는 **이동값(transform)도 반드시 무효화**한다(2026-08-19 결함 조치).
       등록 화면에서 위치를 「가운데」로 두면 인라인으로 `transform: translate(-50%,-50%)` 가 붙는다.
       종전에는 left·width 만 덮어써서 그 이동이 그대로 남아 **폭의 절반만큼 왼쪽으로, 높이의 절반만큼 위로**
       밀렸다 — 좁은 화면에서 팝업이 화면 밖으로 나가 제목도 닫기 버튼도 보이지 않았다(발주처 지적).
       좁은 화면에서는 좌우 12px 로 꽉 채우는 것이 정답이라 이동이 필요 없다. */
    transform: none !important;
    /* 세로도 화면에 맞춘다 — `top` 은 JS(reflow)가 손대지 않도록 !important 로 못박는다. */
    top: 12px !important;
    bottom: 12px;
    height: auto;
    max-height: none;
  }
  /* 머리·바닥은 고정하고 본문만 늘어나게 한다(본문이 길어도 닫기 버튼이 화면 밖으로 나가지 않는다). */
  .rnw-popup.is-open {
    display: flex;
    flex-direction: column;
  }
  .rnw-popup-head, .rnw-popup-foot { flex: 0 0 auto; }
  /* 인라인 height(관리자 지정 높이)를 이겨야 해서 !important 를 쓴다 —
     좁은 화면에서는 «화면을 채우는 것» 이 기준이라 PC 용 높이를 그대로 쓰면 안 된다. */
  .rnw-popup-body { flex: 1 1 auto; height: auto !important; max-height: none !important; }
}

/* ---------------------------------------------------------------------
   메인 이용 현황 통계 밴드 (REQ-010, 2026-08-17) — 퍼블리셔 시안에 없는 우리 기능.
   시안 섹션(①~⑤)을 건드리지 않고 유관기관 롤링 뒤·푸터 앞에 저자극 밴드로 선다.
   값은 js/main-stats.js 가 statsWidget API 로 채우고, 채우기 전에는 [hidden] 이라
   렌더 자체가 없다(빈 밴드가 시안 대조를 흐리지 않는다). 색은 pb 토큰(--primary-color)과
   「자주 찾는 서비스」 패널색(#F3F6FB)만 쓴다 — 새 색을 만들지 않는다. */
.dstat-band { background: #F3F6FB; border-top: 1px solid #E2E6E9; padding: 2.8rem 0; }
.dstat-band .inner { display: flex; align-items: center; gap: 2.4rem 3.2rem; flex-wrap: wrap; }
.dstat-list {
  display: flex; flex: 1 1 auto; justify-content: space-around; gap: 1.6rem;
  list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.dstat-list li { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-width: 13.6rem; }
.dstat-list b { font-size: 2.4rem; font-weight: 800; color: var(--primary-color); line-height: 1.2; }
.dstat-list span { font-size: 1.44rem; color: #666; }
.dstat-note { margin: 0; width: 100%; text-align: right; font-size: 1.248rem; color: #8a8f98; }
/* pb 브레이크포인트(1024 = MO 전환)를 따른다 — 새 값을 만들지 않는다(§7-1 #3). */
@media (max-width: 1024px) {
  .dstat-band { padding: 2rem 0; }
  .dstat-list { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; }
  .dstat-note { text-align: center; }
}

/* ---------------------------------------------------------------------
   영상 슬롯 (REQ-017~020 · MTG-01, 2026-08-19 WP-I) — fragments/video-embed.html 이 그리는 마크업.
   세 레이아웃(메인 pb · 서브 pb-sub · 인트로)이 모두 이 파일을 실어 한 곳에 둔다.
   · .dvideo-list  : 카드 그리드(서브 「관련 영상」 — 지역센터 16 처럼 여러 편이 올 수 있다)
   · .dvideo-player: <video> 16:9 · 검은 배경(레터박스) · 폭 100% — 자동재생 없음, 컨트롤은 UA 기본
   · .dvideo-link  : 외부 페이지 주소(유튜브 등)의 새 창 카드 — iframe 이 아니다(의-09·폐쇄망)
   · .dvideo-band  : 메인 하단 대표 영상 밴드(통계 밴드와 같은 톤 — 패널색 #F3F6FB, 새 색 없음)
   · .intro-video  : 인트로 좌측 사진 자리를 영상이 대신할 때(퍼블리셔 .intro-image 폭 안에서 16:9) */
.dvideo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2.4rem 3.2rem; }
.dvideo-list > li { min-width: 0; }
.dvideo { margin: 0; }
.dvideo-player { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; }
.dvideo-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.96rem;
  aspect-ratio: 16 / 9; padding: 1.6rem; background: #F3F6FB; border: 1px solid #E2E6E9; border-radius: 8px;
  color: var(--primary-color, #16337E); font-weight: 600; text-decoration: none; text-align: center; overflow: hidden;
}
.dvideo-link img { max-width: 100%; max-height: 60%; object-fit: contain; }
.dvideo-link:hover, .dvideo-link:focus-visible { border-color: var(--primary-color, #16337E); text-decoration: underline; }
.dvideo-link:focus-visible { outline: 2px solid var(--primary-color, #16337E); outline-offset: 2px; }
.dvideo-link-label .bi { margin-right: 0.48rem; }

/* 유튜브 «그 자리에서 재생»(2026-08-21 지시) — fragments/video-embed.html + js/video-embed.js
   처음에는 표지 + 재생 단추만 그린다. 누르면 스크립트가 이 상자 안에 재생기를 끼운다.
   상자 크기를 16:9 로 고정해 두어야 재생기로 바뀔 때 **화면이 덜컹 밀리지 않는다.** */
.dvideo-yt { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.dvideo-yt-btn {
  display: block; width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; background: #000; cursor: pointer; position: relative;
}
.dvideo-yt-btn img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.86; transition: opacity 0.15s; }
.dvideo-yt-btn:hover img, .dvideo-yt-btn:focus-visible img { opacity: 1; }
.dvideo-yt-btn:focus-visible { outline: 3px solid var(--primary-color, #16337E); outline-offset: -3px; }
/* 재생 삼각형 — 아이콘 폰트에 기대지 않는다(폰트가 늦게 오면 단추가 한동안 빈 채로 보인다). */
.dvideo-yt-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 6.8rem; height: 4.8rem; border-radius: 12px; background: rgba(0, 0, 0, 0.72);
  transition: background 0.15s;
}
.dvideo-yt-play::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-42%, -50%);
  border-style: solid; border-width: 1.1rem 0 1.1rem 1.8rem; border-color: transparent transparent transparent #fff;
}
.dvideo-yt-btn:hover .dvideo-yt-play, .dvideo-yt-btn:focus-visible .dvideo-yt-play { background: #E02B20; }
.dvideo-yt-frame { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------------
   첨부 미리보기 모달 — JennyViewer 를 화면 안에 띄운다(2026-08-21).
   뷰어 자체의 모양은 jar 안 jenny-viewer.css(+KRDS 스킨)가 갖고 있다 —
   여기는 «그것을 담는 상자» 만 정한다. 뷰어 내부 스타일을 이 파일에서 덮지 않는다
   (덮으면 솔루션 판이 올라올 때마다 어긋난다). */
.jv-modal { position: fixed; inset: 0; z-index: 1200; }
.jv-modal[hidden] { display: none; }
.jv-modal-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.jv-modal-panel {
  position: relative; margin: 3.2rem auto; max-width: 112rem; width: calc(100% - 3.2rem);
  height: calc(100% - 6.4rem); background: #fff; border-radius: 8px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 1.6rem 4.8rem rgba(0, 0, 0, 0.35);
}
.jv-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  padding: 1.6rem 2rem; border-bottom: 1px solid #E0E0E0;
}
.jv-modal-tit { margin: 0; font-size: 1.76rem; font-weight: 700; color: #222; }
.jv-modal-close {
  border: 0; background: transparent; font-size: 2.8rem; line-height: 1;
  width: 4rem; height: 4rem; cursor: pointer; color: #555;
}
.jv-modal-close:hover, .jv-modal-close:focus-visible { color: var(--primary-color, #16337E); }
.jv-modal-close:focus-visible { outline: 2px solid var(--primary-color, #16337E); outline-offset: 2px; }
/* 뷰어가 자리를 꽉 채우게 — 높이를 주지 않으면 내용이 0px 로 접힌다. */
.jv-modal-body { flex: 1; min-height: 0; overflow: auto; }
.jv-modal-msg { padding: 4.8rem 2rem; text-align: center; color: #555; }
@media (max-width: 767.98px) {
  .jv-modal-panel { margin: 0; width: 100%; height: 100%; border-radius: 0; }
}

/* ★ 인쇄 — 모달만 남기고 «뒤 화면» 을 통째로 뺀다 (2026-08-21 신고 조치)
   증상: 뷰어에서 인쇄를 누르면 **같은 것이 4장** 나왔다.
   원인: 이 모달이 `position: fixed` 다. 고정 요소는 인쇄할 때 **페이지마다 다시 그려진다.**
     뒤에 깔린 목록이 서너 장이라, 그 매 장 위에 모달이 겹쳐 「같은 것이 여러 장」이 된 것이다.
     뷰어 자체는 인쇄를 이미 고려하고 있다(jenny-viewer.css 의 @media print 가 도구모음·썸네일을 감춘다) —
     **문제는 그것을 담은 우리 상자였다.**
   조치: 인쇄에서는 모달을 흐름 안(static)으로 돌리고, 형제 요소를 전부 감춘다. */
@media print {
  body > *:not(.jv-modal) { display: none !important; }
  .jv-modal { position: static; }
  .jv-modal-back, .jv-modal-head { display: none !important; }
  .jv-modal-panel {
    margin: 0; width: auto; height: auto; max-width: none;
    box-shadow: none; border-radius: 0; overflow: visible;
  }
  .jv-modal-body { overflow: visible; }

  /* ★ 마지막 쪽 뒤의 «빈 장» 을 없앤다 (2026-08-21 신고 2차·3차)
     뷰어 CSS 가 `.jv-page { break-after: page }` 를 **모든** 쪽에 건다. 쪽 사이를 끊으려는 것인데
     마지막 쪽 뒤에도 걸려 종이가 한 장 더 나온다(1쪽 문서에서 특히 눈에 띈다).

     ※ 처음에는 `.jv-page:last-child` 만 되돌렸는데 **그대로 빈 장이 나왔다.**
       `.jv-pages` 안에는 쪽 말고도 형제가 붙는다(경고 알림 `.jv-notice`, 부분조회 「더 보기」 `.jv-more`).
       그것이 하나라도 뒤에 있으면 **마지막 쪽은 `:last-child` 가 아니다** —
       인쇄에서 `display:none` 이어도 «마지막 자식» 자리는 그대로다.
     → 뒤에 무엇이 있든 무관하게 «쪽 사이에만» 끊는다. 이 방식은 셈이 필요 없어 어긋날 수가 없다. */
  .jv-page { break-after: auto !important; page-break-after: auto !important; }
  .jv-page + .jv-page { break-before: page !important; page-break-before: always !important; }

  /* ★★ 여기까지 고치고도 빈 장이 남아, 추론을 멈추고 **실제 인쇄 결과를 재 봤다**
     (헤드리스 `--print-to-pdf` 로 장수를 세고, 규칙을 하나씩 꺼 가며 비교 — 2026-08-21).
       ① 현재 상태            3장
       ② 경고문만 숨김        2장   ← 경고문이 한 장을 차지하고 있었다
       ⑥ 쪽만 남기고 다 숨김  2장   ← **쪽 하나가 두 장에 걸쳐 있었다**
     세 번의 추론(마지막 쪽·형제 요소·컨테이너 높이)은 전부 빗나갔다.
     장수를 재는 데 몇 분이면 됐는데 그것을 먼저 하지 않은 것이 잘못이었다.

     원인 둘, 조치 둘 —
      ① **`.jv-page` 에 고정 높이가 걸려 있다.** 뷰어가 화면 기준으로 쪽 크기를 잡는데,
         그 높이가 종이보다 커서 한 쪽이 두 장에 걸쳤다.
         ★ 나는 `.jv-root·.jv-body·.jv-viewport·.jv-pages` 는 auto 로 풀면서 **정작 쪽 자신을 빠뜨렸다.**
           측정으로 갈렸다 — 쪽 높이만 auto 로 풀면 3장 → **1장**(다른 후보는 전부 2장 그대로).
      ② 경고문(「텍스트가 없는 스캔 문서로 보입니다」)은 **화면 안내**지 문서 내용이 아니다.
         종이에 남길 이유가 없다. 뷰어 인쇄 규칙이 도구모음·썸네일은 감추면서 이것만 빠뜨렸다. */
  .jv-notice { display: none !important; }
  .jv-page {
    height: auto !important; min-height: 0 !important; max-width: 100% !important;
  }
  .jv-page-content { max-width: 100% !important; }
  /* 이미지 상한은 «안전망» 이다 — 쪽 높이를 푼 것만으로 해결되지만,
     화면 폭이 아주 넓은 기기에서 그려진 큰 이미지가 넘치지 않게 함께 둔다. */
  .jv-page img, .jv-page canvas {
    max-width: 100% !important; max-height: 95vh !important;
    width: auto !important; height: auto !important; object-fit: contain;
  }

  /* 컨테이너에 남은 높이·여백이 다음 장을 만들지 않게 한다.
     `body` 의 overflow 는 모달을 열 때 스크립트가 hidden 으로 바꿔 둔 것이라 여기서 되돌린다. */
  html, body { height: auto !important; overflow: visible !important; }
  .jv-modal-panel, .jv-modal-body, .jv-root, .jv-body, .jv-viewport, .jv-pages {
    height: auto !important; min-height: 0 !important; padding-bottom: 0 !important;
  }
  .jv-pages { gap: 0 !important; }
}

/* 영상 절 — 종전에 `.dvideo-sec` 규칙이 **아예 없었다**(2026-08-21 실측).
   그래서 본문과 딱 붙어, 영상과 본문이 서로 흘러든 것처럼 보였다. */
.dvideo-sec { margin: 3.2rem 0 4rem; }

/* 인트로 바로 아래에 오는 영상(시안 위치) — **세로로 쌓는다.**
   기본 `.dvideo-list` 는 320px 이상이면 여러 열로 깔린다. 그러면 유튜브와 mp4 가 좌우로 서서
   「위 유튜브 · 아래 mp4」로 견주려는 뜻이 사라지고 둘 다 작아진다.
   시안도 영상이 한 편씩 넓게 선다. */
.dvideo-sec--top { margin: 2.4rem 0 4rem; }
.dvideo-sec--top .dvideo-list { grid-template-columns: minmax(0, 860px); gap: 3.2rem; }

/* 표지가 없는 <video> 는 첫 프레임을 그리기 전까지 «검은 상자» 다.
   무엇이 있는 자리인지 알 수 있게 제목을 위에 두고, 상자에 테두리를 준다. */
.dvideo-player { border: 1px solid #E2E6E9; }
.dvideo figcaption { margin-top: 0.96rem; }
.dvideo figcaption strong { display: block; font-size: 1.68rem; color: #222; line-height: 1.4; }
.dvideo-time { display: inline-block; margin-top: 0.24rem; font-size: 1.36rem; color: #666; }
.dvideo-desc { margin: 0.56rem 0 0; font-size: 1.472rem; color: #555; line-height: 1.5; }
.dvideo-sec { margin-top: 4.8rem; }
/* 퍼블리셔 정본 본문(.cont-wrap)을 쓰는 화면 (2026-08-21)
   본문 상자에는 «우리 서식» 을 얹지 않는다 — renewal.css 의 `.rnw-sub-body` 규칙(좌우 패딩
   7.2rem·표 여백·제목 크기)이 정본 레이아웃 위에 덧칠돼 시안보다 좌우로 퍼졌다.
   정본은 자기 폭 규칙(`.inner{max-width:1648px;padding:0 24px}`)을 이미 갖고 있다.
   그래서 이 두 클래스는 «표지» 일 뿐 아무 서식도 주지 않는다 — 있는 것이 없는 것보다 낫다:
   나중에 정본 본문에만 무언가 걸 자리가 생기면 여기가 그 자리다. */
.cms-pub-head { /* 서식 없음 — 정본이 스스로 잡는다 */ }
/* ★ 앞 조각의 `.cont-wrap` 아래 여백을 지운다 (2026-09-07 발주처 지적:
     「퍼블은 장애인기업이란과 카드 3개 사이 간격이 좁은데 우리는 왜 넓은가」).

   왜 생겼나 — 우리가 CSS 를 «따로» 얹어서가 아니다. 정본 CSS 가 그대로 최우선으로 먹고 있다.
     정본은 본문 전체를 `.cont-wrap` 하나로 감싸고, 그 상자가 **아래 여백 12.8rem(128px)** 을
     갖는다(layout.min.css `.cont-wrap{padding-bottom:12.8rem}`). 페이지 «끝» 여백이다.
     그런데 우리는 영상을 시안 자리(인트로 바로 뒤)에 넣으려고 본문을 둘로 나누고
     (EgovContentsController.splitAtIntro) 조각마다 `.cont-wrap > .inner` 를 복제한다.
     그래서 «페이지 끝» 여백이 **본문 한가운데서 한 번 더** 열렸다.
     실측(110 장애인기업이란): 정본은 안내 박스 뒤 60px 만에 카드가 서는데 우리는 188px 였다.
     ※ splitAtIntro 주석의 「`.cont-wrap` 에는 폭·배경 규칙이 없어 겹쳐도 무해하다」는
        판단이 틀렸다 — 배경·폭은 없지만 «아래 여백» 이 있다.

   앞 조각은 페이지 끝이 아니므로 그 여백을 받지 않아야 한다. 지우면 인트로의
   `margin-bottom:60px` 이 상자 밖으로 collapse 돼 정본과 같은 60px 만 남는다. */
.cms-pub-head .cont-wrap { padding-bottom: 0; }
/* ★ 본문 아래 여백 — 정본은 `.content { padding-bottom: 12.8rem }` 로 준다 (2026-08-22 발주처 지적:
     「오시는 길과 색상 박스의 간격이 퍼블이 준 것과 구현된 것이 다르다」).
     시안은 본문이 `.content` 안에 있어 그 여백을 받는데, 우리 본문 상자는 `.cms-pub-body` 라
     받지 못했다 — 실측 우리 56px · 시안 128px. 본문이 푸터에 바짝 붙어 보였다.
     정본과 같은 값을 그대로 쓴다(정본이 바꾸면 여기도 함께 바꾼다). */
.cms-pub-body { padding-bottom: 12.8rem; }
/* ★ 다만 «정본 본문이 들어 있으면» 우리가 또 주지 않는다 (2026-09-07 발주처 지적:
     「맨 밑의 간격도 우리 구현된 것이 더 넓다」).
     정본 본문은 스스로 `.cont-wrap{padding-bottom:12.8rem}` 을 갖고 온다. 위 규칙이 그 위에
     한 번 더 얹혀 **128px 이 두 번(256px)** 들어가 있었다 — 실측: 정본 128px · 우리 256px.
     위 규칙은 2026-08-22 에 «본문이 푸터에 바짝 붙는다» 는 지적으로 넣은 것이라 그대로 둔다 —
     정본 마크업이 아닌 본문(옛 `rnw-*`)에는 여전히 그 여백을 줄 사람이 없다. */
.cms-pub-body:has(> .cont-wrap) { padding-bottom: 0; }
/* ★ 옛 마크업 본문(`.rnw-sub-body`)에도 «페이지 끝» 여백을 준다 (2026-09-07).
     정본은 본문 끝과 푸터 사이를 12.8rem(128px) 띄운다. 정본 마크업 화면 32곳은 그 값을 받는데
     아직 옛 마크업인 화면 하나(670 오시는 길 — 지도가 있어 정본 본문을 넣지 않은 화면)만
     **16px** 이라 본문이 푸터에 바짝 붙어 있었다(실측: 정본 sub6_8_1 은 128px).
     앞 조각(`.rnw-sub-head`)은 페이지 끝이 아니므로 뺀다 — `.cms-pub-head` 와 같은 이유다. */
.container.rnw-sub > .rnw-sub-body:not(.rnw-sub-head) { padding-bottom: 12.8rem; }
/* 그 여백 «앞» 에 내용의 끝 여백이 덧붙지 않게 한다 (2026-09-07).
   670 은 본문이 박스탭 패널(.rnw-boxpanel)로 끝나는데, 패널 안 마지막 요소의
   `margin-bottom:16px` 이 위 padding 에 막혀 밖으로 collapse 되지 못하고 그대로 더해졌다
   — 실측 144px(=128+16), 정본 128px. 패널의 «끝» 여백은 패널 상자가 정하는 것이 맞다. */
.rnw-boxpanel > :last-child { margin-bottom: 0; }
/* 영상 자리는 정본에 없다(시안에 영상이 없다). 본문과 «같은 폭» 으로 세워야 따로 놀지 않는다 —
   정본 `.inner` 와 같은 값(1648px · 좌우 24px)을 쓴다.
   ★ 그리고 «가운데» 로 모은다 — 그리드가 `auto-fit`(여러 열)이라 영상이 한 편이면
     첫 열만 채워 **왼쪽으로 치우쳐 보인다**(실측: 본문은 x 400~1420 인데 영상은 24~884).
     한 편일 때 지나치게 커지지 않도록 최대 폭도 둔다. */
.dvideo-sec--top > .dvideo-list,
.dvideo-sec > .dvideo-list {
  max-width: 1648px; margin-left: auto; margin-right: auto; padding: 0 24px;
  justify-content: center;
}
/* ─────────────────────────────────────────────────────────────────────────
   ★ 요소 높이·여백이 시안보다 «작게» 나오던 것 (2026-08-22 발주처 신고:
     「시안과 비교하면 파란색의 높이가 다른 것 같은데 퍼블리셔가 전달한 화면도 높이가 높다」
      「퍼블 화면은 하단과 여백이 좀 있는데 현재 화면은 여백이 좁다」)

   실측: 제도안내 110 의 파란 헤더가 **우리 105px · 시안 159px**. 차이 54px 은
     `.type-title { padding: 3rem 0 2.4rem }` (=54px)과 **정확히 같다** → box-sizing 문제다.

   원인: 정본(output.min.css)은 `box-sizing: border-box` 를 **특정 태그 목록에만** 건다 —
     body,div,p,h1~h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,
     a,button,select,span,em,label / article,aside,…,section.
     **그 목록에 `strong` 이 없다.** 그런데 `.type-title` 이 `<strong>` 이다.
       시안: strong = content-box → height 10.5rem(105px) + padding 54px = **159px**
       우리: base.css(부트스트랩)의 전역 `*{box-sizing:border-box}` 가 strong 까지 덮어 **105px**
     정본 css 의 모든 크기 값은 «그 목록 밖은 content-box» 를 전제로 정해져 있다.
     전역 border-box 는 그 전제를 통째로 깨뜨린다 — 한 화면이 아니라 **곳곳에서** 높이·여백이 줄어든다.

   조치: 퍼블 레이아웃 안에서 «정본 목록에 없는 태그» 를 content-box 로 되돌린다.
     목록에 있는 태그는 정본 규칙이 그대로 살아 있으므로 건드리지 않는다.
     ※ 우리 미리뉴얼 화면(#wrap 밖)에는 영향이 없다.
   ───────────────────────────────────────────────────────────────────────── */
#wrap strong, #wrap b, #wrap i, #wrap small, #wrap img, #wrap time,
#wrap abbr, #wrap cite, #wrap sup, #wrap sub, #wrap mark, #wrap s, #wrap u,
#wrap dfn, #wrap q, #wrap figure, #wrap video, #wrap iframe, #wrap canvas {
  box-sizing: content-box;
}

/* ─────────────────────────────────────────────────────────────────────────
   ★ 태블릿 폭(768~1199px)에서 본문이 좁아지던 것 (2026-08-21 발주처 신고:
     「갤럭시 폴드 펼쳐서 본 태블릿 사이즈에서 화면이 벗어나고 있어」)

   원인: `css/portal/base.css` 는 **부트스트랩 그리드**를 갖고 있고, 그 `.container` 는
     폭 구간마다 «고정 max-width» 를 건다 — 576↑540 · 768↑720 · 992↑960 · 1200↑1140 · 1400↑1320.
     CMS 콘텐츠 화면의 바깥 상자가 `.container.rnw-sub` 라 그 값에 묶였다.
     우리는 이미 그 폭 제한을 푸는 규칙을 갖고 있었는데 **`@media print` 안에만** 있어
     인쇄할 때만 먹고 화면에는 먹지 않았다.

   실측(1440 폭 캡처로 시안과 대조 · 표의 좌우 경계를 픽셀로 잼)
       폭   우리 오른쪽 여백   시안 오른쪽 여백
      884       100                20      ← .container 가 720px 로 묶임
      930       122                18      ← 여전히 720px
     1000        40                20      ← 960px
     1440        28                28      ← 여기서는 우연히 일치했다(renewal.css 의 1600px 가 이긴다)
   PC 만 보고 「맞다」고 판정해 폴드·태블릿에서 드러났다.

   조치: 정본 레이아웃에서는 «폭을 `.inner` 가 잡는다» — 바깥 상자는 폭에 관여하면 안 된다.
     `.container.rnw-sub`(구체성 0,2,0)로 부트스트랩 `.container`(0,1,0)를 이긴다.
   ───────────────────────────────────────────────────────────────────────── */
/* ★ 위아래 여백도 함께 없앤다 (2026-08-22 발주처 지적: 「오시는 길과 색상 박스의 간격이 다르다」)
   `renewal.css` 에 `.rnw-sub { padding: 3.52rem 0 5.6rem }` 가 있다 — 우리 미리뉴얼 화면용인데
   정본 화면에도 걸려 **아래 56px·위 35px** 이 덧붙었다.
   실측: 본문 아래 여백이 우리 184px · 시안 128px. 그 차이 56px 이 이 규칙의 아래 padding 이다
   (배포 없이 확인했다 — 이 셀렉터만 0 으로 두자 정확히 128px 이 됐다).
   정본에서 본문 아래 여백은 `.content { padding-bottom: 12.8rem }` 하나가 정하고,
   바깥 상자는 여백에 관여하지 않는다. */
.container.rnw-sub {
  max-width: none;
  width: auto;
  padding: 0;
}

/* ★ 그런데 위 규칙은 «정본 본문이 들어 있는 화면» 을 전제로 한다 (2026-09-07 보완)
   정본 화면은 안쪽에 `.cont-wrap > .inner` 가 있어 그것이 좌우 여백(24px·좁은 화면 16px)을 만든다.
   그래서 바깥 상자의 padding 을 0 으로 지워도 내용은 제자리에 선다.

   ★ 그러나 FAQ·Q&A 처럼 «우리 서식» 으로 그리는 화면에는 `.inner` 가 없다.
     거기서는 이 규칙이 **여백을 만들 사람을 아무도 남기지 않는다** —
     제목(.title-wrap)과 검색상자는 각자 여백을 갖고 있어 24px 안쪽에 서는데,
     여백 없는 자식(「Total N건」 등)만 화면 끝(0)에서 시작해 **제목보다 왼쪽으로 튀어나온다.**
     발주처 지적: 「faq 타이틀보다 토털 3건 영역이 왼쪽에 있어」
     실측 1440px — 정본 Total 24~1416 · 우리 0~1440.

   조치: `.inner` 를 갖지 않은 본문 상자에만 정본과 같은 여백을 준다.
     :has() 로 «안에 .inner 가 있는가» 를 보고 가른다 — 화면마다 클래스를 더 붙이지 않아도
     구조가 스스로 말하게 하는 편이 낫다(콘텐츠는 관리자가 바꾸는 자료다). */
.container.rnw-sub:not(:has(> .cont-wrap)):not(:has(> .cms-pub-body)) {
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  /* ★ 최대폭까지 함께 준다 (2026-09-07 — 발주처 지적: 「FAQ 가 해상도에 따라 안 맞는다」)
     좌우 여백만 주고 최대폭을 빼 두어, **넓은 화면에서만** 제목과 본문이 어긋나 있었다.
     실측(개발서버 FAQ):
         1920px  제목 160~1760  ·  본문 24~1896   ← 136px 어긋남
         1440px  제목  24~1416  ·  본문 24~1416   ← 우연히 일치(둘 다 여백 24)
     1440 이하에서만 보면 「맞다」고 판정하게 되는 종류의 어긋남이다.
     제목(.content.inner)은 정본 `.inner` 규칙으로 1648px 에 묶이는데 본문 상자에는
     그 제한이 없어 화면 끝까지 퍼졌다. 같은 토큰을 써서 둘을 한 값에 묶는다 —
     숫자를 따로 적으면 정본 토큰이 바뀔 때 한쪽만 남는다. */
  max-width: var(--krds-contents-wrap-size);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .container.rnw-sub:not(:has(> .cont-wrap)):not(:has(> .cms-pub-body)) {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

/* (2026-08-21 — 모바일 표 폭을 «보완» 하려다 되돌렸다.
    `@media(max-width:767px) .krds-table-wrap{width:calc(100vw - …); overflow-x:auto}` 를
    결함으로 보고 `width:100%` 로 덮었는데, **그것이 퍼블리셔의 의도였다** — 좁은 화면에서
    표를 화면 폭만큼 펴고 «옆으로 밀어» 보게 하는 설계다.
    캡처에는 스크롤하지 않은 상태만 찍히므로 잘린 것처럼 보였을 뿐이고, 시안을 실제 브라우저로
    열면 멀쩡하다(발주처 확인). 정본 의도를 우리 추측으로 덮지 않는다.) */

/* ★ 1024~1279px 에서 상단 메뉴 글자가 서로 붙던 것 (2026-08-25 실측)
     정본은 1024px 부터 데스크톱 메뉴를 편다(`@media(max-width:1023px){.gnb{display:none}}`).
     그런데 메뉴 글자는 2.2rem 고정이고, 「제도안내」 같은 네 글자가 정확히 78px 이다.
     1024 에서 메뉴줄에 남는 폭이 470px — 여섯 칸이면 한 칸에 78px 이라
     **글자 폭과 칸 폭이 같아져 사이 간격이 0 이 된다**(실측: 간격 [0,0,0,0,0]).
     1280 에서는 한 칸이 121px 라 넉넉하다 — 시안이 1440 기준이라 이 구간을 못 본 것이다.

     이 구간만 글자를 줄인다. 메뉴를 감추는 쪽(모바일처럼 햄버거만 두기)도 생각했지만,
     1024~1279 는 노트북에서 흔한 폭이라 **메뉴가 통째로 사라지는 편이 더 나쁘다.** */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-main .gnb-link { font-size: 1.9rem; }
}

/* ★ 통계 알약 3칸이 1024px 에서 화면을 벗어나던 것 (2026-08-25 실측)
     정본은 1023px 이하에서 세로로 쌓고, 1024 부터 가로 3칸으로 편다.
     그런데 **실제 글이 시안보다 길어**(「전체 종사자 수 578,280명 / 장애인 종사자 수 183,861명」)
     1024 에서 세 칸에 필요한 폭이 1009px 인데 쓸 수 있는 폭은 976px 이다 — 33px 모자란다.
     flex 항목은 기본값(min-width:auto)이라 글자보다 좁아지지 못해, 모자란 만큼 **화면 밖으로 밀린다**
     (페이지가 9px 가로로 밀렸다).

     고치는 길은 둘이었다 — ①세로로 쌓는 구간을 넓힌다 ②칸이 줄어들 수 있게 한다.
     ②를 골랐다. ①은 «몇 px 까지 쌓을지» 를 글 길이에 맞춰 손으로 정해야 하는데,
     글은 해마다 바뀐다(통계 수치다). 그때마다 다시 어긋난다.
     칸이 줄어들면 글이 한 줄 더 접힐 뿐이고, 셋째 칸은 이미 두 줄이라 모양도 어색하지 않다. */
.sub1_1 .stat-box > li { min-width: 0; }
/* 한글은 단어 중간에서 끊으면 읽기 나쁘다 — 띄어쓰기에서만 접는다. */
.sub1_1 .stat-box > li .stat-label,
.sub1_1 .stat-box > li .stat-value { word-break: keep-all; }

/* ★ 영상이 «한 편» 일 때 — 그리드가 `repeat(auto-fit, minmax(320px, 1fr))` 라 열이 여럿 생기고
     한 편은 첫 열만 채워 왼쪽에 붙는다(`justify-content` 로는 안 풀린다 — 트랙이 1fr 이라
     남는 공간이 없다고 보기 때문이다). 그래서 **한 편이면 전체 열을 차지하게** 못박는다.
     여러 편인 화면(지역센터 16편)은 종전대로 여러 열로 그려진다. */
.dvideo-list > li:only-child {
  grid-column: 1 / -1;
  max-width: 96rem;
  margin-left: auto;
  margin-right: auto;
}
.dvideo-band { background: #F3F6FB; border-top: 1px solid #E2E6E9; padding: 3.2rem 0; }
.dvideo-band-tit { margin: 0 0 1.6rem; font-size: 2rem; font-weight: 700; color: #222; }
.dvideo-band .dvideo-list { grid-template-columns: minmax(0, 720px); justify-content: center; }
/* 인트로 영상 자리 (2026-08-21 개편)
   ★ 퍼블리셔 정본이 `.intro-image` 를 «높이 0 + padding-bottom 57.428%» 로 둔다 —
     비율만 잡는 상자라 **안에 넣는 것은 절대배치여야** 하고, 캡션처럼 흐름대로 쌓이는 것은
     바깥에 두어야 한다. 그것을 어기면 요소가 통째로 보이지 않는다(높이 0 + overflow:hidden).
     그래서 우리 마크업은 `.intro-video-wrap > (.intro-image + .intro-video-caption)` 이다. */
.intro-wrap .intro-video-wrap { width: 100%; }
.intro-wrap .intro-image iframe,
.intro-wrap .intro-image .dvideo-player {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: #000;
}
/* 영상은 잘라 채우지 않는다 — 자막·제목이 화면 밖으로 나가면 안 된다(정본 img 는 cover 지만 영상은 다르다). */
.intro-wrap .intro-image .dvideo-player { object-fit: contain; }
.intro-video-caption { margin: 0.8rem 0 0; font-size: 1.44rem; color: #555; }
.intro-video-caption strong { display: block; color: #222; }
/* 폐쇄망에서 iframe 이 막히면 이 링크가 영상으로 가는 유일한 길이다 — 눈에 띄되 캡션을 누르지 않게 한 줄. */
.intro-video-out { display: inline-block; margin-top: 0.4rem; color: var(--primary-color, #16337E); font-weight: 600; }

/* 표지가 없는 카드 (2026-08-21) — 퍼블리셔 정본 `.doc-img` 에는 이 상태가 없다(시안은 표지가 다 있다).
   정본이 잡아 둔 비율·그림자를 그대로 쓰되, 안쪽만 「이미지 없음」 안내로 채운다.
   그림자는 없앤다 — 없는 표지에 그림자를 지우면 종이가 있는 것처럼 보인다. */
/* ★ 정본 `.doc-img` 는 `height:0 + padding-bottom:84%` 로 비율을 만든다 — 그 안은 절대배치여야 한다.
     여기서는 글자 두 줄을 가운데 놓아야 하므로 **같은 비율(59:84)을 aspect-ratio 로 다시 잡고**
     높이를 되살린다. 그러지 않으면 아이콘·글자가 높이 0 상자에 갇혀 보이지 않는다. */
.doc-list .doc-img-none {
  height: auto; padding-bottom: 0; aspect-ratio: 59 / 84;
  box-shadow: none; border: 1px dashed #CBD2D9; background: #F3F6FB;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
}
.doc-list .doc-img-none i { font-size: 3.2rem; color: #9AA5B1; }
.doc-list .doc-img-none span { font-size: 1.36rem; color: #6B7280; }
/* 제목을 링크로 감쌌다(정본은 `<p>` 뿐) — 색·잘림은 정본 `.doc-title` 이 잡으므로 상속만 시킨다. */
.doc-list .doc-title a { color: inherit; text-decoration: none; }
.doc-list .doc-title a:hover, .doc-list .doc-title a:focus-visible { text-decoration: underline; }
/* 「바로보기」만 <button> 이다(여는 동작) — 정본이 <a> 에 준 생김새를 그대로 맞춘다. */
.doc-list button.doc-btn { padding: 0; background: none; cursor: pointer; font: inherit; }
/* 빈 목록 — 정본에는 이 상태가 없다(시안은 카드가 늘 차 있다). */
.doc-list-empty { margin: 0; padding: 4.8rem 1.6rem; text-align: center; color: #6B7280;
  border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }

/* 통합검색 「찾지 못했을 때」 (2026-08-21) — 정본 search_result.html 에는 이 상태가 없다
   (시안은 결과가 늘 있다). 빈 화면만 남기면 «고장» 처럼 보여, 무엇을 찾았는지 되짚어 주고
   다음에 할 일을 알린다. 나머지 47개 규칙은 정본이 `.search-result` 아래에 갖고 있다. */
.search-result .search-empty { padding: 8rem 1.6rem; text-align: center; color: #555; }
.search-result .search-empty .bi { display: block; font-size: 4.8rem; color: #B6BEC9; margin-bottom: 1.6rem; }
.search-result .search-empty-tit { margin: 0; font-size: 1.9rem; color: #222; }
.search-result .search-empty-sub { margin: 0.8rem 0 0; font-size: 1.5rem; color: #6B7280; }
@media (max-width: 1024px) {
  .dvideo-list { grid-template-columns: 1fr; gap: 2rem; }
  .dvideo-band { padding: 2rem 0; }
}

/* =====================================================================
   ③ 인쇄(@media print) — 서브 타이틀 유틸의 「인쇄」 버튼(window.print)이 실제로 쓸 만한 출력을 내게 한다
      (2026-08-19, PM). 퍼블리셔 전달본에는 인쇄 규칙이 없다 — 그래서 fixed 헤더·GNB 그리드가 인쇄 폭에서
      무너져 메뉴 글자가 세로로 흩어지고(「제 사 알 참 정 기」), 유틸바·전자점자·햄버거·푸터가 함께 찍혔다(실측 3쪽).
      원칙: 본문만 남긴다 — 로고 한 줄 + 브레드크럼 없이 타이틀 + 본문. 화면용 클래스는 건드리지 않는다.
   ===================================================================== */
@media print {
  /* 껍데기 제거 — 스킵·유틸바·GNB·검색/햄버거·모바일 전체메뉴·브레드크럼·타이틀 유틸(공유/링크/인쇄)·형제탭·푸터·TOP·전역검색 */
  #skip, .header-utility, .gnb, .header-btn, .mobile-gnb, .global-search,
  nav.breadcrumb, .sub-head .util, .tab-btns, footer.footer-wrap, .btn-top, .quick-menu {
    display: none !important;
  }
  /* fixed 헤더는 인쇄 페이지마다 겹쳐 찍히거나 본문을 가린다 — 흐름 속 정적 요소로. 로고만 한 줄 남긴다. */
  .header-wrap { position: static !important; box-shadow: none !important; border-bottom: 1px solid #ccc; }
  .header-main { display: block !important; padding: 0 0 0.8rem !important; height: auto !important; }
  /* fixed 헤더 높이만큼 주던 본문 상단 여백을 되돌린다 */
  #wrap, .sub-wrap, .container-wrap, #container { padding-top: 0 !important; margin-top: 0 !important; }
  #wrap, .container-wrap, .container, .rnw-sub { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  html, body { background: #fff !important; }
  .sub-head { padding: 0.8rem 0 !important; border: 0 !important; }
  /* 4뎁스 박스탭 — 탭 막대는 화면 조작 요소라 찍지 않는다(보이는 패널만 찍힌다). */
  .rnw-boxtab { display: none !important; }
  /* 오시는 길 지도 — 확대/축소·건너뛰기 링크는 빼고 지도 그림만. 표·정의목록 항목은 페이지 경계에서 잘리지 않게. */
  .rnw-map { height: 320px !important; break-inside: avoid; page-break-inside: avoid; border-color: #999 !important; }
  .rnw-map .leaflet-control-container, .rnw-map-skip, .rnw-map-end { display: none !important; }
  .rnw-dl-item, .rnw-tbl, table { break-inside: avoid; page-break-inside: avoid; }
  a[href]::after { content: none !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
}
/* =====================================================================
   ③ 메인 배너 슬롯 — **규격이 다른 이미지는 자르지 않고 가운데에 담는다** (2026-08-19, 발주처 지시)

   퍼블리셔 전달본은 `.main-wrap .main-visual img { width:100%; object-fit:cover }` 다(page.css:37).
   cover 는 슬롯을 꽉 채우는 대신 **넘치는 쪽을 자른다** — 운영 배너(1294×480 = 2.7:1)를
   시안 슬롯(670×473 = 1.42:1)에 넣으면 좌우가 약 47% 잘려 문구가 통째로 사라진다(DESIGN M-12 실측).
   또 슬라이드마다 이미지 비율이 다르면 **높이가 들쭉날쭉**해져 넘길 때마다 화면이 튄다.

   그래서 여기서 셋을 한다.
    ① 슬라이드에 **슬롯 종횡비를 고정**한다(670/473) — 어떤 이미지가 와도 높이가 같다.
    ② `object-fit: contain` + `object-position: center` — 잘리지 않고 **가로·세로 가운데** 정렬된다.
       남는 자리는 퍼블리셔 배경색(#6a7387)이 그대로 보인다.
    ③ 관리자 설정(`main.banner.fit`)이 실제로 먹게 한다 — `is-cover` 면 종전처럼 꽉 채운다(잘림 감수).
   퍼블리셔 파일(page.css)은 한 줄도 고치지 않는다 — 다음 전달본으로 통째 교체할 수 있어야 한다.
   ===================================================================== */
.main-wrap .main-visual .visual-swiper .swiper-slide {
  aspect-ratio: 670 / 473;
  display: flex;
  align-items: center;      /* 세로 가운데 */
  justify-content: center;  /* 가로 가운데 */
  overflow: hidden;
}
/* 링크로 감싼 배너도 슬롯을 가득 차지해야 가운데 정렬이 성립한다. */
.main-wrap .main-visual .visual-swiper .swiper-slide > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.main-wrap .main-visual .visual-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* 자르지 않는다 */
  object-position: center center;
}
/* 관리자가 「꽉 채우기」를 고른 경우에만 종전 동작(잘림). */
.main-wrap .main-visual.is-cover .visual-swiper .swiper-slide img { object-fit: cover; }

/* ================================================================
   퍼블 2차 표(`table.tbl.row.data`)가 **부트스트랩 그리드에 먹히던 것** 되돌리기
   (2026-08-19 · 게시물 상세 전환 중 실측으로 발견)

   무슨 일이 있었나
     퍼블 2차의 세로형 표는 클래스가 `tbl row data` 다. 그런데 우리 `css/portal/base.css:81` 에는
     부트스트랩 그리드 잔재인 `.row{ display:flex; flex-wrap:wrap; margin:0 -.75rem }` 이 남아 있다.
     이름이 겹치는 바람에 **표가 flex 컨테이너가 되어** `table-layout`·`colgroup`·`colspan` 이
     통째로 무시됐다. 실측: `table.tbl` 의 computed display 가 `flex`, 두 번째 행 th 폭이
     의도한 268px(20%) 대신 123px — 화면에서는 표가 컨테이너의 40% 폭으로 쪼그라들어 보였다.

   왜 눈치채기 어려웠나
     표는 **그려지긴 한다.** 테두리·배경도 나온다. 좁아졌을 뿐이라 "디자인이 저런가 보다"로 넘어가기 쉽다.
     CSS 파일 어디에도 `table{display:flex}` 라고 적힌 곳이 없어 grep 으로도 찾히지 않았다 —
     computed style 을 실제로 재고 나서야 드러났다.

   이것은 HANDOVER 「⑤ Bootstrap 유틸은 KRDS 레이아웃을 조용히 덮어쓴다」와 **같은 결함 계열**이다
   (`d-lg-block` 이 `.rnw-gnb{display:flex}` 를 눌렀던 사건). 클래스 이름이 겹치는 두 체계를 한 문서에
   함께 실으면 반드시 이런 일이 난다.

   근본 조치는 base.css 의 부트스트랩 그리드를 걷어내는 것(ROADMAP R6)이고, 그때까지 여기서 막는다.
   ※ `table` 요소로 한정한다 — 진짜 그리드 `.row`(폼 2단 배치 등)는 그대로 두어야 한다.

   ★ 2026-08-20 퍼블리셔 회신(Q4-2): 다음 전달분부터 세로형 표의 클래스를 `row` → **`tbl-vertical`** 로
     바꿔 주기로 했다. 그때가 되면 이 방어는 «필요 없어지지만 해롭지도 않다»(`table.row` 가 없어질 뿐).
     전달분이 섞여 들어오는 동안 두 이름이 공존하므로 **지우지 말고 그대로 둔다** —
     한쪽만 남기면 아직 옛 이름인 화면이 조용히 다시 쪼그라든다.
     새 이름 쪽에는 방어가 필요 없다(부트스트랩에 `.tbl-vertical` 이 없다) — 그것이 이름을 바꾸는 이유다.
   ================================================================ */
table.row {
  display: table;
  flex-wrap: nowrap;
  margin-right: 0;
  margin-left: 0;
}
/* `.row>*{padding:0 .75rem}` 도 셀에 끼어든다 — 표 셀은 KRDS 패딩을 쓰게 되돌린다. */
table.row > *,
table.row > * > tr > th,
table.row > * > tr > td {
  padding-right: unset;
  padding-left: unset;
}

/* ================================================================
   브레드크럼이 «타이틀과 왼쪽 끝이 안 맞던» 것 되돌리기
   (2026-08-19 발주처 지적 · 넓은 해상도에서만 드러난다)

   무슨 일이 있었나
     퍼블 2차는 브레드크럼 바를 풀블리드로 깔고 그 안의 `.breadcrumb-list` 를
     `max-width:1600px; margin-left:auto; margin-right:auto` 로 가운데 세워
     본문 `.content`(같은 1600px 중앙정렬)와 왼쪽 끝을 맞춘다.
     그런데 우리 `css/portal/base.css:179` 에 부트스트랩 `.breadcrumb`
     (`display:flex; flex-wrap:wrap; padding:10px 16px; margin-bottom:1rem`)가 남아 있어
     그 규칙이 퍼블 것을 덮었고, **auto 여백이 죽어 리스트가 화면 왼쪽 끝(x=0)에 붙었다.**

   왜 늦게 발견됐나
     `.content` 의 max-width 가 1600px 이라 **1400px 이하에서는 둘 다 x=24 로 같아 보인다.**
     1920px 에서 재야 갈린다 — 퍼블 원본 x=148 / 우리 x=0(2026-08-19 실측).
     좁은 폭 캡처만 보고 「맞다」고 판단하면 놓친다.

   `.row` 사건과 **같은 계열**이다(HANDOVER ⑤). 부트스트랩과 KRDS 가 같은 낱말을 쓴다.
   근본 조치(base.css 부트스트랩 잔재 제거)는 R6 이고, 그때까지 여기서 막는다.
   ※ `nav.breadcrumb` 로 한정한다 — 부트스트랩식 `<ol class="breadcrumb">` 를 쓰는
     미전환 화면은 건드리지 않는다.
   ================================================================ */
nav.breadcrumb {
  flex-wrap: nowrap;
  padding: 0;
  margin-bottom: 0;
  background: transparent;
  border-radius: 0;
  list-style: none;
}
/* 리스트가 «가운데 1600px» 을 차지해야 타이틀과 왼쪽 끝이 맞는다. */
nav.breadcrumb > .breadcrumb-list {
  max-width: 1600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* 부트스트랩이 항목 사이에 넣던 `/` 구분자를 없앤다 — 퍼블은 화살표 아이콘을 따로 그린다. */
nav.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: none;
  padding: 0;
}

/* ── 안내 토스트 — 「주소가 복사되었습니다」 (2026-08-20) ─────────────────
   공유·인쇄는 창이 떠서 눌린 줄 알지만 URL 복사는 아무 표시가 없었다.
   화면 아래 가운데에 잠깐 떠서 알리고, `role="status"` 라 스크린리더도 읽는다. */
.rnw-toast {
  position: fixed;
  left: 50%;
  bottom: 4rem;
  z-index: 1300;
  transform: translateX(-50%) translateY(1rem);
  padding: 1.2rem 2.4rem;
  border-radius: 3rem;
  background: rgba(20, 24, 32, .92);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.rnw-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================================
   ★ 라디오·체크박스가 «보이지도 눌리지도» 않던 결함 — 2026-08-20 (클린신고 접수 동의)
   ----------------------------------------------------------------------------
   퍼블(KRDS) `output.min.css` 에 이 규칙이 있다:
     input[type=radio],input[type=checkbox]{position:absolute!important;width:1px!important;
       height:1px!important;margin:-1px!important;clip:rect(0,0,0,0)!important;border:0!important}
   KRDS 는 «자기 컴포넌트»(`.krds-form-check > input ~ label`)가 `label::before` 로 동그라미를
   직접 그리기 때문에 네이티브 입력을 숨긴다. 그런데 이 규칙은 **화면의 모든 라디오·체크박스**에
   `!important` 로 걸린다 — KRDS 마크업이 아닌 우리 폼(`.frm-radio` 등)에서는 그리는 쪽이 없어
   **동그라미가 사라지고 클릭 대상도 1px 로 줄어든다.**
   실측(2026-08-20 클린신고 STEP01): `width=1px height=1px position=absolute margin=-1px`,
   라벨 `::before` 는 `content=none` — 화면에 아무것도 없으니 「동의합니다」를 누를 수가 없었다.
   접수 자체가 막히는 결함이라 **화면 하나가 아니라 규칙 층위에서** 되돌린다.

   되돌리는 방법: 네이티브를 되살리고, **KRDS 컴포넌트 안에서만** 다시 숨긴다(그쪽은 그리는 쪽이 있다).
   순서·특정도 모두 아래가 이기므로 KRDS 화면은 종전과 똑같이 동작한다.
   ========================================================================== */
input[type="radio"], input[type="checkbox"] {
  position: static !important;
  width: 1.8rem !important;
  height: 1.8rem !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: initial !important;
  accent-color: var(--primary-color, #16337E);
}
.krds-form-check input[type="radio"], .krds-form-check input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================================
   이행 본문(레거시 그누보드) 의 «옛 글꼴 지정» 만 사이트 서체로 되돌린다 — 2026-08-19
   ----------------------------------------------------------------------------
   이행된 본문에는 스타일이 CSS 가 아니라 **본문 안에 박혀** 있다(실측 게시물 80건 조사):
     · 인라인 `font-family` 35건 — 돋움 · verdana · 나눔고딕 · 한양신명조 …
     · `<font face=…>` 6건
   그래서 같은 화면 안에서 문단마다 글꼴이 달라지고, 사이트 서체(Pretendard GOV)와도 어긋난다.
   본문을 통째로 다시 쓰는 것은 3,496건을 건드리는 별도 작업이라, **화면 쪽에서 글꼴만** 되돌린다.

   크기(font-size)는 **일부러 두었다** — 이행 본문은 제목 18pt · 본문 11pt 처럼 «크기로 위계»를
   표현한다. 여기서 크기를 통일하면 공고문의 제목·강조가 한꺼번에 사라진다.
   (본문 정규화로 크기까지 정리할지는 발주처 확인 사항 — 되돌리려면 이 블록만 지우면 된다.)
   ========================================================================== */
.post-content font,
.post-content [style*="font-family"],
.jenny-content font,
.jenny-content [style*="font-family"],
.rnw-sub-body font,
.rnw-sub-body [style*="font-family"] {
  font-family: inherit !important;
}

/* 조직도(650) 검색 결과 안내 — 아무것도 안 나왔을 때 «빈 화면» 을 두지 않는다 (2026-09-07).
   자리는 부서 목록 «바로 위» 다(js/org-chart.js 가 넣는다). */
.org-search-note {
  margin: 0 0 1.6rem;
  font-size: 1.5rem;
  color: var(--krds-light-color-text-basic, #1e2124);
}

/* =============================================================================
   FAQ 아코디언 — 정본(debc_pb_260912 · sub4_1_1) 보강 (2026-09-14)

   정본은 질문을 `dt` 에만 걸어 **키보드로 열 수 없다**(탭 키가 dt 에 멈추지 않는다).
   dt 안에 button 을 두었으므로 그 단추의 기본 서식만 걷어 **정본 모양 그대로** 보이게 한다.
   (글꼴·굵기·크기는 dt 의 것을 물려받는다 — 정본 css 가 dt 에 걸어 두었다.)
   ============================================================================= */
/* ★ 「Q.」 표식을 dt 에서 단추 안으로 옮긴다 (2026-09-14 배포 후 375px 실측).
   단추는 display:inline 을 줘도 «인라인 블록 상자» 로 그려진다(단추의 성질). 그래서 질문이 길어
   줄이 바뀌면 상자째 다음 줄로 내려가 **「Q.」 만 윗줄에 홀로 남았다**(1440 에서는 한 줄이라 안 보였다).
   표식을 단추 안의 ::before 로 옮기면 정본(dt 안에서 「Q.」 와 글자가 한 흐름)과 똑같이 감싼다. */
.sub4_1_1 .faq-item dt::before {
    content: none;
}
.sub4_1_1 .faq-item dt > .faq-q {
    all: unset;
    display: block;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}
.sub4_1_1 .faq-item dt > .faq-q::before {
    content: 'Q.';
    margin-right: 20px;
    color: #4873e6;
}
.sub4_1_1 .faq-item dt > .faq-q:focus-visible {
    outline: 2px solid #4873e6;
    outline-offset: 4px;
}
/* 답변은 에디터 HTML(문단 여러 개)이다. 정본 dd 는 「A.」 뒤에 글자가 이어지는 «내어쓰기»
   (padding-left 6rem + text-indent -3.3rem)라, 문단마다 그 음수 들여쓰기를 물려받으면
   둘째 문단부터 글머리가 왼쪽으로 삐져나간다. 첫 문단만 「A.」 와 같은 줄에 두고 나머지는 들여쓰기를 끊는다. */
.sub4_1_1 .faq-item dd > .faq-a { display: inline; }
.sub4_1_1 .faq-item dd > .faq-a > :first-child { display: inline; margin: 0; }
.sub4_1_1 .faq-item dd > .faq-a * { text-indent: 0; }
.sub4_1_1 .faq-empty { padding: 4rem 0; text-align: center; color: #555; }

/* ------------------------------------------------------------------
   구분(분류) 목록상자 — «지금 고른 것» 표시 (2026-09-20)

   정본(sub5_2_1_1·sub5_2_2_1)은 좁은 화면에서 탭 격자를 감추고 목록상자로 바꾸면서,
   고른 항목을 `.dropdown-option[aria-selected=true]` 로 굵게·파랗게 칠한다.
   우리 항목은 «버튼» 이 아니라 **링크**다(서버가 걸러 페이지를 다시 준다) —
   `aria-selected` 는 탭·옵션 역할에만 쓸 수 있는 속성이라 링크에 붙이면 잘못된 ARIA 가 된다.
   그래서 올바른 `aria-current="page"` 를 쓰고, 같은 모양을 여기서 이어 준다.
   (DESIGN §7-4 — 접근성 보정은 퍼블리셔 마크업보다 우선한다.)
   ------------------------------------------------------------------ */
.dropdown .dropdown-option[aria-current="page"] { font-weight: bold; color: #4a75e5; }